# next13

jkh2801

okky 구경하다가 재밌어보인 해커톤을 발견했는데, 항해 플러스에서 주관한 코육대 (코딩 육상 대회)입니당!! 추석연휴동안 집돌이인 저에게 꾸준한 자극이 될 것 같아 참여해보았습니다. https://hanghaeplus-coyukdae.oopy.io/

yoonnezi

이메일 인증 버튼을 누르면 서버에게 데이터를 보내도록 하였다보내야하는 데이터는 사용자의 name , email 이다.그런데 여기서 무엇이 중요하다고 한 것이냐면,이름을 입력받는 곳은 PasswordEmailTextField ,이메일을 입력받는 곳은 PasswordCod

yoonnezi

🍯 1. 이메일 입력 시 emailRegex를 설정하여 이메일 조건에 충족하여 입력되도록 이메일의 조건 검사 형식은 아래와 같다. 전체적인 코드의 흐름을 설명하자면, 이메일 조건 검사를 해주는 TextBtnFieldInput 에 onChange={handle

hae8064

Next 13버전에서부터 기존 pages 디렉토리 방식을 사용하지 않고, app 디렉토리에 \_app과 \_document는 사용하지 않아서 새로운 방식으로 적용을 해야했다..lib폴더를 만들고 rootRegistry나 registry를 만든 후 styled-compo

tmdgp0212

zustand width zod

yoonnezi

📢 해당 포스트는 스타트업 프로젝트를 진행하며, 직접 작성한 코드를 기록용으로 작성함을 명시합니다.로그인 전, 비밀번호 찾기를 구현하였습니다.이메일 입력 시 emailRegex를 설정하여 이메일 조건에 충족하여 입력되도록이름과 이메일을 조건에 맞게 입력 시 이메일 인

yoonnezi

\[Next13 + TypeScript ] API, JWT(accesstoken) 사용하여 로그인&로그아웃 구현하기 위의 포스트에서 accesstoken 을 쿠키에 넣어주고 삭제하는 방법을 작성하지 않았길래 .. 추가해본다.Next.js 13에서는 cookies-nex

yoonnezi

📢 해당 포스트는 스타트업 프로젝트를 진행하며, 직접 작성한 코드를 기록용으로 작성함을 명시합니다.예약을 한 상품을 취소하도록 구현하였습니다.예약 취소할 상품에 대한 정보 불러오기 (api)예약한 예약자에 대한 정보 불러오기 (api)결제 금액 데이터 불러오기 (ap

yoonnezi

기본적인 정적 & 동적 라우팅에 대한 설명을 보고싶다면, 클릭 💻app 폴더 > reservationcancel 폴더 > id 폴더업로드중..동적 라우팅은 웹 애플리케이션에서 URL의 일부를 동적으로 처리하고 해당 부분을 변수로 사용하는 기술이다.보여주고자 하는 폴더

yoonnezi

apis 폴더를 만들고, 내부에 instance.ts 파일을 만들었다.그렇다면 왜 만들었을까 ?중복 코드 방지: axios 인스턴스 를 만들어 설정하면 여러 요청에서 동일한 설정을 재사용할 수 있습니다. 이렇게 하면 중복 코드를 방지하고 코드 유지 보수가 쉬워집니다.

yoonnezi

백엔드에서 만든 로그인 API 를 사용하여 axios로 post 하기Swagger 를 사용하면 데이터의 request 형식을 알 수 있기 때문에 백엔드와 api 소통이 편리합니다.이메일(or 아이디 : 원하시는 걸로) 과 비밀번호를 적어 로그인 버튼을 누르면서버로 데이

leave_a_comment

요즘 Next.js에 관심이 많아졌는데, next12 버전의 페이지 라우터와 next13의 앱 라우터 모두 찍먹해보았다 !12버전에서 13버전으로 릴리즈되면서 폴더 구조가 많이 바뀌었는데, 처음에 아주 헷갈렸다 !또 12버전의 getServerSideProps와 get

evelo

https://nextjs.org/docs/pages/api-reference/components/imageimage태그 관련 공식문서 next / image 은 일반적인 img 태그와 다르게 이미지 최적화 , 레이지로딩 기능을 지원한다 또한 이미지 로딩전에

soorokim

예제 레포지토리프로젝트에서 WYSIWYG을 사용해야 하는 경우가 있는데 대부분의 경우 form의 형태로 사용할것같다. 내게도 그런 상황이 생겼는데 처음으로 경험해보는 일이었기 때문에 기록으로 남겨둔다. (기본적인 텍스트 데이터만 다룬다!)해결하고 싶은 문제는 react

evelo

index.html에 dom요소들과 같은 위치에 생성하고 해당 모달 요소의 z-index를 통해서 뒤에 배경을 가리고 모달을 보여주는식으로 접근createPortal에는 인수를 2개를 필수로 전달해야하는데 (key는 선택 사항)모달에 보여줄 자식요소와 모달로 사용할 d

evelo

SWR을 global configuration으로 활용하기 위해서 layout.tsx 파일에 children 감싸주기fetch 뿐만아니라 axios와 같은 라이브러리도 사용 가능 fetcher를 글로벌하게 적용시켰기때문에 useSWR를 import해서 url만 작성해주

evelo

1 . next12, next13 폴더 경로 차이12버전에서는 다음과 같이 pages/api 폴더에 생성.참조 : https://next-auth.js.org/getting-started/example13버전에서는 src / app / api/auth/...n

koyk0408

이전 블로깅에서 \_app.tsx와 \_document.tsx에 대해 알아보고 설정하는 내용을 썼다.그런데 분명히 설정을 했는데도 불구하고, RecoilRoot를 설정해야 한다는 에러가 계속 발생했다.처음에는 뭐가 문제인지 몰랐다. 리코일과 리액트쿼리 홈페이지, 그리고

koyk0408

그동안은 따로 뭔가 세팅하는 게 싫어서(귀찮아서) sass를 썼는데, 이번 프로젝트에서는 atomic design system을 제대로 써보고싶어서 styled components를 세팅해보았다.next.js doc: styling css in js(https&#x3A

oikkoikk

Next.js 13에서는 Intercepting Routes라 해서, soft navigation(next/link나 next/navigation을 통한 라우팅)과 hard navigation(URL 직접 입력)일 때를 구분하여 routing해줄 수 있는 기능이 새로