kimtaehoon_98.log

TIL #35

Mon, 29 May 2023 16:46:20 GMT

Section1(lsn1~3)

lsn1

console.log('로그 - 기본적인 출력')
console.info('로그 - 기능적으로는 log와 같음. 사용하기에 따라 용도 구분 가능')
console.warn('경고 - 문제가 될 수 있는 부분')
console.error('오류 - 에러 발생 상황')

lsn3

let

let은 값의 의미를 나타내며, 재활용이 가능하다. 변경되는 상태를 기킨다.

undefined: '아직 값이 정해지지 않았다'라는 '값'

let x = 1
let y = x
// x가 가진 값을 y에 할당
console.log('변경 전', x, y)

x = 'Hello!'
console.log('변경 후', x, y)
// C 등의 언어와 달리, 메모리상 가리키는 위치가 변경
// 차지하는 자리가 다른 크기의 (자료형이 다른) 데이터가 재할당될 수 있으므로

const

const는 담긴 값이 바뀔 수 없으며, 흔히 대문자로 명명 (여러 곳에서 사용 될 공통 값인 경우)

주의사항

영문, 한글 및 유니코드, 숫자 사용 가능
특수문자는 $ 또는 _
숫자로 시작할 수 없음
공백(스페이스) 사용 불가
예약어 사용 불가

TIL #34

Thu, 20 Apr 2023 18:50:14 GMT

: attr controls, attr (loop) autoplay 사용 형태도 가능, src 사용 시 type도 추가해주면 좋음
audio와 video 치환 가능 : HTML 문서 안에 다른 HTML 문서를 embed
약어(abbreviation): attr title 필요
연락처
: (물리적)주소, URL, email, 전화번호, sns 등등
(preformatted): 태그 안의 내용이 쓰인 그대로 출력됨
Document Type Declaration: DTD 선언 = 문서 형식 선언

: 브라우저에게 이 문서는 HTML5 버전으로 작성된 문서라는 것을 전달



    
    웹 문서에 관한 메타 데이터
    
    
    웹 문서에 들어갈 내용

문서의 대제목: 탭 제목에 들어가며, SEO에 매우 중요, 키워드 단순 나열 비추, 페이지마다 그에 맞게 변경, head : css연동, head :HTML 문서 내에 css코드를 사용할 때, body : HTML문서 내에 js파일을 첨부할 때 사용, 마지막에 작성해 주는 것이 좋음, body
: attr name(메타데이터 종류), content(메타데이터 값) 필요, name에서 viewport가 중요

markup 시 가장 중요한 것은 최소한의 단위로 요소를 자르는 것

TIL #33

Tue, 18 Apr 2023 18:34:14 GMT

blockquote cite='인용 사이트': 내용 전체가 하나의 인용문일 경우 사용
q(quotation): 문장 내에 들어가는 인용문일 경우 사용
cite: 인용 출처
div(division): 의미가 없으나 css 스타일링에 유용
span: 의미가 없고, text level의 일부분을 grouping해 줄 때, css 스타일링에 유용
form action='' method='': 사용자로부터 input을 받기 위한 태그, action='API 주소', method='get | post'

input type='#': type이라는 attr을 반드시 명시해야 함 (text, email, password, url, number, file ... ),
placeholder=''(attr, 공란 상태 기본 문구), maxlength=''(attr, 글자 수 제한),
minlength=''(attr, 글자 수 제한), required(attr, 무조건 채워야 함), disabled(attr, 막아둠), value=''(attr, 기본값),
max/min=''(number attr, 수의 크기 제한), accept=''(file attr, 확장자 제한)
label for='인풋id': 폼 양식에 이름을 붙히는 태그, for이라는 attr 명시해야 함
input type='radio': 여러 가지 항목 중에서 단 하나만 선택, label이랑 같이 쓰기, attr name='#'으로 그루핑하기, value 명시
input type='check-box': 여러 가지 항목 중에서 여러 개 선택, label이랑 같이 쓰기, attr name='#'으로 그루핑하기, value 명시
select: 자식 요소로 option사용, attr name은 select에만 주고 option에 value, attr multiple으로 여러 개 선택
textarea: 여러 줄에 걸쳐 글을 쓸 수 있음, attr rows='#'와 attr cols='#'를 통해 사이즈 조정 (css로 조정)
button: 버튼, attr type='#'으로 button, submit(제출), reset(리셋) 명시

table: tr으로 가로줄부터
tr (table row): table 가로줄, 상위 태그 thead로 감싸주면 좋음
th (table header): 상위 태그 tbody로 감싸주면 좋음
td (table data): 상위 태그 tbody로 감싸주면 좋음
attr rowspan='#': 여러 칸 병합, 병합된 열은 다음 행에서 생략
attr colspan='#': 여러 칸 병합
attr scope'row|col': th에만 사용 가능, 브라우저에 인식 도움

TIL #32

Mon, 17 Apr 2023 17:13:34 GMT

HTML이 왜 중요한가

브라우저를 통해 무언가를 보기 위해서는 tag로 표현되어야 함. 웹페이지라는 것은 결국 html을 통해 표현이 된다. html이 결국 웹페이지를 통해 전달하고자 하는 모든 컨텐츠의 집합체이다.

semantic markup이 중요한 이유

문서의 구조와 정보 위계가 명확하게 보이고, SEO에 도움이 된다.

코드를 짜는 것보다 남의 코드를 읽는 것이 더 어렵다. 본인 코드도 며칠 지나면 남의 코드가 된다. div는 위계질서를 파악하는데 도움이 되지 않는다. 자기가 이 태그를 왜 썼는지 이해하고 있어야 한다.

