Chapter1. 기술 면접 준비

Promise.all()의 기능과 필요한 이유에 대해서 설명해주세요.

• Promise.all()은 순서가 보장될 필요가 없는 비동기 작업의 병렬 처리를 수행합니다. 즉, 한번에 여러개의 비동기 작업을 실행하고 모든 작업이 완료되는 순간 결과를 취합해 리턴합니다.

• Promise.all()는 여러개의 API 요청작업이 모두 완료된 뒤, 다음 코드가 실행돼야 하는 경우에 필요합니다.

• 만약 실행 순서가 중요한 경우라면 async-await 사용해야합니다.

• Promise.all()은 병렬로 실행한 함수 중 어느 하나라도 실패하면 Error로 처리됩니다.

  • 따라서 Promise.all()은 다음 코드를 계속 실행하기 전에 서로 연관된 비동기 작업 여러개가 모두 이행되어야 함을 보장해야하는 경우 사용해야 합니다.

• 성공 여부가 서로 관련이 없는 비동기 작업들을 병렬로 수행할 때는 Promise.allSettled을 사용할 수 있습니다.

  • allSettled()은 성공, 실패의 여부와 관계없이 각 비동기 호출의 응답결과를 배열에 담아 리턴합니다.

---

병렬적(동시성,병렬성)
-> 동시에 작동한다는 말을 표현하고 싶었습니다.

답변에 예시가 있으면 좀 더 풍부해지고 답변 들을때 이해하기 쉽다.

참고자료
promise.all / promise.allSettled 차이
Promise.all() - JavaScript | MDN
promise.all vs promise.allSettled
언제Promise.all을 사용해야할까
수완님

---

JavaScript

Promise.all()

Promise.all()은 여러 비동기 작업을 동시에 처리하고 순서를 유지하기 위해서 사용합니다. Promise를 요소들로 하는 배열은 전달인자로 받아 이후에 then으로 resolved된 비동기 작업을 처리할 수 있습니다.

공개 API를 쓰는 경우 필요한데, 공개 API에서 한번에 100개의 아이템만 조회할 수 있는 경우 일반적으로 Promise나 async/await을 사용하면 순차적으로 100개의 비동기 작업의 실행과 리턴을 기다려야만 합니다. 동기적인 코드 실행과 실행 시간에 별 차이가 없습니다. 하지만 Promise.all()을 쓰면 컴퓨터와 Node.js가 가능한 만큼 여러 쓰레드를 사용하여 작업할 수 있어서 코드 실행 시간을 단축할 수 있습니다.

순수함수

순수함수는 함수형 프로그래밍에서 자주 사용되는 개념으로, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 또한, 사이드 이펙트가 없어야 합니다. 사이드 이펙트는 쉽게 말해서 외부 변수를 참조하거나, 변경하는 모든 종류의 코드를 의미합니다. 즉, 순수함수는 함수 body 내에 있는 코드만 점검하면 되기 때문에 간결하게 코드를 작성하고 사고하는데 도움이 됩니다.

자바스크립트에서 순수함수를 제작하기 위해서 데이터의 불변성을 유지하는 것이 중요합니다. 함수의 전달인자로 참조 자료형이 전달되는 경우, 해당 객체 자체를 바꿔서 사이드 이펙트를 만들 수 있고, 이는 해당 데이터의 불변성을 손상시킬 수 있습니다. 그래서 배열의 불변성을 보장하는 메서드인 map, filter, reduce 등이 각광을 받게 되었습니다.

→ 사이드 이펙트 / 외부 영향을 받지 않아야 한다. / 부(수)작용

React

states & props

React에서 state는 변할 수 있는 데이터를 의미합니다. 애플리케이션의 작동 구조를 봤을 때, 변할 수 있는 값이면 React의 상태로 적절합니다. 예를 들어서, input의 value는 사용자가 값을 입력하면 변경될 수 있는 값이기 때문에 state로 적절합니다. 또한, Social media에서 게시글 역시 다른 유저가 추가로 게시글을 작성하고 난 뒤에는 게시글의 수가 변할 수 있기 때문에 개시글 배열도 state로 적절합니다.

다만, input의 value는 하나의 컴포넌트에만 영향을 주고, 게시글의 배열은 여러 컴포넌트에 영향을 줄 수 있는 차이점이 있습니다. 다른 컴포넌트에 영향을 미치는 정도에 따라 전역 상태와 지역 상태로 구분할 수 있습니다.

