baxdailygit/landing-page

포트폴리오 랜딩 페이지 제작

landing-page

포트폴리오 랜딩 페이지를 제작하였습니다.
본 랜딩 페이지는 저의 간단한 소개, 경험했던 프로젝트, 지도, 메일을 제공합니다.

제작기간: 2024년 1월 17일~24일

GitHub Pages를 통해 호스팅되며, 다음 링크를 통해 확인할 수 있습니다: Portfolio Landing Page
활동 기록은 Blog에 올려두었으니 참고바랍니다! (작성중)
1920x1080해상도 100%배율 기준으로 제작하였으며 반응형 웹은 추후에 차근차근 구현 예정입니다.

포트폴리오-랜딩페이지 완성화면 캡쳐

---

0. 랜딩 페이지를 제작하기 앞서

소프트웨어공학에서는 소프트웨어 개발을 계획하고 관리하기 위한 개발방법론이 있습니다.

이번에 개인 프로젝트를 진행하기 앞서 방법론까지는 아니더라도 체계적으로 계획하고 관리, 기록하며 개발해보고자 단계를 정하고 이것에 맞추어서 진행하려고 합니다.

1. 목표 설정
2. 기술 스택 및 컨벤션 구성
3. 프로젝트 초기화
4. 디자인 및 레이아웃 계획
5. 컴포넌트 개발
6. API 연동
7. 테스트
8. 배포

---

1. 목표 설정

• 진행했던 개발 프로젝트를 소개하는 포트폴리오 랜딩 페이지를 만듭니다.
• 라이브러리를 사용하지 않고 순수한 HTML, CSS, JavaScript만을 사용합니다.
• 더미 이미지api와 지도api를 활용하여 제작합니다.

단순히 웹 페이지를 출력하는 랜딩 페이지를 제작하는것이 목적이 아닌 개발 후 지속적으로 유지보수할 계획이 있습니다.

또한 JavaScript를 익히고자 남는 공간에 api를 활용하고자 합니다.

---

1.1 요구사항 수립

하나씩 퀘스트 깨는 느낌으로 요구사항을 리스트로 적어보았습니다.

요구사항

• 프로젝트 목록
• 프로젝트 상세 정보
• 연락처 정보
• 이력서 다운로드
• 사는 지역을 나타내는 지도
• 스크롤 애니메이션
• 반응형 디자인

---

2. 도구 및 기술 스택 구성

• 웹 페이지의 구조와 스타일을 정의 : HTML/CSS
• 상호작용, 이벤트 처리, AJAX 통신 : JavaScript
• 로컬 개발 서버(테스트) : Live Server
• 개발 환경(IDE) : IntelliJ
• 버전 관리 : git / github

---

Branch

branch 의 종류 중 main, develop, feature 이 3가지 브랜치를 사용해 프로젝트를 나눌 생각입니다.

• main branch
  최종 완성본을 담고 있는 브랜치
• develop branch
  전체 개발 작업이 진행되는 브랜치
• feature branch
  특정 기능이나 작업을 개발할 별도의 브랜치

흐름은 다음과 같습니다.

---

커밋 컨벤션

개발도중 커밋을 보면 이것을 왜 만들었는지 모를때가 있습니다. 그래서 아래와 규칙을 정해 변경사항을 빠르고 쉽게 파악하려고 합니다.

Feat : 새로운 기능을 추가하는 경우
Design : CSS 등 사용자가 UI 디자인을 변경했을 때
Style : 코드 포맷 변경, 세미콜론 누락, 코드 수정이 없는경우
Comment : 필요한 주석 추가 및 변경
Fix : 버그를 고친경우
Refactor : 코드 리펙토링
Test : 테스트 코드. 리펙토링 테스트 코드를 추가했을 때
Rename : 파일명(or 폴더명) 을 수정한 경우
Remove : 코드(파일) 의 삭제가 있을 때
Docs : 문서를 수정한 경우

landing-page's Issues

1월 22일

• 비동기 처리와 로딩 표시가 개선되었으며, 스크롤 탑 버튼과 모달이 추가하였다.
• 폰트, 네비게이션, 프로젝트 요소의 크기와 간격이 조정되었으며, 푸터 링크 버튼의 배경 컬러와 이메일 배경 이미지가 수정하였다.
• .gitignore 캐시 삭제 후 .gitignore 파일 추가 및 설정하였다.
• 모달 및 스크롤탑 코드 구조를 개선하였다.

