baechu-market

Next.js 기반으로한 웹사이트 마켓을 만들고자 합니다.npx create-next-app@latest --ts

npm i styled-components를 하고나서 react와는 다르게 처음에 설치하고 설정해야 하는 부분들이 존재한다.npm i --save-dev babel-plugin-styled-componentsnpm i babe-preset-next그 다음 최상단에 .b

배추 마켓 개인 프로젝트 두번째 배포 사이트가 되었다. 개발하면서 중간 중간 기록 했어야 했지만 개발하는데 몰입하게 되면 기록에 신경을 못쓰게 되어 1차적인 배포를 한 후 처음부터 차근 차근 기록 하려 한다. 배포 까지 걱정 스트레스가 심했지만 첫번째 관문을 통과 했다

배포 후 에 정상적으로 작동하는 것을 확인 하였으나 profile page는 계속 페이지를 찾을 수 없다는 404 에러가 나왔습니다. 도저히 이유를 모르겠고 판단하기가 쉽지 않았습니다. 역시 로컬로 잘 되더라도 배포하는 과정 배포 성공 후가 중요하다는 것을 인식하게 되

Next.js에는 useRouter라는 아주 훌륭한 router 내장 메서드가 있다. 따로 추가 설치가 필요없고 사용 방법도 공식 홈페이지에서 자세히 알기 쉽게 설명 되있다. useEffect를 활용하여 특정 props 상태가 변경 할 때만 페이지를 이동하도록 하였다.

prisma가 무엇인지 공식 홈페이지를 통해 정의를 보게 되면Prisma는 오픈 소스 차세대 ORM입니다. 다음 부분으로 구성됩니다.Prisma Client : Node.js 및 TypeScript용 자동 생성 및 유형 안전 쿼리 빌더Prisma Migrate : 마이

플래닛스케일(PlanetScale)은 마이SQL(MySQL)과 퍼코나(Percona), 마리아DB(MariaDB)의 수평 확장을 위한 데이터베이스 클러스터링 시스템인 비테스(Vitess) 기반의 마이SQL 호환 서버리스 데이터베이스 플랫폼이다. 비테스는 슬랙, 스퀘어,

서버리스는 클라우드 컴퓨팅의 모델 중 하나로 사용자가 서버를 직접 관리할 필요가 없는 모델을 의미합니다.\*클라우드 컴퓨팅은 간단히 말해서 IT리소스를 직접 구매하지 않고 임대하여 사용하는 것 입니다.서버리스는 동적으로 서버의 자원을 할당합니다.즉 사용자가 없다면 자원

Syntax highlight 같은 기능이 있어서 prisma 파일을 좀 더 보기 좋게 구성해준다 또한 자동완성도 도와준다.그 다음 prisma를 설치해준다(개발자용) .env 파일에 있는 DATABASE_URL을 설정해줘야 한다. prisma를 사용하려면 당연히 DB

https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference공식 홈페이지에 가게 되면 사용하는 DB마다 어떻게 스키마를 작성해야 하는지 어떤 규칙을 따라야 하는지 나와있다. 솔직히 여태

https://planetscale.com/planetscale이란 MySQL과 호환되는 serverless 데이터베이스 플랫폼이다. 비테스(Vitess) 기반의 마이SQL 호환 서버리스 데이터베이스 플랫폼데이트베이스 플랫폼이라는 것은 DB를 제공해준다는 것이

https://docs.planetscale.com/concepts/planetscale-environment-setup홈페이지에 가보면 set up하는 과정을 설명해주고 있다. brew install planetscale/tap/pscalebrew insta

앞에서도 블로깅 했지만 PlanetScale은 MySQL과 호환되는 서버 플랫폼이다. PlanetScale은 MySQL 서버 플랫폼이 아니다 그 뜻은 MySQL과는 조금은 다르게 일을 처리한다는 뜻이다. Vitess는 대량의 connections, tables과 다양한

이제 우리가 만든 schema를 PlanetScale에 push할 차례이다.반드시 pcale connect를 통해 연결한 상태가 되어야 한다.npx prisma db push그러면 pscale 에서 push한 스키마를 확인 할수가 있다!npx prisma studio이

prisma는 DB를 수정해주고 관리자 패널(npx prisma studio)도 사용 가능하다 그리고 prisma client라는 것을 제공해준다. npm install @prisma/clientnode_modules -> client -> index.d.ts 파일로

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

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

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

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

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

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

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

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

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

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

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

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

SWR mutate 사용해보고 싶었던 기능이었다. 지금 데이터 하트를 누르면 빨간색으로 변경 되는데 이 기능을 데이터 요청 없이 즉각적으로 미리 보여주고 싶을수가 있다. 사용자가 UI에서 이질감을 느끼거나 데이터 요청의 기다림 없이 해결하고 싶을 때 mutate를 사용

맨처음 개발했던 웹사이트에서 글을 남기면 새로고침 없이 렌더링 되는 방법을 결국 못찾아 결국 새로고침이 되도록 설정했던 경험이 있다. 그 당시에 해결 방법을 못찾았는데 SWR을 사용하면 굉장히 쉽고 간단하게 리랜더링이 가능하다https://swr.vercel.

로컬 환경에서는 잘 작동하던 cloudflare 배포 환경에서는 계속 경로를 찾지 못하고 undefined가 나왔다. 이제 이력서 넣고 있는 상황에 에러가 나와 당황 스러웠다 원인은 env 파일을 갖고 오지 못했던 것이다 로컬 환경과 배포환경은 다른 것인지 미쳐 생각을