미리보기

프론트엔드 개발과 웹 퍼블리싱을 맡고 있습니다.

서비스 내용

KSOP 공식 앱
앱 다운로드 링크

기능 소개

• 대회에 참여하기 위한 시드권 구입
• 대회 참가자 본인 인증을 위한 QR 서비스 제공
• 마일리지 교환
• 대회 정보 노출
• 대회 등록
• 대회 입장을 위한 바코드 생성

기술 스택

Nuxt.jsm Javascript, ajv JSON Schema, Jest

본인이 맡은 업무

• 마일리지 교환
• 시드권 교환
• 대회 등록
• 갤러리 페이지 내 동영상 플레이어 제작

문제 해결

• 문제 상황: 짧은 시간 로드 되는 데이터에서도 loading spinner 노출 문제. 이는 사용자에게 부정적인 영향을 미칠 수 있다.
• 문제 원인: 데이터 요청 시 일관된 loading spinner가 요청 됨
• 문제 해결: setTimeout을 통해 특정 시간 동안 loading spinner UI 노출을 지연시켜 해결

기여도

5star 기준
⭐️⭐️⭐️⭐️

서비스 내용

잼팟 오피셜 사이트 웹 퍼블리싱
웹사이트 링크

기능 소개

• 회사 홍보
• 회사 채용 공고 리스트 노출
• 모바일 웹 앱 지원

기술 스택

HTML/CSS, JQuery, AOS, Swiper

본인이 맡은 업무

• 전반적인 웹 페이지 퍼블리싱
• 스크롤 애니메이션
• 이미지 갤러리 스와이프
• BEM 방식 적용
• 시멘틱 태그를 활용한 웹페이지 구현

문제 해결

• 문제 상황: playstop 애니메이션이 실행 될 때, 버튼 요소만 repaint 되는 것이 아닌 부모 레이아웃까지 repaint 되는 문제가 발생했다. 이는 브라우저가 렌더링 될 때, 필요 없는 작업을 더 많이 발생시킨다는 문제가 있다.
• 문제 원인: 문제의 원인은 부모 레이아웃과 타겟이 되는 버튼 요소를 구분하지 못해 발생한다. 브라우저가 화면을 보여주기 전에 여러 단계를 거친다. 문제가 발생하는 단계는 layout 단계인데, 이 단계에서 부모 레이아웃과 타겟이 되는 버튼 요소가 분리되지 않았다.
• 해결 방안: 문제 해결 방안은 부모 레이아웃과 버튼 요소를 layout에서 분리하는 작업이 필요하다. 이 때 사용하는 css 속성이 will-change라는 속성이다. will-change는 브라우저에게 이 요소에 변경점이 있을 것이라고 알려주는 기능을 제공한다. 따라서 이 요소를 css에 적용하면 버튼 요소 애니메이션을 실행하면서 부모 요소에 영향이 미치는 것을 피할 수 있다.

기여도

5star 기준
⭐️⭐️⭐️⭐️⭐️

서비스 내용

탁구 게임 웹서비스

기능 소개

• 친구들과 함께 탁구 게임을 즐길 수 있는 웹사이트
• 게임 초대, 게임 관전, 채팅 기능 제공

기술 스택

React, styled-component, Recoil, socket.io, axios

본인이 맡은 업무

• 전반적인 기획, 디자인, 프론트엔드 개발
• 프론트엔드 개발 환경 설정
• Oauth, JWT를 활용한 로그인 기능 개발
• socket.io를 이용한 채팅 기능 개발
• canvas를 사용한 2D 게임 개발
• 게임 방 개설
• 유저 목록 검색

기여도

5star 기준
⭐️⭐️⭐️⭐️

서비스 내용

42 seoul 카뎃을 위한 중고거래 플랫폼

기능 소개

• 댓글 기능을 통한 거래
• 좋아요를 활용한 인기 거래 상품 노출
• 레벨 기능, 뱃지 등 보상을 통한 활동 독려

기술 스택

React, styled-component, Redux

본인이 맡은 업무

• 전반적인 기획, 디자인, 프론트엔드 개발 및 AWS 배포
• 내 정보 페이지, 제품 상세 페이지, 댓글 기능 개발
• 웹 앱을 위한 모바일 UI 구현

문제 해결

• CORS 문제
• 프론트엔드 서버와 백엔드 서버간 proxy 서버를 이용해 해결

배운 점

• 전반적인 기획, 디자인, 개발을 주도하면서 프로젝트의 흐름을 파악할 수 있었다.
• 3개월이라는 짧은 시간 동안 HTML/CSS, Javascript, React를 전혀 모른 상태에서 결과물을 낸 성과를 얻었다.

기여도

5star 기준
⭐️⭐️⭐️⭐️