검색을 할때 query에 문자열을 그대로 넣는 것이 아니라 UTF-8로 인코딩해서 넣었어야 했다. 포스트맨에서 API를 불러올땐 잘돼길래 그냥 썼는데 막상 프로젝트를 실행하니 400에러가 떴다. 친절하게 에러 코드도 나와있었는데...

아무튼 쿼리부분을 그냥 한글로 써서 보내면 이렇게 요청이 간다.

저 특수문자와 영어가 섞인 부분의 URI 영역을 인코딩해서 요청해야 한다. 자바스크립트에서 encodeURI를 사용하면 된다.

이렇게 작성해주었다니 잘 동작한다!

export const getBookList = (query: string, sort: string, start = 1) => {
  return axios.get(encodeURI(`${BASE_URL}`), {
    params: {
      query,
      sort,
      start,
      display: 20,
    },
  });
};

이번주 기업과제를 새롭게 시작하면서 역할을 분담했다. 나는 초기 레이아웃을 짜고, 광고관리 페이지를 진행하기로 했다 초기 레이아웃을 짜면서 팀원분이 알려주신 react router dom의 outlet에 대해 정리해보려고 한다!

v6에 새롭게 추가된 Outlet은 react의 children과 유사하게 작동함으로서, 레이아웃 설정을 매우 간편하게 할 수 있다.

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route path="invoices" element={<Invoices />} />
        <Route path="activity" element={<Activity />} />
      </Route>
    </Routes>
  );
}

function Layout() {
  return (
    <div>
      <GlobalNav />
      <main>
        <Outlet />
      </main>
    </div>
  );
}

이렇게 레이아웃 컴포넌트를 만들고, react-router-dom에서 Outlet 컴포넌트를 import한다. 고정할 컴포넌트들이나 스타일들을 설정해주고 routes안의 route에 레이아웃 컴포넌트로 감싸주면 그 밑의 route들은 Outlet 컴포넌트 위치에 위치하게 된다🌟

코드 리뷰

1. router.tsx 의 내용은 최대한 간단하게 짜는 것이 좋음.
2. lazy 기능 구현시 react-loadable 라이브러리 추천해주심.
3. 변하지 않는 함수일 경우 렌더링 최소화를 위해 useMemo를 사용할 것. (사실 엄청 큰 프로젝트가 아닌 이상 성능에 거의 차이는 없지만, 습관을 들이는 것이 좋다고 하심. 하지만 사람마다 다른 코드 취향일수도..)
4. 컴포넌트 리턴 부분에 삼항 연산자를 최대한 안쓰는 것이 좋다. 가독성이 좋지 않기 때문에. 가독성을 위해 최대한 코드나 파일을 나누는 것이 좋음
5. 프론트엔드 개발자는 수정을 최대한 빨리 할 수 있도록 코드를 짜야 한다. => 다른 사람들이 보았을 때 금방 코드가 읽히도록. 넘겨주는 props 최소화하기.(5개 미만으로..)
6. SEO 설정할 때 react-helmet 라이브러리 추천.
7. 라이브러리 사용시 개발할 때만 필요한 것은 dev로 설치하기.
8. useEffect 부분이 너무 길어지면 따로 빼기. 프론트엔드는 가독성이 최고이다.
9. 최대한 props명과 변수명 일치 시키기 => 코드 취향일 수 있으나 일치 시켜야 헷갈리지 않음.
10. return안에 depth가 깊어지지 않도록 신경쓰기
11. import 순서 지키기 => 이것 또한 가독성을 위해. 보통 node modules package => type => utils or hooks => components => style 순으로 나열하신다고 하심.

🌟 전체적으로 가독성에 대한 이야기를 많이 해주신 것 같다.

내 프로젝트 코드리뷰...

프로젝트 repository

1. beautiful dnd 때문인지 return 부분 depth가 너무 깊어져 가독성이 좋지 않다. 따로 분리할 수 있는 것은 분리하는 것이 좋다.
2. 삼항 연산자 때문에 가독성이 좋지 않음..

refactoring

가독성이 좋지 않은 MovieMain.tsx return 부분의 파일을 분리해보았다.

리팩토링 전

return (
    <DragDropContext onDragEnd={() => {}}>
      <Container ref={parentObservedTarget}>
        <SearchBar setIsLoading={setIsLoading} />
        {movieList.Response === "True" ? (
          <ul>
            <TotalContainer>
              <AiOutlineUnorderedList size={20} />
              <MovieTotal>Total {movieList.totalResults}</MovieTotal>
            </TotalContainer>
            <Droppable droppableId="bookmarkLi" isDropDisabled>
              {(provided) => (
                <MovieListSubContainer ref={provided.innerRef}>
                  {movieList?.Search?.map((movie, i) => (
                    <MovieItem key={`${i}${movie.imdbID}`} item={movie} />
                  ))}
                  <div ref={setTarget}>{!isLoading && <Loading />}</div>
                  {provided.placeholder}
                </MovieListSubContainer>
              )}
            </Droppable>
          </ul>
        ) : (
          <NotFound error={movieList.Error} />
        )}
      </Container>
    </DragDropContext>
  );

리팩토링 후

최선의 방법인지는 모르겠다. 왜냐면 MovieList라는 컴포넌트를 새로 만들면서 props로 3개를 넘겨주었기 때문이다. 그래도 확실히 짧아져서 보기엔 간편한듯 하기도 하구..? 하지만 아직도 삼항 연산자를 사용하게 될 수 밖에 없다. 삼항 연산자를 안쓰고 어떻게 조건부 렌더링을 해야하지?

  return (
    <DragDropContext onDragEnd={() => {}}>
      <Container ref={parentObservedTarget}>
        <SearchBar setIsLoading={setIsLoading} />
        {movieList.Response === "True" ? (
          <MovieList movieList={movieList} setTarget={setTarget} isLoading={isLoading} />
        ) : (
          <NotFound error={movieList.Error} />
        )}
      </Container>
    </DragDropContext>
  );

Interserction Observer 란?

공식 문서

Web에서 제공하는 API로 교차 관찰자라고 한다. 관찰 중인 요소가 사용자가 보는 화면 영역 내에 들어왔는지를 알려주는 API이다. 대상 요소가 상위 요소나 또는 최상위 요소인 뷰포트와 교차하는 변경 사항을 비동기식으로 관찰하고, 그에 따른 콜백함수를 정해 실행할 수 있다.

따라서 이런 기능을 구현할 때 사용할 수 있다.

1. 페이지를 스크롤 할 때 이미지나 컨텐츠를 느리게 로드하는 lazy Loading
2. 스크롤할때 더 많은 콘텐츠를 불러오는 무한 스크롤

개념 및 사용법

Intersection Observer API를 사용하면 다음 상황 중 하나가 발생할 때 실행시키는 콜백을 만들 수 있다.

1. 관찰할 대상이 뷰포트 또는 우리가 지정할 요소와 교차할때이다. 지정한 요소를 root 요소 또는 root라고 한다. 일반적으로 대상 요소의 스크롤이 가능한 바로 부모 대상 요소 또는 뷰포트를 대상으로 교차하는 것을 관찰할 것이다. 만약 뷰포트를 기준으로 교차를 관찰하려면 옵션에 null을 넣거나 아무것도 넣지 않으면 된다.
2. 관찰자에게 처음으로 대상 요소를 관찰하라는 요청을 받을 때이다.

대상 요소와 루트 간의 교차 정도는 교차 비율로 판단한다. 자식요소의 얼마만큼의 비율이 루트 요소에 교차가 되었는지를 정하고 정한 만큼이 교차가 되었을 때 우리가 지정한 콜백함수를 실행한다. 이것은 옵션의 threshold와 관련이 있다. 0.0부터 1.0사이의 값으로 표시한다.

1. 관찰자 생성하기

관찰자를 생성해보자 ! 생성하면서 우리는 관찰자의 옵션을 설정할 수 있다.

// option 설정
const options = {
    root: document.querySelector('#scollArea'), // react의 경우 useRef를 이용해 설정도 가능.
    rootMargin: '0px',
    threshold: 0.7,
}

// 관찰자 생성
let observer = new IntersectionObserver(callback, options)

1. root ⇒ 관찰할 대상이 교차할 요소이다. 지정하지 않거나 null일 경우 default 값은 뷰포트이고, 일반적으로 관찰할 대상의 스크롤이 가능한 상위 부모요소이다.
2. rootMargin ⇒ 루트 주변의 여백이다. margin 속성과 유사한 값을 가질 수 있다. default 값은 0이다. (ex. “10px 20px 30px 40px”)
3. threshold ⇒ 관찰할 대상과 root가 어느정도 교차할 때 콜백을 실행할 지에 대한 백분율을 나타내는 숫자이다. 관찰할 대상과 root가 50%가 교차할 때 콜백을 실행하고 싶다면 0.5라고 설정한다.

2. 관찰할 요소 타겟팅하기

관찰자를 생성한 후 관찰할 대상 요소를 지정해야 한다.

// 관찰할 대상 요소 지정
const target = document.querySelector('#listItem'); // react의 경우 useRef를 이용해 설정도 가능.

// 관찰자가 타겟을 관찰하도록 설정
observer.observe(target);

이렇게 관찰할 대상 요소를 지정한 후 관찰하도록 설정을 하면 이 지정한 임계값(threshold)가 충족할 때마다 IntersectionObserver 첫번째 인자로 넣어준 콜백이 호출된다.

콜백함수를 설정할 때 인자로 entries를 넣어주고, 이 entrie를 통해 임계값이 충족되었는지 또는 타겟 요소의 정보나 관찰할 대상의 요소에 대한 정보를 확인할 수 있다.

entries는 배열이고, 배열안에는 내가 관찰하기로 설정한 대상 요소들이 들어있다. entries를 콘솔로 확인해보자

// 콜백 함수
const intersectionCallback = (entries) => {
    console.log(entries)
}

이러한 값들이 들어 있는 것을 알 수 있다. 하나씩 값을 살펴보자면

• boundingClientRect : 관찰 대상의 사각형 정보를 반환한다.
• intersectionRect : 관찰 대상과 루트 요소의 교차하는 영역에 대한 사각형 정보를 반환한다.
• intersectionRatio : 관찰 대상이 루트 요소와 얼마나 교차하는지 (겹치는지)의 숫자를 0.0과 1.0 사이의 숫자로 반환한다. 이는 intersectionRect 영역과 boundingClientRect 영역의 비율을 의미한다.
• isIntersecting : 관찰 대상이 루트 요소와 교차 상태로 들어가거나(true) 교차 상태에서 나가는지(false) 여부를 나타내는 값(Boolean)이다. 보통 이 값이 true일 때 콜백 함수를 실행시킨다.
• rootBounds : 루트 요소에 대한 사각형 정보를 반환한다. 이는 옵션 rootMargin에 의해 값이 변경되고, 반약 별도의 루트 요소를 선언하지 않았다면 null을 반환한다.
• target : 관찰 대상을 반환한다.
• time : 문서가 작성된 시간을 기준으로 교차 상태 변경이 발생한 시간을 나타낸다.

위의 값을 참고해서 콜백 함수를 작성해보자. 만약 관찰할 요소들을 여러개 지정해 주었다면 entries에는 2개 이상의 아이템이 들어있으므로 forEach를 통해 각 대상에 대해 콜백 함수를 실행한다.

const intersectionCallback = (entries) => {
    entries.forEach(entry => {}
}

나는 하나의 타겟만 설정해주었으므로 다음과 isIntersecting 이 true가 되었을 때 콜백 함수를 설정해주었다.

const handleObserver: IntersectionObserverCallback = (entry) => {
    if (entry[0].isIntersecting && !isLoading) {
      setTimeout(() => {
        getMoreMovieList();
      }, 1000);
    }
  };

나는 무비 리스트들의 맨 끝에 빈 div를 넣고 루트 요소를 리스트가 들어있는 스크롤이 가능한 컨테이너로 설정했다. 따라서 리스트들의 맨 밑에 위치한 div가 교차하는 지에 따라 데이터를 새로 받아오는 함수를 구현했다. 데이터를 새로 받아서 기존의 무비 리스트 뒤에 추가 해주는 식으로 무비 리스트들이 계속 증가하여 보여질 수 있도록 작성했다.

전체 작성 코드!! (기존 코드에서 짜깁기해서 가져와서 빠진 부분이 있을 수 있습니다..🙏🏻)

import { useEffect, useRef } from "react";

const MovieMain = () => {
    const [target, setTarget] = useState<HTMLDivElement | null>(null);

    const getMoreMovieList = async () => {
            // 데이터 받아 오는 함수
        }

// 콜백 함수
    const handleObserver: IntersectionObserverCallback = (entry) => {
        if (entry[0].isIntersecting && !isLoading) {
         getMoreMovieList();
        }
      };

// 관찰자 생성
    useEffect(() => {
        let observer: IntersectionObserver;
        if (target) {
          observer = new IntersectionObserver(handleObserver, {
            root: parentObservedTarget.current,
            threshold: 1,
          });
          observer.observe(target);
        }
        return () => observer && observer.disconnect();
      }, [handleObserver, target]);


    return (
          <Container ref={parentObservedTarget}>
            <SearchBar setIsLoading={setIsLoading} />
            {movieList.Response === "True" ? (
              <ul>
              <MovieListSubContainer>
                {movieList?.Search?.map((movie, i) => (
                  <MovieItem key={`${i}${movie.imdbID}`} item={movie} />
                ))}
                <div ref={setTarget}>{!isLoading && <Loading />}</div>
              </MovieListSubContainer>
              )}
          </ul>
            ) : (
              <NotFound error={movieList.Error} />
            )}
          </Container>
      );
}

export default MovieMain;

잘 작동한다! ㅎㅎㅎㅎ

관련된 좋은 레퍼런스 리액트에서 Intersection Observer API 재사용성 높이기

드디어 기업 개인 과제가 시작되었다 🥶 준혁님이 린터설정을 엄청나게 강조하셔서 오늘은 프로젝트 초기세팅과 린터설정을 했다. 준혁님이 만들어주신거 가져다가 쓸까 하다가 혼자 설정을 한번 해보고 싶어서 직접 설정을 해보았다.

