2024 첫 회고

2025-01-06

스타트업회고

저는 SW마이스터고를 졸업하고 약 1년 5개월 프론트엔드 분야로 근무하고 있는 개발자입니다. 이러한 글은 처음이지만 글을 작성해보며 제가 했던 일들을 돌아보려고 합니다. 첫 블로그를 작성하여 이상하게 작성된 부분이 있을 수도 있다는 점 양해 부탁드립니다.

2024년도 되돌아보기

2023.07 ~ 2024.02 - 회사 홈페이지 및 백오피스 마이그레이션

이 시기는 제가 회사에 입사하면서 처음 참여한 프로젝트로, 기존 시스템의 문제를 해결하며 전반적인 최적화를 진행한 기간이었습니다. 기존 시스템은 중복된 코드가 많아 **컴포넌트 기반 아키텍처(Component-Based Architecture)**가 제대로 적용되지 않았고, 불필요한 meta 태그 사용으로 인해 **SEO(Search Engine Optimization)**도 제대로 동작하지 않는 상태였습니다.

  • Next.js 마이그레이션: 기존 시스템을 Next.js로 이전하면서 불필요한 Meta 태그를 제거하고, 중복된 코드를 컴포넌트, hooks, utils 파일로 분리하여 유지보수성과 가독성을 높였습니다.
  • API 상태 관리 개선: React Query를 도입해 API 상태를 체계적으로 관리하며 데이터 petching 및 caching 최적화를 수행했습니다.

이 프로젝트들을 통해 코드를 구조화하고 성능을 개선하는 방법을 익히며, 사용자 경험과 검색 엔진 최적화의 중요성을 체감했습니다.

아래는 개선시킨 홈페이지 LightHouse 결과입니다. (그 전에는 50~60점대 나왔던 것이 현재는 평균 90점대 이상을 보여주고 있습니다.)

다음에 작업할 때 웹의 접근성 점수를 올리는 것이 목표입니다.

2024.03 ~ 2024.05 - 안드로이드(Kotlin Native) 삼성헬스 SDK 연동

위 기간 저는 대표님께 앱 개발 제안을 받아 앱 개발 프로젝트에 참여하게 되었습니다. 주요 작업은 앱 내 원하는 타입의 권한을 동의받고, 데이터가 Read & Write 하여 정상적으로 주고받을 수 있는지 확인하는 것이었습니다.

  • 삼성헬스 SDK 연동: 삼성헬스 SDK 문서를 참고하며 데이터 흐름을 이해하고, 권한 요청 및 데이터 연동 기능을 구현했습니다.
  • 초기 도전 과제 극복: 처음 접한 Android Native 환경과 XML 레이아웃 코드는 낯설고 어려웠지만, 학습을 통해 SH(Samsung Health) 데이터를 성공적으로 처리했습니다.
  • 기술적 성장: 이 작업을 통해 Kotlin 언어의 기초를 익히고, Debug와 Release 모드의 차이점을 이해하며 빌드 과정에 대한 전반적인 지식을 쌓았습니다.

이 경험을 통해 새로운 기술에 대한 두려움을 극복할 수 있었으며, 기초적인 안드로이드 지식을 배워가는 계기가 되었습니다.

2024.06 ~ 2024.11 - 타사 Webview(React기반) 외주 개발

자사에서 타사 앱 개발 건을 수주하여, 타사의 요구사항을 정리하고 이를 구체화하며 React와 TypeScript를 기반으로 WebView 개발을 진행하였습니다.

  • App(Native), Webview 통신을 위한 bridge 정의: 그전까지는 이미 정의되어 있는 부분을 수정하는 것이 전부였습니다. 이 개발건을 통해 앱 개발자분과 어떤 데이터를 주고받을지, 건네줄지 등 앱과 Webview에 대한 프로토콜 정의를 진행했습니다.
  • 첫 React Webview: 자사 Webview는 Vue2로 개발되어 있지만, 이 프로젝트를 통해 React와 TypeScript를 도입하여 다른 기술 스택으로 작업을 진행하였습니다.
    • global.d.ts에 bridge 부분을 declare 해주어 TypeScript의 강력한 타입 안전성을 활용했습니다.
    • enum을 이용하여 bridge의 key 값을 관리하여 코드의 가독성과 유지보수성을 높여주었습니다.

Example Protocol

1// src/platform/android/protocol.types.ts
2export enum RequestProtocol {
3  FCM_TOKEN = "FCM_TOKEN",
4  TURN_ON_PUSH = "TURN_ON_PUSH",
5  KAKAO_LOGIN = "KAKAO_LOGIN",
6  KAKAO_LOGOUT = "KAKAO_LOGOUT",,
7  QUIT_APP = "QUIT_APP",
8  // ...
9}
10

11export type RequestProtocolTypeKeys = keyof typeof RequestProtocol;

Using Protocol

1// src/platform/android/webview.ts
2const userAgent = navigator.userAgent.toLowerCase();
3

4export const Webview = {
5  async requestAction(type: RequestProtocolTypeKeys, data?: string) {
6    if (userAgent.indexOf("android") !== -1) {
7      window.service.requestAction(type, data);
8    }
9  },
10};

이번 프로젝트를 통해 WebView와 Native 앱 간의 통신 방식을 깊이 이해하게 되었으며, 웹 기술로 앱과 소통하는 방법을 체득했습니다. 또한, 새로운 기술 스택에 대한 적응력과 프로토콜 설계 경험을 통해 개발자로서 한층 더 성장할 수 있었습니다.

이번년도 목표

이번 2025년에는 기록하는 습관을 통해 스스로를 되돌아보고, 더 깊이 사고하는 개발자로 성장하고자 합니다.

긴 글 읽어주셔서 진심으로 감사드리며, 앞으로도 더 나은 개발자가 되기 위해 노력하겠습니다.

감사합니다. 😊

댓글