간단한 소감글

삼성 강남역에 파견을 가서 개발을 했던 시절이 있었다. 보안이 워낙 철저해서 라이브러리 하나도 추가하려면 정식 심사를 거쳐야 했고, 요즘처럼 GPT는커녕 외부 인터넷조차 차단되어 있어서 구글링도 불가능했던 환경이었다. 그때는 정말 ‘어떻게 개발을 했을까?’ 싶지만, 해내고 나면 그 만큼 발전도 컸던 것 같다. 파견이긴 했지만 근무 환경은 정말 좋았고, 시설도 훌륭했으며 밥도 맛있었다. 요즘 SI를 두려워하는 신입 개발자들이 많다고 들었다. 아무래도 무시무시한 일정과 부당한 대우를 받는 이미지가 만들어져서 그런 것 같다. 하지만 때로는 그런 각박한 환경에서 더 빠르게 성장할 수 있다고 생각한다. 망설이고 있다면, 한 번쯤은 용기 내서 도전해보는 것도 좋지 않을까?

삼성액티브자산운용

삼성액티브 자산운용을 개발하면서 대용량 데이터를 다룰 수 있었습니다. 펀드나 ETF 상품을 그래프로 표현하는 일은 흔하게 접할 수 없었던 일이니까요. 프론트엔드 4명 중 한 명이라 모든 걸 컨트롤하진 않았지만, 운영까지 담당했기에 프로젝트의 많은 부분을 담당했습니다.

삼성액티브자산운용

삼성액티브자산운용 공식홈페이지입니다.

https://www.samsungactive.co.kr/

✅ 담당 업무 리스트

회사소개 페이지

1.카드형, 조직도 팝업 퍼블 및 api 연동

2.삼성액티브자산운용 해당 팀 내 펀드, KoAct 상품 api 연동

인사이트 미디어룸

1. zustand 전역 상태관리 툴로 미디어룸 api 전체 관리

2. shorts, youtube, blog, facebook 하이라이트 api 연동

3. 검색 기능 api 연동

4. 리스트 및 상세 페이지 연동

기타

1. i18n 활용 가이드 잡기

2. 젠킨스 CI/CD 구축 환경에서 검증계, 운영계 배포 담당

TOOLS

리액트, JSP, zustand, SCSS, gsap, framer-motion, Recharts, i18n

✅ 문재해결 및 경험

삼성액티브자산운용은 삼성에서 상주하면서 개발을 한 프로젝트입니다. 삼성홈페이지를 개발할때 사내 내부망 안에서 개발을 해야하다보니 퍼블리싱을 할때 이미지 소스를 피그마로 볼 수 없다거나 조그만한 화면으로 개발을 해야해서 굉장히 힘들었습니다.

또한 라이브러리를 추가하려고 하면 절차가 힘들다 보니 제한적인 상황에서 개발을 해야 했습니다. 프로젝트는 Context API로 전역 관리하고 있었고 전역 값 때문에 코드가 굉장히 방대해지는 느낌을 받았습니다. Context API의 경우 전역 값을 만들어줄 뿐 전역 상태 관리를 해주지는 않습니다. 그래서 전역 상태 관리 라이브러리가 필요했습니다.

redux나 recoil을 쓰고 싶었지만 위에서 말씀드린 것처럼 라이브러리에 대한 보안 검수를 요청하면 통과될 때까지 개발에 딜레이가 생갑니다. 그래서 어떻게 할지 고민을 하였습니다.

그런데 프로젝트 내 전역 상태 관리 툴인 zustand 라이브러리가 있었습니다. 기존에 3D 개발자 분들께서 먼저 개발을 진행할 때 툴을 설치해 놨었던 것입니다. zustand는 원리가 redux와 유사했고 다른 라이브러리들을 통과시켜서 개발하는 것보다 zustand를 학습을 하여 개발을 진행하는 것이 더 빠르다고 생각하였습니다. 그래서 zustand로 전역 상태 관리를 시작하여 미디어룸 페이지에 api들을 효과적으로 관리하였습니다.

아래는 zustand로 카테고리와 검색기능을 담당하는 api를 호출하기 위해 구현 했던 코드 일부 입니다.

import { create } from 'zustand'

const useMediaStore = create((set) => ({
  mediaList: { media: [], totalcont: 20 }
  pageNo: 1,
  searchText: '',
  fetchMedia: async (pageNo, searchText) => {
    const response = await axios.get(`/api/v1/media?no=${pageNo}&searchText=${searchText}`);
    set((state) => ({
      mediaList: {
        ...state.mediaList,
        media: [...state.mediaList.media, ...response.data.media]
      },
      pageNo,
    }));
  },
  setPage: (pageNo) => {
    set({ pageNo });
  },
}));