이번에 개인 과제에서 사용할 기술들은 JavaScript, TypeScript, Styled-Component, Recoil 로 정했다.

패키지 관리 툴은 yarn을 사용했다.

1. CRA 초기세팅 (with TypeScript)

CRA 공식문서

npx create-react-app my-app --template typescript
or
yarn create react-app 프로젝트명 --template typescript

만약 기존 존재하는 프로젝트에 타입스크립트를 추가하고 싶다면 이렇게!

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

2. React Router 설치

React Router 공식문서

프로젝트에서 없어서는 안될 Router를 설치하자. 작년에 버전 6으로 업그레이드가 되었기 때문에 6버전을 써준다.

6에서 달라진 점들이 잘 설명된 블로그

npm install react-router-dom@6
or 
yarn add react-router-dom@6

import * as React from "react";
import { Routes, Route, Link } from "react-router-dom";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </div>
  );
}

이런식으로 써주면 됨!

3. Styled-Component 설치

나는 아직 css module보다는 Styled-component가 좋다... 조건부 스타일링을 할때 스타일 값안에 자바스크립트의 변수를 쓸 수 있는게 훨씬 편리하다.. (className으로 조건부 스타일링을 하는 게 미숙해서 그럴수도 😂😂)

styled-component로 만들었던 프로젝트를 css module로 바꾸면서 겪었던 어려움을 디스코드에 올렸었다.

😭..... state값을 스타일의 값으로 사용하는 방법말고 다른 방법을 사용했었으면, 다른 방법이 있었을 것이다.

준혁님이 Styled-component를 선호하지 않는 이유가 HTML의 시멘틱한 태그들을 안쓰게 되어서 HTML이 약해짐이었는데 이 부분을 좀 더 보완해서 신경쓰면서 styled-component를 사용해야겠다.

Styled Component 공식문서

어쨌든 설치

npm install --save styled-components
or
yarn add styled-components

typeScript를 사용하는 경우라면,

npm install --save @types/styled-components
or
yarn add -D @types/styled-components 

GlobalStyle을 위해 styled-reset 도 설치해주었다.

npm install styled-reset
or
yarn add styled-reset

4. ESlint 설정

ESlint 공식문서

npm install eslint --save-dev
or 
yarn add eslint --dev

ESlint 환경설정 파일이 생성되어 있지 않으므로 초기화를 해야한다.

npm init @eslint/config
or
yarn create @eslint/config

이렇게 해주면 config 파일이 생길 것이다. 여기서 내가 설정해주고 싶은대로 플러그인을 설치하거나 rules를 설정하면 된다.

나는 rule이 꽤 빡세다는 airbnb config를 설정해주었다.

npm install eslint-config-airbnb
or
yarn add eslint-config-airbnb

설치 후 .eslintrc 파일 extends에 "airbnb", "airbnb/hooks"를 추가해준다. 역시 airbnb를 적용했더니 너무 warning이 많이 떠서 필요없는건 준혁님 foundation 파일을 보면서 꺼주었다. (너무 warning이 많아서 프로젝트 시작 못할뻔..)

{
 {
  "extends": ["airbnb", "airbnb/hooks", "react-app", "prettier"],
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true
  },
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    },
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "rules": {
    "arrow-body-style": "off",
    "react/function-component-definition": ["warn", { "namedComponents": "arrow-function" }],
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
    "react/jsx-indent": "warn",
    "react/jsx-props-no-spreading": "off",
    "react/no-array-index-key": "warn",
    "react/require-default-props": "off",
    "react/jsx-wrap-multilines": "off",
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "import/prefer-default-export": "off",
    "import/no-unresolved": "off",
    "import/order": "off",
    "import/no-anonymous-default-export": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [".storybook/**", "src/stories/**"]
      }
    ],
    // "max-lines": ["warn", 150],
    "no-param-reassign": ["error", { "props": false }],
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],

    "no-shadow": "off",
    "no-unused-expressions": ["warn"],
    "@typescript-eslint/no-shadow": ["error"],
    "@typescript-eslint/camelcase": "off",
    "@typescript-eslint/unbound-method": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-unsafe-member-access": "off",
    "@typescript-eslint/no-unsafe-assignment": "off",
    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
    "prefer-const": ["warn"],
    "prefer-destructuring": ["error", { "object": true, "array": false }],
    "lines-between-class-members": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/label-has-associated-control": [
      "error",
      {
        "labelComponents": ["label"],
        "labelAttributes": ["htmlFor"],
        "controlComponents": ["input"]
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}

5. Stylelint 설정

styled-component 공식문서의 이곳을 참고했다.

npm install --save-dev \
  stylelint \
  stylelint-processor-styled-components \
  stylelint-config-styled-components \
  stylelint-config-recommended

or

yarn add \
 stylelint \
  stylelint-processor-styled-components \
  stylelint-config-styled-components \
  stylelint-config-recommended

6. Prettier 설정

prettier 공식문서

prettier 설치

npm install --save-dev --save-exact prettier
or 
yarn add --dev --exact prettier

prettier eslint 플러그인 및 설정 패키지 설치

npm install -D eslint-config-prettier eslint-plugin-prettier
or 
yarn add -D eslint-config-prettier eslint-plugin-prettier

• eslint-plugin-prettier: prettier 규칙을 생성하는 eslint 플러그인
• eslint-config-prettier: eslint와 prettier간 충돌나는 규칙을 비활성화해주는 eslint 설정

.prettierrc.json 파일 생성 후 규칙 추가

{
  "jsxSingleQuote": false,
  "semi": true,
  "printWidth": 120,
  "singleQuote": false,
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf"
}

7. Recoil 설치

Recoil 공식문서

npm install recoil
or 
yarn add recoil

초기세팅이랑 린터설정에 생각보다 시간을 많이 썼다. 그치만 초기세팅과 린터설정 또한 너무 중요하기에 이번 기회로 다시 한번 연습해보아서 좋았던 것 같다. 👍🏻

☑️ 로그인하고 로컬스토리지에 저장하기

로그인페이지를 맡게 되었다. UI는 굉장히 단순했기 때문에 금방 끝낼수 있었지만 각 경우의 수에 따라 로컬스토리지에 저장하는 것에 시간을 많이 쓴 것 같다.

먼저 우리팀은 유저의 닉네임을 받아서 로그인을 하기로 했다. 만약 유저가 닉네임을 입력시에 그 유저의 id가 없다면, 새로운 유저이기 때문에 빈 데이터구조를 만들어주어야 하고, 만약 로컬스토리지 안에 유저의 id가 있다면 기존의 유저이기 때문의 그 유저의 id를 메인페이지로 전달해서 TODO를 불러와야 한다.

위의 설명을 보면 두 가지의 경우이지만 아예 localStorage가 완전히 비어있을 경우까지 고려해야했다. 안그러면 데이터 구조를 map을 돌릴때 에러가 나기 때문에..

따라서 이렇게 작성했다.

  const onClickLoginBtn = () => {
    const item = JSON.parse(localStorage.getItem('todo'))
    const newUser = {
      ...BASIC_DATA,
      userNickName: userName,
      id: `${new Date().getMilliseconds()}${userName}`,
      isLogined: true,
    }

    try {
      // 로컬스토리지가 완전히 비었을 때 (가장 최초의 회원)
      if (item === null) {
        localStorage.setItem('todo', JSON.stringify([newUser]))
        navigate('/', { state: { userId: `${new Date().getMilliseconds()}${userName}`, isNewUser: true } })
      } 
      // localStorage에 유저의 이름이 있을 때 (기존 회원)
      else if (item.map((el) => el.userNickName).includes(userName)) {
        const loginUser = item.find((el) => el.userNickName === userName)
        navigate('/', { state: { userId: loginUser.id, isNewUser: false } })
      } 
      // localStorage에 유저의 이름이 없을 때 (신규 회원)
      else {
        localStorage.setItem('todo', JSON.stringify([...item, newUser]))
        navigate('/', { state: { userId: `${new Date().getMilliseconds()}${userName}`, isNewUser: true } })
      }
    } catch (e) {
      console.log(e)
    }
  }

가독성이 매우 안좋은 것 같은데 어떻게 리팩토링을 해야할까...

프로젝트를 그동안 진행할 때, 주로 styled component를 많이 썼다. 이유는 css in js 라이브러리로 자바스크립트 코드를 통해 쉽게 조건부 스타일링이 가능했기 때문이다.

하지만 styled component를 사용하면 HTML이 굉장히 약해진다고 한다. html 태그 위치에 우리가 정해준 스타일 컴포넌트가 자리하기 때문이다. styled component를 쓰며 div를 남발했던 과거의 나를 보며 그렇겠구나 생각이 들었다.

그래서 css module과 scss를 함께 사용하는 것을 권장하셨고, 이번 프로젝트엔 css module을 사용하기로 했다.

css module은 파일 확장자를 .module.css로 설정하면 된다. scss를 함께 사용할 것이라면 .module.scss라고 정해준다.

css module의 가장 큰 장점은 리액트 컴포넌트 파일에서 해당 css 파일을 불러올 때 css 파일에 선언한 클래스 이름들이 모두 고유해진다. css 클래스 이름이 만들어지는 과정에서 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등이 사용될 수 있다.

실제로 css module을 사용하고 class이름을 확인해 보았다.

이렇게 되면 scss가 다른 컴포넌트라고 같은 class명을 가지고 있을 때 겪는 className 오염을 방지할 수 있다.

클래스 이름을 통해 조건부 스타일링을 해줄때는 이렇게 작성하면 되는데,

<p className={`${styles.warningMessage} ${isAvailableName ? styles.displayNone : ''}`}>
 닉네임 형식에 맞지 않습니다
</p>

조금 작성하기가 어렵다. 이럴때 classnames라는 라이브러리를 쓰면 좀 더 깔끔하게 작성할 수 있다. 이 라이브러리에는 bind 기능이 있다.

<p className={cx(styles.warningMessage, isAvailableName ? styles.displayNone : '')}>
닉네임 형식에 맞지 않습니다
</p>

좀 더 깔끔해졌다.

// X 이렇게 사용하기보다는
className={cx('title','bold')}

// O 이런식으로 사용해주기!!
className={cx(styles.title, styles.bold)}

TODO

☑️ 로그인 페이지 UI

css module을 통해 UI를 구현했다.

    <div className={styles.loginWrapper}>
      <p className={styles.loginTitle}>닉네임을 입력해주세요</p>
      <input maxLength={15} onChange={onChangeInputValue} className={styles.loginInput} />
      <p className={cx(styles.warningMessage, isAvailableName ? styles.displayNone : '')}>
        닉네임 형식에 맞게 입력해주세요.
      </p>
      <button
        disabled={!isAvailableName}
        type='button'
        onClick={onClickLoginBtn}
        className={cx(styles.loginBtn, isAvailableName ? styles.ableBtn : styles.disableBtn)}
      >
        Login
      </button>
    </div>

준혁님은 타입스크립트와 린터설정을 매우매우 강조하셨다. (남들이 보기에도 좋은 코드를 짜기 위함일 것이다.) 확실히 린터를 설정하고 코드를 작성하니 내 코드가 이렇게 깔끔해지는구나..하고 느꼈다.

이번 과제의 핵심은 기능 구현이라기 보단 린터설정, 팀원과의 협업 능력 기르기가 아닐까 하는 생각이 든다.

TODO

☑️ 팀원들과의 회의를 통해서 각자 기능 쪼개기 !

사실 10명이서 todolist 프론트 부분을 쪼개려니 감이 안왔다. 페이지도 아무리 기능을 만들어봤자 3-4페이지가 다였는데 어떻게 쪼개지 하다가 각 컴포넌트나 큰 기능 단위로 쪼갰다.

일단 피그마에 어떤 기능들을 구현할지 그려보고, 각자 필수구현, 추가구현 기능을 정했다. (팀원 중 피그마 고수가 있으셔서 굉장히 수월하게 진행한 것 같다.)

오늘 회의만 거의 5-6시간을 진행한 것 같다. 팀원들 모두 열정적이라 좋았던 것 같다. 일단 데이터는 모두 localStorage에서 관리하기로 하고 데이터 구조도 작성했다.

[
  {
  id: new Date + useNickName,
  userNickName:’kang',
  isLogined: true,
  data: {
    category: [{ id: new date + categoryName, categoryName:'카테고리명', color: “~~~” },
                           { id: 324832456카테고리명, categoryName:'카테고리명2', color: “~~~” }],
    todoList: [
        {
          id:new date + todo,
           todo: '과제하기', 
           categoryId: category.id, 
           date: '2022/00/00', 
           isDone: true,
        },
    ]
  }
 }
]

간단한 데이터 구조 만들어보는 툴도 좀 익혀놓을껄 하는 생각이 들었다..

1. input에 managed state사용하기.

2. key값을 index로 쓰면 말것.

3. 리액트에서 돔을 직접 조작하지 말것.

   ref.current.value = '' 

   와 같은 코드는 큰 문제를 일으킬 수 있는 코드. useRef는 데이터를 바꿀 때 쓰는 것은 좋지 않다. 윈도우의 가로나 세로의 특정 값을 구할 때 사용하는 것이 좋음.

4. event.target.value 보다는 event.currentTarget.value를 쓰는 것이 좋다.

5. setState 해줄 때 prevState 쓸것.

6. css에는 id말고 class 써주기. 정말 어떠한 의도가 있지 않는 한 class를 사용할 것.

원티드 프리온보딩 프론트엔드 코스를 지원하게 되었다. 지원하면서 간단한 숏에세이를 써보려 한다.

1) 원티드 프리온보딩 코스의 정책과 도입한 이유는 무엇일까?

원티드 프리온보딩 코스에서는 수강료 무료, 참가비 50만원을 받습니다. 이후 코스 완주(1.참가기업 70% 이상 지원 2.과제 제출 3.동료피드백 4.출결)시 취업활동 지원금 50만원(제세공과 후)을 지급합니다.

