📂 위클리 페이퍼 (15) 썸네일형 리스트형 [13주차] Next.js의 SSR 실행 과정 & Hydration 📌 Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요. 🤖 SSR 실행 과정 데이터 리퀘스트가 들어왔다면, 프론트 서버에서 필요한 데이터를 백엔드 서버에 요청 받은 데이터를 활용해 프론트 서버에서 HTML을 렌더링 → 프리렌더링 프론트 서버에 요청한 페이지에 필요한 HTML, CSS, JS 코드를 브라우저(프론트 클라이언트)로 전달 클라이언트는 우선 미리 서버에서 렌더링된 HTML, CSS 코드 내용을 화면에 보여주고, 필요한 JS 코드를 가져온다. → 사용자는 우선 인터랙션할 수 없는 HTML, CSS 코드로만 그려진 화면을 보게 되는 것! 리액트 hydration 이후 인터랙션이 가능한 페이지가 띄워짐. ⇒ SSR은 UI가 미리 완성된 화면에서 JS를 실행하고, CSR.. [13주차] Next.js를 사용하는 이유 📌 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요. 😭 순수 리액트의 한계 순수 리액트는 Single Page Application & Client Side Rendering을 지원 웹 사이트를 요청할 때 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 HTML을 가져와 script를 로딩하는 방식이기 때문에 첫 로딩 시간이 오래 걸림 → UX 저하 SEO에 취약 대부분 웹 검색 엔진의 크롤러 봇은 JS까지 다 다운받고 실행하지 않고, 그냥 HTML에 들어있는 내용으로만 정보를 수집 따라서 CSR 방식은 빈 HTML 파일을 보내주니까, 수집할 정보가 없는 것! → SEO에 취약할 수밖에 없다. 👍 Next.js를 사용하는 이유 프리렌더링 Next.js는 정적 생성과 SSR.. [12주차] TypeScript를 사용하는 이유와 동작 원리 📌 JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해주세요 💡 JavaScript + Type = TypeScript 자바스크립트는 C-family(C, C++ Java 등) 언어와 다른 점을 가지고 있다. Prototype-based Object Oriented Language Scope와 this 동적 타입 언어 위의 특성들로 인해 (클래스 기반 객체지향 언어에 익숙한) 여러 개발자들이 참여하는 규모가 큰 프로젝트에서는 주의하여 사용하여야 한다. 이런 자바스크립트의 태생적인 문제들을 극복하고자 TypeScript를 도입한 것이다. ✅ 점진적 타입 언어 TypeScript를 사용하는 가장 큰 이유 점진적 타입 언어란? 동적 타입 언어와 정적 타입 언어를 혼합한.. [9주차] Presentational & Container 디자인 패턴이란? 📌 Presentational & Container 디자인 패턴에 대해 설명해 주세요. 👩💻 Presentational & Container 디자인 패턴이란? 로직을 위한 컴포넌트와 UI(view)를 위한 컴포넌트를 분리한 패턴 → 관심사를 2개로 분리한 것! container 내에 데이터를 props를 통해 다른 컴포넌트에 전달한다. view 로직의 분리를 통해 컴포넌트의 재사용성을 극대화시킨다. 💄 Presentational 컴포넌트 UI와 관련된 컴포넌트 state를 직접 조작하지 않는다. state 관련 훅을 사용하지 않는다. container 컴포넌트로부터 받은 props를 통해 로직을 구현한다. → 순수하다. 다른 맥락과 독립적으로, 재사용하기 쉽게 설계한다. 🔧 Container 컴포넌트 .. [9주차] CSS-in-JS의 장단점 📌 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요. 👼 장점 지역 스코프로 스타일을 적용한다. CSS로 스타일링을 하면 클래스가 전역 스코프로 선언되기 때문에 클래스 이름이 중복된 경우 원치 않는 스타일링을 하게 될 수 있다. 스타일 코드를 관리하기가 쉽다. .css 파일은 주로 src/styles 디렉토리에서 관리된다. 컴포넌트가 많아지고, 프로젝트 규모가 커질수록 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어렵다. CSS-in-JS는 컴포넌트 파일에서 스타일까지 한번에 다룰 수 있다. 자바스크립트 변수를 스타일에 사용할 수 있다. 동적 스타일링을 하기 쉽다. 👿 단점 런타임 오버헤드를 늘린다. 렌더링될 때 document에 삽입할 수 있는 일반 CSS로 스타일을 직렬화.. [8주차] 리액트 생명주기란? 📌 리액트 생명주기(life cycle)에 대해 설명해 주세요. 컴포넌트는 3단계의 생명주기를 갖는다. 생성 (mounting) 업데이트 (updating) 제거 (unmounting) 클래스 컴포넌트 마운트 (mount) constructor 컴포넌트의 생성자 메소드 컴포넌트가 생성되면 가장 먼저 실행된다. 생성된 리액트 element를 return한다. getDerivedStateFromProps props로 받아온 것을 state에 설정하고 싶을 때 사용한다. render 컴포넌트를 렌더링하는 메소드 componentDidMount 첫번째 렌더링이 끝나면 호출되는 메소드 컴포넌트의 마운트가 끝났다는 것을 알려준다. 이 메소드가 호출되면 화면에 컴포넌트가 나타난 것이다. 업데이트 (updating) .. [7주차] React 배열 렌더링에서 Key를 사용하는 이유 📌 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. key값을 사용해야 하는 이유 예를 들어, [딸기, 망고, 포도] 에서 [딸기, 포도]로 결과가 바뀌면 망고를 삭제한건지 포도를 삭제 → 망고를 포도로 교체 인지 알 수가 없다! → 배열의 변화를 정확하게 전달하기 위해 key를 사용해야 한다. 만약 [망고, 포도] → [사과, 망고, 포도]가 된 경우 리액트 입장에서는 처음에 데이터를 비교하였을 때 망고 ≠ 사과 이기 때문에 망고, 포도는 이미 존재하는 데이터임에도 불구하고 전체 순서가 변경되었다고 생각해 전체 요소를 새로 렌더링하게 된다. → 엄청나게 비효율적인 방식인 것이다. 만약 key값을 설정해 준다면, 리액트는 original DOM과 비교하여 사과만 새로운 데이.. [7주차] 리액트 Virtual DOM이란? 📌 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. DOM Document Object Model Document : 하나하나의 HTML element를 담고 있는 웹페이지 HTML element를 tree 형태로 표현한 것 브라우저는 이 DOM을 분석하여 우리에게 페이지를 띄워주는 것이다. DOM 조작 DOM이 제공하는 API를 통해 DOM tree에 접근하고, 원하는 element를 조작하는 것 ex. getElementById, querySelector Virtual DOM 실제 DOM의 복사본 JS 객체 형태로 메모리에 저장되어 있다. virtual DOM은 브라우저에 있는 문서에 직접적으로 접근할 수 없다. 즉, 화면에 보여지는 내용을 직접 수정할 수 .. [6주차] AJAX란? 📌 AJAX에 대해 설명해 주세요. AJAX란? AJAX : Asynchronous JavaScript And XML JavaScript를 사용해서 client와 server가 Asynchronous하게 통신하는 웹 페이지를 만드는 개발 기법 중 하나다. 여기서 통신은 client가 request를 보내고, server가 response를 보내주는 것을 의미한다. 비동기적 통신 방법 중 하나라고 이해해도 된다. 다음과 같은 데이터 타입들로 AJAX 통신을 할 수 있다. JSON [6주차] setTimeout() 실행 과정 📌 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요. // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 1번 코드에 의해 num에 1이 할당된다. setTimeout()은 Web API가 처리하도록 실행 흐름을 넘긴다. setTimeout(callback, 0)이 실행되면 callback함수를 callback queue 로 넘긴다. 3번 코드에 의해 num에 3이 할당된다. 4번 코드에 의해 현재 num에 할당된 3이 출력된다. 이후 call stack이 비어있으면, Event Loop가 그것을 확인하고 callback queue에 저장해둔 callback.. 이전 1 2 다음