- Vanilla JavaScript를 이용해 마포구의 러닝코스를 추천하는 사이트를 만들어 보았습니다.
- Live Demo에서 전체적인 작동을 확인할 수 있습니다.
- 리액트 변환은 리액트에서 진행중입니다.
- 이 프로젝트는 마포구 청년 일자리 사업단의 지원으로 제작되었습니다.
개발기간 : 2022.04.11 ~ 2022.05.25 개발인원 : 1인
- 기획/디자인 : umcondo
- 개발 : umcondo
- HTML, CSS, Vanilla JS
- Visual Studio code
- Git, Github
- Netlify
- Kakao map API, Kakao SDK
- webpack 5
- 3가지 선택지를 사용자에게 주고 니즈에 맞는 러닝코스 추천
- 답변을 List에 저장 - List 요소들에 따른 결과 데이터 제공 - 카카오지도를 활용한 러닝코스 데이터 제공
- 카카오 API 활용 - 현 위치버튼 - 거점 오버레이 - 오버레이 숨기기 버튼 - 출발, 시작 마커 생성 - 러닝코스에 대한 요약 제공
- 경로, 코스길이, 소요시간, 유의사항, 코스설명 - 추천 결과 공유
- 링크 복사 - 카카오톡 공유
- 1차(~2022/4/24)
- 기획, 와이어프레임 - 기초적인 웹사이트 구현 - 2차(~2022/5/11)
- 스토리보드 수정 - 반응형 웹 구현 - js로직 함수화 - css클래스, 주석등 전체적 리팩토링 - 웹사이트 최적화 - 3차(~2022/5/22)
- 레이아웃 수정 - 각종 버그, 오류 수정 - 리액트 변환(최적화 미구현) - 발표(2022/5/25)
https://umcondo.github.io/ 개인블로그에 정리해 놓았습니다.
- 발표자료 준비 및 프로젝트 진행과정 정리
-
source code style
- 주석 - 함수, 페이지별 설명, 한줄 주석, 여러줄 주석의 분리 - css - class naming, file 배치 - js - 변수 naming, 통일성 - 가독성 -
git
- git은 버전관리 프로그램이므로 한 커밋당 하나의 기능 구현을 해야함 - 이전 커밋 합치기 - rebase -i, squash - 커밋 되돌리기 - 이전 커밋들 지워짐 reset --soft, --mixed, --hard - 이전 커밋들 놔두고 새로 커밋 생성 revert - 뭔가 빠뜨리고 커밋했을때 - --amend - 커밋을 덮어쓰고 싶을때 - push -f -
css
- 반응형 - media 쿼리, flex - 브라우저마다 다른 렌더링 방식에 대한 경험 - 폰트마다 다른 렌더링 - 애니메이션 - keyframe을 이용해 각 부분별 크기, 위치 조정 -
JS
- 로직 함수화 - DOM API - DOM 조작 - appendChild(노드객체) -> append(노드객체 or 텍스트), prepend - innerText(css에 종속적이므로 느림) -> textContent - innerHTML로 노드들을 일일이 추가하면 그때마다 렌더링을 다시해야한다. - createElement로 요소들을 넣어 노드를 새로 만들어 추가하는 것은 렌더링을 한번만 하면 되므로 더 좋다. - event - event - 브라우저 화면내에서 일어나는 사건 - eventhandler - event 발생 시 실행되는 코드 - eventbubbling - event 발생 시 브라우저가 해당요소뿐만 아니라 부모요소를 거쳐 최상위 요소까지 eventhandler가 있는지 확인하는 것 - eventbubbling을 중단하는 법 - e.stopPropagation()를 부모요소에 추가한다. - 배열, 객체 - json형태로의 데이터 객체 화 -
React
- 컴포넌트 단위로 UI제작 편함(재사용성, 수정편함) - 가상돔 사용으로 브라우저 리소스를 덜 사용 -> 렌더링 최적화 - JSX를 사용해서 dom조작, html, js를 같이 쓰기 더 편함 - SPA에 적합하고 CSR을 사용한다. 서버 부하를 줄이고 서버와의 할일을 분리하여 더 효율적인 앱관리 가능 -
브라우저
- 렌더링 과정 - html 로드 -> html파싱, css 로드, css 파싱 -> dom 트리, cssom 트리 형성 -> 렌더 트리형성 -> 렌더링 - 최적화 - dom 조작, 파일용량줄이기, 파일 link 순서 - 파싱과정을 최적화하기위해 html, css, js파일의 분리, inline 형식 최대한 배제 - 호환성 - 사파리, 크롬, 파이어폭스, 오페라, 모바일 버전, IE는 제외
** 의도하지 않았으나 생긴 것 **
- 이슈 : 사파리에서 애니메이션 결과페이지가 setTimeout 시간이 끝나기 전에 생김
- 진단 : 화면이 로딩되는 동안 애니메이션을 보여주려고 로직을 짰는데, 사파리 브라우저에서 오류 발생
- 해결 : 애니메이션 페이지 보여주고 2초 후 결과페이지를 display:block 하는 방식으로 변경
- 이슈 : 반응형 크기 줄이면 상단의 요소들이 잘리는 현상
- 진단 : 부모요소의 flex, justify-content: center로 인한 오류
- 해결 : 부모요소의 justify-content를 기본(flex-start)으로 주고 justify-content를 기본(flex-start)으로 주고,
하위 요소(item)에 flex-grow: 1로 함
- 이슈 : 웹폰트, 이미지가 늦게 로딩되는 현상
- 진단 : 렌더링 완료보다 이미지 다운로드가 느림
- 해결 : html link태그로 preload를 사용
- 이슈 : 가독성을 위해 css 파일을 분리했으나 렌더링이 늦어짐
- 해결1 : import 방식으로 css 파일 병합
- 진단 : 병렬적 css다운로드가 안되어 렌더링이 늦어짐
- 해결2 : 병렬적 css 로딩을 위해 html link 태그 방식 사용
- 이슈 : 전체 화면의 height를 100vh로 했을때 모바일 하단에 여백이 생김
- 진단 : 모바일은 기본 푸터를 가짐
- 해결 : height를 100%로 바꿔서 해결
- 이슈 : 높이가 작은 핸드폰에서 결과페이지가 잘림
- 진단 : 기본적인 핸드폰 주소창 등으로 인해 결과내용이 가려져서 안보임
- 해결 : 미디어쿼리로 height:700px 이하일때 height를 130%로 설정
- 이슈 : 마포sns로고 사이의 공백
- 진단 : 인라인 요소 사이 공백, 즉 태그 사이 줄바꿈으로 인한 공백을 브라우저가 읽어버려서 나타나는 현상
- 해결 : 부모요소 flex, gap으로 해결,
- 이슈 : css hover가 핸드폰에서 두번 클릭되는 등의 오류 발생
- 진단 : 핸드폰은 터치방식이라 마우스의 hover를 지원하지 않음
- 해결 : media쿼리의 hover,pointer를 활용하여 핸드폰에서는 hover를 실행되지 않도록 함
** 의도했으나 의도대로 되지 않은 것 **
- 이슈 : 공유하기 링크복사 후 URL에 붙여놓고 이동 시, 결과페이지가 아닌 시작페이지를 보여줌
- 진단 : html를 하나로 개발하여 결과페이지가 따로 나누어 지지 않음
- 해결 : react에서 router를 이용해 결과페이지 url을 domain/result로 설정
- 이슈 : 원격저장소의 이전 commit을 정리하기 위해 rebase 사용했으나 commit이 정리되지 않고 새로 생겨버림.
- 진단 : rebase에 대한 이해부족
- 해결 : reset –hard로 오류로 새로 생긴 commit들을 삭제, rebase -i HEAD~n, squash를 이용해
예전 commit들을 합치고, push -f 을 이용 원격 저장소 commit을 정리
- 이슈 : 파이어폭스 폰트 깨짐
- 진단 : 브라우저 호환성
- 이슈 : 버튼에 글자 입력시 상, 하단 여백간격이 균일하지 못함
- 진단 : 폰트 자체적으로 상, 하단 여백을 가짐
- 해결 : 버튼 상, 하단 패딩을 다르게 함
- 문제 : 크롬 데스크톱 브라우저에선 해결되었으나 다른 브라우저나 모바일에선 해결되지 않음
- 이슈 : 공유하기, 링크복사 로직에 대한 정확한 이해 부족
- 진단 : execCommand API, kakao 공유하기 SDK
- 이슈 : 카카오맵으로 현재 위치 받아오는 기능이 실시간으로는 지원되지 않음
- 진단 : 웹의 한계인지 추가적인 학습필요, 리액트를 이용한 네이버지도 및 어플에선 실시간 위치가 구현되어 있음
- 이슈 : 카카오맵에서 맵 확대 후 거점 숨기기를 하면 맵을 축소 했을때 다른 거점들이 숨겨지지 않음
- 진단 : 로직의 한계
- 아쉬운점이 많지만 점진적인 목표를 통해 조금씩 조금씩 스스로 생각하는 것을 구현해나가면서 보완해나가는 것이 재밌었습니다.
- 제가 이 앱을 쓴다고 생각하고 접근하니 최적화에 대한 생각들도 자연스럽게 할 수 있었습니다.
- 오류들을 해결하기 위해 미디어쿼리, dom조작, 브라우저 렌더링 방식등 더 깊숙하게 알아보면서 이론을 실제 기술로 적용해 나가는 것이 재밌었습니다.
- 2차때 보완할 점, 리액트로의 전환 등 생각했던 것들을 모두 완성할 수 없었던 것이 아쉽습니다.
- 온전히 과업에 집중하지 못했던 것은 둘째치고, 우선순위를 정하지 못하고 세부 계획을 세우지 못했습니다.
- 제대로 알지못하고 구현만을 위해 쓰인 코드들이 있습니다.
- css, js 문법과 원리, 브라우저 동작원리에 대해 더 공부해야한다는 것을 느꼈습니다.
- 리액트로의 변환은 어떻게 했으나 어떤 점에서 최적화가 되었고, 얼마나 성능이 좋아졌는지, 어떻게 최적화해 나가야할지 스스로에 대한 질문에 답할 수 없었습니다
- 과업은 끝이 났지만 앞으로 공부하면서 서비스를 보완하고 싶습니다.
- 컨텐츠
- 카카오맵에서 거점 클릭시 카카오지도로 이동과 결과코스와 관련된 사진
- 결과코스와 관련된 사진
- 실시간 현위치 버튼 구현
- 다른 SNS(facebook, twitter 등) 공유하기 추가
- 식수대, 화장실, 편의점, 샤워장 등 편의시설 정보 추가
- 마포 API 활용
- 학습
- 브라우저 동작원리
- 렌더링 원리, 브라우저 호환성
- JS 및 DOM 조작
- Git
- React
- 성능 최적화
- webpack 5 추가, html,js,css file minimize, js,css file 난독화
- 크로스 브라우징
- webpack 이용 babel 추가
- 버그 수정
- 이슈 : 결과페이지 스크롤 이용 시, 카카오맵이 확대되거나 축소됨
- 진단 : 카카오맵 스크롤, 드래그 옵션 true
- 해결 : map.setDraggable(false); map.setZoomable(false); 옵션 추가
- 이슈 : 결과 애니메이션 로딩 시 제목이 세로로 보인 후 위치가 재조정됨
- 진단 : position: absolute로 속성으로 인해, 이미지가 로딩되기 전에 잘못된 위치에 렌더링됨
- 해결 : position: relative로 변경 후 bottom 속성 변경
- 이슈 : 버튼에 글자 입력시 상, 하단 여백간격이 균일하지 못함
- 진단 : 폰트 자체적으로 상, 하단 여백을 가짐
- 해결 : line-height:0 으로 하여 폰트 여백을 없애고 버튼 자체의 패딩을 추가함
- 이슈 : 해결이 안됨, 맥북 크롬에선 잘 나오고 맥북 사파리에서는 잘 안나옴, 데스크탑 윈도우 크롬에선 잘 안나옴. 폰트 자체적 문제로 보임
- 이미지 lazy loading을 적용했는데, 로딩이 늦게되어서 UX를 헤친다고 판단하여 안쓰는 것으로 했습니다.
- 이미지 파일 용량도 크지 않아 lazy loading효과도 미미하므로 UX를 더 우선시 해야겠다고 생각했습니다.
- 웹팩을 설정하면서 좋은 기능들(압축, 난독화, 모듈 번들링, 바벨설정)을 편리하게 쓸 수 있는 것을 알게 되었습니다.
- 추후 코드 스플리팅, 이미지 용량 감소 등 웹팩플러그인을 공부하여 사이트를 더 최적화하려 합니다.
- 이슈 : 버튼에 글자 입력시 상, 하단 여백간격이 균일하지 못함
- 진단 : 폰트 자체적으로 상, 하단 여백을 가짐
- 해결 : 애플 산돌 고딕에서 Pretendard로 폰트 변경. 상, 하단 여백이 거의 비슷한 폰트로 설정함. <(less-than sign)도 상 하단 여백이 비슷한 emoji로 변경