Jonyo Programming

package.json 과 package-lock.json 이 두 파일의 차이점은 무엇일까? 우리가 npm을 통해 어떠한 패키지를 설치하면 package.json 파일이 생성되는 것을 볼 수 있다. 그곳에는 우리가 어떤 패키지를 설치했고 어떠한 버전인지를 알려주는 정보가 있다. 예를들어 prettier 를 설치했다면 package.json 파일에 "prettier": "^2.3.2", 이와 같이 버전 정보를 명시하고 있는 것을 확인할 수 있다. 그러나 package.json 에서 사용하는 버전 정보는 정확한 버전의 정보가 아닌 version range 를 사용한다. 그렇기에 우리가 npm을 통해 설치한 모듈이 저기에 나와있는 버전과 정확하지 않을 경우도 있다는 것이다. 우리가 프로젝트를 진행하며 동료와 ..

require require는 모듈을 가져오는 방식이다. 노드에서는 각 파일 하나를 모듈로 취급한다. 그리고 그 모듈을 가져오는 함수가 require 이다. 모듈을 사용하는 키워드를 보면 require 도 볼 수 있지만 import 와 from 을 사용하는 것도 볼 수 있다. require 는 Node에서 사용되고 있는 CommonJS 방식이고, import 는 ES6에 새로 도입된 방식이다. 두 개의 키워드 모두 다른 파일의 코드를 불러 오는 모듈의 역할을 한다. 하지만, 만약 태그를 사용하는 브라우저 환경이나, CommonJS를 기본 모듈시스템으로 채택하고 있는 Node같은 경우에는 Babel과 같은 transpile 도구를 사용하지 않는 한 require 를 사용해야 한다. 그럼 require 함수..

