최종 팀플 (6) 프론트엔드

 

 

 

 

 

프로젝트 3-4주차

 

 

최종 팀플 (6) 프론트엔드

 

 

프론트엔드 내용을 재정리하였다.

 

 

---

 

 

✏️ 학습 내용

1. 기획 및 디자인

1) 2024-02-29 (목) : API 명세, 메인 페이지
2) 2024-03-01 (금) : 결과 페이지
3) 2024-03-02 (토) : 결과 페이지 수정, 로고 디자인
4) 2024-03-03 (일) : 메인, 결과, 에러, 정보 페이지 총 4종 완료 (반응형 제작)

 

데스크톱, 태블릿PC, 모바일 버전으로 반응형 웹사이트를 기획 및 디자인 하였다. 총 4가지 페이지가 나왔다.

1. main : https://lovely-job-789351.framer.app/main
2. result : https://lovely-job-789351.framer.app/result
3. about : https://lovely-job-789351.framer.app/about
4. error : https://lovely-job-789351.framer.app/error

 

📌  상세한 진행 과정은 아래에서 확인 가능하다.

최종 팀플 (4) 웹사이트 기획 및 디자인

 

최종 팀플 (4+) 디자인 링크

 

 

 

 

 

---

 

2. 깃허브 생성 + Vue 프로젝트 설정

2024-03-02 (토)
- frontend 레포와 하위 main, develop 브랜치 생성
- 브랜치 기본 구조와 규칙 생성
- Vue 크롬 확장프로그램
- Vue 프로젝트 설정
- 깃허브와 VScode와 연동

 

 

📌  상세한 진행 과정은 아래에서 확인 가능하다.

 

Vue 크롬 확장프로그램

Vue 코드를 확인할 수 있는 확장프로그램을 통해서 더 효율적으로 작업할 수 있었다.

 

 

VScode에 Vue 전용 확장프로그램 설치

 

 

 

Vue 프로젝트 생성

012345

 

Vue 프로젝트를 생성하면 이렇게 기본적으로 생성된다.

 

 

 

VScode - Branch

0123

 

 

 

 

 

 

---

 

3. AWS EC2와 GitHub Action으로 Vue 프론트엔드 CI/CD 구축

1) 2024-03-03 (일) : 방법 서칭
2) 2024-03-04 (월) : EC2 인스턴스 설정, GitHub Actions 워크플로우 설정, EC2 배포 설정

 

Vue.js (4) Vue 프론트엔드 CI/CD를 위한 AWS EC2와 GitHub Action

 

 

 

---

 

4. Vue 코드 구현

최종 팀플 (5) Vue.js

 

 

 

 

 

반응형

 

 

 

 

 

---

 

 

 

☁️ 소감

2주 안에 프론트엔드 + 프로젝트 정리 + 발표준비, 자료준비 하느라 정신이 없었다. 그래서 마지막 한 주는 정리하면서 하지 못했더니 내용이 비어있는 부분이 있을 지도 모른다. 한 번에 와다다 쏟아내는 느낌이었다. 끝나고 바로 정리하면 좋았을 텐데 프로젝트 하면서 수면 패턴이 망가졌다. 이러한 자기관리도 중요하다고 생각해서, 앞으로는 시간을 잘 쪼개서 사용하는 방법에 대해 고안해보려고 한다.

 

칭찬할 점은 프론트엔드를 도전해보았다는 것! 나중엔 포트폴리오나 이력서 사이트를 직접 만들 수도 있을 것 같다!! 🤭