기존 브라우저에서 작동하던 언어는
html, css, js
만약 JAVA 나 Python 등을 공부하던 사람도 페이지를 만들려면 js 를 공부해야함.
그러다 보니 js를 안해본 개발자는 거의 없음.
그러면 js를 사용해서 페이지말고 다른데서도 사용할 수 있으면 얼마나 좋을까
그런 문제를 해결하다보니 자바 스크립트 실행프로그램 = Node.js가 나옴
npm
소스코드를 저장하고 관리하던 git 처럼
자바 스크립트의 각종 기능들을 저장한 사이트를 npmjs라고하며
npm을 설치해서 관리(업로드, 다운로드)가 가능함
npm을 개선한 프로그램 yarn도 있음
준비할것
- Node.js 설치 (npm 자동으로 설치됨)
- yarn 설치 ( npm 명령어로 설치함 - npm install yarn )
- 예제 정리할 폴더 만들고
설치
Node.js
https://nodejs.org/en 사이트에서 LTS 버전으로 설치
yarn
터미널에서
npm install -g yarn
버전이 나오면 정상적으로 설치 완료된것
Next.js
nextjs 홈페이지에서 받을수도있고 터미널에서 받을 수도 있음.
npx create-next-app
프로젝트명은 알아서 입력하고
도중에 추가 설치 내용들은 상황에 맞추어서 yes/no 선택할것
여기서는 따로 골라서 설치하는걸 보일려고 전부 no 했음
정상적으로 설치되었으면 폴더내에 이렇게 설치된걸 볼 수 있음.
React
버전이 18버전도 있지만 실무에서는 안정적인 17버전을 주로 사용함
Next.js 설치중 만들어진 class 폴더로 이동하고yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact
Emotion
마찬가지로 emotion 홈페이지에서 설치가 가능하지만 터미널에서도 설치가 가능함
yarn add @emotion/react yarn add @emotion/styled
Apollo-Client , Graphgl
apollographql 홈페이지에서 다운받거나 터미널에서 설치
yarn add @apollo/client graphql
Ant-Design
Ant-Design 홈페이지에서 설치 혹은 터미널에서 설치
yarn add antd
Axios
터미널에서 설치
yarn add axios
한눈에 확인하기
package.json 파일을 열어보면 설치해둔 목록과 버전을 확인 할 수 있다.
터미널 명령어
- pwd : 프린트 워킹 디렉토리 : 현재 작업하고 있는 디렉토리를 알려줘
- mkdir : 메이크 디렉토리 : 폴더 만들어줘
- ls : 리스트 : 현재 디렉토리 내용물을 알려줘
ls -al : 내용물의 세부정보까지 알려줘
- cd : 체인지 디렉토리 : 디렉토리 이동시켜줘
- cd .. : 바로 상위 디렉토리로 이동 시켜줘
- cp : 카피 : 복사해줘 (파일)
- cp -r : 내부를 순환하며 전부 복사해줘
- rm : 리무브 : 삭제해줘 (파일)
- rm옵션 : -f: 강제로, -r: 디렉토리 내부까지,
-d: 비어있는 디렉토리만, -i: 삭제할때마다 확인해줘, -v: 삭제 대상 정보출력해줘
