<생활코딩 - WEB - WEB2 - Node.js>
1. 설치
1 Node.js란 무엇인가?
1) 우리는 html 문법에 따라 명령을 호출하면서 웹 브라우저 위에서 작동되는 웹 애플리케이션을 만든다.
2) 이와 동일하게 우리는 node.js runtime이라는 프로그램에서 javascript 문법에 따라 명령을 호출하면서 node.js 애플리케이션을 만들 것이다.
2 설치
1) 나는 node.org 사이트에서 안정적인 LTS 버전을 다운로드했다.
2) usr/local/bin/node에 node.js 설치 완료 + usr/local/bin/npm에 패키지 매니저 프로그램 설치 완료
3 node.js runtime 실행
1) console.log(1+1)과 같은 문제를 계산해준다.
2) 나가기 위해서는 control+C 혹은 .exit를 입력해준다.
3) 입력한 문제를 저장하기 위해 node.js라는 폴더 안에 atom 에디터로 파일을 생성했다.
4) 파일 위치를 지정해주기 위해 cd ~/Desktop/JeanBaek/nodejs 라고 입력해줬다.
5) pwd를 입력해보니, 내 터미널 프로그램이 nodejs라는 폴더에 잘 위치하고 있는 것이 확인되었다.
6) 그 폴더에 위치한 파일들을 보고 싶을 경우, ls -al 이라고 입력해주면 된다.
7) 이때, node helloworld.js 라고 입력해주면, 그 파일 안에 있는 문제가 계산되어 터미널 프로그램 상에 나타난다. 2. 공부방법
1 이 수업의 각 제목에는 JavaScript, Node.js, App과 같은 접두사가 함께 있다. 이미 알고 있는 내용은 생략하여 시간을 절약할 수 있도록 수업을 제작했다고 한다.
2 나는 JavaScript를 배우긴 했지만, 아직 익숙하게 알고 있는 것은 아니므로 모든 수업의 앞부분은 확인해보고 생략 여부를 선택할 예정이다. 3. Node.js로 웹서버 만들기
1 Node.js는 웹서버 기능을 내장하고 있다.
나아가 node.js runtime은 아파치 웹서버가 할 수 없는 기능까지도 할 수 있다.
2 작업 환경 만들기 1
1) github에 저장되어있는 파일들을 nodejs 폴더에 저장하고,
미리 업로드되어있는 소스코드를 main.js 파일에 저장한다.
2) runtime에 node main.js를 입력한 후,
웹 브라우저에 localhost:3000 주소를 입력한다.
3) github에 있는 파일이 html 수업 때 만들어 저장한 파일명과 동일하길래 내 것을 복사해 붙여 넣기 했다.
그러자 실행이 제대로 되지 않아 무엇이 문제인지 머리를 아프게 했다. ㅠ,ㅠ
결국 github 파일을 다운로드 받아 사용하니 정상적으로 localhost:3000 주소로 파일이 열렸다.
4) runtime에서 컨트롤+c를 누르면 파일이 꺼진다.
5) 이런 과정을 통해 node.js가 웹서버로서 기능하고 있음을 알 수 있다.
3 작업 환경 만들기 1
1) main.js 파일에서 중간 부분에 console.log(__dirname + url); 를 입력했다.
2) 그 후 localhost를 통해 웹페이지를 열자, runtime에 파일 경로가 기록됐다.
3) response.end(~~~); 라는 코드에서 소괄호 내에 입력하는 코드에 따라, 사용자에게 전송되는 정보가 달라진다.
4) 즉, 프로그래밍 적으로 사용자에게 전송하는 데이터를 생성한다는 점이 node.js의 강점이다. 4. JavaScript 문법 - Number Data type
1 사칙연산을 복습했다.
2 number.js라는 파일을 만들고, console.log(문제문제);를 입력한다.
3 runtime에 node syntax/number.js와 같이 파일 경로를 입력하니, 문제의 답이 나타났다. 5. JavaScript 문법 - String
1 문자열은 따옴표를 통해 입력한다.
2 그렇기 때문에, console.log(‘1’+’1’);를 입력하면, 화면에 11이라는 문자가 나타난다. 따옴표 안의 숫자를 ‘문자’로 인식하기 때문이다.
3 console.log(‘문자문자’.length); 를 입력하면, runtime에 문자의 수가 나타난다. 6. JavaScript 문법 - 변수의 형식 1
1 a = 1; console.log(a); 를 입력하면, runtime에 1이 나타난다.
2 a = 2; console.log(a); 를 입력하면, runtime에 2가 나타난다.
3 변수 앞에는 꼭 ‘var’를 붙여주는 것이 좋으며, 변수의 숫자를 변경할 때는 var를 붙이지 않아도 괜찮다.
4 1 = 2; 와 같이 상수를 잘못 입력할 경우, runtime은 오류가 확인된다는 긴 메세지를 보인다.
5 *참고: 코드 앞에 // 를 입력하면 주석이라는 표시로, 계산에 포함되지 않는다. 7. JavaScript 문법 - 변수의 형식 2
1 변수를 왜 쓰는가
1) 데이터에 이름을 붙인다.
var letter = “문자문자”
console.log(letter);
1 위 내용을 에디터에 입력할 경우, 문자문자 부분은 그대로 runtime에 나타나고 코드는 가독성을 갖게 된다.
2) 수정이 편리하다.
var name = “jean”;
var letter = “dear ”+name+” 어쩌구저쩌구 ~~”+name;
1 위와 같이 입력하면, name 부분이 출력될 때 자동으로 jean으로 변경되어 나타난다.
2 이는 코드의 가독성을 높여주기도 한다. 8. JavaScript 문법 - Template Literal
1 Template Literal or Template String
2 줄바꿈을 위해서는 \n\라는 기호가 필요하다.
3 혹은 글 전체의 앞뒤 부분에 `` (grave accent)를 입력해준다. 그러면 에디터 행에서 줄바꿈 되는 것이 그대로 출력된다. 9.URL의 이해
1 http://opentutorials.org:3000/main?id=HTML&page=12 라는 웹주소가 있다.
2 http는 protocol(통신규칙)이다.
3 opentutorials.org 은 host(domain)로서 도메인 네임이다.
4 3000은 port 번호로서, 3000번 포트에 연결되어있는 서버와 통신하게끔 하는 역할이다.
5 main은 path로서, 그 컴퓨터 안에 있는 어떤 디렉토리에 어떤 파일인지를 가리킨다.
6 ?는 query string이 시작됨을 알린다.
7 id=HTML&page=12는 query string으로서,
내가 읽고 싶은 정보는 html이고 12페이지다 라는 요청을 나타낸다.
값과 값은 &를 쓰기로 약속되어있다. 값의 이름과 값은 =을 쓰기로 약속되어있다. 10. URL을 통해서 입력된 값 사용하기
1 http://localhost/?id=HTML
1) id=HTML 부분은 Query string이다.
2 알게 된 것 1
1) var url = request.url; 이라는 코드를 통해,
사용자가 직접 입력하는 url의 id주소에 따라 다른 페이지를 나타내 줄 수 있다.
3 알게 된 것 2
1) url을 분석해서 데이터를 추출하는 방법을 알아보자.
2) 검색: nodejs url parse query string
3) 결과: var url = require(‘url’);
var queryData = url.parse(request.url, true).query;
다른 코드코드
queryData.name
4) 위와 같이 에디터에 입력하면, runtime에서 name이 추출된다.
4 뜻
1) var url = require(‘url’); 은 url을 요구한다는 뜻이다.
2) http, fs, url은 모듈이다. 노드 js 가 갖고 있는 수많은 기능을 그룹핑한 것을 모듈이라고 한다.
3) 즉, 이 코드는 “우리가 url 모듈을 사용할 거야”라고 노드 js에게 알려준 것과 동시에,
앞으로 url이라는 모듈은 url이라는 변수를 통해 사용할 거야”라고 알리는 코드이다.
4) 단, 지정 단어가 중복되지 않도록 같은 단어는 다른 단어로 변경해준다. (ex. url, _url)
5 알게 된 것 3
1) queryData 값이 뭔지 console.log를 통해 알아보니, 객체라는 것을 알게 됐다.
2) 나아가 console.log(queryData.id);를 통해 querystring 값을 알 수 있다는 사실을 발견했다.
6 알게 된 것 4
1) 아랫부분에 response.end(queryData.id); 라고 입력하니, 웹페이지에 querystring id대로 html이나 css 등이 나타났다.
7 정리
1) 이를 통해 querystring에 따라 다른 정보를 추출하는 웹 애플리케이션을 만들었다. 11. App 제작-동적인 웹페이지 만들기
1 첫째,
1) var timeplate 변수 안에 1.html 코드를 복사, 붙여 넣기 했다.
2) 내용 중 title과 h1의 이름 (HTML) 부분을 ${queryData.id}로 바꿨다. response.end(template); 로도 바꿨다.
3) 그러자 주소 입력창의 query string을 바꾸자, title과 h2가 있던 부분이 query string에 입력한 단어대로 나타났다.
4) 코드 가독성을 높이기 위해 var title = queryData.id 라는 변수를 생성해주고, title과 h2 부분의 ${queryData.id} 를 ${title}로 변경했다.
2 둘째,
1) 링크를 클릭하면, title과 h2 부분이 링크 단어대로 바뀌게 하기 위해서
2) list의 a 태그 부분을 <a href="/?id=HTML">HTML</a> 와 같이 query string에 입력하는 대로 바꿔주었다.
3 셋째,
1) 가장 큰 링크였던 h1 a 태그는 <a href="/?id=HTML"> 로 바꿔주었다. 연결되어있던 if 절도 수정하여 아래와 같이 바꿔주었다.
if(_url == '/'){
title = 'Welcome'; }
2) 이로써 WEB 링크는 기본(root) 주소인 localhost:3000와 연결되었고, title과 h2 부분에 Welcome이 나타나게 되었다.
4 넷째,
1) template 내의 ol 태그를 ul 태그로 변경하면, 걸려있는 모든 링크의 기호가 동그라미로 변경된다. 단 한 번의 수정으로, 폭발적인 효과를 내게 된 것이다.
5 정리
1) 다음 시간에는 본문 내용도 각 파일에서 끌어올 수 있는 코드를 짜 볼 예정이다. - 여기까지 공부한 후, -
요 며칠간 코딩에 대해 조금 흥미를 잃었다. 이 코드가 나의 실제 생활에서 어떤 도움을 줄지, 어떻게 재미를 만들 수 있을지 잘 상상이 되지 않은 것이 큰 이유였고, 큰 책임감을 가지고 빡세게 공부하다 보니 공부하는 것 자체에 두려움과 지루함을 느낀 것도 크게 영향을 끼쳤다.
그래도 오늘 새로운 기술인 node.js 를 배우니 조금 흥미가 생겼다. 내가 궁극적으로 만들고 싶은 기술이 node.js를 통해 실현될 수 있기를 조금이나마 기대하면서 공부하고 있다.
함께 공부하면서 작은 프로젝트를 같이 하는 사람들이 있다면 즐거움이 크게 생길 것이라 생각한다.
어디에서 그런 사람들을 만날 수 있을까?
💡 Software Engineer - F.E