실습 두 번째 메인 프로젝트 제작 - 2

프로젝트 뭐 해보지 생각해보다가, 카카오 지도 API를 이용해보기로 했다.

지도 API를 이용해서 지도에 무슨 표시를 해서 나만의 맛집을 등록하는 블로그를 만들기로 했다.

근데 일반적인 지도 사이트처럼 지도가 메인이고 해당 장소를 표시하는 방식은 아니고,

마치 블로그의 리뷰글처럼 글이 메인이고,

해당 글의 추가 정보로 지도에 위치가 표시되는 것을 보여줄 것이다.

당연히 각 글은 직접 등록하고 수정할 수도 있다.

아직 안만들어봐서 모르겠지만 지우는 것은 새로 쓰면 되는데 삭제는 굳이...? 싶어서

나중에 필요하면 만들 것이다.

각 글에 지역에 대해 상세정보 보기를 누르면,

지도와 함께 해당 지역에 대한 간단한 소개가 나오게 만들 것이다.

그래서 글이 메인이고, 지도는 그냥 보조?의 개념으로 API 활용만 해보는 식으로 갈 것이다.

1. 스프링 부트와 리액트

리액트와 스프링 부트를 이용해서 프로젝트를 제작하는데,

알아보니까 프론트와 백단의 구성을 어떻게 하냐가 구분되어 있었다.

간단하게 말하면 하나는 프론트를 백 안에 넣어서? 만드는 것이고,

다른 하나는 프론트와 백을 별개로 만드는 것이다.

첫 번째 장점은 한 프로젝트 안에서 프론트와 백을 모두 관리할 수 있기 때문에,

한 명이 프론트와 백을 둘 다 관리해야 하는 경우 편하게 사용할 수 있다.

빌드도 프론트, 백이 동시에 된다.

대신 백쪽 서버가 내려가면, 단순히 표시만 해주는 화면 조차도 나타나지 않는다.

프론트와 백을 분리시켜서 만들면, 백단의 서버가 내려가도, 프론트 쪽 부분은 원활하게 돌아간다.

다만 서버와 통신해야 하는 부분은 당연히 안된다.

이왕이면 후자의 방법을 택하는 게 좋다고 하는데,

그러려면 공부해야 하는 것도 늘어나서 프로젝트를 올해 안에 못만들 것 같고,

애초에 그 정도로 큰 규모의 프로젝트를 만들지도 않을 것 같아서

일단은 백단이 프론트단을 포함시키는 구조로 갈 것이다.

파일 구조는 아래처럼 해놨다.

내부에 폴더구조가 더 있지 않은 것은 접어놓았다.

백엔드 쪽 폴더 구조

특별한 것은 없다.

기능별로 폴더를 구분하고, 응답을 위해 result 폴더를 만들었다.

일단은 user 관련된 것만 만들어놓았다.

서비스는 앞 글에서 말한대로 느슨한 결합의 구조를 위해 인터페이스를 만들고,

그 구현체를 작성해서 사용 중이다.

프론트 쪽 폴더 구조

리액트를 사용 중인데,

리액트로 프로젝트를 만들어본 적도 없고,

처음 배울 때도 독학으로 공부한 거라 폴더 구조를 이렇게 짜는 게 맞는 지 모르겠다.

지금 시험삼아서 로그인 창을 띄우고, 로그인하는 기능까지는 구현해놔서

몇몇 파일들이 만들어져있는 상태다.

이렇게 하는 게 맞는 지는 모르겠지만 어차피 물어볼 데가 없어서

아니어도 어쩔 수 없이 이렇게 계속 해야 한다.

728x90