**React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구**입니다.
대표적인 서비스로는 페이스북, 인스타그램, 에어비앤비 등이 있습니다.
수업을 시작하기에 앞서, 이러한 도구(라이브러리, 프레임워크)가 무엇인지 이해할 필요가 있습니다.
(추가)
💡 기본 리눅스 명령어 앞으로 우리가 개발을 하면서 자주 사용하게 될 기본 명령어들을 정리해보았습니다. 모든 명령어는 명령어 뒤에 —help 옵션을 작성하면 자세한 사용 방법을 알 수 있습니다.
| 명령어 | 기능 |
|---|---|
| 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. **VSCODE** 설치
2. **VSCODE-EXTENSION** 설치
2. **Node.js** 설치(LTS 버전을 설치해주세요)
=> Node.js를 설치하면 **npm**은 자동으로 설치됩니다.
3. **Yarn** 설치
=> **sudo npm install -g yarn**
🔈 여기부터는 컴퓨터에 node.js가 설치되어 있어야 합니다. → 노드는 크롬에 node.js를 검색해 LTS버전으로 설치합니다. (신버전은 버그가 있을 수 있어 LTS 버전을 설치합니다.)
1. 바탕화면에 **"codecamp-frontend-이름"** 폴더 만들기
=> 이름은 영어로 작성해 주세요. (ex, codecamp-frontend-chulsoo)
2. **"codecamp-frontend-이름"** 폴더에 **"class"** 라는 이름의 **Next.js** 프로젝트 설치하기
=> Next.js를 설치하면 **React.js**는 자동으로 함께 설치됩니다.
3. **"class"** 폴더에 **Emotion** 설치하기
4. **"class"** 폴더에 **Apollo-Client, Graphql** 설치하기
5. **"class"** 폴더에 **Ant-Design** 설치하기
6. **"class"** 폴더에 **Axios** 설치하기