'react' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.~~ 모듈 또는 해당 형식 선언을 찾을 수 없습니다.  이런 에러가 느닷없이 나타날 때가 있습니다.근데 빌드나 실행은 아주 잘됩니다. (yarn dev 해도 잘 뜨고, yarn build로 빌드도 잘 됩니다.)무엇이 문제일까요? 아마 VSCode와 관련된 문제 같아보이는데요. 그래서 다양한 방법을 시도하고, 혹자는 @builtin typescript 플러그인을 사용하지 않으면 해결된다고 합니다.반은 맞고 반은 틀린 해결법입니다. 물론 빨간 줄은 사라지지만, 라이브러리를 import 하려고 하면 자동완성이 안돼요. 이 문제의 원인은 아주 간단합니다.React 버전 업그레이드에 따라, TypeScript 최신 버전이 필요한데 업데이트 되지 않음따라..

안녕하세요, 오늘은 Next.js 의 전체적인 개념에 대해 톺아보는 시간을 갖도록 하겠습니다.참고로, Next.js는 크게 page router 방식과 app router 방식이 있는데, 최근 방식인 app router 기준으로 설명하겠습니다.  Next.js 는 프레임워크 입니다. React.js 는 라이브러리죠.React 라이브러리를 사용하여, 더욱 개발자에게 편리성을 부여해주면서 프레임워크인 Next.js 가 탄생했습니다.프레임워크는 라이브러리에 비해 자유도는 낮습니다. 즉, 정해준 규칙을 반드시 따라야만 하는 부분이 있습니다. (그건 리액트 문법도 그렇지 않나요? 라고 물으신다면... Next.js 에서는 라우팅을 위한 규칙(파일명, 폴더 위치), SEO를 위한 변수명 규칙 등등이 존재합니다. 따..

안녕하세요, 오늘은 react의 가장 기본적인 제공 기능 중 하나인 리렌더링에 대해 이해해봅시다.리렌더링을 제대로 이해하지 못하면, 예상치 못한 난관들을 많이 마주하게 됩니다. 예를 들어, 카드 게임 혹은 Flash Clicker(빠르게 순서대로 버튼을 누르는 게임) 라는 게임을 만든다고 가정해봅시다.targetNumber인 다음 숫자에 해당하는 숫자를 키패드에서 찾아 빠르게 누르면 되는 기록 성취 게임입니다. 1) 숫자 1을 클릭하면 헤더의 오른쪽 부분에 있는 00:00 으로 포맷팅되어 있는 시간(초 단위)가 올라가고, 2) 동시에 '다음 숫자 : 1' 은 '다음 숫자 : 2' 로 변합니다. 3) 동시에 1이 위치한 버튼은 깜빡이는 애니메이션이 진행된 이후에, 10이상의 랜덤 숫자로 바뀝니다. 여기 제..

웹 개발, 특히 프론트엔드 개발을 하다보면 빌드 도구와 번들러에 대해 듣곤 합니다.오늘은 그 중에서도 빌드 도구와 번들러에 대해 알아보겠습니다. 빌드 도구란?빌드 도구는 단순히 파일을 합치는 번들링 외에도, 코드의 변환(트랜스파일링), 압축, 테스트, 핫 리로딩 등을 지원하는 더 넓은 범주의 도구입니다. 빌드 도구는 번들링뿐만 아니라 다양한 개발 및 배포 관련 작업을 자동화합니다. 번들러란?번들러는 여러 개의 소스 파일(자바스크립트, CSS, 이미지 등)을 하나 또는 여러 개의 파일로 합쳐서 브라우저에서 더 빠르게 로드할 수 있도록 해주는 도구입니다. 번들러는 코드의 종속성을 분석하고 최종 배포를 위한 파일 크기를 줄이는 데 중점을 둡니다. 결국 번들러 ⊂ 빌드도구 라고 이해하면 되겠네요. 빌드 도구들..