[220125] 맥북에서 터미널, nodejs 개발환경 세팅하기 (M1칩) + 용어설명, npm, nvm, express

목차

1.   터미널 명령어

2.   npm 사용하기

3.   express 사용하기

4.   서버 실행하기

---

터미널 명령어 알기

아는만큼 보이는 명렁어.

 

 

기본적인 명령어

ls : 현재 있는 디렉토리 안의 파일 리스트를 출력해주는

-a : 숨긴 디렉토리까지 보여줌

-l : 자세히 보기

 

pwd : 어떤 디렉토리 경로에 있는지 절대 경로로 표시해준다. Print Working Directory의 약어

cd : 작업하는 디렉토리의 위치를 바꾸는 명령어. Change Directory의 약어

mkdir : 디렉토리를 만들어준다.

clear : 터미널 화면을 비워준다.

 

d... 디렉토리

- ... 파일

 

/ : 최상위 디렉토리

cd / : 최상위 디렉토리로 이동

cd /root : 루트 디렉토리로 이동

/home/계정명 : 홈디렉토리

 

 

 

맥이랑 리눅스랑 비슷한 폴더명

usr : 기본 실행파일, 라이브러리, 헤더파일 저장되는 공간

tmp : 임시 폴더

var : 프로그램이 실행된 데이터틀과 로그들을 저장하는 공간

sbin : 필수적인 system binary가 들어있음. root권한을 가진 사용자만 이용가능.

srv : 유닉스 컴퓨터 시스템의 디렉토리

dev : 장치파일이 저장되는 디렉토리

opt : 추가 패키지가 설치되는 디렉토리( 패키지 : 일종의 폴더목록)

home : 계정별 디렉토리를 저장하는 공간

root : 최고관리자 (루트계정) 홈 디렉토리

etc : 리눅스 설정에 필요한 정보 파일을 담는 디렉토리

 

cd ~

# / (루트 디렉토리)

# / home / [계정명이랑 같은 디렉토리]

 

 

이런것을 알아야하는 이유

리눅스에서 윈도우 디렉토리를 가고싶다 --> 윈도우 디렉토리 구조를 알아야 갈 수 있다.

간단하게 택시를 생각해보자. 우리집을 가고싶으면 주소를 대야한다. 우리집 가주세요-라고하면 기사님한테 혼난다.

 

 

---

 

 

패키지? 라이브러리?

• 같은 말이지만 사용하는 사람이 누구냐에 따라 다르게 부른다.
• (만든 사람이 부르는 말) 패키지 === 라이브러리 (사용하는 사람이 부르는 말)
• 특정 기능을 이루기 위한 코드를 한 폴더에 담아놓음. 압축했다(폴더에 담았다. 패키지화했다)
• 웹서버 : 특정 폴더에 웹서버를 구축할 수 있는 코드를 압축해놓음
• 이걸 다운받게 해주는 것 -> NPM

 

 

 

npm 사용하기 위해 준비하는 방법은 아래 링크 참고

https://hancoco.tistory.com/68

[220125] NODEJS, 무작정 맥에서 시작하기 (M1칩)

 

 

npm init

• npm init을 사용하면 output package.json이 생긴다.
• 이 코드를 사용한 곳에 생성되고, 그 곳에만 패키지 설치가 됨
• vi pakage.json으로 확인
• 나갈때는 :q!
• npm update : npm 버전 업데이트 하기

 

 

npm을 사용할 준비가 되었다 == 패키지를 설치할 준비가 되었다.

• 패키지 설치를 하자.
• > npm install <패키지명> 
• > npm install express -> express 기능을 꾹꾹 눌러담은 라이브러리를 npm으로 받아들임
• npm install을 실행한 위치에 node_modules 폴더가 생김
• 패키지 매니저 PM : 폴더를 다운받는것을 관리하는것
• NPM : node pakage manager, 꾹꾹 눌러놓은걸 다운로드 받는걸 도와줌. 
• 설치가 되어있는지 확인하는 방법 NPM -v

npm 버전 확인하기

 

 

---

 

 

express를 사용하기 전에 알아야할 사전지식

• express : NODEJS에서 실행할 수 있는 웹서버를 구축하기 위한 라이브러리
• 웹서버 : 브라우저에 필요한 정보(html, css, js)를 주기만 하는 것.
• http라고하는 통신 방법 사용 - 인터넷을 하기 위한 규격
• url 이 세상 어딘가 존재하는 컴퓨터의 주소
• 주소창에 url을 작성하면 브라우저가 서버에 요청 홈 만들거니까 줘! 줘!!(예:메인페이지 줘!)을 하는 행위임.
• 서버는 그 요청에 응답함. ( 한 번의 요청에 한 번의 답만 가능 )
• 이 요청을
  • 브라우저(url)로 요청 :동기, 페이지를 다시 다 그려야함
  • 코드로 요청 : 비동기, 필요한만큼만 그리거나 수정할 수 있음
  • curl http://google.com ---> curl : html영역만 간단히 출력해줌

 

 

