프리온보딩을 마치고 기간은 조금 지났지만 피드백에 대한 부분을 궁금해 하실수 있어서 남겨봅니다.

동료 피드백

같이 Best Pracitce를 찾아가며 구현해서 과제를 제출해낸 동료들에게 피드백을 주고 받는 시간이었다. 나름 열심히 참여한다고는 했지만 동료들은 어떻게 생각했을지 궁금했는데 다들 좋은 말씀만 적어주셔서 감사했다. 고쳐야 할 점에 대한 피드백도 나름 각오는 하고 있었다. 개발자가 아니라도 내가 고쳐야 할 점은 나보다 남이 더 잘알고 그것을 극복한다면 더 나은 개발자가 될 수 있기 때문이다.

셀프 피드백

내가 부족했던 것이 무엇이고 어떤것을 알아갔는지 셀프 피드백을 하는 시간이었다. 클린코드를 작성하는 것과 랜더링을 줄일 수 있는 방법에 대해 고민했다고 생각했지만 다른 팀원들의 코드를 보면서 많은 방법과 많은 스택을 학습할 수 있는 시간이었고, 인턴십을 진행하면서 다른 사람의 코드를 읽고 습득하여 수정할 수 있는 능력이 길러졌다고 생각한다.

다른 사람의 코드를 읽는 것은 현업에 나가서 회사의 코드를 빠르게 리딩하여 회사의 컨벤션에 맞게 작업할 수 있는 기간을 빠르게 잡을 수 있다고 생각하여 인턴십을 하면서 얻은 것 중 가장 큰 것이라고 생각한다.

오늘은 원티드 프리온보딩 프론트엔드 인턴십의 마지막날이다. 처음엔 나에게 도움이 될까라는 생각을 많이했지만 현직자의 실시간 강의와 자료를 보며 내가 몰랐던 것에 대해서 많은 것을 알아가게 되었고, 내가 알고 있는 내용이 정확한 내용인지 정확하게 알 수 있었으며, 기업과제를 수행하고 팀원들의 코드를 보면서 Best Practice를 선별하며 다른 사람의 코드를 읽는 능력 또한 향상 되었다.

면접 준비를 하면서 가장 많이 보았던 실행 컨텍스트와 클로저에 대해서 강의를 진행해주셨다.

📝 강의내용

스코프와 this, 호이스팅, 클로저의 공통점

모두 실행 컨텍스트라는 개념에 근간을 두고 있다.

실행 컨텍스트?

JavaScript가 실행되는 환경을 정의한다. this, 변수, 객체, 함수 등 코드의 실행에 필요한 기반을 환경이라 의미한다.

코드를 실행하는데 필요한 환경을 제공하고, 관리한다.

식별자, 스코프, this 등은 실행 컨텍스트의 렉시컬 환경을 기반으로 관리된다.

코드의 실행 순서는 콜스택(실행 컨텍스트 스택)을 통해서 관리된다.

실행 컨텍스트의 종류

• Global Execution Context: 처음으로 JavaScript 코드가 실행될 때 생성되는 실행 컨텍스트이다. 전역에서 관리되는 값들을 관리한다.
• Funcution Execution Context: 함수가 호출될 때 마다 생성되는 실행 컨테스트이다. 
• Eval Execution Context: eval 함수로 실행한 코드의 컨텍스트이며, 보안상의 이슈로 권장되지 않고 사용하지 않는다.
• Module Execution Context

실행 컨텍스트 스택(콜스택)

스택은 LIFO(Last In, First Out)의 특징을 가징 자료구조이다.

JavaScript는 스택에 실행 컨텍스트를 순차적으로 추가하고 제거하면서 코드의 순서를 관리하면서 실행한다.

클로저

공식문서: 함수와 함수가 선언된 어휘적 환경의 조합이다.

클로저는 자신이 생성될 때의 환경을 기억하고, 그를 사용하는 함수이다.

함수를 일급객체로 사용하는 모든 언어에서 사용되는 특성도 있다.

function makeAddNumFunc(num) {
  const toAdd = num

  return function (num) {
    return num + toAdd
  }
}

const add5 = makeAddNumFunc(5)

add5(3) // 8
add5(8) // 13
add5(15) // 20

클로저의 원리

본인이 생성될 때의 환경을 기억하고, 본인이 호출될 때 그 환경에 있는 변수들을 참조할 수 있게된다.

