🚗 Backend Toy Project

[Baeg-won Clothing Gallery] 1. 메인 페이지 구현

📝 Outline 프로젝트를 진행한지 이틀정도 지났을까 드디어 메인 페이지 구현이 어느정도 마무리 되었다. Vue도 처음 사용해보고, 조금은 낮선 명령어들도 써보면서 지난 이틀동안 구글의 힘을 참 많이 이용했다. 어찌됐든 그렇게 메인 페이지를 완성했고, 데이터베이스에 저장되어 있는 데이터를 불러와 화면에 렌더링하는 작업까지 진행했다. 내가 구현한 쇼핑몰의 메인 페이지는 다음과 같다. 전체적인 디자인은 여기를 참조하였다. 간단하게 Header와 Footer 그리고 Contents 영역으로 나뉜다. Header와 Footer는 앞으로 대부분의 페이지에 포함될 것이므로 따로 컴포넌트화 하여 작성해주었다. 아직 특별한 기능은 포함되어 있지 않으며, 추후에 다른 페이지들까지 완성되고 나면 추가할 예정이다. 📝 R..

[Baeg-won Clothing Gallery] 0. 프로젝트 개요

오랜만에 개인 포트폴리오를 만들어보려고 한다. 이전에 만든 2개의 프로젝트가 있긴 하지만, 이제 막 배우기 시작할 때 진행했던 프로젝트인지라 허술한 부분도 많고 너무 기능 구현에만 신경쓰는 바람에 중요한 부분을 놓치고 간 느낌이 들어 새로운 마음으로 다시 시작해보려 한다. 이전 프로젝트를 진행하면서 그래도 좀 배운게 있으니, 우선 프로젝트 명세서부터 작성해보자. 명세서에 포함될 내용은 다음과 같다. 아이템 선정 개요 요구사항 분석 DB 설계 API 설계 📝 아이템 선정 이전에 해본 프로젝트 주제는 게시판(블로그)과 SNS였다. 그래서 이번에는 좀 획기적인 주제로 프로젝트를 진행하고 싶었으나, 딱히 아이디어가 떠오르지도 않고 혼자서 구현할 수 있을지도 애매해서 차라리 정석적인 주제로 프로젝트를 진행하는 것..

[Photogram] 연관 검색어

이번에는 사용자가 입력한 검색 키워드에 따라 해당 키워드와 연관되어 있는 검색 결과를 미리 보여주는 연관 검색어 기능을 구현해보았습니다. 제가 생각한 연관 검색어 기능의 요구사항 아래와 같습니다. 첫 번째, 계정과 태그에 따라 분류하여 연관 검색어를 출력할 수 있어야 한다. 두 번째, 연관 검색어를 클릭할 시 해당 계정 또는 게시글 검색이 이루어져야 한다. 세 번째, ESC 키를 누르거나 페이지의 다른 영역을 클릭할 시 연관 검색어 창이 닫혀야 한다. 📝 jsp, js 해당 기능은 구현하는데에는 서버 쪽 구현보단 클라이언트 쪽 구현이 복잡하였습니다. 아래 코드에서 클라이언트 쪽 구현을 살펴볼 수 있습니다. 계정 태그 let input = document.getElementById("search"); le..

[Photogram] 실시간 알림

이번에는 자신이 구독한 사용자가 새로운 글을 업로드할 경우 실시간으로 알림이 보내지도록 구현해보았습니다. 해당 기능은 서버 -> 클라이언트 방향으로만 이루어지는 단방향 통신만으로도 충분히 구현 가능했기 때문에 SSE(Server-Sent-Events)를 이용하였습니다. 📝 js 우선 클라이언트 쪽 구현 코드입니다. function storyLoad() { $.ajax({ url: `/api/image?page=${page}`, dataType: "json" }).done(resp => { console.log(resp); resp.data.content.forEach((image) => { let item = getStoryItem(image); $("#storyList").append(item); })..