Day1 - 웹개발 기초(1)
프론트엔드와 백엔드
프론트엔드
클라이언트(인터넷 브라우저, 모바일 앱 등)와 직접적으로 소통하는 영역.
직접 눈으로보고 조작할 수 있다.
UI(사용자 인터페이스)/UX(사용자 경험)이 두가지를 담당하게 된다.
백엔드
서버와 직접적으로 소통하는 영역.
이 부분은 클라이언트에게는 보이지 않는다.
서버에서 기능을 처리(비즈니스 로직)하고, 데이터를 관리(데이터베이스)하며 그 결과를 클라이언트에 보낸다(API 응답).
과거
과거에는 웹마스터가 백엔드, 프론트엔드를 전부 담당하였다.
이를 '웹개발'이라 칭하였다.
현재
점점 서비스의 규모가 커지면서 영역의 분리가 필요해졌다.
백엔드와 프론트엔드가 별개의 서버에서 돌아가게 되면서,
프론트엔드 개발자, 백엔드 개발자의 구분이 생기게 되었다.
웹(WEB)
World Wide Web(WWW)의 약칭.
전 세계 컴퓨터들이 '인터넷'을 통해 데이터를 공유할 수 있는 거대한 데이터 공간.
인터넷
전세계 컴퓨터들을 물리적으로 연결하는 거대한 그물망.
web의 3요소
- 주소 (URL)
- 웹에 존재하는 '고유 주소'
- 규칙 (HTTP)
- Hyper Text Transfer Protocol
- 웹에서 사용하는 통신 규약
- HTTP를 통해 요청과 응답을 주고 받음
- 콘텐츠 (HTML)
- 주소와 통신규칙 아래 전달되는 실제 콘텐츠
- 주 콘텐츠는 HTML로 구성된 문서
HTML
HyperText Markup Language 의 약자
HyperText : 서로 다른 HTML 페이지간 이동이 가능한 텍스트
Markup Language: 클라이언트에게 의미와 구조를 알려주는 언어
태그 (Tag) : 문서의 특정 부분을 마크업하는데 사용되는 기본적인 단위.
속성 (attribute) : 테그에 대한 세부설정.
요소 (Element) : 태그의 속성이 합쳐져 실제 웹페이지를 구성하는 완전한 요소.
CSS
Cascading Style Sheets의 약자로 계층적 스타일 문서라는 뜻이다.
계층적으로 HTML을 class에 속성을 부여하여 스타일을 표현한다.
box model
content > padding > border > margin
content : 실제 내용
padding : 안쪽 여백
border : 테두리
margin : 바깥쪽 여백
Display 속성
- display: block : 한줄 전부 차지
- display: inline : 자기 크기만큼 차지하며 앞으로 붙는다
- display: flex : 자식 요소들을 정렬하난 가장 현대적이고 강력한 방식. 요소들을 가로로 나란하게 배치하게 됨.
- display: none : 요소들을 화면에서 아예 사라지게 만듦.
Javascript
클라이언트에서 실행되는 프로그래밍 언어.
사용자의 활동과 입력 값에 따라 동적으로 동작하는 기능을 담당함.
자바스크립트 구성 요소
1. 변수 : 값을 저장하는 곳.
- cosnt : 값이 변하지 않는 상수
- let : 값이 변하는 변수
2. 함수 : 여러 개의 명령어를 하나로 묶어 '이름표'를 붙인 재사용가능한 기능 모음.
3. 이벤트 리스너 : 사용자의 행동을 감지하고 특정 이벤트가 발생했을 때 지정된 함수가 실행되도록 함.
4. 돔 콘트롤 (돔 제어)
5. 자료형
자바스크립트 주요 기능
- 이벤트 처리(Event Handling)
- 문서 제어(DOM Control) : HTML 값 읽고 쓰기
- 서버와의 통신(HTTP communication) : request 및 response 주고받기
느낀점
과거 백엔드와 프론트엔드의 구분이 없었다는 역사는 처음 알았다.
기존에 알고 있던 지식을 리마인드할 수 있는 기회와 새로운 지식을 알 수 있는 기회였다.
오늘 공부는 자신의 분야에만 한정되지 않고 관련 분야의 기초 지식의 필요성을 깨닫게 되는 단초가 되었다.
