![]()
최종 팀플 (8) 보고서 및 발표 ✏️ 학습 내용 최종 프로젝트를 마무리하는 과정으로 (1) 프로젝트 보고서, (2) 결과물 소개 문서를 제작했다. 그리고 결과물 소개 문서를 바탕으로 발표회에서 (3) 발표도 진행했다. (1) 프로젝트 보고서일단 목차를 구성하고 상세한 내용은 각 담당자가 1차로 작성하기로 했다. 그 후에 팀원들이 서로 내용을 확인해주기로 했다. > 프로젝트 보고서 결론이 프로젝트는 최저가 유튜브 레시피 검색 서비스를 개발하는 것을 목표로 하였습니다. 현재 경제 상황으로 인해 식료품 가격이 상승하고 있으며, 이에 따라 소비자들은 가성비 있는 요리 레시피를 찾는 수요가 증가하고 있습니다. 사용자가 요리하고자 하는 음식을 검색하면 가장 저렴한 재료 및 용량을 제공..
![]()
최종 팀플 (7) 깃허브 ✏️ 학습 내용1. 참고 자료 https://medium.com/wantedjobs/원티드랩-프론트엔드-팀의-pull-request-양식-및-자동화-42e393832ffc 원티드랩 프론트엔드 팀의 Pull Request 양식 및 자동화Pull Request를 통일성있게 자동화하여 관리해보자!medium.com https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository Creating a pull request template for your repository ..
![]()
프로젝트 3-4주차 최종 팀플 (6) 프론트엔드 프론트엔드 내용을 재정리하였다. ✏️ 학습 내용1. 기획 및 디자인1) 2024-02-29 (목) : API 명세, 메인 페이지2) 2024-03-01 (금) : 결과 페이지3) 2024-03-02 (토) : 결과 페이지 수정, 로고 디자인4) 2024-03-03 (일) : 메인, 결과, 에러, 정보 페이지 총 4종 완료 (반응형 제작) 데스크톱, 태블릿PC, 모바일 버전으로 반응형 웹사이트를 기획 및 디자인 하였다. 총 4가지 페이지가 나왔다.main : https://lovely-job-789351.framer.app/mainresult : https://lovely-job-789351.framer.app/resultabout : https:/..
![]()
3주차 ~ 4주차 2024-02-26 ~ 03-08 프론트엔드 Vue.js ✏️ 학습 내용테크리딩을 하는 친구의 의견에 따라 웹사이트는 Vue.js로 구현하기로 했다. 문제는 수업과정에 없고, 아무도 배운 적이 없다는 점. 학습하면서 해보기로 했다. 2024.05.03 - [Data Engineering (데브코스)/프로젝트] - Vue.js (1) 학습 자료, 기본 학습 Vue.js (1) 학습 자료, 기본 학습프로젝트 3주차2024-02-26 ~ 27 Vue.js (1) 학습 자료, 기본 학습 ✏️ 학습 내용1. Vue.js 학습 자료1) Vue.js2 한국어 가이드 (공식)https://v2.ko.vuejs.org/v2/guide/installation.html 설치방법 — Vue.jsVue.js ..
![]()
Framer로 메인, 결과, 어바웃, 에러 페이지 반응형 웹 디자인을 수행했다. 로고와 배경 이미지 등은 Figma로 수행했다. 📌 작업 결과 https://lovely-job-789351.framer.app/main https://lovely-job-789351.framer.app/result https://lovely-job-789351.framer.app/about https://lovely-job-789351.framer.app/error 📌 작업 링크 https://framer.com/projects/youtube-recipe--u1FyFYQIOkwSxJu4jEKk-3xE7X?node=KPKmQWTG5Framer Loginlogin.framer.com https://www.figma.com/fi..
![]()
프로젝트 4주차2024-03-03 ~ 06 Vue.js (4) Vue 프론트엔드 CI/CD를 위한 AWS EC2와 GitHub Action Vue.js로 구현한 프론트엔드의 CI/CD를 위해서 AWS EC2와 Github Actions를 사용 예정이다.처음 하는 작업이라서 이를 위해 자료 조사를 진행했고, 실제 작업은 역할 분담을 하여 팀원이 별도로 진행했다. ✏️ 학습 내용1. 자료 조사1) Vue 프론트엔드 CI/CD를 구축하기 위해 AWS EC2와 GitHub Actions를 사용하는 방법2) Docker 사용 여부 결정 Vue 프론트엔드 CI/CD를 구축하기 위해 AWS EC2와 GitHub Actions를 사용하는 방법 1) AWS EC2 인스턴스 설정:AWS Management C..
![]()
4주차2024-03-04 ~ 07 (4일) Vue.js (3) 학습 내용 정리 Vue.js를 학습하고, 실습하면서 배운 내용을 정리했다. ✏️ 학습 내용 인스턴스, 컴포넌트 기본 구조와 사용법 인스턴스 생성:- Vue 3에서는 `createApp` 함수를 사용하여 Vue 인스턴스를 생성합니다. - `createApp` 함수에는 루트 컴포넌트와 옵션 객체를 전달합니다.import { createApp } from 'vue';import App from './App.vue';const app = createApp(App); // 인스턴스 생성 인스턴스 옵션 설정:- `app` 변수를 통해 생성된 인스턴스의 옵션을 설정할 수 있습니다. - `mount` 메소드를 사용하여 인스턴스를 특정 DOM 요소에..
![]()
프로젝트 3-4주차2024-02-26 ~ 03-09 (11일) Vue.js (2) 프로젝트 진행 1. 프로젝트 예시https://jeong-dev-blog.tistory.com/4 공공데이터를 활용한 의약품 검색 사이트 구축 #2 프론트엔드 with vue.js공공데이터를 활용한 의약품 검색 사이트 구축 1. 프로젝트 구성 이번 의약품 검색 사이트 구축 프로젝트에 사용될 구성이다. - 프론트엔드(vue.js) - 백엔드(golang) - 배포서버(AWS EC2) 백엔드에서 공jeong-dev-blog.tistory.com https://github.com/sonsurim/vue-movie-browser/tree/main?tab=readme-ov-file GitHub - sonsurim/vue-m..
![]()
프로젝트 3주차2024-02-26 ~ 27 Vue.js (1) 학습 자료, 기본 학습 ✏️ 학습 내용1. Vue.js 학습 자료1) Vue.js2 한국어 가이드 (공식)https://v2.ko.vuejs.org/v2/guide/installation.html 설치방법 — Vue.jsVue.js - 프로그레시브 자바스크립트 프레임워크v2.ko.vuejs.org 2) Vue.js3 영어 가이드 (공식)https://vuejs.org/guide/quick-start.html Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 3) Vue.js2 유튜브 강의https://www.youtube.com/playlist?list=PLB7CpjPW..
![]()
3주차 말 2024-02-29 ~ 03-02 (휴일 제외 대략 8일) 웹사이트 기획 및 디자인 ✏️ 학습 내용Vue.js를 학습 중에, 새로 배우는 언어로 멘땅에 헤딩하는 것보다 디자인을 잡아놓고 그대로 구현하는 것이 더 빠르다고 판단하여 중간에 웹사이트 기획과 디자인을 진행했다. 팀원과의 서비스 이해도를 맞추기 위해 먼저 이 작업을 했어도 좋았을 것 같은데, 당장의 데이터 수집과 전처리 등의 작업이 바빠서 미뤄왔다. (팀원과의 소통의 오류가 없던 것이 기적이다. 이 내용은 소감에서 계속..) 설계를 해두고 진행을 하면 속도가 더 빠르다. 설계는 방향성을 제시해준다. 얼마든지 중간에 바꿔도 된다. 어떻게 할 것인지 계획해두는 것은 중요한 일이다. 우선 디자인 퀄리티를 높이는 작업이 주 목적이 아니기 때문..
