Ama_gramer

📘 ES6 ES6(ECMAScript 2015)는 JavaScript의 주요 업데이트 중 하나로, 코드의 가독성과 효율성을 높이기 위해 여러 새로운 기능이 추가된 JavaScript 표준이다.📋 ES6(ECMAScript2015) 주요 변경점const, letarrow functionTemplate LiteralsclassmoduleDestructuringDefault Parametersspread operator & Rest parameterPromiseSymbol⁉️ const, letvar의 자유로운 사용을 let과 const는 일부 억제함으로 보다 오류 컨트롤이 수월해졌다.var, let, const 세가지 모두 자바스크립트 엔진이 코드를 실행하기 전 실행컨텍스트를 생성하면서 메모리에 변수 및..

🪙 JWT란?JWT(JSON 웹 토큰)는 당사자 간에 정보를 JSON 개체로 안전하게 전송하기 위한 간결하고 독립적인 방법을 정의하는 개방형 표준(RFC 7519)⁉️ JWT 토큰의 구조 (Header + Payload + Signagture)Header: 토큰의 유형(JWT)과 사용된 서명 알고리즘을 포함{ "alg": "HS256", "typ": "JWT" } Payload: 토큰에 포함된 데이터, 즉 클레임(claim)을 포함iss: 토큰 발급자(Issuer)sub: 토큰 주체(Subject)exp: 토큰 만료 시간(Expiration) iat: 토큰 발행 시간(Issued At) 커스텀 클레임: 예를 들어 사용자의 ID, 권한 수준 등이 포함될 수 있음{ "sub": "12345..

💻  브라우저 저장소브라우저 저장소는 웹 브라우저가 클라이언트(사용자의 컴퓨터)에서 데이터를 저장하고 관리할 수 있는 공간이다. 이를 통해 웹 애플리케이션은 서버와의 통신 없이 사용자 정보를 저장하거나, 페이지를 새로 고침해도 데이터가 유지될 수 있다. 대표적인 저장소 종류로는 Cookie, LocalStorage, SessionStorage, IndexedDB가 있다.⁉️ Local Storage & Session Storage & Coockie & IndexedDB- Local Storage장기적인 데이터 저장과 사이트 전반의 설정 데이터 유지에 적합합니다. 그러나 모든 탭에서 데이터가 공유되며, 삭제 전까지 지속되어 보안 위험이 있을 수 있습니다.- Session Storage창이 닫힐 때 데이..

💻  웹팩(Webpack)모듈 번들러로 웹 어플리케이션을 개발할 때 사용하는 다양한 자원들(JavaScript, CSS, Img files etc)을 하나의 번들(Bundle)로 묶어주는 도구로, 웹팩을 사용하면 코드의 의존성 관리와 성능 최적화를 쉽게 할 수 있다.⁉️ 웹팩을 사용하는 이유- 모듈화와 의존성 관리- 번들링- 파일 크기 최적화- 코드 스플리팅- 개발 편의 기능 1. 모듈화와 의존성웹팩은 각각의 파일을 모듈로 취급하고, 파일 간의 의존성을 분석하여 하나의 번들 파일로 묶어준다.이렇게 하면 개별 파일 간의 종속성을 명확하게 관리할 수 있고, 모든 코드가 하나의 파일에 담기므로 브라우저 요청 회수가 줄어든다.2. 번들링웹팩은 여러 파일을 하나로 묶어 배포할 수 있게한다.번들링된 파일은 불필요..

💻 SSR vs CSRSSR (Server Side Rendering) : 화면의 렌더링이 서버에서 이루어지는 아키텍처CSR (Client Side Rendering) : 화면의 렌더링이 클라이언트에서 이루어지는 아키텍처구분SSRCSR초기 로딩 속도빠름느림서버 부하높음낮음SEO (Search Engine Optimization)우수추가 설정 필요상호작용 속도초기에 느리나 이후에 빨라짐초기에 느리나 이후에 매우 빨라짐실시간 데이터상대적으로 불리유리사용자 경험초기 화면 로딩에 유리동적 UI 업데이트에 유리성능 의존도서버에서 렌더링이 이루어져 상대적으로 성능 의존도가 낮음클라이언트에서 모든 렌더링이 이루어져 성능 의존도가 높음⁉️ Next.js 기반에서는 CSR, SSR이 어떻게 다를까?- CSR in Ne..