fetch를 이용하여 데이터를 JSON타입으로 서버로 보낼거다

JSON(JavaScript Object Notation)과 JavaScript Object는 유사한 구조를 가지고 있기에

둘을 같은것으로 착각하는 경우가 있다.

아래와 같이 입력하여 어떤 결과값이 나오는지 확인해 보자.

가장 큰 차이는 JS Object는 JS Engine 메모리 안에 있는 데이터 구조이고, JSON은 객체의 내용을 기술하기 위한 text 파일이기에 JSON의 type 형태는 기본적으로 string이다.

(자세한 설명은  yongseong 님의 글을 참고하자.)

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-JSON%EA%B3%BC-JavaScript-Object%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

다음과 같이 코드를 작성한다

/login경로를 통하여, POST 라는 method로 데이터를 보낼수 있는 API가 마련이 되있다 가정하고 진행(다음시간에서 API만듬)

body를 통해서 데이터를 보낼때는 http method 중에서 POST 로 전달해 주어야 한다.

(이것은 rest API에 관련한 것들이고, 아래 주소에서 공부한 다음 진행하는것을 권장f

https://www.youtube.com/watch?v=7_z95B-yF-c) 

내가 요청하는 데이터가 JSON데이터임을 알려줘야하는데, 그것은 headers에

"Content-Type" : "application/json" 로​ 명시하여 전달할 수 있고,

이러한 데이터를 서버에서 받으려면 /login 경로, POST method로 API가 마련되어 있어야 한다.

다음 시간에는 fetch기능이 동작할 API를 만들것이다.

깃헙에 저장으로 마무리.

commit은 "로그인을 요청하는 fetch 생성" 으로 깃헙에 저장하였다.

참고로 깃허브에서 시계 모양을 클릭하면 commit 내역을 확인할 수 있다.

좋은 강의를 무료로 제공해 주신 우리밋님께 너무 감사하다:)

html에서 존재하는 값을 단순히 Javascript에서 제어할 수 없다. 근데 이것을 가능하게 만드는 것이 DOM(Documnet Object Model)이란 객체이다. DOM은 일종의 인터페이스이고,

자세한 정보는 우리밋님의 관련영상을 참고하자 

https://youtu.be/9UyIOrG3P1s?list=PLSK4WsJ8JS4cQ-niGNum4bkK_THHOizTs

login.js 에 기존에 있던 console.log("hello")는 지우고

하고 콘솔창에서 확인해보면 아래사진과 같이 null이라고 뜸

이유는 ejs떄문

해결책으로는 ejs파일에서 defer를 추가하는 것

로그인버튼을 클릭하면 콘솔창에 "bye"를 띄우도록 만들어 보자

bye대신에 id.value로 입력하면 콘솔창에id값을 띄운다.

요청정보니 req로 선언하고 오브젝트를 만들어 준다.

서버를 끄고, 깃헙에 저장으로 마무리.

git add .

git commit -m "DOM을 이용하여 HTML 객체 저장"

git push origin master

끝.

다음시간에는 fetch를 이용하여 데이터를 서버에 전달해주는것을 다룬다.

nodemon이라는 모듈을 사용해볼거

npm install nodemon -g 로 설치 (-g는 "글로벌"의미, -g로 깔아야 됨) (-g 로 깔면 권한 문제 발생할수도 있음, 키워드:sudo)

이제 nodemon 명령어 사용가능

nodemon ./bin/www.js 로 서버 실행

nodemon으로 서버 실행하면 좋은점은 수정하느라 서버를 껏다 켰다 안해도됨.

저장만 하면 자동으로 서버에 적용됨

nodemon ./bin/www.js 으로 명령어 사용하기 불편하니까 scripts에서 node를 nodemon으로 바꿔주면

npm start 했을때 nodemon으로 서버가 실행된다. 개꿀b

깃헙에 업로드하는것으로 마무리

git add .

git commit -m "nodemon 적용"

git push origin master

html과 ejs파일을 연결해서 동작하는 js파일 만들기가 목표.

*src 폴더에 js폴더, js 폴더안에 home폴더 , home 폴더안에 login.js파일을 만들어준다.

login.ejs파일에서

또다른 처리를 해줘야 하는데, 그렇게 동작을 하도록 도와주는 미들웨어를 등록해줄꺼임

​해석하자면 ${__dirname}은 현재 app.js가 있는 위치를 변환하고

