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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

부캠에서 children에 대해서 세션을 들었던 적이 있었는데,그때는 이걸 사용 할 일이 많을까? 너무 복잡해 보이는데 ... 라고 생각만하고 지나쳤었다.회사에서 프로젝트를 하다보니 그동안과는 다르게 많은 페이지를 다루면서 비슷한 내용을 다루는 페이지 별 공용 레이아웃

첫 취업 후 typescript와 zustand를 사용하는 커머스 웹앱 프로젝트를 맡아서 하다보니 데이터를 다룰 때 다양한 오류를 마주하는 것 같다.이제 3주차 인데 남은 일정을 생각하면 급히 처리 해야겠다는 생각으로 작업만 하였었는데, 너무 부담갖지말고 되는 부분까지

git push 했는데, 디렉토리에 화살표가 생기고 폴더가 안열린다 ????????????????