[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 자취방 리뷰 페이지(1)

자취방 리뷰 페이지는 자취생들이 자신들이 살던 자취방에 대한 후기를 쓸 수 있는 페이지다. 우리 프로젝트에서 가장 독특한 기능이고, 시중에도 자취방을 구하는 앱은 있지만 후기를 달 수 있는 서비스는 없어서 만들어 봤다. 앞서 블로그에서도 봤겠지만 프로젝트 기간이 갑자기 늘어나는 바람에 추가로 넣을 기능을 생각하다 넣은거라서 모든 기능을 약1주일만에 만들었다. 그래도 내가 제안한 아이디어를 제작한 거라서 가장 재밌게 만들었던 기억이 있다. 🗺️ 자취방 리뷰 페이지 ⚒️ 내가 한 기능 1. 초기위치는 현위치로 고정 2. 지도 클릭시 클릭한 곳의 주소 추출 3. 리뷰 달고 볼 수 있게 구현 4. 지도가 움직임에 따라 지도에 포함된 리뷰들만 보이게 구현 5. 주소 검색 후 해당 지역으로 이동 6. 현위치 버튼 ..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(1)

🔥 핫딜 페이지 핫딜 페이지에는 제품 상세 모달, 장바구니 모달, 결제 모달까지 한 페이지 안에서 결제까지 할 수 있도록 만들었다. 초반 기획을 했을 때 최소한으로 페이지를 만들자고 해서 대부분을 모달로 만들었다. (그러지 말았어야 했다.) 1️⃣ 수정 전 핫딜 페이지 처음에 기획할 때는 원래 이런 페이지가 아니였다. 이전까지의 프로젝트와 비슷한 느낌의 쇼핑몰을 만들려고 했으나 막상 다 만들고 나니 너무 허전했다. 기능도 이전 프로젝트와 다를게 없었고 차별화 되는 느낌이 없었다. 그리고 기간도 아직 많이 남아 있어서 삭제하고 다시 만들었다. (이전 파일은 배포 과정에서 삭제하는 바람에 없어졌다..) 2️⃣ 수정 후 핫딜 페이지 사용한 라이브러리: react-daum-postcode(우편번호 검색), Sw..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 2차 팀프로젝트 - 회고록(feat. 최우수상)

배포 링크 : https://port-0-syos-2rrqq2blmiwyaxo.sel5.cloudtype.app/ 깃 허브: https://github.com/7jjin/SYOS 🔥SYOS( Share Your Own Space) 2차 프로젝트가 시작하고 주제를 정하는데 오랜 시간이 걸리지 않았다. 이것저것 말해보다가 요즘 "데스크 셋업" 을 꾸미는 사람들이 많길래 주제를 이쪽으로 정했다. SYOS는 나만의 데스크 셋업 공간과 정보를 공유하고 데스크 셋업을 추천받을 수 있는 웹사이트입니다. 아이디어가 참신하고 이전에 없던 내용이라 기대가 컷다. 처음으로 백엔드랑 연결해서 프로젝트를 하는 것이라 기대 반 걱정 반이였다. 초반에 컨트롤러를 어떻게 나누고 DB에는 어떻게 저장를 할까 고민을 하면서 시간을 보냈..

• format_list_bulleted 프로젝트
• · 2023. 10. 7.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 회고록(feat. 최우수상)

이번 회고록은 내가 팀 적으로 성장한 점과 아쉬웠던 점에 대해 써볼려고 한다. 내가 혼자 기능 구현 하며 성장한 것과 아쉬웠던 점은 아래 블로그를 참고 하면 좋을 것 같다.😊 2023.07.27 - [포스코x코딩온] - [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1) [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1) 1️⃣ 프로젝트 소개 우리팀은 '국내 주류'와 관련된 정보를 소개해주는 서비스를 계획했다. 크게 주요 페이지는 4개로 나눴고 부가 서비스 페이지는 5개로 만들었다. 주요 페이지 - 메인페이지, jin99.tistory.com 2023.07.29 - [포스코x코딩온] - [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(2..

• format_list_bulleted 프로젝트
• · 2023. 7. 30.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(2)

1️⃣ 두번째 페이지 메인페이지를 만들고 또 다른 페이지를 각각 맡아서 제작하기로 했다. 나는 그중에서 페스티벌 페이지를 담당했고 디자인을 먼저 고려했다. 지역을 선택할 수 있는 필터를 만들고 그 아래에는 슬라이드를 사용해서 현재 진행중인 페스티벌을 보여줄 계획했다. 특히 이번 슬라이드는 스와이퍼를 사용해서 만들었다. 처음써보는 라이브러리라서 커스텀이 어디까지가능하고 사용 방법이 어떤지 몰랐기 때문에 기대됬다. 2️⃣ 스와이퍼 사용 방법 스와이퍼를 불러오는 방법은 2가지가 있다. https://swiperjs.com/get-started Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slide..

• format_list_bulleted 프로젝트
• · 2023. 7. 29.
• textsms