home
Backend
///
home
Backend
Frontend
Database & Infra
Project
///

백엔드 개발자

Search
•
초창기 웹
◦
웹 브라우저, 크롬도 없었음
◦
더 나은 사용자 경험을 위해 추가된 CSS, javascript
•
Thymeleaf
1. Thymeleaf vs HTML + RestController
•
우리가 만들었던 API 서버는 어떤 위치에 있나?
•
웹 브라우저, 스마트폰 앱에서의 프론트엔드
◦
기초는 HTML, CSS, Javascript
2. 백엔드와 프론트엔드
•
모든 백엔드 개발자가 프론트엔드 개발자와 일하는 것은 아니다. (기업에 따라 다를 수 있음)
•
사용자가 어떤 형태로 서비스를 사용하는지 고려하지 않으면 좋은 API를 만들기 어려움.
•
면접관의 입장에서 고려했을 때
◦
프론트엔드는 해본 적 없고 백엔드 개발만 해본 사람
◦
프론트엔드를 잘하는 건 아니지만 본인이 만들 포트폴리오 API 프로젝트에 프론트엔드를 덧붙여 하나의 온전한 서비스를 만들어본 사람
◦
당연히 후자를 선호할 수밖에 없음
•
프론트엔드까지 개발할 줄 알아야 혼자 힘으로 서비스를 만들어 볼 수 있음.
•
HTTP를 이해하는데 도움을 줄 수 있음.
3. 백엔드 개발자가 프론트엔드를 알면 좋은 이유
•
CLEAN CODE 는 지양
•
Vanilla JavaScript
•
예제
4. 이 강의에서 지향하는 프론트엔드 코드
•
IDE : Intellij Community Version
•
github page
◦
5. 실습 진행 방법
•
웹 브라우저와 HTML
◦
개발자 도구 (F12)
•
HTML은 태그로 이루어져 있다.
◦
form, input - 이름
◦
action, method - 속성
◦
“./article”, “post” - 값
<form action="./article" method="post"> <input type="text" name="title"> <input type="text" name="content"> </form>
JavaScript
복사
•
HTML 문서의 기본 구조
•
주석
6. HTML의 기본 구조
•
meta: 인코딩, 검색 엔진을 위한 페이지 설명
◦
인코딩: 파일 내용을 어떤 방식으로 기록할 것인가에 대한 방식
•
실습
•
F12, 네트워크 쪽
7. head 태그에 포함되는 주요 태그들
•
새 창으로 열기
•
img 태그
8. body 태그에 포함되는 주요 태그들