[JS] Front-end 간략한 용어집 -2 : 저장소, Node/React

해당 글에서는 Front-end에서 용어들에 대해서 정확하게 알고 개념을 이해하기 위한 목적으로 작성한 글입니다.

 

 

1️⃣ 저장소

---

1. 쿠키(Cookie)

---

💡 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간이 존재하는 저장소를 의미합니다.

• [사용 예시]
  • 로그인 화면에서 ‘아이디 자동완성’ 기능에 사용
  • 팝업 화면에서 ‘오늘 하루 보지 않기' 기능에 사용
  • 미 로그인 상태에서 ‘장바구니 담기’ 기능에 사용

 

 

2. 로컬 스토리지(Local Storage)

---

💡 만료기간이 존재하지 않고 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소를 의미합니다.

• 사용 예시
  • 로그인 화면에서 ‘자동 로그인' 기능에 사용

 

 

3. 세션 스토리지(Session Storage)

---

💡 브라우저의 탭 안에서만 유효한 저장소이며, 브라우저를 닫는 경우 소멸이 되는 저장소를 의미합니다.

• 사용 예시
  • 임시로 유지되는 입력 폼 정보에 사용
  • 새로고침 시 데이터 유지 정보에 사용
  • 일회성 로그인 정보에 사용

 

 

4. 쿠키와 로컬 스토리지의 차이점

---

💡 첫 번째는 최대 저장 크기의 차이입니다. 쿠키는 4KB이고 로컬 스토리지는 5KB 이상입니다.
💡 두 번째는 쿠키는 서버에 전송이 되며, 로컬 스토리지는 브라우저 내에 저장이 됩니다.
💡 세 번째는 쿠키는 도중에 조작이 가능하기에 CSRF 공격에 취약하며 로컬 스토리지는 조작이 불가능하기에 상대적으로 안전합니다.

 

 

😄 참고 글 모음

---

[JS] 쿠키(Cookie) 이해하기

[JS] 웹 스토리지(로컬 스토리지 / 세션 스토리지) 이해하기

 

 

 

 

2️⃣ Node / React

---

1. 패키지 매니저(Package Manager)

---

💡  Node.js의 런타임 환경(Runtime)에서 수행하며 프로젝트가 의존(dependency)하고 있는 패키지를 효과적으로 설치, 갱신, 삭제를 할 수 있도록 도와주는 도구를 의미합니다.

• [종류] npm, yarn

 

 

2. dependencies

---

💡 프로젝트에서 의존하고 있는 일반적인 종속성이거나 코드를 실행하는 데 사용하는 패키지들을 포함하고 있으며, 이 의존성 패키지는 컴파일을 수행하고 런타임 단계에서까지 수행되는 패키지들이 이에 해당됩니다.

 

 

3. Global Dependencies

---

💡 전역 설치의 경우 프로젝트의 node_modules 공간에서의 제한이 아닌 시스템 전체에 사용할 수 있도록 프로그램을 설치하는 것을 의미합니다.

• [종류] expo, react-native, typescript 

 

 

4. devDependencies

---

💡 프로젝트에서 개발 단계와 테스트 단계에서만 사용이 되는 패키지를 포함하고 있으며, 이 의존성 패키지는 컴파일 내에서만 수행되고 런타임 단계에서는 수행되지 않는 패키지들이 이에 해당됩니다.

• Typescript 관련 Dependency가 이에 해당됩니다. 
• [종류] @types/react, @types/react-dom

 

 

5. peerDependencies

---

💡 런타임에는 필요하기는 하지만 소스코드 내에 의존성을 직접 관리하지 않는 라이브러리들이 포함된다. 소스코드 내에 require, import로 불러오지는 않지만 라이브러리 의존성으로 필요한 경우가 이에 해당됩니다.

• Plug-in으로 추가하는 경우 이에 해당한다.

 

 

5. 틸드(~)

---

💡 현재 지정한 버전의 마지막 자리 내의 범위에서만 자동으로 업데이트한다. 틸드를 사용하면 'PATCH' (0.0.x) 버전까지 업데이트가 수행이 된다.

 

 

6. 캐럿(^)

---

💡 캐럿(^)을 사용하면 ‘MINOR'(0.x.0) 버전까지 업데이트가 수행이 된다.

 

 

7. Webpack

---

💡 모듈 번들러라고 하며 주요 목적은 브라우저에서 사용할 JavaScript 파일을 번들로 묶는 것이지만 거의 모든 리소스 또는 자산을 변환, 번들링 또는 패키징 기능을 제공합니다.

 

 

8. babel

---

