홍승아 포트폴리오

Menu

Close Button
mobile icongithub iconnotion iconlinkedin icon

와디즈

FE 개발 프로세스

2021.07 ~ 2024.08

  • FE 개발 프로세스 이미지
  • 기획/디자인/백엔드/타부서와 개발을 진행하면서 FE만의 개발 프로세스를 확립하기 위해서 꾸준히 정리 후 팀에 공유하고 있으며, 일부는 도입되어서 개발 업무 진행 시 어려움점을 해결 할 수 있었습니다.
  • 타부서와의 병렬로 업무를 진행하기 위해서 스토리북, API 인터페이스 공유, MSW 도입등의 여러가지 기술들을 도입을 하였고, 도입 이후에 개발속도, 효율성을 높일 수 있었습니다.
  • 개발완료 이후에도 성능개선, 웹접근성 개선등의 후속작업을 진행하면서 와디즈 서비스의 품질/안정성 등을 높일 수 있었습니다.
  1. RoleFront-End Developer
  2. URLFE 개발 프로세스 URL
  3. FrontendReact, Scss, Redux, React-query, Storybook, Jest, MSW, Playwright, Typescript

MSW(모킹 서비스) 도입/데이터 추가

2021.11 ~ 2024.08

  • MSW 도입 이미지 2
  • MSW 도입 이미지 1
  • MSW 도입 이미지 2
  • MSW 도입 이미지 1
2 / 2
  • BE/FE 개발을 병렬로 진행 시 기존에는 BE API가 완료되기 전까지는 FE에서는 서버 데이터 연동을 못했었고, 또한 테스트를 위해서 샘플 데이터를 추가해서 테스트 하다보니 FE 개발에 어려움이 발생하였습니다.
  • FE 개발에 어려움을 극복하고자, 개발 단계에서 API 인터페이스를 미리 공유받아서 FE만의 모킹 서버를 구축하기 위해서 MSW를 도입을 하게되었습니다.
  • MSW 모킹 데이터를 만들어서 서버모킹, 스토리북, Jest(유닛테스트), Playwright에서도 공통으로 사용함으로써 개발의 효율성을 높일 수 있었습니다.
  1. RoleFront-End Developer
  2. URLMSW(모킹 라이브러리) 도입
  3. FrontendReact, Storybook, Jest, Playwright, MSW

E2E 테스트

2022.08 ~ 2024.08

  • playwright 이미지 1
  • 도입배경: 서비스가 확장됨에 따라서 라이브 이슈가 증가하게 되었고, 이슈에 대한 빠른 파악 및 대응을 위해서 playwright 테스트를 도입하게 되었습니다.
  • 서비스 기획서에 정의된 동작을 바탕으로 e2e 테스트 코드를 작성하고 있으면, 혹여 기획서 변경 시 e2e 테스트 코드도 같이 수정해서 동기화를 진행하고 있습니다.
  • 실제 환경과 동일한 테스트 동선을 제공하기 위해서 Mock 데이터 사용을 지양하고 있으며, 테스트 수행 후 오류 발생 시 빠르게 이슈를 파악(슬랙연동)해서 수정 작업을 진행하고 있습니다.
  1. RoleFront-End Developer
  2. URLPlaywright URL
  3. FrontendReact, Scss, Typescript, Playwright

펀딩 상품옵션 개선

2022.07 ~ 2022.10

  • 와디즈 펀딩 상품옵션 개선 두번째 이미지
  • 와디즈 펀딩 상품옵션 개선 첫번째 이미지
  • 와디즈 펀딩 상품옵션 개선 두번째 이미지
  • 와디즈 펀딩 상품옵션 개선 첫번째 이미지
2 / 2
  • 기존 펀딩 1depth 서브옵션을 3depth 서브옵션이 가능하도록 기능개발
  • 기존에 지원하던 옵션없는 상품, 직접입력 등의 레거시 기능/디자인 개편작업 진행(리액트, 디자인시스템으로 개편)
  1. RoleFront-End Developer
  2. URL펀딩 상품옵션 URL
  3. FrontendReact, Scss, React-query, Storybook, Jest, Playwright, MSW

서포터클럽

2022.02 ~ 2022.05

  • 와디즈 서포터클럽 이벤트페이지 이미지
  • 와디즈 서포터클럽 첫번째 이미지
  • 와디즈 서포터클럽 두번째 이미지
  • 와디즈 서포터클럽 세번째 이미지
  • 와디즈 서포터클럽 이벤트페이지 이미지
  • 와디즈 서포터클럽 첫번째 이미지
4 / 4
  • 와디즈 서비스 안에서 다양한 멤버십 콘텐츠, 혜택을 제공하는 서포터클럽 UI 기능개발
  • 펀딩/스토어 결제, 서포터클럽 가입프로세스, 서포터클럽 이벤트 페이지 개발
  1. RoleFront-End Developer
  2. URL서포터클럽 링크
  3. FrontendReact, Scss, React-query, React-hook-form, Storybook, Jest, MSW

스토어 상세페이지

2021.05 ~ 2021.08

  • 와디즈 스토어 상세페이지 세번째 이미지
  • 와디즈 스토어 상세페이지 첫번째 이미지
  • 와디즈 스토어 상세페이지 두번째 이미지
  • 와디즈 스토어 상세페이지 세번째 이미지
  • 와디즈 스토어 상세페이지 첫번째 이미지
3 / 3
  • 와디즈 스토어 상세페이지 메인 UI, 탭(스토리, 만족도평가, 반품/교환) 기능개발
  • 상품 구매 프로세스 기능개발(상품 옵션 선택, 재고수량 관리 등)
  1. RoleFront-End Developer
  2. URL스토어 상세페이지 링크
  3. FrontendReact, Scss, Redux, Redux Toolkit, React-query, Storybook, Jest, MSW

펀딩/스토어/스튜디오 운영업무

2020.12 ~ 2024.08

  • 와디즈 스토어 상세페이지 이미지
  • 와디즈 펀딩 메이커 스튜디오 이미지
  • 와디즈 펀딩 상세페이지 이미지
  • 와디즈 스토어 상세페이지 이미지
  • 와디즈 펀딩 메이커 스튜디오 이미지
3 / 3
  • 펀딩 프로젝트 개설에 필요한 메이커스튜디오 기능/UI 개발
  • 펀딩/스토어 도메인 운영 업무 대응
  1. RoleFront-End Developer
  2. Studio URL메이커 스튜디오 링크
  3. FrontendReact, Scss, React-query, Redux(Redux Toolkit), React-hook-form, Storybook, Jest, Playwright, MSW, Typescript