Programming

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 알고리즘 사용 - ..

라이브러리 = 모듈 프로그래밍 언어(코드)에서, 자주사용하는 기능을 함수나 클래스로 묶어서 [쉽게 재사용할 수 있게 만들어 놓은 파일]을 라이브러리라고 한다. 프레임워크 프로그래밍 언어(코드)로 만드는 앱은 여러가지가 있는데, [앱을 만드는 방식]을 프레임워크라고 한다. 많은 사람들이 프레임워크를 만들고, 이를 공유해서 같이 사용하고 있다. 라이브러리와 프레임워크의 가장 큰 차이 라이브러리 : 개발자가 코드를 불러와, 마음대로 바꾼다. 프레임워크 : 프로그램이 개발자가 작성한 코드를 불러와, 규칙에 맞게 바꾼다. 자신이 만들고 싶은 앱의 모습을 정확하게 설정하고, 그에 맞는 라이브러리와 프레임워크를 선택할 수 있다. ( 사용하지 않는 것이 효율적일 수도 있으므로, 정확한 확인이 필수! )

렌더링이란? [웹] 렌더링(Rendering)이란? 렌더링이란? 화면에 표시할 웹 페이지를 만드는 과정 렌더링과정 1. HTML을 구조별로 분류하여, DOM 객체를 생성. 2. CSS를 구조별로 분류하여, 스타일 규칙 생성. 3. DOM 객체, 스타일 규칙 합쳐, 화면( defineall.tistory.com 서버 사이드 렌더링 ( SSR ) 서버측에서 렌더링하여, 클라이언트 쪽으로 보내주는 것 ( 브라우저는 출력만 함 ) 클라이언트 사이드 렌더링 ( CSR ) 서버에서 데이터를 받아와, 클라이언트 환경에서 렌더링하여 브라우저 화면에 표시하는 것 서버 사이드 렌더링 ( SSR ) 클라이언트 사이드 렌더링 ( CSR ) 서버에서 렌더링 클라이언트에서 렌더링 서버는 완성된 웹 페이지를 보냄 서버는 웹 페이지..

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..

👉 Docker란? 개발환경을 언제 어디서든 동일하게 구축할 수 있게 해주는, 가상환경 프로그램 # 개발환경을 image란 파일로 만들어, Docker Hub 홈페이지에 올려 사람들과 공유한다. ⭐️ 특징 리눅스의 namespace 기술을 이용해, 기존의 OS의 커널을 사용하면서, 앱에 필요한 파일만 분리한다. Docker 구조 컴퓨터 { 운영체제(OS) { 도커 { 컨테이너 1 { ... } 컨테이너 2 { ... } 컨테이너 3 { ... } ... } } } # 컴퓨터 -> os -> 도커 -> 컨테이너 # 도커로 만들어진 개발환경은 컨테이너라고 불리고, 관리되어진다. 기존 가상머신 구조 컴퓨터 { 운영체제(OS) { 가상 운영체제(OS) 1 { ... } 가상 운영체제(OS) 2 { ... } 가..

👉 동기(synchronous) 처리 이전 작업이 끝나야, 다음 작업을 처리하는 방식 함수 실행 => 반환될때까지 기다림 => 다음 함수 실행 👉 비동기(asynchronous) 처리 여러 작업을 동시에 처리하는 방식 콜백을 전달하여 함수A 실행 => 반환되지 않더라도 다음 함수B 실행 => A가 종료되면 콜백함수 실행 ( 스트리밍도 비동기 처리 방식중에 하나다. ) 👉 블로킹 제어권을 가진 함수가 실행될 동안, 실행중인 함수들을 정지시키는 방식 A함수에서 B함수실행 => A 정지, B 실행 => B 반환, A 실행 👉 논블로킹 제어권을 가진 함수가 실행과 관계없이, 함수들을 실행하는 것 A함수에서 B함수실행 => A,B 동시 작동 => 👉 동기 블로킹 A함수에서 B함수 실행 1. A는 B의 리턴값이 필..