app.js파일이 있는 위치에 있는 src안에있는 public 폴더를 정적(static)경로로 추가해 주겠다는 의미.

이제 src 안에 public 폴더 만들고 js폴더를 public폴더 안에 넣어주기

연동되었나 확인하기 위해서 login.js 안에 console.log("hello") 입력후 서버 가동하고 로그인 페이지에 들어가면 

콘솔창에 hello 뜸.

깃허브에 저장후으로 마무리.

git add .
git status
git commit -m "프런트 단 JS파일 만들기"

git push origin master

끝.

src폴더를 app으로 이름변경-app폴더 안에 src 폴더 하나 만들기-routes와views 를 src안에 넣기

참고로 src는 source 의 약자다.

이상태로 npm start 하면 오류가 뜬다 

원인1.라우팅경로가 이동되서 다시 재설정해줘야함

원인2.app 안에 package.json 파일을 읽어야 하기 떄문에

cd를 이용하여 경로가 C:\Users\Administrator\Desktop\node\login-lecture\app> 이 되도록 한다.

npm start로 서버키고 웹에 들어가면 

Failed to lookup view "home/index" in views directory "./views"

라고 오류가 뜬다. 

원인1. view 경로 다시 설정 해줘야함 

./views 를 ./src/views 로 재설정 해준다.

npm start 하면 잘 작동된다.

깃허브에 저장하고 마무리하겠다.

git add . 하고 git status로 상태를 봤는데 warning: LF will be replaced by CRLF 오류가 떠서 

https://dabo-dev.tistory.com/13 블로그를 참고하여 해결하였다.

git commit -m "폴더 구조 최적화"

git push origin master

보통 이런 폴더 구조로 작업을 많이 한다.

연습할떄는 처음부터 이러한 폴더구조를 만들고 시작해야겠다.

github에서 new repository - name을 login-lecture로 만들고
터미널(git bash 터미널로 바꿈)에서 git init 치고 ls -a 하면 없었던  숨김폴더 .git이 생김

.git은 뭘까? :.git 폴더의 저장소에 대한 설정들이 저장된다.

*나노 이용해서 README.md 와 .gitignore 파일 만들기

터미널에 nano 입력하여 README.md 파일 만들기

터미널에 nano 입력하여 .gitignore 파일 만들기

.gitignore는 뭘까? 깃허브에 올리면 안되는 파일 또는 폴더들을 명시해 두는곳

/로 폴더임을 명시한다.
.으로 표시된 폴더나 파일들은 숨김폴더,숨김파일 이므로 ls -a 로 인식해야한다. 

*.gitignore가 잘 적용됐는지 확인하려면 git status 를 입력해보면 된다.

알고리즘은 

git add 라는 명령어를 쓰면 파일들이 staging area라는 곳에 올라감- commit 이란 명령어 써서 .git폴더안에 변경내역을 저장 함-저장된 내역을 git push 를 써서 깃허브에 업로드하게 됨. (이해가 안되면 일단 넘어가자)

터미널에서 git add .   입력하여 빨간색으로 명시된 파일들을 한번에 올린다. (git add 파일명으로 하나씩 올려도 됨)

*git commit -m "깃 저장소 초기화" 입력

*이제 git push 이용하여 깃허브로 push 해줄건데, git push 하기 전에 remote를 설정해줘야함 (remote는 저장 위치를 가르킴)

터미널에 

git remote add origin https://github.com/자신의깃헙주소

*git push orign matser 입력하여 깃허브에 업로드 한다. (branch라는 것이 있는데 일단은 master로 따라하자)

깃허브에서 가보면 업로드가 잘 되어있다.

*정리

업로드할떄 주의사항:node_modules는 업로드x / package-lock.json 와 package.json

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이제 업로드 되있는 파일을 반대로 가져와 볼 것.

본인의 터미널에서 login-lecture 폴더가 있는곳으로 가서

git clone 받아올깃허브주소 지정할이름  을 입력해주면 된다.

받은 파일을 VS code로 열면 node_modules를 안 올렸기에 없다.

cd login-lecture2로 경로를 정하고 npm install 또는 npm i 입력하니 dependencies를 잘 읽어

node modules폴더가 생겼다.

우리가 scripts 에 쓰었던 명령어 npm start 도 잘 작동한다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이제는 폴더보면 많이 지저분한데 정리를 해 줄것이다.

src폴더를 만들고 .gitignore , README.md 뺴고 다 넣어준다.

*불러오기(git pull origin master)

