1. 노트 프로젝트 만들기 VSCode에서 먼저 npm init을 통해 프로젝트를 초기화시킨다! 다음 Express 프레임워크를 설치해서 가벼운 백엔드를 만들어준다! 여기까지 완료되었다면, 간단하게 작성하였다. ※ package-lock.json이 안 만들어졌다면, npm i 명령어를 통해서 만들어주면 된다. 2. 도커 파일 만들기 Node 프로젝트 작성이 끝났다면, 다음으론 Dockerfile을 만들어준다! Dockerfile 안에는 어떤 이미지를 만들건지, 프로젝트에 어떤 것이 필요한지 명시하는 것이다. 1. BaseImage 정하기 - FROM 제일 처음에는 FROM baseImage로 시작한다. DockerImage를 만들때 모든 것을 다 만드는 것이 아닌 BaseImage를 기반으로 작업을 진행..

1. DOM DOM이란 문서 객체 모델(Document Object Model)로 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스다. 여기서 말하는 문서 객체란, html, head, body, footer 같은 태그를 JavaScript에서 이용할 수 있는 객체를 의미한다. 즉, DOM은 HTML과 스크립트언어(JavaScript)를 이어주는 역할을 하고 있다. 2. Virtual DOM이 나온 이유 만약 요소를 수정할 경우 DOM의 document.getElementById를 사용할 경우 아쉬운 점이 있다. 1. 메모리 누수와 속도 요소를 찾는 코드를 변수에 저장하지 않고 매번 document.getElementById를 사용한다면, 각 단계마다 페이지의 모든 document를 훑으며 ..

1. 도커 설치 구글에서 docker를 검색하고, Get Started with Docker를 클릭! 그 후, Docker Desktop에서 Windows를 다운로드! Ok를 눌러 설치를 완료하면 끝!

1. 도커? 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 컨테이너 기반의 오픈소스 가상화 플랫폼을 말한다. 도커를 사용하면 이미지를 기반으로 컨테이너를 실행할 수 있으며, 특정 컨테이너의 상태를 변경해 새롭게 이미지를 만들 수 있다. ※ 컨테이너 기반? 도커에서 사용하는 컨테이너 기반 방식은 리눅스 컨테이너 방식으로, 리눅스 컨테이너는 운영체제 수준의 가상화 기술로 리눅스 커널을 공유하면서 프로세스를 격리된 환경에서 실행하는 기술이다. => 하드웨어 자체를 가상화하는 가상 머신과는 달리 커널을 공유하는 방식이기 때문에 실행 속도가 빠르고 성능상 손실이 거의 없다!! 컨테이너로 실행된 프로세스는 커널을 공유하지만, 리눅스 네임스페이스, 컨트롤 그룹, 루트 디렉터리 등의 커널 기능을 활용해 격리..

0. 블로그 최초 사용된 곳 도커에 대해서 공부하다가 리눅스 컨테이널의 주요 특징에 대한 부분에서 나오게 되었다. 1. 오버 헤드? 어떤 처리를 하기 위해 들어가는 간접적인 처리 시간 · 메모리 등을 말한다. 예를 들어 A라는 처리를 단순하게 실행한다면 10초 걸리는데, 안전성을 고려하고 부가적인 B라는 처리를 추가한 결과 처리시간이 15초 걸렸다면, 오버헤드는 5초가 된다. 또한 이 처리 B를 개선해 B'라는 처리를 한 결과, 처리시간이 12초가 되었다면, 이 경우 오버헤드가 3초 단축되었다고 말한다

1. Hooks? Class 컴포넌트의 단점을 보완하면서 라이프사이클 등과 관련된 함수를 재사용 가능하게 함 Class 컴포넌트의 단점으론 1. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. Class 컴포넌트의 로직을 재사용하는 방법은 불가능한 것은 아니다. 하지만 render props, 고차 컴포넌트 같은 패턴을 사용해서 해결해야 했다. 그래서 Hook은 좀 더 편하게 상태 로직을 재사용할 수 있도록 도와준다. 2. 복잡한 컴포넌트들은 이해하기 어렵다. 데이터를 가지고 오는 작업을 componentDidMount에서 일어날 때가 있고 componentDidUpdate에서 일어날 때가 있었다. 즉, 관련이 있는 코드는 분리되지만, 관련 없는 코드들은 단일 메서드로 결합되어있다. 그것으로 인해서 버..

1. 구조 분해 할당 ? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 // Stage 4(finished) proposal ({a, b, ...rest} = {a:..

1. JavaScript와 React의 리 랜더링 바닐라 JS에서는 변경이 일어나면 전체 Element를 다시 랜더링 시킵니다. 하지만 React에서는 변경이 일어나는 부분만 다시 랜더링 시킨다. 2. React의 랜더링 React 앨리 먼트는 불변 객체 (immutable)이다. React에게 변경하고 싶은 내용을 전달하기만 할 뿐이고, 실제 변경에 대한 판단, 반영은 React가 알아서 한다. 변경되는 방법으론 1. 앨리 먼트 타입이 바뀌면? => 이전 앨리 먼트는 버리고 새로그린다. 2. 앨리먼트 타입이 같다면? => (key를 먼저 비교하교), props를 비교해서 변경사항을 반영한다. ※ 불변 객체? 말 그대로 변하지 않는 객체이다.