1-blue의 블로그
취소

자바스크립트 완벽 가이드 17장 정리 ( Tool )

해당 포스트는 자바스크립트 완벽 가이드라는 교재로 스터디를 하면서 17장을 정리한 포스트입니다.주관적으로 해석한 내용이 들어가 있어서 잘못된 내용이 포함될 수 있습니다.또한 교재의 모든 내용을 정리하지 않고 주관적인 판단에 의해 필요한 내용만 작성했습니다. 교재에서는 소개만 해주는 형식이라 이전에 공부했던 내용을 기반으로 만들었던 포스트들을 ...

npm & npx

해당 포스트는 npm에 대해 정리한 포스트입니다. 🎋npm Node Package Manager의 약자로 노드의 패키지들을 관리해주는 도구입니다. 패키지란 JavaScript로 만들어둔 모듈 즉, 함수와 변수들을 의미합니다. 직접 구현하기 힘들거나 번거로운 함수와 변수들을 누군가가 미리 만들어놓고 올린 것을 패키지라고 합니다. 저희는 이 패...

Jest ( + TypeScript )

해당 포스트는 Jest + TypeScript에 대해 정리한 포스트입니다. 🫠 설치 테스트 파일이란 __tests__ 폴더 내부의 파일이나 /.test.(js|ts)/인 파일을 의미합니다. @types/jest는 TypeScript를 사용하지 않더라도 설치만하면 테스트 파일의 자동완성을 지원해줍니다. npm i -D jest @ty...

Eslint & Prettier ( + TypeScript )

해당 포스트는 직접 설정한 Webpack에 Eslint와 Prettier를 설정하는 방법을 정리한 포스트입니다. 🚨 Eslint 소스 코드의 문법적인 오류를 찾아내는 도구입니다. 0️⃣ 설치 개발 모드로 설치하고 -g를 이용해서 글로벌로 설치해도 됩니다. ( 저는 컴퓨터에 최소한으로 설치하는 것을 좋아해서 전역적으로 설치하지는 않았습니다. ...

세션 ( Session )

해당 포스트는 Session에 대해 정리한 포스트입니다. 📝 세션 세션이란 서버에 클라이언트 인증에 대한 데이터를 서버에 저장하는 기술을 의미합니다. HTTP가 갖는 특징인 무상태(stateless)를 극복하기 위해 사용할 수 있습니다. ( 세션은 memory, file, database 등에 저장됩니다. ) stateless가 sta...

쿠키 ( Cookie )

해당 포스트는 Cookie에 대해 정리한 포스트입니다. 🍪 쿠키 클라이언트인 브라우저에 저장되는 작은 데이터 조각이 쿠키의 본체입니다. 쿠키의 값은 반드시 인코딩해야하고, 최대 크기는 4KB, 최대 개수는 20여 개 정도로 한정된다고 합니다. 쿠키를 주고 받을 때는 따로 설정해주지 않아도 서버에서 cookie를 보내면 브라우저에 등록되며, ...

Token ( feat. JWT )

해당 포스트는 Token, JWT, Access-Token, Refresh-Token의 개념과 이론적인 사용법 정리하는 포스트입니다. 인증 ( Authentication ): 로그인, 해당 사이트의 회원임을 인증 받는 것인가 ( Authorization ): 인증받은 사용자가 서비스의 기능을 사용하는 인가를 받는 것 🪸 Hashing...

styled-components + TypeScript 세팅 및 사용 예시

해당 포스트는 styled-components + TypeScript의 사용법을 정리하는 포스트입니다. 🫠 Install 해당 포스트는 TypeScript 기준으로 작성했기 때문에 타입 정의도 설치해야 합니다. # "styled-components" 설치 npm i styled-components # "styled-components" 타...

자바스크립트 완벽 가이드 14장 정리 ( Meta Programming )

해당 포스트는 자바스크립트 완벽 가이드라는 교재로 스터디를 하면서 14장을 정리한 포스트입니다.주관적으로 해석한 내용이 들어가 있어서 잘못된 내용이 포함될 수 있습니다.또한 교재의 모든 내용을 정리하지 않고 주관적인 판단에 의해 필요한 내용만 작성했습니다. 메타 프로그래밍이란 코드를 조작하는 코드를 작성하는 것을 의미합니다. 🌱 프로...

스토리북 기본 사용법 ( Storybook + webpack )

Storybook은 컴포넌트만 분리해서 개발하는 도구입니다. ( CDD ) Storybook + styled-components 기반으로 작성하겠습니다. ( 결과물 ) 🫠 설치 빈 프로젝트에서는 시작할 수 없기 때문에 React 기준으로 CRA나 직접 Webpack을 설정한 파일에서 시작해야 합니다. ( Webpack을 직접 설정하고...