TIL 14 (2020.07.16)

jeanbaek·2020년 8월 6일
0

TIL (Today I Learned)

목록 보기
14/106
post-thumbnail

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

1. Node.js의 파일 읽기 기능

   1 정보 시스템의 핵심적인 기능을 CRUD라고 한다. (Create, Read, Update, Delete)
   2 이 수업에서는 node.js를 통해 파일을 읽는 방법과, 생성, 수정, 삭제를 하는 방법을 배울 예정이다.
   3 읽는 방법 검색: nodejs file read / 혹은 node.js 공식 홈페이지에서 확인
   4 검색 결과가 이해되지 않을 경우, 각종 수단과 방법을 가리지 않고 알아내어 내 것에 적용하면 된다. 
   5 실습을 위해 fileread.js, sample.txt 라는 파일에 내용을 입력했다. 
   6 runtime에서 cd nodejs를 입력하여 파일 위치를 변경해주었다. 
   7 그런데 node fileread.js라고 읽기 명령을 입력하니, 여러 숫자만이 나타났다. 
   8 에디터에 ‘utf8’을 입력하고 다시 한번 시도하니, 화면에 텍스트가 잘 나타났다. 

2. APP 제작 - 파일을 이용해 본문 구현

   1 data라는 디렉토리를 만들고, 각 1,2,3.html 파일에 있던 p 태그 안의 내용을 
     data 디렉토리 내에 링크 이름대로(HTML, CSS, JavaScript) 저장했다. 
   2 main.js 파일의 p 태그 내용을 ${description}으로 변경했다. 
   3 변수 template 윗부분에 fs.readFile(`data/${queryData.id}`, 
     ‘utf8’, function(err, description){ 를 입력했다.
   4 response.end(template); 코드코드 })를 입력해 내용을 닫아주었다. 
   5 짜잔- 웹 화면에서 html, css, javascript 링크를 누를 때마다, 
     각 이름에 맞는 내용이 아래 나타났다. 

3. JavaScript-Boolean

<복습내용>
   1 참과 거짓을 나타내는 연산자이다. 
   2 산술 연산자와는 다르다. 
   3 console.log(true); / console.log(false); 2개의 데이터 타입으로 표현할 수 있다. 
4. Javascript-비교연산자
   1 console.log(1==1); / console.log(1>2); 
   2 위 코드의 == / > 는 비교연산자로서 true 혹은 false를 나타내게 하는 코드이다. 
   3 *참고: ==는 “좌항과 우항이 같으냐”, ===는 “좌항과 우항이 정확하게 같으냐”
   4 * =는 대입연산자이다. 
5. JavaScript-제어문
   1 반복문을 통해 까다로운 문제도 해결할 수 있다. 
   2* 최소한의 도구를 가지고 나의 문제를 해결하는 게 가치 있는 일이다. 
      공부만을 지속하다 보면 머리가 복잡해져서 결국 아무것도 할 수 없게 될 수도 있다. 
6. JavaScript-조건문
   1 if 조건문에서 true 값은 출력되고, false 값은 출력되지 않는다. 
     false 값일 땐 else 부분이 출력된다. 
</복습내용>

7. NodeJS-콘솔에서의 입력값

   1 프로그램에 INPUT이 입력되면, 프로그램이 정보를 처리한 후 그 OUTPUT을 출력한다. 
     즉, 프로그램은 I/O로 이루어져 있다. 
   2 Parameter는 INPUT 정보의 형식으로 볼 수 있다. 
   3 Argument는 INPUT의 실제 입력 값으로 볼 수 있다. 
   4 이 수업에서는 조건문을 통해, 입력 값에 따라 다른 아웃풋을 출력하는 프로그램을 만들 예정이다.  
   5 첫째
        1) 검색: nodejs console input parameters
        2) 결과: var args = process.argv.slice(2);
        3) runtime에 파일 위치를 알려준 후, 
           node conditional.js jean 이라고 입력하니, 
           3번째 줄에 jean이 나타났다. 
           이를 통해 입력 값이 세 번째 정보부터 주도록 되어있다는 것을 알 수 있다. 
   6 둘째
        1) var args = process.argv;
            console.log(args[2]);
            다른 코드코드
            if(args[2] === ‘1’)
        2) 위와 같이 에디터에 입력하고, runtime에 node conditional.js 1을 입력하니 
           if 문이 참이 되어 C1 값이 나타났다. 
        3) runtime에 node conditional.js 2을 입력하니 if 문이 거짓이 되어 C2 값이 나타났다. 
   7 이런 작업을 통해 보다 확장성이 높은 프로그램을 만들 수 있게 되었다. 

