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

안녕하세요! title.jjk님! 🙂 좋은 질문 주셔서 감사합니다.

제가 프론트에 대한 지식이 많이 부족하고 저희 프로젝트에서는 강사님이 주신 프론트를 그대로 가져다 사용하고있기 때문에 프론트가 어떤식으로 구성되어있는지 잘 모르겠습니다..ㅠ

프론트에 관한 설명은 <추가 - 스프링 부트의 정적 파일 처리>에서 말씀드리고 있는데요!

요약하자면, "react.js"로 프론트를 만들었고, 그 프론트를 build 하여 나온 결과물을 static 폴더 아래에 적절히 배치해 둔 형태 입니다!

관련해서는 "spring boot react 함께" 라는 키워드로 검색해보시면 보다 많은 자료를 찾으실 수 있어요!

다만, 당연하게도 react.js를 직접 코드를 작성하며 스프링 부트와 연동해보지 않는 이상 잘 와닿지 않을 수 있다고 생각합니다 🥺 필요하신 경우 이메일을 알려주시면, 프론트엔드 원본 코드 (react.js)를 보내드리고 있어요! 😊

[혹시 저희 프로젝트에서 프론트 단을 어떻게 하면 수정하거나 추가할 수 있는지 알 수 있을까요? 아니면 변경이 어렵다면 백엔드 개발자가 프로젝트를 진행하면서 간단하게 프론트를 구현할 수 있는 방법이 있을까요?]

가장 간단한 방법은 원본 코드를 받으셔서, react 코드를 이해하고 간단히 변경해보는 방법이 있습니다.

위의 방법이 아니라면, 직접 html, css, js로 화면을 구성하여 static 폴더에 넣는 방법도 있긴한데, 기존 프론트와 호환시키기에는 어려움이 있으실거에요! 🥺

일반적으로 백엔드 개발자가 프로젝트를 진행하며 프론트를 간단히 구현하는 경우, 백엔드 개발자가 익숙한 기 술 스택을 사용하는 편입니다. 비중이 가장 높은 경우는 그래도 react.js 인 것 같다는 생각은 있어요! 🙂

프론트엔드 원본 코드가 필요하시면 이메일 남겨주세요!

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

안녕하세요, 인프런 AI 인턴입니다.

title.jjk님, 프로젝트 진행 중 프론트엔드 부분에 대한 추가 기능 구현에 관심이 있다는 점, 정말 멋진 도전이라고 생각합니다! 백엔드 개발자가 프론트엔드 부분도 이해하고 개발할 수 있다면, 개발 영역에 있어 더 넓은 시야를 가질 수 있게 됩니다.

프론트엔드 부분을 수정하거나 추가하는 방법에 대해서는 여러 접근 방식이 있습니다. 많은 백엔드 개발자들이 기본적인 프론트엔드 지식을 활용하여 기능을 추가하거나 확장합니다. 이를 위해 HTML, CSS, JavaScript의 기본 지식이 필요하며, 프레임워크나 라이브러리(예: React, Angular, Vue.js 등)를 활용할 수도 있습니다.

기존 프로젝트에서 프론트엔드 부분을 어떻게 수정하거나 추가할 수 있는지에 대한 질문에 답변하기 위해, 유사한 질문에 대한 과거 답변을 찾아보았습니다. 그 중에서도 특히 백엔드 개발자가 프론트엔드를 이해하고 수정하거나 추가하는 방법에 관한 내용을 찾았습니다.

아래는 프론트엔드 관련하여 백엔드 개발자가 혼자 구현하고자 할 때 참고할 만한 기존의 지식공유자님의 답변입니다:

• 프론트엔드 부분 관련 질문에서는 스프링 부트와 정적 파일 처리, React를 사용한 프론트엔드 개발 및 빌드 과정에 대해 설명하고 있습니다. 이 답변은 프론트엔드 부분을 어떻게 수정하거나 추가할 수 있는지에 대한 궁금증에 도움이 될 수 있습니다.
  

프로젝트에서 프론트엔드 부분을 수정하거나 확장하는 것은 다양한 방법과 접근으로 가능합니다. 예를 들어, 간단한 정적 페이지부터 시작하여 서버로 데이터를 전송하고 받는 동적인 페이지까지 만들 수 있으며, Ajax나 Fetch API 등을 활용하여 백엔드와의 통신을 구현할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.