Codesigner

저번 포스팅에서 CRUD 기능을 모두 지원하는 할 일 서버를 만들어 보았다. 할 일 외에도 여러 가지 기능이 추가되거나, 다른 여러 프로젝트를 진행하다 보면 server.js 파일의 크기가 점점 커지게 된다. 그러다 보면 코드의 가독성이 점점 떨어지게 되고, 여러 라우트들이 한 파일에 존재하다 보니 디버깅도 어려워지게 된다 다행히도 Express는 이러한 문제를 해결할 수 있게 Router(라우터)라는 기능을 제공해준다. 라우터는 Express 서버의 미니 버전으로, 웹 서버와 같이 라우트 매칭과 요청-응답 처리 기능을 모두 지원한다. 그저 분할되어서 존재할 뿐이며, 서버를 시작하고 특정 포트에서 리스닝하는 것 또한 필요로 하지 않는다. 라우터는 또한 .get(), .put(), .post(), .del..

이전 포스팅에서는 간단하게 간단하게 GET 요청을 다루는 웹 서버를 만들어 보았다. 이번 포스팅에서는 CRUD(Create, Read, Update, Delete) 기능을 모두 지원하는 웹 서버를 만들어 보자. GET 요청은 리소스를 읽어 들이므로 Read 기능을 한다. 나머지 기능을 구현하는 방법과 관련 HTTP 메서드에 대해서 지금부터 알아보도록 하자 리소스 업데이트(PUT) PUT 요청은 기존의 존재하는 리소스를 업데이트하기 위해 사용되는 HTTP 메서드이다. 우리가 저번 포스팅에서 제작한 Express 서버에서 PUT 요청은 할 일 목록의 내용을 수정하는 데 사용될 수 있다. 그런데 할 일의 목록을 수정하기 위해선 어떤 할 일을 수정할 것인지 명시해야 할 필요가 있을 것이다. 즉, 라우트 파라미터..

Express는 웹 서버와 API를 만드는데 강력하고 유연한 기능을 제공하는 Nodejs 웹 애플리케이션 프레임워크다. 정적 파일 서버뿐만 아니라 JSON API 등 실제 프로덕션 레벨 수준의 서버를 만들 수 있다. 이 시리즈에서 Express로 CRUD(Create, Read, Update, and Delete) API를 제공하는 웹 서버를 만들어 보면서 필요한 스킬을 익혀보도록 하자 웹 서버 만들기 Express는 노드 외장 모듈이다. 그래서 Express를 사용하려면 해당 노드 프로젝트에 이를 설치해주어야 한다. 웹 서버 프로젝트 폴더를 만들고, 해당 디렉터리로 이동하여 노드 프로젝트를 초기화시키자 // 필자는 C:\Users\glafu\Desktop\node_test\express_test 위치에..

이번 포스팅에서는 VScode를 활용해서 노드 프로젝트를 직접 생성하여 기초적인 노드 사용법에 대해 알아보도록 하자. VScode는 MS에서 제작한 가볍고 심플한 코드 에디터이다. VScode가 미리 설치되었다고 가정하고 진행하도록 하겠다. 먼저 코드를 작성하기 위한 폴더를 생성하고, 터미널에서 해당 디렉터리로 이동한 후 code 명령을 입력하면 해당 디렉터리를 루트로 하는 VScode 편집 창이 열린다. 필자는 node_test라는 폴더를 생성한 후 코드 편집기를 실행시켰다. 자, 그럼 본격적으로 첫 번째 노드 프로젝트를 만들어 보도록 하자 첫 번째 노드 프로젝트 sample.js 라는 파일을 생성하고, 다음과 같이 입력한 후 저장하자 그런 다음, 터미널에서 node 명령의 파라미터로 sample.js..

노드제이에스(Node.js)는 '노드'라고 흔히 불리며, 비동기 입출력(Non-Blocking I/O)과 단일 스레드 이벤트 루프를 통해 빠른 성능을 자랑하는 게 특징인 자바스크립트 런타임이다. 노드는 파일 업로드 시 파일을 다 읽어 들일 때까지 대기해야 하는 등의 동기적 방식의 문제점을 해결하기 위해 Ryan Dahl이란 사람에 의해 처음으로 고안되었고, 하나의 요청 처리가 끝날 때까지 기다리지 않고 다른 요청을 동시에 처리하는 비동기 입출력으로 확장성 있는 웹 서버와 같은 네트워크 프로그램을 보다 쉽게 개발할 수 있게 만들어준다 노드는 V8엔진 위에서 동작하며 작성 언어로 자바스크립트를 사용한다. 자바스크립트 코드를 확장자가 '.js'인 별도의 파일로 분리하여 사용하는데, 이를 모듈(Module)이라..

저번 포스팅에서는 HTML 요소를 포지셔닝하는 다섯 가지 속성 중 첫 번째인 position에 대해서 알아보았다. 이번 포스팅에서는 나머지 속성들에 대해서 알아보도록 하자 Z-Index 웹 페이지 상의 박스들이 포지셔닝 될 때 서로 오버랩될 수 있다. 이는 해당 박스의 콘텐츠를 읽기 어렵게 만드는 요인으로 작용한다 .box-top { background-color: Aquamarine; } .box-bottom { background-color: DeepSkyBlue; position: absolute; top: 20px; left: 50px; } 위 코드에서 아래쪽 박스는 위쪽 박스를 무시(ignore)하여 이를 오버랩한다. z-index 속성은 웹 페이지 상의 요소들이 얼마나 '뒤로' 가고 '앞으로'..