PM2 준비
- pm2 start main.js —watch (에디터 변경사항 바로 반영)
- 혹은 pm2 start main.js --watch --ignore-watch="data/*" (data 디렉토리 제외, 모든 변경사항 즉시 반영)
- pm2 log (에러, 변경사항 바로 표시)
<생활코딩 - WEB - WEB2 - Node.js>
1. App제작-템플릿 기능 정리정돈하기
1. 객체를 통해 코드를 정리하고자 한다.
1. var template 라는 객체를 생성한다.
2. HTML 라는 property를 만든다.
function templateHTML 부분을 붙여넣기한다.
“templateHTML”를 삭제한다.
마지막 닫힘중괄호 다음에 컴마를 입력한다.
3. list 라는 property를 만든다.
function templateList 부분을 붙여넣기한다.
“templateList”를 삭제한다.
4. 객체 template를 사용하려는 var app 부분에서 templateHTML 를
모두 template.HTML 로 바꿔준다.
templateList 부분도 template.list로 바꿔준다.
5. var app 부분에서 “ var template = “와
“response.end(template)”의 template를 html로 모두 바꿔준다.
2. refactoring의 중요성
1. 동작방법은 똑같이 유지하면서 내부의 코드를
더 효율적으로 바꾸는 리팩토링을 하는 것은 굉장히 중요하다.
2. 그러나, 처음부터 함수나 객체를 사용해서 코드를 짜는 것은 굉장히 어려운 일이다.
그렇게 하려고 하면 코드를 단 한 줄도 작성하지 못하거나,
내가 짠 코드에 애정이 생기지 않고 자신감이 없어질 수 있다.
3. 그러니 최소한의 문법으로 투박하지만 잘 동작하는 코드를 짠 후에,
자주 리팩토링을 해서 코드를 정리 정돈하는 습관을 들이자.
코드를 짤 때는 모르겠지만 나중에 그 코드들을 보면 반복되는 패턴을 쉽게 확인할 수 있다. 2. Node.js 모듈의 형식
1. 배열, 객체, 함수로 정리하는 것을 넘어 코드가 더 커지면, ‘module’ 방법을 통해 코드를 정리정돈할 수 있다.
2. 담는 방법
1. 우선, 새로운 파일에 객체 M을 생성한다.
이 객체에는 v:’v’, f:function(){console.log(this.v)} 을 담아놓았다.
2. module.exports = M; 은 “해당 파일에 있는 여러 기능 중,
객체 M이 가리키는 이 모듈 바깥에서 사용할 수 있도록 exports하겠다”는 약속이다.
3. 꺼내는 방법
1. var part = require(‘./mpart.js’);
2. part.f();
3. (./ 는 ‘현재 슬래쉬’라는 뜻이다, mpart.js는 모듈을 담은 파일 이름이다. )3. App 제작 - 모듈의 활용
1. module 생성
1. web2-nodejs 내에 lib이라는 디렉토리를 만들고,
template.js라는 파일을 만든다.
2. main.js에서 var template 부분을 복사해서 붙여넣기하고,
첫 줄의 var template 를 module.exports로 변경한다.
2. main.js 수정
1. var template가 있었던 자리에
var template = require(./lib/template.js’); 를 입력한다.
2. 이제 template.js에서 내용을 수정하면,
pm2는 바로 off&on을 작동시키며, 웹화면에도 바로 반영된다. 4. App 제작-입력정보에 대한 보안
1. 보안작업을 하지 않을 경우, 웹주소를 통해 디렉토리를 지정하고 검색하여 데이터베이스 안에 있는 정보(로그인 정보 등)가 웹화면에 출력되는 끔찍한 사고가 발생할 수 있다.
2. 검색: nodejs path parse
3. 결과: path.parse 라는 함수 확인
4. 작업
1. 정보가 들어오고 나가는 모든 곳은 정보가 오염될 가능성이 있다.
철저하게 의심할 것!
2. 따라서 이 모든 곳(readFile, delete_process 등)의 코드를 변경한다.
오염된 정보를 쳐내는 기능을 갖고 있는 filtered 코드를 통해서.
3. readFile의 윗 줄에
var filteredId = path.parse(queryData.id).base; 를 입력한다.
4. 아랫줄의 data/${queryData.id} 부분은
data/${filteredId} 로 변경한다.
5. delete_process 부분도 동일한 방법으로 변경한다.
6. 이제 http://localhost:3000/?id=../password.js 에 접속해도
로그인 정보가 나타나지 않는다. 5. App제작-출력정보에 대한 보안
1. Create 창에서 사용자가 description에 sciprt 코드를 입력하거나,
location.href 코드(특정 주소로 바로 이동하게끔 하는 코드)를 입력했을 경우,
그 목록을 클릭하면 사용자는 속수무책으로 불편한 상황을 맞땋뜨리게 된다.
2. 사용자로부터 입력된 정보를 출력할 때,
이런 보안 이슈가 발생하지 않도록 필터링하는 몇 가지 방법이 있다.
1. script 태그를 자동으로 삭제한다.
2. &li; > 코드를 통해 script의 꺽쇠를 그대로 화면에 출력되게끔 한다. 6. App제작-출력정보에 대한 보안 2
1. npm을 통해 정보를 소독하는 기능을 실행해보자.
2. 검색: npm sanitize html
3. 결과: npm 홈페이지에서 sanitize-html 모듈이 확인됨
4. 다운로드 수를 보니 일주일에 80만명씩 다운로드받고 있는 것으로 보인다.
평판이 나쁘지 않은 듯 하여 나도 설치를 진행하려 한다.
5. npm
1. 터미널에 npm init 입력
: 자신의 애플리케이션을 npm으로 관리하기 위한 절차가 시작된다.
2. 모두 기본값으로 하여 엔터를 쳤더니,
내 syntax 디렉토리에 package.json이라는 파일이 생성되었다.
3. 터미널에 npm install -S 입력
: -s는 특정 디렉토리 안에서만 사용하도록 작은 조각의 프로그램으로 다운로드되는 것이다.
-g가 컴퓨터 전역에서 사용할 수 있도록 독립된 프로그램인 것과 상이하다.
4. 오만가지 폴더와 파일이 node_modules라는 폴더에 생성되었다.
이 파일들은 모두 서로에게 의존하고 있다.
파일 코드의 dependencies ~~ 부분에서 의존하고 있는 외부 소프트웨어를 확인할 수 있다. 7. App제작-출력정보에 대한 보안 3
1. npm 사이트에서 사용방법을 확인한다.
2. var sanitizeHtml = require('sanitize-html'); 입력
3. readFile 내용 중 var sanitizedTitle, var santizedDescription 부분을 추가해준다.
그리고, var html 부분에서 기존에 ${} 부분에 있던 title과 description 부분을
sanitizedTitle, santizedDescription으로 바꿔준다.
4. 강의에서 본 대로 내 코드를 바꿔봤는데 웹페이지에서 alert가 그대로 작동했다.
강의 화면과 하나하나 대조해봤지만, 모두 같은 것으로 보여 속상했다.
결국 강의 말미에 업로드해놓는 코드를 끌어와 일일히 대조해보니,
영상에서는 create 페이지에 대한 코드를 변경했는데
나는 update 페이지에 대한 코드를 변경한 것을 알았다.
5. 내가 변경한 것과 동일하게 create 페이지 부분을 변경하니,
script alert 부분이 작동하지 않았다. 기분이 좋았다.8. API와 CreateServer
1. 단어 의미
1. Application Programming Interface.
우리가 만들고 있는 웹 애플리케이션은 Nodejs가 갖고 있는 기능을 호출하면서 동작한다.
2. fs.readFile를 예로 들면, 이 함수는 Nodejs를 만든 개발자들이 만든 것이다.
Node js를 만든 개발자들은, 이를 이용하는 개발자에게
파일을 읽을 때 readFile을 이용하라고 사용설명서를 통해 말하고 있다.
이 함수의 이름, parameter, reture 값은
이 함수를 만든 개발자와, 이 함수를 사용하는 개발자들 간의 약속된 조작장치이다.
3. 이런 조작장치를 Interface라고 부른다.
따라서, 우리는 Interface를 실행시킴으로써 애플리케이션을 만들 수 있게 되는 것이다.
4. 이처럼 애플리케이션을 프로그래밍하기 위해서 제공되는 인터페이스를
“애플리케이션 프로그래밍 인터페이스 = API”라고 한다.
2. 확인 방법
1. nodejs.org/ko/docs 공식 문서 페이지에서 내용을 확인할 수 있다.
3. 우리의 코드 main.js를 살펴보자.
1. http.createServer([requestListener])
: 첫번째 인자로 requestListener라는 parameter가 있다.
(인자는 생략될 수도 있다는 점이 대괄호를 통해 확인된다.)
2. 예를 들어, http.createServer(function(request, response ~~~ 코드를 통해
createServer의 첫번째 인자인 함수, 그 함수 중 첫번째 인자인 request가 실행되고
그런 정보를 response에 따라 넘겨주고 있다.
3. app.listen(3000)는 접속 포트로 3000번을 사용하고 있다는 뜻이다.
따라서, 내가 만든 웹서버는 리스닝을 시작할 때 3000번 포트에 귀기울이고 있다가
웹브라우저로부터 접속이 들어올 때 3000번 포트로 들어오면 이에 응답하고 동작한다. 9. 수업을 마치며
1. 추가적으로 공부해볼 만한 부분 - Database
1. File - 기존에 우리는 정보를 data라는 디렉토리에 file의 형태로 정리해놓았다.
파일은 쉽고 어디에나 있다. 그러나 불편하고 위험하고 느리다.
2. 파일을 이용해서 안전하고 빠르게 웹 애플리케이션을 만들기 위해서는 너무너무 어렵다.
이런 점을 극복하고자 database라는 대체재가 탄생되었다.
3. Database - 데이터베이스를 도입하면 data 디렉토리에 저장했던 정보를
데이터베이스라고 하는 전문화된 프로그램에 저장하게 된다.
그럼 나의 웹은 데이터베이스가 가진 엄청난 성능, 보안, 편리함을 통해 효율과 안전을 갖게 된다.
4. 대표적인 데이터베이스는 MongoDB, MySQl이 있다.
2. 추가적으로 공부해볼 만한 부분 - framework
1. 소프트웨어는 분야별로 공통적인 부분과 공통적이지 않은 부분이 공존한다.
2. 그 중 공통적인 요소를 미리 구현해 놓은 것이 framework이다.
이를 이용하면 프로그래머는 자신이 하고자 하는 특화된 부분에 집중할 수 있다.
그러나 이를 이용하기 위해서는 많은 공부가 필요하다.
3. Nodejs가 어떤 기본적인 모듈을 갖고 있는지,
Nodejs 생태계가 만들고 있는 npm과 같은 패키지 매니저를 설치해서
사용할 수 있는 모듈이 어떤 게 있는지를 풍부하게 파악하는 것도 중요한 점 중 하나이다.
4. Nodejs awesome이라는 문화가 퍼지고 있는 중이다.
awesome할 만한 여러 라이브러리를 모아놓은 일종의 북마크를 만드는 문화이다.
5. Node.js awesome이라고 검색해서 주목받는 모듈의 목록을 종종 살펴보자.
알고 있는 모듈이 많을 수록 해낼 수 있는 일이 많아진다. 10. 부록 - pm2 보충학습
1. pm2 kill : 켜져있는 모든 pm2 실행을 종료한다.
2. pm2 start main.js —watch —no-daemon : (대몬은 백그라운드로 실행되는 프로그램들이다.) pm2 실행과 함께 로그도 나타내준다.
3. clear : 기존 작업 화면이 모두 안보이게 위로 올라간다.
4. —watch 상태에서는 프로그램이 자동으로 꺼졌다 켜지기 때문에, 메모리에 있던 데이터가 사라진다. 원치 않은 시간에 메모리가 사라지게 되면 크게 난감할 수 있다.
5. pm2 start main.js —watch —ignore-watch=“data/*” — no-daemon : data 디렉토리의 모든 파일을 제외하고 —watch한다.
6. pm2 start main.js —watch —ignore-watch=“data/* sessions/*” — no-daemon : data, sessions 디렉토리의 모든 파일을 제외하고 —watch한다. - 여기까지 공부한 후, -
드디어 Node.js 강의를 끝냈다!
솔직한 마음으로 언제 끝날까 했는데, 하나하나 하다보니 강의가 끝이 났다.
강의에서 알려준 대로 따라 코드를 작성했기 때문에, 막상 나 혼자 nodejs를 통해 코드를 짜려고 하면 우선 막막해지는 것이 사실이다.
그래도 이런 기능이 왜 생겼고 어떤 상황에서 유리하게 사용할 수 있는지는 확실히 알게 됐다.
코딩에 대해 큰 선망과 기대감, 두려움을 동시에 갖고 있었다.
막상 공부를 시작하니 세상의 여느 분야와 마찬가지로 재밌는 일정 부분이 있고, 반 이상은 어렵다는 것을 알게 되었다.
긍정적으로 볼 수 있는 점은, 그 어려운 부분을 해결할 때 내게 즐거움이 온다는 것이다. 또한, 코딩을 배운 첫 일주일간은 코딩에 내 인생의 구원으로 느껴질 만큼, 그냥 검은 에디터 바탕에 알록달록한 코드를 입력하는 것만으로도 준(準)천국에 있는 느낌이었다.
나는 순수하게 코딩이 즐거워서 시작하지는 않았다.
그저 코딩을 하는 사람들의 집중하는 모습이 멋있어 보였고, 꼭 다른 세계에서 고귀한 삶을 사는 것처럼 보여서 선망하는 마음을 갖고 있었을 뿐이다.
그렇게 생각하며 살던 와중 나는 어떻게 일하면서 어떤 인생을 살게 될까에 대한 고민을 하는 시기가 있었다.
나는 사람들과 함께 일하는 것을 힘들어하기 때문에 프리랜서로서 돈을 벌어 먹고 살 수 있어야 했다. 또한, 외국에서 이방인의 위치에서 살고 싶었다. 또, 고졸 학력이지만 내 능력을 인정받아 큰 돈을 벌고 싶었다.
이 조건이 가능한 분야가 바로 코딩이었다.
부트캠프를 시작하고 사람들과 함께 프로젝트를 진행하면, 내가 코딩으로 할 수 있는 일이 무엇인지 더 다양하게 생각할 수 있을 것 같다.
그러니 지금은 조금 명확하지 않게 보이는 내 코딩의 미래에 대해 걱정하지 않고, 우선 하나하나 이 분야에 대해 알아보고자 한다.
<인프런 - 김왼손의 미운코딩새끼>
1. Python
1. 위코드에서 제공한 필수 사전 학습 자료를 보니, 백엔드의 파이썬 관련 수업이 보였다.
2. 그 중 첫번째 자료인 inflearn, 김왼손의 미운코딩새끼를 시작하려 한다.
첫 소개 영상을 보니 관련 학과를 석사까지 졸업했음에도
코딩에 좋지 않은 감정을 갖고 있던 분이,
우연히 파이썬을 만나 코딩이 좋아지면서
보다 쉽게 다가갈 수 있는 파이썬 코딩 강의를 만든 것으로 보인다.
3. 총 4시간 강의로 일주일 정도면 쉽게 진행할 수 있는 강의로,
첫 입문용으로 적당할 것으로 보인다. 2. Programming 소개
1. 나라마다 사용하는 언어가 다르듯이 컴퓨터는 컴퓨터 언어를 이해한다.
그 중 파이썬은 다른 컴퓨터 언어에 비해 쉽기 때문에 입문하기가 좋다고 한다.
2. 프로그램은 고대 그리스부터 사용되어왔던 말로 차례차례 진행된다는 의미이다.
이를 컴퓨터 분야에서 차용해서 사용하는 것이다.
3. 순차-선택-반복. 모든 프로그램은 이 순차, 선택, 반복이 쌓여 만들어진다.
1. 순차 구조: 위에서부터 순차적으로 한줄씩 명령을 수행하는 것
2. 선택 구조: 분기점에서 예, 아니요 등으로 선택하는 것
3. 반복 구조: 같은 명령을 반복하는 것위코드와 back-end 관련 글을 읽던 중, 현재 위코드에서 수업을 진행중인 아는 분의 블로그를 알게 되었다. 이직 생각을 하던 와중 친구의 권유로 위코드 부트캠프를 시작하게 되었다는 내용인데, 블로그의 이름과 글의 내용이 너무 일치했기에 보자마자 미소가 만연해졌다.
확실히 이 분은 데이터와 관련된 직업을 갖고 있던 직장인이었기 때문에, ppt를 만들어 내용을 설명하거나 경어체로 가독성 좋은 글을 쓰는 것을 아주 잘 하시는 것 같다.
블로그를 구경하며 동시에 큰 자극을 받았다.
나는 다른 사람과 경쟁하는 것을 정말 싫어하지만, 다른 사람들을 보며 일에 대한 자극을 많이 받는다.
참 모순적이다.
브런치는 작가 승인이 되어야 다른 사람들에게 글이 노출되기 때문에
내가 지금 매일 작성하고 있는 코딩 로그는 나만 볼 수 있다.
다른 사람들이 내 블로그를 찾아와주고 내 글을 볼 수 있다는 가능성이 있을 때
내가 더 열심히 내 프로젝트를 진행할 수 있을 것 같다.
블로그 운영과 관련한 더 많은 정보를 얻을 수 있을 때까지 기다리지 말고
그냥 Tistory, Medium, velog, wordpress 중 선택해서 업로드를 시작해야겠다.
- 내일 할 일
- 미운코딩새끼 강의 9개, 파이썬 설치
- linux, git, django에 대해 알아보기
- 사람들에게 바로 노출가능한 블로그 만들어서, 그동안의 코딩 log 정리해 업로드 하기.
💡 Software Engineer - F.E