우테코 마지막 주차 기록

면접 | 그리고 마지막

프론트엔드 공부

(면접 주간 Pass)

공부하기

(면접 주간 Pass)

기타

JavaScript의 비동기와 async-await 다시 공부하기

Ref https://medium.com/sjk5766/async-await-원리-cc643f18526d https://velog.io/@jjunyjjuny/번역-자바스크립트-시각화-비동기-처리

TypeScript와 Redux Saga 함께 사용하기

어느 회사의 과제전형을 수행하면서 오랜만에 Redux Saga를 쓰게 되었다. 네트워크 응답 상태를 REQUEST, SUCCESS, FAILURE 3가지로 구분해서 만들어주는 모듈을 작성하여 action과 reducer를 깔끔하게 작성해보자!

Ref https://vallista.kr/2020/07/20/TypeScript에서-Redux-Redux-Saga-아름답게-개발하기

msw로 테스트 데이터 mocking하기

카카오 팀에서 MSW(Mock Service Worker)를 사용하여 프론트엔드 개발을 한다는 이야기.

기획자 : XX 작업은 어떻게 진행 중인가요? 프론트엔드 개발자 : 그게… 아직 API가 준비되지 않아서 다음 주까지는 기다려야 합니다.

😂😂😂

그래서 나온 결론이?

“API가 개발되기 전에 프론트엔드 개발을 마치자.”

😮😮😮

테스트 환경 뿐 아니라, API 문서가 나오지 않았을 때도 msw를 사용해서 실제로 개발을 할 수도 있다! 이밖에도 Service Worker를 사용하는 경우들은 다음과 같다.

• 네트워크가 원활할 때 동기화를 시켜주는 백그라운드 동기화 기능
• 높은 비용의 계산을 처리할 때
• 푸시 이벤트를 생성할 때
• 🤩 네트워크 요청을 가로채는 행위도 수행

MSW는 Service Worker를 기반으로 모의 API를 만들어내기 때문에 다른 프론트엔드에서 사용하는 수많은 라이브러리나 프레임워크에 종속적이지 않고 호환성에 문제없이 동작한다

MSW의 동작 원리는 아래와 같다.

네트워크의 요청을 가로챌 뿐만 아니라, 응답 시간과 응답 상태, 응답 결과까지 제어가 가능하다. 특정 상황에서 에러를 일으킬 수도 있다. 각기 다른 네트워크 응답 상태에 따른 화면의 변경사항을 좀더 쉽게 개발하고 쉽게 디버깅할 수도 있는 것이다.

MSW를 잘 활용해서 프론트엔드 개발의 생산성을 높여보자!

Ref https://tech.kakao.com/2021/09/29/mocking-fe/

FxJS 타입스크립트 버전, FxTS

RxJS의 Rx는 Reactive extensions의 줄임말로, 상태관리에 반응형 프로그래밍을 사용하는 라이브러리라고 알고 있었다.

FxJS는 처음 들어봤다. 공식 홈페이지에 ‘functional library’라고 표현한 것을 보아 함수형 프로그래밍에 유용한 기능들을 제공하는 것 같다. 그리고 최근 TypeScript 버전으로 출시된 것이 FxTS! 발음도 어렵고 서치도 힘들다 😵

아래와 같은 코드들을 제공한다고 한다. 얼핏보면 (pipe의 메서드명 탓인가?) RxJS같기도 하다.

import { pipe, range, map, filter, take, each } from "@fxts/core";

pipe(
  range(10),
  map((a) => a + 10),
  filter((a) => a % 2 === 0),
  take(2),
  each((a) => console.log(a))
);

Ref https://fxts.dev/ https://github.com/marpple/FxTS

네이버 지식iN을 Flutter로 개발하는 이유

네이버 지식iN 앱 개발에는 Flutter를 사용한다고 한다. 처음에는 iOS, Android 각각 따로 개발하였으나 당연히 플랫폼의 특성과 개발 인력의 차이 때문에 개발 단계에서 여러 문제에 마주하게 된다.

크로스 플랫폼 개발을 위해 Flutter를 도입하게 되었고, 그 배경이 정말 개발자스럽다(!)

크로스 플랫폼에 대한 구성원들의 평소 의견은 성능 및 러닝 커브에 문제가 있을 것이라고 했다. 그래서 여러 크로스 플랫폼으로 1차 테스트에서 간단한 프로토타입 개발 진행을 했고, 각 플랫폼 비교 시 Flutter가 가장 좋은 평가를 받았다. 성능상의 큰 차이도 없었다.

2차 테스트에서는 조금 더 난이도가 있는 과제를 진행했고, 기존 네이티브 방식으로 개발할 때보다 훨씬 수월함을 느꼈다.

그렇게 Flutter를 실제 개발에 적용하려고 했으나! 사내 라이브러리가 문제였다. 그래서 iOS와 Andriod 각 플랫폼에 라이브러리를 추가한 후 MethodChannel을 통해 Flutter에서 사용할 수 있도록 구현했다.

물론 큰 회사라서 가능한 일이겠지만, 1, 2차 프로토타입을 거쳐가며 개발자들의 의견을 모으고 라이브러리의 분리라는 또 다른 시도를 통해 기존의 레거시 코드에 과감하게 도전하고 앞으로의 생산성을 향상시켜 나가는 과정이 흥미로웠다.

Ref https://d2.naver.com/helloworld/3384599

Google Developer Profile

Ref https://developers.google.com/profile/u/me

고민

여러 회사의 연락을 기다리고 있는, 붕 떠버린 이 기간 동안 뭘 해야 할지 모르겠다. 알고리즘 공부, 타입스크립트 공부, 그리고 만들어보고 싶었던 electron 앱 개발도 한번 해볼까? 아이패드 새로 사서 듣고 싶었던 일러스트 강의도 들어보고… 미뤄왔던 CS 공부도 지금 하면 좋을 텐데, 그건 감조차 잡히지 않는다.

아무튼 할 건 많구나 재밌는 인생이야

마무리

우테코 10개월 교육과정이 41주차가 맞는진 의문이지만, 아무튼 거의 1년을 달려왔던 교육과정이 모두 끝났다. 2월 겨울의 끝자락에서 만나 11월 겨울의 초입에서 마무리지었다. 중고등학교 졸업식보다 더 싱숭생숭한 이유는, 아직 아무것도 결정된 게 없기 때문이겠지. 대학 졸업도 그랬으니까. 그래도 인생의 그 어떤 곳보다 고마운 사람들이 가득한 곳에서 행복한 1년이었다.

거리두기가 다시 강화되기 전에 오프라인으로 수료식을 진행해서 정말 다행이다. 오열한다 해놓고 생각보다 너무 재밌게 진행돼서 종일 웃고만 있다가, 슬픈 노래도 아닌 ‘잔소리’ 편곡에 눈물이 찔끔 나버렸다 😂 (또 눈물날 것 같다)

뒤풀이도 전원 참석 아래 코치님들과도 정신 놓고 놀았다. 이제 서로 닉네임이 아닌 본명으로 부르는 날이 오겠지? 캡틴 포비의 말씀처럼, 조만간 멋진 선후배 개발자로 다시 만날 수 있었으면 좋겠다. ☺️