원티드에서 이러한 정책을 도입한 이유는 지원자들의 열정과 책임감을 보기 위함이라 생각한다. 원티드 프리온보딩에 참가한 기업들을 보았을 때 막 시작한 스타트업보다 어느정도 기반이 있고, 투자를 받은 회사들이 참가했다. 이러한 기업들이 참가한 만큼 지원하는 참가자의 책임감과 간절함을 보기위해 이러한 정책을 도입한 것이라 생각한다. 그래서 오히려 나는 더 이러한 정책이 긍정적이다. 함께 팀을 이루고 같이 과제를 하는 동기들을 만나는 과정에서 이러한 정책이 좀 더 나에게나 지원자들에게 좋은 영향을 미칠 것이라고 생각한다. 50만원이라는 금액이 많은 금액은 아니지만 그래도 취준생에게 적지만은 않은 금액이라 생각한다. 만약 선발이 된다면 나도 또한 한달동안 그 이상의 책임감을 갖고 열심히 코스에 임할 것이다.

2) 지원을 희망하는 기업, 선정 이유

휴먼스케이프

누적 350억 투자를 받으며 성장가능성과 역량을 인정받은 스타트업으로서, 앞으로의 더 큰 성장가능성이 있다고 생각했다. 앞으로의 더 큰 성장을 통해 함께 하고 싶은 회사라는 생각이 들었으며, 마미톡과 레어노트라는 서비스를 출시한 것을 보고, 희귀질환과 임신 출산이라는 서비스가 관심이 많이 갔다. 모든 서비스가 그렇겠지만 사람들에게 긍정적이고 좋은 영향을 주는 서비스라고 생각했다. 또한 한국 뿐아니라 글로벌로 나아가는 성장 가능성이 더욱 더 함께 하고 싶은 생각이 들었다.

매드업

매드업은 디지털 마케팅 시장에서 급성장하고 있는 애드테크 스타트업이다. 기술과 데이터 기반의 마케팅 솔루션을 제공함으로서 급격하게 성장해온 점에서 관심이 갔다. 또한 데이터를 많이 다룰 수 있는 좋은 경험이 될 것같다. 프론트엔드 개발자로서 다양하고 많은 데이터를 접할 수 있는 기회가 있을 것 같아서 함께 하고 싶은 기업이다.

그립컴퍼니

그립컴퍼니는 라이브 커머스 전문 앱으로 국내 라이브 커머스 브랜드 1위를 달성했다. 이에 머물지 않고 다양한 판매 상품과 그리퍼와 함꼐 고객 가치에 집중하며 성장하고 있는 기업이다. 최근 카카오에서 투자를 받으면서 그립컴퍼니의 앞으로의 성장 가능성이 얼마나 될까 궁금증이 생기게 되었다. 또한 온라인 쇼핑을 라이브로 진행함으로서 온라인 쇼핑의 새로운 서비스를 시작한다는 점에서 많은 관심이 갔다.

1. state와 render의 관계

store안의 state ⇒ state에 직접 변경하면 안된다. 어떤 것을 통해 변경을 해야한다.

state를 만들면서 reducer를 만들어 공급해주어야 한다.

function reducer(oldState, action) {
    // ...
}

var store = Redux.createStore(reducer)  // 새로운 store생성 인자로 reducer를 준다.

render는 store바깥에 있다. ⇒ 우리의 코드. UI를 만들어주는 우리가 짜는 코드.

state에 직접 접속하는게 불가능하기 때문에 앞단에 dispatch, subscribe, getState 함수가 있다.

function render() {
    var state = store.getState();   // store에서 state를 가져온다. 
    // ...
    document.querySelector('#app').innerHTML = `
        <h1>WEB<h1>
        ...
`

render는 현재 state를 반영하여 보여준다.

state가 변경될때마다 render가 바뀌면 좋을것이다. 이 때 사용하는 것이 subscribe이다.

store.subscibe(render);
// 이렇게 store에 render를 subscribe하면 state가 변경될때마다 render가 갱신될것이다. 

2. action과 reducer

<form onsubmit = "
// ...
store.dispatch({type:'create;, payload:{title:title, desc:desc}});
">

// type안의 것이 action이고 이것을 dispatch에 전달

dispatch가 하는일은?

• reducer를 호출해서 state값을 바꾼다.
• 이것이 끝난뒤 subscribe를 이용해서 render함수를 호출한다. 그러면 화면이 갱신된다.

dispatch는 reducer를 호출해서 현재의 state값과 action데이터를 전달한다.

function reducer(state, action){
    if(action.type === 'create'){
        ...
        ...
    return Object.assign({}, state, {
        ...
        ...
        })
// return해주는 값이 새로운 state가 된다. 

dispatch는 state를 입력값으로 받고 action을 참조해서 새로운 state값을 만들어서 return하는 state가공자이다.

이렇게 state값이 변경되면 render가 다시 일어난다. dispatch가 subscribe를 모두 호출하면 render가 일어난다. (getState를 통해서)

store의 state에 직접 접근이 안되기 때문에getState를 통해 state를 가져오고 dispatch를 통해 값을 변경하고 subscribe를 통해 값이 변경됐을때 구동될 함수를 등록한다. 또 하나의 핵심은 reducer를 통해 state값을 변경한다.

3. Redux 적용

1) Redux 설치

npm install --save redux

💡redux cdn으로 직접 설치하지 않고 copy해서 사용할 수도 있다. copy한 것을 script에 추가하면 된다.

2) store 생성

리덕스를 이용한다는 것은 결국 store를 만들어서 store의 state를 바꾸는 것이다.

• 첫번째로 store를 만든다. store를 만들면 자동으로 state라는 것이 생긴다. 그 다음에 reducer를 만들어서 그 함수에 주입해준다.

function reducer(staet, action){ // --- (1)
    if(state === undefined){       // --- (2)
        return {color: 'yellow'}     // --- (3)
    } 
} 

var store = Redux.createStore(reducer) // store 만들고, reducer 주입
console.log(store.getState()) // state값 가져오기 {color: yellow} 출력(초기값)

(1) 인자로 기존 staet값과 action을 받는다. (2) state === undefined 는 state의 초기값이 아직 setting이 되기 전, 최초의 초기화 단계라는 의미이다. (3) 여기서 리턴하는 것은 초기 state값을 의미한다. state 초기값은 바로 여기서 리턴하는 것이라는 것!

• reducer가 하는 역할은 dispatch에 의해서 action이 들어오게 되면 reducer가 그 action 값과 기존에 있었던 state의 값을 참조해서 새로운 state값을 만들어주는 것이다.
• 우리가 store를 처음 만들때 그 store의 state값의 초기값이 필요하다.
• 우리가 store를 만들면 내부적으로 state값이 생기고 이 state값을 가져오려면 getState 함수를 사용해야한다.
• 그리고 reducer를 통해 state값을 만들어줘야 하는데 그때에 reducer에 기존 state값이 undefined일때 리턴하는 값은 초기 state값이라 생각하면 된다. 초기화를 위해 최초로 실행되는 reducer에 대한 호출이기 때문에 우리가 원하는 초기값을 리턴해주면 이 리덕스의 store에는 그 초기값이 지정이 된다. 그래서 그렇게 저장된 state값을 getState를 통해 가져오고 변수에 할당해 우리의 컴포넌트에 할당해주면 그 초기 state를 사용할 수 있다.

3) reducer와 action을 이용해서 새로운 state값 만들기

state값을 변경시키기 위해서는 어떻게 해야할까?

• state를 바꾸기 위해서는 action을 만든다. 그리고 이것을 dispatch에 제출한다. 그러면 dispatch가 reducer를 호출하는데 그때에 이전의 state값과 action의 값을 동시에 전달해 준다. 그러면 우리가 만들 reducer함수가 이것을 분석해서 최종적으로 값을 리턴해준다.

store.dispatch({type: 'CHANGE_COLOR', color: 'red'}) 
// 이 코드에 의해 store의 state값이 color를 red로 바꾸고 싶다면?

store에 dispatch를 호출하게 되면은 dispatch는 우리가 store를 생성할 때 제공한 reducer라고 하는 함수를 호출하도록 약속되어있다. 그때 이전의 state값을 전달한 action을 인자로 준다.

console.log(state, action) 

// 처음엔 undefined, {type : "@@redux/어쩌고"} 이 출력
// 어떠한 버튼을 클릭한다면 {color: 'yellow'} {type: 'CHANGE_COLOR', color: 'red'} 이 출력

function reducer(staet, action){ 
    if(state === undefined){       
        return {color: 'yellow'}   
    } 
    return {color: 'red'}  // 어떠한 이벤트를 발생했을때 state값을 이것으로 바꿔준다. 
} 

• reducer라는 것은 이전의 state와 action을 받아서 다음의 state값을 리턴해준다.

// 이렇게도 사용할 수 있다. 하지만 좋지 않은 방법이다. 

function reducer(staet, action){ 
    if(state === undefined){       
        return {color: 'yellow'}   
    } 
    if(action.type === 'CHANGE_COLOR'){
        state.color = 'red'                 // state의 color를 'red'로 변경
    }
    return state                          // 그것을 return
}  

위처럼 state를 color를 변경하고 그것을 리턴하는 것이 아닌 이 state를 복제하고 복제된 복사본을 변경해서 return 하는것이 좋다. 이유는 바로 불변성 때문이다.

• 그럼 어떻게 복제를 하는 것이 좋을까?

복제할 때 Object.assign()을 사용한다. 첫 번째 인자로는 빈 객체, 두 번째 인자로는 빈객체의 복제할 속성을 가진 객체를 주면 된다. Object.assign({}, {name:'daseul'}, {city: 'seoul'}) 이렇게 작성하면 여기 있는 객체의 name속성이 'daseul'이라는 값을 assign이 복제해준다. 그 뒤의 값도 복사가 된다. 즉 첫번째 인자에 두번째 인자를 복사하고 그 결과에 다시 세 번째 인자를 복사하는 것이다.

이렇게 되면 위의 코드는 {name:'daseul', city:'seoul'}이라는 새로운 객체가 복사된다. 그것이 assign이다. 첫 번째 인자는 무조건 빈 객체를 주어야 한다. 왜냐하면 Object.assign()의 리턴값은 첫 번째 인자이기 때문이다.

// Object.assign()을 이용한 올바른 방법

function reducer(staet, action){ 
    if(state === undefined){       
        return {color: 'yellow'}   
    } 
    if(action.type === 'CHANGE_COLOR'){
        newState = Object.assign({}, state, { color: 'red' }) 
        // state의 값이 첫번째 인자인 빈 객체에 복제되어 리턴되고 세번째 인자가 덮어씌워진다. 
    }
    return newState // 복제된 값 return! 
}  

이전에는 원본인 state를 직접 변경했는데 이제는 state를 복제하고 그 복제한 것의 color를 red로 준것을 리턴하게 된다. 그러면 이 reducer가 실행될 때마다 리턴되는 값이 새로운 state값이 되는데 각각의 state값이 완전히 독립되어 복제된 값들이 리턴된다.

4) state의 변화를 UI에 반영하기

위에서 reducer를 통해 state값을 변경해주었다. 그러면 이 변경된 state값을 우리의 UI에 반영해주려면 어떻게 해야할까?

• 바로 render를 호출해주면 된다. state값이 바뀔 때마다 render를 호출해 화면에 그려준다.

var store = Redux.createStore(reducer)

function red() {
    var state = store.getState()
    document.querySelector('#red').innerHTML = `
        <div class="container" id="component_red"
        style="background-color:${state.color}">
            <h1>red</h1>
            <input type="button" value="fire" onclick="
                store.dispatch({type: 'CHANGE_COLOR', color: 'red'})
                ">
        </div>
    `
}
red()

red()라는 UI를 바꿔주는 함수는 state값에 따라서 color를 바꿔서 UI를 변경해주는 함수이기 때문에 언제든지 호출할 수 있다. 일단 위의 코드에서 보듯 red()를 최초 한번은 호출을 해주었는데 그 이후에 state가 바뀔때마다 그러니까 dispatch를 호출할때마다 red함수를 호출하게 하려면 어떻게 해야할까?

⇒ subscribe에 render를 등록하면 된다. 그러면 dispatch가 state값을 바꾸고 난 다음에 이것을 호출하도록 약속되어 있기 때문이다.

var store = Redux.createStore(reducer)

function red() {
    var state = store.getState()
    document.querySelector('#red').innerHTML = `
        <div class="container" id="component_red"
        style="background-color:${state.color}">
            <h1>red</h1>
            <input type="button" value="fire" onclick="
                store.dispatch({type: 'CHANGE_COLOR', color: 'red'})
                ">
        </div>
    `
}
red()

store.subscribe(red) // !!!!

store의 subscibe함수에 red함수를 인자로 넣어 호출해준다. 그러면 state가 바뀔때마다 red함수가 호출된다.

이렇게 Redux를 사용하게 되면 상태를 중앙집중적으로 관리할 수 있다. 각각의 부품들은 상태가 바뀌었을때 action을 store에 dispatch해주고 자신이 어떻게 변화되어야 하는지에 대한 코드를 작성하고 그것을 store에 subscribe하면 state가 바뀔때마다 통보를 받기 때문에 그때마다 자신의 모양을 바꿔줄수있는것이다.

4. 정리 !

• reducer 함수가 하는 역할은 store의 state값을 변경해준다. 어떻게? action의 값과 이전의 state값을 이용해서 새로운 state 값을 리턴해주면 그 리턴된 값이 새로운 state값이 된다. 그리고 리턴하는 값은 원본을 바꾸는 것이 아니라 이전에 있었던 값을 복제한 결과를 리턴해야지만 우리가 리덕스를 사용하는 여러가지 효용들을 최대한으로 활용할 수 있다 !
  
• 원래 서로의 컴포넌트들은 자신의 상태가 변경되었을때, 자신에게 의존하고 있는 다른 컴포넌트들에게 그것을 직접 알려줘야했다. 하지만 redux를 사용하게 되면 모든 컴포넌트들이 rendering될 때 필요한 데이터를 담고 있는 stae를 만들고, 만약 action을 전달해 reducer를 통해 staet가 변경되면 모든 컴포넌트들에게 state가 변경되었음을 알리고 sate가 변경됨에 따라 subscribe에 포함되어 있는 함수들이 실행되면서 컴포넌트들이 재렌더링되기 때문에 컴포넌트들간의 의존성이 낮아지고 컴포넌트들은 각자 자신의 상태에만 집중할 수 있다.

자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, 바꿔 말하면 this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다.

1) 전역 공간에서의 this

