코딩일기

2023-06-02(금) const http = require('http'); // http 모듈 const PORT = 4999; // 포트번호 const ip = 'localhost'; // 로컬 호스트 const server = http.createServer((request, response) => { if (request.method === 'OPTIONS') { // 만약 리퀘스트 메소드가 OPTIONS라면 해당 코드를 실행 response.writeHead(200, defaultCorsHeader); // 200 상태 코드와 CORS 헤더로 응답 response.end(); return; } let body = []; // 요청의 본문 데이터를 저장할 배열 if (request.method ..

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

Open API - 정부에서 제공하는 공공데이터가 있습니다. 이러한 공공데이터에 쉽게 접근할 수 있도록 정부는 Open API의 형태로 공공데이터를 제공해주고 있습니다. Open API는 어떤것일까요? -> 이 API에는 'OPEN'이라는 키워드가 붙어있습니다. 글자 그대로 누구에게나 열려있는, 사용가능한 API라는 것입니다. 그러나 "무제한"으로 사용가능한 API는 아닙니다. 각각의 API마다 사용 수칙이 있고, 그 수칙에 따라 제한사항등이 있죠. API는 클라이언트가 서버에게 요청을 할때 알맞은 규칙이 있기에 그것을 사용자에게 쉽게 그 규칙을 알려주기 위한 메뉴판 같은 존재입니다. 즉 Open API는 해당 정보를 잘 사용할 수 있는 규칙을 알려주는데 이러한 규칙들을 누구나 사용할 수 있게 열려있는 ..

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의 개념을 이해할 수 있다. 우리가 인터넷 쇼핑몰 앱을 이용할 때 만약 인터넷 연결이 되어있지 않은 상태로 실행을 시키면 어떻게 될까요? = 정답은 정삭적으로 동작하지 않는다. 입니다 이유는 상품 정보를 인터넷 어딘가에 존재하는 서버로부터 받아와야 하기 때문입니다. 보통 어딘가 접속하려고 하는 데 접속이 안되는 경우, 사용이 불가능한 경우를 "서버가 죽었다" 라고 표현합니다. 서버가 무엇일까요? -> 서..