거니의 velog

4. esm으로 ES 모듈 import/export 문법 사용하기 * 기존 리액트 프로젝트에서 사용해 오던 ES 모듈 import/export 문법은 Node.js에서 아직 정식으로 지원되지 않는다. Node.js에 해당 기능이 구현되어 있기는 하지만 아직 실험적인 단계이기 때문에 기본 옵션으로는 사용할 수 없으며, 확장자를 .mjs로 사용하고 node를 실행할 때 --experimental-modules 라는 옵션을 넣어 주어야 한다. * Node.js에서 import/export 문법을 꼭 사용해야 할 필요는 없지만, 이 문법을 사용하면 VS Code에서 자동 완성을 통해 모듈을 자동으로 쉽게 불러올 수 있고 코드도 더욱 깔끔해진다. 그래서 우리는 esm이라는 라이브러리의 도움을 받아 해당 문법을 사..

3. mongoose의 설치 및 적용 * mongoose는 Node.js 환경에서 사용하는 MongoDB 기반 ODM(Object Data Modeling) 라이브러리이다. 이 라이브러리는 데이터베이스 문서들을 자바스크립트 객체처럼 사용할 수 있게 해준다. * 이전에 만든 백엔드 프로젝트를 이어서 진행해 보겠다. 프로젝트 디렉터리에서 다음 명령어를 입력하여 mongoose와 dotenv를 설치하자. $ yarn add mongoose dotenv * dotenv는 환경변수들을 파일에 넣고 사용할 수 있게 하는 개발 도구이다. mongoose를 사용하여 MongoDB에 접속할 때, 서버에 주소나 계정 및 비밀번호가 필요할 경우도 있다. 이렇게 민감하거나 환경별로 달라질 수 있는 값은 코드 안에 직접 작성하..

2. MongoDB 서버 준비 (1) 설치 * MongoDB 서버를 사용하려면 우선 설치부터 해야 한다. [Windows] * Windows 환경에서는 MongoDB 공식 사이트의 다운로드 페이지에서 인스톨러를 내려받아 설치해야 한다. https://www.mongodb.com/try/download/community Try MongoDB Community Edition Try MongoDB Community Edition on premise non-relational database including the Community Server and Community Kubernetes Operator for your next big project! www.mongodb.com * 설치하는 도중에 Compl..

* 이 장에서는 우리가 만들 Node.js 서버와 MongoDB를 연동할 수 있도록 MongoDB 기초 지식을 알아보자. 그리고 mongoose를 이용하여 서버에서 직접 데이터를 추가, 조회, 삭제, 수정하는 방법도 알아보자. * 이번 실습은 다음 흐름으로 진행한다. 1. 소개하기 * 서버를 개발할 때 데이터베이스를 사용하면 웹 서비스에서 사용되는 데이터를 저장하고, 효율적으로 조회하거나 수정할 수 있다. 기존에는 MySQL, OracleDB, PostgreSQL 같은 RDBMS(관계형 데이터베이스)를 자주 사용했다. * 그런데 관계형 데이터베이스에는 몇 가지 한계가 있다. * 첫 번째는 데이터 스키마가 고정적이라는 것이다. 여기서 스키마란 데이터베이스에 어떤 형식의 데이터를 넣을지에 대한 정보를 가리킨..

(3) REST API * 웹 애플리케이션을 만들려면 데이터베이스에 정보를 입력하고 읽어 와야 한다. 그런데 웹 브라우저에서 데이터베이스에 직접 접속하여 데이터를 변경한다면 보안상 문제가 되지 않을까? 그래서 REST API를 만들어서 사용한다. * 클라이언트가 서버에 자신이 데이터를 조회, 생성, 삭제, 업데이트 하겠다고 요청하면, 서버는 필요한 로직에 따라 데이터베이스에 접근하여 작업을 처리한다. * REST API는 요청 종류에 따라 다른 HTTP 메서드를 사용한다. HTTP 메서드는 여러 종류가 있으며, 주로 사용하는 메서드는 다음과 같다. 메서드 설명 GET 데이터를 조회할 때 사용한다. POST 데이터를 등록할 때 사용한다. 인증 작업을 거칠 때 사용하기도 한다...