전역 공간에서 this는 전역 객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다.

전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있다. 브라우저 환경에서 전역객체는 window이고, Node.js 환경에서는 global이다.

전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당한다. 변수이면서 객체의 프로퍼티이기도 한 셈이다.

var a = 1;
console.log(a);        // 1
console.log(window.a); // 1
console.log(this.a);   // 1

⇒ 전역공간에서 선언한 변수 a에 1을 할당했을 뿐인데 window.a와 this.a는 모두 1이 출력된다. 전역 공간에서의 this는 전역객체를 의미하므로 두 값이 같은 값을 출력하는 것은 당연하지만, 그 값이 1인 것이 의아하다. 그 이유는 자바스크립트의 모든 변수는 실은 특정 객체의 프로퍼트로 동작하기 때문에다.

전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다.

2) 메서드로서 호출할 때 그 메서드 내부에서의 this

함수 vs. 메서드

어떤 함수를 실행하는 방법은 여러가지가 있는데, 가장 일반적인 방법 두 가지는 함수로서 호출하는 경우와 메서드로서 호출하는 경우이다.

프로그래밍 언어에서 함수와 메서드는 미리 정의한 동작을 수행하는 코드 뭉치로, 이 둘을 구분하는 유일한 차이는 독립성에 있다.

함수는 그 자체로 독립적인 기능을 수행하는 반면, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다. 자바스크립트는 상황별로 this 키워드에 다른 값을 부여하게 함으로써 이를 구현했다.

어떤 함수를 객체의 프로퍼티에 할당한다고 해서 그 자체로서 무조건 메서드가 되는 것이 아니라 객체의 메서드로서 호출한 경우에만 메서드로 동작하고 그렇지 않으면 함수로 동작한다.

var func = function(x){
    console.log(this, x);
};
func(1);                // Window{ ... } 1

var obj = {
    method: func
};
obj.method(2);          // { method:f } 2

위의 예제에서 보듯이 '함수로서의 호출'과 '메서드로서의 호출'을 할때 this가 가리키는 것은 다른다. '함수로서의 호출'과 '메서드로서의 호출'을 어떻게 구분할까? 함수 앞에 점(.)이 있는지 여부만으로 간단하게 구분할 수 있다.

// 메서드로서의 호출 - 점 표기법, 대괄호 표기법

var obj = {
    method : function(x) { console.log(this,x) }
};

obj.method(1);   // { method: f } 1
obj['method'](2) // { method: f } 2

다시 말해 점 표기법이든 대괄호 표기법이든, 어떤 함수를 호출할 때 그 함수 이름(프로퍼티명) 앞에 객체가 명시돼 있는 경우에는 메서드로 호출한 것이고, 그렇지 않은 모든 경우에는 함수로 호출한 것이다.

메서드 내부에서의 this

this에는 호출한 주체에 대한 정보가 담긴다. 어떤 함수를 메서드로서 호출하는 경우 호출 주체는 바로 함수명(프로퍼티명) 앞의 객체이다. 점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this가 되는 것이다.

var obj = {
    methodA: function(){ console.log(this) },
    inner : {
        methodB : function(){ console.log(this) }
    }
};

obj.methodA();  // { methodA : f, inner: {...} } ( === obj )
obj['methodA']; // { methodA : f, inner: {...} } ( === obj )

obj.inner.methodB();        // { method: f } ( === obj.inner)
obj.inner['methodB']();     // { method: f } ( === obj.inner)
obj['inner'].methodB();     // { method: f } ( === obj.inner)
obj['inner'].['methodB'](); // { method: f } ( === obj.inner)

3) 함수로서 호출할 때 그 함수 내부에서의 this

함수 내부에서의 this

어떤 함수를 함수로서 호출할 경우에는 this가 지정되지 않는다. this에는 호출한 주체에 대한 정보가 담긴다. 그런데 함수로서 호출하는 것은 호출 주체(객체지향언어에서의 객체)를 명시하지 않고 개발자가 코드에 직접 관여해서 실행한 것이기 때문에 호출 주체의 정보를 알 수 없는 것이다. 2장에서 실행 컨텍스트를 활성화할 당시에 this가 지정되지 않은 경우 this는 전역 객체를 바라본다고 했다. 따라서 함수에서의 this는 전역 객체를 가리킨다.

더글라스 크락포드는 이를 명백한 설계상의 오류라고 지적한다. 그 이유를 알아보자.

메서드 내부함수에서의 this

var obj1 = {
    outer: function(){
        console.log(this);            // (1):obj1
        var innerFunc = function(){
            console.log(this);          // (2):전역객체(window) (3):obj2
        }
        innerFunc();                  // 🌈

        var obj2 = {
            innerMethod : innerFunc
        };
        obj2.innerMethod();           // 🌈
    }
}
obj1.outer();

• 1번째 줄: 객체를 생성하는데, 이때 객체 내부에는 outer라는 프로퍼티가 있으며, 여기에는 익명함수가 연결된다. 이렇게 생성한 객체를 변수 obj1에 할당한다.
• 15번째 줄: obj1.outer를 호출한다.
• 2번째 줄: obj1.outer 함수의 실행 컨텍스트가 생성되면서 호이스팅하고, 스코프 체인 정보를 수집하고, this를 바인딩한다. 이 함수는 호출할 때 함수명인 outer앞에 점(.)이 있었으므로 메서드로서 호출한 것이다. 따라서 this에는 마지막 점 앞의 객체인 obj1이 바인딩된다.
• 3번째 줄: obj1 객체 정보가 출력된다.
• 4번째 줄: 호이스팅 된 변수 innerFunc는 outer스코프 내에서만 접근할 수 있는 지역변수이다. 이 지역변수에 익명 함수를 할당한다.
• 7번째 줄: innerFunc를 호출한다.
• 4번째 줄: innerFunc 함수의 실행 컨텍스트가 생성되면서 호이스팅, 스코프 체인 수집, this 바인딩 등을 수행한다. 이 함수를 호출할 때 함수명 앞에는 점(.)이 없다. 즉 함수로서 호출한 것이므로 this가 지정되지 않았고, 따라서 자동으로 스코프 체인상의 최상위 객체인 전역객체 (Window)가 바인딩 된다.
• 5번째 줄: window 객체 정보가 출력된다.
• 9번째 줄: 호이스팅된 변수 obj2 역시 스코프 내에서만 접근할 수 있는 지역변수이다. 여기에는 다시 객체를 할당하는데, 그 객체에는 innerMethod 라는 프로퍼티가 있으며, 여기에는 앞서 정의된 변수 innderFunc와 연결된 익명 함수가 연결된다.
• 10번째 줄: obj2 객체 정보가 출력된다.

⇒ 7번째 줄에서는 outer 메서드 내부에 있는 함수(innerFunc)를 함수로서 호출했다. 반면 12번째 줄에서는 같은 함수(innerFunc)를 메서드로서 호출했다. 같은 함수임에도 7번째 줄에 의해 바인딩되는 this와 12번째 줄에 의해 바인딩 되는 this의 대상이 서로 달라진 것이다.

그러니까 this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지 등)은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지 없는지가 관건인 것!!!

메서드 내부 함수에서의 this를 우회하는 방법

이렇게 하면 this에 대한 구분은 명확히 할 수 있지만, 그 결과 this라는 단어가 주는 인상과는 사뭇 달라져 버렸다. 호출 주체가 없을 때는 자동으로 전역객체를 바인딩하지 않고 호출 당시 주변환경의 this를 그대로 상속받아 사용할 수 있다면 좋겠다. 그게 훨씬 자연스러울뿐더러 자바스크립트 설계상 이렇게 동작하는 편이 스코프 체인과의 일관성을 지키는 설득력 있는 방식이었다. 변수를 검색하면 우선 가장 가까운 스코프의 L.E를 찾고 없으면 상위 스코프를 탐색하듯이, this 역시 현재 컨텍스트에 바인딩된 대상이 없으면 직전 컨텍스트의 this를 바라보도록 말이다.

아쉽게도 ES5까지는 자체적으로 내부함수에 this를 상속할 방법이 없지만 다행히 이를 우회할 방법이 없지는 않다. 그 중 대표적인 방법은 바로 변수를 활용하는 것이다.

var obj1 = {
    outer: function(){
        console.log(this)
        var innerFunc1 = function(){
            console.log(this)
        }
        innerFunc1();

      var self = this
        var innerFunc2 = function(){
      console.log(self)
    }
        innerFunc2()
    }
}
obj1.outer();

위 예제의 innerFunc1 내부에서 this는 전역객체를 가리킨다. 한편 outer 스코프에서 self라는 변수에 this를 저장한 상태에서 호출한 innerFunc2의 경우 self에는 객체 obj가 출력된다.

this를 바인딩하지 않는 함수

ES6에서는 함수 내부에서 this가 전역객체를 바라보는 문제를 보완하고자, this를 바인딩하지 않는 화살표 함수를 새로 도입했다. 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게 되어, 상위 스코프의 this를 그대로 활용할 수 있다. 내부함수를 화살표 함수로 바꾸면 위의 예제의 '우회법'이 불필요해진다. (아쉽게도 ES5환경에서는 화살표 함수를 사용할 수 없다.)

var obj = {
    outer: function(){
        console.log(this)         // (1) { outer: f }
        var innerFunc = () => {
            console.log(this)       // (2) { outer: f }
        }
        innerFunc()
    }
}
obj.outer();

그 밖에도 call, apply 등의 메서드를 활용해 함수를 호출할 때 명시적으로 this를 지정하는 방법이 있다.

4) 콜백 함수 호출 시 그 함수 내부에서의 this

함수 A의 제어권을 다른 함수(또는 메서드) B에 넘겨주는 경우 함수 A를 콜백 함수라 한다. 이때 함수 A는 함수 B의 내부 로직에 따라 실행되며, this 역시 함수 B 내부 로직에서 정한 규칙에 따라 값이 결정된다. 콜백 함수도 함수이기 때문에 기본적으로 this가 전역객체를 참조하지만, 제어권을 받은 함수에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조하게 된다.

setTimeout(function() { console.log(this); }, 300); // --------- (1)

[1, 2, 3, 4, 5].forEach(function(x) {               // --------- (2)
    console.log(this,x);
});

document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a')
    .addEventListener('click', function(e){           // --------- (3)
            console.log(this, e);
    });

(1): setTimeout 함수는 300ms 만큼 시간 지연을 한 뒤 콜백 함수를 실행하라는 명령이다. 0.3초 뒤 전역객체가 출력된다.

(2): forEach 메서드는 배열의 각 요소를 앞에서부터 차레로 하나씩 꺼내어 그 값을 콜백 함수의 첫 번째 인자로 삼아 함수를 실행하라는 명령이다. 전역객체와 배열의 각 요소가 총 5회 출력된다.

(3): addEventListener는 지정한 HTML 엘리먼트에 'click' 이벤트가 발생할 때마다 그 이벤트 정보를 콜백 함수의 첫 번째 인자로 삼아 함수를 실행하라는 명령이다. 버튼을 클릭하면 앞서 지정한 엘리먼트와 클릭 이벤트에 관한 정보가 담긴 객체가 출력된다.

⇒ (1)의 setTimeout 함수와 (2)의 forEach 메서드는 그 내부에서 콜백 함수를 호출할 때 대상이 될 this를 지정하지않는다. 따라서 콜백 함수 내부에서의 this는 전역객체를 참조한다. 한편 (3)의 addEventListener 메서드는 콜백 함수를 호출할 때 자신의 this를 상속하도록 정의돼 있다. 그러니까 메서드명의 점(.) 앞부분이 곧 this가 된다.

⇒ 이처럼 콜백 함수에서는 콜백 함수의 제어권을 가지는 함수(메서드)가 콜백 함수에서의 this를 무엇으로 할지 결정하며, 특별히 정의하지 않은 경우에는 기본적으로 함수와 마찬가지로 전역객체를 바라본다.

자바스크립트의 핵심 ! 호출한 것(객체) === this !!

5) 생성자 함수 내부에서의 this

생성자 함수는 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수이다. 객체지향 언어에서는 생성자를 클래스, 클래스를 통해 만든 객체를 인스턴스라고 한다. 프로그래밍적으로 '생성자'는 구체적인 인스턴스를 만들기 위한 일종의 틀이다. 자바스크립트늩 함수에 생성자로서의 역할을 함께 부여했다. new 명령어와 함께 함수를 호출하면 해당 함수가 생성자로서 동작하게된다. 그리고 어떤 함수가 생성자 함수로서 호출된 경우 내부에서의 this는 곧 새로 만들 구체적인 인스턴스 자신이 된다.

⇒ 생성자 함수를 호출하면 우선 생성자의 prototype 프로퍼티를 참조하는 __proto__ 라는 프로퍼티가 있는 객체를 만들고, 미리 준비된 공통 속성 및 개성을 해당 객체(this)에 부여한다. 이렇게 해서 구체적인 인스턴스가 만들어진다.

var Cat = function (name, age) {
    this.bark = '야옹'
    this.name = name
    this.age = age
}

var choco = new Cat ('초코', 7) // --- (1)
var nabi = new Cat ('나비', 5)  // --- (2)
console.log(choco, nabi)

/* 결과
Cat { bark: '야옹', name: '초코', age: 7 }
Cat { bark: '야옹', name: '나비', age: 5 }
*/

Cat이란 변수에 익명 함수를 할당했다. 이 함수 내부에서의 this에 접근해서 bark, name, age 프로퍼티에 각각 값을 대입한다. 그리고 new 명령어와 함께 Cat 함수를 호출해서 변수 choco, nabi에 각각 할당했다. choco와 nabi를 출력해보니 각각 Cat 클래스의 인스턴스 객체가 출력된다. 즉 (1)에서 실행한 생성자 함수 내부에서의 this는 choco 인스턴스를, (2)에서 실행한 생성자 함수 내부에서의 this는 nabi 인스턴스를 가리킴을 알 수 있다.