태그 안에 어떤 문자가 오느냐에 따라 markup하고 있는 정보의 성격이 달라진다.

attr(attribute):태그 하나만으로 표현할 수 없는 정보에 부가적인 정보를 추가해준다.

h1~6 (heading): 제목을 의미하며 번호순으로 중요하다.
p (paragraph): 문단 내용
em (emphasis), strong: 문장 강조
br (line break): 줄 바꿈, 남용 x
a href (anchor): 링크, href(hypertext reference)는 필수, 외부 페이지 이동, 내부 페이지 이동 (href='#id'), 메일 작성 (href='mailto:메일@주소.com'), 전화 걸기 (href='tel:전화번호'), target='_blank'라는 attr을 쓰면 새 탭에서 열기
img src='#' alt='': src(source)는 이미지 주소, alt(alternative text)는 이미지에 대한 설명을 의미
ol (ordered list): 자식 요소는 무조건 li만 가능
ul (unordered list): 자식 요소는 무조건 li만 가능
li (list item): 모든 요소들을 각각 감싸줘야 함
dl (description list): 용어를 정의할 때, key-value로 정보를 제공할 때 사용, 자식 요소는 div / dt / dd만 가능
dt (description term)
dfn (definition)
dd (description data)

WIL #6

Sun, 19 Mar 2023 19:50:37 GMT

LifeCycle Method

LifeCycle Method(생명주기 메서드)는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라질 때 호출되는 메서드들을 의미한다. 컴포넌트에서 에러가 발생했을 때 호출되는 메서드도 존재한다. 생명주기 메서드는 클래스형 컴포넌트에서만 사용할 수 있다.

출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Mount(생성될 때)

constructor: 컴포넌트 생섯ㅇ자 메서드, 컴포넌트가 생성되면 가장 먼저 실행된다. this.props,this.state에 접근이 가능하며 리액트 요소를 반환한다.
getDerivedStateFromProps: props로부터 파생된 state를 가져온다. 즉, props로 받아온 것을 state에 넣어준다.
render: 컴포넌트를 렌더링한다.
componentDidMount: 컴포넌트가 마운트됨, 즉 컴포넌트의 첫번째 렌더링이 끝나면 호출되는 메서드이다. 이 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태이다.

Updating(업데이트할 때)

getDerivedStateFromProps: 컴포넌트의 props나 state가 바뀌었을 때도 이 메서드가 호출된다.
shouldComponentUpdate: 컴포넌트가 리렌더링을 할지 말지 결정하는 메서드이다.
componentDidUpdate: 컴포넌트가 업데이트 되고 난 후 발생한다.

Unmount(제거할 때)

componentWillUnmount: 컴포넌트가 화면에서 사라지기 직전에 호출된다. 주로 DOM에 직접 등록했었던 이벤트를 제거하고, 만약에 setTimeOut을 걸은 것이 있다면 clearTimeout을 통하여 제거한다.

React Hooks

리액트에서 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고, class없이 React를 사용할 수 있게 한다.

리액트 훅을 도입한 목적

기존의 LifeCycle Method 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다.
LifeCycle Method에는 관련 없는 로직이 자주 섞여 들어가는데, 이로 인해 버그가 쉽게 발생하고, 무결성을 쉽게 해친다.

Hook 사용 규칙

최상위에서만 Hook을 호출해야 한다.
- 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안 된다.
- 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.
리액트 함수 컴포넌트에서만 Hook을 호출해야한다.
- 일반 JS함수에서는 Hook을 호출해서는 안된다.

TIL #31

Fri, 17 Mar 2023 18:37:19 GMT

REST API

REST(Representational State Transfer) API는 다음의 구성으로 이루어져 있다.

자원(Resource): URL
행위(Verb): HTTP METHOD
표현(Representations)

특징

Uniform (유니폼 인터페이스) Uniform Interface는 URL로 지저한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일이다.
Stateless (무상태성) REST는 무상태성 성격을 갖는다. 다시 말해 작업을 위한 상태 정보를 따로 저장하고 관리하지 않는다. 세션 정보나 쿠키 정보를 별도로 저장하고 관리하지 않기 때문에 API 서버는 들어오는 요청만을 단순히 처리하면 된다. 때문에 서비스의 자유도가 높아지고 서버에서 불필요한 정보를 관리하지 않음으로써 구현이 단순해진다.
Cacheable (캐시 가능) REST의 가장 큰 특징 중 하나는 HTTP라는 기존 웹 표준을 그대로 사용하기 때문에, 웹에서 사용하는 기존 인프라를 그대로 활용이 가능하다. 따라서 HTTP가 가진 캐싱 기능이 적용 가능하다. HTTP 프로토콜 표준에서 사용하는 Last-Modified 태그나 E-Tag를 이용하면 캐싱 구현이 가능하다.
Self-descriptiveness (자체 표현 구조) REST의 또 다른 큰 특징 중 하나는 REST API 메시지만 보고도 이를 쉽게 이해할 수 있는 자체 표현 구조로 되어 있다는 것이다.
Client-Server 구조 REST 서버는 API 제공, 클라이언트는 사용자 인증이나 컨텍스트 (세션, 로그인 정보) 등을 직접 관리하는 구조로 각각의 역할이 확실히 구분되기 때문에 클라이언트와 서버에서 개발해야 할 내용이 명확해지고 서로간 의존성이 줄어든다.
계층형 구조 REST 서버는 다중 계층으로 구성될 수 있으며 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 둘 수 있고 PROXY, 게이트웨이 같은 네트워크 기반의 중간 매체를 사용할 수 있게 한다.

