Projects
-
포트폴리오 웹 페이지
루트 디랙토리로 설정되어 있는 기본 페이지입니다.
주요 기능으로는 @keyframes을 활용한 초기 로딩 화면 애니메이션입니다. 애니메이션 이후 해당 내용이 보이지 않는 현상을 css 속성 fill-mode: both를 사용해 해결했습니다. Vercel을 통해 자동화배포 설정을 마쳤으며 지속적으로 업데이트 될 예정입니다.상단 네비게이션 바 메뉴 또는 홈 화면의 "이력서 살펴보기"를 통해 접근할 수 있는 이력서 페이지입니다.
pdf 파일로 확인할 수 있는 Notion 이력서와 동일한 내용을 포함하고 있으며 EmailJS를 통해 이메일을 보낼 수 있습니다. form 태그를 활용해 required 속성과 별도의 유효성 검사를 통해 필드값이 모두 입력되어 있는지 알 수 있습니다.현재 보고 계시는 페이지로 프로젝트 정보를 분류해서 보여드리고 있습니다.
캐러셀 슬라이드를 통해 프로젝트 페이지들의 주요 기능들을 확인할 수 있습니다. -
L'acier 남성 전용 화장품 쇼핑몰
진행 기간 2023.01 - 2023.02 (4주)프로젝트 규모 6인 프로젝트 (FE 3 / BE 3)주요 기능 로그인, 회원 정보 조회 및 수정, 장바구니 추가, 결제, 구독 시스템주요 기술스택
루트 디랙토리로 설정되어 있는 기본 페이지입니다.
주요 기능으로는 캐러셀 슬라이더를 소스코드 없이 구현했습니다. useEffect와 종속성 배열을 사용해 해당 컴포넌트에 style 속성값 (translateX)을 부여해 실시간으로 슬라이더의 x 좌표값이 변동되도록 설정했습니다. DOM 접근을 피하기 위해 useRef를 사용해 해당 요소의 clientWidth값을 기반으로 슬라이드의 최대길이를 측정해 슬라이드의 범위 밖으로 이동되는 현상을 해결했습니다.로그인 후 접근할 수 있는 회원 정보 조회 Route입니다.
사용자의 구독 여부, 피부 타입 검사 여부, 구매 내역 등 사용자의 현황에 따라 필요한 정보가 표시되도록 조건부 랜더링을 통해 컴포넌트를 랜더링하도록 설정했습니다. 주문 내역을 확인할 때 아코디언 디자인을 채택해 클릭 시 상품명, 개수, 총 가격 등 자세한 정보를 볼 수 있도록 구현했습니다.내 정보 페이지에서 navigate를 통해 접근할 수 있는 회원 정보 수정 Route입니다.
주요 기능으로는 React-daum-postcode 라이브러리를 활용한 배송지 CRUD 기능입니다. API에서 제공하는 DaumPostcode 컴포넌트의 고유 속성 autoClose 속성에 false값을 할당해 주소지 선택 시 최상위 엘리먼트를 삭제하는 현상을 해결했습니다.
배송지 추가, 삭제, 대표주소 변경 시 재랜더링이 되지 않던 현상을 해결하기 위해 별도의 상태값을 생성/할당한 후 useEffect와 종속성 배열을 통해 해당 상태값이 변동될 때마다 재랜더링되는 방법을 채택했습니다.홈 화면에서 리다이렉트된 이벤트 상세 페이지입니다.
선택한 이벤트의 상세 내용이 적힌 이미지를 표시하고 별도의 이미지가 없을 시 텍스트를 추가할 수 있도록 설정했습니다.내 정보 수정 페이지에서 접근 가능한 비밀번호 재설정 페이지입니다.
데이터 패킷의 부담을 덜고 내 정보 수정 페이지의 경량화를 위해 별도의 페이지로 작성했습니다. 재설정 시 기존 비밀번호와 새 비밀번호를 API 명세서에서 지정된 타입으로 Patch 요청을 보냅니다. -
Dodge.gg 전적 검색 사이트
루트 디랙토리로 설정되어 있는 기본 페이지입니다.
SPA의 장점을 극대화시키기 위해 주요 기능인 챔피언 검색, 데이터 지표 확인, 소환사 검색 기능을 모두 사용할 수 있습니다. 상단 중앙 로고 옆 아이콘 클릭을 통해 조건부 랜더링을 통한 다크 모드 기능을 지원하고 있습니다.같은 페이지에서 챔피언을 선택 했을 때 화면입니다.
해당 프로젝트를 진행했던 날짜를 기반으로 한 버전(12.22.1)의 통계를 기반으로 컴포넌트 기반 개발(CBD)을 진행해 약 160개의 챔피언이 모두 같은 컴포넌트를 사용하고 있습니다. 챔피언 목록 컴포넌트를 작업한 팀원과 협업을 통해 해당 목록에서 클릭 시 영문 이름을 전달받아 API에서 해당하는 데이터값을 조회한 후 랜더링합니다.기존 페이지에서 소환사 검색 시 화면입니다.
팀원이 작업했던 컴포넌트를 이어받아 디자인 수정 및 필터링 기능 추가 작업을 했습니다. 혼란을 최소화하기 위해 기존 구조를 지키면서 className을 추가해 css 스타일링을 덮어씌우는 방식을 채택했고, 조건부 랜더링을 통해 다크 모드 선택 시 변경된 디자인을 볼 수 있게 설정했습니다. 전적 데이터 분석을 통해 해당 데이터에서 queueId 필드값을 사용해 분류할 수 있는 함수를 정의하고 호출하여 필터링 기능을 구현했습니다. -
Service Station Web Page
진행 기간 2020.03 - 2020.05 (10주)프로젝트 규모 14인 프로젝트주요 기능 봉사 시간 기록, 학생 모집 및 관리, 카풀 커뮤니티주요 기술스택링크Github 2020년 봄 학기 Software Engineering 수업에서 진행한 팀 프로젝트입니다.
Service Station은 재학생들의 봉사 시간을 기록 및 관리하는 Austin College의 실제 부서로 문서의 디지털화를 위한 웹 페이지 개발을 의뢰했습니다. 사용자 흐름, 와이어프레임 등 프로젝트 문서화의 중요성과 기초에 대해 학습하고 HTML/CSS/JavaScript 등 웹 개발의 기본에 대해 배웠습니다.
