클라이언트 빌드와 배포 학습 목표 * 정적 웹사이트와 동적 웹사이트의 차이 * 빌드의 의미 * 정적 웹사이트 형태로 만들어지는 웹 앱에서의 빌드 과정의 필요성 * 정적 웹사이트 배포 * 정적 웹사이트 배포시 발생하는 문제 해결 * 정적 웹사이트에서 사용하는 다양한 프론트엔드 기술 공부: Landing Page 등(스스로 찾아보기) 빌드 SSR과 CSR SSR과 CSR의 차이점을 이해하기 → SSR과 CSR의 정의와 차이점을 알아 보자 SSR(Server Side Rendering) 웹 페이지를 브라우저에서 렌더링하는 대신, 서버에서 렌더링한다 브라우저가 서버의 URI로 GET 요청(req)을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송. 이 웹페이지가 브라우저에 도착하면 렌더링이 완료됨 → ..

Redux 연습하기 상품 리스트 페이지와 장바구니 페이지로 단순화해서 만들기 // 구조를 살펴보면 다음과 같다 index.js – App.js - Nav.js - ItemListContainer.js - Item.js - ShoppingCart.js - CartItem.js - OrderSummary.js state: { itemList: […], cartItemList: […], ...} App.js에 모든 state가 있는 상황에서 장바구니의 물건을 업데이트하려면? → 수많은 props drilling이 발생함! → 전역 상태를 담고 있는 Store가 있다면 해결 가능 Cmarket Shopping App Create React App으로 만든 리액트 앱에 Redux를 붙인 구조의 앱 // 구조 * ..

react – 상태관리 학습 목표 * 상태 관리의 필요성 이해 * Redux(혹은 Flux Pattern)에서 사용하는 Action, Reducer, Store의 의미와 특징 * Redux의 3가지 원칙 * Presentational 컴포넌트와 Container 컴포넌트 * Redux hooks(useSelector, useDispatch)에 대한 이해 및 사용(store 업데이트) 상태 관리 프론트엔드 개발에서의 상태 관리 프론트엔드 개발에서 상태의 중요성 프론트엔드 개발에서 상태란? → UI에 동적으로 표현될 데이터 상태에 따라 어떤 화면이 영향을 받는지를 생각해야 한다 (ex. 쇼핑몰의 장바구니 를 생각하면서 연습해보기) 프론트엔드 개발에서의 Side Effect 함수(또는 컴포넌트)의 입력 외에도..

학습 목표 * 컴포넌트 기반 bottom-up 방식 개발에 대한 이해 * storybook 활용: 컴포넌트 UI 개발에 도움을 주는 라이브러리 * 구조적으로 CSS를 작성하는 방법 * styled-Component 활용: 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리 * useRef Hook 활용: DOM Reference를 활용하기 위한 hook 컴포넌트 단위로 개발하기 Component Driven Development(CDD) 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방식(레고처럼) → 컴포넌트 생성 → 컴포넌트 결합 → 페이지 조립 재사용할 수 있는 UI 컴포넌트를 활용하는 방식이다 컴포넌트 UI 개발을 위한 Storybook Component Driven Development를 지원..

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

입력: number 타입 자연수(1이상) 출력: number 타입 리턴(경우의 수) 조건: 세로길이 2, 가로길이 n인 2xn 크기의 보드가 존재 2x1 크기의 사각형으로 이 보드를 채우는 모든 경우의 수를 리턴해라 주의사항: 사각형은 가로, 세로 어느 방향으로 놓아도 됨 각각의 사각형은 모두 같다고 생각(중복허용x) 사실상 생각해보면 피보나치 수열과 같은 문제임 아래 코드를 살펴보자 let fillingSquare = function (n) { // 1 2 3 5 8 13 21 34 55 89(10) 144(11) 233(12) 377(13) 610(14) 987(15) // 2 output = fillingSquare(4); console.log(output); // --> 5 /* 2 x 4 보드에..

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