분류 전체보기
-
eslintProject using node.js/Cloning Youtube 2020. 8. 20. 10:45
소개 eslint는 JS 코드를 clean하게 만들어준다. 기본적인 syntax error는 VSC가 알려줄 것이다. 하지만 문법적인 오류는 아니지만 개발자도 인간이고 자기만의 잘못된 습관이 있다. 더더욱 초보 개발자는 더 심하다. 이러한 습관 때문에 코드가 더러워질 수가 있다. 이러한 문제점을 찾고 고칠 수 있도록 알려주는 툴이 eslint다. 설치 및 설정 #npm install eslint eslint-config-prettier eslint-plugin-prettier prettier -D VSC의 Extension에서도 eslint를 설치해준다. VSC의 settings.json에서 밑에 코드를 추가해준다. .eslintrc.js파일을 만들고 다음과 같이 코드를 추가해준다. module.expo..
-
nodemonProject using node.js/Cloning Youtube 2020. 8. 20. 10:20
소개 개발을 하다 보면 코드를 수정하고 수정된 결과를 확인하기 위해서 서버를 껐다가 다시 켜야 하는 귀찮음이 생긴다. 이러한 귀찮음을 해결하기 위해 존재하는 npm 패키지인 nodemon을 소개하겠다. nodemon은 코드를 저장하면 자동으로 변화를 감지하여 서버가 재실행이 된다. 하지만 nodemon은 개발자의 편의를 위해서 존재하는 것이지 application을 위해 존재하는 것이 아니기 때문에 npm을 설치할 때 개발자용으로 설치해야 한다. 설치 설치를 할 때 뒤에 -D를 붙이면 package.json에서 dependencies에 추가되지 않고 devDependencies에 추가가 된다. 이렇게 해야 나중에 build를 할 때 nodmon이 추가가 되지 않는다. build tool이나 프로그램들은 ..
-
babelProject using node.js/Cloning Youtube 2020. 8. 20. 10:06
소개 Ecma Script 앞으로 작성할 JS 코드는 ES(Ecma Script)6+다. ES는 JS의 문법을 설명하는 specification이다. ES를 살펴보면 JS 문법에 이것이 추가되었고 수정되었고 deprecated 되었다라는 것을 명시한다. 개발자는 ES를 보고 그에 따라 JS 코드를 작성할 수가 있다. 하지만 개발자가 ES6+(번호는 버전을 뜻한다.)대로 개발을 하게 되면 브라우저는 코드를 인식하지 못 한다. 이것을 해결하는 도구가 babel이다. (왜 이해하지 못 하는 이유를 알고 싶다면 브라우저 전쟁을 알아야 한다. 하지만 이 부분은 생략하겠다. 밑에 링크를 달아둘테니 브라우저 전쟁을 잘 설명해주시는 엘리님의 설명을 들으면 된다.) Babel Babel은 ES6+로 작성된 JS 코드를 ..
-
gitignoreProject using node.js/Cloning Youtube 2020. 8. 19. 16:15
코드를 작성하고 github에 소스 코드를 올릴 때 원하지 않는 코드들이 있을 수가 있습니다. 그 중 대표적인 것이 node_modules 폴더입니다. npm 패키지를 설치할 때마다 node_modules에 파일들이 추가가 됩니다. 이 수백 개의 파일들을 git에 올릴 필요가 없습니다. 왜냐하면 package.json 파일만 있다면 'npm install' 명령어로 package.json에 설정된 파일들을 모두 다운 받아서 node_modules를 만들 수 있기 때문입니다. .gitignore 파일은 이러한 문제점을 해결해줍니다. '.gitignore'파일을 생성하고 그 안에 내가 원하지 않는 파일과 폴더명을 입력하면 github에 push를 할 때 .gitignore에 설정된 파일들은 repositor..
-
express 설치Project using node.js/Cloning Youtube 2020. 8. 19. 10:49
소개 프로젝트를 진행하기 위해서는 어떤 언어를 사용할 것인지, 어떤 라이브러리를 사용할 것인지, 마지막으로 어떤 프레임워크를 사용할 것인지를 결정해야 한다. 물론 프레임워크를 사용하지 않고 웹 서버를 만들 수 있지만 정말 좋은 툴을 누군가가 만들어줬고 수 많은 사람들에게 실용성과 안정성을 검증받았는데 안 쓸 이유가 없지 않겠는가? 대표적인 node.js를 이용한 웹 서버 프레임워크로 express를 소개한다. express말고도 다른 웹 서버 프레임워크가 있지만, npm 패키지의 다운로드 횟수가 다른 프레임워크보다 압도적으로 높기 때문에 굳이 다른 프레임워크를 사용할 이유가 없다. 설치는 'npm i express'다. 사용 방법은 expressjs에서 알려주는 방법대로 코드를 작성하면 된다. 나는 in..
-
npm 설치 및 세팅Project using node.js/Cloning Youtube 2020. 8. 19. 09:51
node.js 자체에도 내장된 모듈들이 있지만 이것만으로는 프로젝트를 진행하기가 어렵습니다. SW 세계에는 정말 좋은 사람들이 많기 때문에 오픈 소스로 많은 것들을 할 수가 있습니다. 그 중 node.js로 서버를 구성하는데 없어서는 안 되는 npm을 소개해드리겠습니다. 소개 npm은 Node Package Manager의 약어(brevity)로 내가 필요한 기능들을 npm을 통해 설치해서 사용할 수가 있습니다. npm을 사용한 기업들은 slack, MS, Adobe, nike나 docker 등 유명한 기업들이 정말 많습니다. 설치 설치 명령어는 npm init입니다. package name : 프로젝트 이름 version : version 입력 description : 프로젝트 설명 입력 entry p..
-
node.js 설치Project using node.js/Cloning Youtube 2020. 8. 19. 09:26
Node.js 설명 node.js는 브라우저에서만 사용이 가능했던 JavaScript를 서버에서 사용할 수 있게 해주는 SW 플랫폼이다. node.js는 기본적으로 JS의 특성을 가진다. 이 말이 무슨 말이냐 하면은, JS 언어의 특징이 싱글 스레드, Non Blocking I/O와 이벤트 루프를 통한 높은 처리성이다. 즉, 서버에서 I/O 요청이 많이 발생할 경우 node.js를 사용하는 것이 좋다. 하지만 싱글 스레드로 동작하기 때문에 무거운 CPU 연산을 처리하는데는 적합하지가 않다. 배럭스에서 마린 여러 마리를 빨리 생산하는 데는 높은 효율을 보이지만 배틀크루저를 뽑을 때는 비효율적이다. 즉, 실시간 채팅 서비스나 JSON 데이터를 제공하는 API 서버가 노드를 많이 사용한다. 또는, 우버나 카카..
-
개요Project using node.js/Cloning Youtube 2020. 8. 19. 08:31
이 개발 일지는 노마드 코더의 유튜브 클론 코딩을 기반으로 작성되었다. 웹의 프론트와 백 엔드를 혼자서 처리한 풀스택 프로젝트다. 목적 혼자서 node.js를 이용한 풀스택 개발을 진행 함으로써 node.js를 이용한 다른 웹 애플리케이션을 만들 수 있는 기본기를 다질 수 있다. 사용된 기술 서버 : node.js, npm, express 템플릿 엔진 : pug DB : MongoDB login 기능 : passport 기타 : webpack, babel 사용한 에디터 : Visual Studio Code