TIL 16 (2020.07.18)

백은진·2020년 8월 6일
0

TIL (Today I Learned)

목록 보기
16/106
post-thumbnail

PM2 작업 준비

  1. pm2 start main.js —watch (에디터 변경사항 바로 반영)
  2. pm2 log (에러, 변경사항 바로 표시)

<생활코딩 - WEB - WEB2 - Node.js>

1. App 제작-글생성 UI 만들기

    1. creat 링크 생성
        1. function templateHTML 함수에서 list와 body 함수 사이에 
           “/create”라는 a 링크를 입력한다. 
        2. 웹화면에서 create 라는 링크를 클릭하니, 
           localhost:3000/create 주소로 이동하고 Not found가 확인되었다. 
        3. pathname을 확인해보니, 
           홈 화면은 “/”이고 create 화면은 “/create”임이 확인되었다. 
           
    2. else if 통해 form box 생성
        1. 맨 마지막 else 앞 부분에 else if 를 입력한다. 
        2. 소괄호에 pathname === “/create”를 입력한다. 
        3. 중괄호에 홈화면에 입력했던 fs.readdir 내용을 붙여 넣기한다. 
        4. var title을 create로 변경하고, var description을 삭제한다. 
        5. var template에서 세번째 인자부분이었던 
           title, descriptopn 부분을 삭제한다. 
        6. 그 부분에 form.html 내용을 붙여 넣기한다. 
        7. 이제 localhost:3000/create 를 접속하면, form box 2개가 확인된다. 
        
    3. form box에 설명주기
        1. else if - var template에서 p 태그 부분에 각각 
           placeholder=“title”, =“description”을 입력한다. 
        2. formbox 내에 회색으로 title, description이 확인되고, 
           그곳에 글을 입력하면 사라진다.
           
    4. form box 입력 정보 확인하기
        1. 검사-Network를 열어놓는다.
        2. /create 웹화면에서 내용을 입력하고 submit을 클릭한다. 
        3. 웹화면에 Not found가 확인되고,
           URL은 localhost:3000/process_create라고 확인된다. 
        4. Network-process_create-Headers-Form Data를 확인한다. 
        5. form box에 입력한 내용이 post 방식으로 전송된 것을 볼 수 있다. 

2. App 제작-POST 방식으로 전송된 데이터 받기

    1. 가독성을 위해 웹주소를 localhost:3000/create_process 로 바꿔주었다. 
    
    2. 맨 마지막 else 앞 부분에 또다시 else if 를 입력하고 
       pathname이 /create_process와 같다고 정의한다. 
    
    3. post data를 전송받는 방법을 알기 위해, 
       “nodejs post data”라고 검색한다. 
    
    4. 확인 내용에 따라 입력한다. 
        1. *request는 요청할 때 웹브라우저가 보낸 정보들을, 
            response는 응답할 때 우리가 웹브라우저한테 전송할 정보들을 담는다. 
        
    5. path name이 /create_process인 else if 안에 
       request.on ‘data’와 request.on ‘end’를 입력한다. 
        1. request.on ‘data’는 
           웹 브라우저가 포스트 방식으로 데이터를 전송할 때 데이터의 양이 너무 많을 때를 대비하여, 
           서버쪽에서 데이터를 조각조각 수신할 때마다 콜백 함수를 호출하도록 약속되어있다. 
        2. 이에 body = body + data; 라는 값을 통해, 
           콜백이 실행될 때마다 데이터를 추가하도록 설정한다. 
        3. 이제 더이상 추가될 데이터가 없을 때, end 함수가 실행된다. 
        4. 정리: request와 같은 이벤트를 통해서 
           웹브라우저로부터 포스트 방식으로 전송된 데이터를 가져올 수 있고, 
           또 쿼리 스트링이라는 모듈의 파스 함수를 이용해서 정보를 객체화할 수 있다. 
        5. 더하여, var title = post.title; var description = post.description; 
           이라는 변수를 통해 form box에 입력된 정보를 가져올 수 있다. 
profile
💡 Software Engineer - F.E

0개의 댓글