3월 회고

Tuesday. April 06, 2021

#Monthly #Review

⛳️ 3월 목표

목표

알고리즘
- 파이썬 알고리즘 인터뷰 책에서 14장 트리, 15장 힙, 21장 그리디 알고리즘, 22장 분할 정복, 23장 다이나믹 프로그래밍 문제 풀기
팀 프로젝트
- Antodo(Todo list 모바일 애플리케이션) 런칭
- It’s meee(Diary 모바일 애플리케이션) 기능 구현 완료 및 리팩토링
개인 프로젝트
- 트위터 클론 코딩 기능 추가 및 TypeScript로 바꾸기
그 외
- 이력서 작성
- 서류 준비

실천한 것

알고리즘

원래 코테 준비를 Python으로 하고 있었는데, JS로 해야 하는 상황이 생겼다. (프론트엔드 지원을 할 경우, JS로 봐야 했음.) 그래서 3월 초반에는 예전처럼 Python으로, 3월 중반부터는 JS로 알고리즘 문제를 풀었다.
- Python : 계획했던 것 다 하고, 코딩 테스트 봄
- JavaScript : 해시, 스택/큐, 정렬, 완전탐색, 깊이/너비 우선 탐색 문제 풀었음. 이후 코딩 테스트 봄
팀 프로젝트
- Antodo
  - 버전 1.0.0 릴리즈
  - 소소한 버그 해결 후, 버전 1.0.2 릴리즈
- It’s meee
  - 미팅에서 팀원들과 논의 후, 5차 ~ 6차안 진행
개인 프로젝트
- 트위터 클론 코딩
  - 새로운 기능 추가 후 배포
  - TypeScript로 변경 X
그 외
- 이력서 작성 후, 회사 지원 완료! (제발 좋은 결과 😹)

📌 배운 점

1. JavaScript ‘잘’ 사용하기

코딩 테스트를 위해 JavaScript로 알고리즘 문제를 풀어야 했다. 처음엔 당황스러웠는데, 계속 문제를 풀면서 몰랐던 내장 함수들을 알 수 있어서 도움이 많이 되었다. 내가 그 동안 JavaScript를 잘 모르고 사용한 것 같아서 앞으로 JavaScript의 문법 뿐만 아니라 언어적 특징들까지 깊게 공부 해야겠다는 생각을 했다.

2. 실제 사용자로부터 피드백 받기

Antodo를 런칭하고, 주변 지인들이 우리 앱을 많이 사용해줬다. 디자인이 예쁘다는 칭찬도 들었고(우리 팀 디자이너가 정말 그림을 잘 그린다..👍), 있으면 좋겠다 싶은 기능들을 추천 받기도 했다. 1~2주 정도 이렇게 피드백 받은 내용들을 취합해 팀원들과 미팅 때 우선순위를 정했다. 우리 앱의 정체성과 맞는지, 사용자가 크게 불편함을 느끼는지 그리고 개발하는 데에 얼만큼의 시간과 노력이 드는지를 고려해 우선순위가 높고 공수가 크지 않은 기능은 개선해 버전 1.0.2로 릴리즈를 했다.

내가 만든 서비스를 누군가 사용해주는 것만으로도 뿌듯하고 신났었는데, 그들의 피드백을 받아 더 편리한 서비스로 개선하는 선순환 구조를 경험할 수 있었다는 점에서 이번 팀 프로젝트로 정말 멋지고 값진 것을 배웠다는 생각이 들었다.

3. iOS의 폰트 이슈

Antodo 사용자로부터 피드백을 받은 사항 중 하나가 'Todo 작성 시, 글 중간에 글자를 삽입하면 자음과 모음이 깨진다'는 것이었다. 사용자들이 불편할 수 있는 이슈라고 여겨서 빠르게 해결에 도입했다.

우선, 해당 이슈를 겪은 사용자의 기종을 확인 했다. iPhone이었다. 나도 iPhone을 사용하고 있기 때문에 해당 현상을 재현할 수 있었다. 팀원들의 스마트폰 중 iOS 기기에서는 해당 이슈가 발생했고, android에서는 해당 이슈가 나타나지 않았다. 그래서 우리는 이 이슈가 iOS에서만 발생하는 것이라는 걸 알 수 있었다.

그 다음 이 현상이 보편적인 것인지 확인하기 위해 Google에 검색했다. 바로 해결 방법을 찾을 수는 없었으나, 실마리를 찾을 수 있었다. iOS에서 사용자화 폰트를 사용할 경우, 자음과 모음이 깨지는 현상이 발생한다는 것이다. 그럼 사용자화 폰트를 사용하는 모든 서비스에서 이런 이슈를 겪고 있어야 하는데, 카카오톡과 같은 서비스들에서는 이런 이슈가 없었다. (물론 개발 언어가 다르지만)

