Part 1

개요

프론트엔드 구성요소

HTML

HyperText Markup Language.
웹 페이지의 전체적인 구조(리스트, 버튼, 텍스트 등)를 만드는 언어이다.

CSS

Cascading Style Sheets.
HTML에서 정의된 요소들의 스타일(폰트, 모양, 위치 등)을 지정하는 언어이다.

JS

JavaScript.
HTML+CSS에서 정의된 요소들의 동적 처리를 담당하는 언어이다.

웹

웹 애플리케이션의 동작 원리

1. (클라이언트 - 주로 브라우저) 서버로 특정 주소에 대한 요청을 보낸다.
2. (서버) 받은 요청에 대한 응답(HTML 먼저)을 클라이언트로 보내준다.
3. (클라이언트) HTML 응답을 받으면 그 페이지의 추가정보(CSS, JS)를 요청한다.
4. (서버) 나머지 추가정보들을 응답으로 보내준다.

브라우저 구조

1. 창 (window) - 프로그램 자체에 해당하는 영역
2. 탭 (tab) - 창 내에서 여러 페이지를 띄울 수 있게 해주는 영역
3. 주소창 (address bar) - 말 그대로 주소를 입력하는 영역
4. 뷰포트 (viewport) - 탭 내에서 웹 페이지가 렌더링되는 전체 영역

웹에서의 이미지

웹에서 이미지를 표현할 때 크게 두 가지 방식을 사용한다.

1. 비트맵

   • 픽셀로 이루어진 그리드 형태 이미지
   • 각 픽셀은 특정 색상을 가짐
   • 해상도에 따라 선명도가 결정됨. 픽셀마다 색상 정보를 담기 때문에 파일 크기가 크고, 이미지를 확대하면 픽셀이 보이거나 흐리게 보일 수 있음
   • 대표적인 이미지 형식: JPEG, PNG, BMP 등

2. 벡터

   • 수학적인 모양과 경로로 나타내는 이미지
   • 선, 곡선, 다각형 등의 기하학적 요소로 이루어져있음
   • 이미지를 확대해도 선명도가 유지되고, 파일 크기가 작음
   • 대표적인 이미지 형식: SVG

HTML

DOCTYPE

DOCTYPE(DTD): Document Type Definition.
현재 문서/파일이 어떤 HTML 버전을 사용하는지 명시하는 키워드.

tags

1. html: HTML 문서의 범위(처음과 끝)를 나타내는 태그
2. head: HTML 문서의 정보를 나타내는 태그
   • meta: 아래 정보 외의 나머지 정보를 제공하는 태그
     • charset: 문자를 어떻게 인코딩할 지 지정
   • title: 페이지의 제목을 지정하는 태그
   • link: 외부 파일(대부분 css)을 불러오는 태그
   • script: 외부 js 파일을 불러오는 태그
   • style: css 스타일을 html 파일 내에서 지정할 수 있게 해주는 태그
3. body: HTML 문서의 구조를 나타내는 태그

HTML

HTML은 요소로 이루어진 문서이다.
요소(element): 앞뒤에 태그로 감싸진 하나의 개체.

태그

빈 태그

기본 index.html 파일에 meta 태그의 경우 닫히는 태그가 존재하지 않는데, 이를 빈(empty) 태그라고 한다.
빈 태그는 닫히는 꺽쇠 전에 '/'를 붙여주어도 되고 안 붙여줘도 되는데 되도록이면 붙여주는게 좋다.

속성

열리는 태그에 요소의 속성을 지정해줄 수 있다.
<script src="script.js"></script>
위와 같은 식으로 원하는 속성(src)에 값(script.js)을 지정해줄 수 있다.

대부분의 빈 태그들은 별도의 설정 없이는 사용할 수 없기 때문에 태그마다 필수적으로 설정해줘야 하는 속성들이 존재한다.

Inline vs. block

Inline

