미리보기

github | notion | Selly
2022.10.11 ~ 2022.11.21
참여 인원 6인

• NFT를 여러 사람이 나누어서 공동으로 소유하고 소유 지분을 재 판매 할 수 있는 프로젝트
  • NFT 민팅, 작품 분할, 조각 거래
  • 사용 기술 : React Redux Toolkit RTK Query TypeScript StoryBook
  • 협업 도구: Git Jira Figma
• 담당 역할
  • 프론트앤드 개발 환경 구축
  • metamask를 이용한 로그인 구현
  • 메인 페이지 Header, Category, SocialProof 구현
  • profile 페이지 구현
  • 최적화 작업(이미지 최적화, 코드 스플리팅, 트리 쉐이킹)
• 배운 점
  • 보일러 플레이팅(CRA) 없이 직접 webpack을 활용하여 개발 환경을 구축해 보면서 번들링의 과정과 React 렌더링 과정에 대하여 이해 할 수 있게 되었다. 또한 설정 과정에서 파일의 경로 설정, webpack rules의 중복 적용, 버전이 맞지 않거나 잘못된 모듈을 사용하는 등의 다양한 오류를 경험하면서 문제를 해결하는 스킬이 향상 되었다.
  • eslint를 사용하면서 onClick이벤트를 사용하기 위해서는 onKeyUp, onKeyDown, onKeyPress이벤트 중 하나 이상을 같이 사용하는게 좋다는 메세지를 보고 스크린 리더 사용자에 대한 고려를 하지 않은 이전의 개발 방식에 대하여 되돌아 볼 수 있었다.
  • 사용자의 좋은 경험을 위해 클라이언트 랜더링 최적화를 진행하면서 렌더링 속도에 따른 사용자가 느끼는 불편함에 대해 생각해 볼 수 있었고 이를 해결 할 수 있는 다양한 방법(이미지 최적화, 코드 스플리팅, 트리 쉐이킹)에 대하여 배울 수 있었다. 이미지를 많이 사용하는 사이트였기 때문에 3가지 방법중 이미지 최적화가 가장 효과적이였다. 결과적으로 3.7초가 걸리던 초기 로딩을 0.5초로 8분의 1로 단축할 수 있었다.
  • 아토믹 패턴을 적용하면서 유지보수 하기 좋은 형태의 JSX를 작성하기 좋다는 장점을 알게 되었고, 폴더의 구조가 복잡해지고 프롭스 드릴링이 심해진다는 단점을 알게 되었다. 이를 통해 단점을 극복하기 위한 전역 상태 관리 툴의 필요성을 느꼈다.

github | notion
2022.8.22 ~ 2022.10.07
참여 인원 6인

• NFT를 3D 갤러리에 전시할 수 있는 프로젝트
  • NFT 민팅, 3D 전시 공간
  • 사용 기술: React TypeScript
  • 협업 도구: Git Jira Figma
• 담당 역할
  • metamask를 이용한 로그인 구현
  • NFT 민팅 페이지 구현(IPFS 활용)
  • profile 페이지 구현
  • navbar 구현
  • 로딩 페이지 구현
• 배운 점
  • NFT와 그 거래 방식에 대해 이해 할 수 있었다.
  • 외부 인증 장치(메타마스크)를 사용했을 때의 로그인 예외 처리에 대한 방법에 대하여 배울 수 있었다.
  • 라우터 이동 시 로딩 애니메이션을 제작하면서 라우터 간의 이동 시 컴포넌트의 생성 소멸 과정에 대하여 배울 수 있었다.
  • 긴 로딩 속도를 기술적으로 극복하지 못해서 주의를 끌 수 있는 로딩 페이지를 만들어 이를 해결했다. 이를 통해 유저의 경험을 좋게 하는 방법이 단순히 빠른 속도 뿐만이 아닌 다른 방법도 있다는 것을 알게 되었다.

github | notion
2022.07.11 ~ 2022.08.19
참여 인원 6인

• 운동기구에 부착된 센서와 연동하여 자동으로 운동 시간을 기록하고, 키오스크와 모바일 앱을 통해 유저의 운동 기록을 확인할 수 있는 서비스
  • 운동 중량, 횟수, 시간 자동 기록, RFID 로그인
  • 사용 기술: React React Native Expo
  • 협업 도구: Git Jira Figma