2. 명시적으로 this를 바인딩하는 방법

1) call 메서드

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])

call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령이다. 이때 call 메서드의 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 한다. 함수를 그냥 실행하면 this는 전역객체를 참조하지만 call 메서드를 이요하면 임의의 객체를 this로 지정할 수 있다.

var func = function (a, b, c) {
    console.log(this, a, b, c)
}

func(1, 2, 3)                  // Window{...} 1 2 3
func.call({ x: 1 }, 4, 5, 6)   // { x: 1 } 4 5 6

메서드에 대해서도 마찬가지로 객체의 메서드를 그냥 호출하면 this는 객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다.

var obj = {
    a : 1, 
    method : function (x, y) {
        console.log(this.a, x, y)
    }
}

obj.method(2, 3)                // 1 2 3
obj,method.call({ a: 4 }, 5, 6) // 4 5 6

2) apply 메서드

Function.prototype.apply(thisArg[, argsArray])

apply 메서드는 call 메서드와 기능적으로 완전히 동일하다. call 메서드는 첫 번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정하는 반면, apply 메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다는 점에서만 차이가 있다.

var func = function (a, b, c) {
    console.log(this, a, b, c)
}
func.apply({ x: 1 }, [4, 5, 6])  // { x: 1 } 4 5 6

var obj = {
    a: 1, 
    method: function(x, y) {
        console.log(this.a, x, y)
    }
}

obj.method.apply({ a: 4 },[5, 6]) // 4 5 6

3) bind 메서드

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

bind 메서드는 ES5에 추가된 기능으로, call과 비슷하지만 즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. 다시 새로운 함수를 호출할 때 인수를 넘기면 그 인수들은 기존 bind 메서드를 호출할 때 전달했던 인수들의 뒤에 이어서 등록된다. 즉 bind 메서드는 함수에 this를 미리 적용하는 것과 부분 적용 함수를 구현하는 두 가지 목적을 모두 지닌다.

var func = function (a, b, c, d) {
    console.log(this, a, b, c, d)
}
func(1, 2, 3, 4)                    // Window{ ... } 1 2 3 4

var bindFunc1 = func.bind({ x: 1 })
bindFunc1(5, 6, 7, 8);              // { x: 1 } 5 6 7 8

var bindFunc2 = func.bind({ x: 1 }, 4, 5)
bindFunc2(6, 7)                     // { x: 1 } 4 5 6 7
bindFunc2(8, 9)                     // { x: 1 } 4 5 8 9

• 6번째 줄에서 bindFunc1 변수에는 func에 this를 { x: 1 }로 지정한 새로운 함수가 담긴다.
• 이제 7번째 줄에서 bindFunc1을 호출하면 원하는 결과를 얻을 수 있게 된다.
• 한편 9번째 줄의 bindFunc2 변수에는 func에 this를 { x: 1 }로 지정하고, 앞에서부터 두 개의 인수를 각각 4, 5로 지정한 새로운 함수를 담았다.
• 이후 10번째 줄에서 매개변수로 6, 7을 넘기면 this 값이 바뀐 것을 제외하고는 최초 func함수에 4, 5, 6, 7을 넘긴 것과 같은 동작을 한다. 11번째 줄에서도 마찬가지이다.
• 6번째 줄의 bind는 this만을 지정한 것이고, 9번째 줄의 bind는 this 지정과 함께 부분 적용 함수를 구현한 것이다.

name 프로퍼티

bind 메서드를 적용해서 새로 만든 함수는 한 가지 독특한 성질이 있다. 바로 name 프로퍼티에 동사 bind의 수동태인 'bound'라는 접두어가 붙는다는 점이다. 어떤 함수의 name 프로퍼티가 'bound xxx'라면 이는 곧 함수명이 xxx인 원본 함수에 bind 메서드를 적용한 새로운 함수라는 의미가 되므로 기존의 call이나 apply보다 코드를 추적하기에 더 수월해진 면이 있다.

var func = function (a, b, c, d) {
    console.log(this, a, b, c, d)
}
var bindFunc = func.bind({ x: 1 }, 4, 5)
console.log(func.name)                    // func
console.log(bindFunc.name)                // bound func

상위 컨텍스트의 this를 내부함수나 콜백 함수에 전달하기

위에서 메서드의 내부함수에서 메서드의 this를 그대로 바라보게 하기 위한 방법으로 self 등의 변수를 활용한 우회법을 소개했는데, call, apply 또는 bind 메서드를 이요하면 더 깔끔하게 처리할 수 있다.

// 내부함수에 this 전달 - call

var obj = {
    outer: function(){
        console.log(this)
        var innerFunc = function(){
            console.log(this)
        }
        innerFunc.call(this)
    }
}
obj.outer();

// 내부함수에 this 전달 - bind

var obj = {
    outer: function(){
        console.log(this)
        var innerFunc = function(){
            console.log(this)
        }.bind(this)
        innerFunc()
    }
}
obj.outer();

또한 콜백 함수를 인자로 받는 함수나 메서드 중에서 기본적으로 콜백 함수 내에서의 this에 관여하는 함수 또는 메서드에 대해서도 bind 메서드를 이용하면 this 값을 사용자의 입맛에 맞게 바꿀 수 있다.

vat obj = {
        logThis: function(){
            console.log(this)
        },
        logThisLater1: function(){
            setTimeout(this.logThis, 500)
        }, 
        logThisLater2: function(){
            setTimeout(this.logThis.bind(this), 1000)
        }
}
obj.logThisLater1() // Window { ... }
obj.logTHisLater2() // obj { logThis: f, ... }

4) 화살표 함수의 예외사항

ES6에 새롭게 도입된 화살표 함수는 실행 컨텍스트 생성 시 this를 바인딩하는 과정이 제외되었다. 즉 이 함수 내부에는 this가 아예 없으며, 접근하고자 하면 스코프체인상 가장 가까운 this에 접근하게 된다.

var obj = {
    outer: function(){
        console.log(this)
        var innerFunc = () => {
            console.log(this)
        }
        innerFunc()
    }
}
obj.outer()

이렇게 화살표 함수를 사용하면 별도의 변수로 this를 우회하거나 call/apply/bind 를 적용할 필요가 없어 더욱 간결하고 편리하다.

5) 별도의 인자로 this를 받는 경우(콜백 함수 내에서의 this)

콜백 함수를 인자로 받는 메서드 중 일부는 추가로 this로 지정할 객체를 인자로 지정할 수 있는 경우가 있다. 이러한 메서드의 thisArg 값을 지정하면 콜백 함수 내부에서 this 값을 원하는 대로 변경할 수 있다. 이런 형태는 여러 내부 요소에 대해 같은 동작을 반복 수행해야 하는 배열 메서드에 많이 포진돼 있으며, 같은 이유로 ES6에 새로 등장한 Set, Map 등의 메서드에도 일부 존재한다. 그중 대표적인 배열 메서드인 forEach의 예를 살펴보겠다.

var report = {
    sum: 0, 
    count: 0, 
    add: function(){
        var args = Array.prototype.slice.call(arguments)
        args.forEach(function(entry){
            this.sum += entry
            ++this.count
        }, this)
    },
    average: function(){
        return this.sum / this.count
    }
}
report.add(60, 85, 90)
console.log(report.sum, report.count, report.average()) // 240 3 80

• report 객체에는 sum, count 프로퍼티가 있고, add, average 메서드가 있다. 5번째 줄에서 add 메서드는 arguments를 배열로 변환해서 args 변수에 담고 6번쨰 줄에서는 이 배열을 순회하면서 콜백 함수를 실행하는데, 이때 콜백 함수 내부에서의 this는 forEach 함수의 두 번째 인자로 전달해준 this가 바인딩된다. 11번째 줄의 average는 sum 프로퍼티를 count 프로퍼티로 나눈 결과를 반환하는 메서드이다.
• 15번째 줄에서 60, 85, 95를 인자로 삼아 add 메서드를 호출하면 이 세 인자를 배열로 만들어 forEach 메서드가 실행된다. 콜백 함수 내부에서의 this는 add 메서드에서의 this가 전달된 상태이므로 add 메서드의 this(report)를 그대로 가리키고 있다. 따라서 배열의 세 요소를 순회하면서 report.sum 값 및 report.count 값이 차례로 바뀌고, 순회를 마친 결과 report.sum에는 240이 report.count에는 3이 담기게 된다.

// 콜백 함수와 함께 thisArg를 인자로 받는 메서드

Array.prototype.forEach(callback[, thisArg])
Array.prototype.map(callback[, thisArg])
Array.prototype.filter(callback[, thisArg])
Array.prototype.some(callback[, thisArg])
Array.prototype.every(callback[, thisArg])
Array.prototype.find(callback[, thisArg])

3. 정리

다음 규칙은 명시적 this 바인딩이 없는 한 늘 성립한다.

1. 전역공간에서의 this는 전역객체(브라우저에서는 window, Node.js에서는 global)를 참조한다.
2. 어떤 함수를 메서드로서 호출한 경우 this는 메서드 호출 주체(메서드명 앞의 객체)를 참조한다.
3. 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조한다. 메서드의 내부함수에서도 같다.
4. 콜백 함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조한다.
5. 생성자 함수에서의 this는 생성될 인스턴스를 참조한다.

다음은 명시적 this의 바인딩이다. 위 규칙에 부합하지 않는 경우에는 다음 내용을 바탕으로 this를 예측할 수 있다.

1. call, apply 메서드는 this를 명시적으로 지정하면서 함수 또는 메서드를 호출한다.
2. bind 메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만든다.
3. 요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 한다.

📚 문제

*공통 원소 구하기 *
A, B 두 개의 집합이 주어지면 두 집합의 공통 원소를 추출하여 오름차순으로 출력하는 프로그램을 작성하세요

스스로 해결 여부 ⭕️ 👏🏻

🔍 문제 접근

1. 두 집합을 오름차순으로 정렬한다.
2. 각 집합의 인덱스를 가리킬 포인터 두개를 만든다.
3. 반복하면서 어떤 조건을 만족했을때 포인터를 이동시켜서 result값을 구한다.

어제 한 회사의 알고리즘 면접을 보면서 이중 for문을 사용하는 것보다 two pointers 알고리즘을 이용하는 것이 시간복잡도가 더 낮다는 설명을 들었다. 그도 그럴것이 이중 for문은 두 배열의 모든 경우의 수를 계산하게 된다. 하지만 두개의 포인터를 사용하여 어떤 조건을 만족했을 때 어떤 것을 취하고 포인터를 이동시키면 굳이 모든 경우의 수를 따질 필요가 없다. 이중 for문을 사용한다면 n^2의 경우의 수를 계산한다면 two pointer는 n * 2의 경우의 수만 계산하기 때문! (맞나..?)

👩🏻‍💻 코드

const getCommonElement = (arr1, arr2) => {
  const sortedArr1 = arr1.sort((a, b) => a - b)
  const sortedArr2 = arr2.sort((a, b) => a - b)

  let result = []
  let p1 = 0
  let p2 = 0
  while (p1 < arr1.length && p2 < arr2.length) {
    if (sortedArr1[p1] === sortedArr2[p2]) {
      result.push(sortedArr1[p1])
      p1++
    } else if (sortedArr1[p1] < sortedArr2[p2]) {
      p1++
    } else if (sortedArr1[p1] > sortedArr2[p2]) {
      p2++
    }
  }
  return result
}

getCommonElement([1, 3, 9, 5, 2], [3, 2, 5, 7, 8])
// [ 2, 3, 5 ]
getCommonElement([1, 3, 11, 5, 2, 13, 39, 23], [3, 11, 5, 9, 8, 23, 39, 2])
// [ 2, 3, 5, 11, 23, 39 ]

🕵🏻‍♀️ 문제 풀이

1. 먼저 인자로 들어온 두 배열을 sort메서드를 통해 오름차순으로 정렬한다.
2. 결과를 담을 빈 배열 result를 만들어준다.
3. 각 배열의 인덱스를 담당할 pointer두개를 만들어준다. 0부터 시작한다.
4. p1 포인터가 arr1의 배열의 길이보다 작을때, 또 p2 포인터가 arr2의 배열의 길이보다 작을때 둘다를 만족시킬때까지 반복해준다.(두 포인터를 모두 돌때까지)
5. 만약 정렬한 arr1의 배열의 p1의 값이 arr2의 배열의 p2값과 같다면 result에 둘중의 하나 값을 담는다.(둘다 어차피 같은 값이니까)
6. 그다음 p1이나 p2 둘중 하나의 값을 1증가시킨다. (처음 풀때 이 부분을 처리를 안해줬더니 무한루프가 돌았다. 이 부분을 처리를 안하게 되면 처음 값이 같게 될때 그 값을 담고나서 포인터가 이동하지 않기 때문에 계속 그 자리에 머물면서 result값에 담기만 하기 때문에 무한 루프가 돌았던 것!!)
7. 만약 한쪽의 배열의 값이 다른 배열의 값보다 작게되면 그 작은 값의 포인터를 1증가시킨다. 오름차순으로 되어있기때문에 작을때 증가시켜야 그 다음 커진 원소와 비교가 되기 때문
8. 두개의 포인터가 끝날때까지 이 조건들을 반복한다!

📚 문제

*두 배열 합치기 *
오름차순으로 정렬이 된 두 배열이 주어지면 두 배열을 오름차순으로 합쳐 출력하는 프로그램을 작성하세요. 첫번째 줄에 첫번째 배열의 크기 n이 주어진다. 두번째 줄에 n개의 배열 원소가 오름차순으로 주어진다. 세번째 줄에 두번째 배열의 크기 m이 주어진다. 네 번째 줄에 M개의 배열 원소가 오름차순으로 주어진다. 각 리스트의 원소는 int형 변수의 크기를 넘지 않는다.
sort를 사용하게 되면 시간 복잡도가 n log n이 된다 . 따라서 sort를 사용하지 않고 풀어보자

스스로 해결 여부 ❌

🔍 문제 접근

한시간 정도 혼자 풀다가 잘못풀었다는것을 알고 강의를 보고 다시 풀었다 😅

