Mini node Server 구축하기 Node.js 공식 문서의 HTTP 트랜잭션 해부 와 express 공식문서 시작하기를 참고하여 작성하면 쉽게 만들 수 있다 HTTP 트랜잭션 해부 https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org express 공식문서 시작하기 https://expressjs.com/ko/starter/installing.html Express 설치 설치 Node.js가 이미 설치되었다고 가정한 상태에서, 애플리케이션을 보관할..

Web Server – 기초 node.js를 이용한 백엔드 구축 → API 서버를 구현하여 Express, 라우팅, Server-side 디버깅 학습 CommonJS 와 모듈의 개념 학습 학습 목표 *HTTP - HTTP 요청/응답 - HTTP 의 요청 방식과 응답 코드 * node.js modules의 사용 - node.js의 내장 http 모듈 사용법 - http 모듈 사용시에 서버에 CORS 설정하기 - CommonJS를 이용한 모듈 내보내기/불러오기 * 라우팅과 API - 라우팅(조건에 따른 분기)을 이해하고, 이를 서버 코드에서 구현 - 클라이언트가 사용할 수 있도록, 서버 API 문서를 직접 작성 * Express 라이브러리 - express 라이브러리에 대한 이해 - 미들웨어의 개념을 이해 ..

리액트 - 데이터 흐름 이해와 비동기 요청 처리 보충 내용 리액트의 핵심 키워드 및 주요 용법 1. 컴포넌트 기반 2. 단방향 데이터 흐름 3. lifting state up(상태 끌어올리기) 4. side effect 방지를 위해 → useEffect (최소한으로 쓸 것) 개발자는 절차적으로 코드를 작성해야 하는데, 개발자도 유저가 생각하는 방식으로 심플하게 생각할 수 없을까? → 절차적으로 코드는 짜되, 다 작성하고 나면 이런식으로 사용하게 생각해보자 → 리액트 리액트로 사고하기: https://ko.reactjs.org/docs/thinking-in-react.html 를 항상 생각해서 하자!(항상 참고!) 함부로 상태 변경이나 외부 side effect 받지 않게 하자 → 하향식, 단방향 데이터 ..

react 데이터 흐름 react에서의 데이터 흐름 컴포넌트로 생각하기 react의 개발 방식의 가장 큰 특징인 컴포넌트 단위(페이지 단위x)로 시작한다는 점을 다시 떠올려 보자 → 페이지를 만들기 이전에, 컴포넌트를 먼저 만들고 조립(상향식으로 앱을 만듬) → 테스트가 쉽고, 확장성이 좋음 단일 책임 원칙: 하나의 컴포넌트는 한가지 일을 처리하는 게 이상적이다 데이터는 위에서 아래로 흐른다(데이터 흐름은 하향식) 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달 받을 수 있다 → 데이터를 전달하는 주체: 부모 컴포넌트 → 부모 컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다 부모가 자식에게 데이터를..

REST API 문서 이해하기 REST API REST API 란? REST는 Representational State Transfer의 약자 클라이언트와 서버가 HTTP 통신으로 요청과 응답을 할 때, 제대로 보내고 받을 수 있는 일종의 규약이 존재 → REST API → 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 API는 클라이언트 - 서버 간의 메뉴판과 비슷한데, 서로가 잘 알아볼 수 있도록 작성하는 것이 중요하다 좋은 REST API를 디자인 하는 방법: 리차드슨의 REST 성숙도 모델(RMM) REST API를 잘 적용하기 위한 4단계 모델 → REST 성숙도 모델은 총 4단계(0~3단계)로 나뉜다 3단계 ..

http/네트워크 intro 학습 목표 * 클라이언트-서버 콘셉트 - 클라이언트-서버 아키텍처 - HTTP를 이용한 클라이언트-서버 간 통신 - API의 개념 * 브라우저의 작동 원리 - 보이지 않는 곳의 통신: URL과 URI의 차이 IP 주소와 PORT DNS와 IP 주소의 관계 크롬 브라우저의 에러 메시지 이해하기 - 보이는 곳의 통신: AJAX의 개념 SSR과 CSR의 차이 CORS의 개념 * HTTP messages의 구조 - HTTP의 동작 방식 - HTTP requests와 responses - HTTP 응답 메시지 * Chrome Network Tab 이해하기 - Chrome Network Tab 사용방법 * Self Guided Lessons(Advanced) - How the inter..

비동기 1 내용에 대한 보충 학습 비동기를 처리하는 3가지 방식: callback, promise, async/await 여태 우리가 짰던 코드들은 대부분 동기적 구문이다: sync+blocking ex) for 문 → 내가 짰던 코드 순서대로 다 끝난 다음에야 그 다음 코드가 실행됨 비동기적 처리의 경우: async+non-blocking 시작은 순서대로 되었지만, non-blocking이므로 앞의 task의 진행 유무와 관계 없이 다음 task들이 각각 자기들 처리 다 되는대로 끝남 node.js에서 callback 함수를 사용할 때는 일종의 convention이 있다(`국룰`(관행) 같은거) 가령 예를 들면… 콜백 함수에는 두 가지 파라미터가 존재합니다. 에러가 발생하지 않으면 err 는 null ..

