Project Log/RoomieSeoul RESTful API를 구현하고자 하는 노오력 REST란 Representational State Transfer의 약자로, 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 구체적으로 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)를 명시하고 HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다. 나도 이에 맞춰서 RESTful API를 구현하려고 하다보니 애매한 경우가 발생했다. 자원기준으로 URI를 표현하려다보니 자원보다는 액션에 가까운 URI는 어떻게 표현해야하나 라는 고민이 들었다. 예를 들면, 로그인, 회원가입, 로그아웃 같은 경우 아래와 같이 구성했다. .. 더보기 [front-end] 비동기 요청 처리하기 - redux-promise-middleware redux-thunk를 쓰다가 더 편하게 쓰기 위해 redux-promise-middleware를 추가해서 사용하기로 하였다. 기존의 suffix를 더 간단하게 LOADING, SUCCESS, FAILURE로 변경해서 쓰려고 하니 middleware is not a function 이라는 error가 계속 떴다. 혹시나 싶어서 store에 걸려있는 middleware들을 한개씩 지워가며 어디에서 발생하는 것인지 테스트해보았다. (...) import { createLogger } from 'redux-logger'; import { default as ReduxThunk } from 'redux-thunk'; import promiseMiddleware from 'redux-promise-middlewa.. 더보기 [back-end] Node.js - express로 구조잡기 백엔드는 Node.js로 구성하기로 하고, 프레임워크는 express를 사용하기로 하였다. express-generator를 이용해서 간단하게 구성할 수도 있지만 공부할겸해서 express만 이용해서 하나씩 채워나가는 방식으로 구성하였다. DB는 몽고를 쓸까 MySQL을 쓸까 고민했었는데, 이전에 잠깐 궁금해서 몽고를 써봤을때 RDB에 비해 편하긴하지만 결국에는 RDB처럼 쓰기 위해 뭔가 추가적인 작업을 더 해주는 것이 그냥 애초에 RDB를 쓰는 게 낫겠다 라고 생각했었다. 그리고 유저와 유저가 올린 글, 유저가 좋아요를 누른 글 등의 어쨌든간에 데이터를 JOIN해서 사용할 경우도 많을 것 같아 MySQL을 사용하기로 하였다. DB 작업 시 직접 쿼리문을 만들어서 사용해도 되지만, JS로 편하게 작업하기.. 더보기 [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 다음