• 좌에서 우로(수평) 쌓인다.
• 세로/가로 사이즈가 내용에 맞춰 최대한 줄어든다.
• style 속성으로 사이즈를 명시해도 적용되지 않는다.
• 내/외부 여백은 가로 여백만 적용된다.
• 자식 요소로 블록 요소를 가질 수 없다.

Block

• 위에서 아래로(수직) 쌓인다.
• 부모 요소에 따라 길이는 최대한 늘어나고 높이는 최대한 줄어든다.
• style 속성으로 사이즈를 원하는만큼 수정할 수 있다.
• 내/외부 여백 모두 적용된다.
• 자식 요소로 블록/인라인 요소를 가질 수 있다.

핵심 요소

div: (block) Division. 구분을 위해 사용되는 요소.
h1: (block) Heading. 해당 범위의 제목을 의미하며, h 뒤의 숫자(1~6)에 따라 중요도(크기) 설정 가능.
p: (block) Paragraph. 문장 구분을 위해 사용되는 요소.
img: (inline) Image. 이미지를 삽입하는 요소. 속성으로는 src(이미지 경로)와 alt(이미지 로드 실패 시 대체 텍스트)가 있음.
ul: (block) Unordered list. 순서가 필요없는 집합을 의미하는 요소. 하위 요소(항목)로 li 요소를 1개 이상 가짐.
a: (Inline) Anchor. 특정 페이지로 이동하는 하이퍼링크를 지정하기 위해 사용되는 요소. 속성으로 href(하이퍼링크 레퍼런스-실제 주소)와 target(링크 이동 시 열릴 탭)을 가짐.
span: (Inline) 구분을 위해 사용되는 요소.
br: (Inline) Break. 줄 바꿈을 위해 사용되는 요소.
input: (Inline & Block) 글자 요소이지만 상자 요소의 특징도 사용할 수 있음. 수평으로 쌓이지만 가로/세로 사이즈와 여백을 지정할 수 있음. 속성으로는 type(입력받을 데이터 타입), value(디폴트로 보여지는 값), placeholder(입력값에 대한 힌트), disabled(입력할 수 없음)가 있음.
label: (Inline) input 요소와 텍스트를 묶을 때 사용됨.
table: (Block) 행(tr)과 열(td)로 이루어진 집합.

전역 속성

모든 태그에 지정할 수 있는 속성.

title: 요소에 제목을 지정 (해당 요소에 커서를 올려놔야 보이는 제목)
style: 요소에 스타일을 입힘
class: 요소에 이름을 지정 (중복 가능)
id: 요소에 이름을 지정 (중복 안됨)
data-name: 요소에 변수명과 값을 지정하면 js에서 그 변수에 접근 가능 (querySelectorAll을 통해 해당 요소의 태그에 해당하는 요소들을 전부 가져와서, 각 요소의 dataset에서 name에 해당하는 변수에 접근이 가능함)

CSS

기본 문법

div {           /* 선택자: 스타일을 적용할 대상 */
  color: red;   /* 색상: 빨강 */
  margin: 20px; /* 외부 여백: 20픽셀 */
}

선언 방식

내장 방식

HTML 파일의 head 영역에 style 태그로 작성하는 방법.
장점: HTML에서 바로 스타일 적용 가능
단점: 스타일 정보가 많아지면 가독성 저하 및 처리가 복잡함

인라인 방식

HTML 파일의 요소에 style 속성으로 선언하는 방법.
단점: 우선순위 문제 때문에 코드의 유지보수가 어려움

링크 방식

HTML 파일의 head 영역에 link 태그로 외부 CSS 파일을 참조해오는 방법. (병렬)

import 방식

@import url("경로")
CSS 파일에서 외부 CSS 파일을 참조해오는 방법. (직렬)

선택자

기본 선택자

