profile
왜?라는 질문에 언제나 준비가 되고 픈 프론트엔드 개발자입니다🧐
post-thumbnail

webpack build & devServer

build 와 개발용 서버가 잘 작동 된다. 아직도 개념이나 전반적인 흐름이 익숙하지가 않은 상태이다 보니 계속 깊게 파고들며 개념을 익히고 공부한 내용을 계속 기록할 계획이다.

5일 전
·
0개의 댓글

중요한 babel과 webpack 설정하기

npm i -D webpack webpack-cli @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/preset-typescript @types/webpack @types/

2022년 6월 18일
·
0개의 댓글
post-thumbnail

초기 셋업(1)

npm init프로젝트 구성의 첫 시작입니다.npm i reactnpm i react-domnpm i typescriptnpm i @types/reactnpm i @types/react-domnpm i -D eslintnpm i -D prettiernpm i -D es

2022년 6월 18일
·
0개의 댓글

Concepts Review

여태까지 살펴본 웹팩 4가지 주요 속성을 도식으로 나타내보면 다음과 같습니다.위 도식을 보면서 지금까지 배운 내용을 종합해보겠습니다.Entry 속성은 웹팩을 실행할 대상 파일. 진입점Output 속성은 웹팩의 결과물에 대한 정보를 입력하는 속성. 일반적으로 filena

2022년 6월 16일
·
0개의 댓글

Plugin

플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성입니다. 로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할을 한다고 보면 됩니다.플러그인은 아래와 같이 선언합니다.플러그인의

2022년 6월 16일
·
0개의 댓글

Loader

로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성입니다.엔트리나 아웃풋 속성과는 다르게 module라는 이름을 사용합니다.웹팩으로 애플리케이션을 빌

2022년 6월 16일
·
0개의 댓글

Output

output 속성은 웹팩을 돌리고 난 결과물의 파일 경로를 의미합니다.앞에서 배운 entry 속성과는 다르게 객체 형태로 옵션들을 추가해야 합니다.최소한 filename은 지정해줘야 하며 일반적으로 아래와 같이 path 속성을 함께 정의합니다.여기서 filename 속

2022년 6월 16일
·
0개의 댓글

global.client

Next.js 우리 앱을 hot reload 한다. 그럴 때 마다 Prisma client가 계쏙 생성 되게 된다. 이렇게 되면 db에는 연결에 한계가 생긴다. db는 연결을 무한히 받을 수 없고, PlanetScale도 마찬가지다.const client = globa

2022년 6월 15일
·
0개의 댓글
post-thumbnail

SWR Global Configuration

이제 우리가 사용할 useSWR()를 전역적으로 사용하고 싶다. 훌륭한 기능이다.value={options} 값에는 fetcher를 사용할 것이다. 앞에서 사용한 fetcher를 가져 왔다. 이렇게 하면 SWR에 있는 모든 쿼리에 적용할 수 있게 된다.

2022년 6월 15일
·
0개의 댓글

custom-hook + SWR

앞에서 기록한 useUser() hook에 SWR 도입하였다.useSWR()을 사용할 때는 2개의 인자가 필요하다. 첫번째는 요청을 보낼 url이고 두번째 인자는 fetcher 함수이다. fetcher 함수는 첫번째 인자인 key에 입력한 url을 받는다. url이 아

2022년 6월 15일
·
0개의 댓글
post-thumbnail

SWR

https://swr.vercel.app/koSWR 정말로 사용해보고 싶었다.useSWR(Key, Fetcher) => Fetcher 라는 함수를 이용해 Key 라는 주소에서 가져오는 데이터를 전역적으로 관리 이렇게 설명하면 처음 시도 해보는 나도 이해가 안될

2022년 6월 15일
·
0개의 댓글
post-thumbnail

custom hook 사용하기

앞서 만든 api/users/me 경로를 통해 사용중인 유저의 profile을 확인 할 수 있었으며 각 page마다 이 데이터를 보여주고 싶다 사용하는 빈도가 매우 높으며 이것을 coutom hook으로 만들어 재사용 빈도를 높이고 효율을 극대화 하고 싶다.

2022년 6월 15일
·
0개의 댓글

authorization-함수형 프로그래밍 로직 구성 및 재사용성의 적극 활용

지금 까지 iron-session 을 통해 쿠키를 암호화 하고 그 값을 통해 user의 정보를 찾는것 까지는 구현했다. 인증되지 않은 사용자의 경우 페이지 접근을 할 수 없게 해야 한다. 지금 웹사이트의 컨셉은 로그인이 되지 않을 경우 웹사이트 체험이 불가하게 구성하였

2022년 6월 14일
·
0개의 댓글
post-thumbnail

Serverless Sessions(2)

암호화 된 쿠키 값을 받는 것 까지 구현한 상태이다. 이제 api url로 요청을 보내 내 프로필을 볼 수 있는지 테스트해야 할 차례이다.

2022년 6월 14일
·
0개의 댓글

Cookie

우리가 로그인을 하고 그 이후 로그인이 유지되거나,쇼핑몰에서 장바구니가 유지가되는 경우는 바로 "cookie" 덕분이다. 쿠키란 서버가 웹 브라우저에 정보를 저장하고, 불러올 수 있는 수단이다.서버에서 클라이언트에 데이터를 저장하는 방법 중 하나인데,서버가 쿠키를 저장

2022년 6월 14일
·
0개의 댓글

Serverless Sessions(1)

https://github.com/vvo/iron-sessioniron-session은 암호화된 쿠키를 이용하는 Node.js stateless(무상태) session utility 입니다. JWT와 비슷하지만, 전송되는 토큰 정보(payload)를 암호화 한

2022년 6월 14일
·
0개의 댓글

token 을 이용한 user 인증(1)

1) user가 phone 번호를 전송하면 2) 백엔드에서 DB에 있는 user의 phone 번호를 검색하게 된다.3) 전송 받은 phone 번호로 유저가 존재 하지 않는다면 회원가입을 진행하고4) 전송 받은 phone 번호로 유저가 존재한다면 DB에서 정보를 가져오게

2022년 6월 13일
·
0개의 댓글
post-thumbnail

token 스키마 생성

user에 토큰 값을 주기 위해서는 Token 스키마가 필요하다 id, createdAt, updatedAt 값은 token model에서도 동일하게 사용할 것이다. 또한 payload라는 필수값을 만들 것인데 이 값에는 user의 메일이나 폰 번호 정보가 들어 갈 것

2022년 6월 13일
·
0개의 댓글
post-thumbnail

Handler function 고차함수

Login POST 요청을 보내고 데이터를 받는 Login.ts 이다.이번 웹사이트를 만들며 시도해보는 것들 중 하나인 고차함수를 활용해볼 생각이다.고차함수(Higher Order Function(HOF))이란?하나 이상의 함수를 인자로 받고, 결과로 함수를 리턴합니다

2022년 6월 13일
·
0개의 댓글
post-thumbnail

Next.js API Routes

일반적으로 리액트는 사용할 경우 백엔드는 Node.js를 사용한다.Next.js는 API를 만들기 위해 다른 서버를 구축할 필요가 없을 정도로 편의를 제공해 준다. 물론 실무에서는 백엔드와 프론트엔드가 분리되어 자바 등 다른 언어를 사용할 확률이 매우 높을 것 같다.

2022년 6월 13일
·
0개의 댓글