과제 내용

콜로세움에서는 CS처리를 위해 카카오톡과 유선의 방식을 사용하고 있습니다. 해당 매체들을 통해 셀러 또는 창고 작업자들과 협업을 하고 있습니다. 하지만 셀러와 창고주의 수가 늘어남에 따라 모니터에 띄워야 하는 메신저의 수는 많아지고 있어 이를 해결하기 위해 여러 곳에서 들어오는 톡을 한곳에서 읽고 내용을 기록하고 처리하고자 합니다.

착안사항은 다음과 같습니다.

• 여러명의 인원이 한 화면을 보고 처리 가능해야 한다.
• 1명 이상의 인원이 동일한 카톡의 내용을 보고 기록해 놓을 수 있어야 한다.
• 전체 대화의 내용은 DB에 기록이 되어야 한다.
• 카카오톡은 수신 뿐 아니라 응대가 가능하도록 송신의 기능도 가능해야 한다.

🔰 테크 스펙 이란?

> 뱅크샐러드 테크 스펙 템플릿

• 테크 스펙은 뱅크샐러드 회사에서 나온 용어로, 기술(tech) 설명서(spec)를 말한다.
• 기능을 구현하기 전에 이 기능을 어떻게 구현할 것인지 기술적으로 풀어 설명하고, 제안하는 글이다.
• 테크 스펙은 실제 개발에 바로 들어갈 수 있을 것 처럼 자세하게 적어서 실제 플랫폼 코드가 포함되는 경우도 많다.

🔰 작성한 5가지 사항

• 요약 (Summary)

  ➡ 테크 스펙을 대략적으로 정리 ➡ 누가/무엇을/언제/어디서/왜를 간략하면서도 명확하게 작성

• 배경 (Background)

  ➡ 프로젝트의 Context 작성 ➡ 왜 이걸 만드나? 동기는 무엇인가? 어떤 사용자 문제를 해결하려 하는가?     이전에 이런 시도가 있었는가? 있었다면, 해결이 되었었나?

• 목표 (Goals)

  ➡ 얻을 예상 결과들을 Bullet Point 형태로 나열 ➡ 이 목표들와 측정가능한 임팩트들을 이용해 이 프로젝트의 성공 여부를 평가하게 된다.     “우리는 우리의 의도한 목표와 임팩트들을 이뤄 냈는가?”

• 목표가 아닌 것 (Non-goals)

  ➡ 프로젝트에 연관되어 있으나 의도적으로 하지 않거나 해결하지 않으려 하는 것 작성. ➡ 독자가 직관적으로 이해할 수 있도록 Bullet Point 형태로 읽기 쉽게 작성 ➡ 목표가 아닌 것을 정하게 되면 프로젝트 범위를 더 명확하게 할 수 있고,     이 기능도 붙이자, 저 기능도 붙이자 하는 것을 막을 수 있다.

• ✨ 계획 (Plan)

  ➡ 테크 문서에서 가장 긴 파트 ➡ 어떻게 기술적, 엔지니어링적으로 접근할지 상세히 묘사 ➡ 어떻게 할지 확실히 결정하지 못한 상태라면, 어떤 것들을 고려하고 있는지 다 목록화해서 작성

🔰 계획 부분 설명

• "테크 스펙은 실제 개발에 바로 들어갈 수 있을 것 처럼 자세하게 적어서 실제 플랫폼 코드가 포함되는 경우도 많다." 라는 부분을 보고 최대한 자세하게 작성하기 위해 노력했습니다.

• 팀원들과 함께 아래의 1~5까지의 과정을 함께 토론하고 작성했습니다.

  ---

  1. 유저 스토리 & 시나리오 > 작성 링크

  • 웹 사이트를 이용할 콜로세움 CS 직원 입장에서 어떠한 기능이 필요하고, 어떠한 순서로 작업이 이루워져야 하는지 생각해보고 작성을 진행하였습니다.

  ---

2. 피그마를 통한 시각화 > 피그마 링크

• 작성한 유저 스토리 및 시나리오를 바탕으로 실제 CS 직원이 사용한다면, 어떠한 UI로 설계되면 좋을지 의논했습니다.

• 크게 3개의 상담목록, 고객상담, 고객정보 section으로 나누어, 각각 필요한 기능을 만들어 보았습니다.

3. 컴포넌트 설계 > 작성 링크

• 구현되어야 할 이미지를 첨부하고, 각각의 컴포넌트가 어떻게 개발되어야 할지에 대해 작성하여 글로 작성하는 것보다 설계자의 의도를 정확하게 전달하고자 하였습니다.
• 크게 3개의 상담목록, 고객상담, 고객정보 section과 그 하위에 필요한 컴포넌트들을 모두 작성하여 계층 구조로 표현하였습니다.

4. DB 테이블 설계 > 작성 링크

• 피그마 및 컴포넌트 설계 내용을 바탕으로 DB에 저장되어야 할 목록을 작성했고, 생성해야 할 DB 테이블 간 관계에 대해 생각하며 작성하였습니다.

5. API 및 웹소켓 설계 > API 링크 > 웹소켓 링크

• "카카오톡에 고객의 문의내용을 남기면, CS팀에서 바로 응대가 가능해야한다"라는 전제 조건에 대해 생각하고 방법에 대해 논의하였습니다.

• 그러나, 카카오톡 개발자 API 명세를 찾아보니 CS팀➡고객에게 카톡 메세지를 송신할 수 있는 방법에 대해서는 찾았지만, 고객➡CS팀에 문의한 수신 내용을 실시간으로 확인할 수 있는 API는 현재 없는 것으로 보입니다.

• 카카오톡 비즈니스 "상담톡"을 이용하면, 유료이긴 하지만 고객의 문의 내용을 실시간으로 확인할 수 있는 API를 제공받을 수 있습니다. 따라서 해당 프로젝트 설계의 전제는 콜로세움에서 "카카오톡 상담톡을 통해 고객의 CS 문의내용을 입력받고, 백엔드 팀에서 해당 API를 활용하여 고객의 문의내용을 관리해준다." 라고 설계하였습니다.

• 프론트엔드 개발자는 백엔드 팀에서 만들어준 API를 사용하여, 전체 CS 문의 내용 및 특정 CS 문의 내용, 고객 정보등을 사용하여 기능을 구현할 수 있습니다.

• 또한 CS 상담 직원이 메세지를 보내거나, 진행 상태를 변경할 때 서버와 클라이언트 간 양방향 소통을 할 수 있도록 웹소켓 사용에 대한 내용도 고려하였습니다.

🔗 배포 링크

과제를 끝내고 회고 내용

🔰 json을 배포하고 싶다면?

• json-server을 설치하고, scripts에 명령어를 추가하여 개발을 진행했다.
• 그런데, 배포를 하려고 보니 netlify에서 동작하지 않는 문제가 생겼다.

// package.json
"scripts": {
    ...
    "server": "npx json-server ./server/data.json --port 4000",
    "dev" :"concurrently \"npm run server\" \"npm run start\""
 },

// server/data.json
{
    "todos": [{
            "id": 1,
            "content": "타입스크립트 공부하기",
            "isCheck": true,
            "createdAt":"2012-04-30T02:15:12.356Z",
            "color": "red"
        },
        {
            "id": 2,
            "content": "Redux-Saga 공부하기",
            "isCheck": false,
            "createdAt": "2012-04-30T02:15:12.356Z",
            "color": "orange"
        }
        ...
    ]
}

• (해결) heroku에서 json-server 부분만 따로 배포하여 진행하였다. > Heroku 참고 링크

  // utils/constants.js
  export const BASE_URL = 'http://paywork-todo.herokuapp.com/';

🔰 Redux-Saga 비동기 액션 처리

• > Redux-Saga 수업내용 정리 <

• Redux-Saga 관련해서는 수업에도 들었고, 몇 번 사용해서 개발을 진행해봐서 비동기 처리나 generate문법을 알고 있었다. 그런데 TS 환경에서는 처음 사용해봐서 타입을 지정하는게 꽤나 어려웠다.

🔰 @keyframes를 통한 애니메이션

• > @keyframes 참고 링크 <
• 투두리스트를 추가하거나 상태가 변경된 경우 바로 확인할 수 있도록 @keyframes 이벤트를 만들었다.
• (참고) transition VS animation 차이
  • transition: 요소의 상태가 변해야 애니메이션을 실행한다.
  • animation: 요소의 모양과 동작을 키프레임 단위로 변경할 수 있다. 키프레임 동작은 재생 횟수, 재생 방향등 여러 애니메이션 속성으로 제어할 수 있다.

과제 내용

• 다지인 자유 & TodoList 구현
  • TypeScript 기반
  • Redux + Redux-Saga를 통한 전역 상태 관리 및 비동기 처리
• 실제 API 서버는 없으므로 서버 URL이 있다는 가정하에 진행

구현 내용

🔰 Redux-Saga + TypeScript

• saga 함수를 axios Async 함수마다 따로 만들다 보니, 파일이 전체적으로 너무 길어졌다. ➡ 호출하는 API만 다를뿐, 같은 기능을 수행하므로 하나의 함수로 만들어서 관리하고 싶어졌다.
• 아래의 함수처럼 sagaAsyncTodo 함수를 생성했다. ➡ props로 type, ApiFunc, action을 받는다. ➡ ApiFunc를 any 타입에서 적절한 타입으로 수정이 필요하다.

/* saga 실행 시, api 함수 비동기 호출 함수 */
function* sagaAsyncTodo(type: string, ApiFunc: any, action?: TodosAction) {
  const [SUCCESS, FAILURE] = [`${type}_SUCCESS`, `${type}_FAILURE`];
  try {
    const response: {
      msg: string;
      result: TodoType[] | number;
      content?: string;
    } =
      action && action.payload
        ? yield call(ApiFunc, action.payload)
        : yield call(ApiFunc);

    yield put({ type: SUCCESS, payload: response });
  } catch (error) {
    yield put({
      type: FAILURE,
      payload: ERROR_MESSAGE[type],
    });
  }
}

/* Saga 액션 감지 */
export function* watchTodos() {
  yield takeEvery(GET_TODOS, () => sagaAsyncTodo(GET_TODOS, api.getTodoAll));
  yield takeEvery(ADD_TODO, (action: TodosAction) =>
    sagaAsyncTodo(ADD_TODO, api.addTodoAPI, action),
  );
  yield takeEvery(TOGGLE_TODO, (action: TodosAction) =>
    sagaAsyncTodo(TOGGLE_TODO, api.toggleTodoAPI, action),
  );
  yield takeEvery(DELETE_TODO, (action: TodosAction) =>
    sagaAsyncTodo(DELETE_TODO, api.deleteTodoAPI, action),
  );
  yield takeEvery(UPDATE_TODO, (action: TodosAction) =>
    sagaAsyncTodo(UPDATE_TODO, api.updateTodoAPI, action),
  );
}

1. 웹페이지를 방문하여 모든 링크를 찾은 다음, 이 링크를 목록화 한다.
2. 그 다음 이 링크들을 이전에 방문한 적이 있는지 확인하고, 방문해본 적이 없으면 그 링크를 타고 웹페이지를 방문한다.
3. 그 페이지에서 앞에서 진행한 과정을 반복한다.

💡 현재의 검색 알고리즘

• 모든 웹페이지와 수십억 가지의 검색어, 모든 링크를 다 합친 것이 페이지랭크 ➡ 하나가 아닌 여러 개의 알고리즘으로 구성되어있다.

• 실제로 링크를 누가 얼마나 클릭하는지

• 크롤러가 웹페이지를 찾으면 Google 시스템에서는 브라우저와 마찬가지로 해당 페이지의 콘텐츠를 렌더링한다. 이때 키워드 및 웹사이트 최신 정보에 이르는 주요 신호를 기록하며 검색 색인에서 모든 주요 신호를 추적한다.

• 키워드 검색과 웹 페이지에 담긴 텍스트 비교, 반복성, 서체크기, 대문자, 키워드의 위치 등 여러가지 전통적인 정보검색기술과 결합한다. →  전통적인 판단 요소를 시그널(signal) 이라고 한다. 검색품질에 대단히 중요한 역할을 한다.

📌 SEO(Search Engine Optimization, 검색 최적화)

구글에서 말하길... 검색엔진 최적화의 효과를 보려면 시간이 다소 걸립니다. 변경을 시작해서 성과가 나타날 때까지 ✨ 보통 4개월에서 1년 정도 소요됩니다.

💡 SEO를 잘하려면?

✅ 잘 노출 되게 한다.

1. 사이트 주소가 여기저기서 링크 되고 있어야 한다.

   • youtube도 올리고 페이스북도 올리고 인스타도 올리고 블로그도 쓰고 서로 링크하고 (너무 recursive하면 광고로 판단하고 blocking)
   2. 각 사이트(유투브, 페이스북 등)의 제목과 내용의 단어 선택을 잘 해야한다!

2. <head> 에 페이지 정보를 잘 작성한다.

   • meta 태그에 잘 작성해야한다.
     • 

3. robots.txt 크롤러와 사이트의 약속

   • robots.txt는 검색의 크롤링 로봇이 웹에 접근할 때 로봇이 지켜야하는 규칙과 사이트맵(sitemap.xml) 파일의 위치를 알려주는 역할을 하는 파일이다.
     • allow 할지, disallow 할지 작성한다.
     • 

4. sitemap.xml : (사이트 맵)

   • sitemap.xml 파일은 검색 엔진 크롤링 로봇에게 웹 사이트에서 크롤링 해야 할 URL 을 전달한다.
     • 해당 사이트의 URL 모두를 XML 파일 형식으로 포함하는데 웹 사이트 운영자는 각 URL과 추가 정보로서 이 URL 콘텐츠의 최종 업데이트 시점 및 업데이트 빈도, 그리고 다른 URL 대비 상대적인 중요도 정보를 여기에 담을 수 있다.
     • 사이트 맵을 지원하는 검색 엔진은 이 정보를 사용하여 웹 사이트 크롤링을 보다 효율적으로 할 수 있게된다.
   • 

✅ 사이트를 컴퓨터가 이해할 수 있도록 만든다.

HTML5 Semantic Elements로 작성하기

• 페이지 이동 시 검색되길 바란다면 무조건 a 태그를 쓸 것!!!
• <h1~h6> 태그 잘 활용하기!
• img 태그 alt 설명 잘 달기
• img 태그 사진 이름부터 잘 짓기
• img 태그 위에 figure 추가
• header, main, footer, nav, section, aside 등등 태그 잘 활용하기
• caption 태그 활용해서 table 설명쓰기

> 자세한 SEO 가이드 링크

📌 웹의 역사와 발전