props는 외부에서 전달받아 컴포넌트 내에서는 변할 수 없는 값입니다. 그래서 React에서는 props를 중간에 변경하는 것을 권장하지 않고, lifting state up(상태 끌어올리기)를 통해 상태를 변경시키고, 변경된 상태값을 props로 내려주어 side effect를 최소화시킵니다.

React Key

key 속성은 같은 컴포넌트를 여럿 렌더링할 때, 다른 컴포넌트임을 구분하기 위해서 사용하는 속성입니다. 예를 들어, 100개의 게시글 중 하나의 게시글만 변경되었을 때, 해당 게시글만 새롭게 재렌더링하고, 다른 게시글은 그대로 둘 수 있습니다. 이렇게 key 속성을 활용하면 React가 DOM을 직접 제어하는 것 보다 더 빠르게 렌더링을 할 수 있습니다.

useEffect dependency array

useEffect는 React Function Component에서 라이프사이클을 대신할 수 있는 React Hook입니다.

프론트엔드 개발에서는 불가피하게 side effect가 발생합니다. 대표적으로 ajax 요청, DOM reference 참조 및 변경등이 있습니다. 이런 작업을 처리할 때는 React에서 제공하는 useEffect의 callback 함수 내에서 처리해야 합니다. 그렇지 않으면 리액트가 컴포넌트를 렌더링하기 전에 side effect가 생기면, 해당 side effect가 화면에 바로 적용되지 않습니다.

useEffect에 dependency array를 주지 않으면, 상태가 변경될 때 마다 컴포넌트가 리렌더링이 됩니다. 간단한 local state가 계속 변경될 때마다 새롭게 컴포넌트가 리렌더링 된다면, 이는 성능에 악영향을 미칩니다. 그래서 특정 상태나 props가 변경될 때만 작동하게 할 수 있도록 dependency array 요소를 정하면, 해당 상태나 props가 변경될 때만 작동합니다. 반대로, 컴포넌트 렌더링 시 딱 한번만 작동되게 하고 싶으면 dependency array에 아무것도 넣지 않으면 됩니다.

https://reactjs.org/docs/hooks-effect.html#example-using-hooks

HTTP/네트워크

CSR / SSR

CSR과 SSR은 각각 클라이언트 사이드 렌더링, 서버 사이드 렌더링의 약자입니다. 최초 웹이 탄생하고 ajax가 보편화되기 전 까지는 서버에서 HTML파일을 전부 만들어서 브라우저에 전달하고, 브라우저에서 해당 HTML 파일을 화면에 보여주는 SSR 방식이 보편적이였습니다. 이후 ajax가 보편화되고 나서 부터는 CSR이라는 개념이 대두되었습니다. CSR은 ajax 요청을 통해 페이지의 일부분에 필요한 정보만 받아서 브라우저에서 렌더링을 할 수 있는 장점이 있습니다. 즉, 단순한 웹 페이지가 아니라 유저와의 즉각적인 상호작용이 필요한 웹 애플리케이션에 적절합니다.

GET POST

GET 메서드는 서버의 리소스를 조회하고, POST 메서드는 서버의 리소스를 변경하는 HTTP 메서드입니다.
GET은 단순히 조회를 요청하기 때문에 body를 보내지 않는 것이 보편적이고 query parameter나 path parameter를 씁니다. POST는 리소스의 생성 및 변경을 의미하기 때문에, body에 원하는 변경 사항을 자세하게 적습니다.
GET 메서드는 요청을 무한대로 보내도 같은 요청을 회신받을 수 있는 멱등성(idempotence)를 가지고 있습니다. 반면, POST는 요청을 무한대로 보내면 최초 응답과는 다른 회신을 받게 됩니다. 이미 해당 리소스가 생성이 되어있거나, 변경되기 때문에 멱등성이 없습니다.

백엔드 기초

HTTP 메시지

HTTP 메시지는 크게 start-line, header와 body로 나뉩니다. start-line은 어떤 프로토콜을 사용하는지, 어떤 HTTP 메서드인지, 상태 코드는 무엇인지 등 해당 요청 / 응답의 핵심 정보가 담겨있습니다. header는 요청 / 응답에서 공통으로 자주 다루는 정보들이 담겨있습니다. 예를 들면, body의 Content-type이 무엇인지, 캐시의 유효 기간은 얼마다 되는지 등 공통으로 자주 주고받는 정보가 담겨있습니다. body는 해당 요청 / 응답에서 꼭 다뤄야 하는 중요한 정보를 담고 있습니다. 보통 추가/변경/삭제하고 싶은 리소스의 자세한 정보를 담기도 하고, 응답의 경우 요청자가 꼭 알아야 하는 리소스에 대한 정보를 담게 됩니다.