어쨌든 우리는 웹서버를 만들것. : 요청 들어온 내용 (text)를 읽어서 요청한 사람에게 text를 보내는 행위를 하는 코드를 작성할것.

 

 

---

 

 

server.js에 express 활성화 시키기

// node_module에 있는 express 폴더 안에 있는 코드 가져와
// require : 모듈과 관련된 함수. 다른 파일에 있는 내용을 가져올때 사용
const express = require('express')
const app = express()

//console.log(app) 데이터 타입이 객체구나

//express 실행시키기
// listen은 인자값이 2개 존재
// 첫번째 인자값은 port라는 것을 적어줘야햠. 숫자 적어주기. 3000/8080
// 두번째 인자값은 CB(콜백함수) 작성하면 됨. listen이라는 함수가 잘 실행되면 실행되는 callback 함수
//app 객체 안에 존재하는 listen 메서드
app.listen(3000, ()=>{
    console.log('웹서버 두근두근')
})

 

계속해서 돌아가느라 hancoco@hankokooui-MacBookAir node % 가 나오지 않고 있다.

 

 

 

꺼지지않는 listen 함수

crtl C를 눌러 강제로 꺼줘야한다.

꺼지지않는 이유. 브라우저는 시도때도없이 요청신호를 보내기 때문. 항상 요청을 받을 준비를 하기위해 계속 켜져있는것.

 

 

 

응답주는 코드 만들기

//get() -> 요청이 들어오는데 
// 첫번째 인자값의 역할 URI
// 두번재 인자값 CB(callback함수)
    // 콜백함수에도 인자값이 2개 존재
    //요청(req) : 데이터를 건네주면 쌓이는 곳
    //응답(res) : 
    //너 호스트가 어떻게 되어있니? 아 /하나네? 너는 해시값이 하나도 없는 호스트값만 말하는거구나!
app.get('/', (req, res)=>{
    res.send('<h1>Hello express</h1>')
    //웹서버가 브라우저에게 보내는것

})

//node server
//브라우저 켜기 http://localhost:3000 enter

• localhost : 자기 자신
• url에는 port가 숨겨져 있음. 3000
• / = host
• 따라서,
  • http://localhost:3000 == /
  • http://localhost:3000/hello == /hello
  • /node = http://localhost:3000/node

 

 

listen 결과를 종료하지 않으면 인식하지 못한다.

app.get('/', (req, res)=>{
    res.send('<h1>Hello express</h1>')
})

//니가 요청한 메소드가 get 이고
//url값이 이거냐 ---> http://localhost:3000/node
//맞으면 두번째 인자값인 callback 함수가 실행된다
app.get('/node',(요청, 응답)=>{
    응답.send('<h2>Hello node</h2>')
})

새로 저장한 코드를 인식하지 못해 에러를 띄운다.&amp;amp;amp;amp;amp;amp;amp;nbsp;

 

 

 

그래서 실행중인 코드를 끄고, 다시 실행해야함.

터미널 결과

 

 

 

---

 

오늘 수업내용 정리본.

1. nodejs 버전업

2. npm 대해서

3. npm init 기능에 대해서 설명

4. npm install -> 패키지 라이브러리

5. express 웹서버 개념에 대해 약간

6. express 사용방법 설명 url (그림자료 추가예정)

7. express 코드를 작성하며 말로 흐름을 설명 (추가예정)

 

 

이를 통해서 할줄 알아야하는것

• nodejs 버전업
• npm 설치 확인
• 자연스럽게 할 줄 알아야하는 흐름
  • 특정 아무 디렉토리에 나가서 npm init 에서 npm install 잘 되는지 확인
  • express를 설치
  • node server.js를 실행했을때 서버가 잘 구동되는지 확인
  • server.js 페이지 안에 있는 코드 암기.

 

---

총 정리

 

1. npm init
2. npm install express
3. server.js 생성 -> code .
4. 코드작성
5. 코드실행

const express = require('express')
const app = express()

app.listen(3000, ()=>{
    console.log("server 시작")
})

app.get('/',(req,res)=>{
    res.send('<h1>Hello Node</h1>')
})

app.get('/node',(req,res)=>{
    res.send('<h2>Hello Node</h2>')
})