기록하고 싶은 것들

1. 목표 상기하기 저는 12월 15일 지금으로 부터 2달전 쯤 목표를 세웠었습니다. 연봉 4000이상 (지난 날의 나 반성합니다) 웰컴키트 증정 복지 포인트 제공 서울 내 or 판교 위치 자유로운 분위기의 it회사 목표를 상기하기 위한 질문 Q. 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가? 학습을 통해 부족한 JS 지식을 채우고, 이를 활용해 배포 가능한 웹서비스를 직접 제작한 뒤 제작한 웹서비스를 포트폴리오 삼아서 목표한 회사에 입사하는것, 다양한 문제를 겪어보고, 문제 해결 능력을 기르는 것 2. Keep, Problem 작성하기 Keep(만족스러운 부분) Q . 목표를 달성하기 위해 시도했던 것 중 가장 효과적이었던 노력은 무엇인지? 꾸준히, TIL을 기록하고, 오류를 기록하려했던 시..

Same-Origin Policy와 CORS에 대해서 설명해주세요. SOP(Same-Origin Policy)는 동일 출처 원칙을 뜻합니다, 여기서 출처는 프로토콜, 호스트, 포트가 동일한 것을 의미하고, 다른 출처와의 리소스의 상호작용을 제한하고, 동일한 출처에서는 리소스에 접근이 가능한 정책입니다. CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유를 뜻합니다. 추가적인 HTTP 헤더를 통해 웹어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있게 브라우저에 알려주는 체제를 의미합니다. 브라우저는 기본적으로 SOP에 의해 다른 출처의 리소스 접근을 막지만, CORS를 사용 시 접근 권한을 얻을 수 있습니다. 아래 에러 예시도 CORS 때문이 아니라, SOP때문에..

오늘은 기존에 만들었던 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이 실행 두 번째 인자는 조건의 의미를 담은 배열 조건은 어떤 값의 변경이 일어날 때를 의미..

당장 어제까지 작업하던 VS 터미널에서 npm을 인식하지 못한다는 오류가 발생했다. npm을 인식하지 못하는 상황이기 때문에, npm install도 적용되지 않는 상황이었다. 따라서 npm 자체를 새로 설치해야된다고 판단하였고, 관련 오류들을 찾아보다가, brew install node를 통해 다시 설치를 하였다. 설치 후에 npm을 실행해보니, 잘 작동하였다. 전에도 같은 문제가 발생하였지만, 해결방법을 기록하지 않아서 시간이 오래 걸렸다. 같은 실수를 반복하지 않기위해서 오류 상황을 적어본다

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