백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

 백엔드 개발자가 알아야 할 FE, 
‘진짜 핵심’만 빠르게 콕콕 알려드립니다! 

초보 백엔드 개발자 주목! 
혹시 이런 고민하고 있나요?

그래서, 이 강의에서는!

• ✅ 백엔드 개발자가 아주 빠르게 프론트엔드 개발에 입문할 수 있도록 강의를 구성했습니다.
• ✅ 필요한 수준의 기능 구현만 빠르게 해낼 수 있도록 프론트엔드를 학습하게 됩니다.

---

간단한 FE 코드만 작성할 줄 알아도 
취업과 커리어에 도움이 됩니다!

오랜 시간 백엔드 개발자로 취업하려는 분들을 멘토링하며 지켜보니, 많은 분들이 프론트엔드에 입문하기 어렵다고 느끼거나, 우선순위가 낮다고 생각하시는 것 같았습니다. 하지만 포트폴리오로서 API 서비스를 만들어 보는 것, 그리고 백엔드와 프론트엔드가 결합된 하나의 ‘웹 서비스’를 만들어보는 것은 정말 큰 차이가 있습니다.

프론트엔드를 쉽게 접근할 수 있게 도와주면, 백엔드 개발자로 취업 또는 이직을 준비하는 분들이 더 그럴듯하고 매력적인 포트폴리오를 만들 수 있게 될 거라는 생각으로 이번 강의를 기획했습니다. 

여러분의 API 개발 능력에 프론트엔드를 더해, 하나의 웹 서비스를 만들 수 있는 경험을 전해드리겠습니다!

---

이 강의만의 
특징을 살펴보세요.

자세히 알아볼까요?

'백엔드 개발자가 굳이 프론트엔드를 알아야 하는가?'라는 생각을 백엔드 취업 준비하시는 분들이 많이 하는 것 같다고 느꼈습니다. 그러나 저는 백엔드 개발자가 프론트엔드를 조금은 할 줄 아는게 오히려 백엔드 개발에 도움이 된다고 생각합니다.

따라서 이런 생각을 하는 여러분들께 백엔드 개발자가 왜 프론트엔드를 알아야 하는지 그 이유를 설명해 드립니다.

백엔드 개발자가 프론트엔드를 만들려고 할 때는 Thymeleaf 같은 템플릿 엔진을 쓸지 다른 방법을 쓸지를 고민하게 되는데요. 각 방식별 차이와 추천하는 방법에 대해 설명드립니다.

개발자 도구는 프론트엔드 개발자들의 전유물이라고 생각하시나요? 프론트엔드 개발자뿐만 아니라 백엔드 개발자에게도 필요한 개발자 도구를 사용하는 방법에 대해 설명드립니다.

UI 구성에 필수적인 HTML에 대한 기초 지식과 자주 사용되는 태그에 대해 설명드립니다. 모든 태그를 알아보는 건 아니지만, 자주 쓰이는 태그를 알고 나면 검색을 통해 대부분의 UI를 직접 구현해 볼 수 있을 거예요.

Java(자바) 문법과 비교해 JavaScript(자바스크립트)가 어떤 차이를 가지고 있는지를 기준으로, 빠르게 JavaScript 문법을 익힐 수 있도록 구성했습니다.

UI를 보기 좋게 만들기 위해 꼭 필요한 CSS 기초에 대해 설명합니다. 또한 CSS와 JavaScript를 통해 HTML 요소를 제어하기 위해 꼭 필요한 선택자 문법 중 자주 사용되는 선택자 문법을 알려드립니다.

내가 필요하다고 생각하는 UI가 뭐고, 그 UI를 적용하려면 어떻게 검색해야 하고, 검색해서 나온 CSS 속성을 개발자 도구에 테스트해본 다음 소스 코드에 반영하는 과정 그 자체에 대해 알려드립니다. 이 과정대로 진행하면 처음 적용해보는 UI 속성도 찾아서 적용할 수 있을 거예요.

그럴듯한 UI는 처음부터 직접 만들기 어렵겠죠? 널리 사용되는 프론트엔드 프레임워크인 부트스트랩(Bootstrap)을 활용해 UI를 꾸미는 방법도 알아봅니다.

ChatGPT가 등장한 후 프론트엔드 개발이 더 쉬워졌습니다! 실무에서도 체감하고 있는 내용인 만큼, 프론트엔드를 처음 다루는 분들도 ChatGPT를 활용하면 좀 더 쉽게 UI를 개발할 수 있을 겁니다.

물론 프론트엔드에 대한 기초 지식이 있어야 ChatGPT도 활용할 수 있어요. 프론트엔드에 대한 기초 지식은 이 강의에서 알려드립니다. 그리고 프론트엔드 기초 지식이 바탕이 된 상태에서 ChatGPT를 활용하여 쉽고 빠르게 프론트엔드 코드를 작성해보세요.

---

Q&A 💬