8. APP - Not found 오류 구현

   1 console.log(url.parse(_url, true)); 를 통해
     runtime에서 여러 정보를 확인할 수 있다고 하는데, 
     내 경우에는 정보가 나타나지 않았다. 
     분명 어떤 입력 값이 수업과 달랐을 터인데, 
     어느 부분인지 모르겠으니 답답한 마음이 든다. 
   2 localhost:3000 을 주소창에 입력했을 때 나타나는 창의 pathname은 슬래쉬 / 이다. 
   3 이에 아래와 같이 변수 구문을 입력하여, 슬래쉬 / 뒤에 정확하지 않은 주소가 오면 
     “Not found”라는 문구가 나타나도록 만들었다. 
            var pathname = url.parse(_url, true).pathname;
            if(pathname === ‘/‘){
              fs.readFile 내용내용
            } else {
            response.writeHead(404);
            response.end('Not found'); }

9. App - 홈페이지 구현

   1 queryData.id 가 undefined 일 때, 
     if 문과 var 변수를 통해 title에 “Welcome”, 
     description에 “Hell, Node.js”가 나타나도록 입력했다. 
     그리고 var template 부분을 복사해 붙여 넣었다.
   2 else를 통해 원래의 var template와 이어질 수 있게 설정했다. 
   3 그리고 가독성이 좋도록 객체끼리 모아주었다. 

- 여기까지 공부한 후, -

강의와 함께 실습하는 데 중점을 두고, 기록은 내 기억을 되새김질하는 데 의의를 두고 간단히 작성해야겠다.
제일 중요한 것은 실제로 해보는 것이니, 다른 것에 에너지를 낭비하지 말자.
물론 기록도 정말 중요한 작업이지만, 요즘처럼 한정된 에너지를 효율적으로 사용하기 위해서는 더 중요한 실습에 중심을 두는 것이 맞는 것 같다.

10.Javascript-반복문

<복습복습>
   1 while 구문을 통해 실행을 반복하고, 
     var 구문을 통해 실행 횟수를 제한하는 반복문을 복습했다. 

11. Javascript-배열

    1 변수 구문을 통해 배열 내 아이템을 집어넣고, 
      그 아이템을 다양한 방법으로 추출하고 추가하는 방법을 복습했다.
</복습복습>

12. Javascript-배열과 반복문

   1 total 변수를 만들고 total과 배열 내 값을 모두 합하는 계산을 입력하여, 
     number 배열 안에 있는 숫자가 모두 더해진 값을 구할 수 있도록 했다. 

13. Node.js에서 파일목록 알아내기

   1 ol 태그의 글 목록이 수동이 아닌 자동으로 추가, 수정, 삭제될 수 있도록 설정해보자.
   2 검색: nodejs file list in directory
   3 나온 검색 결과를 에디터에 붙여 넣기 하고, 수업내용과 똑같이 수정했다. 
     맨 윗 행에 var testFolder = ‘./data’; 도 입력해주었다. 
   4 data 폴더에 있던 파일 이름이 runtime에서 배열 형식으로 나타났다. 
   5 즉, node.js는 특정 디렉토리에 있는 파일의 목록을 배열 형식으로 전달하는 약속을 갖고 있다. 
     우리는 반복문을 통해 그 배열을 정보로서 처리해서 아웃풋을 만들 수 있다. 

14. App 제작-글목록 출력하기

   1 목록 출력하기
        1) 변수 구문(var title ~ template) 부분을 파일목록을 가져오는 코드로 감싸주자.
        2) fs.readdir(./data’, function(error, filelist)) 와 console 을 입력하면, 
           data 디렉토리 내의 파일 이름이 배열 형식으로 나타난다. 
        3) ol 태그 부분에 ${list}를 입력한다. 
        4) var list = ‘<ul>’;
        5) while 구문을 통해 filelist 수만큼 반복되도록 입력한다.
        6) wihle 구문 행 아래에 list = list + ‘<li>${filelist[i]}</li>’; 입력
        7) list = list + ‘’;
        8) 짜잔- data 디렉토리 내의 파일 이름이 자동으로 리스트화 되어 화면에 출력됐다. 
   2 목록에 링크걸기
        1) <li><a href=“/?id=${filelist[i]}”>${filelist[i]}</a></li> 입력
        2) else 내에도 fs.readdir~~ 코드를 입력해준다. 
        3) 짜잔- 목록에 모두 올바르게 링크가 걸렸다. 
        4) 코드 가독성 좋게 정리하기.
        5) data 목록에 다른 파일을 추가하면, 웹 화면에 자동으로 그 파일 이름(Nodejs)이 목록으로 나타난다. 
           그 목록에는 링크도 걸려있다. 링크를 클릭하면, 파일 내용이 웹 화면에 나타난다. 
        6) 너무너무 신기하다 !!!
    
profile
💡 Software Engineer - F.E

0개의 댓글