코드스테이츠 Section 2

✏️Achievement Goals ✅ 클래스와 인스턴스라는 용어를 이해할 수 있다. ✅ new , class 키워드의 사용법을 이해할 수 있다. ✅ 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인할 수 있다. ✅ 객체 지향 프로그래밍 특징을 이해할 수 있

상속 개념을 적용하는 스프린트

재귀의 늪...

✅ JSON 구조가 재귀 함수를 사용할 수 있는 Tree 구조임을 이해할 수 있다. (stringifyJSON)✅ JSON.stringify 와 JSON.parse 가 seriealize, deserialize라는 것을 이해할 수 있다.✅ JSON.stringify 와

JSON.stringify는 객체를 JSON으로 변환하는 메소드

createTreeView 함수를 재귀(자기 자신을 계속 부르게 함)호출하여 최종 결과가 위와 같은 모습으로 나와야 했다테스트 케이스는 이렇게 존재한다 index.html에 가보면 15번째줄에 <ul id="root"></ul>가 있는 것을 볼 수 있다이 안

✅ 자료구조가 무엇인지 설명할 수 있다.✅ Stack, Queue, Tree, Graph 자료구조에 대해 이해할 수 있다.✅ 알고리즘 문제에서 Stack, Queue 자료구조를 배열로 대체하여 흉내 낼 수 있다.✅ 각 자료구조의 개념과 구조를 파악하고 목적을 이해할 수

큐(Queue)는 줄을 서서 기다리다, 대기행렬 이라는 뜻을 가지고 있다자료구조 Queue는 Stack과 반대되는 개념으로, 먼저 들어간 데이터(data)가 먼저 나오는 FIFO(First In First Out) 혹은 LILO(Last In Last Out)가 특징이

📝summary 자료구조의 그래프는 마치 거미줄처럼 여러 개의 점들이 선으로 이어져 있는 복잡한 네트워크망과 같은 모습을 가지고 있다 그래프는 여러개의 점들이 서로 복잡하게 연결되어 있는 관계를 표현한 자료구조입니다. 직접적인 관계가 있는 경우 두 점 사이를 이어

1. Tree 몇가지 제약이 있는 방향그래프의 일종이다 정점을 가리키는 간선이 하나밖에 없는 구조를 가지고 있다 하나의 루트에서 하위로 뻗어 나가는 구조이다 트리 용어 가장 위에 존재하는 정점을 루트 각 정점은 노드, 자식이 없는 정점을 리프노드라고 부른다 트리에

내장 메소드 라이브러리 구현 예전에는 배열 메소드가 브라우저에서 지원되지 않았다고 한다 이때 배열이나 객체를 다루기 위한 라이브러리 도구 모음집을 만들었는데 이번 스프린트에서는 배열, 객체를 다루는 라이브러리 Underbar를 구현하며 자바스크립트 내장 메소드가 어떻

✏️ Achievement Goals ✅ 어떤 경우에 중첩된 callback이 발생하는지 이해할 수 있다. 중첩된 callback의 단점, Promise의 장점을 이해할 수 있다. Promise 사용 패턴을 이해할 수 있다. resolve, reject의 의미와, th

js 언어를 브라우저 안에서 뿐만 아니라 다른 환경에서도 실행 할 수 있게 도와주는 언어다 js 실행창, 실행환경 이라고 생각할 수 있다 node js 를 설치하고 나면 브라우저를 켜지 않아도 js 문법 실행이 된다처음 코테를 준비할 때 왜 이렇게 쓰는지 모르고 썼던

브라우저 환경과는 다르게 Node.js 환경은 로컬 컴퓨터에서 직접 실행되므로, 파일을 불러오거나 저장하는 등의 액션이 가능합니다. fs(File System) module 사용법을 잘 익힌다면 "파일 열기", "파일 저장하기" 등을 직접 구현할 수 있습니다. Node

비동기 요청의 가장 대표적인 사례는 네트워크 요청이다 네트워크를 통해 이뤄지는 요청은 그 형태가 다양한데 그 중에서 URL로 요청하는 경우가 가장 많다 URL로 요청하는 걸 가능하게 해 주는 API가 바로 fetch API이다 !!포털사이트를 보면 자주 변하는 정보와,

Part 3는 Node.js 환경을 떠나, 브라우저에서 진행합니다. Node.js 환경에는 fetch API가 내장 모듈로 제공되지 않습니다.이번에는 fetch를 이용해 HTTP 요청을 보내고, 응답을 받는 연습을 합니다. Part 3는 Part 2와 비슷하게 구성되어

클라이언트, 서버 , http...

✅ 브라우저의 작동 원리를 이해할 수 있다.✅ 보이지 않는 곳의 통신을 이해할 수 있다.✅ URL과 URI의 차이를 이해할 수 있다.✅ IP 주소와 PORT에 대해 이해할 수 있다.✅ DNS와 IP 주소의 관계를 설명할 수 있다.✅ 크롬 브라우저의 에러 메시지를 통해

