본문 바로가기

분류 전체보기

[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 하고 병합하니 성공! 그런데... 병합 전 로컬의 작성했던 커밋 내용과 파일이 모두 날아간 것을 발견...ㅎㅎㅎ 어제 새벽에 만들었던 메인 페이지 코드와 기타 코드가 가 모두 날아가서 만들기 이전 상태로 되돌아와 있었다. 눼...? 순간 머릿속이 하얘졌는데 다행히 깃을.. 더보기
UX/UI design 유용한 참고 사이트 - dribbble, UI Movement Dribbble - Discover the World’s Top Designers & Creative Professionals Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals. dribbble.com 프로젝트만들면서 프론트 디자인을 위한 아이디어를 얻기 위해 여기저기 사이트를 많이 찾아봐는데, 여태 찾아본 사이트들 중에서는 dribbble이 제일 감각적이고 유용한 것 같다. 사실 웹사이트를 디자인 템플릿을 제공하거나 하는 사이트는 아니기 때문에 단순히 아이디어.. 더보기
백준 온라인 저지 - 1152번: 단어의 개수 🔍 문제 1152번: 단어의 개수 첫 줄에 영어 대소문자와 띄어쓰기로 이루어진 문자열이 주어진다. 이 문자열의 길이는 1,000,000을 넘지 않는다. 단어는 띄어쓰기 한 개로 구분되며, 공백이 연속해서 나오는 경우는 없다. 또한 문자열의 앞과 뒤에는 공백이 있을 수도 있다. www.acmicpc.net ✏️ 풀이 - Java 중복되는 단어는 빼야하는 건 줄 알고 set으로 풀었다가 틀렸습니다!라고 떴길래 문제를 다시 읽었더니 중복된 단어 개수도 모두 세었어야 했다. 그래서 arrayList써서 풀었다. 정답률이 24%이길래 눌러봤는데 이런 문제야 말로 블로그에 글 +1 하려고 풀어본 문제인 것 같다. import java.io.BufferedReader; import java.io.BufferedWri.. 더보기
백준 온라인 저지 - 11725번: 트리의 부모 찾기 🔍 문제 11725번: 트리의 부모 찾기 루트 없는 트리가 주어진다. 이때, 트리의 루트를 1이라고 정했을 때, 각 노드의 부모를 구하는 프로그램을 작성하시오. www.acmicpc.net ✏️ 풀이 - Java 풀이를 찾아보니 bfs로 찾아본 사람이 더 많은 것 같았지만 그냥 dfs로 풀었다. 트리를 루트부터 타고 내려가면서 만약 자신과 연결된 노드가 이미 방문한적이 있다면, 부모로 보고 parent 배열에 넣어주었다. import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOException; import java.io.InputStreamReader; import java.io.OutputStreamWriter; i.. 더보기
[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 다음 주소 검.. 더보기

티스토리툴바