REST API 설계

URL은 정보의 자원을 표현해야 한다.
자원에 대한 행위는 HTTP Method (GET, POST, PUT, DELETE)로 표현한다.

get /api/posts

POST, GET, PUT DELETE 를 통해 CRUD를 구현할 수 있다.

POST: 해당 URL을 요청하면 리소스를 생성한다.
GET: 해당 리소스를 조회한다. 리소스를 조회하고 해당 document에 대한 자세한 정보를 가져온다.
PUT: 해당 리소스를 수정한다.
DELETE: 해당 리소스를 삭제한다.

TIL #30

Thu, 16 Mar 2023 16:40:59 GMT

Thunk와 인증/인가

Redux 미들웨어

리덕스에서 dispatch를 하면 action이 reducer로 전달이 되고, reducer는 새로운 state를 반환한다. 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다.

보통 Redux 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고, 또한 그 중에서도 많이 사용되고 있는 Redux 미들웨어는 Redux-thunk라는 것이 있다.

Thunk

Redux-Thunk란 Redux에서 많이 사용하고 있는 미들웨어 중 하나이다. thunk를 사용하면 우리가 dispatch를 할 때 객체가 아닌 함수를 dispatch 할 수 있게 해준다. 즉 dispatch(객체)가 아니라 dispatch(함수)를 할 수 있게 되는 것이다.

dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)

RTK에서 thunk 함수를 생성할 때는 createAsyncThunk를 이용한다. 이 때 createAsyncThunk()의 첫 번째 자리에는 action value, 두 번째에는 함수가 들어간다. 두 번째로 들어가는 함수에서 2개의 인자를 꺼내 사용할 수 있는데, 첫 번째 인자는 component에서 보내준 payload이고, 두 번째 인자는 thunk에서 제공하는 여러가지 기능이다.

인증 / 인가

인증(Authentication)이란 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차이다.
인가(Authorization)이란 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다.

http 프로토콜 통신의 특징 2가지

무상태(Stateless): 서버는 클라이언트의 상태를 기억하지 않는다. 따라서 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 한다.

상태값은 매 요청마다 클라이언트가 가지고 오기 때문에, 서버는 클라이언트의 상태를 별도로 기억할 필요 없이 주문받은 대로 응답해준다.
무상태라는 특성 덕분에 동일한 서버를 여러 개로 확장시킬 수 있다. (Scale-Out)

비연결성(Connectionless): 서버와 클라이언트는 연결되어 있지 않다. 서버 입장에서는 매번 새로운 요청이다.
비연결성으로 인해 최소한의 서버 자원으로 서버를 유지할 수 있게 해준다.
그러나, 각 사용자별 요청이 잦은 서비스의 경우 이러한 비연결성은 오히려 비효율적일 수 있다.

쿠키, 세션, 토큰

쿠키란?

무상태와 비연결성이라는 http 통신의 특징에도 불구하고, 마치 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현할 수 있는 수단으로 사용할 수 있다.
쿠키란 브라우저에 저장되는 텍스트 파일이며, key-value 형태로 저장된다.
쿠키는 별도로 삭제 처리하거나 유효기간이 만료되지 않는 이상 서버와 통신할 때 자동으로 주고 받게 된다.
서버에 특정 API 요청을 했을 때 서버가 응답 시 header 안에 set-cookie 속성으로 쿠키 정보를 담아주면 응답을 받은 브라우저는 쿠키를 브라우저에 자동으로 저장한다. (저장된 쿠키 정보는 '개발자 도구 => 애플리케이션 => 저장용량 => 쿠키'에서 확인 가능)
서버에 http 요청을 할 때마다 브라우저에 저장되어 있는 쿠키는 자동으로 서버에 보내진다. (단, 동일한 Origin 또는 CORS를 허용하는 Origin에만 쿠키를 보낸다. ex- 유튜브 서버에서 받은 쿠키는 유튜브 이용 시에만 주고 받을 수 있다.)
쿠키는 클라이언트에서 직접 추가/수정/삭제할 수 있다.

Origin: 출처(Origin)이란 protocol + host + port를 의미한다. CORS: Cross Origin Resource Sharing은 다른 출처에 리소스를 요청하는 것을 허용하는 정책이다. 브라우저는 보안상의 이유로 기본적으로 Same Origin Policy(SOP)를 원칙으로 하고 있지만, 서버와 클라이언트 각각 CORS 설정을 통해 상호합의된 웹사이트는 예외적으로 서로 다른 출처(Cross-Origin)임에도 API 요청이 가능하다.

세션이란?

세션이란 사용자와 서버간의 연결이 활성화된 상태를 의미하는 개념이다. (또는 인증이 유지되고 있는 상태)
로그인 성공 -> 서버에서 세션 생성 및 저장 (key-value 형식) -> key(sessionID)를 브라우저에 응답 (by 쿠키)

쿠키-세션 인증 방식

로그인/회원가입 시 세션 인증
로그인/회원가입 성공 시 서버에서 쿠키에 sessionID를 담아서 보내준다.
세션 유지 상태: 서버에서 관리하는 세션 저장소에 회원 데이터가 있다.
세션 만료 상태: 서버에서 관리하는 세션 저장소에 회원 데이터가 없다.
인가(Authorization)필요한 API 요청/응답!
서버는 인가가 필요한 API 요청을 받으면 클라이언트 쿠키에 들어있는 sessionID를 세션 저장소에 조회하여 있으면 DB에 데이터를 조회하여 응답한다.

토큰이란?

