ALL

[Day 40] 2022-0818

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

[회고] 코드스테이츠 FE 섹션 2 회고

✨나의 목표 🔥 내년 상반기, 많이 경험하고 배울 수 있는 좋은 회사의 프론트엔드 인턴으로 커리어 시작하기. 🔥 최종적으로 해외 Remote Job 을 얻어 디지털 노마드로 살기. - 기존 목표였던 '기본기 있는 개발자 되기' 보다 더 구체적인 목표로 설정했다. ✨지난 TRY 점검 1. 한 번에 한 가지 일 집중하기 노력 TRY를 작성하고 의식적으로 집중도를 높이기 위해 노력했다. 하루에 공부하는 종목을 최소화하여 계획을 짰고, 실천했다. 다만 열품타 타이머를 사용하지 않은 것이 아쉽다. 지금부터는 타이머로 시간을 체크하며 수치화 할 수 있도록 해야겠다. 2. 시간 관리 섹션 1과 비교했을 때 큰 성과는 없는 것 같다. 복습 이외에 스터디나 다른 공부를 하기로 정해놓은 시간은 있었지만, 갑자기 다른 하고..

[Day 39] 2022-0817

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

[Node.js / express] 미들웨어를 알아보자!

[Node.js / express] express.js 기본 내용 정리 express란 무엇인가? express는 Node.js 환경에서 웹서버 혹은 API 서버를 구축하기 위해서 사용되는 프레임워크이다. Node.js 내장 모듈인 http 모듈을 기반으로 만들어졌으며, 웹서버를 구축하기 위해 필 friedegg556.tistory.com 이전 글에서 express 개요와 간단한 웹서버 구축에 대해 알아보았다. 이번 글에서는 express의 핵심 개념인 미들웨어에 대해서 정리해보았다. 미들웨어란 무엇인가? 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트(res) 그리고 애플리케이션 요청-응답 주기 중 그 다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적..

[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([미들웨어 함수]) 를 사용하면 각 요청에 대해서 해당 미들웨어를 실..

[Node.js / express] express.js 기본 내용 정리

express란 무엇인가? express는 Node.js 환경에서 웹서버 혹은 API 서버를 구축하기 위해서 사용되는 프레임워크이다. Node.js 내장 모듈인 http 모듈을 기반으로 만들어졌으며, 웹서버를 구축하기 위해 필요한 다양한 함수와 서브 모듈을 포함하고 있다. (여기서 웹서버란 http 서버를 의미한다.) http 모듈이 독립적인 모듈이기 때문에 server, request, response 객체를 사용해 직접 이벤트를 달아 요청을 받고 응답하도록 코드를 짜야한다면, Express는 모든 것이 포함된 '프레임워크'이기 때문에, 이런 과정을 간소화 시켜주는 편리한 기능들을 가지고 있다. express는 어떻게 시작하는가? 먼저 express 프레임워크 사용을 위한 기본 명령어를 입력하여 초기 ..

[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 상태 끌어올리기라고 표현한다. 이 방법을 사용하면 리액트의 단방향 데이터 흐름..