• 1세대 웹 - 전통적인 Web System Architecture. 정적 웹.
• 2세대 웹 - User Interaction 의 증가. 동적 웹(자바스크립트)
• 3세대 웹 - SPA(Single Page Application) - 구별되기 시작하는 Frontend와 Backend

📌 SPA(Single Page Application)

• 하나의 파일로 전체 사이트를 구현 ➡ 하나의 html 페이지에서 전체 웹 사이트/서비스를 구현
• HTML 태그 자체를 자바스크립트가 동적으로 생성

SPA in React...

• npm run build ➡ html 파일 하나 생김 (ex. AWS 배포할 때)
• 페이지를 이동하려고 하면 <div id="root" /> 의 내용을 싹 교체하는 것. ➡ 서버로부터 html 자체를 받아서 페이지를 바꾸는게 아니다.
• 페이지 이동 시 화면 깜빡임 X

📌 CSR(Client Side Rendering)

** 🤔: 우리 사이트가 검색에 너무 안 걸리는걸? ** ➡ Create React App(CRA)로 build한 프로젝트는 Only CSR(Client Side Render)로 실행되기 때문.

• 웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미.

• 브라우저는 최초 요청에서 html, js, css 확장자의 파일을 차례로 다운로드. ➡ 최초로 불러온 html의 내용은 비어있음. (html, body 태그만 존재) ➡ js 파일의 다운로드가 완료된 다음, 해당 js 파일이 dom을 빈 html 위에 그리기 시작.

• 백엔드 호출을 최소화 할 수 있음 ➡ 최초 호출 때만 html, js, css를 요청 ➡ 이후에는 화면에서 변화가 일어나야 하는 만큼의 데이터만 요청 (ex. JSON)

• 라우팅(새로운 페이지로 이동)을 하더라도 html 자체가 바뀌는 것이 아니라

• JavaScript 차원에서 새로운 화면을 그려내는 것!*

💡 CRA에서의 SEO

> react-helmet을 이용해서 meta 태그 수정

📌 SSR (Server Side Rendering)

🤔 : SPA의 장점을 살리면서 SEO도 같이 챙길 수는 없을까? ➡ SSR (Server Side Rendering)

• SSR은 서버에서 첫 페이지의 렌더링을 클라이언트 측이 아닌 서버 측에서 처리해주는 방식.

• CSR과 비교하면,

  • SEO 측면에서 유리

    • 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식이기 때문에 CSR의 단점인 "첫 페이지 깡통" 상태를 극복할 수 있음.

  • UX 측면에서 유리

    • CSR에 비해 페이지를 구성하는 속도는 늦어지지만, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.

  • 주의) 페이지를 잘못 구성할 경우 CSR에 비해 서버 부하가 커지거나 / 첫 로딩이 매우 느려질 수 있음

💡 CSR vs SSR

CSR	SSR

📌 CSR + SSR? ➡ Next.js

• 그렇다면 SSR과 CSR을 섞어 쓸 수 있는 Next.js!

• SSR의 CRA, 간단히 구성 가능

• SSR은 다음과 같은 요소로 구성된다

  • node.js로 구성된 FE 서버
  • pyhton, django로 되어 있는 BE 서버

• 다음과 같은 과정을 거쳐 SSR이 진행된다 (링크)

  1. 유저가 브라우저에 /를 입력.
  2. 미리 실행되고 있는 FE 서버가 요청을 받고 서버사이드 렌더링.
  3. 만들어진 html 을 브라우저에게 보냄.
  4. 브라우저가 응답받은 html 을 그림.
  5. html 에 기능을 부여할 **index.js**파일을 다운로드 받음. (hydration)
  6. 다운로드가 완료된 이후, go to second 링크를 클릭.
  7. /second로 라우팅하고 second 페이지 코드를 생성.

• Next.js 장점

  1. 페이지 기반 라우팅 시스템 (동적 라우팅 지원)
  2. pre-rendering , 페이지별 정적파일 생성과 서버사이드 렌더링 지원
  3. 코드 스플리팅
  4. CSS, Sass 기본 지원 및 다른 CSS-in-JS 라이브러리 지원

📌 User Interaction Tracking Tools

그로스 해킹(Growth hacking) : 성장(growth) + 해킹(hacking)이 결합된 단어 ➡ 고객의 반응에 따라 제품 및 서비스를 수정해 제품과 시장의 궁합을 높이는 것을 의미 ➡ 온라인 행동 데이터를 분석하며 이를 바탕으로 사용자 경험을 최적화 하는 작업

그로스해킹은

• 고객의 웹사이트 방문 기록
• 머무른 시간
• 회원 가입으로 전환되는 비율 등

다양한 데이터를 기반으로 더 나은 서비스와 제품을 제공하기 위해 시도된다.

💡 1. Google Analytics

• GA는 구글에서 제공하는 무료 웹 분석 도구

• 구글의 고유한 통계 및 머신러닝 기술로 사이트 및 모바일 어플리케이션 방문자들의 행동 데이터를 분석하고, 마케팅의 실적이나 웹사이트의 경험을 개선할 수 있도록 도와주는 도구

• 쉽게 말하면, 어떤 사용자가 우리 웹사이트를 방문하는지, 어떤 경로를 통해 방문했는지, 웹사이트에서 어떤 행동을 보이는지에 대한 흔적을 분석한 데이터를 뜻한다.

장점

1. 압도적인 점유율 ➡ 전 세계 로그 분석 도구 중 70%이상의 점유율을 차지하고 있다.
2. 저렴한 서비스 비용 ➡ 구글 계정이 있다면 무료로 이용할 수 있다.
3. 체계적인 분석 시스템 ➡ 웹사이트를 방문하는 고객 데이터를 100가지가 넘는 보고서를 이용해 제공하고 있다. 각종 유입 매체를 분석하고, 이벤트를 생성하여 상황에 맞게 데이터를 수집할 수 있다.

💡 2. Mix Panel

• Mix Panel은 구글 애널리틱스의 '개인 정보 보호 정책' 때문에 제공되지 않는 사용자의 추적을 제공하는 분석 툴

• 원하는 사용자를 지정하면 해당 유저의 클릭스트림(한 사람이 인터넷에서 보내는 시간 동안 수행한 모든 클릭 정보) 데이터를 실시간으로 조회할 수 있는 기능을 제공

• Mix Panel의 첫번째 목표는 사용자 고객들을 정의하는 것이고 둘째는 웹사이트에서 고객들의 관여도를 측정(어떤 경로를 가지고, 어떤 행동을 했는지 추적)하는 것

• 참고로 믹스패널은 데이터 타입으로 과금이 되니 모든 데이터를 트래킹 하는 것 보다 어떤 데이터를 우리가 어떻게 수집할 것인지 설계를 해서 개발에 반영하는게 좋다.

💡 3. Full Story

• Full Story는 다른 도구들과 달리 사용자가 하는 행동에 대해 레코딩한다. 즉, 사용자가 버튼을 누르고, 다음 페이지로 이동하는 행동 모두 영상으로 저장된다.

• dead click(웹사이트에서 아무런 이벤트가 일어나지 않은 클릭)과 rage click(빠르게 연속으로 행해진 클릭)을 정확히 찾아내면 사용자 인터페이스에 대한 잠재적인 개선 사항을 식별하는 데 도움이 될 수 있다.

✨ 웹팩은 모듈 번들러다! ➡ 모듈에 대해 알아보자!

💡 모듈 정의

자바스크립트에서의 모듈이란 기능 단위의 "자바스크립트 개별 파일"다.

• 프로그램을 구성하는 단위
• 자신만의 독립적인 실행 영역
• 보통 파일 단위로 나뉨

💡 모듈패턴과 필요성

• 자바스크립트의 소스를 모듈 단위로 관리하거나 라이브러리 등을 만들 때 사용
• 전역 변수의 사용을 최소화 하기 위함
• 변수 scope을 지정해서 사용하기 위함
• Reusablility, Isolation, Organization
• 모듈 단위로 개발하면, 각 모듈 간의 의존성을 최소화하거나, 의존성 파악이 쉬움.

💡 라이브러리(CRA) 없이 모듈 패턴 구현할 때는 어떻게 했나?

// 이렇게 감싸서 하나의 모듈을 만들 수 있었다.
(function () {
  // scope가 막혀있기 때문에 전역변수가 생성되지 않는다.
  // 즉시 실행함수는 보통 일회용 코드
})();

// 모듈 또 하나
(function () {
    window.myLibrary = /* */;
}());

// 모듈 또 하나
(function () {
    var math = {
        add: function () {}
    }

    window.math = math;
}());

💡 모듈 시스템 라이브러리(모듈 기능 표준화)

✅ CommonJS

• 실행구문 : module.export, require
• Node.js에서 사용

✅ ES6 Module

자바스크립트를 이용하는 웹페이지의 코드가 복잡해지기 시작하면서, 효율적인 소스 관리가 필요해져서 이제는 모듈을 정의하는 것 또한 표준으로 정의되었다.

• 실행구문 : export, import
• CRA에서 사용

❗ 아직 IE지원이 안되므로, 모듈을 사용하려면 babel, webpack이 필요하다. babel은 ES6 → 브라우저에서 사용할 수 있도록 모듈을 commonjs로 바꿔주고, webpack은 모듈간의 의존성을 파악하여 자바스크립트 코드를 bundle(합쳐) 해준다.

📌 webpack

✨ 웹팩은 모듈 번들러다! ➡ 모듈을 알아봤으니 번들러에 대해 알아보자!

💡 번들러(bundler)

• 번들이란, 여러 파일 여러 구성을 합치는 것을 말한다.
• 모듈화된 파일들을 하나로 묶어 관리해야하기 때문에, 번들러의 역할이 중요해졌다.
• 모듈 간의 의존성을 파악하여 하나의 파일로 만들어 준다.
• npm run build 후에 하나의 자바스크립트 파일로 나온 결과물이 번들러의 결과물!
• ex) webpack, RequireJS, Rollup, Parcel

➡ 왼쪽의 서로 종속 관계인 파일들을 웹팩을 통해 하나로 깔끔하게 모아준다!!

💡 만약에 번들러가 없었다면?

1. 파일 하나하나 HTTP 통신을 통해 서버에 요청이 생긴다. ➡ js 파일이 올 때까지 기다리기 때문에 화면 로딩시간이 오래 걸린다. ➡ one by one으로 파일을 요청하고 응답받기 때문에 파일 개수가 많아질수록 요청이 많아진다.

2. 파일이 서로 종속 관계를 가지고 있는 경우, 파일의 로드 순서가 중요해진다. ➡ 웹팩이 모듈의 종속(dependecy) 관계를 파악하고 알아서! 잘 하나의 파일로 만들어준다.

💡 결론, 웹팩의 역할!

• 웹팩은 js 파일 뿐만 아니라, img, css, mp4 등 다양한 리소스를 모두 모듈로 관리하여 서로의 의존성을 관리해준다.
• 또 웹팩은 개발 단계에서 사용하는 dev server, 필요할 때 import하는 dynamic import, 모듈을 하나의 파일로 만들지 않고 의존성을 따져 나눠서 빌드하는 code spliting 등을 지원한다.

💡 webpack - entry & output

yarn add webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react -D
yarn add react react-dom

// webpack.config.js
const path = require('path');

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

module.exports = config;

• entry: 이 프로젝트가 어느 파일에서 시작할지 entry 프로퍼티에 경로를 지정

• output: webpack이 적용된 결과파일을 어느 위치에, 어떤 파일이름으로 생성할지 지정

💡 webpack - loader

• loader: 파일을 전처리(preprocess) 해주는 것인데, 이 때 파일은 모듈을 뜻하며 js 파일 뿐만 아니라 img, css, csv 등 모든 정적 리소스를 포함한다. loader는 모듈을 입력 받아서, 새로운 모듈로 출력하고 번들링 할 수 있다.

✅ babel-loader

• 자바스크립트 파일을 처리한다. 예를 들어 jsx 문법으로 작성된 리액트 코드를 처리할 때도 필요하다.
• js 확장자를 갖는 모듈은 babel-loader가 처리하도록 설정한다.

  // webpack.config.js
  module: {
  rules: [
   {
     test: /\.js$/,
     exclude: /node_modules/,
     use: ['babel-loader']
   }
  ]
  }
  

//babel.config.js //babel 세팅도 해야한다. @babel/preset-react 프리셋을 사용하도록 설정 const presets = { presets: ["@babel/preset-react"] };

module.exports = presets;

#### ✅ **css-loader**
  - css 파일을 모듈로 사용할 수 있도록 해준다.