클라이언트에서 보관하는 암호화된 인증 정보를 의미한다.
세션처럼 서버에서 사용자의 인증 정보를 보관할 필요가 없기 때문에 서버 부담을 줄여주는 인증 수단이다.
웹에서 인증 수단으로 사용되는 토큰은 주로 JWT(Json Web Token)을 이용한다.

JWT

header.payload.signature 형식으로 3가지 데이터로 구성되어 있다.
국제 인터넷 표준 인증 규격 중 하나이다.
암호화된 토큰을 누구나 복호화하여 payload를 볼 수 있다. -> 토큰의 용도는 인증 정보(payload)에 대한 보호가 아니라 위조 방지이다.
1. 정보(payload)를 토큰화할 때 signature에 secret key가 필요하고, secret key는 복호화가 아니라 토큰이 유효한지를 검증하는 데 사용된다.

JWT 토큰 인증 방식

JWT 토큰 인증 방식

로그인/회원가입 시 토큰 인증
인가(Authorization) 필요한 API 요청/응답
Refresh Token으로 보안 강화 리소스 접근 인가를 받기 위해 사용되는 토큰을 Access Token이라 부른다. Access Token의 만료기간을 길게 잡고 인증 상태를 오래 가져갈 경우, 서버 부담은 줄어드나 보안성(탈취당할 경우)에 허점이 있다. 인증 보안이 중요한 서비스의 경우 인증 시 2개의 토큰 (Access Token, Refresh Token)을 발급하고 Access Token의 기간은 30분 정도로 짧게 가져가고, Refresh Token은 1~2주 정도로 길게 잡는 경우가 많다. 이 경우 서버에서는 Access Token이 만료되었을 때 Refresh Token이 유효한 상태면 새로운 Access Token을 클라이언트에 발급해주고 인증 상태를 유지할 수 있도록 하고, Refresh Token 만료 시 다시 로그인하라는 메시지를 응답한다.

세션 인증 vs 토큰 인증

세션 인증: 서버에 인증 정보 저장, 확장성(Scale-Out) 나쁨, 보안성(상대적) 좋음, 비용(상대적) 비쌈
토큰 인증: 클라이언트에 인증 정보 저장, 확장성(Scale-Out) 좋음, 보안성(상대적) 나쁨, 비용(상대적) 저렴함

TIL #29

Wed, 15 Mar 2023 19:37:47 GMT

Object.keys, values, entries

keys(), values(), entries()를 사용할 수 있는 자료구조는 다음과 같다.

Map
Set
Array

일반 객체엔 다음과 같은 메서드를 사용할 수 있다.

Object.keys(obj)-객체의 키만 담은 배열을 반환한다.
Object.values(obj)-객체의 값만 담은 배열을 반환한다.
Object.entries(obj)-[키, 값] 쌍을 담은 배열을 반환한다.

Map, Set, Array 전용 메서드와 일반 객체용 메서드의 차이를 비교하면 다음과 같다.

obj.keys()가 아닌 Object.keys(obj)를 호출한다. 이렇게 문법이 다른 이유는 유연성 때문이다. JS에서는 복잡한 자료구조 전체가 객체에 기반하기 때문에 객체 data에 자체적으로 data.values()라는 메서드를 구현해 사용하는 경우가 있을 수 있다. 이렇게 커스텀 메서드를 구현한 상태라도 Object.values(data)같은 형태로 메서드를 호출할 수 있으면 커스텀 메서드와 내장 메서드 둘 다를 사용할 수 있다.
메서드 Object.*를 호출하면 iterable 객체가 아닌 객체의 한 종류인 배열을 반환한다는 점이다. '진짜'배열을 반환하는 이유는 하위 호환성 때문이다.

객체 변환

객체엔 map, filter 같은 배열 전용 메서드를 사용할 수 없다. 하지만 Object.entries와 Object.fromEntries를 순차적으로 적용하면 객체에도 배열 전용 메서드를 사용할 수 있다.

Object.entries(obj)를 사용해 객체의 키-값 쌍이 요소인 배열을 얻는다.
1에서 만든 배열에 map등의 배열 전용 메서드를 적용한다.
2에서 반환된 배열에 Object.fromEntries(array)를 적용해 배열을 다시 객체로 되돌린다.

TIL #28

Tue, 14 Mar 2023 19:00:54 GMT

본격적인 복습을 하는 중이다. 어제 TIL을 못 쓴 핑계를 대자면 복습하느라 피곤했다.

1. Component

'props'가 input, return이 output
제목은 대문자로 시작
함수가 시작되는 부분부터 return 사이는 JavaScript 영역
return문 안쪽은 JSX(JavaScript + XML)문법, 이 안에서 JS문법은 {} 안에서 쓴다. (key, value페어의 객체가 들어갈 경우 {{ }}형태가 된다.)

2. Props

위에서 아래로, 부모에서 자식으로 (단방향)
읽기 전용
여는 태그, 닫는 태그 사이에 어떤 값이 있으면 React는 자동적으로 children이라는 props를 가지고 있다.
단순히 props라고 쓰여 있으면 내용물을 모르므로 구조분해할당으로 찢어놓는 것이 좋다.

3. useState

기본적인 형태는

const [state, setState] = useState(initialState);

state를 변수로 사용하고, setState를 이용해서 state값을 수정할 수 있다.
만약 state가 원시 데이터 타입이 아닌 객체 데이터 타입일 경우 불변성을 유지해줘야 한다.
함수형 컴포넌트 내에서 가변적인 상태를 갖게 한다.
setState를 사용하는 방식에는 두 가지가 있다.
```
// 기존에 사용하던 방식
setState(number + 1);
```

// 함수형 업데이트 setState(() => {});

