TIL - 2021. 05. 24.

노션으로 개인 일정 관리 테이블을 별도로 작성해야될 것 같은데 평일은 힘들지 싶다. 주말을 활용해서 정리하는 것으로 하고, 일단 남겨두어야할 것들은 임시로 블로그에 게시하도록 하자.

저번 주에 합격 소식을 듣고 오늘부터 바로 근무한다고 했다. 살짝만 더 놀았으면 하는 아쉬움이 있지만, 며칠 지나면 별 감흥이 없을 것 같다. 별거 아닌 일에 마음 쓰지 말자.

오늘은 앞으로 해야 할 프로젝트에 대한 개요 설명 및 협업 툴에 대한 전반적인 설명을 들었다.

0. Init

Node.js

• 현재 사용 중인 LTS 버전에 대해 검토 후 추후 확정 예정 (현재 12번대 사용 중인 것으로 알고 있음)

ESLint / Prettier

• 이전 프로젝트에서 적용한 설정 파일이 있으므로, 참고하여 적용

1. Stack

현재 프론트엔드 파트에서 사용하고 있는 / 사용하게 될 스택들에 대한 내용으로, 경험이 있는 스택은 부족하거나 개선해야할 사항에 대한 피드백을 부탁드렸다.

React (Hooks)

• Custom Hook에 대한 예제 및 사용법을 습득.
• React에서 Atomic Design Pattern을 적용.

Redux (toolkit) / Redux Saga

• 비동기 처리 시 Redux Saga를 사용한 처리방법 습득.
• 아키텍쳐 설계에 대한 고민.

TypeScript

• 프로젝트에 TypeScript를 직접 적용한 경험이 부족하므로, 초기에는 JavaScript로 작성하여 TypeScript로 Refactoring하는 것을 고려.

Docker

• 현재 우선적으로 배워야 할 스택.

Styled Components

• Scss와 작성 스타일은 유사하니 큰 문제는 없을 것. 컴포넌트와 페이지의 구분. 코드의 작성에 대해 고민.

2. 코드 피드백

이전에 면접을 맡으셨던 프론트엔드 엔지니어분에게 개선하면 좋을 것 같다고 생각하신 부분에 대한 피드백을 부탁드렸다. 내용은 다음과 같다.

• 함수 작성 시 파라미터가 여러 개 들어가는 경우가 있다. 이 때, 이 함수를 사용하려다 보면 변수의 순서를 확인해야 하다보니 보통 번거로운 것이 아니다. 순서를 잘 못 집어넣게 될 우려도 있다. 이를 다음과 같이 객체를 사용해보도록 하자.

function foo({ size = 1, color = "red", shape = "circle" }) {
  console.log(size, color, shape);
}

foo({}); // 1 "red" "circle"
foo({ color: "green" }); // 1 "green" "circle"
foo({ size: 2, color: "blue", shape: "rect" }); // 2 "blue" "rect"

• 첫 번째 프로젝트에서 비동기 처리에 Promise / then 패턴이 사용된 부분이 있었다. 추후 업무에서는 Async / await으로 통일하도록 하자. (협의된 부분)

• Optional Chaning은 객체의 참조가 null 또는 undefined라면, 에러가 발생할 수 있다. 이 때 옵셔널 체이닝을 사용하면, 앞의 참조 대상이 undefined이거나 null일 때, 평가를 멈추고 undefined를 반환하게 된다. 존재하면, 평가를 진행한다. 예제를 통해 살펴보도록 하자.

const user = {};
console.log(user.address.street); // TypeError: Cannot read property "street" of undefined

// Use optional chaning
const user = {};
console.log(user?.address?.street); // undefiend, 에러가 발생하지 않는다.

“평가 대상이 없어도 괜찮은 경우에만, 선택적으로 사용하도록 하는 것이 중요하다.”

• Debugging: React, Redux Extension(logger) + Chrome

• 첫 프로젝트에 디자인 패턴을 정의해야 한다. “Atomic Design Pattern”을 적용해보는 것을 생각해보도록 하자.

3. 주 업무

1. Docker를 사용하여 React의 Index.js 띄우기
   → 전역 상태관리 (Redux)를 고려해야 하는지 확인이 필요.

2. Docker 테스트 방법에 대한 내용 확인하여 작업에 참고.

3. 기본 파일구조 설계(Atomic Design Pattern)에 대한 검토. 자료 서치 및 해당 내용에 대한 도움 요청.

4. 부트스트랩 코드 숙지

5. 부트스트랩을 활용한 각 페이지 기본 템플릿 작성
   → 엔드 포인트에 대한 내용 재확인 요청

3. 이것 저것 해야할 것들

1. Chrome Extension 설치(Debugging)
2. Design Architecture에 대한 서치 및 질의
3. Docker Study(튜토리얼 위주로 하고, 개인 시간 활용)
4. React Study
5. Redux Toolkit + Redux Sage Study