1. 전체 선택자(*): 모든 요소를 선택함
2. 태그 선택자(태그 이름): 지정한 태그의 요소를 모두 선택함
3. 클래스 선택자(.클래스 이름): 지정한 클래스 속성값의 요소를 모두 선택함
4. 아이디 선택자(#아이디 이름): 저정한 아이디 속성값의 요소를 한 개 선택함

복합 선택자

기본 선택자들을 조합해서 사용하는 선택자.

1. 일치 선택자(예: tag.class): tag 태그이면서 class 클래스인 모든 요소를 선택함
2. 자식 선택자(예: tag > .class): tag 태그의 자식 중 class 클래스인 모든 요소를 선택함
3. 하위 선택자(예: tag .class): tag 태그의 후손 중 class 클래스인 모든 요소를 선택함
4. 인접 형제 선택자(예: .class + tag): class 클래스의 형제 중 tag 태그인 요소 중 바로 다음 요소를 선택함
5. 일반 형제 선택자(예: .class ~ tag): class 클래스의 형제 중 tag 태그인 요소 중 다음 요소를 모두 선택함

가상 클래스 선택자

대상 요소에 대해 어떠한 행동을 했을 때 동작하는 개념.
기본 선택자 끝에 ':'를 붙여서 가상 클래스 선택자를 지정할 수 있다.

1. hover: 마우스의 커서가 해당 요소에 올라가 있을 때 스타일이 적용됨
2. active: 마우스로 해당 요소를 클릭하고 있을 때 스타일이 적용됨
3. focus: 해당 요소가 선택됐을 때 스타일이 적용됨 (input 등 입력을 받을 수 있는 요소 한정. 그 외 요소들은 tabindex 속성으로 focus를 가능하게 할 수 있다)
4. first-child(.class tag:first-child): class 클래스를 가진 요소의 자식 요소 중 tag 태그인 자식 중 첫째를 선택함
5. last-child: 위의 반대
6. nth-child(2)(.class *:nth-child(2)): class 클래스를 가진 요소의 하위 요소 전체 중 2번 째 자식을 선택함 (숫자에 n이 붙으면 2의 배수 번째에 해당하는 요소들을 선택함; 2n+1 등도 가능함; n+2 같은 경우에는 2번째 이상 요소들을 전부 선택함)
7. 부정 선택자(.class *:not(span)): class 클래스를 가진 요소의 자식 중 span 태그 요소가 아닌 요소들을 전부 선택함

가상 요소 선택자

가상의 인라인 요소를 만들어 실제로 삽입할 수 있음.

1. before(.class::before { content: "앞!"; }): class 클래스를 가진 요소의 내부 앞에 "앞!"을 삽입
2. after: 위의 반대

before, after 가상 요소 선택자의 경우 content라는 속성은 무조건 있어야 한다(빈 문자열이라도).
인라인 요소 삽입이기 때문에 사이즈, 여백 등을 지정해줄 수 없지만 display라는 속성에 값을 block으로 지정해주면 가능해진다.

속성 선택자

1. 속성 선택자([type]): type이라는 속성을 가진 요소를 전부 선택함
2. 속성-값 선택자([type="password"]): type이라는 속성과 그 값에 해당하는 요소를 전부 선택함

스타일 상속

강제 상속

본래는 부모 요소의 글자나 문자와 관련된 스타일은 웬만하면 상속이 된다.

일반 상속이 되지 않는 속성들에 한해서 강제 상속을 할 수 있다.

부모 요소에 존재하는 스타일 속성에 대해서 같은 속성을 자식 요소에 정의하고 값에 inherit을 지정하면 부모 요소의 스타일 속성과 같은 값이 들어간다.

선택자 우선순위

우선순위 및 점수

!important(99999999) > 인라인 선언(1000) > id 선택자(100) > class 선택자(10) > tag/요소 선택자(1) > 전체 선택자(0)

body는 상속 x

!important는 지정하기 원하는 속성의 값 뒤에 붙이는 값이다.

복합 선택자들의 경우 사용되는 모든 기본 선택자들의 점수를 합산해서 비교하는 것이 편하다.

속성

width/height

• width, height: 기본값으로 auto(inline 요소의 경우 둘다 최소; block 요소는 width 최대, height 최소)
• max-width, max-height: 최대 픽셀 제한 (none: 제한 없음)
• min-width, min-height: 최소 픽셀 제한 (0: 제한 없음)

단위

• em: 요소의 폰트 사이즈 (예: font-size: 16; width: 20em == 16*20px)
• rem: 루트 요소(html)의 폰트 사이즈
• vw/vh: 뷰포트 기준 길이/높이 퍼센티지

여백

• margin: 요소의 외부 여백을 지정 (auto: 가운데 정렬)

  margin: 10px; /* 상하좌우 외부 여백 10px */
  margin: 10px 20px; /* 상하 좌우 */
  margin: 10px 20px 30px; /* 상 좌우 하 */
  margin: 10px 20px 30px 40px; /* 상 우 하 좌 (시계 방향) */
  margin-top(bottom/left/right): 10px;

  음수값도 사용 가능. 외부 여백 축소.

• padding: 요소의 내부 여백을 지정 (auto: 가운데 정렬) margin과 마찬가지 방식으로 지정할 수 있음.

Part 4

리액트

용어

리액트: 사용자 인터페이스를 구현하기 위한 효율적인 선언적 자바스크립트 라이브러리.
프레임워크: 특정 앱/서비스를 만들기 위해 필요한 모든 것을 포함.
라이브러리: 특정 기능의 모듈화.

프레임워크는 필요에 따라 많은 라이브러리를 포함할 수 있다.

리액트 컴포넌트: 리액트 앱의 가장 작은 구성 요소.
예) 인스타그램의 컴포넌트로는 포스트, 검색창, 스토리, 프로필 등등이 있다.