라이센스파일까지 만들어 깃허브에 등록하였다.

업로드된 깃허브파일들은 pull을 이용하여 불러온다.

* src폴더 만들어 정리한 버전을 깃허브에 다시 저장할거다

git add .  후에 git status 보면 node_modules 폴더안에 있는 파일까지 다 staging area로 이동하였다.

이럴때는 git reset HEAD 파일명 적어주면 된다.

원인은 .gitignore 폴더에 가보면 /node_modules 라 명시되어 있는데,

정리한다고 src폴더에 옮겼기 떄문에 node_modules 폴더가 .gitignore폴더와 같은 경로에 있지 않아서 생긴것이다.

**node_modules 로 정정하면 안에 있는 모든 파일을 다 찾아서 node_modules가 업로드 안되게 해준다.

 

git add .  후 git status 해보면 잘 옮겨져 있는게 보인다.

git commit -m "scr 폴더로 분류"

git push origin master 하면 깃허브에 업로드가 잘 된다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

추가로 깃허브에서 제공하는 .gitignore 템플릿들이 존재한다.

깃허브에서 .gitignore - 수정 - 오른쪽에 있다.

마찬가지로 그냥 쓰면안되고

node_modules/ 앞에 **를 붙여 적용시켜준다.

아직 VS code에 불러내기 안했기에 불러내기만 해주면끝난다.

git pull origin master

이로써 끝났다.

다음에는 깃허브와 같이 이 프로젝트를 병행할것이다.

이번 강의는 package.json을 이용해보면서 이게 어떤건지,

package-lock.json, node_modules , npm start들은 무엇인지에 대해서 알아보는 시간이였다.

(npm은 node package manager의 약자구나,여기서 package는 node.js의 library를 의미함)

*package.json 파일을 만들려면 터미널에서 npm init 입력하고 엔터를 몇번 누르면(정보입력은 나중에 함) 생성이 된다.

*package.json 파일 설명

scprit에  "start": "node ./bin/www.js", 추가

(현재 터미널 경로에 따라 입력 코드 달라진다)

앞으로 터미널에 npm start 만 쳐도 node ./bin/www.js대신에 실행되어 서버가 실행될 것이다!

*node_modules 폴더: 설치한 모듈들(dependencies)을 저장하는 곳, ejs와 express을 위해 설치되어야할 모듈들까지 같이 설치됨

주의사항: 깃허브같은 저장소에 소프웨어를 저장할 떄, node_modules폴더는 같이 올릴 필요없음

그 이유는 package.json 떄문에.

node_modules가 없어도 터미널에 npm install 입력하면 dependencies 에 명시되어 있는것들이 알아서 설치해줌

*그렇다면 package-lock.json는 뭘까?

이전다음

01

package.json에는 버전의 범위가 명시되어있고

package-lock.json에는 좀더 상세한 버전 명시가 되어있다.

버전 표현에는 ~/^/x 등이 있다. 

예시)

"ejs": "^3.1.6" - ejs의 버전은 3.1.6이상 3.2.6  3.3.6 까지 허용하겠다. 하지만 4.1.6 5.1.6등은 허용 X

"ejs": "~3.1.6" 은 맨뒤에있는 숫자의 버전이 새로 나오면  허용하겠다.

이정도만 알아도 node로 작업할 때 문제는 없다.

다음시간에는 깃,깃허브에 업로드 하는법을 배운다

app.listen()부분을 모듈화 해줄거

*

폴더와 파일을 만들고, www.js에 app.listen()부분을 넣어준다. (port를 변수처리해줬으니 선언한 코드도 같이 보내준다.)

*

app을 찾을수 없으니 app을 불러올거 const app = require("../app")  [..은 상위폴더 의미] 

*

module.exports = app; 입력  [ app.js에서도 내보내야 불러올수 있다. ]

*이제 서버 실행해서 확인해 보면 되는데

코드를 www.js 에 옮겼기 때문에
터미널에 node app.js가 아닌 node ./bin/www.js 를 입력해 서버를 실행시켜야 한다.(잘 작동함 bb)

이렇게 모듈화가 끝났다...!

모듈화를 통해 app.js 파일의 코드는 가독성이 좋게 짜여졌다. 휴...

근데 ''node ./bin/www.js''  이 명령어 치기가 너무 귀찮기 떄문에, 다음 시간에는 package.json이라는걸 이용해서

''node ./bin/www.js''를 대신하는 새로운 명령어를 만들어 볼거다!