JAEJAE imojeomo

[React] 리액트 기술 면접 핸드북 VI - SPA, SSR, SEO etc.

1. SPA2. SSR3. SEO1. SPA란 ⭐️SPASingle Page Application의 약어로, 한 개의 페이지로 이루어진 애플리케이션이라는 의미전통적인 웹 페이지는 여러 페이지로 구성되어 있는데, 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줌사용자에게 보이는 화면은 서버 측에서 준비했단 말씀! 사전에 html 파일을 만들어서 제공하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용하기도 했음하지만!! 요즘엔 웹에서 제공되는 정보가 너무 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버 측에서 모든 뷰를 준비하면 성능이 엄청 떨어질 수 있음(트래픽이 너무 많이 나온다거나,..

[React] 리액트 기술 면접 핸드북 V - useLayoutEffect, 이벤트 핸들링 etc.

1. useLayoutEffect2. 컴포넌트 이벤트 핸들링1. useLayoutEffect 이란 ⭐️리액트 훅 함수를 바탕으로 한 생명주기는 다음과 같음브라우저가 렌더링될 때 .js파일은 브라우저에서 자바스크립트 엔진으로 권한을 넘겨 .js 해당 파일을 파싱하고 그리게 됨위 그림의 훅 라이프 사이클을 보다시피 브라우저가 스크린에 페인팅 작업이 완료된 이후 useEffect를 실행하는 구조를 가졌음따라서 아래 코드와 같이 렌더링할 때 useState(0)과 같은 초기 useState의 값이 빈 값이라면, 0을 출력했다가 useEffect를 통해 채워지는 구조를 띔// 코드 참고: https://merrily-code.tistory.com/46import { useEffect, useState } from..

1. 컴포넌트의 라이프 사이클 메서드2. Hooks의 종류3. useMemo vs. useCallBack4. setState는 비동기1. 컴포넌트의 라이프 사이클 메서드 ⭐️⭐️- will~ 메서드: 어떤 작업을 작동하기 전에 실행되는 메서드- Did~ 메서드: 어떤 작업을 작동한 후에 실행되는 메서드메서드는 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있음라이프사이클은 총 세 가지, 즉 마운트, 업데이트, 언마운트 카테고리로 나눔마운트 ⭐️DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 함componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드업데이트 ⭐️컴포넌트는 다음과 같은 네 가지 경우 업데이트Props가 바뀔 때state가 바뀔 때부모 컴포넌트가 ..

1. FLUX란2. 리덕스란3. React에서 state 불변성4. 리듀서 내부의 불변성과 ...연산자의 단점 해결 방법5. side effect 문제점1. FLUX 란 ⭐️⭐️FLUX는 라이브러리나 프레임워크가 아닌 추상적인 개념임MVC 패턴에서 쌍방향적인 데이터 흐름을 강조했던 것과 달리 FLUX 패턴에서는 단방향 데이터 흐름을 강조함MVC 패턴사용자의 어떠한 행위(액션)가 있을 때, 이를 바탕으로 설계된 컨트롤러를 통해 모델을 변화하고 이를 뷰에 반영함보여져야 할 뷰가 적거나, 변경될 모델이 많지 않다면 매우 효율적인 구조임하지만, 모델과 뷰가 복잡하게 얽혀 있다면 어떤 모델이 변화되어 뷰가 변경되었는지 제대로 확인할 수 없는 경우가 생김FLUX 패턴MVC 패턴의 단점을 해결하기 위해 나온 단방향 ..

1. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이2. props와 state의 차이1. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이 ⭐️클래스 컴포넌트의 경우객체지향 프로그래밍의 구조를 띄고 있으며, state를 초기화하기 위해 constructor(생성자) 함수를 필요로 함생성자 함수를 통해 state를 초기화해야 하기 때문에 함수 컴포넌트에 비해 코드가 길어지고, 사이즈가 커질 수 있음state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있음render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 함함수 컴포넌트의 경우Hooks를 사용해 생성자 함수를 통해 state를 초기화하지 않더라도 사용이 가능(useState() 등)선언..