codesche’s blog

/

/

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

/

백엔드 개발자

codesche’s blog

/

/

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

/

백엔드 개발자

Share

백엔드 개발자

벡엔드 개발자에 의한, 벡엔드 개발자들을 위한 프론트엔드 강의

Search

초창기 웹

Thymeleaf 

프론트엔드와 백엔드의 기본 구성도

1. Thymeleaf vs HTML + RestController

우리가 만들었던 API 서버는 어떤 위치에 있나?

웹 브라우저, 스마트폰 앱에서의 프론트엔드

2. 백엔드와 프론트엔드

모든 백엔드 개발자가 프론트엔드 개발자와 일하는 것은 아니다.
(기업에 따라 다를 수 있음)

사용자가 어떤 형태로 서비스를 사용하는지 고려하지 않으면 좋은 API를 만들기 어려움.

면접관의 입장에서 고려했을 때

프론트엔드까지 개발할 줄 알아야 혼자 힘으로 서비스를 만들어 볼 수 있음.

HTTP를 이해하는데 도움을 줄 수 있음.

3. 백엔드 개발자가 프론트엔드를 알면 좋은 이유

CLEAN CODE 는 지양

Vanilla JavaScript

예제

4. 이 강의에서 지향하는 프론트엔드 코드

IDE : Intellij Community Version

github page

5. 실습 진행 방법

웹 브라우저와 HTML

HTML은 태그로 이루어져 있다.

HTML 문서의 기본 구조

주석

6. HTML의 기본 구조

meta: 인코딩, 검색 엔진을 위한 페이지 설명

실습

F12, 네트워크 쪽

7. head 태그에 포함되는 주요 태그들

새 창으로 열기

img 태그

script 태그 - 웹 페이지에 JavaScript 코드를 넣을  수 있음

8. body 태그에 포함되는 주요 태그들