• 처음 내가 접근했던 방법

1. 1씩 증가하는 i를 통해 반복문을 만든다. i는 두 배열중 길이가 작은 배열의 길이만큼 값이 증가한다.
2. 각각 두 배열의 i번째를 비교해서 만약 arr1[i]값이 arr2[i]보다 작거나 같으면 빈 배열에 arr1[i]를 먼저 넣고, arr2[i]값을 그 뒤에 넣는다. 그 반대의 경우라면 arr2[i]의 값을 먼저 넣고, arr1[i]을 넣는다.
3. 그 다음 길이가 긴 배열의 남은 요소드을 그 뒤에 붙여준다.
4. 이것을 n < m 일때의 경우와, n > m 일때의 경우로 나누어서 작업해줌.
5. 될 것같았으나 완전 잘못 접근함.. 밑에 코드를 보면 알 수 있다.

const getOneArray = (n, arr1, m, arr2) => {
  let result = []
  // n이 m보다 작을때
  if (n <= m) {
    for (let i = 0; i < n; i++) {
      if (arr1[i] <= arr2[i]) {
        result.push(arr1[i])
        result.push(arr2[i])
      } else {
        result.push(arr2[i])
        result.push(arr1[i])
      }
    }
    for (let j = n; j < m; j++) {
      result.push(arr2[j])
    }
    return result
    // m이 n보다 작을때
  } else {
    for (let i = 0; i < m; i++) {
      if (arr1[i] <= arr2[i]) {
        result.push(arr1[i])
        result.push(arr2[i])
      } else {
        result.push(arr2[i])
        result.push(arr1[i])
      }
    }
    for (let j = m; j < n; j++) {
      result.push(arr1[j])
    }
    return result
  }
}

console.log(getOneArray(3, [1, 3, 5], 5, [2, 3, 6, 7, 9]))
// [ 1, 2, 3, 3, 5, 6, 7, 9 ]
console.log(getOneArray(4, [1, 3, 5, 10], 5, [2, 3, 6, 7, 9]))
// [ 1, 2, 3, 3, 5, 6, 7, 10, 9 ] <= 이 테스트에서 오류가 나는것을 볼 수 있다.
console.log(getOneArray(5, [2, 3, 6, 7, 9], 3, [1, 3, 5]))
// [ 1, 2, 3, 3, 5, 6, 7, 9 ]

👩🏻‍💻 코드

• 강의를 보고 다시 푼 방법

1. two pointers라는 알고리즘으로 각 배열의 포인터를 정해주고(포인터는 인덱스를 의미하는 숫자가 됨) 각각의 포인터가 어떤 조건을 만족시킬때마다 증가시킨다.
2. 이번 문제에서는 p1, p2 변수를 두어서 각 배열의 포인터를 각각 분리해준다. 0부터 시작한다.
3. 이 포인터는 배열의 길이보다 작다. 두 배열의 길이가 다르기 때문에 조건을 나누어줄것이다.
4. 각 포인터가 두 배열의 크기보다 작을때를 둘다 만족할 때의 경우 만약 arr1[p1]이 arr[p2]보다 작으면 result에 arr1[p1]을 넣어주고 포인터에 1을 증가시킨다. 왜냐면 그래야 다음 포인터가 가리키는 값이랑 비교를 할 수 있기 때문!!
5. 이렇게 비교를 하면서 작은 값을 result에 넣어주고, 어떤 포인터의 값이 끝나면 조건을 만족시키지 않을 것이다. 그럼 남은 배열의 값들을 그대로 넣어주어야 하기 때문에 밑에 조건을 추가해준다.
6. 그리고 result값을 리턴해주면 끝!
7. 배열에서 인덱스 값에 접근할때 그 안의 변수를 넣은뒤 증가 시키는 방법을 새롭게 알게되었다.

const getOneArray = (n, arr1, m, arr2) => {
  let result = []
  let p1 = 0
  let p2 = 0
  while (p1 < n && p2 < m) {
    if (arr1[p1] <= arr2[p2]) {
      result.push(arr1[p1++])
    } else {
      result.push(arr2[p2++])
    }
  }
  while (p1 < n) {
    result.push(arr1[p1++])
  }
  while (p2 < m) {
    result.push(arr2[p2++])
  }
  return result
}

console.log(getOneArray(3, [1, 3, 5], 5, [2, 3, 6, 7, 9])) 
// [ 1, 2, 3, 3, 5, 6, 7, 9 ]
console.log(getOneArray(4, [1, 3, 5,10], 5, [2, 3, 6, 7, 9]))
// [ 1, 2, 3, 3, 5, 6, 7, 9, 10 ]
console.log(getOneArray(5, [2, 3, 6, 7, 9],3, [1, 3, 5] ))
// [ 1, 2, 3, 3, 5, 6, 7, 9 ]

리액트에서 state값이 객체인 경우 setState를 통해 상태값을 업데이트 시킬때, spread operator를 사용해서 기존의 state값은 유지시키고 그것을 복사해서 업데이트한 값으로 상태를 바꿔준다. 이는 리액트에서 불변성을 지켜야 하는 이유와 관련이 깊다.

const onChange = (e) => {
    const { name, value } = e.target

    setInputs({
      ...inputs,            // 이 부분 
      [name]: value,        
    })
  }

불변성이란

불변성은 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것이다.

코어자바스크립트 1장 데이터타입에서 살펴보았듯이 원시 타입은 괜찮지만 객체 타입의 불변성을 지키는 것은 고려해야 할 부분이 있다.

코어자바스크립트 1장을 참고하면, 만약 원시타입이 아닌 객체타입의 데이터를 어떠한 변수에 할당하고 그 변수를 다른 변수에 다시 할당했다면, 배열의 복사가 이루어지는 것이 아니라 같은 참조값을 갖게 된다. 그래서 만약 사본을 수정하면 원본도 함께 수정이 되어버린다.

React로 넘어와보자.

React가 화면을 업데이트하는 과정은 다음과 같다.

1. setState 호출 (혹은 부모로부터 props를 전달 받는다.)
2. shouldComponentUpdate를 실행했는데 fasle를 리턴하면 여기서 멈추고, true를 리턴하면 다음 단계로 이동.
3. 가상 DOM과 실제 DOM을 비교해서 변경사항이 있으면 화면을 다시 그린다.

여기서 shouldComponentUpdate는?

• 각각의 컴포넌트들은 shouldComponentUpdate라는 메소드를 가지고 있고 이것은 state가 변경되거나 부모 컴포넌트로부터 새로운 props를 전달받을 때 실행됩니다. React는 이 메소드(shouldComponentUpdate)의 반환 값에 따라서 re-render를 할지에 대한 여부를 결정하게 됩니다.
• 기본적으로 shouldComponentUpdate 메소드는 true를 반환합니다. 하지만 React 개발자는 re-render를 원하지 않는 경우에, 이 return value를 false로 오버라이드 할 수 있습니다.

특정 컴포넌트가 업데이트를 할 필요가 없다는 것을 어떻게 판단할 수 있을까? 가장 간단한 방법은 컴포넌트가 갖고 있는 데이터(props, state)의 이전 이후 값을 완전히 비교하는 것이다.

불변성이 지켜지지 않으면 객체 내부의 값이 새로워져도 바뀐것을 감지하지 못한다.

spread operator의 한계

추가로 전개 연산자(spread operator)을 사용하여 객체나 배열 내부의 값을 복사할 때는 얕은 복사를 하게 된다. 즉 내부의 값이 완전히 새로 복사되는 것이 아니라 가장 바깥쪽에 있는 값만 복사된다. 따라서 내부의 값이 객체 혹인 배열이라면 내부의 값 또한 따로 복사해 주어야 한다.

배열 혹은 객체의 구조가 정말 복잡해진다면 이렇게 불변성을 유지하면서 업데이트 하는 것도 까다로워진다. 이렇게 복잡한 상황인 경우 immer라는 라이브러리의 사용으로 편하게 작업이 가능하다.

즉 다음과 같은 이유로, 우리가 state를 바꾸고 돔을 다시 만들려면, 새로운 객체나 배열을 만들어 새로운 참조값을 만들고 react에게 이 값은 이전과 다른 참조값임을 알려야 한다.

따라서 기존의 state값은 변하지 않도록 불변하게 만들고 새롭게 복사한 객체로 업데이트를 시켜 이전과 다른 값임을 알려야 한다.

이렇게 state값을 포함한 변수도 불변성을 갖게 해야 다른 버그나 예외사항이 일어나지 않는다.

immutable variable을 만드는 방법

React에서 immutable variable을 만드는 여러가지 방법이 있다.

1. 자바스크립트 표준 함수 ES6 Object.assign() 또는 object-rest-spread
2. 자바스크립트 라이브러리 immutable-js
3. react공식 문서에서 추천하는 패키지인 immutability-helper

JS는 각 버전별로 문법과 동작이 매우 급변하는데, 브라우저 개발사가 항상 이에 맞게 최신 버전으로 업데이트를 하지만 소수의 사용자만이 제때 업데이트를 한다. 또한 각 브라우저들 마다 약간씩 API의 지원 범위가 차이가 나는데 이 모든 걸 개발자들이 신경 쓰기 어려운 것이 현실이다.

이를 위해 polyfill이 생겼는데, polyfill은 모던 브라우저에서만 지원하던 API들을 이전 버전의 브라우저에서도 동작하게끔 도와준다 !

아래의 예를 보고 이해해보자.

'use strict'

/* http://www.ecma-international.org/ecma-262/6.0/#sec-number.isnan */

module.exports = function isNaN(value) {
    return value !== value;
};

is-nan es-shim에서 가져온 코드이다.

(참고로 es-shim은 크로스 브라우징에 대응하기 위한 라이브러리이다.)

polyfill을 사용하면 isNAN을 지원하지 않더라도, 미리 구현된 코드를 통해 모던 브라우저와 같은 결과를 낼 수 있게 도와준다!

여기서 의문이 하나든다. 이렇게 하위 호환성을 위한 코드가 늘어나면 코드의 전체 크기가 커져 로딩이 오래 걸리지 않을까?

정답은 맞다.

실제로 로딩 시간은 길어진다. 하지만 속도를 제외하고 생산성과 유지보수의 측면에서 바라본다면 손해보단 이득이 크다.

그렇다면 polyfill코드의 크기를 줄여보는 것은 어떨까? 이 글에서는 코드를 빌드하는 시점에서 코드를 분석해서 사용할 코드에 대해서만 polyfill을 추가했다고 한다. 하지만 이러한 노력에도 불구하고 매우 적은 용량이 감소했고 이미 polyfill의 최적화 방법들이 훌륭하다고 말한다.

마지막으로 모든 코드가 polyfill이 가능하거나 동일한 결과를 보장할 수 없을 수도 있다고 한다. 따라서 개발자들은 사용하려는 함수가 어떻게 구현됐는지 가능하면 알아야 한다.

크로스 브라우징을 위한 es-shim 링크이다.

• ES6
• ES5

2. transpiler

class, const, let 등 API와 관련 없이 아예 새로운 문법을 사용하고 싶을 때는 어떻게 해야 할까? 이러한 상황에서 사용해야 하는 것이 바로 transplier이다.

transform + compiler를 합친 단어로 새로운 문법이 사용된 코드를 이전 문법으로 변환해주는 작업을 담당한다.

class Person {

  constructor(name) {
    this.name = name
  }

  showName() {
    console.log(name)
  }
}

const msLee = new Person('Daseul Lee')
msLee.showName()

위 class 키워드는 es6에서 지원하는 문법이다. 이를 대표적인 transpiler인 babel로 가장 흔하게 변환하는 es6 ⇒ es5로 변환해본다면 아래와 같이 변경된다.

"use strict";

function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }

function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var Person =
/*#__PURE__*/
function () {
  function Person(name) {
    _classCallCheck(this, Person);

    this.name = name;
  }

  _createClass(Person, [{
    key: "showName",
    value: function showName() {
      console.log(name);
    }
  }]);

  return Person;
}();

var msLee = new Person('Daseul Lee');
msLee.showName();

(굉장히 복잡해 보인다. 변환 코드는 우리가 다 이해할 필요는 없다^^.. 아마도?)

3. polyfill과 transpiler의 차이

polyfill과 transpiler는 비슷하면서 다르다. 둘 다 최신 기능을 구 버전의 실행환경에서 동작 가능하게 바꿔준다는 점이다. 하지만 polyfill은 오롯이 API에서만 구 버전 지원을 도와주고 transpiler는 신규 문법을 구 버전으로 바꿔주는 역할을 한다.

📚 reference

https://wangchunsik.tistory.com/12

📚 문제

k번째 큰 수
현수는 1부터 100사이의 자연수가 적힌 N장의 카드를 가지고 있습니다. 같은 숫자의 카드가 여러장 있을 수 있습니다. 현수는 이 중 3장을 뽑아 각 카드에 적힌 수를 합한 값을 기록하려고 합니다. 3장을 뽑을 수 있는 모든 경우를 기록합니다. 기록한 값 중 K번째로 큰 수를 출력하는 프로그램을 작성하세요. 만약 큰 수부터 만들어진 수가 25 23 24 24 22 20 19 ...이고 K값이 3이라면 K번쨰 큰 값은 22입니다. 첫 줄에 자연수 N과 K가 입력되고, 그 다음 주에 N개의 카드값이 입력된다. 첫 줄에 K번째 수를 출력합니다. K번쨰 수가 존재하지 않으면 -1를 출력합니다.

스스로 해결 여부 ⭕️ 👏🏻

🔍 문제 접근

1. 3장을 뽑아 모든 합을 기록해야 하므로 3중 for문을 이용해 모든 합을 구해 배열에 담는다.
2. 중복된 숫자를 거른다.
3. 그 중 k-1의 인덱스를 구한다.

👩🏻‍💻 코드

const getNumber = (n, k, arr) => {
  let sum = []
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      for (let z = j + 1; z < arr.length; z++) {
        sum.push(arr[i] + arr[j] + arr[z])
      }
    }
  }
  sum.sort((a, b) => b - a)
  const uniqueSum = new Set(sum)
  const uniqueArr = [...uniqueSum]
  return uniqueArr[k - 1]
}