💡  자바스크립트 ES6 문법을 ES5로 변환해주는 트랜스 파일러(transpiler)입니다. 이를 통해 React를 일반 브라우저에서 실행시킬 수 있습니다.

 

 

9. 렌더링(Rendering)

---

💡 React 내에서는 컴포넌트 렌더링이라고도 하며 컴포넌트 내에 엘리먼트 요소들(HTML, React 사용자 정의 태그)을 화면상에 그리는 동작을 의미한다.

 

 

10. 리 렌더링(Re-Rendering)

---

💡 컴포넌트 내에 엘리먼트 요소들을 코드를 기반으로 화면의 그리는 작업을 다시 수행하는 것을 의미한다.

 

 

11. TTV(Time To View)

---

💡 사용자가 웹브라우저에서 내용을 볼 수 있는 시점 (사용자가 화면을 보는 시점)을 의미합니다.

 

 

12. TTI(Time To Interact)

---

💡 사용자가 웹브라우저에서 인터랙션 할 수 있는 시점(사용자가 실제로 서비스를 이용하는 시점)을 의미합니다.

 

 

 

11. React 생명주기(LifeCycle)

---

💡 클래스 컴포넌트
- Constructor() → render() → ComponentDidMount() → componentDidUpdate() / componentWillUnmount()

💡 함수형 컴포넌트
- 컴포넌트 수행 → HTML 화면 렌더링( return() ) → useEffect() → useEffect() [update / cleanup을 수행]

 

 

12. 상태 관리 라이브러리

---

💡 단방향의 흐름의 React내에서는 부모에서 자식으로 전달받는 데이터에 대해서 전역적으로 관리할 수 있는 라이브러리를 이용한다.

• [종류] Redux, Recoili, MobX, React Query, Jotai, zustand

 

 

13. 타입 스크립트(Typescript)

---

💡 타입 스크립트는 Microsoft에서 개발하고 유지/관리되는 Apache 라이센스가 부여된 오픈 소스입니다. 타입 스크립트(Typescript)는 자바스크립트의 슈퍼셋(Superset)이며, 자바스크립트에 ‘타입'을 부여한 언어입니다.

 

 

14. 타입 스크립트의 Interface와 Type의 차이점

---

💡  Typescript의 권장사항은 ‘Interface’를 사용하는 것을 권장하며, 폐쇄적인 사용을 원할 경우 이를 사용합니다.
💡 Interface는 객체에 대해서만 사용이 가능하며 Type은 제너릭 타입, 튜플, 원시 값, 유니온 값에 대해 사용이 가능합니다.

 

 

15. Typescript의 객체 지향

---

💡 서로 관련 있는 데이터와 함수를 객체(하나의 역할을 수행하는 메서드와 변수의 묶음)로 정의해서 서로 상호작용할 수 있도록 프로그래밍 해나가는 것을 말한다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.

 

 

 

16. 캐싱(Caching)

---

💡 데이터나 값을 미리 복사해 놓는 임시 저장소입니다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있습니다.

 

 

17. 캐시 버스팅(Cache Busting)

---

💡 새로 배포된 브라우저 혹은 이미지 등이 반영되지 않고 이전의 캐시 상태를 바라보고 있는 문제에 대해서 이를 해결하기 위한 동작을 의미합니다.

 

 

18. 코드 스플리팅(Code Spliting)

---

💡 하나의 Chunk 파일 내에 모든 자바스크립트를 묶어서 빌드를 하는 경우 필요 없는 파일들이 포함되어 있어서 필요한 코드만 포함시켜서 빌드를 수행하기 위한 목적으로 사용한다. 코드 스플리팅을 통해서 “지연 로딩”하게 도와주고 앱의 성능을 향상해줍니다.

 

 

19. Chunk 파일

---

💡 번들링을 수행할 때 각각의 필요에 따른 Chunk 파일을 만들어서 필요한 Chunk파일을 불러와서 자바스크립트를 수행한다.

 

 

 

20. 지연 로딩(React.lazy)

---

💡 React.lazy는 페이지별 Router Base, 컴포넌트 별 코드분할(Code Splitting)을 사용한다. 단 서버사이드 렌더링에서는 사용할 수 없습니다.

 

 

 

😄 참고 글 모음

---

[Node] 자바스크립트 패키지 매니져(npm/yarn) 이해하기 -1

[JS/Library] Webpack 이해하기 - 1 : 주요 용어

[JS] 클라이언트 사이드 렌더링(CSR), 서버 사이드 렌더링(SSR) 이해하기

[TS] 타입 스크립트(Typescript) 이해하기-3(타입스크립트의 사용목적)

 

 

 

오늘도 감사합니다😀