AJAX, SSR과 CSR

REST API란?

Postman

Achievement Goals React 데이터 흐름 React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다. 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다. State 끌어올리기의 개념을 이해할 수 있다. 상태 변경 함수가 정의된 컴포넌트와,

검색 조건을 변경하면, 해당 검색 조건에 맞는 항공권이 필터링되어 목록에 표시되게 만듭니다.Main.js Search.js FlightDataApi.js 세군데를 수정해주면 된다 FlightDataApi에서 기존 구현 대신, REST API를 호출하도록 바꿉니다

✅ Side effect가 어떤 의미인지 알 수 있다.✅ React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)✅ Side effect의 예를 들 수 있다.✅ Effect Hook을 이용해 비동기 호출 및

preflight라고도 불리는 OPTIONS 요청은 브라우저가 서버에게 지원하는 옵션들을 미리 요청하고 허가된 요청에 한해서 전송하기 위한 보안상의 목적이 있다.모든 경우에 발생하지 않고, 실제 요청에 비해 많은 부분을 차지하지 않지만 경우에 따라 수백 ms 응답 속도

node.js의 http 모듈을 이용하여 웹 서버를 만들어보자전의 스프린트에서 파일을 읽거나 쓰기 위해서 fs 모듈을 사용했고이번에 http 모듈은 HTTP 요청, 응답을 할 수 있다HTTP 트랜잭션 해부라는 공식문서를 보고 어떻게 과제를 풀어야 하는지 알 수 있다 모

http 모듈로 웹서버를 만들면 코드가 보기 좋지 않고 확장성이 떨어진다이것을 프레임워크로 해결한다 대표적인 것이 Express(익스프레스), koa(코아), Hapi(하피)가 있다 프레임 워크를 사용하면 코드 관리도 쉽고 편의성이 높아진다npm trends 홈페이지에

자동차 공장의 공정과 비슷한 미들웨어는 익스프레스의 핵심이다 요청과 응답의 중간에 위치해서 미들웨어라고 불린다요청과 응답을 조작해 기능을 추가하기도 하고 나쁜 요청을 걸러내기도 한다 (컨베이어 벨트 위에 올라가 있는 request에 필요한 기능을 더하거나, 문제가 발견

이번 스프린트는 States Airline 서버를 구현합니다. States Airline Client Application과 이번 스프린트에서 구현한 서버를 연결합니다. 이 서버는 Express 프레임워크를 이용해 만들고, 로컬호스트와 연결합니다. States Airl

✅ 컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.✅ 컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발페이지가 완성된 다음 다른 페이지에 적용

✏️Achievement Goals ✅ 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다. ✅ 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다. ✅ DOM Reference를 활용하기 위한 useR

Modal, Toggle, Tab, Tag 컴포넌트를 구현합니다.

✅ useState 를 이용해 상태를 사용하는 방법을 학습합니다.✅ 장바구니 담기 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현하세요.✅ 장바구니 내 삭제 버튼을 이용해 장바구니의 상품이 제거되도록 구현하세요.✅ 장바구니의 상품 갯수의 변동이 생길 때마다, 상단

✅ 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.✅ Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.✅ Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해

Redux로 state를 저장하고 사용하는 방법을 배웠고 이제 데이터 수정 방법을 배워야 한다redux사용 state 데이터 수정 방법1\. reducer 함수를 만들고 그곳에 데이터 수정하는 방법을 정의해놓고2\. 원하는 곳에서 dispatch() 라는 함수를 써서

redux store에 있던 state를 꺼내쓰려면함수를 작성해서 파일 밑에 첨부하면 됐다 하지만 코드가 길기 때문에 함수 대신useSelector Hook을 쓰면 조금 더 쉽게 state를 가져 올 수 있다위와 똑같은 기능을 하는 useSelector Hook으로 바

Cmarket Shopping App은 Create React App으로 만든 리액트 앱에 리덕스를 붙인 구조다아이템 리스트 페이지(ItemListContainer)와 장바구니 페이지(ShoppingCart) 총 두 페이지로 간단하게 만들어져 있고Store의 initi

코드스테이츠에서는 과제제출 확인 명령어를 아래처럼 알려준다이렇게 터미널에 입력하면 과제제출을 만약 두세번 했을 때의그 목록까지 전부 출력되어서 보기가 힘들었다코드스테이츠 과정을 듣고 난 선배님이 중복을 제거해서 출력되는 명령어를 만들어 놓으셔서어떻게 작동되는 건지 원리

진짜 열심히 했다고 생각했다 물론 며칠 정도 논 적은 있지만... 그런데ha시험을 끝내고 홀가분한 마음으로 강아지 산책을 나갔는데 날아온 기수이동 메일 진짜진짜 이해할 수가 없어서 산책하다가 집에 뛰어 들어와서 내가 뭘 제출 안한게 있나 다시 확인해봤고 필수적으로 제출