흥미로운 IT

가장 기초적인 부분이지만, 오랫동안 리액트를 건드리지 않고, 이제 갓 프로그래밍을 입문했는데 하필 리액트부터 건드린 사람들을 위해서 당황스러운 부분이었던, node-module이 없을 때의 해결방법을 적어본다.

우선 이 상황이 발생하게 되는 이유는, 

다른 사람의 코드를 공유받았을 때 (예를 들어 github에서 clone을 했을 때),

node-module의 경우 기본 개발환경을 위한 파일들이기 때문에 건드릴 일이 없으며, 또한 폴더의 크기도 너무 크기 때문에 공유를 하지 않는 것 같다.

따라서, 나머지의 폴더와 파일들을 받게 되는데,

이때 yarn start 혹은 npm start를 하더라도 node-module이 없기 때문에 코드가 실행이 제대로 되지 못한다.

이럴 때에 해결방법은 매우 간단하다.

결국 node-module만 install 해주면 된다.

해당 파일에서 yarn install 혹은 npm install을 해주면 끝!

팀 프로젝트를 하다 보면 다른 사람의 github에서 코드를 clone 하거나 다운로드를 해서 사용하는 경우가 많다.

이번에도 이렇게 사용을 하던 중, React에 관해서 에러가 계속 나서 문제가 생겼던 부분이 있다.

바로 node의 버전이 안 맞아서 계속 에러가 나는 부분인데, 이 부분의 해결방법에 대해서 정리해보고자 한다 (사실 스스로도 나중에 방법을 잊어먹을까 봐 정리하는 느낌도 있다... ㅎ)

일단 에러 코드는 다음과 같이 나타났을 때의 경우이다.

(참고로 이 에러는 yarn start가 되지 않아서 yarn install을 하려고 할 때 발생하는 상황이다.)

이런 경우, node를 최신 버전으로 업데이트를 해야 하는 경우라고 볼 수 있다.

따라서, node 업데이트를 해야 하는데, 여기서 개발환경에 따라서 다른 방법이 요구된다.

1번 경우: mac을 활용하고 있다면, 다음과 같은 코드로 업데이트를 한 후 해결해보면 된다.

사실 이 경우는 나는 사용하지 못했기 때문에 https://question0.tistory.com/40를 참조하는 것이 더 좋다고 생각된다.

2번 경우: windows를 사용하고 있고, nvm으로 node를 다운로드하였을 경우

사실 이 경우를 정리하기 위해서 이 글을 쓰는 이유가 있다.

우선, nvm을 통해서 업데이트를 해야 하므로, 우선 version을 확인해보는 것이 좋다.

nvm --version 을 통해서 다음과 같이 version 뿐만 아니라 다양한 명령어들을 확인해본다.

여기서 nvm install <version> [arch] 부분을 읽어보면, "latest"를 사용할 수 있다고 되어있다.

이에 따라서 nvm install latest를 사용하는 방법을 선택하면 된다.

이렇게 하면 이미 최신 업데이트가 되어있으면 다음 사진과 같이 나타날 것이고, 

그렇지 않다면 알아서 업데이트를 실행할 것이다.

마지막으로, nvm use [version]의 명령어를 사용해서 사용하고자 하는 version으로 사용하도록 처리를 하면 된다.

nvm use 16.9.1 을 하면 된다.

이러고 나서 오류가 나던 yarn start를 다시 하면, 제대로 오류 없이 작동하는 것을 볼 수 있다!!!

리액트 프로젝트에서 스타일링을 위한 방법의 하나로 styled-components를 사용할 수 있다.

사용하기 위해서는 우선 별도의 설치들이 필요하다.

우선 리액트 프로젝트를 생성한다.

예시로 타입스크립트 형식으로 프로젝트를 생성해보도록 하면 다음과 같다.

$ npx create-react-app fileName --template-typescript

다음 해당 폴더(위의 예시의 경우, fileName)의 경로로 들어간다.

$ cd fileName

이제 본격적으로 설치하는 명령이 필요하다.

다음의 명령어들을 실행하면 styled-components과 Prettier를 설치할 수 있다.

$ npm install --save styled-components

$ npm install --save-dev @types/styled-components jest-styled components

$ npm install --save-dev husky lint-staged prettier

위의 코드를 통해서 이제 설치가 되었을텐데, 다음 작업이 하나 더 필요하다.

Prettier의 설정을 해야하는데, 이를 위해서는 prettierrc.js 파일을 생성하고, 다음과 같이 수정을 해야한다.

이제 package.json파일에 다음의 코드를 추가하여 lint-staged와 husky를 설정해야한다.

이제 절대 경로로 컴포넌트를 추가하기 위해서 타입스크립터 설정파일인 tsconfig.json을 다음과 같이 수정해야한다.

(원래의 코드에서 빨간색으로 되어있는 부분을 추가시킨 것이다.)

이 다음부터는, 이제 App.tsx파일을 열어서 styled-components를 사용해서 App컴포넌트를 리팩토링하면된다.

내용 출처: 스무디 한 잔 마시며 끝내는 리액트 + TDD

javascript를 대신해서 typescript를 리액트에서 사용할 수 있다.

typescript의 경우, javascript보다는 조금 더 배우기 쉬운(?) 느낌으로 볼 수 있다고 한다.

기본적으로 타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이기 때문에 큰 틀에서는 javascript와 비슷하기는 하다.

1. 일단 typescript를 사용하기 위해서는 npm을 기준으로, 

을 통해서 typescript를 사용할 수 있도록 설치가 필요하다.

이후에 다음과 같이 

와 같이 typescript 형식으로 리액트 폴더를 생성하면 된다.

위의 코드에서 todo-list 는 폴더명을 뜻한다.

이렇게 해서 

리액트에서 yarn보다는 아직 초반 공부 중인지라, npm이 더 익숙해서 npm을 사용하면서 공부를 했다. 

그런데 yarn을 사용한 폴더를 열어봐야할 일이 있어서 yarn install을 통해서 설치를 했다.

해당 링크를 통해서 npm을 통한 yarn install이 가능하다: https://classic.yarnpkg.com/en/docs/install/#windows-stable

root-import라는 폴더를 통해서 설치를 한 후, 잘 실행을 했고, 해당 폴더를 삭제했다.

문제는 해당 폴더를 삭제 후, npm으로 돌리고 싶은데, 해당 폴더를 npx create-react-app root-import --template=typescript 로 생성을 하면, 계속 yarn.lock이 생기면서 yarn형태로 생겼다.

원하던 파일은 yarn.lock이 아니라 package-lock 이었는데, 그저 삭제로는 안 되는 거였다.

계속 고민을 하고 인터넷을 찾던 중에, yarn uninstall을 하라는 글을 찾았었다.

해당 stackoverflow의 링크에도 꽤 많은 사람들의 질문과 대답이 존재한다. 

일단 중요한 부분은 npm을 통해서 uninstall하는 방법은 npm uninstall -g yarn으로 하는 것이다.

https://stackoverflow.com/questions/42334978/how-do-i-uninstall-yarn

위의 방법으로 yarn의 uninstall은 그런데 경로를 해당 폴더에서만이 아닌 아예 home directory 상태에서 처리를 해야 할 것 같다.

사실 uninstall을 했는데도 계속 몇 번 yarn이 생겼던 것 같은데, 어느 순간 yarn이 없어지고 다시 npm의 형태로 쓸 수 있는 package-lock이 나왔다.

그나마 내가 한 여러 방법들 중에 위의 방법이 먹혔기 때문에 이 방법은 정리한다.