클로저의 활용 예시

• 상태 기억
• 상태 은닉
• 상태 공유

React에서 클로저의 실제 활용

React에서 사용하는 useState, useEffect 등 함수 컴포넌트에서 사용하는 모든 Hook들은 클로저를 기반으로 동작하고 있다.

  const useState = (initialValue) => {
    const state = hooks[hookIndex] || initialValue;
    hooks[hookIndex] = state;

    const setState = (function () {
      const currentHookIndex = hookIndex;

      return (value) => {
        hooks[currentHookIndex] = value;
        hookIndex = 0;
        render();
      };
    })();

    increaseIndex();
    return [state, setState];
  };

  const useEffect = (effect, deps) => {
    const prevDeps = hooks[hookIndex];

    const hasChanged = isFirstCall(prevDeps) || isDepsChanged(prevDeps, deps);

    if (hasChanged) {
      effect();
    }

    hooks[hookIndex] = deps;
    increaseIndex();
  };

채용 설명회

총 4개의 기업에서 채용설명회를 진행했는데 정작 프론트엔드를 뽑는 기업은 위메이드 밖에 없었다는 생각이 드는 설명회였다. 

나름 채용설명회라해서 기대를 했었지만 17일은 두 개의 기업 모두 프론트엔드를 뽑지 않는 채용회여서 너무 아쉬움이 많았다. 회사에 대해서 알 수 있다는 것은 좋지만 미리 언급을 해줬으면 어떤지 생각이 드는 시간이었다.

이력서코칭

이력서 코칭은 2주차에 진행했던 커리어 코칭의 내용과 매우 흡사했다. 중복되는 자료도 있을 거라 생각하여 많이 바꿔오셨다고는 했지만 이력서 코칭은 내용이 거의 다 비슷한 내용같다. 하지만, 이력서 코칭을 들으면서 내 이력서를 다시 돌아볼 수 있는 시간이 되는 것은 좋은 것 같다.

오늘은 Jest를 사용해서 프론트엔드 단에서 테스트를 하는 방법에 대해서 학습했다. 사실 이전에 학습을 해보고 조금 작성도 해봤지만 테스트를 언제, 어떻게 작성해야 하는지에 대한 고민이 항상 있었다. 이를 해결할 수 있는 시간이라고 생각된다.

📝 강의내용

소프트웨어 테스트란?

소프트웨어가 의도한대로 동작하는지를 테스트하는 것이다.

소프트웨어를 통해서 테스트를 하면 얻을 수 있는 이점

• 사람이 테스트를 실행하는 것보다 빠르다.
• 정해진 스크립트에 따라 일관성있게 동작하기에 사람이 테스트 할 경우 발생할 수 있는 휴먼 에러를 피할수 있다.

테스트에는 크게 3가지로 유닛, 통합, E2E 테스트가 있다.

유닛 테스트

테스트중에서 가장 작은 범위를 테스트한다. 개별 함수, 메서드, 클래스, 컴포넌트 등의 동작을 테스트한다.

통합 테스트

두 개 이상의 모듈이 결합해서 동작을 잘 수행하는지에 대한 테스트이다. 컴포넌트가 Redux등의 상태관리 라이브러리와 통합했을 때 두 모듈이 잘 어루러져서 최종적으로 의도한 결과를 도출하는지 테스트하는 것이다. 

End-to-End 테스트

실제 유저가 애플리케이션을 사용하는 것과 유사한 환경을 구축한 후 실제 유저의 동작을 흉내내서 테스트하는 것이다.

JavaScript 테스트 라이브러리 - Jest, Mocha, Chai

Jest 사용법 및 Jest를 활용한 리액트 테스트

오늘은 리덕스와 리덕스 미들웨어에 대해서 설명해주셨다. 프론트엔드 개발하게 된다면 뗄 수 없는 것이 전역 상태 관리다. 이것을 쉽게 해주기 위해서 React에서는 ContextAPI를 사용하기도 하지만 보통은 Redux를 사용하여 전역 상태를 개발을 한다.

전역 상태 관리 라이브러리는 mobX, redux, recoil, zustand 등 다양한 것이 있지만 내가 생각했을 때는 Redux-Toolkit까지 사용하게 된다면 코드의 직관성을 조금 더 높일 수 있을 것 같아서 보통 작업을 할 때는 Redux-Toolkit을 사용하고 있었다.

