전체 글

바닐라JS 프로젝트 개요 프론트엔드는 라이브러리, 프레임워크에 의존하여 프로젝트를 만들기에 내가 만든 JS 코드만으로 프로젝트를 만드는 것은 처음이었습니다. 항상 React, Next.js 를 이용하여 하다보니 외부라이브러리에 의존할 수 밖에 없었습니다. 그런데 이렇게 바닐라JS로 진행하는건 처음이라 걱정 반 기대 반 입니다. 엘리스 부트캠프 SW 8기에서 1차 프로젝트를 2/19(월) ~ 3/1(금) 부터 12일간 진행되는 바닐라 JS 프로젝트 입니다. 쇼핑몰에 맞는 요구사항을 줬으며, 시간이 남는다면 확장할 생각 입니다. 요구사항 사용자 관련 기능 상품 관련 기능 장바구니 관련 기능 ( Client LocalStorage, , sessionStorage Indexed DB 이용하 Client 에서 구..

react 에서 유용한 리액트 패턴 디자인 패턴은 3가지 패턴으로 분류된다. 생성 패턴 객체 인스턴스를 생성하는 패턴, 즉 클라이언트와 그 클라이언트가 생성해야 하는 객체 인스턴스 사이의 연결을 끊어주는 패턴. 구조 패턴 클래스와 객체를 더 큰 구조로 만들 수 있게 구성을 사용하는 패턴. 행위 패턴 클래스와 객체들이 상호작용하는 방법과 역할을 분담하는 방법을 다르는 패턴. 글로 설명하는 디자인 패턴 자바스크립트 디자인 패턴 (링크) constructor / builder pattern (생성자 / 빌더 패턴) 모든 언어에서의 Class 의 기능인 constructor(생성자) 의 기능이 디자인 패턴에 해당되는지 몰랐다. class Example { constructor(name, age, key) { t..

Session 클라이언트 정보를 서버 측 저장소에 저장하고 사용. 서버측에서 저장. Cookie 클라이언트 정보를 클라이언트 (브라우저)에 저장하고 사용 클라이언트에서 저장한다. Session을 사용한 유저 로그인의 경우 Cookie에 Session ID 에 저장 → Session Store 에서 유저 정보 가져오기 JWT를 쿠키에 저장하는 경우 JWT로 요청 → 서명 확인 후 유저 정보 사용 데이터베이스 접근이 줄어서 효율적인 인증 구현 가능 JWT 로그인 구현하기 기존 세션으로 구현된 로그인을 비활성화 로그인 로직에서 JWT 생성 후 쿠키로 전달 passport-jwt 패키지로 JWT 로그인 미들웨어 작성 및 사용 로그인 로직에 JWT 토큰 생성 및 쿠키 전달 res.cookie 함수 사용하여 tok..

소개 FaceBook이 만든 쿼리 언어 https://graphql.org/ GraphQL | A query language for your API Evolve your APIwithout versions Add new fields and types to your GraphQL API without impacting existing queries. Aging fields can be deprecated and hidden from tools. By using a single evolving version, GraphQL APIs give apps continuous access to new featu graphql.org Graphql 란? vs SQL → Server 와 Web Client 간의 질의어..

Redux 를 쓰는 이유 앱 상태가 React 만으로 관리하기 힘들 정도로 많아짐. → 상태를 외부로 빼내고, 변경점만 전파받고 싶음. → 외부 상태도 바인딩하고 싶은데… 어떻게?? 상태 관리 패턴의 분류 상태 변경을 감지하는 방식에 따른 분류 Flux-based 전역, 단일 저장소 사용 ex) react-redux의 최상위 Provider 컴포넌트 Action 실행을 제외한 상태 변경 제한. 단일 store 를 감시하므로 디버깅 기준이 action의 실행 ⇒ 전역 state 변경으로 유일해짐. Redux(Flux + Reducer) / Zustand (Flux + Context) Vuex (Flux for Vue) NgRx (Flux + Rx for Angular) Proxy-based State 재할..

Mongodb 란? DataBase(하나 이상의 Collection을 가질 수 있는 저장소) → Collection( 하나이상의 Document가 저장되는 공간) → Document(저장되는 자료 SQL에서 row와 유사하지만 구조제약 없이 유연하게 저장가능) Mongodb 는 비정형화된 데이터들을 저장하는 데이터베이스입니다. NoSQL 중에서 자주 사용하는 DB 이며 512MB 까지는 무료로 사용할 수 있습니다. Mongoose 란? Mongoose 는 Mongodb 에서 schema를 보다 쉽게 관리할 수 있으며 Mongodb와의 연결 상태를 관리해주며 Populate를 사용하게 해주는 ODM ( Object Data Mapping) 입니다. Mongoose 를 사용하기 위해서는 패키지를 설치하여 사..