Scroll Bar
Title
꿈틀
Period
2023.08.28 ~ 2023.10.06
Member
Frontend 3명 , Backend 3명
Contribution
프론트엔드 중 40%
꿈 해몽과 목표를 향해 달려가는 동기부여 서비스.
인간의 무의식이 반영된 자면서 꾼 꿈을 해몽 사이트의 데이터를 기반으로 해석하여 꿈에 대한 해몽과 카테고리를 제공합니다. 꿈을 서로 사고 팔 수 있고 자면서 꾼 꿈을 기반으로 나의 목표(낮의 꿈)을 위해 어떤 챌린지를 하면 좋을지 추천해주고 유저들끼리 동기부여를 하도록 도와주는 서비스입니다.
Skills
TypeScript
Javascript를 사용할 때 의도치 않은 결과값이 나오는 경우를 이전 프로젝트에서 경험했습니다. 그리하여 TypeScript가 필수임을 알게 되어 사용하게 되었습니다.
React and Redux
현재 현업에서 가장 많이 쓰이고 있는 기술들로 프론트엔드 개발을 팀 프로젝트로 처음 접하는 저희 팀에게 정보 서칭이 수월할 것으로 생각 되어 채택했습니다.
Styled-Component
태그 자체를 커스텀해서 사용하는 방식으로 DOM 코드 가독성을 좋게 만들 수 있기에 사용했습니다.
My Part
챌린지 페이지 개발
챌린지 생성,조회 / 인증 사진,글 등록 / 추천 챌린지 / 타임캡슐 등록, 조회 / 유저 낮 프로필 / 챌린지 검색 페이지 개발
아토믹 디자인 패턴을 기반으로 하여 가장 작은 단위부터 쌓아 올리며 개발
axios 기능 모듈화
유저 인증이 필요한 것과 필요 없는 것 그리고 헤더 타입에 따라 나누어 모듈화
프론트엔드 팀원들이 axios를 사용하기 편하도록 개발
이미지 미리보기 / img 태그 클릭을 통한 이미지 input 기능 개발
useRef를 통해 input 태그 커스텀
파일의 url을 추출하여 이미지 미리보기 구현
Dropdown 컴포넌트 개발
유저들의 입력사항을 제한하고 페이지 분위기를 해치지 않기 위해 dropdown 개발
낮과 밤 테마 변경에 따른 배경 설정
router url 링크의 pathname을 통해 현재 페이지의 테마를 확인하는 방식으로 background 이미지를 설정
배경화면 이미지 로딩이 너무 오래 걸리는 문제 ⇒ png 파일을 jpg파일로 변환 시켜 로딩에 걸리는 시간을 352ms 에서 39ms로 단축 시켜서 불편함이 없도록 함
day1
day2
day3
night1
night2
night3
Next Project

TING

Keep scrolling down
TING