Conditional-rendering(조건부 렌더링) Conditional-rendering(조건부 렌더링)란? 특정 조건에 따라 다른 컴포넌트를 렌더링 하는 것 예를 들어, 데이터가 로딩 중 일 때, 데이터가 없을때 등등 다양한 상황에서 조건식에 따라 다른 컴포넌트를 렌더링 할 때 사용 기본적인 자바스크립트에서 제공하는 조건문인 if/else, switch/case 등이 있음 조건부 렌더링 방법 ① if / else 가장 기본적인 방법 컴포넌트 props 값에 따라 리턴하는 리액트 컴포넌트를 분기 처리함 ② switch / case 조건이 다양할 때 사용 ③ 논리 연산자(&&) 논리 연산자 &&를 사용 ┌ ⓐ data가 참일 때 : && 뒤의 data.fetchProduct가 렌더링 됨 ├ ⓑ dat..

Static, Dynamic Routing Routing 이란? 목적지까지 갈 수 있는 여러 경로 중 한가지 경로를 설정해주는 과정을 의미 라우터 객체를 이용해 페이지를 이동하는 것 └ 라우터 객체 : 페이지 이동과 연관된 객체 라우팅의 종류에는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)이 있음 React에서 router를 사용하기 위해서는 위와 같이 useRouter를 사용해야 함 이는 react-hooks 기능을 사용한다는 뜻 Router 객체의 종류 router.push("이동할 페이지") : 지정 페이지로 이동 router.replace("이동할 페이지") : 지정 페이지로 이동하되, 현재 페이지 기록을 저장하지않음 router.back() : 이전 페이..

try ~ catch try ~ catch란... 에러가 발생하게 되면 스크립트는 즉시 중단되고, 콘솔에 에러가 출력되지만, try ~ catch 문법을 사용하면 스크립트가 즉시 중단되는 것을 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 함 try ~ catch 동작 먼저, try { } 안의 코드가 실행됨 에러가 없다면, try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜀 에러가 있다면, try 안 코드의 실행이 중단되고, catch(error) 블록으로 제어 흐름이 넘어감 따라서, try { } 블록 안에서 에러가 발생해도, catch에서 에러를 처리하기 때문에 스크립트는 중단되지 않음 ※ 변수 error(어떤 이름이든 사용 가능)는 무슨 일이 일어났는지에 대한 설..

Async / Await Async / Await 란? Promise를 통해서 비동기 처리를 하는 방법도 있지만, Promise의 단점을 해결하기 위해 ES7에서 async / await 키워드가 추가됨 async / await 키워드를 사용하면 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있음 callback이나 promise와 같이 비동기 코드를 작성하는 새로운 방법 async는 함수 이름의 제일 앞에, await은 결과를 기다릴 함수 앞에 작성함 async는 함수에서 비동기 처리를 위한 promise 동작을 함 await은 호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작을 함 ※ promise는 비동기 처리에서 사용되는 객체로, promise가 상태를 관리하여 다른 코드가 비동기..

Rest-API vs GraphQL-API Rest API란 API(Application Programming Interface)란 └ 데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며, 서로 정보를 교환 가능 하도록 하는 것 REST API의 정의 └ REST 기반으로 서비스 API를 구현한 것 └ 최근 OpenAPI, Micro Service 등을 제공하는 업체 대부분은 REST API를 제공함 REST API의 특징 사내 시스템들도 REST 기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있음 REST는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있음 REST API를 제작하면 델파..

Template Literals Template Literals란? ES6에서 새로 도입된 문자열 표기법 백틱(backtick) ` 을 사용 ┗ 백틱은 키보드에서 숫자 1 왼쪽, tab키 위에 위치했음 / ' (작은 따옴표)와 헷갈리지 말것! 여러 줄에 걸쳐 문자열 작성 가능 └ 줄바꿈을 그대로 표현할 수 있음 특수 기호 $를 사용해서 변수 또는 식 포함 가능 기존 사용 방법 let a = 10; console.log("a의 값은 " + a + "입니다"); └ 위와 같이 + 를 이용해서 문자열을 이어 붙여 사용 Template Literals 사용 방법 let a = 10; console.log(`a의 값은 ${a}입니다); └ 위와 같이 백틱( ` )을 사용하여 기존 사용 방법과 다르게 +를 이용하지..