next프로젝트를 진행하는데, 여러 오류가 발생되었다. 

내 환경
npm : 10.5.0
node  : 20.12.2
next : 14.2.3

우선, tsx파일에서는 next관련을 import해올 때 next관련 모듈을 찾아오지 못하고 아래와 같은 오류를 보여주었다.

'next' 모듈을 찾을 수 없습니다. 'moduleResolution' 옵션을 'node'로 설정하거나 'paths' 옵션에 별칭을 추가하려고 하셨습니까? ts(2792

'next/font/google' 모듈을 찾을 수 없습니다. 'moduleResolution' 옵션을 'node'로 설정하거나 'paths' 옵션에 별칭을 추가하려고 하셨습니까? ts(2792)

tsconfig.json을 확인해보면 이곳에서도 역시 오류가 발생되고 있다. 

'node' 모듈 확인 전략 없이 '--resolveJsonModule' 옵션을 지정할 수 없습니다.

다른 팀원들은 따로 오류가 발생되지 않았는데, 왜 나만 발생되는건지..

아무래도 PC셋팅을 함께 시작한 것이 아니기에 각각 환경이 다를 수 밖에 없어서인듯 하다.

(노드 버전 문제인가 싶었는데..아니었다 ㅠㅠ)

moduleResolution은 모듈 분석 방법을 설정하는 것인데,

'node' (Node.js) 또는 'classic' (TypeScript pre-1.6)으로 가능하다고 한다. 

resolveJsonModule도 같이 오류가 났었는데, 요건 ts파일에서 json import를 허용해주는 옵션이라고 한다, 

"moduleResolution": "bundler" 요걸 "moduleResolution": "node"

이렇게 node로 바꿔주면 tsconfig와 tsx모두 오류가 사라진 걸 볼 수 있다.

사실 저 오류가 떠있을때도 (바로 전 프로젝트) 동작에 이상이 있거나 하진 않았는데,

오류가 떠있으면 거슬리기도 하니 이번 프로젝트때는 없애고 진행을 해보려고 한다.

💡 회고 룰
Mood : 오늘의 기분 - 기분과 그렇게 느낀 이유도 적는다.

Facts : 사실, 객관 - 실제로 내가 했던 일이나 겪었던 일의 사실
Feelings : 느낌, 주관 - 내가 했던 일을 하면서 느꼈던 감정이나 느낌
Findings : 내가 했던 일을 통해서 새롭게 배운 점이나 알게 된 점

Keep : 현재 만족하고 이어나가면 좋을 것
Ploblem : 불편하거나 개선이 필요한 것
Try : Ploblem에 대한 해결책, 앞으로 실행할 것

Affirmation : 자기 확언, 용기를 주는 문장

✨ Mood

-  보통. 햇빛 알레르기로 인해 컨디션이 좋지 않다. 새로운 프로젝트를 시작하며 기대와 동시에 걱정이 앞선다. 

✨ Facts

- 팀 프로젝트 organization에 develop브랜치로 base브랜치를 생성했다.

- wiki에 팀 프로젝트에 필요한 다양한 문서를 추가해두었다. 

✨ Feelings

- 팀장을 하게 되어 서포트를 잘 해야한다는 책임감이 든다. 

- 플젝에서 다른 사람들보다 실력이 월등하지 않다보니, 욕심이 앞서는 것은 아닌지 걱정이 된다. 

✨ Findings

- 깃헙의 프로젝트를 통해 이슈 관리를 편하게 할 수 있다.

- 파일 구조 중 기능 분할 설계(FSD)를 사용해보고 싶어서 공부해보았다. 하지만, 타인에게 설명하기 어려운 것으로 보아 잘 알게 되었다고 보긴 어려울 듯 하다. 

✨ Keep

- 문서화, 그리고 일일 회고를 시간내어 매일 작성해보기

- 적어도 평일은 매일 커밋 진행하기

✨ Ploblem

- 새로운 팀, 새로운 프로젝트를 할 때에는 폴더구조부터 선택할 것이 많아 어렵다.

- 다양한 조건에 대응할 수 있을 정도로 잘 알아두면 좋을 것 같다.

✨ Try

- 매일매일 회고 남기기

- 1일 1커밋 이상 하기

✨ Affirmation

- 시작하지 않으면 걱정만 앞선다. 일단 시작하자. 

Next.js ?

Next.js는 React 라이브러리의 프레임워크이다. 

이를 통한 큰 장점은 plain react앱의 한계를 극복하기 위함인데, 

리액트의 단점 중 하나인 취약한 SEO를 위한 SSR 또는 SSG를 가능하게 하기 때문이다. 

CSR을 하는 리액트의 특성상 SEO에 취약한데,

next.js가 pre-reloading을 통해 데이터가 랜더링 된 페이지를 미리 가져오게 해준다.

덕분에 사용자 경험에도 도움이 될 뿐 아니라 SEO까지 장점을 얻을 수 있다.

SSR과 CSR까지 혼합해서 사용이 가능한 장점도 있다.

물론, Next.js없이도 SSR구현이 가능하다. 이미 진행된 플젝에서 Next를 중간에 도입하는 경우 비용이 많이 드는 단점이 있어 처음부터 Next를 도입하는 것이 좋다.

Next.js의 다양한 기능

직관적인 페이지 기반 라우팅

link컴포넌트를 통해 페이지간 매끄럽고 빠른 전환이 가능

코드를 분할해서 로드 타임 감소

이미지 최적화

그 외 api routes등 react 프로젝트의 성능 향상을 위한 기능들이 존재해서 편리하다.

사람이 프로그래밍 언어로 작성을 하면 기계어(컴퓨터가 이해 할 수 있는 언어)로 컴파일 하는 과정이 필요하다.

보통의 컴파일의 과정은 컴파일을 하게 되면, 결국 바이트 코드로 변환이 된다.

컴파일 과정을 보면 JS코드를 AST(추상 문법 트리)로 먼저 변환을 하는데 

컴파일러가 이 AST를 바이트 코드로 변환을 하면 컴파일이 종료 된다.

📌보통의 컴파일러 과정

JS > AST >  바이트 코드 > 실행

타입스크립트는 먼저 코드를 AST로 변환 하고, 

바이트 코드로 바로 변환하는 것이 아닌 타입검사를 통해 코드상 오류 여부를 확인한다.

검사 실패시 컴파일이 종료되고, 만약 정상코드라면 

AST를 JavaScript로 변환 후 컴파일이 종료된다. 

이때 타입관련 문법은 사라지고 안전한 JavaScript코드로 변환을 한다.

그렇게 만들어진 JavaScript로 변환 된 뒤에 

보통의 컴파일의 과정인 AST > 바이트 코드로 변환을 하게 된다.

📌타입스크립트의 컴파일러 과정

TS > AST > 타입 검사 > JS > AST >  바이트 코드 > 실행