console.log(getNumber(10, 3, [13, 15, 34, 23, 45, 65, 33, 11, 26, 42]))

🕵🏻‍♀️ 문제 풀이

1. 빈 sum이라는 배열을 만든다.
2. 인자로 주어진 숫자들 중 3개를 뽑은 모든 경우의 합을 구해야 하기 때문에 삼중 for문을 통해 모든 합을 구한다. 이때, 더해야 하는 index는 서로 중복되면 안되기 때문에 첫번째 for문 i는 0부터 시작하고 그 다음 j는 i+1, z는 j+1로 설정한다.
3. 각 인덱스의 합들을 구해 sum에다 요소를 넣는다.
4. sum을 sort메서드를 통해 내림차순으로 정렬한다.
5. Set이라는 인스턴스를 통해 중복을 제거한다. 제거한 값을 배열로 바꾸어준다.
6. k번째로 큰 수를 구해야 하기 때문에 새로운 배열의 k-1 번째 값을 리턴한다.

📚 문제

졸업선물
선생님은 올해 졸업하는 반 학생들에게 졸업선물을 주려고 합니다. 학생들에게 인터넷 쇼핑몰에서 각자 원하는 상품을 골라 그 상품의 가격과 배송비를 제출하라고 했습니다. 선생님이 가지고 있는 예산은 한정되어 있습니다. 현재 예산으로 최대 몇 명의 학생에게 선물을 사줄 수 있는지 구하는 프로그램을 작성하세요. 선생님은 상품 하나를 50% 할인해서 살 수 있는 쿠폰을 가지고 있습니다. 배송비는 할인에 포함되지 않습니다.
첫번째 인자에 학생수와 예산이 주어진다. 두 번째 인자부터 n줄까지 각 학생들이 받고 싶은 상품의 가격과 배송비가 입력된다. 상품 가격은 짝수로 입력된다.

스스로 해결 여부 ⭕️ 👏🏻

🔍 문제 접근

1. 학생의 선물 가격과 배송비를 합한 총 가격을 계산한다.
2. 계산 후 각 상품 가격과 배송비가 입력된 배열을 포함한 배열을 for문을 통해 돌면서 sum이라는 변수에 누적을 한다.
3. 예산보다 sum이 작거나 같을때 num에 1씩 더한다.

👩🏻‍💻 코드

const getMaxStudentNumber = (budget, arr) => {
  let sum = 0
  let num = 0
  let sumArr = []
  for (let j = 0; j < arr.length; j++) {
    sumArr.push(arr[j][0] / 2 + arr[j][1])
  }
  sumArr.sort((a, b) => a - b)
  console.log(sumArr)
  for (let i = 0; i < sumArr.length; i++) {
    sum += sumArr[i]
    if (sum <= budget) {
      num++
    }
  }
  return num
}
console.log(
  getMaxStudentNumber(28, [
    [6, 6],
    [4, 3],
    [10, 3],
    [4, 5],
    [2, 2],
  ])
) //4

🕵🏻‍♀️ 문제 풀이

1. 처음에 문제 접근의 방법으로 푸니 만약 모든 상품 가격과 배송비를 더한 값의 배열의 순서가 달라지면 결과가 달라지는 것을 알았다. (왜냐하면 순서대로 각 배열을 접근하면서 sum의 누적할때마다 num이 1이 증가하는데 만약 합이 큰 숫자가 앞에서 먼저 나와버리면 num의 값이 달라질 수 있기 때문)
2. 그래서 모든 상품 가격과 배송비를 더한 값의 배열을 새로 만든뒤 그 배열을 오름차순으로 정렬했다. 이렇게 되면 작은 수부터 큰 수 순서대로 나오기 때문에 최대한의 num의 값을 구할 수 있기 때문이다.
3. 이 배열을 처음 문제 접근한 방법대로 for문에 누적을 시키고 만약 예산보다 값이 작거나 같을때 num을 1씩 증가시킨다.

📚 문제

멘토링
현수네 반 선생님은 반 학생들의 수학점수를 향상시키기 위해 멘토링 시스템을 만들려고 한다. 멘토링은 멘토(도와주는 학생)와 멘티(도움을 받는 학생)가 한 짝이 되어 멘토가 멘티의 수학공부를 도와주는 것이다. 선생님은 M번의 수학테스트 등수를 가지고 멘토와 멘티를 정한다. 만약 A학생이 멘토이고, B학생이 멘티가 되는 짝이 되었다면 A학생은 M번의 수학테스트에서 모두 B학생보다 등수가 앞서야 한다. M번의 수학성적이 주어지면 멘토와 멘티가 되는 찍을 만들 수 있는 경우가 총 몇가지 인지 출력하는 프로그램을 작성하세요.
인자로 수학테스트 결과가 학생 번호로 주어진다. 학생번호가 제일 앞에서부터 1등, 2등, ...n등 순으로 표현된다.

스스로 해결 여부
⭕️ 👏🏻 (두시간에 걸쳐서 간신히 풀었다ㅜㅜ....)

🔍 문제 접근

1. 최대한 어렵지 않게 접근하려고 했다. 어렵고 복잡하게 접근할수록 더 코드가 복잡해지기에.. (지금 푼 코드도 사실 복잡한 것 같긴하지만...)
2. 배열이 주어지면 각 숫자는 학생의 이름이다. 그리고 순서는 학생의 등수이다. 다행히 학생이름이 숫자이기에 for문을 통해 접근할 수 있었다. i는 멘토가 될 학생이다. 또 j는 멘티가 될 학생이다.
3. 각각의 역할을 부여했을때, 모든 수학 성적에서 i의 등수가 j의 등수보다 작을때의 경우의 수를 구한다.

👩🏻‍💻 코드

const getMentoringNumberOfCase = (arr) => {
  let num = 0
  for (let i = 1; i < arr[0].length + 1; i++) {
    for (let j = 1; j < arr[0].length + 1; j++) {
      const arr1 = []
      for (let z = 0; z < arr.length; z++) {
        if (arr[z].indexOf(i) < arr[z].indexOf(j)) {
          arr1.push(true)
        } else {
          arr1.push(false)
        }
      }
      if (arr1.every((el) => el === true)) {
        num++
      }
    }
  }
  return num
}

console.log(
  getMentoringNumberOfCase([
    [3, 4, 1, 2],
    [4, 3, 2, 1],
    [3, 1, 4, 2],
  ])
) // 3
console.log(
  getMentoringNumberOfCase([
    [1, 3, 2, 4, 5],
    [5, 3, 1, 2, 4],
    [3, 5, 2, 1, 4],
  ])
) // 4

🕵🏻‍♀️ 문제 풀이

1. i와 j를 학생의 이름으로 구분한 후 이중 for문을 통해 각각 멘토일때와 멘티일때를 비교한다.
2. 그 안의 for문을 통해 각 수학성적등수의 경우를 비교한다.
3. 만약 z번째의 수학성적등수중 i의 등수가 j의 등수보다 작으면 (i가 더 시험을 잘보면) arr1이라는 값에 true를 넣고, 만약 그렇지 않으면 false를 넣는다. (이 과정에서 모든 수학성적등수의 모든 값이 조건을 만족했을때의 경우의 수를 구하기 위해 이것저것 생각해봤는데 달리 방법이 생각나지 않았다..)
4. 따라서 arr1의 모든 요소가 true일때 num에 1씩 더해주고, num의 값을 리턴했다.
5. 여기서 배열의 every라는 메소드를 처음 사용했는데 이 메소드는 배열의 모든 요소가 어떤 조건을 만족하면 true를 반환한다.

실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.

자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행한다.

본격적으로 실행 컨텍스트를 살펴보기전 스택(stack)과 큐(queue)의 개념을 살펴보자.

스택 ⇒ 출입구가 하나뿐인 깊은 우물 같은 데이터 구조. 선입후출 큐 ⇒ 양쪽이 모두 열려있는 파이프의 데이터 구조. 선입선출

앞서 실행 컨텍스트를 실행할 코드에 제공할 환경 정보들을 모아놓은 객체라고 했다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐이다. 예제를 보자.

// -----------------------------  (1)
var a = 1;
function outer(){
    function inner(){
        console.log(a); // undefined
        var a = 3;
    }
    inner(); // ------------------- (2)
    console.log(a); // 1
}
outer(); // --------------------- (3)
console.log(a); // 1

1. 자바스크립트 코드를 실행하는 순간 (1) 전역 컨텍스트가 콜 스택에 담긴다. 최상단의 공간은 코드 내부에서 별도의 실행 명령이 없어도 브라우저에서 자동으로 실행하므로 자바스크립트 파일이 열리는 순간 전역 컨텍스트가 활성화된다고 이해하면 된다. 
2. 전역 컨텍스트와 관련된 코드들을 순차로 실행하다가 (3)에서 outer 함수를 호출하면 자바스크립트 엔진은 outer에 대한 환경 정보를 수집해서 outer 실행 컨텍스트를 생성한 후 콜 스택에 담는다. 콜 스택의 맨 위에 outer 실행 컨텍스트가 놓인 상태가 됐으므로 전역 컨텍스트와 관련된 코드의 실행을 일시중단하고 대신 outer 실행 컨텍스트와 관련된 코드, 즉 outer 함수 내부의 코드들을 순차로 실행한다. 
3. 다시 (2)에서 inner 함수의 실행 컨텍스트가 콜 스택의 가장 위에 담기면 outer 컨텍스트와 관련된 코드의 실행을 중단하고 inner 함수 내부의 코드를 순서대로 진행할 것이다. 
4. inner 함수 내부에서 a 변수에 값 3을 할당하고 나면 inner 함수의 실행이 종료되면서 inner 실행 컨텍스트가 콜 스택에서 제거된다. 그러면 아래에 있던 outer 컨텍스트가 콜 스택의 맨 위에 존재하게 되므로 중단했던 (2)의 다음 줄부터 이어서 실행한다. a변수의 값을 출력하고 나면 outer 함수의 실행이 종료되어 outer 실행 컨텍스트가 콜 스택에서 제거되고, 콜 스택에는 전역 컨텍스트만 남아 있게 된다. 그런 다음 실행을 중단했던 (3)의 다음 줄부터 이어서 실행한다. 
5. a변수의 값을 출력하고 나면 전역 공간에 더는 실행할 코드가 남아 있지 않아 전역 컨텍스트도 제거되고, 콜 스택에는 아무것도 남지 않은 상태로 종료된다. 

