브라우저 저장소(local storage, session storage, cookie) , require vs import

1. 브라우저 저장소에 대해서 차이점을 설명해주세요(local storage, session storage, cookie)

브라우저 저장소는 클라이언트 측에서 데이터를 저장하기 위한 방법.

 

1. 쿠키(Cookie)

• 쿠키는 이름, 값, 만료일 및 경로 정보와 같은 작은 문자열 데이터를 저장하는 데 사용됩니다.
• 쿠키는 서버에서 생성하고 브라우저에 저장되며, 브라우저에서 요청 시 서버로 전송됩니다.
• 쿠키는 일반적으로 인증, 세션 관리 및 개인화된 사용자 경험에 사용됩니다.

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

• 로컬 스토리지는 쿠키와 달리 서버와 통신하지 않고 브라우저에 데이터를 저장합니다.
• 로컬 스토리지는 브라우저에서 생성되며, 영구적으로 데이터를 저장합니다.
• 로컬 스토리지는 데이터의 이름과 값을 저장하며, 브라우저가 종료되어도 데이터가 유지됩니다.
• 로컬 스토리지는 일반적으로 사용자의 설정, 사용자의 작업 상태 등에 사용됩니다.

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

• 세션 스토리지는 로컬 스토리지와 매우 유사하지만, 세션 스토리지는 브라우저의 세션 중에만 데이터를 저장합니다.
• 세션 스토리지는 브라우저가 종료되면 데이터가 삭제됩니다.
• 세션 스토리지는 일반적으로 쇼핑 카트, 웹 앱의 작업 상태 등에 사용됩니다.

요약하자면, 쿠키는 서버와 클라이언트 간에 데이터를 주고 받는 데 사용됩니다. 로컬 스토리지와 세션 스토리지는 브라우저에 데이터를 저장하는 데 사용됩니다. 로컬 스토리지는 브라우저가 종료되어도 데이터가 유지되지만, 세션 스토리지는 브라우저 세션이 유지되는 동안에만 데이터가 유지됩니다.

2023.02.15 - [🔥 CS 공부] - [기술 면접 준비] Mockterview_React_50제_17~26번

2. require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요?

require와 import는 모두 자바스크립트에서 외부 모듈을 가져오는 데 사용됩니다.

 

차이점

1. 문법

• require는 Node.js에서 사용되며, CommonJS 방식으로 모듈을 가져옵니다. require는 동기 방식으로 동작합니다.
• import는 ECMAScript 6(ES6)에서 도입되었으며, 모듈 가져오기에 사용됩니다. import는 비동기 방식으로 동작합니다.

1. 동작 방식

• require는 모듈을 처음 호출할 때 한 번 로드하고, 이후 모듈을 다시 호출해도 캐시된 결과를 반환합니다. 이로 인해 모듈 간의 상호 의존성이 있는 경우에도 문제가 발생하지 않습니다.
• import는 모듈이 호출될 때마다 다시 불러옵니다. 이로 인해 모듈 간의 순환 의존성(circular dependency)이 있는 경우 문제가 발생할 수 있습니다.

1. 사용 방법

• require는 Node.js 환경에서 사용됩니다. require는 파일 경로나 모듈 이름을 인수로 받아 해당 모듈을 가져옵니다.
• import는 브라우저에서 사용됩니다. import는 모듈 경로를 인수로 받습니다. 또한, import는 모듈 이름을 직접 사용할 수 있습니다.

1. 모듈 타입

• require는 CommonJS 방식으로 모듈을 가져옵니다. 이 방식은 서버 측 자바스크립트에서 많이 사용됩니다.
• import는 ECMAScript 6(ES6)에서 도입된 모듈 시스템을 사용합니다. 이 방식은 브라우저 측 자바스크립트에서 많이 사용됩니다.

따라서, Node.js 환경에서는 require를 사용하고 브라우저 환경에서는 import를 사용하는 것이 좋습니다. 또한, 모듈 간의 순환 의존성이 있는 경우 require를 사용하는 것이 좋습니다.

 

+ Babel과 같은 ES6 코드를 변환(transpile)해주는 도구를 사용할 수 없는 상황에서는 require 키워드를 사용해야 함

 

https://www.daleseo.com/js-module-require/

자바스크립트 CommonJS 모듈 내보내기/불러오기 (require)

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-require-%E2%9A%94%EF%B8%8F-import-CommonJs%EC%99%80-ES6-%EC%B0%A8%EC%9D%B4-1

[NODE] 📚 require vs import 문법 비교 (CommonJS vs ES6)