```bash
yarn add sass-loader css-loader mini-css-extract-plugin sass -D

{
  test: /\.(sa|sc)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader'
  ]
}

✅ file-loader

• file-loader를 사용하지 않으면 root 경로에 모든 파일이 번들된다.
• 개발모드에서 사용한 경로대로 그대로 파일이 번들되길 바라면 file-loader를 사용하자.
• name설정을 하지 않으면 파일 이름에 해시값이 포함되며 브라우저 캐싱효과를 활용할 수 있다.

{
    test: /\.(png|jpe?g|gif|svg)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      }
    ]
}

💡 webpack - plugin

• plugin은 로더보다 강력한 기능을 갖는다.
• loader는 특정 모듈에 대한 처리만 담당하지만, plugin은 웹팩이 실행되는 전체 과정에 개입할 수 있다.

 plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
            output: 'index.html'
    }),
]

• HtmlWebpackPlugin는 html 파일에 script 태그를 추가하여 번들된 js 파일을 주입한다.

💡 webpack - mode

✅ development

• 개발 단계
• 소스맵 제공

✅ production

• 배포용
• 코드 minify, uglify
• 최적화(tree shaking)로 번들된 파일 크기를 작게

//package.json
"scripts": {
    "start": "react-scripts start",
    "start:dev": "REACT_APP_ENV=dev react-scripts start",
    "start:staging": "REACT_APP_ENV=staging react-scripts start",
    "test-start": "yarn test --watchAll=false && react-scripts start",
    "build": "react-scripts build",
    "build:dev": "REACT_APP_ENV=dev react-scripts build",
    "build:staging": "REACT_APP_ENV=staging react-scripts build",
    "build:production": "REACT_APP_ENV=production react-scripts build",
    "test": "react-scripts test",
    "test-all": "react-scripts test --watchAll=false",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },


// 사용 예제
const PRODUCTION_URL = 'https://api.co.kr';
const STAGING_URL = 'https://staging.api.co.kr';
const DEV_URL = 'https://dev.api.co.kr';
const LOCAL_URL = 'http://100.28.2.17:3000';

let uri;

switch (process.env.REACT_APP_ENV) { // REACT_APP_ENV
  case 'production':
    uri = PRODUCTION_URL;
    break;
  case 'staging':
    uri = STAGING_URL;
    break;
  case 'dev':
    uri = DEV_URL;
    break;
  default:
    uri = LOCAL_URL;
}

const httpLink = createHttpLink({
  uri,
});

export default httpLink;    

📌 Babel

Babel은 JavaScript 컴파일러입니다.

💡 컴파일러

➡ 사람이 읽기 편한 프로그래밍 언어에서 컴퓨터가 읽기 편한 코드로 바꿔주는 것

💡 바벨이 필요한 이유

• 바벨을 새로운 자바스크립트 버전을 어느 브라우저에서나 사용할 수 있도록 ES5 버전으로 변환해 준다.
• 브라우저는 아직 새로운 자바스크립트 버전을 맞이할 준비가 안되어 있는데, 개발자가 새로운 버전으로 효율적으로 문법을 미리 사용할 때, 바벨이 변환해 줘서 동작하는 것!
• create react app으로 개발할 때 아직 브라우저가 받아드리지 못하는 최신 메서드들이 있는데 이미 CRA에서 바벨 설정이 되어있었기 때문에 마음껏 최신 문법을 사용할 수 있었다.
• (+JavaScript나 Python은 컴파일 언어가 아니며, 사람이 쓴 대로 컴퓨터가 해석하는 "인터프리터 언어"라고 부른다. 그럼 왜 컴파일 언어가 아닌데 왜 컴파일러라고 부르는지? ) ➡ 자바스크립트에서 자바스크립트로 변환하는거고, 높은 버전에서 낮은 버전으로만 바벨이 변환을 시켜주는 것이기 때문에 정확한 표현은 아니지만 의미상 컴파일러라고 사용한다. 트랜스 파일러라고 말하는 사람도 있다.

💡 바벨과 관련된 필수 module

• babel-loader: 바벨과 웹펙이 어떻게 동작하는지
• @babel/core: babel로 컴파일해서 결과물 파일이 나오도록 babel 관련한 핵심 모듈
• @babel/preset-env: ES2015?6?7 등 어떤 버전을 쓸지에 관한 모듈
• @babel/preset-react: jsx를 js로!

➡ Redux에서 action을 dispatch하면 바로 state가 변경되어, 비동기 처리가 불가능하다. ➡ 비동기 처리를 위해 Redux-thunk, Redux-saga 등장!

➡ Redux-saga는 비동기의 다양한 상황을 처리하기 좋고,      테스트나 디버깅이 쉽기 때문에 많이 이용되는 추세

💡 middleware

• Redux에서 미들웨어는 action을 dispatch하고, reducer에서 state가 변경 되기 전!! 이 사이에서 여러 작업을 할 수 있다. (로그 남기기, 비동기 처리 등)

💡 generator (ES6)

• generator함수를 만들 때는 function* 키워드를 사용한다

  function* generateNumber() {
  yield 1;
  yield 2;
  return 3;
  }
  

const generator = generateNumber();

console.log(generator.next().value) // 1 console.log(generator.next().value) // 2 console.log(generator.next().value) // 3 console.log(generator.next().value) // undefined

- redux-saga에서의 **`saga`**가 generator 함수를 의미함
- generator 기반으로 비동기 작업을 관리함
- generator 함수에서 action에 따른 작업을 yield

### 💡 Redux-saga > side effect
- side effect는 (부정적인 의미의) 부작용이 아니라, 부수효과를 의미한다.
- 다양한 기능들이 있기 때문에 구현하고 싶은 기능에 따라 사용하면 된다.
![redux-saga](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F824737e0-aa59-42ec-963e-7390db66c01d%2FUntitled.png?table=block&id=c0518f2e-9326-40ed-b4c7-951ac8a58230&spaceId=4b97eaca-7938-4c43-b27c-a0c55795a841&width=670&userId=c2939493-d597-43bd-b1dd-7e1eab005a87&cache=v2)
- `takeEvery`: 모든 액션을 유효하게 인정
- `takeLatest`: 마지막 액션 하나만 유효하게 인정

---

## 📌 Context API
> **React에서 공식적으로 전역상태를 관리할 수 있는 Context API를 제공**
React 자체 전역상태 관리 API이기 때문에 최근 새로운 프로젝트에 굉장히 많이 도입되고 있다.
Redux, react-router, styled-components 오픈소스를 보면 Context API를 사용하고 있다!

### ✅ Provider : 전역 상태 정의 및 전역 상태를 update하는 로직이 존재
- Provider는 context를 구독(Consumer)하는 컴포넌트들에게 **context의 변화를 알린다.**

- Provider 하위에 있는 컴포넌트 중에 context를 구독(Consumer)하는 부분이 Provider의 value가 바뀔때마다 다시 렌더링 된다.
➡ Provider 하위에 있다고 value가 업데이트 될 때마다 모든 컴포넌트가 다시 렌더링 되는게 아니다! 
➡ context를 구독이 포함되어 있는 컴포넌트도 다시 렌더링 되는게 아니다! 
➡ 오직 context.Consumer 부분만 rerender 된다.

- 당연히!! Provider 컴포넌트 외부에 있는 컴포넌트에는 변화를 감지하지 못한다.


### ✅ Consumer : 전역 상태 사용
- `useContext`를 사용하면 훨씬 편하게 사용 가능하다.

---

### 💡 Context API 예시

- context에 로그인 여부를 저장하는 `auth`와 상태를 변경하는 함수인 `setAuth`를 추가
- 로그인 페이지에서 정상적으로 로그인되면 `setAuth` 함수를 사용하여 `auth` 값을 true로 바꿔줌

```jsx
//AuthContext.js
import { createContext, useEffect, useState } from 'react';
import { login } from './AuthService';

const AuthContext = createContext({}); // 1️⃣

export const AuthProvider = ({ children }) => {   // 4️⃣
  const [auth, setAuth] = useState(false);

  useEffect(() => {
    setAuth(login());  // 3️⃣
  }, []);

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>  // 2️⃣
      {children}
    </AuthContext.Provider>;
};

export const AuthConsumer = AuthContext.Consumer;  // 4️⃣
export default AuthContext;  // 4️⃣

코드설명

1. createContext는 초기 값을 매개변수로 받는데 필수는 아니다. ➡ 작성해도 2. provider를 정의하는 곳에서 덮어 씌워지기 때문에 작성하지 않았다.

2. Provider에서 사용할 auth(로그인 여부)와 로그인 여부를 업데이트 해주는 setAuth 함수를 넣는다.

3. 최초(현재) 로그인 여부 파악

4. AuthContext, AuthProvider, AuthConsumer를 나누어서 export하였다. (context/provider/consumer를 한 파일에서 관리하고, 아래와 같이 사용하기 위해서)

   import AuthContext, { AuthProvider, AuthConsumer } from './AuthContext';

📌 Responsive Web

반응형 웹이란, 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미. IT 기기의 종류가 더욱 다양해짐에 따라 디스플레이의 크기에 맞게 유동적으로 반응하는 반응형 웹을 구현하는 것이 더욱 중요해졌다.

💡 Breakpoint

• 보통 2개 - 1024 / 768
• 관리 편하게 하려면 1개 - 768

💡 Media Query

@media only screen and (max-width: 480px) {
    body {
        font-size: 12px;
    }
}

• @media : media 쿼리 시작
• only screen : 어떤 디바이스에서 적용하는지 알려준다.
  • only screen : 어떤 디바이스이던지 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용
  • only print : 프린트를 하고싶을 때 적용
• and (max-width : 480px) : media feature라고 불리는 부분, 조건 작성하기

💡 SCSS에서 관리 쉽게 하기

/* mediaQuery.scss */
$phone: "only screen and (max-width: 768px)";
$desktop: "screen and (min-width: 769px)";

@import './mediaQuery.scss';
.big-box {
    @media #{$phone} {
        display: none;
    }

    @media #{$desktop} {
        display: block;
    }
}

📌 Cross Browsing

웹사이트가 어느 버전의 브라우저에서나, 어느 디바이스에서도 원하는 결과물이 나오도록 확인하고 수정하는 단계 ➡ ie, chrome, safari는 기본이고, 모바일에서 카카오톡 웹뷰, 네이버 웹뷰에서도 잘 뜨는지 직접 꼭 확인해야 한다!

💡 CSS 확인하기

• ie에서 생각보다 많은 CSS property를 지원하지 않는다.
• can i use 에서 확인해보거나, 해당 property 이름 + ie 조합으로 검색해서 답변을 바로 찾기!
• 한번에 지원해주는 라이브러리가 있긴 하지만, 웬만하면 직접 수정하는 것이 좋다.

💡 IE polyfill 적용하기

• step1. react-app-polyfill 설치

  yarn add react-app-polyfill

• step2. polyfill import

  // These must be the first lines in src/index.js
  import 'react-app-polyfill/ie11';
  import 'react-app-polyfill/stable';

• step3. node_modules/.cache 삭제

• step4. package.json browserslist에 ie 11 추가

  "browserslist": {
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version",
        "ie 11"
      ]
    }

🔗 배포 링크

🔗 피그마 링크

• 이번 과제는 4명의 팀원이 각자 브랜치 생성 ➡ PR 생성 ➡ 코드리뷰 ➡ 수정 ➡ 머지의 과정을 거쳐 협업하여 진행했습니다.😊

• 과제를 마치고, 총 16개의 조 중에 제일 우수한 프로젝트로 평가 받아서 기분이 매우 좋습니다.🎉

• 코드 리뷰 또한 좋은 예시로 선정되었습니다.🎉

과제를 끝내고 회고 내용

🔰 Git > 코드 리뷰와 브랜치 관리

• 프리온보딩 과정을 하면서 Live Share를 통한 협업을 여러번 진행했는데, 이번 과제는 Live Share 기능을 사용하지 않고, 각자 분담된 기능을 브랜치로 만들고 PR을 올리면 모든 팀원이 코드 리뷰 하는 방식으로 진행되었다.

• 한 달 넘게 같이한 팀원들과 익숙해졌는데, 새로 조가 바뀌면서 상혁님, 이슬님, 준희님과 git 컨벤션이라던지, 이슈 관리, 브랜치 및 PR 관리 등 어떻게 해야할지 처음부터 다시 정하는 시간을 가졌다.

• *코드 리뷰! * ➡ Git에 팀원분들이 PR을 올리면, 꼼꼼하게 코드를 보려고 노력했다. 이해가 안되면 서로 설명을 해주고 피드백을 주고 받았다. 코드 리뷰가 너무 좋았던게 내가 미쳐 생각하지 못했던 부분을 말씀해주셔서 생각해보고 더 좋은 방향으로 리팩토링을 진행할 수 있었다. (물론 구현해야 할 남은 기능도 있는데, 현재 기능을 리팩토링 한다고 밤을 새웠지만...그래도 팀원분들이 더 쉽게 이해하고 사용하시는 걸 보니 뿌듯했다!)

🔰 애니메이션 기능(칸반보드 형태의 Drag and Drop)

• Drag and Drop 기능은 처음 사용해봤다. 사실 이벤트 리스너를 통해서 기능을 구현할 수 있다는 것 조차 몰랐었다..

• 기능을 구현하기 전, 구글링을 통해 예시 코드를 참고하고 상하로 리스트를 움직이는 법에 대해서 공부했다. 그러나! 우리의 투두리스트는 칸반보드 형태로 상태에 따라 좌우로도 움직여야 했다. 기존 코드에서 보다 더 복잡해졌지만 다들 해본 적 없는 기능에 도전정신을 가지며 즐겁게 과제를 진행하였다.

🔰 전역상태에서 관리하는 모달창

• 위에서 말한, 코드리뷰를 통해 리팩토링한 기능이다. Portal을 사용해서 모달창 기능을 구현했고, 투두리스트 수정 버튼을 클릭하면 모달창이 생성되는 구조라서, 처음에는 수정 버튼이 있는 곳에 모달 관련 컴포넌트를 넣었다.

• 그런데 투두리스트를 생성할 때, 입력 validation을 만족하지 못하면 모달창을 재사용 했으면 좋겠다는 의견을 받았다.

• Context API를 활용하여 dispatch(nodal("띄울 모달명"))으로 띄울 모달명을 셋팅하면, App.tsx 에서 모달명에 맞는 화면을 보여줄 수 있도록 변경했다. 리팩토링 한 결과 팀원분들이 머지 후 쉽게 모달창을 띄울 수 있게 되었다!

🔰 사용자를 위한 디자인 설계

• 과제를 처음 받고 내용을 읽어보니, 글로만 읽고 구현하면 서로 다르게 이해한 부분이 생길 수 있겠다 하는 생각이 들었다. 또 새로운 조편성으로 팀원들이 바뀌다보니 말로만 의견을 전달하면 서로 잘못 이해하는 기능이 생기지 않을까 염려되었다.

• 그래서 모두가 피그마에 접속해, 우리가 구현하고자 하는 칸반보드 형태의 투두리스트를 만들어 보았다. 사실 피그마를 전문적으로 사용하지는 못하는데, 팀원분 중에 디자이너로 일하셨던 분이 계셔서 많은 도움을 받았다.

• PR을 올리고 머지하면서 느낀점은, 모든 팀원분들이 정말 피그마와 동일하게 만들어주셨다!😊

• 과제를 제출하기 전, 4명이서 모두 Live Share로 같은 코드를 보면서 수정해야할 부분에 대해 의논하고 리팩토링을 진행하였는데, 특히 디자인 관련해서 "사용성을 위해 svg 버튼에 패딩주기 또는 색상 선정을 위한 팁" 등 디테일 한 부분까지 말씀해주셔서 많은 도움이 되었다.

과제 내용

[공통]

• TypeScript 사용
• 데이터는 로컬의 dummy data 로 자유롭게 구성할 것 (format: json)
• UI 라이브러리 사용하지 않을 것을 권장

[상세기능]

• 스크롤 시 Header 고정
• 투두리스트에 적합한 타입 구성
• Task 목록 조회, 새로운 Task 추가, Task 삭제, Task 수정
• Task 상태 변경(시작전,진행중,완료)
• Task 필터링(상태, 생성일, 생성자, 중요도) : 최소 두가지 이상 조건으로 필터링
• 투두리스트에 적절한 애니메이션을 추가 ➡ Drag & Drop 애니메이션 구현

구현 내용

🔰 Drag & Drop 기능

➡ 기존에 진행했던 투두리스트와 다른 점인 애니메이션(Drag & Drop) 부분 구현한 내용을 작성

** 📌 1. Drag & Drop 기능을 커스텀 훅으로 생성해서 관리하고자 했다. **

