흥미로운 IT

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

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

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

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

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

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

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

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

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

리액트 프로젝트에서 스타일링을 위한 방법의 하나로 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이 나왔다.

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