이번 강의에서는 Redux에 middleware를 사용하는 방법에 대해서 학습했다.

📝 강의내용

Redux를 학습하기 저에 디자인 패턴에 대해서 학습했다.

• MVC 패턴
  • 이 패턴은 학부생 시절 JAVA를 학습할 때 많이 봤던 패턴이라 기억하고 있다. 
    Model, View, Controller로 나누어서 설계하는 패턴으로 알고 있다.
  • Model: 데이터의 형태를 정의하고, 데이터를 수정하는 역할을 담당한다.
  • View: 모델을 UI로 표현, 사용자의 입력을 받아서 Controller에 전달한다.
  • Controller: 유저의 입력을 받아서 애플리케이션 내에서 어떻게 처리할지 판단 및 가공해서 모델 또는 뷰를 조작한다.
• Flux
  • MVC 패턴에서 발생하는 동작 흐름을 분석하거나 예측할 수 없는 문제가 발생하는 것을 해결하기 위해 페이스북 개발자들이 생각한 디자인 패턴이다.
  • Flux의 핵심은 단방향이다.
  • 양방향으로 인한 연쇄적인 변화로 규정했기 때문에 단방향으로 애플리케이션의 변화 흐름을 최대한 단순화하고 예측가능하게 하는데 목표를 두었다고 한다.
  • Flux 구성요소
    • Action: 어떤 변화를 발생하도록 정의하는 type property와 변화에 필요한 데이터를 담고있는 객체다.
    • Dispatcher: Action을 받아서 Store에 전달하는 역할을 한다.
    • Store: 애플리케이션의 데이터를 저장하고, Dispatch에 전달된 Action에 따라 수정한다.
    • View: Store에 저장된 데이터를 받아서 UI로 표현하고, 유저의 동작에 따라서 Action을 생성한다.

위의 내용을 학습하고 나서 왜 Redux를 학습하기 전에 Flux라는 디자인 패턴에 대해서 학습을 했는지 알게 되었다. 
Redux에서 구성된 요소가 Flux와 비슷하기 때문이다.

• Redux 구성요소
  • View: 유저에게 보이는 UI, store의 state를 기반으로 그려진다.
  • Action: 어떤 일이 일어났는지를 묘사하는 객체이다.
  • Reducer: 이전 state 값과, action 객체를 인자로 받아서 새로운 state를 리턴하는 순수 함수이다.
    • 새로운 state는 오로지 기존의 state와 action 객체를 통해서만 계산되어야한다.
    • Reducer는 기존의 state를 수정해서는 안된다. 기존의 state를 복사하고, 복사한 state에 변화를 주어야 한다.
    • Reducer 내부에서는 비동기 통신, 랜덤 값을 사용하는 것 등의 그 어떤 사이드 이펙트도 수행되서는 안된다.
  • Store: Redux의 모든 state를 관리하는 객체이다.
  • Dispatch: Action 객체를 store에 전달하고, store는 Reducer를 통해서 새로운 state를 만들어낸다.
  • Selectors: store에 특정한 state만 가져오기 위한 함수이다.
• Middleware
  • 프레임워크의 요청과 응답 사이에 추가할 수 있는 코드
  • 미들웨어를 통해서 리덕스를 조금 더 편리하게 사용할 수 있도록한다.

오늘은 과제리뷰와 타입스크립트에 대해서 강의를 해주셨다.

타입 스크립트는 꽤 전부터 사용하고 있었지만 어떻게 사용해야 잘 사용하는 것인가에 대해 코드도 많이 찾아보고 자료도 찾아봤지만 현직자가 직접 강의 해주는 것이 훨씬 이해하기 좋았다. (블로그엔 내용이 너무 천차만별... 강의보는 것이 좋긴하다...)

📝 강의 내용

타입스크립트란 무엇인가?

타입스크립트는 자바스크립트에 타입 문법을 추가해서 만든 슈퍼셋이다. 슈퍼셋은 기존 자바스크립트에다가 추가적인 기능을 추가했다는 의미이다.

타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환해주어야 한다. 이과정을 컴파일이라고 한다.

타입스크립트를 왜 써야하는가?

자바스크립트 코드의 품질과 개발 생산선을 높일 수 있다.

프로젝트를 실행하기 전에 에러를 사전에 방지할 수 있으며 코드 가이드 및 자동 완성 기능을 사용할 수 있다.