문제 상황을 좀 더 구체적으로 파악하기 위해 Antodo의 텍스트 필드의 옵션들을 확인 했다. 그리고 개발 환경과 폰트가 같은 It’s meee(현재 개발 중인 다른 프로젝트)에서 해당 이슈가 있는지도 확인 했다. Antodo의 텍스트 필드처럼 multiline 옵션이 없는 경우 똑같이 발생했으나, multiline이 있으면 발생하지 않는다는 것을 발견했다.

팀원과 위 내용들을 공유하고 논의해 Antodo 텍스트 입력 필드에 multiline 옵션을 줘, 해당 이슈를 해결했다. 이로 인해 iOS에서는 사용자화 폰트를 사용할 경우 한글이 깨지는 현상이 발생할 수 있다는 점과 multiline 옵션이 있으면 발생하지 않는다는 것을 알 수 있었다.

React Native가 native 언어에 비해 지원하는 기능이 적기 때문에 native 언어에서는 이와 같은 이슈를 다른 방식으로 해결할 수도 있다. 나중에 기회가 되면 native 언어도 공부 해보고 싶다.

4. React 최적화

It’s meee 리팩토링을 하면서 useCallback과 memo를 사용해 최적화 하는 방법을 배웠다.

(1) useCallBack
우선 사용되는 함수들을 모두 useCallback으로 묶어줬다. 컴포넌트가 렌더링 될 때마다 함수를 새로 생성하게 되면 과부화를 야기할 수 있다. 그래서 지정한 값이 바뀔 때만 함수를 새로 생성하고, 그렇지 않으면 기존에 만든 함수를 사용하도록 useCallback을 사용해줬다. 즉, 지정한 값([ ] 안에 들어가는 값)에 아무 변수 또는 함수가 없으면 렌더링 될 때 한 번만 함수를 생성한다.
함수에서 사용되는 변수들을 [ ] 안에 넣어서 해당 변수들의 값이 변경될 때만 함수를 다시 생성하고, 값이 없을 경우 렌더링 이후로 다시는 함수는 재 생성하지 않는다. 그렇기 때문에 [ ] 안에 변수를 잘 넣어줘야 한다.
사용되는 모든 변수를 넣어준다고 생각하면 되는데, 이런 경우에는 넣어주지 않아도 된다. (1) 함수에서 사용하는 변수들 중 파라미터로 받는 값이거나, (2) 상태값이나 props처럼 렌더링에 관여하는 값이 아닐 경우이다.

(2) memo
상위 컴포넌트가 변경됐을 때 하위 컴포넌트가 이유 없이(그니까 props가 변경되지 않았는데도) 함께 리렌더링 되는 경우도 과부화를 야기할 수 있다. 이때, memo로 하위 컴포넌트를 묶어주면 상위 컴포넌트가 변경되더라도 props가 변경되지 않으면 리렌더링 되지 않는다. 모든 하위 컴포넌트에 사용하기 보다는 Flatlist나 map() 함수를 사용해 렌더링 하는 경우처럼 하위 컴포넌트에 많은 양의 데이터가 있을 때 사용한다.

5. ‘나’의 트위터 클론 코딩

강의를 보고 따라하기만 했을 땐 남의 것이었지만, 직접 기능을 구상하고 구현하면서 완벽하게 이해하고 내것이 된 느낌을 받았다.

특히, 좋아요 기능을 내가 생각한 대로 만들기 위해서 DB 구조와 데이터를 React에서 어떻게 받아와서 사용할 건지 구상하고, 생각한대로 구현해냈을 때!
진짜 성취감 오졌었다…… 캬🤟

나중에 생각하면 별 거 아닌 소소한 기능일 수 있겠지만, 한 번도 해보지 않았던 거라 구현하고 엄청 뿌듯했다.

💡 4월에는!

1. JavaScript를 더 깊게 알아보자

이번에 알고리즘 문제를 JavaScript로 풀면서 JavaScript에 대해 모르는 점이 많구나 싶었다. 기초를 탄탄히 해야 그 위에 뭘 쌓아도 무너지지 않을 거라는 생각이 들어서 JavaScript의 언어적 특성과 ES6 문법을 공부 해야겠다.

2. CS 공부! (백투더 학부생)

개발자로서 탄탄하게 성장하기 위해 CS(Computer Science) 지식은 필수인 거 같다. 프로젝트가 막바지라 여유가 생겼으니, 기초를 다지는 것에 힘을 쏟아야겠다.

3. 프론트엔드 기술에 대해 알아보자

나는 지금 React로 웹과 앱 서비스를 한 번씩 만들어봤다. babel, webpack과 같은 관련 기술들은 잘 모르니 공부 해야겠다고 생각했다. 직접 사용해보면 좋지만, 만약 그렇지 못한다 해도 개념을 알고 있으면 나중에 적용할 수 있을 거다.

4. 팀 프로젝트

4월 안에는 It’s meee를 꼭 런칭할 거다. 이제 기능 구현은 끝났고, 디자인 최종 확인 후 TestFlight를 사용해 실제 기기 테스트를 할 예정이다.

Joie-Kim

배운 것을 기록하는 습관! ✍️