``` 위 코드와 같이 setState의 ()안에 수정할 값이 아니라 함수를 넣을 수 있다. 그리고 그 함수의 인자 안에서는 현재의 state를 가져올 수 있고, {} 안에서는 이 값을 변경하는 코드를 작성할 수 있다.

일반 업데이트 방식은 명령을 하나로 모아 최종적으로 한 번만 실행을 한다. 반면 함수형 업데이트 방식은 명령을 모아 순차적으로 각각 1번씩 실행을 시킨다.

4. useEffect

렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅이다. (컴포넌트가 화면에서 보여졌을/사라졌을 때)
의존성 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다.

WIL #5

Sun, 12 Mar 2023 10:03:01 GMT

최근 급하게 쌓아온 모래성같은 실력이 손 틈새로 빠져나가는 느낌을 지울 수 없다. 그런 이유로 흐릿해진 중요 개념들을 복기해야겠다는 생각이 들었다.

Props

props는 프로퍼티(properties)의 준말이다.
상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (단방향 데이터 흐름)
수정할 수 없다는 특징이 있다. (자식 입장에서는 읽기 전용 데이터이다.)
문자열을 전달할 때는 ""를, 문자열 외의 값을 전달할 때는 {}를 사용한다.

State

state는 컴포넌트의 현재 상황에 대한 정보를 나타내기 위해 리액트에서 쓰는 일반 JavaScript 객체다. setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다.

state와 props의 차이점

props와 state는 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면, state는 (함수 내에 선언된 변수처럼)컴포넌트 안에서 관리된다. 그 외에도 의 차이점이 있다.

Children

공식 문서에 따르면 props.children이란

'어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 범용적인 '박스' 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있습니다.'

여기서 말하는 범용적인 '박스'역할을 하는 컴포넌트란 크게 봤을 때 Layout 역할을 하는 컴포넌트이다.

useState

useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해 준다. useState의 기본적인 형태는 아래와 같다.

const [state, setState] = useState(initialState);

원래는 useState라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습이다. state를 변수로 사용하고, setState를 이용해서 state값을 수정할 수 있다. 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우 불변성을 유지해줘야 한다.

setState를 사용하는 방식에는 우리가 알고 있는 방식이 아닌 또 다른 방식이 있다. 바로 함수형 업데이트 방식이다.

// 기존에 우리가 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

위 코드와 같이 setState의 ()안에 수정할 값이 아니라 함수를 넣을 수 있다. 그리고 그 함수의 인자 안에서는 현재의 state를 가져올 수 있고, {} 안에서는 이 값을 변경하는 코드를 작성할 수 있다.

// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다.
setState((currentNumber)=>{ return currentNumber + 1 });

일반 업데이트 방식은 명령을 하나로 모아 최종적으로 한 번만 실행을 한다. 반면 함수형 업데이트 방식은 명령을 모아 순차적으로 각각 1번씩 실행을 시킨다. 공식 문서에 따르면, '리액트는 성능을 위해 setState()를 단일 업데이트(batch update)로 한꺼번에 처리할 수 있다.'

useParams

useParams를 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id값을 조회할 수 있다. 만약 우리가 works/1로 이동하면 1이라는 값을 주고, works/100으로 이동하면 100이라는 값을 사용할 수 있게 해준다.

TIL #27

Sat, 11 Mar 2023 19:26:24 GMT

Redux Toolkit

리덕스 툴킷은 리덕스를 개량한 것으로 생각하면 된다. 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 가능들을 흡수해서 만든 것이 리덕스 툴킷이다. 줄여서 RTK라고도 한다.

기존 리덕스와 비교했을 때 구조와 패러다임이 같다. 다만 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고, ducks 패턴의 요소들이 어느 정도 자동화되었다.

또한 큰 차이점으로 Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다는 점이 있다.

Slice

그리고 Slice라는 새로운 API가 추가되었다. Slice는 createSlice라는 API를 통해 만들 수 있다. 인자로 설정정보를 객체로 받는데, 그 안에 우리가 필수로 작성해줘야 하는 값으로는 name, initialState, reducers가 있다.

//createSlice API 뼈대

const testSlice = createSlice({
    name: '', // 이 모듈의 이름
    initialState : {}, // 이 모듈의 초기상태 값
    reducers : {}, // 이 모듈의 Reducer 로직
})

counterSlice 리듀서 객체 안에서 만들어주는 함수는 리듀서의 로직이 되면서 동시에 Action Creator가 된다. 그리고 Action Value까지 함수의 이름을 따서 자동으로 만들어진다. 그러므로 우리는 Reducer만 만들어주면 된다.

TIL #26

Fri, 10 Mar 2023 17:37:30 GMT

Axios, Fetch

Axios란?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.

Promise: 비동기 처리에 활용되는 객체
XMLHttpRequest(XHR): 서버와 상호작용할 때 사용되는 객체. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있다. AJAX 프로그래밍에 많이 사용된다.

특징

브라우저를 위해 XMLHttpRequests 생성
node.js를 위해 http요청 생성
Promise API를 지원
요청 및 응답 인터셉트
요청 및 응답 데이터 변환
요청 취소
JSON 데이터 자동 변환
XSRF를 막기 위한 클라이언트 사이드 지원

GET

GET은 서버의 데이터를 조회할 때 사용한다. 기본적인 사용방법은 아래와 같다.

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있다.
// config는 axios 공식 문서에서 확인 가능하다.

axios.get(url[, config]) //GET

Axios를 사용해서 GET 요청 코드를 작성하기에 앞서, 어떤 방식으로 요청해야 할지는 우리가 사용하는 json-server의 방식을 알아야 한다.

다시 말해, _Axios는 GET 요청을 할 수 있도록 도와주는 패키지일 뿐이지, '어떻게 요청을 해야하지?'와 같은 방식에 대한 확인은 우리가 사용할 API 명세서를 보아야 한다_는 뜻이다.

예를 들어, GET 요청을 할 때 path variable로 해야할지, query로 보내야할지는 API를 만든 사람이 하라는 대로 해야 하기 때문이다.

json-server의 공식 문서를 보면, 전체 정보나 상세 정보는 path variable로 url을 작성해야 하고, filter와 같은 기능을 위해서 GET요청을 할 때는 query로 보내라고 명시되어 있다.

POST

axios.post(url[, data[, config]])   // POST

POST는 보통 서버에 데이터를 추가할 때 사용한다. 다만 post 요청에 대한 로직은 BE 개발자가 구현하는 것이기 때문에 추가 외에 다른 용도로 사용될 수 있지만, 보통은 클라이언트의 데이터를 body 형태로 서버에 보내고자 할 때 사용한다.

네트워크 쪽 개발을 할 때는 항상 브라우저에 있는 네트워크 탭을 확인하면서 개발을 진행해야 한다. 어떤 문제가 생겼을 때 이 정보를 통해 디버깅을 할 수 있기 때문이다.

headers

Request URL을 통해서 우리가 의도한 URL로 post 요청을 보냈음을 알 수 있다.
Request Method를 동해서 우리가 POST 메서드를 사용했음을 알 수 있다.
Status Code는 자동으로 생서오디는 것이 아니라 BE개발자가 직접 개발을 하고 설정한 code가 브라우저에 보이게 된다. 그래서 만약 BE개발자가 구현을 해놓지 않았다면 문맥과 다른 status code가 브라우저에 보일 수 있다.

payload

payload에서는 우리가 보낸 body를 확인할 수 있다.

response

response에서는 우리가 보낸 post에 요청에 대한 서버의 응답값을 확인할 수 있다. 이 response값은 자동으로 생성되는 것이 아니라, FE개발자가 BE개발자에게 요청한 것을 직접 개발을 해야 생기는 값이다. json-server의 경우 POST 요청을 했을 때, 클라이언트가 보낸 body를 그대로 응답해주도록 만들어진 패키지이다.

DELETE

DELETE는 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용한다.

axios.delete(url[, config])  // DELETE

PATCH

PATCH는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드이다. 다만, 이것은 http 환경에서 서로가 한 약속이자 문맥이기 때문에, 수정을 하고자 반드시 patch, put을 써야만 하는 것은 아니다. BE에 의한 POST를 통해서 '수정'이라는 기능은 충분히 만들 수 있기 때문이다. 다만 이러한 약속을 대부분의 개발자들이 지키고 있다.

axios.patch(url[, data[, config]])  // PATCH

.env

.env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다.

주의사항

root 폴더에 env 파일이 위치하지 않으면 정상적으로 작동하지 않는다.
변수명이 'REACT_APP_'으로 시작하지 않으면 React가 인식하지 못하여 정상적으로 작동하지 않는다.
.gitignore에 등록해주어야 git에 등록할 때 파일이 올라가지 않는다.

사용법

root 폴더에 .env 파일을 생성한다.
key, value 형식으로 환경변수를 입력해준다. 이 때 key 앞에 무조건 'REACT_APP_'을 붙혀야 한다.
소스코드에서 import 없이 process.env.REACT _ APP__ 변수명으로 불러와 적용한다. (뒤 언더바 1칸)
env의 값을 변경하여 적용하고 싶다면 변경 후 server를 다시 실행시켜주어야 한다.

Fetch

Fetch는 ES6부터 도입된 JavaScript 내장 라이브러리이다. Promise 기반 비동기 통신 라이브러리며, axios처럼 데이터를 다루기 쉽고, 내장 라이브러리이기 때문에 별도의 설치 및 import를 필요로 하지 않는다. 하지만 다음과 같은 단점을 가진다.

미지원 브라우저 존재
개발자에게 불친절한 response
axios에 비해 부족한 기능

fetch와 axios의 차이

CASE 1. 데이터 읽어오기

(1) fetch

const url = "https://jsonplaceholder.typicode.com/todos";

fetch(url)
.then((response) => response.json())
.then(console.log);

fetch().then을 한 상태여도 여전히 JSON 포맷의 응답이 아니기 때문에 response.json()을 한 번 더 해주는 과정이 필요하다.
따라서, fetch로 데이터를 요청하는 경우 두 개의 .then()이 필요하다.

(2) axios

const url = "https://jsonplaceholder.typicode.com/todos";

axios.get(url).then((response) => console.log(response.data));

axios는 response를 기본적인 JSON 포맷으로 제공한다. 우리는 단순히 response.data로 사용한다.

CASE 2. 에러 처리

(1) fetch

const url = "https://jsonplaceholder.typicode.com/todos";

fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(
        `This is an HTTP error: The status is ${response.status}`
      );
    }
    return response.json();
  })
  .then(console.log)
  .catch((err) => {
    console.log(err.message);
  });

fetch의 경우, catch()가 발생하는 경우는 오직 네트워크 장애 케이스이다. 따라서 개발자가 일일히 then() 안의 모든 케이스에 대한 HTTP 에러 처리를 해야한다.

(2) axios

const url = "https://jsonplaceholder.typicode.com/todos";

axios
  .get(url)
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });

axios.get() 요청이 반환하는 Promise 객체가 갖고 있는 상태코드가 2xx의 범위를 넘어가면 reject를 한다.
따라서, 곧바로 catch() 부분을 통해 error handling이 가능하다. 예시는 다음과 같다.
```
const url = "https://jsonplaceholder.typicode.com/todos";
```

// axios 요청 로직 axios .get(url) .then((response) => console.log(response.data)) .catch((err) => {

    // 오류 객체 내의 response가 존재한다 = 서버가 오류 응답을 주었다    
    if (err.response) {

    const { status, config } = err.response;

        // 없는 페이지
    if (status === 404) {
      console.log(`${config.url} not found`);
    }

        // 서버 오류
    if (status === 500) {
      console.log("Server error");
    }

    // 요청이 이루어졌으나 서버에서 응답이 없었을 경우
  } else if (err.request) {
    console.log("Error", err.message);
    // 그 외 다른 에러
  } else {
    console.log("Error", err.message);
  }
});

```

