Project Log [git] 깃 만지다가 파일 날아간 후기 때는 바야흐로... 다음 api를 써서 지도 컴포넌트를 만든 후 어느 때와 같이 커밋하고 깃 헙에 바로 푸시하면서 api키가 들어있는 파일까지 푸시한 것을 알아차렸다. 그래서 파일을 푸시하기 전 상태로 커밋을 되돌렸다. 그 상태에서 로컬에서 파일을 수정하고 로컬에서만 commit 하다가 원격까지 푸시하려고 하다 보니 원격 저장소와 로컬 파일이 충돌이 났다. 충돌이 난 것을 병합하기 위해 로컬 파일을 stash를 하고 병합하라기에 stash 하고 병합하니 성공! 그런데... 병합 전 로컬의 작성했던 커밋 내용과 파일이 모두 날아간 것을 발견...ㅎㅎㅎ 어제 새벽에 만들었던 메인 페이지 코드와 기타 코드가 가 모두 날아가서 만들기 이전 상태로 되돌아와 있었다. 눼...? 순간 머릿속이 하얘졌는데 다행히 깃을.. 더보기 [front-end] 쉐어하우스 상세페이지 - 다음 지도 API 상세페이지는 화면 구성을 어떻게 할까 고민하다가 최대한 심플하게 만들었다. 참고로 백엔드는 아직 안만들었으므로 처음 카드를 클릭해서 상세페이로 넘어갈때 내용이 매치되는 것은 아니다. 모든 데이터는 dummy로 만들어 진 것이라 데이터 관련된 기능은 아직 없다. 컴포넌트를 만들면서 느끼는 건데 생각보다 버튼 컴포넌트나 내비게이션 컴포넌트 빼고는 그렇게 자주 재활용해서 써지진 않는 것 같다. 그래서 페이지를 기준으로 컴포넌트들을 나눠서 정리해야하는건지 아니면 기능을 기준으로 컴포넌트들을 나눠서 정리해야 하는 건지 잘 모르겠다. 처음에는 모달이면 모달, 블럭이면 블록 이런 식으로 기능 기준으로 나눴는데 페이지 별로 컴포넌트 생김새가 다르고 역할이 다르기 때문에 차라리 페이지별로 한 파일에 묶어서 관리하는 게 .. 더보기 [front-end] 찜 목록 페이지 - 이벤트 버블링, Hooks 변경 사항 1. 찜 목록 페이지 하트 누르면 좋아요 취소 모달창 띄우기 2. 찜한 집 카드 누르면 집 상세페이지로 이동 3. 헤더에서 내 프로필 누르면 my page 관련 메뉴 drowdown 하트 색깔이 뭔가 너무 촌스러워보여서 고민했는데 일단 저대로 두고 나중에 바꾸던지 해야겠다. 지금 보니 헤더 찜 목록 이름도 찜한 방 -> 찜한 집으로 바꾸는게 더 나을 것 같다. 찜한 집 페이지에서는 유저가 좋아요를 눌렀던 집 정보가 카드 리스트가 나오는데, 카드의 하트를 눌러 좋아요를 취소 모달을 띄울 때 이벤트 버블링이 일어나서 하트를 감싸고 있는 카드에 걸린 onClick 콜백함수도 함께 실행되었다. 이런 경우 자식 요소의 이벤트가 전이되지 않도록 이벤트의 stopPropagation 함수를 쓰면된다. co.. 더보기 [front-end] 글 올리기 페이지 - 예외처리 변경 사항 1. 글쓰기 페이지 들어오면 스크롤 고정 2. 카드 넘어갈 때도 동일하게 스크롤 고정되어있음 3. 주소 입력 페이지에서 주소검색블럭이 아닌 바깥 부분을 클릭하면 없어지도록 함 4. 예외처리 예외 처리 목록 1단계 - 제목 입력 X 2단계 - 모든 값들 중 하나라도 입력 안하면 X, 해당층/전체층, 방개수/화장실 개수에 숫자 아닌 값 or 0 입력 3단계 - 월세 입력 X 4단계 - 주소 입력 X, 주소 서울내 아닌 경우 5단계 - 성별 입력 X 6단계 - 연락처 입력 X, 연락처 형식에 맞지 않는 경우, (추후 이미지 추가 안한 경우도 추가 예정) 값 예외 처리하는건 별로 오래 안걸렸는데 주소 검색창을 띄우고나서 검색창 바깥을 클릭하면 검색창이 꺼지도록 하는 것을 구현하는데서 엄청 헤맸다. 하.. 더보기 [front-end] 글 올리기 페이지 구성하기 후 드디어 글 올리기 페이지 컴포넌트 만들기가 끝났다! 아오 너무 지긋지긋했다. 지겨우면 다른 페이지도 좀 만들고 해야하는데 흐름 끊길까봐 계속 붙잡고 만들었다. 아직 다음 step으로 넘어갈 때 필수 값 입력하게 해야한다거나 유효하지 않은 값 예외처리는 해야하지만 어쨌든 거의 다 끝난 것 같아 속이 후련하다. 페이지를 어떻게 구성할까 고민 많이했는데 워낙 입력하는 값이 많다보니, 한 페이지에서 스크롤바로 내려가면서 입력하는 것 보다 단계별로 나눠서 카드 형식으로 만드는게 더 나을 것 같았다. 카드형식으로 했을 때가 절차가 짧은 느낌도 나고 한 단계씩 클리어하는 느낌으로 쓸 수 있을 것 같았다. 각 단계별로 컴포넌트를 나눠서 만들었는데, 한페이지에서 모든 컴포넌트를 쫙 뿌려주는 것보다 상태관리하는게 더 .. 더보기 RoomieSeoul 프로젝트 소개글 🏠 RoomieSeoul 🙋♀️ 🙋♂️ 본격 하메/룸메 구하기 사이트! RoomieSeoul은 함께 살고 싶은 하우스 메이트 / 룸메이트를 찾기 위한 사이트 입니다. 쉐어하우스 호스트가 집에 대한 글을 올리면 쉐어하우스를 구하고 있는 사람이 글을 보고 찜하기를 통해 마음에 드는 쉐어하우스를 보관하거나, 직접 호스트에게 연락 할 수 있습니다. 또한 검색필터를 통해 원하는 쉐어하우스를 검색할 수도있습니다. 🛠 본 사이트는 개인의 개발 역량을 키우기 위해 만들어지고 있는 중이며, 사용한 기술 스택은 아래와 같습니다. ✨ Front-end 개발 언어 JAVASCRIPT, HTML, CSS 프레임워크 React, SCSS 기타 라이브러리 Redux, Redux-thunk, axios 사용 API 다음 주소 검.. 더보기 이전 1 2 3 다음