본격적으로 나만의 테마로 디자인을 변경하기 시작했다. 하지만 디자인 도중 고쳐야 할 부분들이 계속 눈에 보인다.(완벽하다고 생각했는데;;)

마지막으로 내일 애니메이션을 추가하고, 깃 페이지스에 호스팅을 하고, 문서 작성을 하면서 이번 프로젝트는 마칠 것 같다.

1월 19일

• email의 html과 css를 전반적으로 작성하였다. 📫
• footer의 html과 css를 전반적으로 작성하였다. 👣
• 글씨 크기, 전체 레이아웃의 마진을 조정하였다. 👪
• 각 css와 js일에 주석을 추가하였다.✒️

자꾸 공간이 뜨는 공간이 있는데 마진도 아닌 것 같고 원인을 모르겠다. flex때문에 그런 것 같기도 한데 도통 해결되지 않는다. 계속 시간을 투자하는게 맞는걸까 ㅠㅠ

+) 그만 고민하고 일단 js 기능과 애니메이션을 추가해보기로 한다.

1월 24일

보다 Semantic한 코드가 중요한 만큼 각 기능과 역할에 맞게 태그 변경

• section -> figure
• div -> dialog
• article -> section

포트폴리오 랜딩 페이지 개발을 모두 마쳤다.

이제 유지보수와 앞으로 진행할 프로젝트들을 업데이트하기만 하면 된다 !!

1월 17일

• 로컬 디렉토리에 원격 레포지토리를 연결하고 브랜치 3개를 만들었다. 🥪
• html : 전반적인 뼈대를 만들고 header와 main의 about섹션에 코드를 추가했다. 👍
• css : 호두 랜딩 페이지 header부분과 main의 about섹션 위치부분을 똑같은 모양으로 만들었다. 💯

header에 div대신 무엇을 넣어야 Semantic하게 작성할 수 있을지 고민이다. 일단 section을 넣었지만 header에 section을 넣는것은 알맞지 않아보인다. 계속 고민해야겠다.

1월 18일

• projects의 기본적인 html, css를 작성하였다. ✍️
• 비동기 ajax 통신으로 이미지 api를 불러오는 js 코드를 작성했다. 🔧
• 더보기 버튼을 눌러 이미지가 아래에 나타나도록 js 코드를 작성했다. 💯
• map의 기본적인 html, css를 작성하였다.
• 카카오지도 api를 활용하여 map을 불러오는 js 코드를 작성했다. 🥕
• 전체적인 레이아웃 마진 패딩을 조정했다. 📣

내 화면이 작아보여 한줄에 3개가 배치되어야 할 이미지가 2개만 배치되는 문제에서 애를 먹었다. 해상도 비율이 문제도 아니고 브라우저 크기도 100%인데 어디가 문제인지 계속 알아보다가 알아보니 내 노트북 디스플레이 배율이 125%(권장)으로 되어있었다. 다시 100%로 바꾸니 문제가 해결되었다.

1월 23일

• 버튼 클릭 이벤트 처리, 파비콘 및 지도 API 기능을 추가하였습니다.🌱
• 이미지 파일 정리, 애니메이션 및 디자인을 변경하였습니다. 🖼️
• 경로를 수정하고, 불필요한 파일을 삭제하고, 주석을 추가하였습니다. 🛣️

배운점: 로컬에서는 절대/상대 경로로 해도 별 문제 없이 작동하였지만 git pages에서 호스팅 했을때는 상대 경로 설정을 정확하게 해야한다.

이제 문서작업만 하면 될 것 같다.

공부할 점: 테스트, 버전 태깅

1월 21일

• 중복되는 코드를 개선했다. 👨‍🔧
• 디렉토리 구조를 개선했다. 🏗️

코드가 복작해지기 시작한다.

css에서 적용이 안되는 경우가 생기면 시간을 들여 분석해봐야 한다. 이때 불필요한 코드와 중복된 코드 때문에 더 시간이 걸린다.

제때 리팩토링을 해주는 습관을 들이자.