TIL #25

Thu, 09 Mar 2023 18:03:15 GMT

useSelector에 대해 다시금 생각해보는 시간을 전 조원들과 함께 가졌다. 정리를 하고 나니 원리가 머릿속에 좀 더 명료하게 그려졌다. 여러 번 써보면서 익숙해지는 건 별개의 문제지만...

TIL #24

Wed, 08 Mar 2023 09:56:24 GMT

새 TodoList를 실행하는데 오류가 났다.

Can't resolve 'react-redux'

구글링을 해보니 대체로 yarn 이용자는 node_modules 폴더와 yarn.lock, npm이용자는 node_modules 폴더와 package.lock.json파일을 지운 후 각각 install을 다시 해보라고 되어 있었다.

먼저 yarn을 재설치 했는데 실패했다. 그래서 혹시 몰라 npm도 재설치 후 실패했다.

가만 생각해보다... 혹시나 redux 자체를 제대로 깐 것이 아닐 수도 있다는 생각이 들었다.

그래서 yarn add redux, yarn add react-redux를 다시 실행했더니 다행히 해당 오류는 사라졌다.

react-id-generator도 오류가 떴었는데 yarn add react-id-generator로 해결했다.

TIL #23

Tue, 07 Mar 2023 17:10:54 GMT

동기(Synchronous)적 방식