• handleDragStart : 사용자가 요소를 끌어 시작할 때 발생
• handleDragEnter : 드롭 타겟 들어가면 이벤트가 발생
• handleDragOver : 드롭 타겟 위에 드래그되는 경우에 이벤트가 발생
• handleDragLeave : 드래그 요소가 드롭 대상을 떠날 때 발생

// utils/hooks/useTodoItemDnD.ts 파일 생성

import { useState } from 'react';

export const useTodoItemDnD = (id: number) => {
  const [isDragging, setisDragging] = useState(false);
  const [isDragOver, setIsDragOver] = useState(false);

  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
    setisDragging(true);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', `${id}`);
  };

  const handleDragEnter = () => {
    setIsDragOver(true);
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragOver(true);
  };

  const handleDragLeave = () => {
    setIsDragOver(false);
  };

  return {
    isDragging,
    isDragOver,
    handleDragStart,
    handleDragEnter,
    handleDragOver,
    handleDragLeave,
    setIsDragOver,
  };
};

** 📌 2. TodoItem 컴포넌트를 감싸는 최상단에 useTodoItemDnD 관련 이벤트 리스너를 등록한다.**

// TodoItem.ts

import { useTodoItemDnD } from 'utils/hooks';
...

const {
    isDragOver,
    handleDragStart,
    handleDragOver,
    handleDragEnter,
    handleDragLeave,
    setIsDragOver,
} = useTodoItemDnD(todo.id);

  ...


const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    setIsDragOver(false);
    const movingTarget = e.dataTransfer.getData('text/plain');
    dispatch(swap({first: +movingTarget, second: todo.id})); // ✅
};
  ...

<ItemContainer
        draggable
        isDragOver={isDragOver}
        onDragStart={handleDragStart}
        onDragOver={handleDragOver}
        onDragEnter={handleDragEnter}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
>
       ...
</ItemContainer>

** 📌 3. reducer에서 dispatch(swap()) 액션이 실행될 경우, Todo의 상태에 따라 순서를 변경하거나 state를 변경한다.**

// context/TodoContext/reducer.ts

export default function reducer(state: IState, action: Action): IState {
  const { type, payload } = action;
  switch (type) {
    ...
    case SWAP:
      return { ...state, todos: swapTodos(state.todos, payload) }; // ✔
    ...
    default:
      return state;
  }
}

...

const swapTodos = (prevTodos: ITodos, payload: ISwap): ITodos => { // ✔
  const { first: firstId, second: secondId } = payload;
  if (firstId === secondId) return prevTodos;

  const firstTodo = prevTodos.find((todo) => todo.id === firstId);
  const secondTodo = prevTodos.find((todo) => todo.id === secondId);
  if (!firstTodo || !secondTodo) return prevTodos;

  if (firstTodo.status === secondTodo.status) { 
    // ✅ Todo의 상태가 동일하여 상하로 움직인 경우
    const firstIndex = prevTodos.findIndex((todo) => todo.id === firstId);
    const secondIndex = prevTodos.findIndex((todo) => todo.id === secondId);
    if (firstIndex === -1 || secondIndex === -1) return prevTodos;
    const newTodos = [...prevTodos];
    [newTodos[firstIndex], newTodos[secondIndex]] = 
      [newTodos[secondIndex], newTodos[firstIndex]];
    return newTodos;
  } 
  else {
    // ✅ Todo의 상태가 달라서, Todos의 상태도 업데이트 해야하는 경우.
    const newTodos = [...prevTodos];
    const firstIndex = prevTodos.findIndex((todo) => todo.id === firstId);
    const firstTodo = newTodos.splice(firstIndex, 1)[0];
    const secondIndex = newTodos.findIndex((todo) => todo.id === secondId);
    firstTodo.status = newTodos[secondIndex].status;
    newTodos.splice(secondIndex, 0, firstTodo);
    return newTodos;
  }
};

** 📌 4. TodoBox 에 TodoItem을 Drag&Drop 할 수도 있다. TodoBox 도 useTodoItemDnD 관련 이벤트 리스너를 등록한다. **

// TodoBox.ts

import { useTodoItemDnD } from 'utils/hooks';
...

 const { 
     isDragOver, 
     setIsDragOver, 
     handleDragStart, 
     handleDragOver, 
     handleDragLeave 
 } = useTodoBoxDnD(ref);

...


const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
  if (!ref || !ref.current) return;
  if (!ref.current.isSameNode(e.target as Node)) return;
  const id = +e.dataTransfer.getData('text/plain');
  console.log('TodoBox', id, status);
  dispatch(update({ id, status })); // ✅ update 액션을 통해 state를 변경한다.
  setIsDragOver(false);
};

...

<TodoSectionWrapper
      ref={ref}
      draggable
      isDragOver={isDragOver}
      onDragStart={handleDragStart}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
>
       ...
</TodoSectionWrapper>

• 뷰(화면)과 모델(데이터)을 연결하는 것을 의미
• 리액트는 단방향 Data Binding : 값이 바뀔때마다 모델에서 뷰로 가는 흐름

📌 MVC Pattern

• 관심사의 분리(separation of concern, SoC)에서부터 나온 패턴 ➡ 관심사 분리로 코드의 단순화 및 유지보수의 더 높은 수준의 자유가 생긴다. ➡ 관심사가 잘 분리될 때 독립적인 개발과 업그레이드 외에도 모듈 재사용을 위한 더 높은 정도의 자유가 있다.

💡 Model

• 데이터
• .json 또는 데이터 모델 정의
• 일반적으로 데이터를 처리하는 로직과 함께!

  💡 View

• 화면, html, 레아아웃

  💡 Controller

• 이벤트 핸들러와 이벤트를 처리하는 로직이 있는 곳
• 데이터랑 뷰를 이어주는 역할
• 이벤트가 발생(요청)하면 모델에 적정한 로직을 실행하도록 한다.

[MVC 패턴 단점]

• 프로젝트 규모가 커질수록 빠르게 복잡해진다.
• feature 추가될 때마다 모델과 뷰를 연결하는 복잡성이 증가한다.
• 데이터 간의 의존성과 연쇄적인 갱신은 뒤얽힌 데이터 흐름을 만들고 예측할 수 없는 결과로 이끌게 된다.
• 새로온 개발자가 합류하면, 너무 복잡해서 코드만 보고 해석조차 불가능. (유지비용 증가)
• 복잡성이 증가할 수록 예측 불가능해지고 안정성이 떨어진다. ➡ 어디서 버그가 터져나올지 테스트도 어렵다.

📌 Flux Pattern

• Flux는 Facebook에서 소개한 아키텍쳐
• 전통적인 MVC 패턴을 버리고, 개발이 오래되고 커져도 유지보수가 쉽고 reliable하고 high performance를 유지하는 새로운 패턴
• Redux는 Flux 패턴에 기반한 라이브러리!

• 단방향 데이터 흐름(unidirectional data flow)이 핵심
• 사용자에 의해 Action이 발행 ➡ 해당 Action에 영향이 있는 모든 View가 갱신(rerender)
• 어디에서 어떤 일이 일어날지 알 수 있다(=예상가능하다. 복잡하지 않다). 흐름은 하나니까!!
• Flux는 세 가지 부분으로 구성 되어 있다.
  1. Dispatcher
  2. Stores
  3. Views(리액트 컴포넌트)

💡 Dispatcher

• dispatcher를 통해 action을 발행한다.
• 모든 데이터는 중앙 허브인 dispatcher를 통해 흐른다.

💡 Store

• 어플리케이션의 데이터와 비지니스 로직을 가지고 있는 store

💡 Views

• action이 발행되면 이 action에 영향이 있는 모든 view가 갱신됨

📌 Redux Intro

➡ Redux는 Flux 패턴을 근본으로한 라이브러리이다.

💡 왜 리덕스를 사용하는가?

• 앱에서 전체적으로 사용할 데이터 관리가 필요

  • React.js는 단순 UI 라이브러리라서, 데이터 관리를 고려하고 있지 않음
  • 로컬스토리지에 데이터를 저장하고 불러오는 로직 대신 Redux를 사용!
  • props drilling을 피할 수 있다.

• 하나의 state(데이터)를 여러 컴포넌트에서 필요한 경우가 있다.

• 페이지의 레이아웃에 영향 받지 않는 modal, toast, alert 같은 전역 UI 컴포넌트의 상태 관리도 필요하다.

💡 리덕스 구조

1. *store *: Application 전체 state는 store에서 관리된다.

            ➡ store는 redux의 상태값(state)를 갖는 객체다

2. action : action은 state 변화를 일으킬 수 있는 행동 정보

3. dispatcher : action이 일어나면 Dispatcher를 통해서 store의 state가 업데이트 된다.

4. view : state가 변경되면 view에서 감지하고, 화면에 반영(rerender)된다.

💡 리덕스의 세 가지 원칙

1. *전체 상태값이 하나의 객체로 표현된다. * ➡ store는 하나다!

2. 상태값(state)은 읽기 전용이다. ➡ useState처럼 state값을 직접 바꾸는게 아니고, setState 함수를 사용해서 변경한다.

3. 상태값(state)은 순수 함수에 의해서만 변경되어야 한다. ➡ 상태값을 변경시키려면 상태값을 변경하는 함수가 필요하다. (➡ 이 함수가 reducer!) reducer는 항상 같은 input은 같은 output을 반환하는 순수함수여야 한다.

📌 Redux 사용 | Reducer Store Action

💡 Redux 구성 요소 - Action

사용자의 입력이나 UI 조작, 웹 요청 완료같이 어떠한 상태 변화를 일으킬 수 있는 현상. 즉, 어떤 조작인지 정보를 갖고 있는 자바스크립트 객체이다.

* Action의 생김새 => 자바스크립트 객체다!

{
    type: 'SHOW_MODAL'
}

* Action의 특징

• action은 객체다!
• action은 반드시 type 프로퍼티가 있어야 한다.
• type 이외의 다른 프로퍼티를 가져도 된다.(부가적인 데이터 전달하고 싶을 때)

* Action 정의

• action은 객체 리터럴로 바로 정의하는게 아니라, Action Creator를 통해 만든다

function showModal({ title }) {
    return { type: 'SHOW_MODAL', title }
}

showModal({ title: '로그인' });

💡 Redux 구성 요소 - Reducer

reducer는 action이 발생했을 때, state를 변화시키기 위한 함수다.

* Reducer의 생김새

reducer는 현재의 state와 action을 인자로 받고, 이 action의 내용(type)에 따라 state를 변화시킨다.

function modal(state, action) {

  switch(action.type) {
    case 'SHOW_MODAL':
      return {
        ...state,
        showModal: true
      };
    case 'CLOSE_MODAL':
      return {
        ...state,
        showModal: false
      };
    default:
      return state;
  }
}

💡 Redux 구성 요소 - Store

store는 앱에 오직 하나만 있고, 이 유일한 store를 사용하여 app의 전체 상태를 관리 한다.

import { createStore } from 'redux'
import modalReducer from './ModalReducer';

const store = createStore(modalReducer);

• 매개변수의 우측에 콜론(:)과 매개변수의 타입을 정의
• return 값의 타입은 소괄호()우측에 타입을 정의 ➡ formatDate의 매개변수 d는 Date 객체 타입을 받아야하고, return 값은 문자열이어야 한다

const formatDate = (d: Date): string => { // ✅
    const year = d.getFullYear();
    const month = d.getMonth() + 1;
    const day = d.getDate();

    return `${year}년 ${month}월 ${day}일`;
};

const today = formatDate(new Date());
console.log(today);

// lang의 경우 인자를 전달하지 않으면 "ko"라는 문자열 값이 할당
// delimiter는 물음표를 사용하여 선택적으로 인자 전달
let formatDate = (d: Date | number, lang = "ko", delimiter?: string): string => {
};

📌 새로운 타입 - 기본

💡 1. Any

• 어떤 타입이라도 모두 지정 가능하다
• JS로 컴파일된 코드를 보면 아무 타입도 지정되지 않은 원래의 JS 코드와 똑같다. ➡ any 타입을 쓰면? 타입스크립트 안 쓴 거와 같다 (any는 쓰지말자)

  💡 2. void

• void는 any와는 반대로 어떤 타입도 없다는 뜻
• 보통 함수에서 반환값이 없는 경우 사용

  💡 3. Enum

• 언제 사용 ? 상수로된 세트 값이 필요할 때

  // Category라는 이름의 enum 타입을 정의한다
  // Category의 enum 값에 Past, Pizza, Dessert 가 있다.
  enum Category {
    Pasta,
    Pizza,
    Dessert
  }
  let menuCategory: Category = Category.Pasta; // 0
  

// enum에 값 부여 enum Category { Pasta = 'pasta', Pizza = 'pizza', Dessert = 'dessert' } let menuCategory: Category = Category.Pasta; // pasta

### 💡 4. union
- union타입은 여러 타입이 올 수 있을 때 사용
```tsx
function formatDate(date: string | number | Date): string {
    // 로직 생략

    return `${year}년 ${month}월 ${day}일`
}

formatDate(20201028);
formatDate(new Date());
formatDate('20201028');

• 배열에 여러 타입의 값을 사용하고 싶을 때, 튜플을 쓸 때와 union을 쓸 때의 차이점

  // union
  let starNumberArr: (number | string)[] = [1, 2];
  starNumberArr.push("3점");
  

// tuple let starArr: [number, string] = [1, "1점"];

- union은 사용하고자 하는 타입 중에 하나만 있어도 가능.
튜플을 사용하면 배열의 요소에 정의한 타입이 모두 존재해야 한다.

### 💡 5. Type Alias
- 타입을 재사용하거나, 객체를 위한 타입을 정의할 때 많이 사용
```tsx
// 방법은 아래처럼 type으로 정의하거나, interface로 타입을 정의하거나.
type ID = number | string;

//checkInfo 함수의 매개변수 info 객체를 위해 Info라는 타입을 만들기.
type Info = {
  id: ID;
  pw: string;
};

function checkInfo(info: Info) {

}

let id: ID = "1010";
checkInfo({ id, pw: "password" });

📌 타입추론 (Type Inference)

• 타입스크립트에서는 타입을 표기하지 않아도 타입스크립트 컴파일러가 변수에 할당된 값을 보고 타입을 추측

  // ts 파일에서
  let starArr = [1, 2, 3];
  starArr.push('4점');  
  // 에러: Argument of type 'string' is not assignable to parameter of type 'number'.
  // starArr는 숫자로만 이루어진 배열이 할당되어, number[] 타입으로 추론됨 => 에러 발생!

📌 인터페이스 (Interface)

• state와 props의 타입을 정의하는데 주로 사용