1. 클래스형 컴포넌트 (hooks 발표 이전)
2. 함수형 컴포넌트 (hooks 발표 이후)

JSX

Javascript Syntax Extension.
주로 리액트에서 UI를 나타기 위해 사용함.
JSX는 자바스크립트와 HTML 구조를 같이 사용할 수 있다.
const hello = <h1>Hello World!</h1>;
바벨을 통해 jsx를 기존의 UI 렌더링 방식인 React API 방식으로 변환할 수 있다.

Props

Properties.
부모 컴포넌트에서 자녀 컴포넌트로 데이터를 전달하는 방법.
자녀 컴포넌트에서는 값을 변경할 수 없고 부모 컴포넌트에서 state를 변경하므로써 가능하다.

State

State는 데이터를 포함하는 객체이며, 데이터에 변화가 있을 때 화면이 다시 렌더링 된다.
State는 컴포넌트 내에서 관리된다.

자녀 컴포넌트로 데이터를 보내는 props와 달리 state는 해당 컴포넌트 내부에서 데이터를 넘겨줄 때 사용되며 값의 변경이 가능하다.

Part 9

Redux

State 관리를 도와주는 라이브러리.
리덕스 데이터 흐름은 일방향이다. action -> reducer -> redux store.

Action: 자바스크립트 객체. 어떤 작업을 수행하는지 유형을 지정하는 type 속성이 있으며 payload 속성을 통해 일부 데이터를 저장소에 보낼 수 있다.
Reducer: state의 변경 사항을 결정하고 변경된 state를 반환하는 함수.
Redux store: action을 통해 저장소의 데이터 state을 변경할 수 있다.

Redux Provider

Provider 컴포넌트는 하위 컴포넌트들에서 store에 접근하게 할 수 있는 컴포넌트이다.
보통 앱의 최상위 수준에서 이 컴포넌트를 렌더링한다.

useSelector, useDispatch

Provider로 둘러쌓인 곳에서 store에 접근하는 방법.

useSelector: 값을 가져오는 훅
useDispatch: action을 보내는 훅

Redux middleware

리덕스의 데이터 흐름에서 reducer에 도달하기 전에 위치하는 중간자이다.
주로 로깅, 충돌 보고, 비동기 API와의 통신 등에 사용된다.

Redux thunk

리덕스를 사용하는 앱에서 비동기 작업을 처리할 때 주로 사용된다.