apple-market

들어가기nextjs setting을 알아보자tailwild setting을 알아보자https://nextjs.org/docs/getting-startedhttps://tailwindcss.com/https://tailwindcss.com/do

들어가기 frontend의 개괄적인 구성방법을 알아본다.크게/components/libs/pages세개의 folder로 구성된다.NextJs는 rounter가 엄청나게 편하게 되어있다./Pages의 index.tsx부분이 localhost:3000 을 연결했을떄 열리는

들어가기apple-market의 여러page에서 사용되는 components들을정리해 보자총 8개의 component를 만듬.보면서 tailwindcss에 대해서도 정리가 됨.사진올리기, 아이템 올리기, 라이브방송올리기 등, 고정되어 있는 버튼만들기위의 버튼은 sub

들어가기웹에 접속했을 떄, 화면에 뜨는 맨처음 페이지, 팔 물건들의 나열임.모두다 pages에 들어가는 파일들이다,가장 기본이 되는 tsx파일임.

채팅부분을 꾸며본다pages/chats/index.tsx 와 pages/chats/id.tsx 두 개의 file로 구성됨.import { NextPage } from 'next'import Link from 'next/link'import Layout from '.

들어가기동네생활부분에 대해서 알아본다.pages/community/id.tsx, index.tsx, write.tsx세개의 파일로 이루어짐.

들어가기각각의 item의 detail page 그리고 상품 upload pagepages/items/id.tsx 와 upload.tsx 두개의 page로 구성된다.

들어가기live 방송을 위한 page.pages/live/index.tsx, id.tsx, create.tsx로 구성됨.

나의 애플, profile 화면 디자인pages/profile/index.tsx, edit.tsx, sold.tsx, buy.tsx, loved.tsx다섯개의 page로 구성이 되나sold, buy, loved 3개 page는 같기 때문에, 하나만 올려 놓는다.edir

들어가기apple-market에서는 DB를PlanetScale, Prisma 두개로 구성한다!!https://www.prisma.io/https://www.prisma.io/docs/getting-started/quickstartVSconde Ext

https://velog.io/@silverbeen/Naver-Map-%EC%9E%90%EC%9C%A0%EB%A1%AD%EA%B2%8C-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0\->naver지도만들기들어가기enter Form을 만들어본

\*\*들어가기useMutation: client가 backend와 통신하기 위해 필요한 공통적으로거쳐야 하는 과정을 담아놓음. POST로 통신할떄,GET으로 통신할떄는 useSWR을 사용.withHandler: backend의 api들을 코딩하는 과정에서 공통적으로

들어가기pages/api/users/enter.tsx를 만들어본다.client에서 phone, email을 보내면, DB에서 user를 찾아 그 user에 token을 보내주거나혹은 User를 새로 만들고 tokne을 리턴해줌.prisma.schema에서 model t

들어가기iron-session은 서명, 암호화된 쿠키를 사용하는 NodeJS 세션도구https://github.com/vvo/iron-sessionnpm i iron-sessionJWT와 비슷한 기능이라고 생각하면됨.

\*\*들어가기1\. front에서 모든 page에서 공통적으로 자주 사용하게 될, useUser hook을 만든다. 로그인된 사람의 정보를 확인하는 hook,useSWR을 이용해서 useUser hook을 완성한다. https://swr.vercel.

1.login의 최종 page.2\. 위에서 다루었던, useMutaion, useSWR, withHandler, withSession, react-hook-form등을 종합해서 최종적으로 만드는 login page(pages/enter.tsx)3\. NEXTJS의 l

\*\*들어가기Product1\. schema.prisma model\*\*항상 schema.prisma를 수정하면, pscale connect apple-market, npx prisma db push

들어가기상품 업로드 페이지 구성upload API를 따로 만들지 않는 이유는 그렇게 길지 않아서index.ts에 상품보는 API(GET)와 upload API(POST)를 같이 만듬.

index.tsx(Home)에서상품 하나를 클릭했을때,상품의 Detail page 및 similar Product를 불러올수 있게 한다상품 하나하나의 Detail을 요청하는 API///heart를 눌렀을때, 처리되는 API///헷갈릴 경우 위위 POST의 fav mod

들어가기동네생활의 질문을 올리고 질문의 답변을 하는 Page1\. 전체질문 list, 2\. 질문 detailPage(awnser, wondering)3\. write Post로 구성됨.4\. nevigator.geo\~~이용해서 현재 좌표(위도, 적도)로 반경 어디까

