profile
Front-end
post-thumbnail

nextauth (client_fetch_error)

전글에서 썼던 이슈 중 두번째 이슈인 nextauth 해결하기로컬, netlify배포시 둘다 잘 되었던 로그인이 server error를 뱉는다...로컬에서도 NEXTAUTH_URL 설정으로인해 글을 쓴 적이 있었는데, 또 얘가 말썽일줄이야nextauth 관련해서는 환

2023년 11월 9일
·
1개의 댓글
·

next-i18n ssr에서 적용 문제

로컬과 netlify를 사용했을땐 잘 작동 되었었는데, amplify로 옮기면서 두가지 이슈가 생겼다. i18n이 깨진다

2023년 11월 9일
·
0개의 댓글
·

query사용 뒤로가기 시 모달 닫기

Next13에서 작업그동안 모달을 작업 할 때에는 페이지 내에서 모달을 열고 닫고 할 일만 있었다. (물론 처리가 미흡했던 부분도 있었다)버튼을 누르면 열리고 dimm 또는 닫기 버튼을 두르면 닫힌다.해당 페이지 내에서 모달컴포넌트가 동작하니 페이지 이동을하면 닫히는것

2023년 6월 12일
·
0개의 댓글
·

[next13] Dynamic Routes의 Params

dynamic param을 \[slug]로 지정을 했을 경우useRouter를 사용하면 .query.slug를 통해 꺼내사용 할 수가 있었다.전에 썼던 글에선 page.tsx에서 params로 받아와서 사용했었는데, 컴포넌트 내에서 받아 써야 할 일이 있었다.useRo

2023년 6월 2일
·
0개의 댓글
·

sass : 반복문 이용하여 템플릿 스타일링 하기

그동안은 prop으로 받아쓰기 편해서 스타일컴포넌트를 주로 이용하였었다.이번에 사이드프로젝트를 하며 모듈css로 사용하기로 하며 그래도 css보단 sass가 편하니까 sass로 작업하기로!(자주 사용하는 스타일을 mixin으로 사용해봤지만 다른것들은 잘 사용하지 않았었

2023년 5월 25일
·
0개의 댓글
·

next-auth error : CLIENT_FETCH_ERROR

dev로 보면서 작업 하다가 build & start를 해서 보면 google 로그인 버튼이 사라졌다..터미널의 에러를 확인해보니이런식으로 나오며 주어진 에러확인 링크(https://next-auth.js.org/errors하지만 건드리질 않았는데 왜이러는건지

2023년 4월 26일
·
0개의 댓글
·

Sanity

스키마(데이터 모델) 생성하고 클라우드에 콘텐츠 저장할 수 있으며 API를 통해 콘텐츠에 액세스 가능클라우드에는 스키마파일로 만든 구조의 DB가있고 Sanity Studio를 사용하여 쉽게 DB 관리할 수 있도록 도와줌API를 제공하여 웹에서 사용 가능하지만 프론트엔드

2023년 4월 12일
·
0개의 댓글
·
post-thumbnail

Next.js 13으로 공부 시작 - Render

SEO next는 각각의 페이지에서 title, description등을 작성할 수 있어서 검색엔진최적화가 가능하다. head.js를 사용했던것은 없어지고 Metadate를 사용한다. 정적/동적으로 SEO를 넣을 수 있으며 favicon은 기존 favicon을 덮어씌우

2023년 3월 30일
·
0개의 댓글
·
post-thumbnail

Next.js 13으로 공부 시작 - Route

Next.js가 13으로 새롭게 나왔다고하여 공부 시작. 계속 업데이트되고있는 최신버전으로 작업해보면서 바뀌는 부분들을 어떻게 해야 빠르게 터득할 수 있을지 연습해보는 시간이 될 것 같다 :) pages -> app 기존에 pages로 사용하던 라우팅 경로를 app으

2023년 3월 27일
·
0개의 댓글
·
post-thumbnail

type, interface

type과 interface 둘 다 데이터의 객체나 값의 타입을 정의하기 위해 사용 type 기존 타입을 재사용하거나 새로운 타입을 정의할 때 사용 일반 타입처럼 사용되기 때문에 타입 앨리어싱(Type Aliasing)이라고도 불림 computed property나

2023년 3월 24일
·
0개의 댓글
·

Rendering 방식

CSR / SSG / ISR / SSR, 4가지 렌더링 방식에대해서 정리해보자

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

keyof, typeof

keyof, typeof 타입 안에서 값의 타입과 관련된 정보를 추출하는데 사용되는 연산자 keyof 객체나 인터페이스의 키(key)들을 문자열 유니온타입으로 반환 유효성 검사, 매핑 등 다양한 용도로 사용 typeof 변수,속성,함수와 같은 값의 타입을 추출 변수

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

enum

enum이란? 열거형 변수로 정수를 하나로 합칠 때 편리한 기능 (아무것도 지정하지 않은 경우에는 0부터 숫자를 매깁니다) => Up = 0, Down = 1, Left = 2, Right = 3 으로 주어져 있는 상태 임의의 숫자나 문자열을 할당할 수 있으며 하나

2023년 3월 22일
·
0개의 댓글
·
post-thumbnail

vscode 타입스크립트 컴파일 설정

ts -> js로 변환해주는 컴파일을 해야한다.sourceMap : JS-TS 코드 매핑 정보를 포함, 디버깅할 때 JS파일에서 원래 TS소스 코드의 위치를 알려주는데 도움을 줌 (inlineSourceMap과 같이쓸 수 없음)outDir : 변환된 js파일의 저장 경

2023년 3월 21일
·
0개의 댓글
·
post-thumbnail

깃헙에 잔디가 안들어간다??

예전에 만들어두었던 포트폴리오를 수정하면서 github에 커밋, 푸시를 하였는데 오늘자에 잔디가 생기질 않는 현상이 생겼다.뭐지????전에는 vsCode 터미널을 통해서 커밋,푸시를 하였었는데 이번에 수정하면서부터는 소스트리를 사용하였다.지인에게 물어보니 깃헙 로그상의

2023년 3월 20일
·
0개의 댓글
·
post-thumbnail

HOC에 대하여

HOC 고차컴포넌트 : Higher-Order0Components 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수 컴포넌트 로직을 재사용하기 위함으로 같은 로직(데이터를 가져온다거나?)을 동일 적용해야할 때 사용하면 좋음 Redux의 connect처럼 타

2023년 3월 20일
·
0개의 댓글
·
post-thumbnail

배열

타입스크립트에서 배열사용의 기초

2023년 3월 16일
·
0개의 댓글
·
post-thumbnail

변수 타입지정하기

대충 사용하고있었던 것 같은 TS를 좀더 잘 사용하기위해 처음부터 기본을 다져보기로 마음먹고 강의와 책을 겸하며 이해한데로 적어보자 :)

2023년 3월 8일
·
0개의 댓글
·
post-thumbnail

[TIL] 회사에서 사용했던 스택들 찍먹(?)

오늘의 주제는 ELK Kafka Redis AWS (Lambda, S3, CloudFront, Route53)

2023년 2월 28일
·
0개의 댓글
·
post-thumbnail

route 리스트화하여 사용하기

그동안 비슷한 작업들을 할 때 menu컴포넌트에서만 map을 사용하며 메뉴를 클릭하면 연결될 route를 각각 써 주었었다.그렇다보니 페이지가 추가되어야 한다면 menu,route 각각 수정을 했어야 했는데 route를 리스트화 해주면 메뉴관련 수정사항이 생겼을 때 해

2023년 2월 27일
·
0개의 댓글
·