[TIL] 1. node.js, npm, yarn 그외 library

 

weekly goals

 

1. 최신 실무 css 방식 - Emotion / Styled-components
2. React에서 사용하는 변수 - State
3. Backend 컴퓨터와 통신방법 - HTTP / Rest-API / Graphql-API
4. 통신을 위한 프로그램 - Axios / Apollo-Client
5. 통신구분 2가지(동기/비동기) - async-await
6. 페이지 이동 방법 - Static-Routing/Dynamic Routing

 

동기: 해당하는 응답을 받아야만 다음으로 넘어갈 수 있는 실행방식

비동기 :  요청을 보낸 후에 응답과 관계없이 다음 동작을 실행할 수 있는 방식

 

프런트엔드?

UI 50 통신 50

UI만 따로 그리는 직업 - 퍼블리셔

백엔드랑 어떻게 주고 받을지 통신 개념

 

Today Goals

 

1. 프로젝트를 위한 Node.js 이해 - Node.js / npm / yarn
2. Next.js 프로젝트 설치 - Next.js(+React.js)
3. React 전용 HTML - JSX
4. 최신 CSS 방식 - Emotion / Styled-components

(emotion을 할줄 알면 Styled-components도 할줄 안다고 함.)

 

 

 

 

---

 

OS(맥, 윈도우 같은 내 컴퓨터)에 프로그램 설치하기 
node.js, npm, yarn

 

OS : node.js, npm, yarn ← 이 세가지가 내 컴퓨터에 다운 받아야 할 항목들임.

그래서 라이브러리는 각각가의 폴더에 설치를 하는 것이고

그걸 설치할 수 있게 해주는 도구들은 내컴퓨터 운영체제에 설치하는 것이다.

 

 

 

Node.js (-> npm 자동 설치됨)

 

Long Term Service 가 훨씬 안정적이므로 LTS로 다운!!!

 

js로도 자바나 파이선처럼 소프트웨어를

만들 수 있으면 좋겠다 싶어서 나온게 노드.

브라우저가 아닌 내컴퓨터에서

실행할 수 있게 해주는 실행 도구.

 

Node.js를 설치하면 npm은 자동으로 설치됩니다.

 

LTS(Long Term Service)가 안정적이므로

LTS로 다운 받습니다.

 

 

 

Node.js / npm / yarn 설치 및 버전 확인 ✨

 

 // 1. node.js 설치 확인 
 node --version


 // 2. npm 설치 확인
 npm --version


 // 3. 설치된 npm으로 yarn 설치하기
 npm install -g yarn


 // 4. yarn 설치 확인
 yarn --version

 

 

 

---

 

 

설치를 쉽게 하기 위해 터미널 명령어를 알아야 합니다.

CLI(Command Line Interface) 에 대하여는 아래 게시글을 참고해 주세요!

(GUI로 가능한 것은 전부 CLI로 가능합니다.)

https://fe-dev94.tistory.com/5?category=947091 

[CLI] 기본 명령어

 

 

 

NPM - 로드 패키지 매니저 (feat. Maven 같은것)

 

특정 기능을 만들어 놓고

다른 사람들이 쓸 수 있게 공유해주는 것 Maven

맨땅에서 만드는게 아니라 만들어진걸로 PyPI같은 것.

그래서 똑같이 js에서 만든것이 npm이다.

 

 

라이브러리(기능) - npm 설치하면 npmjs.com 에서 기능 다운 가능 (feat. git과 github의 관계)

 

이미지 보여주는 기능 - 캐러셀

npmjs.com 에 기능을 올리면

사람들이 무료로 다운받는다

 

vscode에서 npm이라는 도구로 다운 받는다.

업로드도 가능하다.

(git 설치해야 깃허브에 소스코드 푸쉬하고 풀 받을 수 있는 거처럼

npm 설치해야 npmjs.com 에서 라이브러리(기능) 설치 및 업로드가 가능해진다.

한마디로 npm은 git 같은 것임.)

 

 

yarn

 

이 때 npm 속도가 느려서

페이스북이 만든 것이 yarn이다.

yarn을 사용해서 이미 만들어진 기능들을 다운 받아 사용할 것입니다.

(npm으로 yarn 설치합니다.)

 

 

폴더에 수업 프로젝트 설치하기

Next.js ( -> React.js 자동으로 설치됨)

 

• 리액트에서 좀더 업그레이드된 버전이다.
• Next.js를 깔면 자동으로 React.js가 깔린다.

• html이 JSX로 바뀐다
• css로 Emotion 으로 바뀐다.

 

---

 

1. OS에 프로그램 설치하기

1. VSCODE 설치

2. VSCODE-EXTENSION 설치

2. Node.js 설치 (안정적인 LTS로 받을 것)
   => Node.js를 설치하면 npm은 자동으로 설치됩니다.

3. Yarn 설치
	 => sudo npm install -g yarn

2. 폴더에 수업 프로젝트 설치하기

1. 바탕화면에 "aaa" 폴더 만들기

2. "aaa" 폴더에 "class" 라는 이름의 Next.js 프로젝트 설치하기
   => Next.js를 설치하면 React.js는 자동으로 함께 설치됩니다.

3. "class" 폴더에 Emotion 설치하기

4. "class" 폴더에 Apollo-Client, Graphql 설치하기

5. "class" 폴더에 Ant-Design 설치하기

6. "class" 폴더에 Material-UI 설치하기

7. "class" 폴더에 Axios 설치하기

 

 

 

---

Reference

 

https://studyingych.tistory.com/63

비동기처리, Promise, async/await 이해