전체 글

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

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

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

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

Vue.js & Spring Boot 연동 및 개발환경 구축

지금까지 JSP와 HTML 기반으로 프론트엔드를 개발했는데, 이번에 새로운 프로젝트를 시작하면서 Vue.js로 프론트엔드를 구현해보고자 하여, 그 방법을 정리해보려고 합니다. Spring Boot와 Vue.js를 연동하는 방법은 크게 두 가지가 있습니다. 프론트엔드와 백엔드 각각의 서버를 두고 백엔드에서 데이터만 조회하여 프론트엔드에서 보여주는 방법 하나의 서버를 두어 두 개를 통합하여 빌드 후 배포하는 방법 필자는 하나의 서버로 진행할 예정이며, 그 방식은 Vue.js를 빌드하면 Spring Boot 내 프로젝트로 빌드 파일이 생성되며, Spring Boot 배포 파일들과 함께 웹 서버로 배포하는 방식입니다. 백엔드는 STS, 프론트엔드는 VS Code로 구축하여 통합할 예정이며, 이 과정을 진행하기 ..

@RequestBody vs @ModelAttribute

@RequestBody와 @ModelAttribute는 클라이언트 측에서 보낸 데이터를 Java 코드에서 사용할 수 있는 오브젝트로 만들어주는 공통점이 있습니다. 하지만 이 두 애너테이션은 세부 수행 동작에서 큰 차이를 보여주기 때문에 잘못 사용하면 예기치 못한 에러와 마주칠 수 있습니다. 이번 포스팅에서는 두 애너테이션의 특징 및 차이점에 대해 알아보겠습니다. 💡 @RequestBody Annotation indicating a method parameter should be bound to the body of the web request. The body of the request is passed through an HttpMessageConverter to resolve the method ar..