이 프로젝트에서 DB를 따로 사용하지 않고 json형태의 로컬파일을 만들어 사용할 것이다. const posts =[ { id : '1', title : 'first' }, { id : '2', title : 'second' }, { id : '3', title : 'third' } ] 따라서 위와 같은 posts를 만들었다. 만약 실제 서비스였다면, DB로 부터 posts의 정보를 받아와야 할 것이다. /posts 이제 이것을 이용하여 api를 구축해보자. 먼저 /posts 로 접근했을 때 post의 목록을 제공해주는 api를 만들어보자. 제공하는 데이터는 전체 post의 리스트와, 총 개수이다. const result = { posts: posts.map((post) => ({ id: post.id,..

이전 포스트에서 설명했듯이 url에 있는 id값을 통해 추가적인 작업을 수행해야 한다. 만약 Express와 같은 프레임워크를 사용했다면 body-parser와 같은 미들웨어를 통해 이 작업을 매우 편리하고 손쉽게 처리할 수 있을 것이다. 그러나 그런 프레임워크의 도움 없이 서버를 만들고자 하기에 조금 귀찮은 방법을 사용했다. 바로 정규식을 이용하는 것이다. 먼저 이전에 사용했던 정규식을 다음과 같이 저장했다. const POST_ID_REGEX = /^\/posts\/[a-zA-Z0-9-_]+$/ 다음 이 정규식을 실행할 것인데 우리가 필요로 하는 id부분을 따로 추출 하기 위하여 const POST_ID_REGEX = /^\/posts\/([a-zA-Z0-9-_]+)$/ 이렇게 괄호를 통해 감싸주자...

일단은 지금 상태에서 소스코드를 작성할 때 매우 불편한 점이 있다. 소스코드를 수정한 후에 수정한 내용을 확인하기 위해서는 집적 서버를 껐다 켜야 한다는 점이다. 이것을 조금 더 편리하게 해주는 도구가 있다. 바로 nodemon 이다. npm install --save-dev nodemon 을 통해 nodemon을 설치하자. 이후 서버를 시작하는 명령을 추가할 것이다. package.json에서 "scripts" 아래에 "server" : "nodemon main.js" 를 추가하자. 이제부터는 npm run server 라는 명령어를 통해서 서버 구동이 가능하다. 그리고 이제는 소스코드를 수정했을 때 일일히 서버를 껐다 킬 필요가 없이 nodemon이 수정을 감지하여 자동으로 서버를 재가동 해줄 것이다..

Node에는 Express, Koa, Meteor 와 같은 프레임워크들이 존재한다. 서버를 만드는데 필요한 필수적인 요소들이 존재한다. 만약 프레임워크가 없다면 이러한 것들을 집적 구현해야 할 것이다. 누구에게나 필요한 기능이라면, 그리고 그 기능들이 되게 비슷한 모양을 하고 있다면 이미 누군가가 잘 만들어 놓은 것을 쓰는 것이 더 좋은 선택일 수 있다. 프레임워크는 이러한 것들을 쉽게 접근할 수 있게 해준다. 정말 똑똑한 개발자들이 여러 검증을 거쳐 만들어놓은 틀 안에 내가 필요한 요소들만 채워 넣으면 되는 것이다. 그렇지만 프레임워크를 사용하는 것에만 익숙해져 있다면 실제로 어떠한 일을 통해 서버가 구동이 되고 어떠한 처리가 이루어 지는지를 알지 못할 것이다. VanilaJS를 잘 알아야 React,..

먼저 Node를 설치하자. Node는 공식 홈페이지를 통해서 설치할 수 있다. 나는 wsl2를 사용하기에 이곳 을 참고하여 설치했다. 노드 설치를 마쳤다면 node -v 를 통해 정상적으로 설치가 되었는지 확인할 수 있다. 다음 npm -v 명령을 통해 npm도 설치되었는지 확인해 보자. npm은 노드를 설치하기만 해도 자동적으로 설치가 된다. yarn과 같은 다른 패키지관리 프로그램도 있으나 npm만 사용해도 대부분의 패키지들을 이용 가능하므로 npm을 사용하겠다. 다음으로 터미널에 npm init -y을 입력해보자. package.json이 생성되었을 것이다. package.json은 우리의 프로젝트 역시 하나의 패키지로 보고 패키지이름, 버전 등 여러가지 정보를 기록한다. 그러나 우리가 주요하게 사..

예를 들어 DB에서 조건에 맞는 값들을 얻어야 하는 상황이라고 가정해 보자. 고전적인 방법이지만 익숙한 방법은 for문을 통해 DB를 전체 탐색하며 하나하나 조건을 살펴보는 방법이 있을 것이다. 또 다른 방법으로는 모던 자바스크립트를 이용하여 함수를 통해 접근하는 것이다. const DB = [ { name: 'tom', age: '20', city: 'seoul', }, { name: 'go', age: '30', city: 'busan', }, { name: 'you', age: '24', city: 'seoul', }, { name: 'cam', age: '40', city: 'seoul', }, ] 다음 과 같은 유저 정보가 있을때 30세 이하가 사는 도시의 리스트 를 구해보자. for문을 통한 ..

hoising, scope, var 자바스크립트는 C언어 처럼 자료형, 타입에 대한 구분이 명확하지 않다. var x = 1 , var x = 'hello' 이 두개의 코드가 모두 가능하다. var x = 1 console.log(x) 이 코드의 결과는 어떠할까? 너무 당연하게 1 일 것이다. 그렇다면, console.log(x) var x = 1 이 코드는 어떠할까? 당연히 에러가 나야할까? 그렇지 않다. 결과는 undefined 이다. 분명 console.log(x) 전에 x에 대한 선언이 없음에도 오류가 나지 않는다. 그 이유는 var의 hoisting 이라는 특성 때문이다. hoisting이란 var에 대한 선언을 해당 scope의 맨 위로 끌어 올리는 것을 의미한다. 즉 위 코드는 아래의 코드와..

학부시절동안 보통 C언어나 C++를 많이 다뤄왔고 알고리즘 공부 역시 C++로 해왔기에 나에겐 절차지향과 동기적 처리 방식이 너무 익숙했다. 이번에 Node를 공부하면서 자연스럽게 그동안 겉핥기로 배워왔던 자바스크립트도 다시 공부하게 되었고 그 중 자바스크립트의 동시성 모델에 대해 공부했던 내용을 정리하려고 한다. C언어 같은 경우 프로그램 순서에 따라 함수들이 스택에 차곡차곡 쌓이니까 프로그램의 흐름을 예측하는 데 큰 어려움이 없다. 그러나 자바스크립트는 setTimeout과 같은 비동기적인 방식을 지원하기에 일반적인 코드 순서와 실행 결과는 다르게 나타날 수 있다. 그렇다면 자바스크립트는 비동기 작업을 지원하기 위해 멀티스레드를 사용할까 ? 답은 X다. 자바스크립트의 큰 특징 중 하나는 '단일 스레드..