현재 내 프로젝트에서 tsconfig.json은 이런 모습을 하고 있는데, nextjs를 15로 업그레이드 하면서 target에 대한 안내 메시지가 나온김에 한번 정리하게 되었다. 천천히 생각나는 대로 정리할 예정이다.  

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "./src",
    "types": [
      "@emotion/react/types/css-prop"
    ],
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "shared": ["./shared"],
    },
    "target": "ES2017"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "src/shared/Modal/Modal.tsx"
  ],
  "exclude": [
    "node_modules",
    ".next"
  ]
}

compilerOption

include

exclude

target: typescript가 어떤 버전의 자바스크립트로 변환되는지 설정하는 값

터미널을 열고, cd project/kkojimo 에 디렉토리에 진입하고 yarn dev로 데브 서브를 실행시키거나, vscode를 열기도 하고 브라우저를 열기도 해야한다. 

매일 같은 행동을 하기 오늘따라 귀찮아졌달까?

저 행동들을 terminal에 단축키를 만들어서 루트에서 작동하게 설정해보았다.

.zshrc에 설정을 추가할 것이다.

echo "alias start_project='cd project/projectfoldername && git pull && yarn && code . && yarn dev'" >> ~/.zshrc

이런식으로 하면 .zshrc의 맨 아랫줄에 코드가 추가되게 된다. 

본인 프로젝트이름, 위치에 맞게 코드를 수정해줘야한다.

아니면, 아래의 방법도 자주 사용한다. 파일에 직접 들어가서 수정하는 방법이다.

vi ~/.zshrc

입장해서 i 를 눌러서 수정가능한 상태로 변경하고 제일 하단에 아래 코드를 추가해준다. yeboc 프로젝트를 바로 실행시켜줄 수 있는 명령어를 만드는 것이다.

alias yeboc="cd ~/company/yeboc && code . && yarn dev && open http://localhost:3000"

참고로 저기서 code 명령어는 해당 위치의 vscode를 여는 명령어이고

linux, window는 open 대신 다른 명령어를 사용해야한다! 

source .zshrc

꼭 진행해야 하는 절차! 터미널에 위의 명령어를 입력해서 파일을 불러오게 해야한다. 

그러면 단축어로 한번에 여러가지 일을 시킬수 있게 된다. 

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  },

command + p 로 파일 검색창 열고 > 를 입력한다.

그러면 파일검색창에서 명령어팔렛트로 바뀌게 됩니다.

settings.json 를 검색하면 아래 처럼 뜨는데

Preferences: Open User Settings (JSON) 을 누르면 json 파일을 열어, 맨 위에 적어놓은 코드를 추가하면 된다.

코드 치는 양을 최대한으로 줄이고싶다랄까? 🧐

스니펫 설정하는 곳 찾아가기

1. command + p 로 파일 검색창 열기
2. >snippet 입력하기

1. Snippets: Configure User Snippets 선택하기

1. 스니펫을 사용할 환경을 선택해주면 된다. 나는 typescriptreact.json 을 선택
2. 확인해보면 Print to console 이름으로 된 예시가 있다. 그걸 참고해서 이제 나만의 스니펫을 만들어보자.

스니펫 생성하기

  {

  "nextjs) functional component": {
  	"prefix": "rfc",
  	"body": [
  		"export default function ${TM_FILENAME_BASE}() {",
      " return <div> ${TM_FILENAME_BASE} component! </div>",
      "}"
  	],
  	"description": "nextjs) functional component"
  }
}

아주 자주 사용하는 rfc 스니펫을 내 입맛에 맞게 살짝 고쳐주었다.

참고로 TM_FILENAME_BASE 는 확장자를 뺀 파일 명을 뜻한다.

스니펫 동기화 해주기

vscode는 기본적으로 스니펫은 로컬에 저장한다. 나는 2대의 맥북을 사용하기에 스니펫 설정을 동기화해주어 같은 일을 두번 하지 않으려 한다.

vscode 계정에 로그인이 되어있어야한다.

1. command + p 로 파일 검색창을 다시 열어주고
2. >setting sync 를 입력한다

3. Settings Sync: Backup and Sync Settings... 을 선택

4. 동기화 하고 싶은 부분들을 선택해서 sign in 버튼을 눌러준다.

5. vscode 로그인한 계정을 선택해준다.

6. 성공한다면 우측하단에 아래와 같은 메시지가 뜬다.

7. 메시지가 뜨기 전에 conflict 가 났다고 메시지가 나왔다. 확인해보니 내가 방금 추가한 스니펫 부분이 다르다고 뜬것이었다. 컨플릭 처리 하고나면 6번과 같은 메시지가 뜰 것이다.

nextjs useSearchParams 오류는 왜 은근히 자주 등장할까?

nextjs 의 useSearchParams 를 사용하고, yarn build를 하게 되면

useSearchParams() should be wrapped in a suspense boundary at page "/account/find-password". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

이런 오류를 만날수 있다.

해결

next.config.js에서 experimental > missingSuspenseWithCSRBailout 의 값을 false 로 두면 된다.

const nextConfig = {
 ...
  experimental: {
    missingSuspenseWithCSRBailout: false,
  },
};
export default nextConfig;

experimental 은 nextjs의 실험적인 기능이 정의되어있고 missingSuspenseWithCSRBailout 옵션은 Suspense 을 강요 여부를 설정한다. Suspense가 누락되면 자동으로 에러를 발생시키는 기능이다.

그럼, 이게 왜 useSearchParams 와 충돌을 일으키느냐 nextjs의 server, client component 와의 관계에서 시작된다.

useSearchParams는 url 의 쿼리 파라미터에 접근하는데 사용되는데 이건 클라이언트 컴포넌트에서만 사용할 수 있다. next13 이상에서는 서버컴포넌트가 디폴트이기 때문에 생기는 충돌이다.

nextjs는 useSearchParams가 서버컴포넌트 트리에 존재할 경우, 클라이언트 사이드 렌더링으로 전환을 하는데, 그 전환과정에서 missingSuspenseWithCSRBailout 경고가 발생하는 것이다.

이걸 해결하기 위해 use client를 알맞게 선언해줌으로써 해결할수 있다.