코딩일기

2023-05-31(수) Effect Hook 학습 목표 Side effect가 어떤 의미인지 알 수 있다. React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. Side effect의 예를 들 수 있다. Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다. Effect Hook에서의 dependency array 사용법을 이해할 수 있다. 컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다. Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 합니다. R..

2023-05-30(화) React 데이터 흐름 개요 학습 목표 React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다. 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다. State 끌어올리기의 개념을 이해할 수 있다. 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다. React의 개발 방삭의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징입니다. 일단 해당 이미지와 같이 프로토타입을 전달받은 후에 먼저 컴포넌트를 찾아봅시다. 다음과 같이 컴포넌트를 찾아낸 후, 먼저 컴포넌트를 만들고, 다시 페이지를 조립해 나갑니다. 검색창 = 홈 = 트윗입력폼 = 트윗게시글 = 이렇게 상향식(bottom-up)으로 ..

2023-05-26(금) Postman - 웹 개발에서 사용하는 대표적인 클라이언트는 브라우저입니다. 브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹페이지를 받아오는 GET요청에 사용합니다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을 보냅니다. 테스트를 위해 GET요청이 아닌 다른 요청을 보내려면, 개발자 도구 콘솔창에서 Web API fetch를 사용해야 합니다. 학습 목표 Postman을 사용하는 방법에 대해 이해할 수 있다. Postman으로 API를 테스트할 수 있다. Postman으로 날씨를 받아올 수 있다. HTTP API 테스트 도구 (CLI) curl (대부분의 리눅스 환경에 내장되어 있습니다.) wuzz HT..

2023-05-25(목) REST API 개요 웹 애플리케이션에서는 HTTP 메서드를 이용해 서버와 통신합니다. GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하고, DELETE로 저장된 글이나 데이터를 삭제할 수 있습니다. 이처럼 클라이언트와 서버가 HTTP 통신을 할 때는 어떤 요청을 보내고 받느냐에 따라 메서드의 사용이 달라집니다. 이런 사용은 아무런 규칙 없이 이루어지는 것이 아닙니다. 요청과 응답을 할 때, '제대로 보내고 받을 수 있는' 일종의 규약이 존재합니다. 이번 챕터에서는 REST API를 학습하고, 이를 통해 어떻게 요청과 응답을 하는 것이 좋은지 알아봅시다. 학습 목표 REST API에 대해 이해할 수 있다. REST 성숙도 모델에 대해 이해할 ..

2023-05-24(수) Chapter 3. HTTP = HTTP는 HyperText Transfer Protocol의 줄임말로, HTML과 같은 문서를 전송하기 위한 프로토콜입니다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었습니다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP Messages 양식에 맞춰 요청을 보내면, 서버도 HTTP Messages 양식에 맞춰 응답합니다. 학습 목표 HTTP의 동작 방식을 이해할 수 있다. HTTP Messages의 구조를 설명할 수 있다. HTTP Requests와 Responses를 구분할 수 있다. HTTP의 응답 메시지를 찾아볼 수 있다. HTTP Messages HTTP Messages는 클라이언트와 서버 사이에서 데이터가 교환되..

2023-05-24(수) Chapter1. 웹 애플리케이션 아키텍쳐 = HTTP에서 사용하는 클라이언트 - 서버 아키텍쳐와 클라이언트와 서버가 통신하는 방법인 API에 대해 학습합니다. 학습 목표 클라이언트-서버 아키텍처를 이해할 수 있다. HTTP를 이용한 클라이언트-서버 통신을 이해할 수 있다. API의 개념을 이해할 수 있다. 우리가 인터넷 쇼핑몰 앱을 이용할 때 만약 인터넷 연결이 되어있지 않은 상태로 실행을 시키면 어떻게 될까요? = 정답은 정삭적으로 동작하지 않는다. 입니다 이유는 상품 정보를 인터넷 어딘가에 존재하는 서버로부터 받아와야 하기 때문입니다. 보통 어딘가 접속하려고 하는 데 접속이 안되는 경우, 사용이 불가능한 경우를 "서버가 죽었다" 라고 표현합니다. 서버가 무엇일까요? -> 서..

2023-05-22(월) React State && Props State = 살면서 변할 수 있는 값 = 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 = 내부에서 변화하는 값 Props = 변하지 않는 외부로부터 전달받은 값 = 컴포넌트의 속성을 의미합니다. = 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 = 객체 형태이고 읽기 전용(함부로 변경될 수 없는)이다 How to use props Props 사용하는 방법 1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다. 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은 props를 렌더링한다. unction Parent() { return ( I'm the parent ); }; function Child() {..

2023-05-18(목) 리액트란? = 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리입니다. 리액트의 3가지 특징 = 리액트는 선언형이고, 컴포넌트 기반이고, 다양한 곳에서 활용할 수 있다는 특징이 있습니다. 선언형(Declarative) = 명시적이다./ 리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다. 개발자가 코드만 보고도 실제 웹 어플에 모습을 한눈에 알아볼 수 있다. 컴포넌트 기반(Component-Based) = 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발합니다. 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에,..