4. nodemon 사용하기 * 서버 코드를 변경할 때마다 서버를 재시작하는 것이 꽤 번거로울 것이다. 이 때, nodemon이라는 도구를 사용하면 코드를 변경할 때마다 서버를 자동으로 재시작해 준다. * 우선 이 도구를 개발용 의존 모듈로 설치하자. $ yarn add --dev nodemon * 그 다음에는 package.json에 scripts를 다음과 같이 입력하자. { "name": "blog-backend", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "eslint-config-prettier": "^9.1.0", "koa": "^2.15.0" }, "devDependencies": { "eslint"..

3. Koa 기본 사용법 (1) 서버 띄우기 * 먼저 서버를 여는 방법부터 알아보자. 기존 index.js 파일에 작성한 코드를 지우고, 다음 코드를 입력하자. const Koa = require('koa'); const app = new Koa(); app.use((ctx) => { ctx.body = 'hello world'; }); app.listen(4000, () => { console.log('Listening to port 4000'); }); * 서버를 포트 4000번으로 열고, 서버에 접속하면 'hello world' 라는 텍스트를 반환하도록 설정했다. 서버를 한 번 실행해 보자. $ node src * 원래 node를 통해 자바스크립트 파일을 실행할 때는 node src/index.js..

2. 작업 환경 준비 (1) Node 설치 확인 * Node.js 개발을 하기 위해서는 당연히 Node.js 런타임이 설치되어 있으야 한다. 우리는 이미 이전에 설치했다. Node.js가 잘 설치되어 있는지 터미널에서 다시 버전을 확인해 보자. $ node --version (2) 프로젝트 생성 * 이번에 만들 백엔드 프로젝트는 우리가 마지막으로 다룰 블로그 서비스와 연동할 서버이다. blog 디렉터리를 만들고, 그 내부에 blog-backend 디렉터리를 만들자. 해당 디렉터리에서 yarn init -y 명령어를 실행하여 패키지 정보를 생성한다. $ mkdir blog $ cd blog $ mkdir blog-backend $ cd blog-backend $ yarn init -y * 이 작업을 하고 ..

* 지금까지 리액트의 기본 개념을 대부분 다루어 보았다. 웹 애플리케이션을 만들 때는 리액트 같은 프론트엔드 기술 만으로 필요한 기능을 구현할 수 없는 경우가 흔하다. 데이터를 여러 사람과 공유하려면 저장할 공간이 필요하기 때문이다.1. 소개하기(1) 백엔드* 우리는 서버를 만들어 데이터를 여러 사람과 공유한다. 그런데 서버에 데이터를 무작정 담지는 않는다. 데이터를 담을 때는 여러 가지 규칙이 필요하다. * 예를 들어 특정 데이터를 등록할 때 사용자 인증 정보가 필요할 수도 있고, 등록할 데이터를 어떻게 검증할지, 데이터의 종류가 다양하다면 어떻게 구분할지 등을 고려해야 한다. * 데이터를 조회할 때도 마찬가지이다. 어떤 종류의 데이터를 몇 개씩 보여 줄지, 그리고 또 어떻게 보여 줄지 등에 관한 로직..

5. 서버 사이드 렌더링과 코드 스플리팅 * 이제 서버 사이드 렌더링을 구현한 프로젝트에 코드 스플리팅을 도입해 볼 차례이다. 일단 리액트에서 공식적으로 제공하는 코드 스플리팅 기능인 React.lazy와 Suspense는 서버 사이드 렌더링을 아직 지원하지 않는다. 2019년 4월 기준에서는 리액트 공식 메뉴얼에서도 서버 사이드 렌더링과 코드 스플리팅을 함께 사용할 때는 Loadable Components를 사용할 것을 권장하고 있다. * Loadable Components에서는 서버 사이드 렌더링을 할 때 필요한 서버 유틸 함수와 웹팩 플러그인, babel 플러그인을 제공해 준다. 일단 yarn을 사용하여 Loadable Components를 설치해 보자. $ yarn add @loadable/com..