• ** readonly, ? **키워드 사용

  // readonly는 읽기만 가능한 프로퍼티로, 값을 수정할 수 없습니다.
  // 프로퍼티명 다음에 물음표(?)를 사용하면 해당프로퍼티를 추가해도 되고 안해도 됩니다.
  interface Restaurant {
    readonly name: string;
    star: number;
    address?: string;
  }
  

const chroad3: Restaurant = { name: "취향로3가", star: 5, };

chroad3.name = "chroad3";  // 에러: Cannot assign to 'name' because it is a read-only property. chroad3.star = 4;

const sipboon: Restaurant = { name: "십분의일", star: 5, address: "을지로3가", };

- **`extends` 사용 **: 기존에 정의된 인터페이스를 확장
```tsx
interface BasicInfo {
    name: string;
    star: number;
}
const sipboon: BasicInfo = {
    name: "십분의일",
    star: 5,
};

// extends
interface DetailInfo extends BasicInfo {
    address: string;
    phone: string;
    position: number[];
}
const chroad3: DetailInfo = {
    name: "취향로3가",
    star: 5,
    address: "을지로3가",
    phone: "123-456-7890",
    position: [37.565496, 126.99142],
};

• *교차타입 : type 사용 * ➡ 합쳐서 새로운 인터페이스를 만드는 것은 아니고, & 기호를 사용하여 기존에 정의했던 인터페이스를 합쳐서 새로운 타입을 만드는 것

  interface BasicInfo {
    name: string;
    star: number;
  }
  

interface DetailInfo { position: number[]; }

type Info = BasicInfo & DetailInfo;

---
## 📌 타입호환성 (Type Compatibility)

> **Q.  v1, v2 둘 중에 어떤 라인이 에러가 날까?**

```tsx
function getStar(score: number | string, scoreNum: number) {
  const v1: number = score;
  const v2: number | string = scoreNum;
}

• (정답) v1
• 만약 score가 문자열로 전달됐다면 string 타입이 되기 때문에 v1 타입인 number에 포함되지 않는다.
• scoreNum 매개변수는 숫자타입이기 때문에 v2타입인 number, string 둘 중에 하나 포함되므로 타입이 호환된다.

📌 제네릭 (Generic)

• 타입을 정의할 때 특정 타입으로 고정된 것이 아니라,
• 내가 원하는 타입을 자유롭게 지정해서 계속 사용하고 싶을 때* 제네릭을 사용
• 제네릭은 타입을 마치 재사용할 수 있는 변수처럼 취급해서 여러 군데에서 사용하고 싶을 때 사용
• 제네릭은 함수명 우측에 화살표괄호(<>)로 감싼다.
• T는 특별한 의미가 없는 변수명 같다고 생각하면 되는데, 제네릭을 사용할 때 보통 대문자 T를 자주 사용한다. (내가 원하는 이름으로 자유롭게 작성할 수 있다)

function makeArr<T>(el: T): T[] {
    return [el];
}

makeArr<number>(1);      // 1 number[]
makeArr<string>("1점");  // 2 string[]
makeArr<boolean>(true);  // 3 boolean[]

• 제네릭 타입을 명시하지 않아도 컴파일러는 전달되는 인자값을 통해 타입을 추론하여 T의 타입을 결정
• 아래 코드는 훨씬 간결하고 가독성이 높아졌지만, 추후 유지보수를 위해서나 더 복잡한 예제의 예상치 못한 오류를 위해 제네릭 타입을 정확히 써주는게 좋을 때도 있다.

  makeArr(1);
  makeArr("1점");
  makeArr(true);

📌 리액트를 위한 타입스크립트

💡 객체 타입을 정의하는 방법은 object, interface, type alias 세 가지!

• object 타입 → 타입을 재사용할 수 없으며, 프로퍼티가 많을 수록 가독성이 좋지 않다
• state나 props를 정의할 때** interface나 type을 사용하는 것이 좋다.**
• type과 interface는 확장, 병합 가능성이라던지 선언 등의 차이점이 있어서 상황에 따라 적절하게 사용하면 되지만, 타입스크립트 공식 문서에는 type보다 interface를 사용하라고 되어있다.

💡 함수형 컴포넌트의 타입을 선언하는 두 가지 방법

1. 리액트의 FC 타입 사용

interface StarsProps {  // prop 타입 정의
  star: number;
}

const Stars: React.FC<StarsProps> = ({ star }) => {   //
  return ( 
    <div>
      {makeStars(star)}
    </div>
  )
}

2. 일반적인 함수정의 방식

interface StarsProps {   // prop 타입 정의
  star: number;
}

const Stars = ({ star }: StarsProps): JSX.Element => { // 
  return ( 
    <div>
      {makeStars(star)}
    </div>
  )
}

💡 Hooks

* useState

• 특별히 타입을 명시하지 않더라도 타입추론을 통하여 타입이 지정된다.

  const [like, setLike] = useState(false);
  

useState(initialState: boolean | (() => boolean)) : [boolean, Dispatch<SetStateAction>]

- state의 초기값을 설정할 때 null을 사용하면? 유니온 타입을 사용하여 타입을 명시
```tsx
// 유니온 타입으로 전달
const [like, setLike] = useState<boolean | null>(null);

• state에 객체가 포함된 경우, 자세한 프로퍼티 타입을 알 수 있도록 아래와 같이 정의

  // state 타입 정의
  interface Comment {
    comment: string;
    username: string;
    date: string;
    star: number;
  }
  const [comments, setComments] = useState<Comment[]>([]);

* useRef

• useState처럼 타입을 명시하지 않아도 된다.
• 만약 코드의 명확성을 위해서 타입을 정의하고 싶은 경우, 아래와 같이 ref의 태그에 맞는 제네릭을 넘겨주면 된다.

  const reviewRef = useRef<HTMLDivElement>(null); 
  //로직 생략
  

return ( <>  

### 💡 Event Handler
- 이벤트 핸들러 함수의 이벤트 매개변수에는 특별한 타입이 필요하다
- 물론 매개변수에 타입을 명시하지 않아도 오류는 나지 않지만, 정확히 어떤 종류의 이벤트이고, 어느 태그에서 발생하는 것인지 써주는 것이 좋다.
- 일반적으로 타입 이름은 "이벤트타입Event"으로 ChangeEvent, FormEvent, TouchEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent 등이 있다.

### 💡 전역 변수
- window에 외부 라이브러리 변수를 추가하려면 아래와 같이 해당 라이브러리에서 사용하는 전역 변수명을 추가하면 된다.
```tsx
declare global {
  interface Window {
    kakao: any;
  }
}

• 현재 날짜 시간 및 포맷은 js코드가 실행된 시스템에 의해 결정된다.

💡 UTC (Coordinated Universal Time)

• 국제표준시

💡 KST (Korea Standard Time)

• UTC +9시간 더한 시간
• UTC가 밤 9시면, KST는 아침 9시가 된다.

💡 ISO 8601

• 날짜와 시간과 관련된 데이터 교환을 다루는 국제표준 ➡ 예시: "2021-08-01T09:54:33.894Z"
• 특정 의미를 제공하는 ("-", ":", "T", 그리고 "Z"와 같은) 어떤 문자들로 작성되어야 한다 ➡ 시간이 UTC인 경우, 시간 뒤에 빈칸없이 Z를 직접 추가해야 한다

(결론) 백엔드와 ISO 형식으로 UTC로 주고 받고, 한국 시간으로 바꿔서 사용해야 한다!

📌 Stack & Queue

💡 Stack

• 리스트의 한쪽 끝에서 수행 되는 선형 리스트 형태로서 스택의 작업에는 삽입(push), 삭제(pop)
• LIFO(Last In Frist Out) : 스택에 마지막으로 입력된 자료가 제일 먼저 삭제 하는 방식
  • 브라우저의 History
  • 터미널 cd(Change Directory), pwd(현재경로) 명령어
    • 함수 실행 콜스택

💡 Queue

• 큐는 여려개의 데이터 항목을 일정한 순서대로 나열 하는 형태로 push(입력), pop(삭제) 작동
• FIFO(Frist In Frist OUT): 선입선출 방법으로 가장 먼저 데이터에 대해서 삭제 하는 방법
  • 프린터 작업 스케줄러
  • Javascript 비동기 처리 관련
    • DOM Event
    • setTimeout
    • HTTP 통신을 하는 fetch 함수

📌 Linked List

> Linked List 블로그 작성(미완성)

📌 Sort Algorithm

> 정렬 알고리즘 블로그 작성(미완성)

🔗 Github

🔗 베이스코드 개선되어야 할 사항을 노션에 작성하기

과제 내용

• 간단한 베이스 코드가 주어집니다. (베이스 코드 링크)
• 베이스 코드는 ReactJS 기반으로 만들어져 있으며, 몇개의 버그가 포함되어 있습니다.
• 요구사항을 잘 읽고, 버그 수정과 필요한 기능을 추가합니다.

[구현 중 지켜야할 사항]

• TypeScript 사용
• antd 라이브러리 사용( modal, datepicker 필수)
• 인터넷이 안되는 환경 ➡ 추가 라이브러리 설치 안됨

과제를 끝내고 회고 내용

🔰 1. Typescript

• 프리온보딩 코스를 하면서 처음으로 타입스크립트를 적용한 프로젝트!
  • 초반에 codesandbox에 있는 걸 zip 파일로 다운받아서 실행 했는데, 이래저래 안되서 구글링 후 ts 버전을 바꾸어 설치하니 동작이 되었다.
• ts 적용 후 개발하다 보면 아무래도 type 관련 에러들이 많이 발생한다.
• 처음엔 ts로 실행시키는 것도 어렵고, 개발하는 것도 어렵고 불편하다 생각했지만, 완료 후에 보니 내가 작성한 코드는 null값에 대한 에러처리를 잘 안잡아 주고 있다는 것도 알게되고, 개발 코드도 다시 한 번 돌아보게 되는 시간이었다.

🔰 2. Todo List 화면에 현재 시간을 표시

• 수업시간에 배운대로, ISO 8601 국제표준 형태로 저장해서, 사용할 때 한국 시간으로 바꿔서 저장해주었다.

🔰 3. Todo 항목에 완료 목표일을 기입

• antd Datepicker를 사용
• disabledDate property를 사용하면 오늘 날짜 이전은 disabled 되도록 해준다 ➡ TodoList다 보니, 오늘 날짜는 disabled 되면 안될 것 같아서 아래처럼 수정했다

  const disabledDate = (current: moment.Moment): boolean =>
    current && current.valueOf() < new Date().setHours(0, 0, 0, 0).valueOf();

🔰 4. Todo 항목에 완료 버튼을 누르면 Todo 생성

아래의 경우에는 TodoList가 추가되지 않고, antd 모달 경고창 출력 & 버튼 UI를 변경해줬다.

• TodoList 텍스트가 빈 값인 경우(ex " " 공백문자열 포함)
• TodoList 완료 목표일을 선택하지 않은 경우
• TodoList 텍스트 & 완료일이 동일한 아이템이 존재할 경우

🔰 5. 로그인 기능

라이브러리를 추가로 설치하지 못하는 경우이기 때문에,localStoarge 를 사용하여 아래처럼 로그인/로그아웃 기능을 구현했다.

1. 웹 사이트에 처음 접속 시, 모달창을 띄워서 사용자명을 입력받는다.
2. localStoarge의 todo-user 값에 사용자명을 저장한다.
3. 구현된 Spinner 컴포넌트를 활용하여, 1초 동안 로딩 중임을 보여주고 화면으로 전환한다.
4. TodoList 추가 시, 기존의 todos가 아닌 사용자명-todos에 입력값을 저장한다.
5. 사용자가 로그아웃 버튼을 누르면 todo-user 값을 삭제한다.
6. 다시 사용자가 로그인 할 경우, 사용자명-todos에 저장된 목록을 불러온다.
7. 만약 todo-user가 존재하지 않는다면, 다시 모달창을 띄워 사용자명을 입력 받는다.

> 🔗노션 <

• 개선될 수 있는 부분 간단한 TodoList다 보니, 개선되어야할 부분이 여러 개 생각이 났다. 그 중 구현해보고 싶은 아래 5가지를 정해서 기능을 완료했고 자세한 건 노션에 작성했다!

  • 추가 기능 구현 부분
  1. TodoList 입력순/ 마감임박순 정렬 기능 구현
  2. 등록된 TodoList와 텍스트&완료 목표일이 동일한 중복된 항목은 추가 불가능 기능 구현
  3. 완료 목표일 또는 텍스트가 입력되지 않은 경우 추가 불가능 기능 구현
  4. DatePicker에서 현재 날짜보다 이전 날짜는 완료 목표일로 설정 불가능하도록 기능 구현
  5. LocalStorage를 통한 로그인/ 로그아웃 기능 구현

• 로그인 기능 인터넷 연결이 될 때, 안될 때 로그인 기능 구현 방법 고려하기

• 재사용 가능한 Timer 컴포넌트 만들기
• 한국 표준 시 기준으로 타이머 생성 “ko-KR” 지역시간 표기법 (예> 2021년 7월 20일 화요일), “en-US” 지역시간 표기법 (예> Tuesday July 20, 2021)

// Timer 컴포넌트
const Timer = ({ type }) => {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setDate(new Date());
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <Wrapper type={type}>
      <h2>{dateLocalFunc(date, type)}</h2>
    </Wrapper>
  );
};

//utils/constant.js
export const DATE_LOCAL_OPTIONS_KR = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  timeZone: 'Asia/seoul',
};

//utils/date.js
export const dateLocalFunc = (date, type) =>
  type === 'KR'
    ? date.toLocaleString('ko-KR', DATE_LOCAL_OPTIONS_KR)
    : date.toLocaleString('en-US', DATE_LOCAL_OPTIONS_KR);

2. 입력

• 입력 데이터의 형식은 “숫자,숫자,숫자…” (예> 1,2,3,4)
• 잘못된 형식의 입력 데이터는 예외처리 필요

//utils/regex.js
export const inputRegEx = /^(([0-9])+[\s]?,[\s]?)*([0-9]+)$/;

const inputValidator = (str) => setInputError(!inputRegEx.test(str));

const onInputChange = (e) => {
  setInputTxt(e.target.value);
  inputValidator(e.target.value);
};

const onInputKeyPress = (e) => {
  if (e.key === 'Enter') {
    onSort();
  }
};

//생략..
//jsx 부분
<InputNums
  value={inputTxt}
  ref={inputRef}
  onChange={onInputChange}
  onKeyPress={onInputKeyPress}
  />

<Error isError={inputError && inputTxt} />

*3. 시작 버튼 및 결과 *

