React는 javascript의 라이브러리이다. javascript를 쉽고 편리하게 이용하기 위해 페이스북에서 만들어졌다.
React를 사용하기 위해서는 node.js를 설치해야한다.
이 때 터미널에서 사용하는 여러 명령어는 아래와 같다.
| pwd : print working directory. 현재 작업 중인 폴더 정보를 출력합니다 |
| cd : change directory(폴더). 경로를 이동합니다. 절대 경로, 상대 경로로 이동이 가능합니다. |
| ls : list. 현재 폴더 안에 있는 목록을 확인합니다. |
| cp : copy. 파일 혹은 폴더를 복사합니다. 폴더를 복사할 경우에는 -r 옵션을 함께 사용해주어야 폴더 안에 있는 목록도 함께 복사할 수 있습니다. |
| mv : move. 파일 혹은 폴더를 이동합니다. 실제로 원하는 위치로 이동할 때도 사용하지만, 이름을 변경할 때도 사용합니다. |
| mkdir : make directory. 폴더를 생성합니다. -p 옵션을 주면 하위 폴더까지 한 번에 생성 가능합니다. |
| rm : remove. 파일이나 폴더를 삭제합니다. 폴더를 삭제할 때는 -r 옵션을 주어야하며, -f 옵션을 주면 사용자에게 삭제 여부를 묻지 않고 강제로 삭제하게 됩니다. 폴더를 삭제할 때에는 하위 폴더까지 모두 삭제되므로 유의합니다. |
| touch : 파일이나 폴더의 최근 업데이트 일자를 현재 시간으로 변경합니다. 파일이나 폴더가 존재하지 않으면 빈 파일 혹은 폴더를 생성합니다 |
| cat : concatenate. 파일의 내용을 출력할 수도 있고, 파일 여러 개를 합쳐서 하나의 파일로 만들 수도 있습니다. 또는 기존 한 파일의 내용을 다른 파일에 덧붙일 수도 있습니다. 새로운 파일을 만들 때에도 사용됩니다. |
| head : 파일의 앞 부분을 보고싶은 줄 수만큼 보여줍니다. 옵션을 지정하지않으면 상위 10줄을 보여줍니다. |
| tail : 파일의 뒷 부분을 보고싶은 줄 수만큼 보여줍니다. 옵션을 지정하지않으면 하위 10줄을 보여줍니다. -f 옵션과 함께 실행하면 파일 내용을 화면에 계속 띄워주고 파일이 변하게되면 업데이트 된 내용을 갱신해줍니다. 주로 실시간으로 내용이 추가되는 로그 파일을 모니터링할 때 사용합니다. |
| find : 특정 파일이나 폴더를 검색합니다. 파일명 혹은 폴더명, 확장자명으로 찾을 수 있습니다. |
| sudo : mac에서 설치가 안 되는 경우 보통 권한이 없어서 에러가 나는 경우가 많으므로 설치 명령어 앞에 sudo를 붙여 관리자 권한을 부여합니다. |
| ./ : ‘현재 폴더 안에 있는’ 이라는 뜻을 가지고 있으며, 생략할 수 있습니다. |
| ../ : 현 위치 바로 상위 폴더를 가르킵니다. |
1) 바탕화면에 "codecampfrontend(기수 혹은 이름)" 영문명의 폴더를 만들어 주세요.
2) "codecampfrontend(기수 혹은 이름)" 폴더에 "class" 라는 이름의 Next.js 프로젝트를 설치해 주세요.
2-1) nextjs 홈페이지 접속(https://nextjs.org/) 또는 구글에서 nextjs를 검색해 주세요.
2-2) Docs를 클릭해 주세요.
2-3) npx create-next-app 복사해 주세요.
💡 원래는
npx-create-next-app@latest를 사용해서 설치해주시는 것이 맞습니다!
그러나 이렇게 설치해주시면 react 버전 18이 함께 설치가 되는데, 최근에 업데이트된 React 18 버전을 사용하시면 여러분들이 여러가지 오류를 만나게 되어 어려울 수 있기 때문에 React 17 버전으로 진행 할 수 있도록 설치하는 것입니다!
최근에 업데이트 된 버전보다 안정적으로 오래 지원된 버전을 사용하는 것이 좋습니다!
❗️
npx-create-next-app@latest란?
→ Next.js 프로젝트를 설치할 때 가장 최신버전의 next app을 설치하게 됩니다.
하지만 위에서 알려드렸 듯 이렇게 설치되면 많은 오류와 마주할 수 있기때문에 @latest는 빼고
설치를 진행합니다.
2-4) npx create-next-app를 복사하여 자신의 "codecampfrontend(기수 혹은 이름)" 폴더에서 붙여넣기를 하고 엔터키를 눌러주세요.
그러면, 프로젝트 이름을 입력하라고 나옵니다. class 라고 입력한 뒤에 엔터키를 눌러주세요.
2-5) "class" 라는 이름의 폴더가 만들어졌습니다. 해당 폴더로 이동해 주세요.
2-6) 해당 폴더에서 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 명령어를 복사하여 React 17버전과 React 17버전을 지원하는 next를 설치해주세요
2-7) node_modules 와 pages 안에 있는 api폴더를 삭제해주세요.
2-8) package.json에서 react 와 react-dom의 버전을 바꿔주세요.
"dependencies" : {
"next" : "12.1.0",
"react" : "17.0.2",
"react-dom" : "17.0.2"
}2-5) "class" 라는 이름의 폴더가 만들어졌습니다. 해당 폴더로 이동해 주세요.
2-6) 해당 폴더에서 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 명령어를 복사하여 React 17버전과 React 17버전을 지원하는 next를 설치해주세요
2-7) node_modules 와 pages 안에 있는 api폴더를 삭제해주세요.
2-8) package.json에서 react 와 react-dom의 버전을 바꿔주세요.
"dependencies" : {
"next" : "12.1.0",
"react" : "17.0.2",
"react-dom" : "17.0.2"
}이렇게 버전을 바꿔주셨다면, **npm install** 명령어를 입력해주세요.
2-9) 우리는 이제 npm을 사용하지 않을 것입니다. yarn을 사용할 것 입니다.
yarn은 최상위 폴더로 이동해서 설치를 진행해주셔야 합니다.( codecamp-frontend 폴더 )
npm install -g yarn 명령어를 입력합니다.
만일 관리자 권한 문제[ permission denied ]가 발생 했다면, sudo npm install -g yarn 을 입력해주세요.
sudo 명령어를 사용하셨다면, 비밀번호를 입력하셔야 합니다.
비밀번호는 노트북 비밀번호를 입력하시면 됩니다.
비밀번호는 입력해도 보이지 않는게 정상이니 입력하시고 엔터를 눌러주시면 됩니다.
yarn이 제대로 설치되었는지 확인은 yarn -v 를 입력하시면 버전이 뜰 것 입니다.
3) "class" 폴더에서 Emotion 을 설치해 주세요.
3-1) emotion 홈페이지 접속(https://emotion.sh/) 또는 구글에서 emotion을 검색해 주세요.
3-2) Install 클릭 후, yarn add @emotion/react 복사 후 class 폴더에서 붙여넣기하고 엔터를 입력해 주세요.
3-3) 스크롤을 아래로 내리면 With **styled** 라는 부분이 있습니다.
yarn add @emotion/styled 복사 후 class 폴더에서 붙여넣기하고 엔터를 입력해 주세요.
4) "class" 폴더에서 Apollo-Client와 Graphql을 설치해 주세요.
4-1) apollographql 홈페이지 접속(https://www.apollographql.com/) 또는 구글에서 apollographql을 검색해 주세요.
4-2) Developers의 Docs 항목을 들어가주세요
*홈페이지의 구성 및 디자인이 변경되었을 수 있습니다.
같은 메뉴로 들어가서 진행해주시면 됩니다.
4-3) Apollo Docs Home의 Apollo Client/React 항목을 들어가주세요
4-4) Get started를 클릭한 후, npm install @apollo/client graphql 을 복사 후 class 폴더에서 붙여넣기하고 엔터 키를 입력해 주세요.
5) "class" 폴더에서 Ant-Design을 설치해 주세요.
5-1) Ant-Design 홈페이지 접속(https://ant.design/) 또는 구글에서 antdesign을 검색해 주세요.
5-2) Docs를 클릭해 주세요.
5-3) 아래쪽의 **yarn add antd**을 복사 후 class 폴더에서 붙여넣기하고 엔터 키를 입력해 주세요.
6) "class" 폴더에서 Material-UI을 설치해 주세요.
6-1) Material-UI 홈페이지 접속(https://material-ui.com/) 또는 구글에서 material-ui를 검색해 주세요.
6-2) 3줄 버튼(햄버거 버튼)을 클릭해 주세요.
6-3) Getting Started를 클릭하고, Installation 을 클릭해 주세요.
6-4) npm install @material-ui/core을 복사 후 class 폴더에서 붙여넣기하고 엔터 키를 입력해 주세요.
7) "class" 폴더에서 Axios을 설치해 주세요.
7-1) yarn add axios를 입력해 주세요.
💡 모두 설치했는지 확인하기
node --version
npm --version
yarn --version
이렇게 해주면 다음에는 다 깔지 않고도 yarn install로 node_modules을 불러올 수 있다.
