전날 공부했던 내용 중 대답하지 못했던 질문에 대해 정리해보는 시간
npm과 webpack
summary
- npm은 node package manager로 모듈관리자이다.
- webpack은 여러가지 모듈을 모아서 하나로 만들어주는 모듈 번들러이다.
NPM이란
Node Package Manager: 자바스크립트 패키지 관리 모듈
- node_modules 폴더에 라이브러리를 받고 package.json에 명세해 관리해준다. (hpmjs.xom에서 제공)
package.json은 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를 명시하는 파일이다.
일반적으로 루트 디렉토리에 위치한다.
작성되는 정보를 크게 2개로 나누면 프로젝트 정보, 패키지 정보로 나눌 수 있다.
1) 프로젝트 정보 : name, version 영역
2) 패키지 버전 정보 : devDependencies또는 dependencies 영역 - npx: npm에서 제공하는 실행 도구(node.js 기반 파일들의 설치와 실행을 돕는 도구)
- 1회성 패키지 실행 시, 특정 노드 버전의 스크립트 실행 시 유용하다.
yarn : 페이스북에서 npm을 개선해 만든 것으로 비슷한 역할을 수행한다.
Webpack이란
webpack : 기본 웹 문서 파일인 html/css/js가 아닌 다른 스타일의 웹 문서를 해석해주는 컴파일러 같은 역할을 한다.
- 파일 단위를 적절한 크기로 나누거나 묶어주는 역할
- 불필요한 파일 제외, 압축 등
- 노드 기반 웹 서버 구동
- 브라우저에서 import(require)를 할 수 있게 도와줌
webpack-dev-server
별도의 서버를 구축하지 않고 static 파일을 다루는 웹 서버를 열고 hot-loader 기능을 제공해 수정된 코드를 자동으로 반영한다.
dependencies와 devDependencies의 차이
Summary
이 둘의 차이점은 실제 상품에서 사용할 패키지와 개발용 패키지의 차이이다. 진짜 기술스펙으로 사용되어야할 라이브러리들은 dependencies에 설치해준다.
어떤 라이브러리가 프로젝트의 컴파일(빌드) 타임에 필요하면, devDependencies에 넣고, 런타임에도 계속 쓰이는 것이면 dependencies에 넣는다.
dependencies
프로덕트 환경에서 응용 프로그램에 필요한 패키지
devDependencies
로컬 개발 및 테스트에만 필요한 패키지
서버 사이드 렌더링(SSR) & 클라이언트 사이드 렌더링(CSR)
Summary
CSR: 클라이언트 사이드 렌더링(Client Side Rendering)
SSR : 서버 사이즈 렌더링(Server Side Rendering)
❗️렌더링이란 ?
서버로부터 요청해서 받은 내용을 브라우저 화면에 표시하는 것
❗️❗️렌더링의 과정
- Loader가 서버로부터 정보들을 불러온다.
- 파싱을 통해 문서를 DOM트리로 만든다.
- DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다.
- CSS 설정 / 레이아웃 위치를 지정한다.
- 렌더링 트리가 그려진다.
서버사이드 렌더링(SSR)
서버사이드 렌더링(SSR)은 페이지를 이동할때마다 새로운 페이지를 요청한다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다.
장점
- 성능개선
첫 렌더링된 html을 클라이언트에게 전달해주기 때문에 초기 로딩속도를 많이 줄려줄 수 있다. 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨테츠를 이용할 수 있게 된다.
단점
- 프로젝트의 복잡도
- 페이지 이동시 화면이 깜빡 거린다.
- 서버 렌더링에 따른 부하가 발생한다.
❗️ 페이지 요청마다 페이지 새로고침이 발생한다.
클라이언트 사이드 렌더링(CSR)
클라이언트에서 렌더링하는 방식이다. (Client Side Rendering)
자세히 읽어보기
장점
첫 요청할때 한 페이지만 불러온다.
그 후, 사용자의 행동에 따른 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링해 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있다.
즉, 필요한 부분만 리로딩 없이 서버로부터 받아서 화면을 갱신하게 된다.
단점
- 초기 구동속도가 느리다.
- 검색엔진 최적화가 어렵다.
위에서 언급했듯이 SSR과 달리 서버로부터 데이터를 받아서 클라이언트에서 렌더링하는 방식이다. 이러한 변화는 두 가지 문제를 해결한다.
- 바뀐 부분만 렌더링
- 단위를 나눠서 관리 가능
- 코드의 재사용성을 높여줌
서버 사이드 렌더링과 클라이언트 사이드 렌더링 차이점
이 둘의 차이는 화면에 보일 페이지의 내용을 그리느냐의 차이이다. 클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서, 그리고 서버사이드 렌더링은 서버에서 페이지의 내용을 다 그려서 브라우저로 던져준다.
리엑트 props key
Summary
key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다.
key를 props에 넘기는 이유가 무엇일까?
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부요하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
keyt를 선택하는 가장 종은 방법은 식별할 수 있는 문자열, 데이터의 ID를 key로 사용하는 것이다.
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.next}
</li>
);렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있다.
하지만 이것은 권장하지 않는다.
key로 인덱스를 사용하는 것이 권장되지 않는 이유
인덱스로 key를 사용할 경우, 성능이 저하되거나 컴포넌트의state와 관련된 문제가 발생할 수 있다.
안심하고 index를 key로 사용할 수 있는 경우
1. 배열과 각 요소가 static이며 Compute되지 않고 변하지 않아야 한다.
2. 데이터 내부에 id로 쓸만한 unique값이 없을 경우
3. 데이터가 결코 reordered or filtered되지 않을 경우
즉 데이터가 절대 변하지 않을 경우에만 사용한다. (그냥 쓰지말아라)