• 사용자가 시작 버튼을 누르면 소팅이 시작.
• 오름차순 결과가 바로 보여지고, 3초 후 내림차순 결과 보여주기
• 결과 데이터의 형식은 “숫자, 숫자, 숫자…” (예> 1, 2, 3, 4)

//utils/stringToArray.js
export const stringToArray = (str) =>
  str
    .trim()
    .split(',')
    .map((str) => parseInt(str));

const onSort = () => {
  const target = stringToArray(inputTxt);

  setAscend('Loading...');
  setDescend('Loading...');

  new Promise((resolve, _reject) => {
    setAscend(bubbleSort(target, 'asc').join(', '));
    btnRef.current.disabled = true;
    inputRef.current.disabled = true;
    setTimeout(() => {
      resolve();
    }, 3000);
  }).then(() => {
    setDescend(bubbleSort(target, 'desc').join(', '));
    btnRef.current.disabled = false;
    inputRef.current.disabled = false;
  });
};

//생략..
//jsx 부분
<StartButton
  type="button"
  ref={btnRef}
  disabled={inputError}
  onClick={onSort}>
  시작 버튼
</StartButton>

• 알고리즘은 소팅알고리즘(sort)을 사용하지 않고, 본인이 구현할 수 있는 정렬 방법으로 직접 구현

//utils/constant.js
export const SORT = {
  ASC: 'asc',
  DESC: 'desc',
};

export const bubbleSort = (arr, sortType) => {
  let result = [...arr];

  for (let i = 0; i < result.length - 1; i++) {
    for (let j = 0; j < result.length - i; j++) {
      if (
        sortType === SORT.ASC
          ? result[j] > result[j + 1]
          : result[j] < result[j + 1]
      ) {
        [result[j], result[j + 1]] = [result[j + 1], result[j]];
      }
    }
  }

  return result;
};

🔗 Github

과제를 끝내고 회고 내용

🔰 1. 자바스크립트 날짜 옵션 주기

Date()를 사용할 때 옵션을 추가하면, 원하는 날짜 스트링 형식을 훨씬 간결하고 빠르게 구현할 수 있다.

🔰 2. 테스트 코드 작성

이번 과제를 하면서 간단하지만, 테스트 코드를 작성해보았다. (자주 쓰지 않으면 금방 까먹게 된다. 테스트 코드도 계속 공부해야겠다💪)

• 정규표현식 테스트 실행 > 테스트 코드
• 오름차순/내림차순 테스트 실행 > 테스트 코드
• 입력데이터 배열로 변환 테스트 실행 > 테스트 코드

🔰 3. 정렬 알고리즘

입력데이터의 형식은 “숫자,숫자,숫자…” (예> 1,2,3,4) 이렇게만 보고 정렬은 간단하군! 복잡하게 생각하지 말고 구현이 쉬운 버블 정렬을 선택했는데... 회고록을 쓰면서 성능이 더 좋은 정렬 알고리즘을 구현했어야 했나...? 싶은 마음이 든다.😥 > 정렬 알고리즘 시간복잡도

과제 내용

1. 타이머

• 재사용 가능한 Timer 컴포넌트 만들기
• 한국 표준 시 기준으로 타이머 생성 “ko-KR” 지역시간 표기법 (예> 2021년 7월 20일 화요일), “en-US” 지역시간 표기법 (예> Tuesday July 20, 2021)

2. 입력

• 입력 데이터의 형식은 “숫자,숫자,숫자…” (예> 1,2,3,4)
• 잘못된 형식의 입력 데이터는 예외처리 필요

*3. 시작 버튼 및 결과 *

• 사용자가 시작 버튼을 누르면 소팅이 시작.
• 오름차순 결과가 바로 보여지고, 3초 후 내림차순 결과 보여주기
• 결과 데이터의 형식은 “숫자, 숫자, 숫자…” (예> 1, 2, 3, 4)
• 알고리즘은 소팅알고리즘(sort)을 사용하지 않고, 본인이 구현할 수 있는 정렬 방법으로 직접 구현

구현 내용정리

🔰 1. 타이머 >> 구현코드

• setInterval() 함수를 통해 new Date()를 1초마다 다시 받아온다.
• dateLocalFunc() 함수를 생성하여 보여줘야 할 지역시간 표기법으로 변경한다.
• toLocaleString() : 사용자의 문화권에 맞는 시간표기법으로 년,월,일 시간을 리턴한다.

⭐ toLocaleString 함수 사용할 때, 아래처럼 다양한 옵션이 있는지 몰랐다. 옵션만 잘 사용해도 나중에 날짜 관련 코드 짜는 데 많은 도움이 될 것 같다!! 참고 - MDN - Intl.DateTimeFormat() constructor

`weekday`
- "long" (e.g., Thursday) /  "short" (e.g., Thu) / "narrow" (e.g., T).

`year`
- "numeric" (e.g., 2012) / "2-digit" (e.g., 12)

`month`
- "numeric" (e.g., 2) / "2-digit" (e.g., 02) / "long" (e.g., March) / "short" (e.g., Mar) / "narrow" (e.g., M)

`day`
- "numeric" (e.g., 1) / "2-digit" (e.g., 01)

`timeZone`
- The time zone to use. 
- The only value implementations must recognize is "UTC"; the default is the runtime's default time zone. 
- Implementations may also recognize the time zone names of the IANA time zone database, such as "Asia/Shanghai", "Asia/Kolkata", "America/New_York".

🔰 2. 입력 >> 구현코드

• 정규식으로 “숫자,숫자,숫자…”만 허용되고, 그 외는 에러로 간주하여 시작버튼을 누를 수 없도록 하였다.

• 그런데 결과값에는 공백이 포함되어 있고, “숫자,숫자,숫자…”만 입력하기엔 사용자가 공백을 입력하는 경우도 있을 것 같아 정규식에 콤마 "," 앞 뒤로 공백을 허용하도록 변경하였다.

• 정규식이 맞게 되는지 확인을 위해 테스트 코드를 작성하여 확인했다.

  // 정규 표현식
  const inputRegEx = /^(([0-9])+[\s]?,[\s]?)*([0-9]+)$/;

🔰 *3. 시작 버튼 및 결과 * >> 구현코드

• 시작 버튼을 누르면 stringToArray() 함수로 입력된 값을 콤마"," 기준으로 나누고, 모든 요소를 숫자로 변환한 배열 값을 반환시킨다.

• bubbleSort(값, 정렬방식) 에 따라 정렬되도록 함수를 실행시킨다.

• 오름차순이 되고 3초 후 내림차순이 보이는 로직을 구현하기 위해 Promise를 사용하였다.

  new Promise((resolve, _reject) => {
    // 오름차순 로직 구현
    setTimeout(() => {
      resolve();
    }, 3000);
  }).then(() => {
  // 내림차순 로직 구현
  });

• 정렬하는 중에 input값 수정 및 button 클릭 이벤트가 발생하지 않도록 disabled 시켰다.

• 또, 내림차순은 3초 뒤 결과값이 나타나므로 기다리는 동안 Loading... 텍스트를 보여준다.

• 초기화 버튼을 추가하여 input값 및 소팅 결과를 초기화시킬 수 있도록 구현했다.

👀 아쉬웠던 점과 해결방안

1. 정렬 알고리즘이라 당연히 양의 정수의 숫자로 생각했는데, 음수나 소수점에 대한 정렬도 되어야 한다. ➡ 리팩토링 하면서 테스트코드까지 함께 작성해봐야겠다.

JavaScript 코드가 실행되고 있는 컨텍스트(환경)

• 실행컨텍스트는 실행할 코드에 제공할 환경 정보들을(변수 정보들) 모아놓는다. 함수를 실행할 때마다, 그 함수에 대한 새로운 실행 컨텍스트를 생성하여 자신만의 고유한 컨텍스트에서 실행된다.

• 어떤 정보냐면.. → 코드 실행하기 위한 여러가지 정보 → ex) 어떤 변수가 있는지, 어떤 변수를 hoisting 할지, scope는 어떻고 scope chain은 어떻고, this는 어디에 어떻게 binding 되고 등등..

📌 호이스팅?

💡 변수의 호이스팅

• 호이스팅은 변수의 선언을 끌어올리는 것을 말한다.
• 선언부를 끌어올리고, 할당은 코드가 실행되는 시점에 진행된다.

왜 y 변수에 Uncaught ReferenceError: y is not defined 에러가 아닌, undefined가 찍힐까?

var x = 1; 
console.log(x + " " + y); // ✅  '1 undefined'
var y = 2;

var x = 1; 
var y; // ✅ Declare y : 호이스팅이 발생하였으므로, undefined가 된다
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y

💡 var / let / const의 차이점

1. var는 함수 레벨 스코프 let, const는 블록 레벨 스코프

2. var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만, let, const는 에러가 발생한다.

3. var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만, let, const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하면 에러가 발생한다.

4. var, let은 변수 선언시 초기 값을 주지 않아도 되지만, const는 반드시 초기값을 할당해야 한다.

5. var, let은 값을 다시 할당할 수 있지만, const는 한 번 할당한 값은 변경할 수 없다. (단, 객체 안에 프로퍼티가 변경되는 것까지 막지는 못합니다)

** ✨ 2. 내용을 보면, 그럼 let과 const는 호이스팅이 되지 않는걸까?           할 수 있지만 사실 var, let, const는 다 호이스팅 된다. **

다만 var는 호이스팅 되면서 초기 값이 없으면 자동으로 undefined를 할당하고, let, const는 자동으로 초기값이 할당되지 않는다. let, const는 변수가 선언되고 변수에 값이 할당 되기 전 TDZ(Temporal Dead Zone)에 있게 된다.

*Q1. TDZ 문제 > 출력될 결과 값은? *

let letValue = 'out Scope';

function hello() {
  console.log('letValue', letValue);
  let letValue = 'inner scope';
};

hello();

✅ 답 : Uncaught ReferenceError: Cannot access 'letValue' before initialization 에러가 발생한다.

1. JS엔진은 letValue변수와 hello 함수를 메모리에 등록한다.
   ➡ (GlobalContext의 Lexical Enviroment에 등록)
2. letValue를 'out Scope'로 초기화한다.
3. hello() 함수를 호출한다.
4. hello() 함수를 호출하면 실행 컨텍스트가 만들어지고 letValue를 메모리에 등록 ➡ (helloContext의 Lexical Enviroment에 등록) *let은 블록레벨 스코프를 가진다.
5. console.log 실행 ➡ letValue는 메모리에 초기화 되지 않은 채로 등록되어 있기 때문에 TDZ 상태에 있다 ➡ ReferenceError 발생!!!

💡 함수의 호이스팅

✅ 함수 선언문(function declaration)

function a(){
  //로직
}

➡ function 정의만 존재하고 별도의 할당 명령이 없다. ➡ 함수 자체가 호이스팅이 된다.

catName("Chloe"); // "My cat's name is Chloe"

function catName(name) {
  console.log("My cat's name is " + name);
}

✅ 함수 표현식(function expression)

const a = function(){
  //로직
}

➡ function 키워드로 정의한 함수를 변수에 할당하는 것을 말한다. ➡ 변수 const notHoisted; 선언만 호이스팅 되었고, 함수 할당 부분이 없으므로 에러 발생!

console.log(notHoisted) // undefined
notHoisted(); // TypeError: notHoisted is not a function

const notHoisted = function() {
   console.log('bar');
};

📌 스코프?

• 변수가 유효한(살아있는) 범위

💡 Global Scope

• 코드 어디에서든지 참조 가능
• var로 선언한 변수는 전역 객체에 속하게 된다.(프로퍼티가 된다)
  • client(브라우저)의 전역 객체는 window, Node.js에서는 global

💡 Local Scope

• JavaScipt는 다른 언어와 달리 scope의 범위가 함수 블록 내이다.
• 함수에 의해서만 scope가 생성된다. ({} 블록과 상관이 없다!!!)
• JavaScipt에서 let, const로 변수를 선언할 때의 scope은 블록({}) 단위이다.

    if (true) {
      var x = 5;
    }

    console.log(x);  // 5 → if 문 안에 있더라도, 일반 블록이므로 x는 전역변수가 된다.

💡 Scope Chain

• 변수가 해당 scope에서 유효하지 않을 때, 안에서부터 바깥으로만 차례로 검색해 나가는 것

Q1. Scope Chain

function sum() {
  var a = 3;
  var b = 5;

  function inner() {
    var b = 7;
    var c = 11;
    a = a + b + c;  // ✅ a = 3, b = 7, c = 11
    console.log(a);  // 21

  };
  console.log(a);  // 3
  inner();
  console.log(a);  // 21
};

sum();
console.log(a); // ✅ Uncaught ReferenceError: a is not defined

Q2. Scope Chain

var a = 1;
var outer = function () {
    var inner = function () {
        console.log(a);
        var a = 3; // ✅ 호이스팅으로 undefined 출력됨.
    }
    inner();
    console.log(a);  // ✅ a의 값이 outer에 없으면 **바깥으로만** 차례로 검색해 나간다 ➡ 1 출력
}
outer();
console.log(a);  // ✅ 1 출력

📌 클로져?

scope가 끝난 외부 함수의 변수를 참조할 수 있다.

• 예제 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

  var A = function() {
    var a = 1;
  
    var B = function() {
        return ++a;
    };
  
    return B;
  };
  

var outer = A(); console.log(outer()); // 2 console.log(outer()); // 3

  1. **`var outer = A()`** 에서 함수 B자체를 반환
      1. **`A()`** 실행했으므로 A의 실행컨텍스트는 종료됨
      2. **`outer`** 변수는 이제 **`B함수`**를 바라보고 있음
  2. **`outer()`** outer를 호출하면, 즉! B를 호출. a값은 계속 증가함
      1. B함수에는 a의 유효범위가 아니므로, 한 번 더 바깥(A)의 scope를 참조하고 계속 값이 증가함


- **메모리 관리**
  - JavaScript는 원래 메모리 관리에 신경쓰지 않아도 된다. 
    사용하지 않는 변수는 알아서 Garbage Collector에 수집
  - 그런데 closure에서는 의도적으로 변수를 사용하므로 메모리가 계속 소모됨
  ➡ 만약 GC에 수집되게 하려면 null이나 undefined를 할당하면 됨
---

## 📌 this?

- this는 실행컨텍스트가 생성될 때 결정된다. 
- 실행컨텍스트는 함수를 호출할 때 생성되므로, **this는 함수를 호출할 때 결정**된다.
- **this가 무엇이냐고 한다면 → this가 바라보고 있는 객체인데, 상황에 따라 대상이 달라진다.**

 ---

### 💡 1. 전역 공간에서 this가 바라보는 대상
- client(브라우저)에서는 `window`
- Node.js에서는 `global`