현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식, 일반적인 프로그래밍 세계에서는 코드는 모두 동기적으로 실행된다. 즉, 앞선 코드가 끝나야만 그 다음 코드가 수행이 된다.

비동기(Asynchronous)적 방식

실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식

setTimeout, addEventListner 등

별도의 요청, 실행 대기, 보류 등과 같은 코드는 모두 비동기적 코드
대표적으로 서버 통신과 관련된 로직들 포함

콜백지옥

콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우

주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생한다.
가독성 하락, 수정이 어렵다.
이를 극복하기 위해 then ~ catch, async / await 등장하였다.

Promise

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

Promise 객체에 담기는 주요한 상태정보
1. 대기(pending): localhost에서 서버에 요청을 한 직후. 아직 성공(resolve)또는 실패(rejected)되지 않은 상태이다.
  1. 이행(fulfilled): 서버가 정상적으로 데이터를 localhost한테 전달한 상태이다.
  2. 거부(rejected): 서버가 localhost에게 데이터를 전달하지 못한 경우.

TIL #22

Mon, 06 Mar 2023 15:58:35 GMT

Lexical Scoping (Lexical Scope)

자바스크립트의 컴파일러는 토큰화(Tokenizing)와 렉싱(Lexing)을 처음에 하는데 이는 코드를 토큰 단위로 분리하여 의미를 매핑시키는 단계이다.

Lex-time이란 토큰에 의미를 부여하는 렉싱 과정을 말하며, 이 때 자바스크립트의 스코핑 개념인 렉시컬 스코프가 형성된다.
함수를 선언할 때 정의되는 스코핑 형태
함수가 어디에 적혀있는가에 따라서 스코프가 구성되는 방식
- Lexical Scope는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정 (함수가 호출이 아님)

Scope Chain, [[Scopes]]

EC -> Execution Context (실행 컨텍스트)

EC안에 스코프 체인을 참조하는 [[Scopes]]를 갖게 된다.
[[Scopes]]는 연결리스트 형식으로 현재 스코프부터 상위 스코프를 참조하게 되는데, 이는 변수식별(Identifier Resolution)을 할 때 사용한다.

Closure

내부 함수에서 외부 함수 범위에 대한 접근을 제공하는 것

함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능

생명 주기가 끝난 외부 함수의 변수를 참조하는 함수
함수와 함수가 선언된 어휘적 환경의 조합

React Hook

공식문서에 따르면, Hook을 통해 해결하려는 문제는 다음과 같다.

컴포넌트간에 재사용이 어려운 stateful logic

이해하기 어렵게 복잡해지는 컴포넌트들

모두를 혼동시키는 클래스형 컴포넌트

함수형 컴포넌트에서 React의 상태 및 라이프사이클 기능에 연결할 수 있는 함수
클래스형 컴포넌트에서 동작하지 않으며, 클래스 없이 React의 여러 기능을 사용할 수 있다.
Hook은 React 개념에 대한 지식을 대체하지 않는다.
- Hooks는 props, state, context, refs 및 lifecycle과 같이 이미 알고 있는 개념에 보다 직접적인 API를 제공한다.
Hook을 사용하면 수명 주기 방법에 따라 분할을 강제하는 대신 관련된 부분에 따라 하나의 구성 요소를 더 작은 기능으로 나눌 수 있다. (ex. useEffect)
컴포넌트에서 상태가 있는 로직을 추출하여 독립적으로 테스트하고 재사용할 수 있다.

WIL #4

