기록하고 싶은 것들

오늘은 기존에 만들었던 agrostates와 서버를 연결하는 작업을 하였다. 분명 시간을 들여가면서 했는데, 못했다....! 원래는 react로 리팩토링까지 진행하려했는데, 시간이 부족해서 진행하지 못했다. 그래서 구현한 부분과 어떤 부분에서 어려움을 겪었는지 기록하려고 한다. 우선 아래 코드와 같이, CRUD에 요청에 대한 응답을 만들어주었다. postman을 이용하여, 잘 작동하는 것을 확인하며 구현하였다. 클라이언트와 서버의 연결까지도 원할하였다. dataAPI에 요청에 대한 응답을 받아오는 함수를 작성하고, 그 함수를 이용하여, 받아온 결과를 출력했다. 정보를 잘 받는 것을 보아 클라이언트-서버 연결이 잘 이루어지고 있는 것을 볼 수 있었다. 문제는 클라이언트단 이었다. 기존의 코드에서는 아래와 ..

오늘은 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를..