SOP CORS

SOP는 Same Origin Policy의 줄임말로, 동일 출처 정책을 의미합니다. uri의 프로토콜, 호스트, 포트 이 3가지가 모두 동일해야 같은 출처(Same Origin)으로 인정하게 되는데요, 이 정책이 필요한 이유는 동일한 출처가 아닌 곳에서 요청이 오는 경우 해당 요청을 막아 높은 보안성을 유지하기 위함입니다. 대부분의 모던 브라우저에서는 이 정책을 기반으로 동일 출처로의 요청이 아니면 요청 자체를 막습니다. 크롬, Edge, Firefox와 같은 모던 웹 브라우저 사용을 권장하는 이유입니다.

다만, 서버에서 다른 출처에서의 요청을 허용하게 해줄 수 있는 CORS 설정을 해준 경우는 접근할 수 있습니다. 모든 출처로 부터의 요청을 허용할 수도 있고, 일부 출처로의 요청만 허용하는 것도 가능합니다. expressjs에서는 cors 미들웨어로 상황에 맞게 cors 설정을 제어할 수 있습니다.

---

Chapter2. 회고 블로깅

S2회고

내가 감정기복이 꽤 있는 사람이라는 걸 알게 되었다.
그리고 이것이 학습에도 영향을 미친다는 것을 인지 했고,
인지한 후로는 최대한 감정상태가 내 공부에 방해되지 않도록 컨트롤 하기 위해 노력하고 있다.

섹션2부터는 스터디에 가입해서 의무적으로 깃에 잔디도 심고, 유닛별로 블로깅을 하기 시작했다.
좋은 사람들을 만나게 된 것 같아 감사하다. 서로 상생하는 관계가 되길..

섹션 3에 들어가기 전에 개선해야 할 마인드가 있다면

• 정확히 모르면서 안다고 착각하여 자만하는 것
  → 지금 수준에서는 아무리 공부해도 ‘전부 다 알고 있는 게 아닌 것’ 인지하기
• 모른다고 말하는 것을 두려워 하는 것
  → 나는야 개발어린이.. 모른다고 말해도 돼..지금은..
  

**1. 목표 상기하기**

• 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가요? 📌 내 아이디어로 개발한 어플 대박나서 100억 벌기 → 디지털 노마드 실현하는 개발자 되기
• 여러분이 현재 바라는 목표를 모두 이루었다면 ‘나'는 어떻게 변해 있을까요? 🔥 어떤 문제, 어려움에 닥쳐도 위축되지 않고 언제나 자신감이 넘치며, 긍정미 뿜뿜하는 똑똑하고 멋진 사람
• ‘나'에게서 어떤 모습을 보았을 때, 목표를 이루었다고 말할 수 있을까요? 🤪 정말로 행복해서 웃는 나

**2. Keep**

• 목표를 달성하기 위해 시도했던 것 중 가장 효과적이었던 노력은 무엇인가요? 1️⃣ 유닛별 블로깅 & 블로깅한 것으로 개념 복습 → 이해못하고 넘어간 개념 부여잡고 이해하려고 노력한 것 ex) 프로토타입, 비동기 2️⃣ 새싹 스터디 가입 🌱 → Git 관리법, Figma 사용, 미니 프로젝트 등 혼자이면 하지 못하는 것에 대한 관리 3️⃣ 유알클래스 유닛 학습 전에 유투브 영상을 통해 전반적인 개념 이해하기 4️⃣ 과제하기 전에 디렉토리 구조를 그림으로 그려서 과제를 큰 틀로서 이해하기 5️⃣ 평균 수면 시간을 7시간으로 고정
• 목표를 달성하기 위해 했던 모든 노력 중 반드시 유지해야 할 것은 무엇인가요? 🔑 (전부..)

3. **Problem**

• 목표를 달성하기 위해 세웠던 계획 중 가장 유지하기 어려웠던 것은 무엇인가요? 😱 일찍 자고 일찍 일어나기 저녁에 공부하는 것
• 목표를 달성하는데 있어서 가장 큰 장애물은 무엇인가요? 👁️ 정확히 모르면서 안다고 착각하는 것 더위 불안감

4**. Try 작성하기**

• ⏰ 11시에 자고 5시에 일어나기
• 📖 저녁에 순공부시간 2시간 기록(열품타)
• 😍 공부한 개념을 조카한테 알려준다고 상상하면서 설명해보기 → 토욜 저녁 9-11시