Sun, 05 Mar 2023 12:08:51 GMT

이미 TIL로 정리한 내용이지만 과제 제출용으로 한 번 더 정리하는 Virtual DOM, props, state이다.

DOM의 의미와 특징

-DOM ( The Document Object Model, 문서 객체 모델)은 HTML, XML(Extensible Markup Language) 문서의 프로그래밍 interface이다. -nodes와 objects로 문서를 표현한다. -웹페이지의 객체 지향 표현이며, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. -DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. -DOM의 구현은 어떠한 언어에서도 가능하다.

재조정:

UI가 표현된 객체를 메모리에 저장하고, React DOM과 같은 라이브러리에 의해 '실제'DOM과 동기화 하는 과정

1) UI가 변경되면 전체 UI를 Virtual DOM으로 렌더링한다. 2) 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산한다. 3) 변경된 부분을 실제 DOM에 반영한다.

props의 개념

-부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터, 다시 말해 컴포넌트 간의 정보 교류 방법. -props는 반드시 위에서 아래 방향으로 흐른다. 즉 [부모] -> [자식] 방향으로만 흐른다.(단방향) -props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

prop drilling

-데이터가 전달되는 과정이 반복되는 것이 prop drilling, props가 아래로 뚫고 내려간다.라고 한다. 유지/보수 측면에서 곤란하다.

state를 쓰는 목적 => UI를 바꾸기 위함 (렌더링을 다시)

React안에서 변경되는 값은 반드시 state로 선언

리액트는 화면을 렌더링할지를 state의 변화에 따라 결정한다. 단순 변수는 무시한다.

TIL #21

Sat, 04 Mar 2023 19:47:53 GMT

Redux는 JavaScript 상태관리 라이브러리이며, 그 본질은 Node.js 모듈이다.

세 가지 원칙

1. Single source of truth

-동일한 데이터는 항상 같은 곳에서 가지고 온다. -즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.

2. State is read-only

-리액트에서는 setState 메서드를 활용해야만 상태 변경이 가능하다. -리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.

3. Changes are made with pure functions

-변경은 순수함수로만 가능하다. -리듀서와 연관되는 개념이다. -Store(스토어) - Action(액션) - Reducer(리듀서)

Store -Store는 상태가 관리되는 오직 하나의 공간이다. -컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다. -컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.

Action -Action은 앱에서 스토어에 운반할 데이터를 말한다. -Action은 자바스크립트 객체 형식으로 되어있다.

Reducer -Action을 Store에 바로 전달하는 것이 아니다. -Action을 Reducer에 전달해야 한다. -Reducer가 주문을 보고 Store의 상태를 업데이트하는 것이다. -Action을 Reducer에 전달하기 위해서는 dispatch()메서드를 사용해야 한다.

Redux에서 위 개념을 구현하기 위해서 mapStateToProps()와 Redux hooks(useSelector, useDispatch)를 이용할 수 있다.

Redux의 장점 -상태를 예측 가능하게 만든다. -유지보수 -디버깅 -테스트

TIL #20

Fri, 03 Mar 2023 17:52:20 GMT

오늘 공부한 부분 정리

useState

-일반적인 방법: 배치성으로 처리 (배치 업데이트 = React에서 렌더링을 위해 state를 파악) -함수형 업데이트: 명령들을 모아서 순차적으로 한 번씩 시행

렌더링이 잦다 => 성능 이슈 => React에서는 명령들을 모아 한 번에 처리하는 '배치 업데이트'

useEffect

-렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅 -컴포넌트가 화면에서 보여졌을 / 사라졌을(return) 때

*의존성 배열: 이 배열에 값을 넣으면, 그 값이 바뀔 때만 useEffect를 실행한다.

useRef

-DOM 요소에 접근할 수 있도록 하는 React Hook.

저장공간 a. state와 비슷한 역할. state는 병화가 일어나면 다시 렌더링이 일어나고 내부 변수들이 초기화된다는 차이. b. ref에 저장된 값은 렌더링을 일으키지 x. 즉, 내부 변수의 초기화 방지. c. 컴포넌트가 여러 번 렌덜이 => ref 저장값은 유지 d. 정리하면 state는 리렌더링이 꼭 필요한 값을 다룰 때, ref는 리렌더링을 발생시키지 않는 값을 다룰 때 사용한다.
DOM

-렌더링 되자마자 특정 input이 focusing되어야 한다면 useRef를 사용한다.

TIL #19

Thu, 02 Mar 2023 13:28:24 GMT

시멘틱 태그 (sementic tag)

시멘틱 태그는 div 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위한 태그이다. HTML의 구조를 설계하는 데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어졌다.

장점

SEO 최적화에 유리하다.

검색 엔진이 태그의 목적에 부합하게 설계되어 있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리하다.

웹 접근성에 효율적이다.

일반적인 브라우저에서는 차이가 없지만 스크린리더(시작장애인을 위한 웹 서핑 프로그램)와 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.

유지보수의 용이성.

많은 div사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며 해당 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이하다.

종류

 머리글, 제목, 헤더

 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현

 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그

 말그데로 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화

 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용. 

 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그

 콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능

 제목과 관련된 부제목을 묶는 태그

 이름처럼 문서 의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.

 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.

 이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용

  요소의 설명 캔션(caption) 정의

 현재 맥락에 관련이 깊거나 중요한 부분 강조

 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현

 details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.

전 조원에게 HTML 문법을 구상하는 데 있어 어려움을 토로했더니 좋은 자료를 알려주어 정리하였다. 다음에 파일을 만들 때 의식적으로 여기 있는 태그들을 써봐야겠다.