NestJS 시작하기"NestJS boilerplate" NestJS를 처음 시작한 사람들은 한 번씩 검색해봤을 법한 키워드일 것이다.근데 막상 코드를 확인해보면 뭐가 뭔지, 다 필요한 건지 헷갈린다.그렇다고 `nest new`만 치고 시작하자니, 허전하다. 선배 개발자가 옆에서 "이것만 세팅하면 돼" 라고 알려주는 느낌으로, 정말 필요한 설정들만 정리해봤다. 기본 설정1. NVM 자동 설정하기만약 노드 버전을 합의하지 않고 프로젝트를 시작했다고 해보자.여러 의존성을 설치하다보면 서로의 노드 버전이 맞지 않아 에러가 발생하게 될 수 있다. 이 문제는 NVM(Node Version Manager)으로 해결할 수 있다.설치하기 (Mac 기준)homebrew를 통해 nvm을 설치하자.$ brew instal..

자바스크립트의 this 자바스크립트에서 함수가 호출되면, 매개변수로 전달되는 인자값 외에도 arguments 객체와 this 를 전달받는다. 여기서 자바스크립트에서의 this 는 다른 언어의 this 와는 약간 다르게 동작하기 때문에 주의해야한다. 또한 Strict Mode와 Sloppy Mode에서도 약간이 차이가 있다. 예를 들어, Java에서의 this 는 인스턴스 자신(self)를 가리키는 참조 변수로 사용된다. this 가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버 변수명이 같을 경우 이를 구분하기 위해서 사용된다. 하지만 자바스크립트의 경우 Java와는 다르게 this 에 바인딩되는 객체는 한 가지가 아니다. 해당 함수의 호출 방식에 따라..

1. 불변함수 상태 업데이트를 지속적으로 하는 React 에서 불변성을 유지하는 것이 굉장히 중요하다. 리액트에서 개발의 편의성을 위해 컴포넌트 단위로 쪼개서 함수를 만든다. 큰 도화지에 스티커를 붙이듯 부모에 해당하는 함수의 return값에 컴포넌트들을 넣어 화면을 구현한다. 대체로 부모가 변경될 때 자식은 그에 의존적이기 때문에 부모에 입력된 컴포넌트들을 변경하는 연산을 수행할 경우가 생긴다. 그런데 만약 부모에 의해서 컴포넌트의 원본이 마구잡이로 바뀌게 된다면 프로그램의 안정성이 떨어지게 될 것이다. 리액트 프로그램의 안정성을 위해 불변성이 필요하다. 불변성을 유지함으로써 연산을 최적화시킬 수 있다! 불변성의 정의는 상태를 변경하지 않는 것을 뜻하며 컴퓨터 공학적으로 풀어 말한다면 메모리 영역의 값..

0. React 시작 리액트 시작하기 링크: Tutorial: Intro to React Node JS 설치: https://nodejs.org/ko/ 리액트 설치: https://reactjs-kr.firebaseapp.com/docs/installation.html 1. return할 때 하나의 DOM만 리턴할 수 있다. 아래 코드를 보자. return 안에 div 태그로 묶여있는 것을 확인할 수 있다. return되는 DOM이 1개이다. html 파일에 전달하면 div태그의 내용이 정상적으로 출력될 것이다. import logo from './logo.svg'; import './App.css'; function App() { return ( this is react program Title ); ..

1. DOM이란? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 API이다. HTML내에 들어 있는 요소를 구조적으로 표현하는 양식이자, 그 구조를 통해 각각의 요소에 손 쉽게 접근한다. 웹 브라우저는 HTML를 읽을 때, 위의 그림처럼 Document 객체를 뿌리로 하는 tree 자료구조를 구성한다. 근 노드(root node)인 html을 시작으로 단말 노드(leaf node)까지 뻗어나간다. 위쪽을 부모 노드(parent node) 아래쪽을 자식 노드(chile node)라고 부르며, 어떤 노드든지 부모가 되거나 자식이 될 수 있다. 자식이 없는 node를 단말 노드(leaf node)라고 부른다. 대체로 DOM이라고 하면 HTML DO..