![](https://images.velog.io/images/_seeul/post/a52cbb7a-815b-49b3-941f-546d38bb10af/image.png)

스택 구조를 잘 생각해보면 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점임을 알 수 있다! 

어떤 실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장한다. 여기에 담기는 정보들을 다음과 같다.

`VariableEnvironment` : 현재 컨텍스트 내의 식별자에 대한 정보 + 외부 환경 정보. 
선언 시점의 LexicalEnvirionment의 스냅샷으로, 변경 사항은 반영되지 않음
`LexicalEnvironment` : 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨.
`ThisBinding` : this 식별자가 바라봐야 할 대상 객체.

![](https://images.velog.io/images/_seeul/post/43bbab02-9509-4fb8-87ea-351df9488b60/image.png)

위의 그림은 활성화된 실행 컨텍스트의 수집 정보이다. 

# 2. VariableEnvironment

---

>`VariableEnvrionment`에 담기는 내용은 `LexicalEnvironment`와 같지만 최초 실행 시의 스냅샷을 유지한다는 점이 다르다. 실행 컨텍스트를 생성할 때 `VariableEnvironment`에 정보를 먼저 담은 다음, 이를 그대로 복사해서 `LexicalEnvironment`를 만들고, 이후에는 `LexicalEnvironment`를 주로 활용하게 된다. 

# 3. LexicalEnvironment

---

>`LexicalEnvironment`는 '사전적인'이 어울리는 표현이다. "현재 컨텍스트의 내부에는 a,b,c와 같은 식별자들이 있고 그 외부 정보는 D를 참조하도록 구성돼있다"라는, 컨텍스트를 구성하는 환경 정보들을 사전에서 접하는 느낌으로 모아놓은 것이다. 

## 1) environmentRecord와 호이스팅

environmentRecord에는 현재 컨텍스트와 관련된 코드의 **식별자 정보**들이 저장 !
- 컨텍스트를 구성하는 함수에 지정된 **매개변수 식별자**
- ****선언한 함수가 있을 경우 **그 함수 자체**
- **var로 선언된 변수의 식별자**

⇒ 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 **순서대로** 수집.

변수 정보를 수집하는 과정을 모두 마쳤더라도 아직 코드들은 실행되기 전의 상태. 코드가 실행 전임에도 불구하고 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명들을 모두 알고있다. 

'자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 코드를 실행한다'고 생각해도 문제가 없다!

여기서 호이스팅이라는 개념이 등장

⇒ 호이스팅이란 '끌어올리다'라는 의미로, 변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대체한 가상의 개념이다. 자바스크립트 엔진이 실제로 끌어올리지는 않지만 편의상 끌어올린 것으로 간주하는 것.

### **매개 변수와 변수에 대한 호이스팅**

>```jsx
function a (x) {  // 수집 대상 1 (매개변수)
    console.log(x)  // (1) -- 1 출력(예상)
    var x           // 수집 대상 2 (변수 선언)
    console.log(x)  // (2) -- undefined 출력(예상)
    var x = 2       // 수집 대상 3 (변수 선언)
    console.log(x)  // (3) -- 2 출력(예상)
}
a(1);

우선 호이스팅이 되지 않았을 때, (1), (2), (3)에서 어떤 값들이 출력될지를 예상해보자.

(1)에는 함수 호출 시 전달한 1이 출력되고,

(2)에는 선언된 변수 x에 할당한 값이 없으므로 undefined가 출력되고

(3)에는 2가 출력될 것 같다.

실제로는 어떤 결과가 나오고 왜 그렇게 되는지 알아보자!

function a(){
    var x;         // 수집 대상 1의 매개변수 선언 부분
    var x;         // 수집 대상 2의 변수 선언 부분
    var x;         // 수집 대상 3의 변수 선언 부분
    x = 1          // 수집 대상 1의 할당 부분
    console.log(x) // (1) -- 1 출력
    console.log(x) // (2) -- 1 출력
    x = 2          // 수집 대상 3의 할당 부분
    console.log(x) // (3) -- 2 출력
}
a(1)

(1)은 1, (2)는 2, (3)은 2라는 결과가 나온다. (2)에서 undefined가 아닌 1이 출력된다는 건 호이스팅 개념을 이해하고 있어야한다. 

### **함수 선언의 호이스팅**

>```jsx
function a() {
    console.log(b);  // (1) -- undefined 출력(예상)
    var b = 'bbb';   // 수집 대상 1 (변수 선언)
    console.log(b);  // (2) -- 'bbb' 출력(예상)
    function b(){};  // 수집 대상 2 (함수 선언)
    console.log(b);  // (3) -- b함수 출력(예상)
}
a();

출력 결과를 미리 예상해보자. (1)에는 b의 값이 없으니 undefined가 나올 것 같다. (2)는 'bbb', (3)은 b함수가 출력될 것같다. 실제로도 그럴지 한번 보자!

function a(){
    var b           // 수집 대상 1. 변수는 선언부만 끌어올린다. 
    function b(){}  // 수집 대상 2. 함수 선언은 전체를 끌어올린다. 
    console.log(b)  // (1) -- 함수 b 출력
    b = 'bbb'       // 변수의 할당부는 원래 자리에 남겨둔다. 
    console.log(b)  // (2) -- 'bbb' 출력
    console.log(b)  // (3) -- 'bbb' 출력
}
a()

해석의 편의를 위해 한 가지 더 바꿔보자. 호이스팅이 끝난 상태에서의 함수 선언문은 함수명으로 선언한 변수에 함수를 할당한 것처럼 여길 수 있다.

>```jsx
function a(){
    var b           // 수집 대상 1. 변수는 선언부만 끌어올린다. 
    var b = function b(){}  // 바뀐 부분!!! 🌟🌟
    console.log(b)  // (1) -- 함수 b 출력
    b = 'bbb'       // 변수의 할당부는 원래 자리에 남겨둔다. 
    console.log(b)  // (2) -- 'bbb' 출력
    console.log(b)  // (3) -- 'bbb' 출력
}
a()

함수 선언문과 함수 표현식

둘 다 함수를 새롭게 정의할 때 쓰이는 방식

1. 함수 선언문 ⇒ function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미
   • 반드시 함수명의 정의되어 있어야 함
     
2. 함수 표현식 ⇒ 정의한 function을 별도의 변수에 할당하는 것 의미
   • 함수명이 정의되어 있지 않아도 됨
   • 함수명을 정의한 함수 표현식 ⇒ "기명 함수 표현식"
   • 함수명을 정의하지 않은 함수 표현식 ⇒ "익명 함수 표현식"

function a () { ... } // 함수 선언문. 함수명 a가 곧 변수명
a() // 실행 ok
var b = function() { ... } // 익명 함수 표현식. 변수명 b가 곧 함수명
b() // 실행 ok
var c = function d () { ... } // 기명 함수 표현식. 변수명은 c, 함수명은 d
c() // 실행 ok
d() // 에러 !!

함수 선언문과 함수 표현식의 실질적인 차이를 살펴보자 !

>```jsx
console.log(sum(1, 2))
console.log(multiply(3, 4));
function sum (a, b) {             // 함수 선언문 sum
    return a + b;
}
var multiply = function (a, b) {  // 함수 표현식 multiply
    return a + b
}

호이스팅을 마친 최종 상태를 바로 확인해보자

var sum = function sum (a, b) {   // 함수 선언문은 전체를 호이스팅한다. 
    return a + b;
}
var multiply                      // 변수는 선언부만 끌어올린다. 
console.log(sum(1, 2))            // 3출력
console.log(multiply(3, 4));      // Error! 'multiply is not a function'
multiply = function (a, b) {      // 변수의 할당부는 원래 자리에 남겨 놓는다.
    return a + b
}

sum함수는 선언 전에 호출해도 아무 문제없이 실행된다. 어떻게 작성해도 오류를 내지 않는다는 면에서 초급자들이 자바스크립트를 좀 더 쉽게 접근할 수 있게 해주는 측면도 있지만, 반대로 큰 혼란을 일으키는 원인이 되긴도 한다. 

함수 선언문보다는 함수 표현식이 어떻게 보면 더 안전하다고 생각하면 된다. 

## 2) 스코프, 스코프 체인, outerEnvironmentReference

**스코프란 식별자에 대한 유효범위이다**. 어떤 경계 A의 외부에서 선언한 변수는 A의 외부뿐 아니라 A의 내부에서도 접근이 가능하지만, A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근할 수 있다. 

자바스크립트는 특이하게도 ES5까지는 전역공간을 제외하면 오직 함수에 의해서만 스코프가 생성된다. 이러한 **'식별자의 유효범위'를 안에서부터 바깥으로 차례로 검색해나가는 것을 스코프 체인**이라고 한다. 그리고 이를 가능케 하는 것이 바로 `LexicalEnvironment`의 두 번째 수집 자료인 `outerEnvironmentReference`이다. 

### 스코프 체인

`outerEnvironmentReference`는 현재 호출된 함수가 선언될 당시의 `LexicalEnvironment`를 참조한다. 과거 시점인 '선언될 당시'에 주목하자. '선언하다'라는 행위가 실제로 일어날 수 있는 시점이란 콜 스택 상에서 어떤 실행 컨텍스트가 활성화된 상태일 때뿐이다. 어떤 함수를 선언(정의)하는 행위 자체도 하나의 코드에 지나지 않으며, 모든 코드는 실행 컨텍스트가 활성화 상태일 때 실행되기 때문이다. 

예를들어 A함수 내부에 B함수를 선언하고, 다시 B함수 내부에 C함수를 선언했다고 가정하자!

함수 C의 `outerEnvironmentReference`는 함수 B의 `LexicalEnvironment`를 참조한다.
⇒ 함수 B의 `LexicalEnvironment` 에 있는 `outerEnvironmentReference`는 다시 함수 B가 선언되던 때 A의 `LexicalEnvironment`를 참조할것이다. 
⇒ 이처럼 `outerEnvironmentReference` 는 연결리스트 형태를 띈다.
⇒ '선언 시점의`LexicalEnvironment`'를 계속 찾아 올라가면 마지막엔 전역 컨텍스트의 `LexicalEnvironment`가 있을 것이다.  
⇒ 또한 각 `outerEnvironmentReference` 는 오직 자신이 선언된 시점의 `LexicalEnvironment` 만 참조하고 있으므로 가장 가까운 요소부터 차례대로만 접근할 수 있고 다른 순서로 접근하는 것은 불가능할 것이다. 
⇒ 이런 구조적 특성 덕분에 여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능하게 된다. 

![](https://images.velog.io/images/_seeul/post/e90aa798-e90b-4376-a5d4-4e273dc3ea97/image.png)

>```jsx
var a = 1                     
var outer = function () {     
    var inner = function () {   
        console.log(a)            
        var a = 3                 
    }
    inner()
    console.log(a)
}
outer()
console.log(a)

다음 코드를 보자 !

1. 전역 컨텍스트 활성화. 전역 컨텍스트의 environmentRecord에 { a, outer } 식별자 저장. 전역 컨텍스트는 선언 시점이 없으므로 outerEnvironmentReference에는 아무것도 담기지 않는다. (this : 전역 객체)
2. 1번째과 2번째 줄 : 전역 스코프에 있는 변수 a에 1을, outer에 함수를 할당.
3. 10번째 줄 : outer함수 호출. 이에 따라 전역 컨텍스트의 코드는 10번째 줄에서 임시중단. outer 실행 컨텍스트가 활성화 되어 2번째 줄로 이동
4. 2번째 줄: outer 실행 컨텍스트의 environmentRecord에 { inner } 식별자 저장. outerEnvironmentReference에는 outer함수가 선언될 당시의 LexicalEnvironment가 담긴다. outer 함수는 전역 공간에서 선언됐으므로 전역 컨텍스트의 LexicalEnvironment를 참조복사한다. 이를 [ Global, { a, outer } ]라고 표기하자. 첫 번째는 실행 컨텍스트의 이름, 두 번째는 environmentRecord 객체이다. (this : 전역 객체)
5. 3번째 줄 : outer 스코프에 있는 변수 inner에 함수를 할당.
6. 7번째 줄 : inner 함수 호출. 이에 따라 outer 실행 컨텍스트의 코드는 7번째 줄에서 임시 중단되고, inner 실행 컨텍스트가 활성화되어 3번째줄로 이동.
7. 3번째 줄 : inner 실행 컨텍스트의 environmentRecord에 { a } 식별자 저장. outerEnvironmentReference에는 inner 함수가 선언될 당시의 LexicalEnvironment가 담긴다. inner 함수는 outer 함수 내부에서 선언됐으므로 outer 함수의 LexicalEnvirionment, 즉 [ outer, { inner } ]를 참조복사. (this : 전역객체)
8. 4번째 줄 : 식별자 a에 접근하고자 함. 현재 활성화 상태인 inner 컨텍스트의 environmentRecord에서 a를 검색. a가 발견됐는데 여기에는 아직 할당된 값 없음 (undefined 출력)
9. 5번째 줄 : inner 스코프에 있는 변수 a에 3을 할당.
10. 6번째 줄 : inner 함수 실행 종료. inner 실행 컨텍스트가 콜 스택에서 제거되고, 바로 아래의 outer 실행 컨텍스트가 다시 활성화되면서, 앞서 중단했던 7번째 줄의 다음으로 이동.
11. 8번째 줄 : 식별자 a에 접근하고자 한다. 이때 자바스크립트 엔진은 활성화된 실행 컨텍스트의 LexicalEnvironment에 접근한다. 첫 요소의 environmentRecord에서 a가 있는지 찾아보고, 없으면 outerEnvirionmentReference에 있는 environmentRecord로 넘어가는 식으로 계속해서 검색. 예제에서는 두 번째, 즉 전역 LexicalEnvironment에 a가 있으니 그 a에 저장된 값 1을 반환.
12. 9번째 줄 : outer 함수 실행이 종료. outer 실행 컨텍스트가 콜 스택에서 제거되고, 바로 아래의 전역 컨텍스트가 다시 활성화되면서, 앞서 중단했던 10번째 줄의 다음으로 이동.
13. 11번째 줄 : 식별자 a에 접근하고자 함. 현재 활성화 상태인 전역 컨텍스트의 environmentRecord에서 a를 검색. 바로 a를 찾을 수 있음 (1 출력). 이로써 모든 코드의 실행 완료. 전역 컨텍스트가 콜 스택에서 제거되고 종료.

정리 ! environmentRecord ⇒ 컨텍스트 내부의 식별자 정보. outerEnvironmentReference ⇒ 외부 Scope의 주소 참조. 현재 호출된 함수가 선언될 당시의 LexicalEnvironment참조. 스코프 ⇒ 식별자에 대한 유효범위. 스코프 체인 ⇒ '식별자의 유효범위'를 안에서부터 바깥으로 차례로 검색해 나가는 것. 이를 가능하게 하는 것이 outerEnvironmentReference.

4. this

실행 컨텍스트의 thisBinding에는 this로 지정된 객체가 저장된다. 실행 컨텍스트 활성화 당시에this가 지정되지 않은 경우 this에는 전역 객체가 저장된다.

그 밖에는 함수를 호출하는 방법에 따라 this에 저장되는 대상이 다르다.

5. 마지막 정리

1. 실행 컨텍스트 ⇒ 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. 실행 컨텍스트의 객체는 활성화 되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBinding의 세 가지 정보를 수집. ⇒ 실행 컨텍스트를 생성할 때는 VariableEnvironment와 LexicalEnvironment가 동일한 내용으로 구성되지만 LexicalEnvironment는 함수 실행 도중에 변경되는 사항이 즉시 반영되는 반면 VariableEnvironment는 초기 상태를 유지. ⇒ VariableEnvironment와 LexicalEnvironment는 매개변수명, 변수의 식별자, 선언한 함수의 함수명 등을 수집하는 environmentRecord와 바로 직전 컨텍스트의 LexicalEnvironment 정보를 참조하는 outerEnvironmentReference로 구성.
2. 호이스팅 ⇒ 코드 해석을 좀 더 수월하게 하기 위해 environmentRecord의 수집 과정을 추상화한 개념으로, 실행 컨텍스트가 관여하는 코드 집단의 최상단으로 이들을 '끌어올린다'고 해석하는 것. ⇒ 변수 선언과 값 할당이 동시에 이뤄진 문장은 '선언부'만을 호이스팅 하고, 할당 과정은 원래 자리에 남아있게 되는데, 여기에서 함수 선언문과 함수 표현식의 차잉가 발생.
3. 스코프 ⇒ 스코프는 변수의 유효범위를 뜻함. ⇒ outerEnvironmentReference는 해당 함수가 선언된 위치의 LexicalEnvironment를 참조. 코드 상에서 어떤 변수에 접근하려고 하면 현재 컨텍스트의 LexicalEnvironment를 탐색해서 발견되면 그 값을 반환하고, 발견하지 못할 경우 다시 outerEnvironmentReference에 담긴 LexicalEnvironment를 탐색하는 과정을 거친다. 전역 컨텍스트의 LexicalEnvironment까지 탐색해도 해당 변수를 찾지 못하면 undefined를 반환.
4. 전역변수와 지역변수 ⇒ 전역 컨텍스트의 LexicalEnvironment에 담긴 변수를 전역변수라 하고, 그 밖의 함수에 의해 생성된 실행 컨텍스트의 변수들은 모두 지역변수. 안전한 코드 구성을 위해 가급적 전역변수의 사용은 최소화 하는 것이 좋음
5. this ⇒ 실행 컨텍스트를 활성화하는 당시에 지정된 this가 지정. 함수를 호출하는 방법에 따라 그 값이 달라지는데, 지정되지 않은 경우에는 전역 객체가 저장.

📚 Reference

• 코어 자바스크립트