회사 생활 - 1

입사하고 1주일이 지났다. 내가 현재 다니는 기업은 6인 규모의 스타트업이며, 현재 풀스택 개발자인 CTO 팀장님 1분과 디자이너 1분, 그리고 프론트엔드 개발자인 나를 포함하여 3명이서 홈페이지를 제작하고 있다. 첫 날은 회사에서 준 MacBook을 사용하기 편하게 셋팅한 후 간단하게 코드를 들여다 보았다. 그 다음 날부터는 admin 페이지를 개발하기 시작했다. 다음과 같은 일을 하였다.

내가 한 일

• Atomic Design 설계

  • Atomic Design Pattern
    • atoms : 가장 작은 단위, 재사용성
    • molecules : atome을 합친 것, 재사용성
    • organisms : molecules와 비슷하거나 더 큰 컴포넌트, 특정한 컴포넌트에서만 사용하면 단위가 작더라도 이 폴더에 넣어야 함
    • templates : pages 단계 전에 Layout
    • pages : 유저에게 보이는 최종 화면
  • 팀장님께 피드백을 받아 구현
    • atoms에 단위가 작지만 특정 컴포넌트에서만 사용한 것을 organisms로 옮김
    • navBar, searchBar의 상태값에 따라 dataList가 바뀌므로 두 개의 컴포넌트를 filter 컴포넌트로 재구성
    • SaleCodeTop, Body, Bottom으로 3개의 organisms로 나누었지만 이름에 맞지 않게 기능하는 곳들이 있어 재구성

• useContext 사용해보기

  • useContext
    • props drilling을 방지하기 위해 사용
    • useState로 props를 넘겨주면 프로젝트가 커졌을 때 로직이 복잡해 질 수 있으므로 사용
      • 사용법
        • createContext로 context를 만들고 useContext 함수를 만들어 useContext를 return 한다.
        • 사용할 컴포넌트를 Context.Provider로 감싸준다. 이 때, context의 value를 설정한다.
        • 사용할 컴포넌트에서 useContext 함수를 불러 사용한다.

• 할인 코드 목록

  • 3/5
    • status, query에 따른 data filter 기능 구현
    • 새로고침 했을 때 화면 유지를 위해 dynamic router로 페이지에 따라 filter
      • 문제점 : router.query.params로 설정시 state의 업데이트 기능이 page가 이동할 때보다 느림
      • 해결 : List 컴포넌트에서 status, query 값이 변경되면 업데이트 되도록 설정
    • 3/6
      • dynamic router → query string 변경
        • 문제점 1 : query string 으로 사용시 status, query 값이 같으면 겹치는 현상
        • 해결 1 : status, query 두 개의 string 값을 보냄
        • 문제점 2 : query string가 변경되면 status가 기본값으로 초기화 됨
        • 해결 2 : status 값을 query string가 아닌 useContext의 status를 보내주는 실수 → query string로 바꿈

• 테이블 라이브러리 리서치 및 변경 (1,2,3,4 …과 같이 페이지네이션이 가능하도록 변경)

  • 사용 라이브러리 및 참고 라이브러리
    • https://www.material-react-table.com/ (O - 원하는 UI, 대중적)
    • https://react-table-library.com/?path=/docs/compact-table--pagination (X - 다운로드 수 적음)
    • https://tanstack.com/ (X - 원하는 UI가 아님)
  • material react table 라이브러리
    • 공식 문서보고 기능 구현
    • style, pagination 기능, toolbar 제거 등은 custom 해야 함
    • 참고
      • 기본 사용법
      • style
      • pagination

• 코드 생성 모달

  • 3/6
    • Atomic Design Pattern 으로 진행 중
      • 처음부터 컴포넌트를 나눠서 하니 시간이 오래 걸려 일단 큰 코드부터 짤 예정
  • 3/7
    • 전체 구조 및 CSS 완성

• 피드백

  • Context 정리하기 (loading, list, visibleModal은 state, status/query 묶어서 사용)
  • Modal은 이미 SaleCodeTemplets 안에 들어가 있으므로 따로 Templets 가 필요 없음
  • underLine 제거, div의 border-bottom으로 수정하기 / 버튼 %로 → px 수정 (반응형 화면 구현시 %는 좋지 않음)

후기

인턴을 했을 때도 스타트업이라서 바로 일에 투입하게 되었다. 주변 사람들의 얘기를 들어보면 교육기간이 있는 곳도 있고, 나처럼 없는 곳도 많은 것 같다. 교육기간에 공부를 해서 다시 복습하는 것도 좋지만 이렇게 바로 프로젝트에 투입하는 것도 좋은 교육이라고 생각한다. 이 회사에 적응하려면 시간이 걸리겠지만 빠르게 적응할 수 있도록 최선을 다하겠다!!🔥