TIL

[Day 40] 2022-0818

🐈오늘 공부한 것 ✔️기술면접 대비 오늘 과정에서 제공된 기술 면접 예상 질문에 대한 답변을 정리해 보았다. 질문 1 : Promise의 기능과 필요한 이유에 대해서 설명해 보세요. 더보기 프로미스는 비동기 요청의 결과값을 담을 수 있는 객체입니다. 프로미스 객체를 사용하기 이전에는 콜백함수를 사용해서 비동기 요청의 순서를 제어할 수 있었는데, 콜백함수가 이어지면 가독성이 떨어지고 유지보수가 힘들다는 단점이 있습니다. 프로미스 객체를 사용하면 then 메서드를 체이닝하여 콜백함수를 중첩시키지 않고도 실행 순서를 제어할 수 있다는 장점이 있습니다. 질문 2 : 순수 함수란 무엇인가요? 불변성/ 사이드 이펙트와 연관지어 설명해 주세요. 더보기 순수함수란 입력된 데이터에 대해서 동일한 결과를 보장하는 함수를 ..

[Day 39] 2022-0817

🐈오늘 공부한 것 ✔️express.js 미들웨어 복습 https://friedegg556.tistory.com/199 미들웨어에 대해 좀 더 이해해 보기 위해서 별도의 글을 작성해 정리해 보았다. (원래는 라우팅까지 정리하려고 했는데, 분량도 많고 시간도 오래걸려서 중간에 끊었다. 내일 추가로 정리할 예정) 미들웨어는 요청과 응답 사이클 사이에서 중간중간 정해진 목적을 수행하는 함수를 의미한다. 크게 두 가지 방법으로 사용할 수 있는데, 하나는 정해진 메서드와 정해진 경로에 대해서만 수행하하도록 하는 방법, 또 하나는 app.use() 이렇게 사용하여 모든 요청에 대해 수행하도록 할 수 있다. 모든 프리플라이트 요청에 대해 cors 설정을 해주는 cors() 함수도 미들웨어이고, request의 bod..

[Day 38] 2022-0816

🐈오늘 공부한 것 ✔️express.js 기본 내용 복습 + 과제 https://friedegg556.tistory.com/197 헷갈렸던 express.js 기본 개념과 간단한 예제를 복습했다. express.js 는 node.js http 모듈을 기반으로 한 프레임워크로 웹서버를 구축하는데 필요한 여러 기능이 포함되어있다. http 모듈에서는 req.body에 접근하기 위해 직접 파싱을 했지만, express 에서는 미들웨어라는 것을 사용해서 과정을 간소화시킬 수 있다. 미들웨어의 개념에 대해서 잘 이해가 되지 않았었는데, 오늘 라이브세션을 통해 조금 보강할 수 있었다. app이라는 express 인스턴스가 있을 때, app.use([미들웨어 함수]) 를 사용하면 각 요청에 대해서 해당 미들웨어를 실..

[Day 37] 2022-0812

🐈오늘 공부한 것 ✔️CORS 복습 서버와 브라우저의 origin이 다를 경우 브라우저의 리소스 요청을 처리할 수 있는 매커니즘 (권한 부여). SOP 정책 때문에 서로 다른 origin 끼리는 리소스를 공유할 수 없는데, api 요청 등 필요한 상황에서는 리소스의 공유가 이루어질 수 있도록 권한을 부여할 수 있다. CORS 설정은 응답 헤더에 Access-Control-Allow-Origin(아직도 헷갈린다;) 항목에 허용할 origin을 포함시켜 응답을 해주면 된다. 만약 이 항목에 대한 값이 * 이라면, 이는 전체 origin에 대한 CORS 설정을 의미한다! 참고로 origin이란 스키마(프로토콜), host, port 까지를 의미하며, 엔드포인트는 포함되지 않는다. 또 CORS 와 SOP 는 어..

[Day 36] 2022-0811

🐈오늘 공부한 것 ✔️CORS 와 SOP CORS 란 Cross-Origin Resource Sharing 의 약자로, "교차 출처 리소스 공유" 를 의미한다. 웹 사이트간 (서로 다른 출처의) 리소스를 교환하는 것을 방지하는 SOP Same-Origin Policy 라는 것이 있는데, 서로 리소스를 공유하기 위한 권한이 CORS 라고 할 수 있다. 외부 API 를 이용하는 것 또한 다른 출처끼리 리소스를 공유하는 것이기 때문에 CORS 로 권한을 주어야 하는데, HTTP 헤더에 Access-Control-Allow-Origin을 추가해 다른 출처의 선택한 리소스에 접근할 수 있도록 권한을 부여하고, 이런 권한이 있다는 것을 브라우저에 알려주는 역할을 한다. CORS 의 동작 방식으로는 크게 1. 프리플..

