전체 글 126

모듈이 뭘까

모듈은 코드를 정리 정돈하는 가장 큰 도구다. 아래와 같은 코드를 갖고 있는 파일이 있다. var M = { v : 'v' f : function(){ console.log(this.v); } } module.exports = M; modue.exports는 해당하는 객체를 파일 바깥에서도 사용할 수 있게 만드는 코드라고 한다. 따라서 다른 파일에서 var part = require('//위 파일의 위치'); part.f(); 를 이용해 M이라고 명명한 객체를 불러오면 사용할 수 있게 된다.

홈페이지 완성

var http = require('http'); var fs = require('fs'); var url = require('url'); var qs = require('querystring'); //아래의 코드는 각 서브페이지의 title과 내용을 함수의 형태로 구현한 것. 따라서 동적으로 홈페이지가 구현됨 function templateHTML(title, list, body, control){ return ` WEB ${list} ${control} ${body} `; } //아래의 코드는 모든 페이지에 구현된 리스트를 동적으로 생성하기 위하여 사용됨. function templateList(filelist){ var list = ''; var i = 0; while(i < filelist.len..

동기와 비동기 그리고 콜백

1. 동기 vs 비동기 1) 동기는 순차적으로 일처리 var fs = require('fs') console.log('a'); var result = fs.readFileSync('./syntax/b.txt','utf8'); console.log(result); console.log('c'); 위의 코드 결과 값은 a,b,c 순으로 출력될 것이다. readFileSync에 의해 해당 코드들이 순차적으로 처리되기 때문임. 2) 비동기는 병렬적으로 일처리 var fs = require('fs') console.log('a') fs.readFile('./syntax/b.txt','utf8', function(err,data){ console.log(data); }); console.log('c') 위 코드의 ..

동적으로 웹사이트 다루기!

앞서 쿼리 스트링에 대해서 배웠다. 기존 html은 각 개별 페이지가 정적으로 존재하기 때문에 만약 전체 페이지의 포맷을 바꾸고 싶다면 각각 수정해주어야 하는 번거로움이 있었다. 이것을 해결하기 위한 방법에 대한 나의 이해는 이렇다. node.js는 필터 기능(?) 같은 것을 구현할 수 있다. 이 필터는 쿼리 스트링에 따른 특정 input이 주어지면 그 input에 대응하는 데이터를 포맷에 맞는 output을 제공해준다. 따라서 그 포맷을 수정하면 전체 웹사이트의 포맷이 달라지는 효과를 보일 수 있다. 이 필터를 이용하여 이제 서버 페이지에서 쿼리 스트링에 따라 title등의 내부 텍스트를 바꿀 수 있으며, 보여주고자 하는 본문도 따로 파일을 만들어 동적으로 화면에 띄울 수 있다. 위의 이미지에서 tit..

채팅/댓글/구글 애널리틱스/동영상 삽입

생활코딩에서 HTML&WEB의 마지막 수업으로 제목과 같은 기능을 배웠다. 각 기능을 제공하는 업체들의 코드를 받아 내가 만든 웹 사이트에 코드 몇 줄만 적어넣으면 각 기능이 제공되는 것을 확인하는 수업이었다. 와중 댓글 기능을 구현하는 데에 애를 좀 먹었다. 순수 시간으로 약 2시간 정도 걸릴 것 같은데 결국 내가 모든 걸 다 알맞게 했지만 사파리에서 기능이 제대로 동작되지 않는 것이었다. 크롬으로 돌렸는데 잘 되더라... 2시간 동안 낑야낑야 하면서 했는데 허무하긴 했지만 결국되니 역시 기분은 좋다.

Node.js 설치 및 문법

node.js를 설치해봤는데 아직 터미널과 터미널로 동작하는 것들에 대한 이해가 부족함. 추측하기로는 리눅스? 강의를 들으면 어느 정도 이해가 될 수 있을 것 같다. javascript의 간단한 문법들을 배웠다. number, string, variable을 사용하는 법과 template literal에 대해서 배움 template literal은 아직 정확하게 무엇인지 모르겠지만 string을 다룰 때 엄청 편해보였다.