TIL
1.Interface 와 Type 의 차이점
타입스크립트를 사용하면서 타입을 정의할 때 interface 또는 type을 사용할 수 있습니다. 두 개 차이가 뭔지 항상 궁금하긴 했지만 극강의 귀차니즘으로 인해 애써 흐린눈하며.. 그저 글자수가 더 적은 type 만을 고집해왔는데요. .ㅎ이제는 더이상 물러날 수가
2.NEXT.JS 15 에서 Params 접근하기
Error: A param property was accessed directly with params.평소처럼 개발하다가 뜬금없이 이런 오류를 마주하신 분 계실까요 ?Next.js 15에서는 params와 searchParams에 접근하는 방식이 변경되었습니다.
3.Prisma migrate dev 안되는 오류
참고: stackoverflownpx prisma migrate dev 명령어를 입력했는데이 화면에서 멈추는 오류 해결방법입니다. 기존에는 DATABASE_URL만 등록을 해놓으셨을텐데요. 포트 번호만 5432로 변경해서 DIRECT_URL 을 하나 더 추가해주세요.
4.useEffect 안에 함수를 정의하는 이유
원티드 프리온보딩 강의에서 강사님이 수강생 누군가 쓴 코드를 보고 설명을 해주시는데 “fetchData를 바깥쪽에 쓴게 아니라 안쪽에 넣어놨네요. 오 그래도 배운 분이시군요.” 라고 하셨다. eslint 를 사용하다보면 useEffect 에서 사용하는 함수를 useEf
5.Next.js 에서 로딩 페이지 보여주는 방법
이전에 next.js 에서 로딩 페이지를 보여주기 위해서는 next/router 에서 제공하는 Router.events 를 사용해 1)라우팅 페이지를 감지하고 2) 페이지 전환이 발생할 때 상태 변경이 되면 3)로딩 페이지를 반환하는 형식 을 사용했습니다. 하지만 Ne
6.서버 통신의 흐름과 CORS 오류
지긋지긋한 CORS 오류 웹 개발을 하다 보면 필연적으로 마주하는 오류 중 하나가 CORS 오류입니다. 브라우저의 SOP(Same Origin Policy, 동일 출처 정책) 에 따라, 별도의 헤더 설정 없이 다른 출처에서 데이터를 요청하면 CORS 오류가 발생합니다
7.TypeScript 에서 alias를 사용할 때 주의할 점 : Cannot import type declaration files
tsconfig.json에서 아래와 같이 alias를 설정이후 src/types/SelectOption.ts에 타입을 정의하고 아래처럼 import하니 다음과같은 오류 발생❌ Cannot import type declaration files. Consider impor
8.Next.js 하위 메뉴 설계: 라우팅 vs 컴포넌트 전환
개발을 하다보면 가끔 아주 사소한 문제를 가지고 깊은 고민에 빠지게 됩니다. 특정 페이지 내부에 하위 메뉴가 있는 경우, 각각의 내용들을 각 페이지로 만드는 것이 좋을지, 아니면 state를 통해 컴포넌트를 전환하는게 나을지 고민이 되었습니다. 사실 지금까지는 아무 생
9.Next.js Layout 업데이트 문제: useState 대신 usePathname
Next.js에서 layout.tsx 를 사용하여 마이페이지 레이아웃을 사용하다가 문제가 발생했습니다. 이름 옆에 있는 수정 버튼을 클릭하면 다음과 같이 layout의 {children} 부분은 변하지만, layout 에서 컨트롤하고있는 사이드바의 active menu
10.Next.js에서 외부 스크립트를 불러와야 하는 경우
React에서는 index.html이 있기 때문에, 그냥 html,css,js 배울 때 처럼 body 내부에 script 태그를 집어넣어주면 됩니다. 하지만, Next.js에서는 눈씻고 찾아봐도 index.html은 보이지 않죠. 대신 layout.tsx에서 익숙한 코
11.로딩/에러 상태 처리 빼먹지 않는 법
로딩/에러 상태 처리 잘 하고계신가요? 저는 사실 그 부분을 자주 놓치는 편입니다. 실제 서비스를 운영해본 경험은 없고, 작은 사이즈의 프로젝트만 다뤄오다 보니 로딩/에러 처리를 대충 넘기는 버릇이 있었죠. 스켈레톤 같은 건 아예 없고, 로딩 처리라고 해봐야 Suspe