들어가기Post를 쓰는 폼(client)와 API두개를 만들어 봅시다.client에서 질문(POST)를 작성하면, 그 작성된 질문을 처리하는 APIpages/api/posts/index.ts 파일은 POST로 받으면, post작성 API, GET으로 받으면, 모든 질

들어가기Post중 하나를 클릭 했을떄, Detail Page로 이동하게됨DetailPost에는 3개의 API가 들어감. 1\. Post Detatl.(useSWR) /api/posts/${router.query.id}2\. 댓글달기.(useMutation) /api/p

들어가기나의 Profile칸을 완선0\. schema.prisma1\. 판매내역, 구매내역, 관심목록2\. EditProfile3\. 나에 대한 Reviewsales, purchases, fav를 따로따로 구현해도 되고, enum으로 만들어서(kind)로 분류해도 된다

들어가기MyProfile에서1\. review(나에게 쓴 리뷰, 내가 쓴 리뷰)2\. editProfile을 알아본다.이 API에서 GET으로 받으면, 나의 정보를 보내주고, POST로 받으면, editProfile data를 받아서 edit함.pages/profile

들어가기Live 방송의 UploadForm을 완성한다.1\. model(prisma)2\. UploadForm3\. DetailPageGET은 live방송을 다 깔아주는것, POST는 방송 Upload여기서는 Upload만 다룸detail Page에 사용되는 채팅!!l

product page에서 pagination을 구현해 본다.home page인 product page만 구현해 보고,나머지 page에서는 시간 될때, 구현해 본다.다음page 혹은 이전 page로 이동하는것을 나타내는 버튼을 component로만들어 놓음다른 부분은

들어가기cloudflare에 이미지를 업로드 하는 방법을알아보고,이미지를 업로드 해본다.일단정리<input {...register('avatar')} id="picture" type="file"

들어가기앞 POST에서 사진의 주소를 뽑아보고, preview를 해 봤음.이제는 실제로 cloudFlare에 Upload를 해 본다.cloudFlare imageUpload중 Direct Creator Upload로 upload할 예정,CF이미지 업로드 과정은.1\.

들어가기1\. CF에서 이미지를 resizing하는 방법을 알아보자.CF 대시보드에서 변수(Variant)를 클릭.밑에 appleavatar, avatar, public은 미리 만들어 놓은 것들20개까지 만드는거 가능함.그러고 나서는 이미지제공 URLhttps&#x3A

들어가기원래 JS는 이미지를 불러올때, <img src={} ~>로 불러오나,NextJS에는 <Image src={} , 그외 옵션 />으로이미지를 로드한다.이번 POST에서는 NextJS의 이미지 로드에 대해서 자세하게 알아보자!!https://n

https://www.cloudflare.com/ko-kr/products/cloudflare-stream/스트리밍 소프트웨어.OBS(데스크탑으로 이용시)2.Live Now (android) 어플(RTMP)안드로이드 어플 Live Now를 열어서RTMP를 클릭

NextJS middleware에 대해서 알아본다.밑에꺼는 구버젼 문법인데, 업그레이드 되면서 문법이 바뀜ㅜㅜㅜㅜㅜㅜ그래도 밑의 부분을 이해하고 있으면,업그레이드 버젼도 이해할 수 있을거라 봄. https://nextjs.org/docs/messages/mid

들어가기component를 바로 import하는게 아니라, 사용할 때 import를 함. import dynamin from 'next/dynamic'const Button = dynamic(()=>import('@components/Button',{ssr:true/f

** ISR 단계적 정적 재생성에 대해서 알아보고 이를 통해서 웹의 속도를 향상시켜본다. ** ex.) await new Promise(resolve => setTimeout(resolve, 5000)) =>다음 부분 실행시키는데, 5초 지연시킴.

들어가기/product/id/ 와 같이 path가 주어지는 page에서정적 Page를 만드는 방법을 알아보자.home page에서 product를 클릭 했을떄, 이동되는 DetailPage에 적용시켜 본다NOTICE!!!! 정적페이지를 만드는 이유는 그 페이지를 이동

들어가기NextJS로 만든 앱을 배포한다.배포는 Vercel에 배포함.그전에 pscale을 연결한다.1\. pscale에 들어가서 production으로 바꾸어준다.Promote a branch to production CLick한번 Promote를 하면 더이상 sch

들어가기1편에서 Pscale deploy에 대해서 알아보았고,여기서는 front 배포Vercel에 대해서 알아본다.https://vercel.com/에 들어가서 회원가입을 한다.NextJS로 만든것은 무조건 Vercel에 배포해야만 한다.모든 코드를 git h