> 프로젝트 소개 개인적인 토이 프로젝트입니다. 프로젝트 섹션에서 설명이 어려워 경력 부분에 첨부하였습니다. 어려운 이웃의 생필품 걱정을 덜기 위해 장바구니를 지원해줄 수 있는 봉사자와 이웃을 연결해주는 커뮤니티 > 관련페이지 - Repo : https://github.com/seonjakim/OneBasket/tree/dev - Page : https://onebasket.kro.kr/ - 이슈트래킹 : https://trello.com/b/rn6i7mHz/onebasket - Wiki : https://github.com/seonjakim/OneBasket/wiki > 주요 업무 - 서비스 기획, MVP를 정의하여 UI 참고자료 조사와 구현 - 클라이언트, 서버 개발과 배포 >사용 기술 프레임워크 : React.js, Nest.js 상태관리 라이브러리: Redux, Redux-thunk UI 라이브러리 : Gestalt 서버 : AWS EC2 (Ubuntu) 서버 어플리케이션 : Nginx 데이터베이스 : MongoDB > 회고 / 리뷰 협업하는 직군의 업무에 대한 이해도를 높일 수 있었던 프로젝트 개발자는 협업이 중요하고 상대의 업무를 이해하고 있는 정도에 따라 소통할 수 있는 수준이 달라진다고 생각합니다. 아직은 작은 서비스지만 이 서비스를 개발하며 기획, 배포와 서버 개발까지 스스로 경험해보며 스프린트 기준으로 구현 기능을 기획하고 개발하는 방식에 대해 조금이나마 이해할 수 있었습니다. Wiki에 유저 시나리오와 시퀀스 다이어그램을 작성하며 실전 프로젝트처럼 개발하기 위해 노력하고 있습니다. 해당 프로젝트는 식료품 공유 방식을 장기와 단기로 나눠 지속적으로 발전시키고 있습니다.

더보기

