Frameworks

ESLint란? ES(javascript) + Lint(오류검사기) javascript코드를 실행하지 않고도, 오류를 발견해 알려주는 Node.js 패키지 ( Typescript도 가능! - javascript 기반이므로 ) ESLint 설치 # 현재 폴더에 설치 # -d : package.json의 devDependencies에 추가한다 npm i -d eslint # 컴퓨터에 설치 npm i -gd eslint ESLint 설치 확인, 버전 확인 # 현재 폴더에 설치되어있을 때 node_modules/.bin/eslint -v # 컴퓨터에 설치되어있을 때 eslint -v ESLint 설정파일 만들기 ( .eslintrc.json ) // 로컬 node_modules/.bin/eslint --init..

React란? 웹 사이트 / 앱의 화면(UI)을 만들어주는 Node.js 패키지 (페북이 만듬) React 탄생 배경 요즘 웹사이트는, 규모가 커질때로 커지고, 사용자가 직접 컨트롤 할 수 있는 부분이 많아지고 있다. 그렇기에 변동사항이 생길때마다, 새로운 페이지를 불러오는 기존의 방식으로는 불필요한 데이터까지 같이 불러와, 비효율적인 메모리 낭비가 커지기 시작했다. React의 필요성 1. React는 가상페이지(Virtual DOM)을 이용해, 전체페이지(DOM)가 아니라 부분적인 페이지(Component)만 불러와 불필요한 메모리 사용을 줄여준다. ( 대표적인 클라이언트 사이드 렌더링(CSR) 앱 ) 2. 코드가 읽기 쉬워, 유지 보수하기 좋다! React의 작동방식 ( diff 알고리즘 사용 - ..

Node.js란? 기존의 브라우져에서만 사용되던 javascript를, 브라우져밖에서 사용할 수 있도록 만들어주는 프로그램 Node.js를 쓰는 곳 알림이나 실시간 대화같이 데이터의 실시간 처리가 필요한 앱을 만들때 사용자의 입출력이 많은 앱을 만들때 데이터 스트리밍 앱 JSON API기반 앱 단일 페이지 기반 웹 (SPA) 페이지 제작 Node.js를 쓰기 적합하지 않은 곳 많은 양의 데이터 (빅데이터)를 처리하는 앱 Node.js 설치하기 (LTS버전) 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js 버전 확인하기 node -v Node.js 로 자바스크립트 ..

lodash란? ( 유사 underscore ) javascript를 확장하여, 편리하게 코드를 작성하거나 웹표준에 효율적으로 맞출 수 있게 해주는 Node.js 패키지 ( 기본 javascript보다 실행속도가 빠르거나 느릴 수 있다. - 편리한 코드작성을 위한 것이므로 ) lodash 설치하기 npm install lodash lodash 사용하기 // javascript 환경에서 사용하기 ( 아래 명령어는 둘다 같은 역할 ) import _ from 'lodash'; var _ = require('lodash'); // html 스크립트에 추가할 때

Path란? 파일과 폴더의 경로 작업을 위한 기능을 제공하는 Node.js 기본 모듈 경로를 가장 짧은 방식으로 최적화 하기 (normalize) // path 모듈 불러오기 const path = require("path"); // path.normalize : 최적화해서 저장 let myPath = path.normalize("/this/is//a/my/.././path/normalize"); // 결과 출력 console.log(myPath); // => /this/is/a/path/normalize 운영체제에 맞춰 경로 지정하기 (join) const path = require("path"); // path.join : string 형식의 인자들을 현재 운영체제에 맞춰 경로를 설정해줌 myPath..

babel 이란? 최신 ES6, ES7 버전의 javascript코드를, ES5버전의 코드로 바꾸어주는 Node.js 패키지 babel의 필요성 / 쓰는 곳 자주변하는 javascript 최신 코드를 이해하지 못하는 웹 브라우저에서도 페이지에 접속할 수 있도록 해줍니다! ( 컴퓨터 뿐만아니라, 스마트폰에서 사용하는 브라우저도 포함 ) babel 작동방식 여러개의 플러그인이, 자신이 이해할 수 있는 ESNext 문법만 골라, 컴파일하는 방식 1. ESNext 구문을 Babel 플러그인으로 보냄 2. 여러개의 Babel 플러그인이 파이프라인 형태로 차례대로 실행 3. Babel플러그인이 이해할 수 있는 구문을 ES5코드로 컴파일 함 babel 설치 # @babel/node : Node.js 커멘드 라인에서 ..

Webpack 이란? html 파일에 들어가는 여러개의 js,css,png,jpg파일들(에셋) 웹페이지가 이해할 수 있는 하나의 파일(번들)로 합쳐주는 Node.js 패키지 기본적으로 javascript를 번들링하는데 사용한다 웹을 구성하는 에셋을 모두 각각의 모듈로 보고,이를 조합해서 하나의 결과물을 만드는 도구 Webpack 의 필요성 / 쓰는 곳 여러개의 javascript를 사용할때 전역변수가 겹치는 일이 없어진다. 에셋을 따로따로 여러번 요청해줄 필요가 없다 ( 요청 중복 제거 ) 사용하지 않는 코드의 관리? ( 사용하지 않는 코드는 제외하고 번들링 ) javascript에서 원하는 순간에 정확히 모듈을 불러올 수 있도록 함 Webpack 설치 방법 npm install -D webpack //..

npm이란? Node Package Manager, Node.js에서 사용하는 패키지를 다운 받을 수 있는 프로그램 npx 란? npm 5.2.0 버전부터 따라오는 프로그램으로, 패키지를 설치하지않고, 1회성으로 실행해 볼수 있게 해준다. //예제 : npx create-react-app example npm 초기값 설정하기 # 새로운 npm 만들기 npm init # 기존의 npm 사용하기 ( 없으면 기본 값으로 새로 생성 ) npm init -y package.json 파일 생성 ( npm 초기값 저장되는 파일 ) { "name": "project-name", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test":..