C-log

이번 시간에는 CRUD에서 R에 해당되는 파일을 읽는 코드를 작성해 볼 것이다. 생각보다 그렇게 어려움은 없을 것이다. fs에 있는 모듈의 readFile함수를 이용하는 것이다. data 폴더를 미리 생성하고 그곳에 파일을 읽을 정보들을 얺어 주면 된다. 우선 작성한 코드를 보면 아래와 같다. fs.readFile(`data/${queryData.id}`, 'utf8', function (err, description) { let template = ` WEB HTML CSS JavaScript ${title} ${description} `; response.end(template); }) 첫 번째 인자가 읽어드릴 파일의 위치와 이름을 의미하고 두 번째 인자는 utf8은 한글로 되어 있는 파일을 읽을 수..

이번 시간에는 query string을 이용해서 템플릿 리터럴로 웹페이지의 구성을 작성할 것이다. 이번 시간의 수업은 어려움이 없어서 코드만 올려둘 것이다. 템플릿으로 HTML을 작성할 수 있는 것을 생각하면서 코드를 살펴보자. //해당 기능이 동작하는 원리를 파악해야한다 var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.createServer(function (request, response) { var _url = request.url; var queryData = url.parse(_url, true).query; var title = queryData.id; console.log(q..

이제 우리는 url의 특정 값들을 자유롭게 가져올 수 있어야한다. 우선 이번 수업 때 기본적으로 사용한 코드는 아래와 같다. var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.createServer(function (request, response) { var _url = request.url; var queryData = url.parse(_url, true).query; console.log(queryData.id) if (_url == '/') { _url = '/index.html'; } if (_url == '/favicon.ico') { return response.writeHe..

앞서 우리는 nodejs가 가지고 있는 모듈을 이용해서 http를 파싱하는 server를 생성했다. 이제는 우리가 url에 직접 관여해서 템플릿을 활용해서 무엇을 어떻게 제작되는지 하나 하나 살펴볼 것이다. * URL의 개념 위의 그림을 보면 첫 번째 pathname은 비어있는 '/'와 같은 pathname이다. 두 번째는 description이라는 pathname을 가지고 뒤에 query string이 들어온다. 그렇다면 우리는 pathname을 새로 생성해야하는 코드도 필요하다는 것을 짐작할 수 있다. 다음 시간에는 queryData.id를 통해서 query string을 활용할 것이다. 그때 pathname을 어떻게 분리하고 그 pathname을 기준으로 queryData.id를 차근차근 분류해보자.

* section01부터 setcion04까지의 수업은 OT와 Nodejs설치 방법을 강의 했기 때문에 따로 포스팅 하지 않아 section05부터 포스팅을 시작한다. 이후에도 기본 문법들을 설명하는 경우 과감하게 스킵하고 필요한 내용들만을 담아서 포스팅 할 것이다. 이번 수업의 nodejs index.js 코드는 아래와 같다. - index.js let http = require('http');//HTTP 서버를 생성하고 통신을 처리하는 모듈 let fs = require('fs');//파일 시스템에 접근하여 파일을 읽고 쓰는 모듈 let app = http.createServer(function (request, response) { let url = request.url; if (request.ur..

이번 시간에는 props를 사용해서 태들을 동적으로 사용할 수 있게 할 것이다. 먼저 우리가 만든 App 컴포넌트를 보자. function App() { return ( ); } 각자 필요한 태그들을 컴포넌트를 사용해서 우리들만의 태그를 생성했다. 여기에 우리는 props를 사용해서 웹브라우저에 나타나는 태그들을 동적으로 줄 것이다. 컴포넌트에 props를 적용하려면 우선 아래와 같아야 한다. function App() { return ( ); } 이렇게 작성한 App컴포넌트를 Header부분의 컴포넌트에 propos를 부여 했을 때의 코드를 살펴보자. function Header(props) { console.log(props) return section04 WEB } 결과는 우리가 App컴포넌트에 기..

이번 수업에서는 리액트의 컴포넌트를 직접 생성하고 만들어본다. 여기서 주의해야 할 점은 내가 만든 컴포넌트를 카멜 표기법으로 작성하면 오류가 뜬다. 올바른 작성 법은 아래와 같다. (참고로 컴포넌트를 불러오는 변수명 또한 파일명과 동일하는게 하는 것이 좋다.) class ClassStyle extends React.Component { // ... } 이렇게 항상 컴포넌트 변수명의 앞글자는 대문자여야만 한다. 이것을 주의하면서 컴포넌트를 작성하고 불러오면 된다. 내가 작성한 코드는 아래와 같다. - myStyle.js //내가 만든 컴포넌트 function Header() { return section04 WEB } function Article() { return Welcome Hello, WEB } ..

예전에 java 디자인 패턴 수업을 들은 적 있다. 매우 감명 깊은 수업 이었다. 수업을 통해서 코드를 좀 더 보기 편하고 활용도가 높은 코드를 작성할 수 있다는 것에 놀랐다. 이를 js에도 적용하면 좋겠다는 생각을 꾸준히 해왔다. 그래서 import와 export를 가지고 one script one function을 고수하며 나름 나만의 패턴을 구현해보려고 했다. 하지만 프로그램의 세상은 각자 나름의 표준들이 있고 규칙들이 있다. 이를 생각하며 js를 가지고 디자인 패턴을 구현해보면 어떨까 싶다. 자바스크립트 디자인 패턴 www.youtube.com