• 담당 역할
  • 키오스크, 모바일 캘린더&이벤트 제작 (라이브러리 X)
  • 키오스크 페이지 라인 차트 제작 (라이브러리 X)
• 배운 점
  • 팀원과의 회의와 컨설턴트님과의 상담을 통해 주제가 바뀌고 기획이 반토막 나고, 기술 스택이 바뀌는 등, 프로젝트 기간 중 절반이 넘어갈 때 까지 기획을 고치는 과정이 이어졌다. 당시에는 이런 과정 자체들이 너무 힘들었지만, 이를 계기로 탄탄한 기획에 대한 이해도가 상당히 높아지는 계기가 되었다.
  • 처음 하는 6인 프로젝트여서 백엔드, 프론트엔드, IOT 간의 소통을 하는 것에 어려움이 있었지만, 이를 통해 프로젝트에서 팀원과 소통하는 과정에 대하여 배웠습니다. 반대 의견을 부담 없이 말 할 수 있는 분위기와 신속한 의사 결정이 프로젝트의 진행 속도 향상에 도움이 된다는 것을 알게 되었습니다.
  • Jira라는 툴을 이용해 보면서 스크럼과 칸반보드를 활용하여 스프린트 단위의 프로젝트의 일정 관리를 하는 방법에 대하여 배울 수 있었습니다.
  • 제한된 기간 동안 기획의 우선순위를 정하고 어떤 부분을 버릴지 감을 잡게 되었다는 점이 성장에 큰 도움이 된 것 같다.
  • socket.io의 버전 문제로 인한 이슈를 해결하면서 라이브러리의 버전 차이로 발생할 수 있는 이슈에 대하여 알게 되는 계기가 되었다.
  • 모바일 서비스를 개발하면서 웹과 모바일에서의 사용자 경험에 대하여 생각해 볼 수 있었다. 모바일은 웹과 달리 터치로 상호작용 했기 때문에 터치가 되는 영역의 크기를 웹에 비해 좀 더 고민해야만 했고 마우스 휠이 아닌 스와이프를 사용하여 웹과는 다른 경험을 가진다는 것을 알게 되었다.

github | notion
2022.05.13 ~ 2022.05.26
참여 인원 2인

• 영화 추천 사이트
  • 영화 추천, 조회, 커뮤니티
  • 사용 기술: Vue Vuex Django
  • 협업 도구: Git Figma
• 담당 역할
  • DB 구축
  • 추천 및 검색 기능
  • API 설계 및 구현
  • 추천 기능
  • 검색
  • 게시판
• 배운 점
  • 이미지가 많이 사용되는 페이지를 구현할 때 모든 로딩을 처음에 했더니 로딩 속도가 굉장히 오래 걸렸다. 이를 통해 사용자의 경험을 위해 초기에 렌더링할 영역과 사용자의 반응(스크롤 )을 통해 추가로 렌더링할 영역을 구분하는 것이 중요하다는 것을 알게 되었다.다.
  • API를 통해 서버와 클라이언트가 통신하는 방법에 대해서 배웠다.
  • Django에서 path 방식이 아닌 query string 방식으로 url을 사용하는 법을 배웠다.
  • 게시 글 검색과 필터를 따로 만들어 놓으니까 검색과 필터링이 둘 중 나중에 적용한 속성이 적용된다는 사실을 알게 되어서 백엔드 단에서 params로 검색 여부와 게시판의 타입을 설정할 수 있게 로직을 다시 짰다. 필터와 검색의 상관 관계에 대하여 배웠다.
  • Figma를 처음 사용해 보면서 와이어프레임을 확실하게 구성해두면 아무 것도 없이 개발하는 것에 비하여 속도가 많이 빨라진다는 점을 배웠다.
  • component 단위의 개발을 하여 재사용성을 높이는 방법에 대하여 배웠다.
  • 전반적으로 프로젝트를 하면서 겪었던 어려움들이 기초지식이 부족해서 였기 때문에 기반을 쌓는 공부의 필요성을 느꼈다.