React의 SSR(Server side rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크 클아이언트 대신 서버에서 페이지를 준비 리액트에서는 클라이언트 사이드 렌더링 이기 때문에 서버에서 클라이언트로 응답해서 보낸 HTML도 거의 비어있습니다. 기존 Re

기존에 한 컴포넌트 안에서 데이터를 생성하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법은 state와 props를 사용해서 컴포넌트 간에 전달이 가능했습니다. 이 외에 state를 관리하는 방법(mobx, redux ...)은 여러가지가 있지만, 그 중 Reac

The Movie DB API 생성

리액트 앱을 만들 폴더 생성 > 터미널 실행 > npx create-react-app ./npx는 노드 패키지 실행을 도와주는 도구. npm 레지스트리에 있는 패키지를 create-react-app 것으로 실행해서 리액트를 설치시켜주는 것최신 자바스크립트 문법을 구형브

markdown동해물과 백두산이 마르고 닳도록하느님이 보우하사 우리나라 만세이텔릭두껍게이텔릭 + 두껍게취소선밑줄순서가 필요한 목록순서가 필요한 목록순서가 필요한 목록순서가 필요한 목록순서가 필요한 목록순서가 필요한 목록순서가 필요하지 않은 목록순서가 필요하지 않은 목록

CSS를 작성할 때 이름을 부여하는 방법 중에 작명법이 크게 두가지가 있다. BEM 요소__일부분 Underscore(Lodash) 기호로 요소의 일부분을 표시 요소--상태 Hyphen(Dash) 기호로 요소의 상태를 표시 예를 들어, 밑 코드를 보자. 왼 쪽 코드

index.js위 코드에서 .load index.js를 실행하면 무한 루프로 출력되는 문제점이 발생한다. Temianl창과 PowerShell이 아닌 mongoShell을 이용하여 명령어를 입력하니 더 이상 무한 루프가 발생하지 않았다.

어떤 종류의 SQL 문이든 그 작성 방식에는 정해진 구조와 형식이 있습니다. 특히, 어떤 절이 다른 절보다 먼저 나와야 한다는 '순서의 법칙'은 아주 엄격하게 지켜줘야 하죠. 만약 이 순서를 지키지 않으면 SQL 문을 실행했을 때 에러가 납니다.우리가 이때까지 배웠던

자바스크립트에서 특정 객체가 갖고 있는 모든 프로퍼티를 확인할 수 있는 방법에는 여러 가지가 있습니다. 아래의 3가지 방법들을 살펴봅시다.이전 영상에서 저는 PUT 리퀘스트를 처리하기 위한 라우트 핸들러를 작성할 때, 리퀘스트의 바디에 있는 새로운 직원 정보 객체의 각

이전 영상에서 저는 nodemon 패키지를 설치할 때이렇게 맨 뒤에 --save-dev라는 옵션을 주고 설치했습니다. 이번 노트에서는(1) 옵션없이 패키지를 설치했을 때와 (2) --save-dev 옵션을 주고 패키지를 설치했을 때의 차이를 살펴보겠습니다.이렇게 --s

1. Semantic Version이란? 이전 노트에서 본 express 패키지의 package.json 파일의 dependencies 필드를 살펴봅시다. 여기서 각 패키지의 이름 옆에 적힌 버전에 대한 이야기를 해보겠습니다. dependencies 필드에 있는 각

패키지 안에 있는 package.json 파일에는 해당 패키지에 관한 의미있는 정보들이 담겨있습니다.이번 노트에서는 package.json에 등장할 수 있는 주요 필드들에 대해서 설명해드리겠습니다. 하나하나 꼼꼼하게 읽어보세요.패키지의 이름입니다. 우리가 특정 패키지를

이 코드는 이전 영상에서 본 코드에서 주석 부분을 삭제한 후의 코드입니다. express라는 서드파티 모듈을 사용해서 간단한 라우팅을 해본 코드죠? 그런데 여기서 가장 마지막에 있는이 코드에서, path 인자로 들어간 (별표, asterisk) 이 표시의 의미는 무엇일

1. 도메인 네임(Domain Name) 이전 영상에서는 http://example.com/business/mart/item?category=14&id=2965 이 URL을 예시로 사용해서, URL의 구조에 대해 설명했는데요. 여기서 example.com

이번 노트에서는 서버 프로그램을 개발하기 위해서 반드시 알아야 할 네트워크 기초 지식을 살펴볼 겁니다. 이 내용을 모르고 개발을 한다면, 답답할 때가 자주 생기기 때문에 미리 제대로 짚고 가는 게 좋습니다. 하나씩 잘 읽어보세요. 1. 프로토콜(Protocol) 이전

이번 노트에서는 Node.js에서 이루어지는 비동기 실행의 원리에 대해서 조금 더 깊게 배워보겠습니다. 혹시 이전 노트에 배웠던 setTimeout 함수 기억나시나요? setTimeout 함수는 특정 밀리세컨즈 초 후에 특정 코드를 실행하도록 설정하는 함수였는데요. 예

이번 노트에서는 우리가 배운 EventEmitter 객체의 메소드를 정리하고, EventEmitter 객체의 다른 메소드들도 추가로 배워보겠습니다.on 메소드는 이벤트 핸들러를 설정하는 메소드입니다. 참고로, on 메소드와 같은 용도를 가진 addListener라는 메

이번 노트에서는 Node.js에 구현된 '비동기 실행'에 대해서 더 깊게 공부해보겠습니다. 일단 '비동기 실행'과 '동기 실행'이 뭔지 확실하게 이해한 분들만 이 노트를 읽어주시고, 아직 이해하지 못한 분들은 꼭 이전 영상의 내용을 확실하게 이해하고 와주세요.'비동기

이번 노트에서는 여러분이 '비동기 실행'을 제대로 이해했는지 간단히 확인하는 시간을 가져볼게요.아래 코드를 보세요.지금 주석에 Question!이라고 표시된 곳에서 출력되는 test 변수의 값은 뭘까요?답은 1입니다. 왜냐하면 코드의 실행 순서는이기 때문입니다. rea

readFile 함수(비동기 실행 함수)와readFileSync 함수(동기 실행 함수)에 대한 설명을 Node.js 공식 홈페이지에서 직접 찾아보면서 그 개념을 다시 복습해봅시다.먼저 readFile 함수를 보겠습니다.비동기 함수인 readFile 함수를 보면 다음과