기록하고 싶은 것들

오늘은 express를 배운 내용을 바탕으로 서버를 구성해보는 과제를 진행하였다. router로 경로를 구분하여서, 해당하는 url에 맞는 응답을 구현하는 과제였고, 주로 query와 param을 사용하여, 데이터를 필터링하는 예제를 구현하였다. 라우터로 url을 구분하여서 그에 맞는 함수들을 불러오게 한다. req.query를 이용하여 쿼리문 안의 해당 값들을 받아오고, 이와 동일한 데이터를 조회하는 코드이다. req.params를 이용하여 파라미터 값들을 받아오고, 이와 동일한 데이터를 조회하는 코드이다 간단하게 백엔드 서버의 구현방식을 알아볼 수 있는 시간이었다. 클라이언트에서 일일히 값을 조정해주면서 적용했던 것들을 서버를 통해서 바로 받아올 수 있다는 것이 신기하였고, 서버 구현에 대해 알게되었..

오늘은 express에 대해서 배우고, 관련 실습을 진행하였다. express란, NodeJS를 사용하여 서버를 개발하고자 하는 개발자들을 위해 서버를 쉽게 구성할 수 있게 만든 프레임워크이다. npm install express 명령어를 통해 설치 후, https://expressjs.com/ko/starter/hello-world.html Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. 이 앱은 하나의 파일로 된 앱이며 Express 생성기를 통해 얻게 되는 앱과는 같지 않습니다. (이 예제 expressjs.com 간단한 웹 서버를 만들어보았다. const express = require(..

오늘은 CORS,SOP에 대해서 공부한 뒤 node.js를 통해서 간단하게 서버를 구현해 보는 실습을 하였다. api와 연결하거나, 서버와의 연결을 할 때 종종 아래 이미지를 본 적이 있을 것이다. 이 에러는 CORS policy만을 보고 CORS라는 것 때문에 발생하는 것 같지만, SOP(Same-Origin Policy) 때문에 발생한다. 그렇다면 SOP와 CORS는 무엇일까? SOP(Same-Origin Policy)는 동일 출처 정책을 뜻한다. 여기서 출처란 (프로토콜+호스트+포트)이며, 같은 출처의 리소스끼리만 공유가 가능하다는 뜻이다. 하지만, 다른 출처의 리소스를 사용할 때는 CORS(Cross-Origin Resource Sharing)를 사용한다. CORS는 추가적인 HTTP 헤더를 적용..

오늘은 Effect Hook에 대해서 공부했다. useEffect 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다, side effect란? 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 존재 ex) side effect 함수 예시 - fetch api를 사용한 함수 → API 응답이 실패할 가능성도 있고, 입력따라서 출력이 달라질 가능성이 있음 - Math.random() → 매번 동일한 값을 기대할 수 없기 때문이다 useEffect의 첫 번째 인자는 함수, 함수 안에 side effect를 실행 컴포넌트가 렌더링될 때 Effect Hook이 실행 두 번째 인자는 조건의 의미를 담은 배열 조건은 어떤 값의 변경이 일어날 때를 의미..

오늘은 React 데이터의 흐름에 대해서 배웠다. React는 컴포넌트를 조립하며 상향식으로 앱을 만듣는 것이 선호되며, 하나의 컴포넌트는 단일 책임의 원칙을 다른다. 컴포넌트들은 트리구조로 나타낼 수 있고, props를 통해 데이터를 전달하며 단방향 데이터 흐름 원칙을 가진다. 하지만, 하위 컴포넌트에서 부모 state를 변경할 경우도 생기는데, 역방향 데이터 흐름을 방지하기 위해 상위 컴포넌트의 상태 변경 함수를 하위 컴포넌트가 전달받을 수 있도록 상태를 끌어올려 관리한다. 상위 컴포넌트의 search라는 아래의 함수를 하위컴포넌트에 onSearch라는 porps로 전달하였다. 전달받은 하위 컴포넌트에서는 검색된 값과 onSearch를 이용하여 search를 재설정해줄 수 있었다. 상태 끌어올리기를 ..

오늘은 Post man을 통해서 HTTP API 테스트를 해보았다. https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweathermap.org 날씨를 알려주는 o..

오늘은 REST API디자인에 대하여 공부하였다. REST(Representational State Transfer) API는 웹에서 사용되는 데이터나 리소스를 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청, 응답을 정의하는 방식이다. 직접 디자인하여 제작하는 것이기 때문에 알아보기 쉽게 잘 작성하는게 중요하다. REST API 디자인을 위한 4단계 모델이 있는데, 3단계까지 존재하지만 통상적으로 2단계까지만 적용한다. 0단계는 단순히 HTTP 프로토콜을 사용으로 만족하며, 요청의 endpoint에 appointment를 사용한다. 1단계는 웹에서 사용되는 모든 데이터나 리소스를 HTTP URI로 표현하는 것이다. 따라서 endpoint를 개별 리소스에 맞게 사용해야한다. 2단계는 CRUD에..

오늘은 HTTP/네트워크 기초에 대해서 공부했다. 클라이언트-서버-DB로 이루어진 3티어 아키텍쳐에 대해서 배웠고, 그 사이에서 일어나는 클라이언트-서버의 통신에 대하여 알게되었다. 클라이언트는 서버에 리소스를 요청을 하고, 서버는 클라언트에 리소스를 응답, DB는 리소스를 별도로 저장하는 역할을 한다. 이러한 웹 애플리케이션 아키텍쳐는 API라는 서버가 제공하는 인터페이스를 통해서 HTTP 라는 통신규약을 이용하여 리소스를 활용한다. 이 과정은 URL, URI 등의 주소 접근을 통해서 이루어진다. HTTP Messages는 클라이언트와 서버 사이의 데이터 교환방식이며, 요청과 응답으로 이루어져 있다. 이 메시지들은 start line, HTTP headers, empty line, body를 포함하며 ..

오늘은 어제 진행한 과제에, select 태그를 사용했을 때 나타난, 오류를 수정하였고 추가적으로 delete와 update기능을 추가하였다. 사용자리스트를 받아, 목록으로 볼 수 있도록 를 이용하여 사용자의 이름 목록을 만들었다. 그 과정에서, 현재 사용자가 맞다면 selceted를 주어, 기본적으로 선택되게 만들고 싶었다. 하지만 아래와 같은 경고 문구가 떴다. 관련 문제에 대해서 검색을 통해 찾아보니, react에서는 selceted보다 vlaue 또는 defaultValue를 통하여 초기 값을 세팅해 줘야한다는 것을 알게 되었다. 관련 내용을 적용해서, 다시 코드를 작성하였고, 오류가 사라진 것을 볼 수 있었다. 추가적으로 진행한 delete기능은 선택된 tweet의 정보를 받아서, filter를..

오늘은 React의 Props와 State를 배웠다. props는 외부로부터 전달받은 값, 부모컴포넌트로부터 전달받은 값을 의미한다. State는 컴포넌트 내에서 변할 수 있는 값이며, State는 React State로 다루어야 한다, useState를 호출하여, state변수와 변수를 갱신할 함수를 생성한 뒤, 갱신하는 함수를 호출하여, state값을 조작해야하고 강제로 변경하면 안 된다. 그 밖에도, onClick, onChange를 사용하여 이벤트를 처리하는 방법등을 배웠다. 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라, 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 전달해야한다 why? 함수를 바로 호출하면 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결..