---

### 💡 2. 암시적 binding : 메서드로 호출될 때 this가 바라보는 대상 
- 객체의 프로퍼티에 할당된 함수를 호출하면, this는 해당 객체를 바라본다
- 물론 객체가 메서드로 호출해야 함

> **Q1. 암시적 binding**

```jsx
var name = 'lee';
var user = {
  name: 'kim',
  getName: function() {
    console.log(this.name);
  },
  age: 50,
  child: {
    age: 15,
    underTwenty: function() {
      console.log(this.age);
      return this.age < 20
    }
  }
}

user.getName();  // ✅ this는 user, "kim"
user.child.underTwenty();  // ✅ this는 user.child, "15"

user.parentUnderTwenty = user.child.underTwenty;
user.parentUnderTwenty(); // ✅ this는 user, "50"

Q2. 암시적 binding

var name = 'lee';
var user = {
  name: 'kim',
  getName: function() {
    console.log(this.name); // ✅ "kim"

    var inner = function() {  // inner 함수에서 this는? -> 전역 !!!
      console.log(this.name); // ✅ "lee"
    }
    inner();
  }
}

user.getName(); //✅ this는 user

💡 3. 명시적 binding : 원하는 대상으로 this binding

• call

  ➡ 함수를 호출할 때, 원하는 대상의 객체를 인자로 넘겨준다.

• apply

  ➡ call 메서드와 완전히 같은 기능이나, 호출할 함수에 인자를 배열로 넘김

• bind

  ➡ call과 비슷하지만, 바로 호출하는 것이 아니라 대상을 묶어놓기(binding)만 하는 것

var user = {
  name: 'kim',
  getName: function() {
    console.log(this.name);
  },
  age: 50,
  child: {
    age: 15,
    underTwenty: function() {
      console.log(this.age); // ✅ user의 age : 50
      return this.age < 20
    }
  }
}

user.child.underTwenty.call(user); //✅ this는 user로 명시적 binding

💡 arrow function

• this의 대상이 어떤 객체가 호출했느냐로 결정되지 않는다.
• 함수 내부에 this는 없으며, scope chain의 가장 가까운 this로 대상 결정!

💡 함수와 메서드 차이

• 함수와 메서드는 모두 function 키워드로 함수를 정의한 것을 의미

• 메서드 : 객체의 프로퍼티로 함수가 정의되어야 한다. (=객체가 함수를 호출해야 메서드!)

    let user = {
        name: 'kim',
        underTwenty: function(age) {
            return age < 20;
        }
    }
  
    user.underTwenty(30); // ✅ "메서드"!
    const under20 = user.underTwenty;
    under20(15); // ✅ 객체 안에 정의된 함수라도, 이것은 메서드가 아닌 "함수"!

💡 동기(Synchronouse)

• 현재 실행 중인 코드가 끝나야 다음 코드를 실행하는 것
• 현재 실행중인 task가 종료될때까지, 다음 task가 대기하는 방식
• 순차적으로 실행 ➡ (장점) task 실행 순서가 보장된다. ➡ (단점) task가 블로킹(blocking) 된다.

// blocking 예시
const arr = [];
for (let i = 0; i < 1000; i++) {
  arr.push(i);
  // 1000번 반복하면서 실행할 더더더더더 복잡한 코드
}
alert("안녕하세요);  // 확인 누를 때까지 console 안나옴
console.log(arr);

---

### 💡 비동기(Asynchronouse)
- 현재 실행 중인 코드가 완료되지 않아도, 다음 코드로 넘어감
- **비동기 task는 실행하라고 `브라우저`에 맡겨놓고, 다음 task로 넘어감**
  ➡ (장점) task가 블로킹(blocking) 되지 않는다.
  ➡ (단점) task 실행 순서가 보장된다.

> ```javascript
// 화면 그리기 1
axios.get(url)
  .then(response => {
    // api 호출하고 응답받으면 실행
  })
// 화면 그리기 2
// 다른 로직~~

1. 화면그리기 1 하고,
2. axios api 호출하고 (언제 응답이 올지는 모름)
3. 화면그리기 2 하다가
4. 응답이 오면 로직을 실행하고,
5. 다시 다른 로직 진행한다.

💡 비동기 처리가 필요한 이유

> 이벤트루프 작성내용 참고

• 자바스크립트 엔진은 한 번에 하나의 task만 실행할 수 있는 Single Thread.
• Single Thread는 한 번에 하나의 task만 실행할 수 있기 때문에 처리에 시간이 걸리는 task를 실행하는 경우 Blocking(작업 중단)이 발생한다. ➡ 콜백함수의 등장!!

📌 콜백함수 (Callback Function; cb)

• 함수의 매개변수가 함수일 때, 매개변수로 받은 함수를 콜백함수라고 부른다.
• 콜백 헬, 콜백 지옥 발생 ➡ function()안에 function()안에 function()안에 계속 코드 작성..

// [1] 콜백함수 예시 => 동기 함수 => closeFn이 콜백함수!
function showMessage(msg, closeFn) {
  closeFn(true);
}

// [2] 콜백함수 예시 => 동기 함수 => map 함수의 인자 el => el2 함수가 콜백함수! [1,2,3].map(el => el2);

// [3] 콜백함수 예시 => 비동기 함수 => e => {} 함수가 콜백함수! window.addEventListener('keydown', e => { // 로직 });

// [4] 콜백함수 예시 => 비동기 함수 => setTimeout에 넘긴 익명함수가 콜백함수! setTimeout(function(){ alert("Hello"); }, 3000);

---


## 📌 Promise ?
- 비동기 동작을 처리하기 위해 ES6에 도입되었다.
- **Promise는 클래스**다.
- Promise 클래스를 **인스턴스화 해서 promise 객체를 만든다**.
- **반환된 promise로 원하는 비동기 동작을 처리**한다.
- Promise는 **`state`, `resolve`, `reject` 함수를 이해**하면 된다.

---

### 💡 1. resolve, reject

> - **`resolve`** : 성공했을 때 실행할 함수