[Day 35] 2022-0810

🐈오늘 공부한 것 ✔️styled-component 컴포넌트 주도 개발이 등장하기 이전에 HTML CSS JS 로 관심사를 분리하는게 대세였다면, 요즘은 컴포넌트 위주로 기능과 스타일까지도 한번에 개발하는 방법도 등장했다. 리액트에서 JSX 문법을 사용하면 기능과 화면을 한번에 개발할 수 있지만 CSS는 별도로 분리해야 하는데, styled-component 라이브러리를 사용하면 CSS IN JS 즉 자바스크립트(리액트) 코드 안에서 CSS 스타일이 적용된 엘리먼트나 컴포넌트를 만들어서 사용할 수 있다. 오늘 벨로퍼트님의 투두리스트 만들기 예제를 연습하면서 처음 보게된 개념인데, 처음에는 코드가 지저분하다고 생각해서 CSS 로 분리를 했다가 state에 따라서 다른 스타일을 보여줄 수 있는 부분이 있어서..

[Day 34] 2022-0809

🐈오늘 공부한 것 ✔️리액트 : 데이터 흐름과 state 끌어올리기 리액트는 위에서 아래로 흐르는 단방향 데어트 흐름을 가지고 있다. 상위 컴포넌트에서 하위 컴포넌트로 props를 통헤 데이터를 전달할 수는 있지만, 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달할 수는 없다. 만약 하나의 state에 의해서 여러 컴포넌트가 영향을 받는다면, 영향을 받는 해당 컴포넌트의 공통 컴포넌트에 state를 위치시켜야 한다. 그리고 props로 state를 변경할 수 있는 setter 함수를 전달하여, 하위 컴포넌트에서 실행시킨다. 이를 통해 하위 컴포넌트에서 상위 컴포넌트에 위치한 state의 상태를 변경할 수 있고, 이를 state 상태 끌어올리기라고 표현한다. 이 방법을 사용하면 리액트의 단방향 데이터 흐름..

[Day 33] 2022-0808

🐈오늘 공부한 것 ✔️Postman 활용하여 OPEN API 테스트하기 https://friedegg556.tistory.com/189 포스트맨은 다양한 메서드로 API 호출을 테스트 해볼 수 있는 GUI 플랫폼이다. weather API 라는 OPEN API 에서 날씨 데이터를 가져오는 GET 요청 연습을 했다. API URL 을 입력하면 자동으로 파라미터를 전달할 수 있도록 셋팅되는데, 파라미터는 key 와 value로 구분되어 있고, 해당하는 value 값과 발급받은 API Key 를 함께 전달할 수 있다. Post 요청에서는 body에 raw 데이터로 JSON 데이터를 직접 입력하여 요청할 수 있다. ✔️UseEffect로 fetch API 호출하기 https://friedegg556.tistor..

[Day 32] 2022-0805

오늘 배운 것 RESTful API 개념정리 OPEN API 와 API Key [WEB] REST API를 알아보자! REST API REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. (출처 : 위키피디아 REST) 위키피디아에 REST에 대해 위와 같이 friedegg556.tistory.com 새롭게 알게 된 것 REST API 가 OPEN API 처럼 접근해서 사용하는 소프트웨어인줄 알았는데, 사용하기 좋은 HTTP API 를 만들기 위한 아키텍처 - 원칙? 같은 것이었다. REST 라는 것을 많이 들어보긴 했지만 어떤 것인지 크게 관심을 가지지 않았었다. 토이 프로젝트를 했을때도 REST..

[Day 31] 2022-0804

오늘 배운 것 클라이언트 - 서버 아키텍처의 HTTP 통신에 대한 내용 정리 클라이언트 사이드 렌더링 CSR 과 서버 사이드 렌더링 SSR 비교 [NETWORK] 웹은 어떤 원리로 작동할까? : HTTP 간단 정리 웹 컨텐츠를 이용할 때 어떤 일이 벌어질까. 웹 브라우저를 통해 웹 컨텐츠를 볼 때 다음과 같은 일이 일어난다. 웹 브라우저 (클라이언트)가 웹 서버에 컨텐츠를 요청하고, 요청을 받은 서버는 friedegg556.tistory.com 새롭게 알게 된 것 HTTP 프로토콜의 개괄적인 내용을 공부하고 정리할 수 있었다. 클라이언트 측에서 데이터를 요청할 때 HTTP 리퀘스트를, 해당 리퀘스트를 받아 데이터 혹은 결과를 담은 리스폰스를 보내준다는 것은 알고 있었다. 추가적으로 HTTP 메시지의 구조..