> 주요 업무 - 사용자 데이터 분석도구인 Mixpanel 적용 (사내 사용자 데이터 분석 툴 통합 라이브러리 업데이트) - 프로젝트 기능 추가 시에 발견한 코드 오류를 적극적으로 리팩토링 - pdf 변환 라이브러리 변동으로 4개월동안 존재했던 pdf 사이즈 축소 문제 3일만에 해결 - 프로젝트의 LCP 속도 개선과 SEO 최적화 (Chrome lighthouse 기준) - BDD 경험 (Gherkin syntax를 이용한 기획 소통과 Cypress와 Cucumber를 이용한 E2E 테스트 경험) - 서비스 개발 프로세스를 익히고 다양한 예외 사항들을 경험하기 위해 QA 업무를 진행하면서 개발 과정에서 가능성 있는 예외 사항들을 사전에 발견해 대응할 수 있는 능력을 향상 > 사용 기술 - 프레임워크 : Next.js - 통신 : GraphQL - 언어 : TypeScript - 라이브러리 : Material-UI - 데이터 분석 도구 : Mixpanel > 회고 / 리뷰 정기적으로 기능 개발하시는 프론트엔드 개발자 한 명이 계시고, 코드 개선과 오류 해결을 위해 비정기적으로 투입되는 한두 명의 프론 트엔드 개발자 중 한 명으로 태니지먼트 프로젝트에 참여하게 되었습니다. 첫 업무는 4개월 동안 방치되어 있던 pdf 사이즈 축소 문제였습니다. 모두 프론트엔드 단의 버그로 바라보고 있었지만, 저는 백엔드 코 드에서 pdf 변환 라이브러리를 전환하면서 생긴 문제라는 점에 주목했습니다. 문제의 근본이 단순 사이즈 차이이지, 추가적인 배열구성 변경과 같은 오류는 없다는 것을 재차 확인한 후, 현재 사용하고 있는 pdf 변환 라이브러리에 관해 대략적인 조사를 한 결과 scale 조정 이 가능하다는 것을 알게 되었고 백엔드 코드에 scale을 적용하여 간단하게 버그를 해결할 수 있었습니다. 다음 업무는 데이터 로깅을 위한 mixpanel 적용이었고, 데이터 로깅 업무 중에 발견한 태니지먼트 프로젝트의 코드 오류를 다른 프론트 엔드 개발자들과 소통한 후, 리팩토링한 경험이 있습니다. 근무 시간 이외에는 LCP를 공부하고 직접 개선해보고 싶은 욕심에 프로젝트 의 퍼포먼스를 확인하고 개선할 수 있는 부분을 찾아 LCP와 SEO를 개선한 경험이 있습니다. 관련된 자세한 내용은 주요 업무에 연결 된 링크를 통해 블로그 글에서 확인해보실 수 있습니다. (https://velog.io/@seonja)

더보기

> 주요업무 - Material-UI를 이용해 구현된 공용 컴포넌트의 잘못된 type 설정으로 인한 에러 해결 - 각 페이지에서 공용 컴포넌트의 이벤트를 다르게 설정하여 생긴 type과 build 에러 해결 - 프로젝트 내 상품 리스트를 보여주는 테이블 리스트 공통 Component 개발과 문서화, 장바구니와 관련된 공통 함수 개발 - QA가 기능개발과 동시에 진행되지 않던 절차에 따라 git flow 브랜치 전략에서 github flow 브랜치 전략으로 변경 - 백엔드 파트와의 소통을 통한 기능 개발 범위와 일정 산정 절차를 명확히하고 효율적인 협업과 커뮤니케이션을 위해 팀 내외 업무 요청 프로세스를 정립 및 협업을 위해 노력 - 효율적인 코드 리뷰를 위한 commit 단위에 대해 지속해서 대화하고 피드백을 주고받으며 프로세스 정립을 위해 노력 > 사용 기술 - 프레임워크 : Next.js - 언어 : TypeScript - 상태관리 : React-query(server state), Context API > 회고 / 리뷰 Harmony는 네이버의 스마트팜과 비슷한 형태의 이커머스 플랫폼으로 기업이 사용하는 관리자 페이지와 고객이 사용하는 페이지가 나 뉘어있었습니다. 프론트엔드 개발을 총괄하시는 리드 개발자 한 명과 관리자 페이지를 구현하는 인턴 한 명, 고객 페이지를 구현하는 프 론트엔드 개발자 두 명, 이렇게 총 4명에서 협업했습니다. 저는 한 달가량 고객 페이지를 구현하다가 관리자 페이지에 200개가 넘는 type과 관련된 build 에러가 발생하면서 관리자 페이지로 투입되었습니다. 관리자 페이지에서 발생한 type과 build 에러가 공용 컴포넌트의 type을 본인이 개발하는 컴포넌트에 맞춰 바꿔가면서 설정하여 발생 한 문제라는 것을 발견하고, 공용 컴포넌트의 type을 Material-UI와 React Event에서 자체적으로 정의한 타입으로 설정하여 특정 컴 포넌트에 종속성을 가지지 않도록 리팩토링했습니다. 이 경험을 통해 발생한 오류를 돌려막는 것이 아니라 오류의 원인을 파악하고 함수 에서 불필요한 부분을 분리 또는 삭제하여 비교적 간단하게 버그를 해결한다는 장점을 발견할 수 있었습니다. 관리자 페이지 구현 시, 디자인 시스템이 제대로 정립되지 않은 UI 디자인에서 공통성을 찾아내고, 크기가 일정하지 않은 table이나 padding 등에 관해 디자이너와 적극적으로 상의하여 일정한 룰을 가질 수 있도록 노력했습니다.

더보기

> 프로젝트 소개 Material-UI를 커스텀하여 Google의 Material-design 사이트를 본따 사내 디자인 시스템 페이지 구축하고, 번역회사 중개 플랫폼 내 일관성없이 흩어져 있는 CSS코드를 JS파일 내로 모두 통일화, 불필요한 코드 삭제 > 주요 업무 - Material-UI를 커스텀하여 새로운 프로젝트에서 쉽게 재사용할 수 있도록 컴포넌트화 - 정적인 페이지를 이용해 UX 디자이너와 실제 결과물을 확인하며 UX 디자이너의 요구사항을 파악하고 조율 - 인수인계없이 프로젝트를 빠르게 파악하여 분산되어 있는 SCSS파일과 JS파일 내에서 작성된 CSS 코드들을 모두 JS파일 내로 통일화 (기존 기획의 절반 기간 내에 코드 유지와 보수 완료) > 사용 기술 프레임워크 : React.js 라이브러리 : Material-UI > 회고 / 리뷰 코드를 유지, 보수했던 번역회사 중개 플랫폼은 사업 초반에 구매하신 템플릿에 다년간 여러 개발자들의 코드가 더해져있던 상황이었습니다. 프로젝트의 전체적인 구조를 파악하고 계시는 분이 없어 개발자셨던 대표님께서는 혼자서는 한 달 내에 스타일 코드 통일화가 어려울 것이라고 판단하셨습니다. 프로젝트가 Meteor이라는 프레임워크 내부에 React로 구현되어 있어 우선은 구조를 파악하는 것이 중요하다고 생각했습니다. 정리가 필요한 폴더 내 코드들을 조금씩 삭제하며 파일의 의존성을 파악했고, 삭제한 SCSS 파일도 글로벌 스타일인지 페이지에 종속된 스타일인지 구분하여 효율적으로 작성하기위해 노력했습니다. 삭제가 필요한 폴더와 파일이 가지고 있는 종속성을 파악하고, 스타일 종류를 구별하여 시간과 노력을 효율적으로 사용할 수 있었습니다.

더보기

- 어드민 사이트의 Q&A 리스트와 세부 페이지 구현 - Axios, Async, Await을 이용한 직관적인 코드작성 - Slack과 Postman을 이용하여 백엔드 개발자와 remotely 협업

더보기

- HTML, CSS, JS 수학 - 두 번의 프로젝트를 통해 React.js 실무 환경과 같이 적용, 백엔드와 협업

- 비즈니스 레벨의 전문 서비스 제공 - 제한된 공간에서 위기 관리 능력 배양 - 고객의 니즈를 빠르게 파악 - Soft skills 향상

더보기

- 상해지사에서 근무 - 홈쇼핑 방송 준비와 보고 - 전시회에서 전시와 판매

더보기