이전에 HTML, CSS를 기본으로 CDN을 이용해 간단한 반복 요소 Vue.js로 처리했던 것을 Vue CLI로 바꾸는 작업을 진행합니다.
자세한 진행과정은 Vue CLI로 포트폴리오 만들기 를 참고해주세요.
- OS: Ubuntu 18.04.5
- node: 12.8.3
- npm: 6.4.1
- Vue CLI: 4.5.12
부스트캠프 AI Tech과정 방학 기간 (2021.03.23 ~ 2021.03.28)동안 기존 작업물을 Vue CLI로 재구현하기.
- Single File Component로 재구현하기.
- CSS를 SCSS로 바꾸기.
기존 목표에서 Single File Component 형태로 구현은 마쳤으나 SCSS 파일로 바꾸고 구조를 다시 만들려는 목표는 달성하지 못했습니다. Vue 3 스타일 가이드 를 뒤늦게 확인하여 스타일 가이드에 맞는 코드로 리펙토링이 필요하다고 생각됩니다.
지금은 시간이 부족하여 못하지만 이후 시간이 날 때마다 우선적으로 해야 할 목표입니다.
- VSCode에서 나에게 최적화된 개발 환경 세팅
- 스타일 가이드에 맞게 코드 리펙토링
- CSS 파일을 SCSS 문법으로 바꾸고, 확장성과 협업을 고려한 파일 구조로 변경
- router를 활용하여 여러개의 view로 웹 페이지 구현
- 2021.06.17
- about 내용과 구성 변경
- 작은 viewport에서 UI 오작동 방지를 위한 페이지 min-width 설정
- template 내부의 컴포넌트 이름 수정
- 2022.03.05
- 경험 내용 업데이트
- 소개 구성 변경
- 2022.07.01
- 경력 항목 추가
- 대외활동 보유기술 제목 제거
- 대외활동 문구 변경
- 2022.07.02
- navbar 경력영역 링크 누락 추가
- 이력서 제목 변경
- 경력사항 프로젝트 상세 내용 수정
- 2022.07.08
- 프로젝트 상세 내용 드롭다운 애니메이션 처리 개선
- css max-height 고정 크기 설정 처리로 구현시 모바일 환경같이 width가 줄어들 경우, 한 라인에 보여줄 수 있는 텍스트가 줄어들어 height가 PC 환경보다 길어지므로 내용이 잘려 보이는 이슈 발생
- 공식 문서 참조하여 동적으로 height 변경 트렌지션 처리함
- vue 동적 트렌지션
- 프로젝트 상세 내용 드롭다운 애니메이션 처리 개선