분류 전체보기

React의 SSR ( Server Side Rendering ) 을 쉽게 구현할 수 있게 도와주는 프레임워크. 리액트로 개발할 때 SPA를 이용하며 CSR (Client Side Rendering) 을 하기 때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화 (SEO) 부분이다. CSR을 하면 첫 페이지에서 빈 html을 가져와서 JS 파일을 해석하여 화면을 구성하기 때문에 포털 검색에 노출 될 일이 거의 없다. 하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다. 리액트에서도 SSR을 지원하지만 구현하기에 굉장히 복잡하여 Next.js를..

React Router DOM을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 ReactRouterDOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다. SPA ( Single Page Application ) 리액트는 spa이기 때문에 하나의 index.html 템플릿 파일을 가지고 있다. 이 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html 템플릿에 넣으므로 페이지를 변경해주게 된다. 이 때 React Router DOM 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 주게 된다. React Router Dom 설치하기 npm install reac..

1.렌더링 2. useEffect가 실행되고 데이터를 가져오고 3.가져온 데이터를 이용해서 다시 렌더링 하는 과정 중 1번 과정에 데이터를 아직 안가져왔을 때 렌더링을 하여 에러가 발생. undefined의 속성인 map을 읽을 수 없다는 내용이다. (undefined.map을 했단 소리) 이 문제를 해결하기 위해 true && expression을 사용하여 에러없이 깔끔하게 해결! true && expression 이란 { true && expression } 은 항상 expression { false && expression }은 항상 false 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다. 참고 https://ko.legacy.reactjs.org/..

Async & Await 은 Promise를 한단계 감싸서 더 보기 편하게 만들어주는 문법 promise chaining 같은 복잡한 체이닝 없이 마치 동기적인 코드를 작성하는 것처럼 간편하게 코드를 작성할 수 있다. (내부적으로 promise를 쓰기 때문에 promise의 연장선이라 볼 수 있다.) Async 함수를 작성할때 function을 쓰는데 그 앞에 async를 작성해주면 항상 promise를 리턴하는 비동기 함수로 변한다. async function getUser() { return '윤구'; } const user = getUser(); console.log(user); // promise {: '윤구'} 값을 리턴하는 비동기 함수를 출력해보면 값 대신 promise 객체로 출력되는 것을 ..

자바스크립트는 비동기 처리를 위해 콜백함수를 사용한다. 하지만 콜백을 너무 남용하게 되면 우리가 흔히 부르는 콜백 지옥에 빠질 수가 있다. 이러한 단점을 보완해서 사용하는 것이 Promise 이다. Promise는 비동기 처리에 사용되는 자바스크립트 객체 비동기 작업이 맞이할 성공 혹은 실패를 나타냄 promise에 대해 이론적으로 접근하면 어려우니 추상적으로 접근해보자. 여기 비동기 작업이 시작될때 생성되는 promise라는 상자가 있다. 이 상자는 처음에 텅 비어있다가 비동기 작업이 완료될때 결과물로 가득 차있게 된다. 이처럼 promise는 비동기 작업의 상태를 나타낸다. 비동기 작업에는 시간이 걸리고 언젠가 끝나게 된다. 이 작업에는 성공할 때도 있고 실패할 때도 있는데 예를 들어 서버로부터 데이..

콜백 패턴에 대해 알기 전에 동기와 비동기에 대해 짚고 넘어가자. 동기 비동기 순차적으로 실행 한 작업이 완료 되어야 다음 작업 시작 장점: 프로그램의 흐름을 이해하고 예측하기 쉬움 단점: 작업이 끝나기를 기다리는 동안 다른 작업을 수행할 수 없어 효율성 떨어짐 각각 독립적으로 실행 완료를 기다리지 않고 다른 작업 시작 장점: 효율적으로 작동하며 여러 작업을 동시에 처리 단점: 프로그램의 흐름을 추적하고 관리가 복잡함 비동기 코드가 어려운 이유 일반적인 js코드 작성 방식은 동기식 (자바스크립트는 위에서 아래로 순차적으로 코드를 실행하기 때문) 비동기는 내부적으로 비동기 메커니즘 ( 예: 이벤트루프 )을 통해서 도익와는 다른 방식으로 처리 개발자는 코드를 동기적으로 작성하지만, 비동기 코드는 시스템의 내..

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 사용. 자바스크립트 내장 라이브러리인 fetch API보다 좀 더 개발자 친화적인 서드파티 라이브러리. 실무에서 fetch보다 Axios 많이 사용. Axios 사용 방법 npm install axios --save axios.get(API 주소), axios.post(API 주소) Axios 인스턴스화 하기 다양한 API를 요청하다보면 API key값이 겹치는 부분이 발생한다. 그럴때 중복된 부분을 계속 입력하지 않도록 인스턴스화를 한다. get movie by latest https://api.themoviedb.org/3/movie/latest?a..