4전 4전

카카오 지도 API를 활용한 프로젝트를 진행하던 중,백엔드 서버에서 받아온 여러 위치 데이터를 바탕으로지도에 마커를 표시하는 기능을 구현해야 할 일이 있었습니다. 이 과정에서 다수의 마커를 효율적으로 관리하고,지도를 최적화하는 방법에 대해 고민하게 되었습니다. 이번 글에서 어떠한 과정으로 고민하고 문제를 해결했는지 작성해보려 합니다. -> 참고: 프로젝트는 Next.js, tailwind css, typescript를 사용하였습니다.| 지도 생성우선 카카오 지도 API를 사용하기 위해다음과 같이 next.js의 Script 태그를 사용해 스크립트를 포함시켜 줍니다.const KakaoMap = () => { return ( );};export default Kaka..

이번에 패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프에서 숙박 예약 서비스 만들기라는 주제로 백엔드 부트캠프 수강생들과 함께 프로젝트를 진행하였습니다. | 기능 사용자 위치 기준 숙소 추천, 인기 숙소 안내 회원가입, 로그인 숙소 타입, 장소, 추가옵션등 원하는 카테고리를 선택하여 숙소 조회 장바구니, 주문, 결제 결제 내역 확인, 숙소 찜하기 | 역할 이 프로젝트에서 저는 사이트의 장바구니 기능과 결제 완료 후 나오는 결제 완료 페이지를 담당하여 진행하였습니다. | 링크 깃허브: https://github.com/Yanolza-Miniproject/frontend 배포: https://heynolja-mini-4.vercel.app/ | 장바구니 시연 영상 | 이슈 1. 목 데이터 문제 문제: msw를 ..

이번에 패스트캠퍼트X야놀자 부트캠프 프론트엔드 과정의 Javascript 과제로 직원 사진 관리 서비스 라는 주제로 프로젝트를 하게 되었습니다. | 설명 간단한 유저의 정보와 사진을 앨범 형식으로 관리할 수 있도록 만들었습니다. | 중점사항 사진을 관리하는데 있어서 AWS s3를 사용하였습니다. 이 과정에서 AWS s3 를 제대로 이용해보고 싶은 마음이 생겨서 프로젝트의 방향을 AWS s3의 학습에 초점을 두고 진행을 해보았습니다. | 구현 내용 1. 유저 생성 프로필 사진을 등록하고(안 하면 기본 사진) 간단한 정보를 입력 후 유저를 생성합니다. 💡 유저를 생성하면 AWS s3 버킷에 유저의 고유한 id 값을 이름으로 한 폴더가 생성되고, s3 버킷 안에 전체 유저의 데이터가 담겨 있는 json 파일을..

이번 패스트캠퍼스X야놀자 부트캠프 프론트엔드 과정의 HTML/CSS 과제에 대해 이야기해보려 합니다. 과제 주제 : 자신이 원하는 사이트 레이아웃 클론 1. 클론 한 사이트 클론 한 사이트 https://www.pinkfong.com/ko/index.html Pinkfong Official Website www.pinkfong.com 클론 할 사이트로는 핑크퐁 공식 사이트를 골랐는데 이유는 먼저 레이아웃이 크게 복잡하지 않고, 깔끔한 스크롤 애니메이션이 적절하게 있어서 골랐습니다. 2. 구현한 내용 레이아웃 구성 레이아웃 구성으로는 크게 header, main, footer로 나눠서 작업을 하였습니다. - header 먼저 헤더는 logo, navigation, sotial의 3가지 부분을 dispaly..