JS/Node – 비동기 비동기 쉽게 이해하기 햄버거 주문을 예로 들어 생각해보자 햄버거 가게에서 손님들이 햄버거를 주문하려고 왔다. 그런데 먼저 주문한 A가 주문한 햄버거를 받을 때까지 그 뒤에 있는 B가 햄버거를 주문조차 할 수 없다고 생각해보자 → “blocking”(하나의 작업이 끝날 때까지 이어지는 작업을 막는 것) 손님 B는 손님 A가 주문한 햄버거가 나오고 나서야 원하는 햄버거를 주문할 수 있다. 즉 손님 A의 햄버거 주문 완료 시점과 손님 B의 햄버거 주문 시작 지점이 같다 → “동기적(synchronous)” 이다(완료 시점과 시작 시점이 같은 상황) 효율적인 햄버거 가게 운영을 위해 커피 주문 과정을 다음과 같이 변경해 보자 * 햄버거 주문이 blocking 되지 않고, 언제든지 주문을..

Graph, Tree Search Algorithm Tree traversal(트리 순회) 특정 목적을 위해 트리의 모든 노드를 “한번씩” 방문하는 것 ex) 1부터 10까지의 정수로 이루어진 트리에서 5라는 숫자를 찾기 위해 모든 노드를 방문 → 트리 순회 트리 구조는 계층적 구조를 가지므로 모든 노드를 순회하는 방법도 3가지가 존재 (단, 노드 조회하는 순서는 항상 왼쪽→ 오른쪽 방향) 전위 순회(Preorder) 루트에서 시작해서 왼쪽의 노드들을 순차적으로 둘러본 후, 왼쪽의 노드 탐색이 끝나면 오른쪽 노드를 탐색 → 왼쪽으로 가면서 위에서부터 순차적으로 왼쪽의 노드를 탐색함 중위 순회(Inorder) 루트를 가운데에 두고 순회함. 제일 왼쪽 끝에 있는 노드부터 순회하기 시작하여, 루트를 기준으로 ..

자료구조 학습 목표 * 자료구조란? * Stack, Queue, Tree, Graph 자료 구조 - 알고리즘 문제에서 Stack, Queue 자료 구조를 배열로 흉내내기 - 각 자료구조의 개념과 구조 파악 - 알고리즘 문제에 맞는 자료구조 적용 * 트리 및 그래프의 탐색 기법 이해 - Binary Search Tree - BFS 와 DFS의 개념과 알고리즘 적용 * 자료 구조를 활용한 알고리즘 문제 접근 자료 구조 소개 자료 구조란? 여러 데이터들의 묶음을 저장하고 사용하는 방법을 정의한 것 → 필요에 따라 데이터의 특징을 잘 파악하여 체계적으로 정리하여 저장해 둬야 한다 → 데이터를 효율적으로 다룰 수 있는 여러 방법들을 모아 “자료 구조” 라 한다 가장 많이 쓰이는 자료 구조 → Stack, Queu..

학습 내용 * 재귀의 의미, 자바스크립트에서 재귀 호출 * 언제 재귀를 사용해야 하는가 * 재귀적 사고 연습을 통해 재귀함수를 base case와 resursive case로 나눠 작성하기 * Tree 구조에 재귀 함수를 사용해야 하는 이유 이해 - 실생활에 사용되는 유용한 Tree 구조 - 깊이를 알 수 없는 Tree 구조에 재귀 함수를 이용하여 모두 순회하기 재귀의 이해 - 다르게 생각하기 하나의 문제를 해결하기 위해 다양한 방식으로 생각하는 능력을 기르는 것 문제를 쪼개어 생각하는 방법 어떤 문제를 해결할 때, 동일한 구조의 더 작은 문제를 해결함으로써 주어진 문제를 해결하는 방법 → 재귀(recursion) ex) 자연수로 이루어진 리스트(배열)를 입력받고, 리스트의 합을 리턴하는 함수 `arrS..

JS/Node - 객체 지향 JavaScript 객체 지향 프로그래밍(OOP; Object-oriented programming)은 데이터와 기능을 한 곳에 모아 처리하는 것. 속성과 메소드가 하나의 “객체” 라는 개념에 포함되고 자바스크립트의 타입은 object와는 다른 것이다. → 클래스(Class)라고 부른다 학습 목표 * 클래스와 인스턴스 - new 키워드 사용법 - class 키워드 사용법 * 객체 지향 프로그래밍의 특징 - 캡슐화 - 상속 - 추상화 - 다형성 * JavaScript에서 객체 지향 프로그래밍 구현 - ProtoType에 대한 이해 * 객체 지향 프로그래밍의 상속(inheritance) - 상속 관계를 가진 현실 세계의 모델을 코드로 작성하기 - 클래스 상속의 원리 - Proto..