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

안녕하세요, tmdwns1294님!! 좋은 질문 남겨주셔서 감사합니다! 😊 저도 프론트엔드 개발자가 아니지만, 최대한 알고 있는 부분을 위주로 말씀드려 보겠습니다.

도서관리 애플리케이션 화면은 제공해주셨는데 사용자 등록란에 이름과 나이를 입력하고 저장을 누르면 POST 메소드가 연결되고 목록에 들어가면 GET, 수정을 누르면 UPDATE, 삭제를 누르면 DELETE 메소드가 연결되는 것은 프론트엔드 작업 과정에서 어떠한 설정을 해주셔서 자연스럽게 되는건가요?

프론트는 기본적으로 3가지 언어로 이루어져 있습니다!

• HTML

  • 화면의 뼈대를 담당합니다. 화면에 보이는 버튼을 여기서 담당하죠.

  • 건물로 치면, 벽 구조, 기둥 같은걸 생각하시면 됩니다.

• CSS

  • 화면의 디자인을 담당합니다. 버튼의 디자인, 배치 등을 담당합니다.

  • 벽지나 바닥의 색감 등을 생각하시면 됩니다.

• JavaScript (JS)

  • 화면의 동작을 담당합니다. 실제 API를 호출하는 것 같은 기능을 여기서 담당하죠.

  • 자동문, 전기장치 같은걸 생각하시면 됩니다.

그리고 이 3가지 언어로 코딩을 하게 되는데요!

결론적으로 화면은, HTML로 버튼을 만들고 CSS로 버튼을 디자인하고, JS로 사용자가 특정 버튼을 눌렀을 때 API를 호출하게 코딩을 하는 방식이라고 보시면 되겠습니다!

그 과정도 공부하고싶은데 자바스크립트와 리액트까지 공부하면 될까요?

말씀해주신 리액트의 경우는 프론트엔드 개발을 도와주는 라이브러리라고 생각하시면 되는데요! 이 역시 내부적으로는 HTML, CSS, JS를 함께 사용하고 있습니다.

또한, 리액트가 현재 프론트엔드 개발에서 가장 많이 사용되는 기술이긴하지만, 진행하시려는 개인 프로젝트의 '화면'이 간단하고, 서버 공부에 집중하고 싶으신 경우, 리액트를 학습하시는 것도 쉽지 않으실 수 있기 때문에, 리액트를 사용하지 않고 단순 HTML, CSS, JS만을 사용해서 API를 호출하는 화면을 만드실 수도 있습니다.

관련해서는

• 생활코딩의 ajax 부분과

  • https://opentutorials.org/course/3281

  • 무료 강의 이고, HTML, CSS, JS 만을 사용해 ajax 라는 개념을 익힙니다. ajax 라는 개념이 API를 호출하는 기본 개념이에요!

• 위 강의에서 사용한 fetch 함수를 이용해 API를 호출하는 코드를

  • https://www.daleseo.com/js-window-fetch/

살펴보시면 도움이 되실 수 있을 것 같습니다! 😊

답변이 도움이 되었으면 좋겠습니다.

관련해서 더 궁금하신 점 있으시면 편하게 질문 남겨주세요!! 🙏

안녕하세요, 인프런 AI 인턴입니다.
tmdwns1294님, 스프링 부트와 관련된 복습 및 추가 학습에 대해 질문해주셔서 감사합니다.

POST, GET, UPDATE, DELETE 등의 HTTP 메소드는 클라이언트(브라우저)와 서버 간의 통신을 위해 사용되는 요청 메소드입니다. 프론트엔드에서는 HTML 폼을 사용하여 POST 메소드로 데이터를 전송하거나, JavaScript를 통해 XMLHttpRequest 또는 Fetch API 등을 이용하여 서버로 HTTP 요청을 보냅니다.

리액트(React)나 자바스크립트(JavaScript)를 이용하면 사용자의 요청에 따라 서버에 다양한 메소드로 데이터를 전달하고, 서버로부터 데이터를 받아 화면에 표시하는 등의 동적인 웹 애플리케이션을 구현할 수 있습니다.

따라서 프론트엔드 작업 과정에서 HTTP 메소드를 자연스럽게 처리하려면 HTML과 자바스크립트의 기본 지식뿐 아니라, 사용하고자 하는 프론트엔드 프레임워크 또는 라이브러리에 대한 이해가 필요합니다. 리액트를 학습하시면서 상태 관리, 컴포넌트 기반 개발, 사용자 이벤트 처리 등에 대해 배울 수 있습니다.

이와 함께 자신만의 프로젝트를 만들고 싶으시다면 클라이언트 사이드에서의 데이터 처리 뿐만 아니라, 백엔드 서버에서의 데이터 처리, API 설계, 데이터베이스 연동 등 백엔드 개발에 필요한 항목들에 대해서도 학습하셔야 합니다. 스프링 부트는 이러한 백엔드 개발 과정을 비교적 쉽게 할 수 있도록 도와주는 프레임워크입니다.

스프링 부트 애플리케이션을 개발하는 것에 대해 더 알고 싶으시다면 Spring Boot Reference Documentation에서 제공하는 Getting Started 섹션을 읽어보실 것을 추천합니다. 첫 번째 애플리케이션을 개발할 때는 start.spring.io를 이용하여 필요한 의존성을 가진 프로젝트 구조를 생성하고, 바로 코딩을 시작할 수 있습니다.

프로젝트를 처음부터 끝까지 만들어보고 싶은 경우, 다음과 같은 순서로 학습을 진행해볼 수 있습니다:
1. 자바스크립트 기본 학습(ES6+ 문법, 비동기 처리, DOM 조작 등)
2. 리액트를 통한 프론트엔드 개발 학습(Component, Props, State, Hooks, 라우팅 등)
3. 스프링 부트를 통한 백엔드 개발 학습(MVC 패턴, RESTful API 설계, 데이터베이스 연동 등)
4. 프론트엔드와 백엔드 통합 및 전체 애플리케이션 흐름 이해
5. 완성된 애플리케이션의 배포와 관련된 지식 습득(CI/CD, 서버 환경 등)

도움이 될 만한 문서와 가이드에 대한 링크를 다시 제시해드립니다:
- 스프링 부트 입문 가이드
- start.spring.io 사용 가이드
- 스프링 부트 참고 문서

학습 과정에서 궁금하신 점이 있으면 언제든 질문해주세요.
진도에 맞추어 차근차근 학습하시면서 자신만의 도서 관리 애플리케이션을 만드는 경험을 꼭 해보시기 바랍니다!