전체 글 (432) 썸네일형 리스트형 Node.js.36.App 제작-글수정-파일명 변경, 내용저장 update_process를 받을 수 있는 코드를 작성하자. 이전 정보인 name='id'도 받아야 하므로 var id도 추가한다. }else if(pathname === '/update_process'){ var body = ''; request.on('data', function(data){ body = body + data; }); request.on('end', function(){ // title, description 뿐 아니라 name="id"값도 받아야 한다. var post = qs.parse(body); var id = post.id; var title = post.title; var description = post.description; console.log(post); }); } .. Node.js.35.App 제작-글수정-수정할 정보 전송 목표 update를 눌렀을 때 화면 구성하기 필요한 것 form 태그 read 기능 update 페이지 생성 코드 }else if(pathname == '/update'){ fs.readdir('./data', function(err, filelist){ fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ var title = queryData.id; var list = templateList(filelist); var template = templateHTML(title, list, //form 부분 ` `, ``); response.writeHead(200); //200: 파일을 성공적으로 전송하였음 response.end(.. Node.js.34.App 제작-글수정-수정링크생성 update 기능 - home에 있을 때 뜨지 않음 - 특정 글이 선택된 경우에만 뜸 -> 홈과 다른 pathname에 있을 때 다르게 떠야하므로, create templateHTML()함수에서 위 코드 부분 또한 인자 control을 받도록 변경해준다. function templateHTML(title, list, control, body) { var template = ` WEB ${list} ${control} ${body} `; return template; } 전체코드 var http = require('http'); var url = require('url'); var fs = require('fs'); var qs = require('qs'); function templateHTML(titl.. Node.js.33.App 제작-파일생성과 리다이렉션 목표 사용자로부터 받은 data를 data 디렉토리 안에 파일 저장하고, 사용자가 입력한 데이터가 잘 전송되었는지 확인하는 다른 페이지로 가게 하기 (redirection) Google에 nodejs file write를 검색해보자. https://nodejs.org/api/fs.html#fs_fs_writefile_file_data_options_callback File system | Node.js v14.9.0 Documentation nodejs.org fs.writeFile(file, data[, options], callback) callback 함수가 실행됨 (=파일의 저장이 끝났다). 따라서 response에 관한 코드들을 함수 속에 작성해야 한다. request.on('end', func.. Node.js.32.App 제작-POST 방식으로 전송된 데이터 받기 목표 Post방식으로 전송된 데이터를 Node.js안에서 가져오기 form의 action을 http://localhost:3000/create_process 로 수정하고, pathname이 /create_process일 때 전송된 데이터를 받기 위해 조건문 블록을 추가한다. }else if(pathname === "/create_process"){ response.writeHead(200); //200: 파일을 성공적으로 전송하였음 response.end("success"); } 아래 코드를 추가하여 파일을 성공적으로 전송했다는 것을 보내게 되면 이제 Status는 200으로 뜬다. Google에 Nodejs post data를 검색해보자. How to process POST data in Node.js.. Node.js.31.App 제작-글생성 UI 만들기 리스트 아래에 글쓰기 버튼을 만들어보자. create 버튼을 누르면 localhost:3000/create 페이지로 이동한다. 이제 createServer내에서 pathname이 필요하다. 확인하기 위해 pathname을 콘솔로 찍어보자. pm2 log 를 입력하여 콘솔이 찍힌 것을 본다. 리로드하면 다음과 같이 홈과 HTML, CSS, JavaScript를 눌렀을 때에는 pathname으로 /가 콘솔되고, create버튼을눌렀을 때에는 pathname으로 /create가 콘솔되는 것을 확인할 수 있다. 이제 if(pathname === '/') 블럭 아래에 else if(pathname === '/create') 블럭을 생성하여 작성한다. 눌렀을 때 body부분에서 h1과 리스트는 동일하게 띄우지만, .. Node.js.30.HTML-form 현재까지는 data 폴더에 파일을 생성하면 파일을 감지하여 목록을 만들어주고, 또 우리 대신 HTML 코드를 생성해주는 웹 애플리케이션을 만들었다. 하지만 data 폴더에 접근할 수 있는 것은 자기 자신 뿐이므로, 컨텐츠 생성하는 것은 사이트 소유자만 할 수 있다는 한계가 있다. 우리는 누구나 모두 웹에 접속하여 데이터를 전송하고, 전송한 데이터를 data 디렉토리 안에 생성하고 싶다. 앞으로 사용자가 컨텐츠를 웹을 통해 생성, 수정, 삭제하는 방법을 알아보자. HTML-form 사용자가 서버로 데이터를 전송하는 방식 한 줄 입력하기 여러 줄 입력하기 전송버튼 데이터를 전송하기 위해서는, 정보를 어디로 보낼 것인지 주소가 필요하다. 또한 입력한 각 값들에 이름이 있어야만 서버에서 받았을 때 의미가 있다... Node.js.29.Node.js의 패키지 매니저와 PM2 Package Manager Package: =소프트웨어. 소프트웨어들을 생성, 설치, 업데이트, 관리, 삭제해주는 프로그램 운영체제마다 중요한 역할을 함 NPM Nodejs에서 가장 광범위하게 사용하는 PM 파일(코드)이 수정될 때마다 자동으로 프로그램을 껐다켜줌 (이전에는 일일이 귀찮게 껐다켜줬었음) PM2 - Home Advanced process manager for production Node.js applications. Load balancer, logs facility, startup script, micro service management, at a glance. pm2.keymetrics.io Advanced, production process manager for Node.js : .. 이전 1 ··· 38 39 40 41 42 43 44 ··· 54 다음