```javascript
let promise = new Promise(function(resolve, reject) {
  // 여기 비동기 로직을 작성!
  // 시켜놓고 언제 완료될지 모르는 로직!
  setTimeout(function() {
    resolve('hello world');// resolve 함수에 인자 넘기면
  }, 2000);
});

// resolve로 넘기는 콜백함수의 매개변수로 받을 수 있다.
promise.then(function(msg) {
  console.log(msg);  // 2초 뒤에 hello world!
});

reject : 실패했을 때 실행할 함수

let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    reject('으악!'); // 실패했다고 가정하고 reject 호출
  }, 2000);
});

// then 인자 둘 다 cb 함수
// 첫 번째는 성공했을 때 실행할 resolve 함수 정의
// 두 번째는 실패했을 때 실행할 reject 함수 정의
promise.then(function() {
    console.log('resolve');
  }, function(msg) {
    console.log('reject', msg);
});

Q1. Promise안에 resolve() 함수가 여러개 있으면 어떻게 동작할까?

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve(1); // ✅ 첫 번째 resolve 만 실행됨
        resolve(2);
    }, 1000);
});

Q2. Promise안에 resolve(), reject() 함수가 여러개 있으면 어떻게 동작할까?

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject(1); // ✅ 첫 번째 reject 만 실행됨
        resolve(2);
        resolve(3);
    }, 1000);
});

Q3. Promise안에 실행순서 맞추기!

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log(1);
        resolve(2);
        console.log(3);
        resolve(4);
    }, 1000);
});

promise.then(function(data) {
    console.log(data);
});

1. console.log(1)
2. console.log(3)
3. resolve(2) 실행 & console.log(2) ✅ ➡ 정답: 1 -> 3 -> 2

💡 2. chaining

• 여러 개의 비동기 작업을 순차적으로 해야하는 경우
• 순차적으로 각각의 작업이 이전 단계 비동기 작업을 성공하고 나서, 그 결과값을 이용하여 다음 비동기 작업을 실행해야 하는 경우
• then의 콜백함수(=handler function)는 여러 타입의 값을 반환할 수 있다.

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve(1);
    }, 1000);
});

promise
  .then(function(first) {  
    console.log('first', first); // ✅ 'first',1
    return 22;  //값 2를 리턴
  })
  .then(function(second) { //second에 22가 들어온다.
    console.log('second', second); // ✅ 'second',22
    return new Promise(function(resolve, reject) { // new Promise를 리턴
      setTimeout(function() {
        resolve(333);
      }, 1000);
    });
  })
  .then(function(third) {
    console.log('third', third); // 1초 뒤 333 실행됨 // ✅  'third', 333
  });

💡 3. state

promise 객체는 "상태"를 갖고 있다.

1. Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
2. Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
3. Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

💡 4. 에러 처리

reject handler와 catch 방식은 똑같다. catch문이 가독성이 더 좋다.

let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    reject('으악!');
  }, 2000);
});

promise
  .then(function() {})
  .catch(function(err) {  // ✅ catch
    console.log(err);
  });

Q1. console.log 정답은? ➡ 4,5

function job() {
    return new Promise(function(resolve, reject) {
        reject(); // reject를 실행
    });
}

job()
  .then(function() {
    console.log(1);
  })
  .then(function() {
    console.log(2);
  })
  .then(function() {
    console.log(3);
  })
  .catch(function() {
    console.log(4); // ✅ 4 출력
  })
  .then(function() {
    console.log(5); // ✅ 5 출력
  });

*Q2. console.log 정답은? ➡ success, error, Error caught *

function job(state) {
    return new Promise(function(resolve, reject) {
        if (state) {
            resolve('success');
        } else {
            reject('error');
        }
    });
}

job(true)
  .then(function(data) {
    console.log(data); // ✅ job(true) 이므로 resolve 실행 && 'success' 출력
    return job(false); // return 값으로 job(false) 반환
  })
  .catch(function(error) { 
    console.log(error); // ✅ job(false) 이므로 reject 실행 && 'error' 출력
    return 'Error caught'; // return 값으로 string 반환
  })
  .then(function(data) {
    console.log(data); // ✅ 'Error caught'값을 전달 받음 && 'Error caught' 출력
    return job(true); // return 값으로 job(true) 반환
  })
  .catch(function(error) {
    console.log(error); //-> job(true)의 resolve가 실행되므로 catch는 실행되지 않는다.
  });

💡 5. Promise.finally() / Promise.all()

• Promise.finally()

  • finally() 메서드는 결과에 관계없이, promise가 처리되면 무언가를 프로세싱 또는 정리를 수행하려는 경우에 유용하다.
  • finally 콜백은 어떠한 인수도 전달받지 않는다. ➡ promise가 이행되었는지 또는 거부되었는지를 판단할 수 없기 때문!

• Promise.all()

  • 여러 프로미스를 다 하고 그 다음에 하고 싶은 경우에 유용하다.

예제1 - Promise.all()

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/remy',
  'https://api.github.com/users/jeresig'
];

// map every url to the promise of the fetch
let requests = urls.map(url => fetch(url));

// Promise.all waits until all jobs are resolved
Promise
  .all(requests)
  .then(responses => responses.forEach(
    response => alert(`${response.url}: ${response.status}`)
));

예제2 - Promise.all() - 모든 promise가 resolve 될 때

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 3초 뒤 > Array [3, 42, "foo"] 
});

*예제3 - Promise.all() - reject되는 promise가 있다면? * ➡ Promise.all()은 배열 내 요소 중 어느 *하나라도 거부하면 즉시 거부!! *

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 3000, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 3초 뒤 > `all:1 Uncaught (in promise) foo` 에러반환
});

📌 async & await

• async function은 ES8에 도입되었으며, 비동기 함수를 선언한다.

• async function은 promise를 반환한다.

• await를 쓰려면 async 함수 안에 꼭 있어야 한다!

  ---

  • (변경 전) .then().then().then() ~ 가독성이 떨어진다.

axios('https://api.test.com/proudcts')
  .then(function(response) {
    let firstProductId = response.products[0].id;
    return axios('https://api.test.com/proudct/comments?id='+firstProductId);
  })
  .then(function(response) {
    let firstCommentId = response.comments[0].id;
    return axios('https://api.test.com/proudct/comment/likes?id='+firstCommentId)
  })
  .then(function(response) {
    let likes = response.likes;
    let likesCount = likes.length;
});

• (변경 후) async/await 문법으로 수정하여 가독성을 높인다.

  (async () => {
  try {
   let productResponse = await fetch('https://api.test.com/proudcts');
   let firstProductId = productResponse.products[0].id;
  
   let commentResponse = await fetch('https://api.test.com/proudct/comments?id='+firstProductId);
   let firstCommentId = commentResponse.comments[0].id;
  
   let likeResponse = await fetch('https://api.test.com/proudct/comment/likes?id='+firstCommentId);
   let likesCount = likeResponse.likes.length;
  
  } catch(error) {
   console.log(error);
  }
  })();

• fetch/axios 함수는 promise를 반환한다

• axios()와 new Promise()는 똑같다.

2주 동안 진행된 과제 중에서, 꼭! 리팩토링 하고 싶은 부분을 선정하여 수정해주세요.

> 🔗 과제 제출 링크 - 노션 <

📑 과제 내용

주어진 문자의 자음별 개수를 구해주세요.

• input: "사과1호랑이,고니 수박BT닭"
• output: ㄱ:2 ㄴ:1 ㄷ:1 ㄹ:1 ㅁ:0 ㅂ:1 ㅅ:2 ㅇ:1 ㅈ:0 ㅊ:0 ㅋ:0 ㅌ:0 ㅍ:0 ㅎ:1

🔰 자바스크립트 코드 작성

const input = "사과1호랑이,고니 수박BT닭";
const BASE_INDEX = '가'.charCodeAt(0);
const CHOSUNG_LIST = ['ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];
const OUTPUT_LIST = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ' , 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];

const answer = (input) => {
  const CHOSUNG = input
    .replace(/[^ㄱ-ㅎ가-힣]/g, "")
    .split("")
    .map((str) => CHOSUNG_LIST[parseInt((str.charCodeAt(0) - BASE_INDEX) / 588)]);

  return OUTPUT_LIST.reduce((acc, cur) => {
    acc[cur] = CHOSUNG.filter((str) => str === cur).length;
    return acc;
  }, {});
};

answer(input);

// {
//   'ㄱ': 2,
//   'ㄴ': 1,
//   'ㄷ': 1,
//   'ㄹ': 1,
//   'ㅁ': 0,
//   'ㅂ': 1,
//   'ㅅ': 2,
//   'ㅇ': 1,
//   'ㅈ': 0,
//   'ㅊ': 0,
//   'ㅋ': 0,
//   'ㅌ': 0,
//   'ㅍ': 0,
//   'ㅎ': 1
// }

🔰 풀이과정 해설

• replace(/^ㄱ-ㅎ가-힇/g, "") : 한글 외 다른 문자열을 제외한다.

• split("") : 문자열을 한 글자씩 배열로 바꾼다.

• map((str) => CHOSUNG_LIST[parseInt((...)]) : [ '사', '과', '호', '랑', '이', '고', '니', '수', '박', '닭' ]에 대한 초성을 뽑아내야 한다.

  • 한글 유니코드에서 시작은 '가'로 '가'.charCodeAt(0)=44032 값이다.

  • '가' 다음 '까'는 '까'.charCodeAt(0)=44620로, 가 → 까 초성은 588(=44620-44032) 주기로 변경된다.

  • 현재 문자열에 대한 초성을 알아내기 위해 str.charCodeAt(0) 에서 '가'.charCodeAt(0)를 빼고 초성 주기 588을 나눠 현재 문자열이 CHOSUNG_LIST 에 어디에 해당하는지 구한다.

  • 결과로 문자열에 대한 초성 값이 배열로 받아진다.

• OUTPUT_LIST.reduce((acc, cur) => {...}, {}) : [ 'ㅅ', 'ㄱ', 'ㅎ', 'ㄹ', 'ㅇ', 'ㄱ', 'ㄴ', 'ㅅ', 'ㅂ', 'ㄷ' ]를 결과 형식에 맞게 카운트를 계산해줘야 한다.

  • 'ㄲ', 'ㄸ', 'ㅃ', 'ㅆ', 'ㅉ' 5가지는 정답 output에 없어서 OUTPUT_LIST 변수를 따로 만들었다.
  • reduce 함수를 통해 CHOSUNG 변수에서 현재 초성이 몇 개 있는지 확인해주면 된다!

이벤트 루프를 알아보기 전에..👀

<< 자바스크립트는 싱글 스레드로 동작한다 >>

• 자바스크립트를 공부할 때, 위의 말을 자주 듣게 된다.

• 싱글 스레드는 방식은 한 번에 하나의 태스크만 처리할 수 있다! 하지만 브라우저가 동작하는 것을 살펴보면 많은 태스크가 동시에 처리되는 것처럼 느껴진다. (➡ HTML 요소가 애니메이션 효과를 통해 움직이면서 이벤트를 처리하기도 하고, HTTP 요청을 통해 서버로부터 데이터를 가지고 오면서 렌더링 하기도 한다. 이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프다.)

  • 싱글 스레드 방식으로 동작하는 것은 브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진이라는 것에 주의하자.
  • ➡ 자바스크립트 엔진은 싱글 스레드로 동작하지만, 브라우저는 멀티 스레드로 동작한다!*

자바스크립트 엔진 ❓

자바스크립트 엔진은 크게 2개의 영역으로 구분할 수 있다.

1. *📌 콜 스택 *

   함수를 호출하면 함수 실행 컨텐스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다.

2. 📌 힙

   힙은 객체가 저장되는 메모리 공간이다. 메모리에 값을 저장하려면 먼저 값을 저장할 메모리 공간의 크기를 결정해야 한다. 객체는 원시 값과는 달리 크기가 정해져 있지 않으므로 할당해야 할 메모리 공간의 크기를 런타임에 결정(동적 할당)해야 한다. 따라서 객체가 저장되는 메모리 공간인 힙은 구조화되어 있지 않다는 특징이 있다.

➡ 콜 스택과 힙으로 구성되어 있는 자바스트립트 엔진은 단순히 태스크가 요청되면 콜 스택을 통해 요청된 작업을 순차적으로 실행할 뿐이다.

브라우저가 태스크 큐와 이벤트 루프를 제공한다 🎉

• 비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Node.js가 담당한다. 이를 위해 브라우저 환경은 태스크 큐와 이벤트 루프를 제공한다. (➡ 자바스크립트의 동시성을 지원! )

1. *📌 태스크 큐 *

   setTimeout이나 setInterval 과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.

2. *📌 이벤트 루프 *

   콜 스택에 현재 실행중인 실행 컨텍스트가 있는지, 그리도 태스크 큐에 대기 중인 함수(콜백함수, 이벤트 핸들러 등)가 있는지 반복해서 확인한다.

➡ 만약 콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적(FIFO)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.

예제를 통해 확인하기🔎

➡ foo(), bar() 실행 순서 확인하기

function foo(){
  console.log('foo');
}

function bar(){
  console.log('bar');
}

setTimeout(foo, 0);
bar();

1. 전역 코드가 평가되어 실행 컨텍스트가 생성되고 콜 스택에 푸시된다.

2. 전역 코드가 실행되기 시작하여 setTimeout 함수가 호출된다. 이때 setTimeout 함수의 함수 실행 컨텍스트가 생성되고, 콜 스택에 푸시되어 현재 실행중인 실행 컨텍스트가 된다. 브라우저의 Web API인 타이머 함수도 함수이므로 함수 실행 컨텍스트를 생성한다.

3. setTimeout 함수가 실행되면 콜백 함수를 호출 스케줄링하고 종료되어 콜 스택에서 팝 된다. 이때 호출 스케일링, 즉 타이머 설정과 타이머가 만료되면 콜백 함수를 태스크 큐에 푸시하는 것은 브라우저의 역할이다.

4. 브라우저가 수행하는 4-1과 자바스크립트 엔진이 수행하는 4-2는 병행 처리된다.

   *4-1. [브라우저] * ➡ 브라우저는 타이머를 설정하고 만료를 기다린다. 이후 타이머가 만료되면 콜백 함수 foo가 태스크 큐에 푸시된다. ✳ 위 예제의 경우 지연시간이 0 이지만 지연 시간이 4ms 이하인 경우 최소 지연 시간 4ms가 지정된다. 따라서 4ms 후에 콜백 함수 foo가 태스크 큐에 푸시되어 대기한다. 이 처리 또한 자바스크립트 엔진이 아니라 브라우저가 수행한다. ✳ 이처럼 setTimeout 함수로 호출 스케쥴링한 콜백 함수는 정확히 지연 시간 후 호출된다는 보장은 없다. 지연 시간 이후 콜백함수가 태스크 큐에 푸시되어 대기하게 되지만 콜 스택이 비어야 호출되므로 약간의 시간차가 발생할 수 있기 때문이다.

   *4-2. [자바스크립트 엔진] * ➡ bar 함수가 호출되어 bar 함수의 함수 실행 컨텍스트가 생성되고, 콜 스택에 푸시되어 현재 실행 중인 실행 컨텍스트가 된다. ➡ 이후 bar 함수가 종료되어 콜 스택에서 팝 된다. ✳ 이때 foo 함수는 아직 태스크 큐에서 대기 중이다.

5. 전역 코드 실행이 종료되고 전역 실행 컨텍스트가 콜 스택에서 팝 된다. 이로써 콜 스택에서는 아무런 실행 컨텍스트도 존재하지 않게 된다.

6. 이벤트 루프에 의해 콜 스택이 비어 있음이 감지되고, 태스크 큐에서 대기 중인 콜백 함수 foo가 이벤트 루프에 이해 콜 스택에 푸시된다. ➡ 콜백함수 foo의 함수 실행 컨텍스트가 생성되고, 콜 스택에 푸시되어 현재 실행중인 실행 컨텍스트가 된다. ➡ 이후 foo 함수가 종료되어 콜 스택에서 팝 된다.

브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱해서 렌더링 하는지 알아보자

🔄 브라우저의 렌더링 과정

- 전체적인 과정을 아래의 1~4와 같이 진행된다. 하나씩 자세히 알아보자!

1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.

2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.

3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트 코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.

4. 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.

🌈 1. 요청과 응답

• 브라우저의 핵심 기능은 필요한 리소스(HTML,CSS,JS,이미지,폰트 등)를 서버에 요청하고 서버로부터 응답받아서 브라우저에 시각적으로 렌더링하는 것

• 서버에 요청을 전송하기 위해 브라우저는 주소창을 제공한다

• 브라우저의 주소창에 URL을 입력하고 엔터키를 누르면 URL의 호스트 이름이 DNS를 통해 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에게 요청을 전송한다.

  URI:https://www.mydomain.com:80/docs/search?category=js&lang=ko#intro

  • URL: https://www.mydomain.com:80/docs/search
  • Scheme(Protocol): https
  • Host(Domain): www.mydomain.com
  • Port: 80
  • Path: /docs/search
  • Query: category=js&lang=ko
  • Fragment: #intro

📕 2-1. HTML 파싱과 DOM 생성

• 브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트다.

• 순수한 텍스트인 HTML 문서를 브라우저에 시각적인 픽셀로 렌더링하려면 HTML 문서를 브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장해야 한다.

바이트 ➡ 문자 ➡ 토큰 ➡ 노드 ➡ DOM

1. 서버에 존재하던 HTML 파일이 브라우저에 의해 응답된다. 이때 서버는 브라우저가 요청한 HTML 파일을 읽어 들여 메모리에 저장한 다음 메모리에 저장된 바이트(2진수)를 인터넷을 경유하여 응답한다. 브라우저는 서버가 응답한 HTML 문서를 바이트(2진수) 형태로 응답받는다.

2. 응답된 바이트는 형태의 HTML 문서는 meta 태그의 charset 어트리뷰트에 지정된 인코딩 방식을 기준으로 문자열에 반환된다.

3. 문자열로 반환된 HTML 문서를 읽어, 문법적으로 의미를 같는 코드의 최소 단위인 토큰들로 분해한다.

4. 각 토큰들을 객체로 반환하여 노드들을 생성한다. 토큰의 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드가 생선된다. 노드는 이후 DOM을 구성하는 기본 요소가 된다.

5. HTML 문서는 HTML 요소들의 집합으로 이루어지며, HTML 요소는 중첩 관계를 갖는다. 모든 노드들은 트리 자료구조로 구성된다. 이 노드들로 구성된 트리 자료 구조를 DOM 이라 부른다.

➡ 즉, DOM은 HTML 문서를 파싱한 결과물이다.

📒 2-2. CSS 파싱과 CSSOM 생성

• 렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나가다가, CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다.

• link 태그의 href 어트리뷰트에 지정된 CSS 파일을 서버에 요청하여 로드한 CSS 파일이나 style 태그 내의 CSS를 HTML과 동일한 파싱 과정(바이트 ➡ 문자 ➡ 토큰 ➡ 노드 ➡ DOM)을 거치며 해석하여 CSSOM 파일을 생성한다.

• 이후 CSS 파싱을 완료하면 HTML 파싱이 중단된 시점부터 다시 HTML을 파싱하기 시작하여 DOM 생성을 재개한다.

📗 2-3. 렌더 트리 생성

• 렌더 트리 : 렌더링을 위한 트리 구조의 자료구조 브라우저 화면에 렌더링 되지 않는 노드(ex. meta, script 태그)와 CSS에 의해 비표시(ex. display:none) 되는 노드들은 포함되지 않는다. ➡ 즉 렌더 트리는 화면에 렌더링 되는 노드만으로 구성된다.

• 완성된 렌더 트리는 각 HTML 요소의 레이아웃(위치와 크기)을 계산하는 데 사용되며, 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다.

💥 3. 자바스크립트 파싱과 실행

• HTML 문서를 파싱한 결과물로서 생성된 DOM은 HTML 문서의 구조와 정보뿐만 아니라 HTML 요소와 스타일 등을 변경할 수 있는 프로그래밍 인터페이스로서 DOM API를 제공한다.

• 자바스크립트 코드에서 DOM API를 사용하면 이미 생성된 DOM을 동적으로 조작할 수 있다.

• 자바스크립트 파일을 로드하는 script 태그나, 자바스크립트 코드를 콘텐츠로 담은 script 태그를 만나면 DOM 생성을 일시 중단한다.

• 그리고 script 태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 서버에 요청하여 로드한 자바스크립트 파일이나, script 태그 내의 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다.

• 이후 자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱을 시작하여 DOM 생성을 재개한다.

🎨 4. 리플로우와 리페인트

• 일반적인 브라우저 렌더링 과정

  1. DOM/CSSOM Tree (생성)
  2. Render Tree (생성)
  3. Layout (위치, 크기계산)
  4. Paint (색칠)
  5. Composite (조합)

• 아래의 경우 반복해서 레이아웃 계산과 페인팅이 재차 실행된다.

  • 자바스크립트에 의한 노드 추가 또는 삭제
  • 브라우저 창의 리사이징에 의한 뷰포트 크기 변경
  • HTML 요소의 레이아웃(위치, 크기)에 변경을 발생시키는 스타일 변경

• 📌 리플로우(Reflow) : 레이아웃 계산을 다시 하는 것 노드 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징 등 레이아웃에 영향을 주는 변경이 발생한 경우에 실행됨 (ex. width/height 값 변경)

• 📌 리페인트(Repaint) : 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것

• 리플로우, 리페인트가 반드시 순차적으로 동시에 실행되는게 아니다. 레이아웃에 영향이 없는 변경을 리페인트만 실행된다. (ex. color, background-color 변경 시 Repaint만 실행됨)

• (참고) 리플로우, 리페인트를 피하려면? ➡ GPU 도움받기 ➡ transform, opacity 속성을 변경

🔎 자바스크립트 파싱에 의한 HTML 파싱 중단

• 렌더링 엔진과 자바스크립트 엔진은 직렬적으로 파싱을 수행한다.

• script 태그의 위치에 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있어서, script 태그의 위치는 중요한 의미를 갖게된다.

• 자바스크립트를 body 요소의 가장 아래 위치시키면 좋은 점

  1. DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조적하면 에러가 발생할 수 있으므로 하단에 위치하면 에러 상황을 피할 수 있다.
  2. 자바스크립트 로딩/파싱/실행으로 인해 HTML 요소들의 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩 시작이 단축된다.

🔎 script 태그 > async/defer 어트리뷰트

위에 작성한 자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 근본적으로 해결하기 위해 HTML5부터 script 태그에 async, defer 어트리뷰트가 추가되었다.

• 📌 async : 자바스크립트의 파싱과 실행은 파일의 로드가 완료된 직후에 진행되며, 이때 HTML 파싱이 중단된다. 여러개의 script 태그에 async 어트리뷰트를 지정하면 script 태그의 순서와 상관없이 로드가 완료된 자바스크립트부터 먼저 실행되므로 순서가 보장되지 않는다.

• 📌 defer : 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후(DOMContentLoaded) 진행된다. 따라서 DOM 생성이 완료된 이후 실행되어야 할 자바스크립에 유용하다.

** ➡ async/defer 를 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 진행된다. async/defer 차이점은 실행 시점!**