인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

JMJ님의 프로필 이미지
JMJ

작성한 질문수

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

MVC vs API

해결된 질문

작성

·

311

2

아 아까 MVC와 API의 차이에 대해 질문했었는데요...

제가 그럼 프론트엔드 기술 (react, vue 등)을 모르는데 혼자 화면까지 나오는 프로젝트를 진행하고 싶다면

SSR인 템플릿 엔진을 이용한 MVC패턴으로 개발하는 게 더 나을까요??

그러기엔 템플릿 엔진을 사용하더라도 JS나 css는 기본적으로 할 줄 알아야 할 거 같은데 ㅜㅜ

혼자서는 무리겠죠??

답변 1

0

최태현님의 프로필 이미지
최태현
지식공유자

안녕하세요 JMJ님! 🙂

결론부터 빠르게 말씀드리면 상황에 따라 모두 다르다고 생각합니다!

혼자서 프론트엔드까지 포함한 프로젝트를 진행할 때, 그 프로젝트의 목적과 JMJ님이 처해 계신 상황에 따라 모두 다를 수 있다고 생각하는데요!

 

몇 가지 경우에 대한 제 생각을 말씀드려보면 다음과 같습니다.

 

  • 취업을 준비하기 위한 프로젝트이다. 그런데 내가 가려고 하는 회사가 JSP(or Thymeleaf) 같은 템플릿엔진을 사용하고 있다.

    • 템플릿 엔진을 추천합니다.

    • 이때 가시고자 하는 회사가 사용하는 템플릿 엔진을 동일하게 사용하면 더욱 좋다고 생각합니다.

  • 취업을 준비하기 위한 프로젝트이다. 그런데 내가 가려고 하는 회사가 react (or vue)를 사용하고 있다.

    • react (or vue)를 추천합니다. 👍

    • 이때도 마찬가지로 react or vue를 맞춰주면 좋아요!

       

  • 프로젝트로 돈을 조금이라도 벌어보려고 한다. (즉, 사업과 연결해보려고 한다.)

    • react를 추천합니다.

    • REST API + react 구성을 사용해 추후 앱으로 사업을 확장할 때도 훨씬 용이합니다.

  • 템플릿 엔진과 react 모두 사용해본적이 없다.

    • react를 추천합니다.

    • 사실 백엔드 개발자 대부분은 리액트로 간단한 화면 정도는 쉽게 만드실 수 있습니다.

    • 그리고 템플릿 엔진과 react 모두 HTML, CSS는 어차피 동일하게 알아야 하고, 이제 JS 기능을 더 사용할지, react 라이브러리의 기능들을 익힐지의 차이인데요! 둘 모두 경험이 없으시다면, 먼저 react를 사용해보시는 것도 좋다고 생각합니다. (제 개인적인 생각으로는) react가 더 많이 사용되는 것 같거든요!

  • 템플릿 엔진 or react 둘 중 하나를 사용해본적이 있다.

    • 그렇다면 사용해보신 기술을 쓰셔도 좋다고 생각합니다! 😊

 

추가적인 상황에 따라 판단이 달라질 수 있겠지만, 지금 생각나는건 이정도네요!

답변이 도움이 되었으면 좋겠습니다. 감사합니다! 🙇

JMJ님의 프로필 이미지
JMJ
질문자

아 감사합니다.

마지막으로 그러면 저희가 했던 libraryapp 같은 경우는 CSR 방식인거죠?

최태현님의 프로필 이미지
최태현
지식공유자

네네 맞습니다! react로 화면을 만들어서 build 해서 스프링 안에 집어 넣어둔거에요! 😊

JMJ님의 프로필 이미지
JMJ
질문자

강사님 계속 질문해서 죄송한데 ㅜㅜ

계속 프론트엔드와 백엔드가 어떻게 연동되는 지와 동작과정이 너무 궁금해서 이렇게 질문드립니다.

 

  1. 만약 프론트엔드 개발자와 백엔드 개발자가 따로 있다고 생각해보겠습니다!!

저희의 library-app을 예시로 들면 프론트엔드 개발자가 React를 이용해 JS파일을 만들고 그거를 build해서 JS앱으로 만든 것을

백엔드 개발자에게 전달해서 스프링부트 안에 집어 넣은거라고 이해하고 있습니다.

그리고 당연히 CSR 방식이니까 처음 클라이언트가 페이지를 요청했을 때 서버는 빈 뼈대인 HTML에 JS에 접근할 수 있는 링크만을 포함해서 브라우저에 전달하고 브라우저는 다시 서버에 JS링크를 이용해 JS파일을 가져와서 그때부터 동적으로 UI를 만들어 클라이언트에 보여주는 것으로 알고있습니다. 여기서 JS링크라는 것이 아까 프론트엔드 개발자가 백엔드 개발자에게 전달한 JS파일에 접근하는 링크인 것 같은데 맞을까요?

그리고 제가 설명한 과정이 전반적으로 맞을까요? 아 그리고 HTML이나 CSS같은 파일들도 React를 이용해 만드는 건가요??

 

  1. 그리고 제가 조금 찾다보니 nginx같은 웹 서버가 따로 있더라고요.. 웹 서버가 정적인 파일 (HTML, CSS, JS)을 클라이언트에 전달하는 역할이라고 알고있습니다. 물론 WAS에서도 정적인 파일도 전달할 수 있지만 웹서버와 WAS로 나누는 게 더 낫다고 하더라고요.

그럼 저희의 library-app은 nginx나 apache같은 웹 서버를 이용하지 않고 WAS에서 바로 화면을 클라이언트에 전달하는 건가요??

제가 아직 개념이 부족해서 설명이 이상할겁니다..ㅜ

그래도 답변 부탁드리겠습니다...!!

JMJ님의 프로필 이미지
JMJ

작성한 질문수

질문하기