웹에 대한 아주 기본적인 질문..

Question

안녕하세요, 개발자가 된 지 1년이 채 되지 않은 주니어 개발자입니다.제가 맡은 프로젝트가 끝나고 잠시 시간이 비어서 혼자 토이프로젝트를 하고 있는데요, 예전부터 혼자 이것저것 해보다가 질문을 정리하기도 애매했던 게 있었는데, 이참에 정리해서 질문해볼까 하고 OKKY에 질문 남깁니다.토이프로젝트에서 프론트는 리액트를 활용해보고 있구요, client 디렉토리를 따로 만들어 진행해보고 있습니다. 화면이 제대로 그려지고 있는지, 혹은 단순한 기능점검을 위해 console.log 찍어보려는 용도로 npm run start를 통해 localhost:3000에서 테스트하고 있습니다.한편 백엔드는 server 디렉토리를 따로 만들어 진행하고 있는데요, express 패키지 사용하고 있구요, server.js 작성해서 5000번 포트에서 작동시키고 있습니다. 잘 작동되면 response로 hello world 찍고 있습니다.질문의 요지는 프론트엔드와 백엔드의 작동방식 그 자체(?)입니다. 프론트엔드에서 axios.get(&#96;/api/search? ~~') 코드 통해서 api를 호출하는 코드를 짰구요 백엔드의 router로도 /api/search? ~~ 작성해놨습니다.그런데 문제는, 프론트엔드 테스트할 때 호출하는 uri가 당연히 127.0.0.1:3000/api/search ~~ 이겠구요, server.js는 5000번포트로 작동하고 있으니 호출이 되지 않는 것입니다.제가 생각하는 해결법 혹은 큰그림은, server.js를 구동시켰을 때 프론트엔드의 리액트 코드를 서비스하는 방식, 그러니까 큰 그림으로 치자면 express라는 웹서버 안에 프론트엔드 코드가 포함되는 방식이 있고, 다른 방법으로는 server.js가 어딘가(가령 클라우드라던가)에서 구동되고 있고, 프론트엔드는 해당 서버url을 호출하는 방식이 있을 것 같은데.. 이는 백엔드와 프론트엔드의 완전한 분리(?)처럼 느껴지구요..질문이 잘 전달될지는 모르지만, 프론트엔드와 백엔드를 분리한다고 했을 때 과연 뭘 어떻게 개발하느냐... 구조가 어떻게 되고, 제가 뭘 잘못 느끼고 있는건지.. 총체적인 질문입니다.. 초보자를 구원해주실 친절하신 분이 계실까요~~?

Throwaway · Answer

개발은 디커플링이 필요할때 디커플을 해줘야합니다. 서버랑 클라이언트를 같이 실행시킨 다는 생각이 커플링을 유도합니다.네트워크 책 제대로 된거 하나 사서 공부해보세요. 그리고 aws 프리티어 계정만들어서 예제같은거 따라해보시구요

장독깨기 · Answer

질문이 좀 혼란스럽고 헷갈리는데요, ㅎ먼저, 프런트와 백앤드를 분리하지 않는다는 것은 대게 ssr 방식을 얘기합니다.즉, 서버에서 html 문서를 생성해서 반환하는거죠.지금 글쓴이는 프런트와 백앤드를 분리했습니다.리액트로 프런트를 작성했고 백앤드 서버로 api 호출해서 데이터(json) 만 받아 화면에 표시하는거잖아요.백앤드는 express 를 사용해서 데이터(json)만 반환하구요.그니까, 프런트 모듈, 백앤드 모듈 따로 작성해서 분리한거죠.근데, 이걸 물리적으로 같은 서버에 둘 거냐 다른 서버에 둘 거냐는 별로 중요하지 않습니다.같은 서버에 둘 거면 당연히 포트로 구분을 해야 할 거구요.

웹에 대한 아주 기본적인 질문..

2개의 답변

Q&A 목록