리액트 환경설정

리액트 환경설정!!

create-react-app(CRA)을 사용하여 쉽게 구성하는 방법이 있긴하지만, CRA에는 SSR이 안되어있고, eject해서 직접 셋팅 설정을 변경할 수도 있지만, 구조가 복잡하므로 이해가 안된 상태에서 설정을 변경하기란 쉽지 않다.

CRA를 사용할 경우 CRA의 업데이트의 따른 유지보수가 어렵고, 개발환경의 자유도가 줄어든다.

그러므로 직접 하나하나 셋팅하는 방법으로 해보자!

 

1. 폴더 생성 후 vscode로 폴더 연 후의 bash쉘에서 명령어를 순차적으로 입력한다.
npm init -y

 

2. react를 설치한다. 
npm i react react-dom

 

3. type이 정의된 react와 react-dom을 설치한다. ( js는 타입이 명시가 안되어있기 때문에 type명시된 것을 설치)
npm i -D @types/react @types/react-dom (-D 옵션은 개발용(개발용에서만 사용))

 

4. typescript도 필요하므로 typescript 설치한다.
npm i -D typescript

 

5. typescript 설정 파일이 필요하므로 설정파일 생성한다.
npx typescript --init

 

6. JSX(javascript + xml)을 지원하기 위해 생성된 tsconfig.json의 설정의 jsx:"react" 추가한다.
(설정은 필요사항에 따라 수정, 일단은 기본 설정)

[참고 1] tsconfig.json 환경변수 설정

 

7. next가 필요하므로 설치한다.
npm i next

next가 필요한 이유

React를 사용하여 완전한 웹 애플리케이션을 처음부터 빌드하려면 고려해야 할 중요한 세부 사항이 많이 있습니다.

• 코드는 webpack과 같은 번 들러를 사용하여 번들로 묶어야하고 Babel과 같은 컴파일러를 사용하여 변환해야합니다.
• 코드 분할과 같은 프로덕션 최적화를 수행해야합니다.
• 성능 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링 할 수 있습니다. 서버 측 렌더링 또는 클라이언트 측 렌더링을 사용할 수도 있습니다.
• React 앱을 데이터 저장소에 연결하려면 서버 측 코드를 작성해야 할 수 있습니다.

next가 이와 같은 사항들을 해결해준다!

 

 

8. package.json 파일의 [참고 2]와 같이 입력하고 pages 폴더를 생성해준 후 아래의 명령어를 입력한다.
npm i -D @types/node
npm run dev

[참고 2] package.json의 next 스크립트 내용 추가

 

9. pages의 _app.tsx 파일 생성 후 [참고 3]와 같이 입력한다.

[참고 3] _app.tsx

 

10. 정상적으로 잘 작동하는지 확인하기 위하여 index.tsx 파일 생성 후 예제 코드를 [참고 4]와 같이 작성한다.

[참고 4] index.tsx

 

11. 브라우저에서 localhost:3000 입력하면 잘 나오는 것을 확인할 수 있다.

 

12. _document.tsx 파일 생성 후 기본 설정은 [참고 5]와 같이 입력한다. (index.html 파일이라고 생각하면 될듯)

[참고 5] _document.tsx

 

13. Material UI를 적용하여 디자인을 해보자. next의 Material UI를 추가하기 위해 아래의 명령어를 입력한다.
npm i @material-ui/core @material-ui/icons @material-ui/styles

 

14. _document.tsx의 Material UI를 추가하기 위해 내용을 추가한다.

[참고 6] Material UI 추가

→ _document.tsx의 로드할 때 material UI를 적용하기 위해 파일 구성내용을 수정하였다.

   제대로 적용됬는지 확인해보자.

 

15. index.tsx의 내용을 [참고 7]과 같이 내용을 수정한다.

[참고 7] index.tsx의 파일 내용 변경

 

[참고 8] 결과 화면

→ 제대로 적용이 된 것을 확인할 수 있다. 다음으론 CSS보다는 SASS가 편하므로 SASS 설정을 해준다.

 

16. next-sass와 node-sass를 설치하고, 설정 파일을 링크를 참고하여 내용을 변경해준다.
npm i @zeit/next-sass node-sass@4.14

[next-sass 적용방법] github.com/vercel/next-plugins/tree/master/packages/next-sass

vercel/next-plugins

[참고 9] next.config.js sass 적용

(주의) node-sass 버전이 작성할 당시 5버전이였는데, 호환이 안되서 오류가 출력되므로 버전이 비슷한 4버전으로 낮춰서 설치한다.

 

17. 16번에 [next-sass 적용방법]으로 하면 에러가 출력되는데. 그 이유는 tsx는 js와 달리 확장자가 다르면 모듈의 정보를 알 수 없다. 그러므로 모듈을 인식할 수 있게 명시해주자.

[참고 10] next-sass 적용

 

→ 여기까지 Typescript + Next + SASS + REACT 기초적이 환경설정을 하였다.

 

 

---

[참고 문헌]

linguinecode.com/post/how-to-fix-cannot-find-module-css-scss-nextjs

How to fix TypeScript cannot find module CSS/SCSS in Next.js

github.com/vercel/next-plugins/tree/master/packages/next-sass

vercel/next-plugins