HTML 태그
- <p> : 단락
- <h1> : 제목
- (글자 크기에 맞춰 h1, h2, h3를 선택하는 것이 아님. 글자 크기는 css로 조절. h1은 한 페이지당 하나, h1,h2 없이 h3가 존재해선 안됨..)
- html 상용구
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 목록 요소
- <ul> : 순서가 없는 리스트로 하위 요소는 <li>로만 구성된다.
<ul> <li>hello1</li> <li>hello2</li> <li>hello3</li> <li>hello4</li> </ul>
- <ol> : 순서가 있는 리스트로 하위 요소는 역시 <li>
<ol> <li>hello1</li> <li>hello2</li> <li>hello3</li> <li>hello4</li> </ol>
- 다음과 같이 중첩도 가능
<ol> <li>hello1 <ul> <li>hello_u1</li> <li>hello_u2</li> </ul> </li> <li>hello2 <ul> <li>hello2_u1</li> <li>hello2_u2</li> </ul> </li> <li>hello3 <ul> <li>hello3_u1</li> <li>hello3_u2</li> </ul> </li> </ol>
- <ul> : 순서가 없는 리스트로 하위 요소는 <li>로만 구성된다.
- <a href=””> 앵커 태그 : 하이퍼링크를 만드는 요소
<a href="https://www.google.com">link</a>
- 이미지 태그
<img src="이미지URL" />
- <div> : 요소를 그룹화하는 블록 수준 요소
- 블록 요소는 전체 너비를 차지하고, 항상 새로운 줄에서 시작.
- 즉, 블록 요소가 문서에 추가되면 그 다음 요소는 항상 블록 요소의 아래쪽에서 시작.
- <span> : 자신의 콘텐츠만큼의 너비를 차지하며, 다른 요소와 같은 줄에 배치되는 인라인 요소
- </hr> : 문단 사이 공백, 밑줄
- <br> : 줄바꿈 태그
- <sup>, <sub> : 윗첨자, 아랫첨자
블록 종류 - 한 줄 전체를 차지하므로 자동으로 줄 바꿈이 발생
- <div>
- <h1>, <h2>, <h3>, ... <h6>
- <p>
- <ul>, <ol>, <li>
- <header>, <footer>, <section>, <article>
인라인 종류 - 내용의 크기만큼 공간을 차지함
- <span>
- <a>
- <img>
- <br>
시멘틱 마크업
→ div와 기능은 비슷하지만 마크업에 의미를 부여하기 위한 요소로 구조를 명확하게 함
- <section> : 주제나 특정 내용으로 구성된 블록
- <article> : 독립적인 정보 단위를 표현할 때 사용
- <nav> : 네비게이션 링크
- <main> : 주요 내용으로 여러 페이지에서 반복되는 내용을 포함하지 않음.
- <header> : 머리말
- <footer> : 꼬리말
- <aside> : 본문 내용과 간접적으로 연결된 내용을 나타냄
- <details> : 보통 숨겨져 있으며, 추가 정보를 제공할 때 사용
- <summary> : <details> 태그의 제목으로 사용
표
- <td> : 테이블 표 내부 단일 셀
- <tr> : 테이블 행 구분
- <th> : 테이블 헤더 정의
- <thead>, <tbody>, <tfoot> : 표를 논리 섹션으로 구분
- <td>, <th> 태그 속성
- rowspan 속성 → 특정 셀이 세로로 몇 개의 행을 합칠 지 지정
- colspan 속성 → 특정 셀이 가로로 몇 개의 열을 합칠 지 지정
<table>
<thead>
<tr>
<th rowspan="2">이름</th>
<th colspan="3">과목별 성적</th>
</tr>
<tr>
<th>국어</th>
<th>수학</th>
<th>영어</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>85</td>
<td>90</td>
<td>78</td>
</tr>
<tr>
<td>김철수</td>
<td>92</td>
<td>88</td>
<td>95</td>
</tr>
<tr>
<td>이영희</td>
<td>75</td>
<td>80</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>합계</td>
<td>252</td>
<td>258</td>
<td>258</td>
</tr>
</tfoot>
</table>
폼 요소
- <form action="" method="">
- action: 폼이 제출될 URL을 지정, method: 데이터 전송 방식을 지정 (GET, POST)
- <form action="/login" method="POST"> <!-- 입력 요소들 --> </form>
- <input type=""> : 입력 형식
<input type="text" name="username" placeholder="사용자 이름">
<input type="password" name="password" placeholder="비밀번호">
<!-- placeholder 값이 비어있을 때 사용자에게 어떤 값을 입력해야 하는지 알려줌 -->
- <label> : 특정 입력 필드와 연결되어 있어, 사용자가 해당 레이블을 클릭하면 관련된 입력 필드가 활성화
- → for 속성을 사용하여 특정 입력 필드와 연결. 이때 for 속성의 값은 연결할 입력 필드의 id와 일치해야 함.
- id 속성은 해당 페이지 내에서 중복되면 X, 너무 많은 id를 만들지 말 것
<p>
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required>
</p>
<p>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" minlength="8" maxlength="20" required>
</p>
- 버튼<button>, <input type="submit"> : 폼 내부에 있으면 <form> 태그에 명시된 url, method로 폼 제출
- 기본은 type=”submit”인데 폼을 제출하지 않는 버튼을 만들고 싶다면 button type=”button”으로 지정
<button type="button">제출</button>
<button type="submit">제출</button>
<input type="submit" value="제출">
- name 속성 : 각 입력 필드에 name 속성이 지정되면, 해당 필드의 값은 폼이 제출될 때 서버로 전송
- 폼에 다음과 같이 <input type="text" id="username" name="username"> 있다면, 해당 입력값으로 들어온 값이 ?username=입력값 이렇게 쿼리파라미터 형식으로 서버에 전송.
- value 속성 : 사용자에게 표시되지 않지만 폼이 제출되면 전송되는 값
- 체크 박스 : 여러 옵션 중 여러 개를 선택할 수 있도록 하는 버튼으로 선택 여부에 따라 해당 값이 전송
<input type="checkbox" name="sport" id="sport">
<label for="sport">스포츠</label>
<input type="checkbox" name="music" id="music">
<label for="music">음악</label>
- 라디오 버튼 : 사용자가 여러 옵션 중에서 하나만 선택할 수 있도록 하는 입력 요소
- name 속성이 같은 라디오 버튼들이 그룹으로 묶여서, 한 번에 하나만 선택됨.
<input type="radio" name="gender" id="male" value="남성" checked>
<label for="male">남성</label>
<input type="radio" name="gender" id="female" value="여성">
<label for="female">여성</label>
- 드롭다운 : 여러 옵션 중에서 하나를 선택할 수 있도록 제공하는 목록 형태의 입력 요소
<label for="country">국가를 선택하세요:</label>
<select id="country" name="country">
<option value="kr" selected>대한민국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
</select>
- textarea : 여러 줄의 텍스트를 입력할 수 있는 필드
<textarea name="comments" rows="4" cols="50" placeholder="댓글을 입력하세요..."></textarea>
CSS
css : 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 스타일 시트 언어
css 파일을 적용하려면? → css 파일을 만들고 head에 파일 경로 지정
<link rel="stylesheet" href="css파일명">
CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성
선택자: 스타일을 적용할 HTML 요소 (ex.. h1, .class, #id .class ..)
- 자손 선택자 : 선택자가 ,가 아닌 공백으로 구분되어 있는 경우
- 아래의 경우 class=”post” 하위 a태그가 적용 대상.
.post a {
color: teal;
}
- 인접 선택자(결합자) : 부모 자식이 아닌 형제의 개념으로 아래의 경우 h1 바로 다음에 오는 a태그가 대상
h1 + a {
color: teal;
}
- 직계 자손 선택자 : 아래의 경우 div 바로 하위의 li 태그가 대상
- 그냥 자손 선택자의 경우 한 단계 밑이 아닌 하위의 모든 태그가 대상이지만 직계 자손 선택자의 경우 바로 한 단계 하위의 태그이어야함.
div > li {
color: teal;
}
- 속성 선택자: 특정 속성을 가진 요소 선택
input[type="text"] {
width: 100px;
color: teal;
}
section[class="post"] {
background-color: teal;
}
a[href*="example"] { <!-- a href="example" 포함하는-->
font-size: 20px;
}
a[href$="example"] { <!-- a href="example" 끝나는-->
font-size: 20px;
}
- 가상 클래스 선택자: 요소의 상태나 위치에 따라 스타일을 적용
- :hover: 마우스가 요소 위에 있을 때 적용.
- :focus: 요소가 포커스를 받을 때 적용.
- :active: 요소가 클릭되고 있는 동안 적용.
- :nth-child(n): 부모 요소의 자식 중 n번째 자식에 적용.
a:hover {
color: red;
}
input:focus {
border: 2px solid blue;
}
li:nth-of-type(2n) {
background-color: #f0f0f0; /* 2, 4, 6 ... 2n번째 항목의 배경색 변경 */
}
- 가상 요소 선택자: HTML 요소의 특정 부분에 스타일을 적용할 수 있도록 해주는 선택자
- ::before: 요소의 내용 앞에 가상 요소를 추가
- ::after: 요소의 내용 뒤에 가상 요소를 추가
- ::first-line: 요소의 첫 번째 줄에 스타일을 적용
p::first-line {
font-weight: bold; /* 첫 줄을 굵게 설정 */
color: blue; /* 첫 줄의 색상을 파란색으로 설정 */
}
선언 블록: 중괄호 {} 안에 속성, 값을 포함하는 형태로
- 속성은 스타일의 종류를, 값은 그 속성의 설정
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1,h2 {
color: blue;
text-align: center;
}
p {
color: #ff1122;
padding: 10px;
}
CSS 우선 순위
css에서 스타일 간의 충돌이 있을 때 다음과 같이 점수에 따라 스타일을 적용한다.
1. 인라인 스타일 - 우선순위 점수: 1000
2. ID 선택자 - 우선순위 점수: 100
3. 클래스, 속성 및 가상 클래스 선택자
- .로 시작하는 클래스 선택자, [attribute]로 시작하는 속성 선택자, :hover, :focus 같은 가상 클래스 선택자 - 우선순위 점수: 10
4. 요소 선택자 및 가상 요소 선택자
- HTML 요소 이름(div, p, h1)이나 ::before, ::after 같은 가상 요소 선택자 - 우선순위 점수: 1
텍스트 속성
- text-align: 텍스트 정렬
- width: 너비
- font-weight: 텍스트 굵기
- text-decoration: 텍스트를 꾸미는 선 (밑줄, 윗줄, 취소선)
- line-height: 줄간격
- letter-spacing: 글자 사이 간격
- font-family: 폰트 지정
- text-transform: 글자 대소문자 지정
- font-size: 글자 크기
- 절대 단위: px
- 상대 단위: %, em, rem
CSS 단위
- %: 일반적으로 부모 요소의 크기에 대한 비율로 크기를 지정
- line-height와 같이 몇몇 특성은 부모가 아닌 다른 값으로 기준을 삼는 경우도 있다.
- em: 현재 요소의 폰트 크기를 기준으로 하는 상대 단위로 1em은 현재 글꼴 크기와 동일
- 현재 요소의 폰트 크기는 부모 항목을 기반으로 한다.
- rem: 루트 요소(보통 <html>)의 폰트 크기를 기준으로 하는 상대 단위로 1rem은 루트 요소의 폰트 크기
CSS 상속
부모 요소의 스타일이 자식 요소에 자동으로 적용되는 개념
아래와 같이 있을 때 body 내부에 있는 h1, p 태그는 color: blue가 적용된다.
body {
color: blue;
border: 2px solid;
}
h1 {
font-size: 100px;
}
p {
background-color: olive;
}
이 때 border의 경우는 상속이 되지않는다. (상속이 된다면 내부 모든 태그가 테두리가 생겼을 것)
width, margin, padding, border 등 상속이 되지 않는 속성이 있다. 만약 자식 태그에서 해당 상속을 강제하고 싶다면 inherit 키워드를 사용하면 된다.
h1 {
border: inherit;
font-size: 100px;
}
박스 모델
CSS 박스 모델(CSS Box Model)은 웹 페이지의 요소를 구성하는 기본 개념으로, 모든 HTML 요소는 박스 형태로 표현된다.
- 콘텐츠(Content): 요소의 실제 내용, 콘텐츠 영역의 크기는 요소의 width와 height 속성으로 결정.
- 패딩(Padding): 콘텐츠와 테두리 사이의 내부 여백
- 테두리(Border): 패딩과 여백 사이에 위치하는 요소의 경계
- 여백(Margin): 요소의 외부 공간으로, 다른 요소와의 간격을 조절함. 여백은 요소의 크기에 추가되지 않음

Display 속성
- block: 요소가 블록 레벨 요소로 표시. 즉 새로운 줄에서 시작하며, 전체 너비를 차지한다.
- inline: 요소가 인라인 레벨 요소로 표시. 즉, 새로운 줄을 만들지 않고, 다른 인라인 요소와 같은 줄에 표시되며, 내용의 크기만큼만 공간을 차지한다. (너비나 높이는 무시)
- inline-block: 요소는 인라인 요소처럼 같은 줄에 표시되지만, 블록 요소처럼 너비와 높이를 설정
- flexbox
- Flex Container: Flexbox 레이아웃을 적용할 부모 요소로
- 해당 요소에 display: flex 또는 display: inline-flex를 설정 시 자식 요소는 flex item으로 변환
- Flex Item: Flex Container의 자식 요소
- 주 축(Main Axis): Flex Item이 배치되는 주된 방향. 기본값은 수평
- 교차 축(Cross Axis): 주 축에 수직 방향.
- Flex Container 속성
- flex-direction: flex item의 배치 방향을 설정
- flex-wrap: flex item이 컨테이너의 범위를 초과할 경우 줄 바꿈 설정
- justify-content: 주 축에서 아이템의 정렬 방식을 설정
- align-items: 교차 축에서 아이템의 정렬 방식을 설정
- align-content: 교차 축에서 여러 줄의 아이템의 정렬 방식을 설정 (행, 열 사이 공간 조정)
- flex-wrap: wrap, wrap-reverse가 설정되어 있어야 함
- Flex Item 속성
- align-self: 특정 아이템의 교차 축 정렬 방식을 설정.
- align-items 속성과 비슷하지만, 개별 아이템에만 적용
- flex-basis: 아이템의 초기 크기를 설정
- flex-grow: 아이템이 남은 공간을 얼마나 차지할 지 설정.
- 기본값은 0
- flex-shrink: 아이템이 공간이 부족할 때 얼마나 줄어들 지 설정.
- 기본값은 1.
- flex: flex-grow, shrink, basis를 한 번에 설정할 수 있음
.item { flex: 1 1 100px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 100px */ }
- align-self: 특정 아이템의 교차 축 정렬 방식을 설정.
- Flex Container: Flexbox 레이아웃을 적용할 부모 요소로
Position 속성
- static: 기본값으로, 요소는 문서 흐름에 따라 위치. 다른 요소에 대한 상대적 위치가 없으며 top, right, bottom, left 속성이 무시됨
- relative: 요소는 문서 흐름에 따라 위치하지만, top, right, bottom, left 속성을 사용하여 자신의 원래 위치에서 상대적으로 이동이 가능
- absolute: 요소는 가장 가까운 위치가 설정된 조상 요소에 대해 절대적으로 위치하며 만약 위치가 설정된 조상 요소가 없다면, <body> 요소를 기준으로 위치.
- 문서 흐름에서 제거되어 공간이 배정되지 않으며 다른 요소에 영향을 미치지 않음
- fixed: 뷰포트(viewport)를 기준으로 고정된 위치를 설정하여 스크롤을 해도 위치가 변하지 않음.
- 마찬가지로 문서 흐름에서 제거됨
- sticky: 요소는 상대적으로 배치되지만 스크롤을 하여 주어진 경계선을 지날 경우 위치가 고정
미디어 쿼리
CSS에서 다양한 화면 크기와 장치에 따라 스타일을 적용할 수 있도록 해주는 기능으로, 웹 페이지가 다양한 기기에서 적절하게 표시되도록 하는 반응형 웹 디자인의 핵심 요소 중 하나이다.
사용 방법
@media을 사용하여 정의하며 기본 구조는 다음과 같다.
@media media-type and (condition) {
/* 스타일 규칙 */
}
- media-type: 미디어의 유형 지정. 일반적으로 screen, print, all 등을 사용
- condition: 조건을 정의. 주로 화면의 너비, 높이, 해상도 등을 기준으로 설정
body {
font-size: 16px;
background-color: white;
}
/* 화면 너비가 600px 이하일 때 적용 */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
background-color: lightgray;
}
}
/* 화면 너비가 900px 이하일 때 적용 */
@media screen and (max-width: 900px) {
body {
font-size: 15px;
}
}
JavaScript
웹 페이지의 동적인 동작을 구현하기 위해 사용되는 프로그래밍 언어로 컴파일이 필요 없이 브라우저에서 직접 해석되어 실행되는 인터프리터 언어이다.
그리고 자바스크립트는 싱글 스레드로 동작하여 한 번에 하나의 작업만 처리할 수 있다.
그렇다면 동시에 처리해야 할 작업이 많을 때 성능에 문제가 있지 않을까?
자바스크립트의 실행 모델을 알아보도록 하겠다.

- 콜 스택: 현재 실행 중인 함수의 호출을 관리한다. 함수가 호출되면 스택에 추가, 호출이 끝나면 스택에서 제거
- 태스크 큐: 비동기 작업의 콜백을 대기시키는 큐.
- 비동기 작업이 완료되면, 해당 작업의 콜백 함수가 태스크 큐에 추가 (Web APIs가 작업 진행)
- 이벤트 루프: 콜 스택과 Task Queue의 상태를 체크, 만약 콜 스택이 비어있는 경우에 Task Queue에 있는 콜백함수들을 순차적으로 콜 스택에 추가
- Web APIs: 웹 브라우저에서 제공하는 다양한 기능과 서비스를 사용할 수 있게 해주는 API
- DOM API
- AJAX
- (Promise기반, Async / await)
- setTimeout
- 이벤트 리스너
console.log('first');
setTimeout(() => console.log('timeout'), 3000);
console.log('second');
위 코드의 실행 순서는 다음과 같다.
- console.log('first')가 콜 스택에 추가되고 실행이 끝나면 스택에서 제거
- setTimeout(() => console.log('timeout'), 3000)가 콜 스택에 추가되고, 해당 요청은 비동기 함수로 Web APIs로 넘어가서 처리된다. 콜 스택에서 제거된다.
- console.log('second'); 콜 스택에 추가되고 실행이 끝나면 스택에서 제거
- Web APIs가 작업을 마치고 Task Queue에 콜백 함수를 추가
- 콜 스택에 작업이 없으므로 이벤트 루프가 Task Queue에 있는 콜백을 콜스택에 추가하고 처리 후 스택에서 제거.
이벤트 루프는 자바스크립트의 메인 스레드인데 싱글 스레드이다. 따라서 자바스크립트는 싱글 스레드이며, 또한 동기적 언어인데 이러한 처리 방식으로 인해 마치 멀티 스레드인 것 처럼 동작한다.
Primitive Type
- Number: 숫자
- NaN → Number 타입이지만 숫자가 아닌 값을 나타냄
- String: 문자열
- Boolean: 불리언
- Null: 비어 있음
- Undefined: 정의되지 않음
null은 개발자들이 직접 할당하는 값이고 undefined는 초기화되지 않은 변수, 존재하지 않는 객체 속성 등에서 자동으로 발생하는 값이다.
Reference types
데이터의 주소를 참조하는 데이터 타입으로 해당 타입은 값이 아닌 메모리의 위치를 통해 접근되며, 기본형과는 다른 동작 방식을 가짐.
- 객체(object)
- 배열(array)
- 함수(function)
- 날짜(Date)
- 정규 표현식(RegExp)
변수 선언
변수는 var, let, const 키워드를 사용하여 선언 가능
var name = "Alice"; // 변수를 선언하고 초기화 (옛날 변수 선언 방식). var로 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 접근 X. 만약 함수 외부에서 선언하면 전역 변수로 간주
let age = 25; // 블록 범위 변수를 선언 (권장)
const PI = 3.14; // 변경할 수 없는 상수 (권장)
참고로 자바스크립트는 변수의 타입을 명시적으로 선언할 필요가 없고, 변수의 타입이 실행 중에 변경 가능하다.
→ 타입 체크가 런타임 시점에 일어나므로 자바와 같이 컴파일 시점에 타입 오류를 발견할 수 없다.
let variable; // 타입을 지정하지 않음
variable = 5; // 숫자형
variable = "Hello"; // 문자열로 변경
variable = true; // 불리언으로 변경
템플릿 리터럴
문자열을 다루는 새로운 방식으로 문자열을 보다 쉽게 작성하고, 변수나 표현식이 포함 가능해진다.
- 백틱(`)을 사용하여 문자열을 정의하고 ${}를 사용하여 변수뿐만 아니라 표현식을 삽입할 수 있음
let a = 5;
let b = 10;
let sum = `${a} + ${b} = ${a + b}`; // 템플릿 리터럴 사용
console.log(sum);
==, ===
- == : 타입 상관없이 값을 비교. (다른 타입 비교하면 타입 변환을 해서 비교를 함) 반대는 !=
- ===: 값과 타입을 모두 비교함. 반대는 !==
let num = 10;
let str = "10";
num == str; // true
0 == false; // true
null == undefined; // true
0 === false // false
null 병합 연산자
- ?? : 좌측 피연산자가 null 또는 undefined일 경우 우측 값을 반환하고, 그 외의 값이면 좌측 값을 그대로 반환.
Truthy, Falsy
- Truthy: 조건문에서 true로 평가되는 값으로 JavaScript에서 진리로 간주되는 모든 값.
- Falsy를 제외한 나머지
- Falsy: 조건문에서 false로 평가되는 값으로 JavaScript에서 거짓으로 간주되는 값.
- 불리언 false.
- 숫자 0, 음수 0.
- 빈 문자열
- null
- undefined
- NaN
따라서 조건문에서 사용될 때 truthy는 참, falsy 거짓으로 분류된다.
배열
여러 값을 순서대로 저장하는 데이터 구조로 다음과 같은 특징이 있다.
- 인덱스: 배열의 요소는 0부터 시작
- 동적 크기: 배열의 크기는 동적으로 조정되며, 필요에 따라 요소를 추가, 제거 가능.
- 혼합 데이터 타입: 자바스크립트에서 배열은 서로 다른 데이터 타입을 포함할 수 있음.
let mixed = [1, "two", true, null];
배열 메서드
- push(): 배열의 끝에 요소를 추가
- pop(): 배열의 마지막 요소를 제거하고 반환
- shift(): 배열의 첫 번째 요소를 제거하고 반환
- unshift(): 배열의 시작에 요소를 추가
- filter(): 주어진 조건을 만족하는 요소들로 새로운 배열을 생성
- sort(): 배열의 요소를 정렬 (기본은 모두 문자열로 변환 후 비교)
- reverse(): 배열의 요소 순서를 반전
- includes(): 특정 요소가 배열에 포함되어 있는지를 확인
- slice(): 배열의 일부를 복사
- splice(): 기존 배열에서 기존 요소를 제거, 대체, 새로운 요소를 추가해서 내용을 변경
객체 (Object)
키-값 쌍으로 데이터를 저장하는 구조. (키는 문자열로 변환)
let person = {
name: "hbb",
age: 20,
isStudent: true,
move: function() {
return `Hello, my name is ${this.name}.`;
},
move2() { // 축약 문법
return `Hello, my name is ${this.name}.`;
}
};
console.log(person.name);
console.log(person["age"]); //표현식이 사용 가능
console.log(person.move()]);
함수
입력을 받고, 작업을 수행한 후 출력을 반환하는 구조의 특정 작업을 수행하는 코드 블록
자바스크립트는 아래와 같이 파라미터가 여러 개 필요한 함수가 있을 때 인수를 모두 전달하지 않아도 오류가 발생하지 않는다.
Rest Parameter → 함수의 매개변수 목록에서 사용되어, 불특정 개수의 인수를 배열로 수집하는 데 사용되는 문법으로 ...(세 개의 점)을 사용하여 정의하며, 함수가 호출될 때 전달된 인수들을 배열로 모아준다.
function funcName(input, input2) {
// logic
return input;
}
funcName(1); // 정상적으로 1반환
function sum(...numbers) { // rest param
return numbers.reduce((accumulator, current) => accumulator + current, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100
고차함수
다음 두 조건 중 하나를 만족하는 함수
1. 다른 함수를 인수로 받는 함수
function operateOnNumbers(a, b, operation) {
return operation(a, b);
}
const add = (x, y) => x + y;
const subtract = (x, y) => x - y;
2. 함수를 반환하는 함수 (반환 함수)
function greeting(message) {
// 렉시컬 범위: 내부 함수는 외부 함수의 변수에 접근이 가능
return function(name) {
return `${message}, ${name}!`;
};
}
const greetHello = greeting("Hello");
console.log(greetHello("hbb")); // "Hello, hbb!"
콜백함수
다른 함수의 인수로 전달되어, 특정 작업이 완료된 후 또는 특정 이벤트가 발생했을 때 호출되는 함수
배열의 메서드 중 많은 경우 콜백을 인수로 받는다.
- forEach(): 배열의 각 요소에 대해 주어진 콜백 함수를 실행
- map(): 배열의 각 요소에 대해 콜백 함수를 호출하고 결과로 새로운 배열을 반환
- filter(): 배열의 각 요소에 대해 콜백 함수를 호출하고, 조건을 만족하는 요소로 새로운 배열을 반환
- some(): 배열의 요소 중에서 주어진 조건을 만족하는 요소가 하나라도 있는지 확인하고, 그 결과를 boolean 값으로 반환
- every(): 배열의 모든 요소가 주어진 조건을 만족하는지 확인하고, 그 결과를 boolean 값으로 반환
- reduce(): 배열의 각 요소에 대해 누적 계산을 수행하는 콜백 함수를 사용하여 단일 값을 생성
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, num) => accumulator + num, 0);
console.log(sum); // 15
This
자바스크립트에서 this는 함수가 호출되는 맥락에 따라 그 값을 다르게 가지는 키워드.
- 전역 컨텍스트에서 this는 전역 객체를 참조. 브라우저 환경에서는 window 객체
- 일반 함수로 호출할 때 this는 전역 객체를 참조
- 객체의 메서드에서 this는 그 메서드를 호출한 객체를 참조
- 생성자 함수에서 this는 새로 생성된 객체를 참조
- DOM 이벤트 핸들러에서 this는 이벤트가 발생한 요소를 참조
- 화살표 함수의 경우 자신만의 this를 가지지 않고, 외부 함수의 this를 정적 바인딩
전개 구문 (Spread syntax)
배열이나 객체를 펼쳐서 개별 요소로 변환하는 데 사용되는 문법으로 세 개의 점(...)으로 표현된다.
- 함수 호출 시 스프레드 구문
const numbers = [1, 2, 3, 4];
const sum = (a, b, c, d) => a + b + c + d;
console.log(sum(...numbers)); // 10
- 배열 스프레드 구문
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
- 객체 스프레드 구문
const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject };
console.log(newObject); // { a: 1, b: 2 }
구조 분해 할당 (Destructuring)
객체와 배열의 값을 쉽게 추출하고 변수에 할당하는 문법
- 배열
const fruits = ["apple", "banana", "cherry", "grape"];
// 배열의 요소를 변수에 할당
const [first, second, ...rest] = fruits;
console.log(first); // "apple"
console.log(second); // "banana"
- 객체
const person = {
name: "hbb",
age: 20,
email: "aaa@bbb.com"
};
// 변수 이름을 변경하여 할당
const { name, email } = person;
console.log(name); // "hbb"
console.log(email); // aaa@bbb.com
- 매개변수
function greet({ name, age }) {
console.log(`Hello, my name is ${name}`);
}
const person = { name: "hbb", age: 20, email: "aaa@bbb.com" };
greet(person); // "Hello, my name is hbb"
DOM(Document Object Model)
웹 페이지의 구조를 정의하고 이를 프로그래밍적으로 조작할 수 있도록하는 인터페이스이다.
브라우저가 웹 페이지를 띄울 때 HTML, CSS 정보를 받아들이고 요소와 스타일을 기반으로 JavaScript 객체를 생성하는데 여기서 body 태그에 포함된 모든 요소 하나하나에 대해 고유의 자바스크립트 객체가 생성된다.
즉 HTML문서를 객체로 표현하며, 각 요소는 객체의 속성으로 나타나기 때문에 JavaScript와 같은 프로그래밍 언어를 사용하여 문서의 내용과 구조를 동적으로 변경할 수 있다.
DOM의 구조
문서의 최상위 요소인 document 노드를 루트로 하며, 그 아래에 HTML 요소들이 자식 노드로 위치한다.
다음과 같은 html 파일이 있다면 해당 파일의 문서의 구조는 이미지의 트리 형태로 표현할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="title">hi</h1>
<ul>
<li>one</li>
<li>two</li>
</ul>
</body>
</html>

//CSS 선택자로 요소 선택 가능
const title = document.querySelector('#title');
const ul = document.querySelector('ul');
- DOM 요소의 내용을 읽거나 수정하는 데 사용되는 속성
속성 | 설명 | HTML 포함 여부 | 스타일 영향을 받음 | 숨겨진 텍스트 포함 |
innerText | 가시적인 텍스트 내용, 줄바꿈 반영 | 아니오 | 예 | 아니오 |
innerHTML | HTML 내용을 포함한 문자열 | 예 | 아니오 | 아니오 |
textContent | 모든 텍스트 내용 | 아니오 | 아니오 | 예 |
DOM 이벤트
웹 페이지에서 발생하는 사용자 상호작용이나 브라우저 동작을 감지하고 처리할 수 있다.
이벤트 종류
- 마우스 이벤트: click, dblclick, mouseover 등
- 키보드 이벤트: keydown, keyup, keypress 등
- 폼 이벤트: submit, change 등
- 문서/윈도우 이벤트: scroll 등
위 이벤트는 특정 이벤트가 발생했을 때 호출되는 addEventListener()를 통해 추가할 수 있다.
const button = document.getElementById('btn');
btn.addEventListener('click', function(event) { // 마우스 클릭 이벤트
console.log('버튼이 클릭되었습니다!');
});
여기서 콜백 함수에 event라는 객체가 있는데 이는 이벤트 객체로 이벤트가 발생하면 해당 객체가 동적으로 생성되어 콜백 함수의 매개변수로 전달된다.
preventDefault(): 메서드는 이벤트의 기본 동작을 막는 데 사용
<form action="/myForm" id="myForm">
<label for="name">이름:</label>
<input type="text" id="name" />
<button type="submit">제출</button>
</form>
위와 같이 이름을 입력하는 input, 제출하는 버튼으로 이루어진 폼이 있다고 하자.
여기서 버튼을 누르면 폼은 /myForm url로 폼을 제출한다.
이러한 기본 동작을 막고 싶다면 preventDefault() 메서드를 사용하면 된다.
const form = document.querySelector("#myForm");
form.addEventListener('submit', function (event) {
event.preventDefault(); // 기본 제출 동작 방지
console.log("hello");
});
이벤트 전파
버블링: 이벤트가 하위 요소에서 시작하여 상위 요소로 전파되는 것으로 기본적으로 버블링 방식으로 전파된다.
버블링을 막고싶다면 stopPropagation() 메서드를 사용하면 된다.
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function() {
alert('부모 요소 클릭!');
});
child.addEventListener('click', function(event) {
alert('자식 요소 클릭!');
event.stopPropagation(); // 이벤트 전파 중단
});
아니면 자식 요소의 이벤트를 부모 요소에서 처리할 수 있도록 이벤트를 위임하는 방법이 있다.
즉 자식 요소에 대해 개별적으로 이벤트 리스너를 설정하는 것이 아니라, 부모 요소에 하나의 리스너를 설정한다.
그렇다면 버블링에 의해 하위에서 발생한 이벤트는 상위 요소로 전파되므로 상위 요소의 이벤트가 호출된다.
<ul id="list">
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
const list = document.getElementById('list');
list.addEventListener('click', function(event) {
// 클릭된 요소가 li인지 확인
if (event.target.tagName === 'LI') {
console.log('hello');
}
});
Promises
비동기 작업의 성공 또는 실패를 처리하기 위한 객체. 즉 비동기 작업의 결과를 나타내며, callback hell을 피해 비동기 코드를 더 깔끔하고 가독성 있게 작성할 수 있게 한다.
Promise 상태
- Pending: 초기 상태, 작업이 아직 완료되지 않음.
- Fulfilled: 작업이 성공적으로 완료되어 결과 값을 가짐.
- Rejected: 작업이 실패하여 에러를 가짐.
비동기 작업을 위한 Promise 생성 방법
const myPromise = new Promise((resolve, reject) => {
const success = true;
if (success) {
resolve("작업 완료");
} else {
reject("작업 실패");
}
});
const task = (name) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${name} : 작업 완료`);
}, 1000);
});
};
task("hbb")
.then((result) => {
console.log(result);
return task("kim");
})
.then((result) => {
console.log(result);
return task("lee");
})
.then(result => console.log(result))
.catch(error => console.error(error));
- then(): Promise가 Fulfilled 상태일 때 호출.
- catch(): Promise가 Rejected 상태일 때 호출.
Promise는 체이닝이 가능하여 여러 비동기 작업을 순차적으로 처리가 가능하다.
then() 메서드는 새로운 Promise를 반환하므로, 다음 then()을 이어서 호출 가능한데, 만약 then()에서 예외나 오류가 발생할 경우 catch()를 호출한다.
(화살표 함수가 단일 표현식으로 이루어진 경우, 중괄호 {} 없이 작성하면 return을 사용하지 않아도 자동으로 해당 표현식의 결과가 반환된다.)
async / await
JavaScript에서 비동기 코드를 더 간결하고 읽기 쉽게 작성할 수 있게 해주는 문법.
async 키워드를 사용하여 정의된 함수는 항상 Promise를 반환하므로 함수 내부에서 비동기 작업을 수행할 수 있다.
await 키워드는 async 함수 내에서 사용하며, Promise가 이행(fulfilled)될 때까지 코드의 실행을 일시 정지한다. 이로 인해 비동기 작업의 결과를 동기적으로 처리할 수 있다.
async / await를 사용할 때는 try/catch 블록을 통해 비동기 작업에서 발생할 수 있는 오류를 처리할 수도 있다.
Promise 사용에서 예제 코드를 async / await로 바꾸어보도록 하겠다.
const task = (name) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${name} : 작업 완료`);
}, 1000);
});
};
const executeTasks = async () => {
try {
const result1 = await task("hbb"); // task(): Promise이므로 비동기 함수이지만 순차적 진행을 위한 await
console.log(result1); // 출력: "hbb : 작업 완료"
const result2 = await task("kim");
console.log(result2); // 출력: "kim : 작업 완료"
const result3 = await task("lee");
console.log(result3); // 출력: "lee : 작업 완료"
} catch (error) {
console.error(error); // 오류가 발생할 경우 출력
}
};
executeTasks(); // 비동기 함수 호출
AJAX (Asynchronous JavaScript and XML)
사용자가 웹 페이지와 상호작용할 때 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술
예전에는 XMLHttpRequest 객체를 생성해서 서버와 통신하였지만 최근에는 Fetch API, Axios가 널리 사용된다.
Fetch API
자바스크립트에 내장되어 있는 API로 Promise 기반으로 작동하고, HTTP 요청을 보다 간결하고 직관적으로 수행할 수 있게 한다.
다음은 Fetch API로 요청을 보내는 방법이다.
fetch('<http://localhost:8080/members/1>')
.then(response => {
return response.json(); // JSON 형식으로 변환
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
fetch('<http://localhost:8080/posts>', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: '게시글 1',
content: '게시글 1 내용',
memberId: 1
})
})
.then(response => {
return response.json(); // JSON 형식으로 변환
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
Fetch API는 위와 같이 응답을 JSON으로 변환하는 과정이 별도로 필요하다.
- JSON.stringify(): JavaScript 객체나 값을 JSON 문자열로 변환하는 메서드
- JSON.parse(): JSON 문자열을 JavaScript 객체로 변환하는 메서드
- 만약 인수로 undefined가 들어온다면 오류가 발생하므로 주의해야함
Axios
Promise 기반의 HTTP 클라이언트 라이브러리로, Fetch API에 비해 더 많은 기능을 제공하며, 사용이 간편하다.
다음은 axios로 요청을 보내는 방법이다.
axios.get('<http://localhost:8080/members/1>')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
const headers = {
'Content-Type': 'application/json',
};
axios.post('<http://localhost:8080/posts>', {
title: '게시글 1',
content: '게시글 1 내용',
memberId: 1
}, { headers: headers })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
Axios는 JSON 데이터를 자동으로 변환해주므로 사용이 편리하지만 라이브러리를 설치해야 하므로, 추가적인 의존성이 생긴다.
프로토타입
모든 JavaScript 객체는 Prototype이라는 내부 속성을 가지고 있고, 이는 다른 객체를 참조하고 있어 프로토타입을 통해 속성과 메서드를 상속받을 수 있다.
// Product 생성자 함수
function Product(name, price) {
this.name = name;
this.price = price;
}
// Product의 프로토타입에 메서드 추가
Product.prototype.getInfo = function () {
return `${this.name}의 가격은 ${this.price}원입니다.`;
};
// Food 생성자 함수
function Food(name, price, category) {
Product.call(this, name, price);
this.category = category;
}
// Food의 프로토타입을 Product의 프로토타입으로 설정
Food.prototype = Object.create(Product.prototype);
// Food의 프로토타입에 메서드 추가
Food.prototype.getCategoryInfo = function () {
return `${this.name}는 ${this.category} 입니다.`;
};
// 인스턴스 생성
const pizza = new Food("pizza", 5000, "fastfood");
// 메서드 호출
console.log(pizza.getInfo()); // 출력: "pizza의 가격은 5000원입니다."
console.log(pizza.getCategoryInfo()); // 출력: "pizza는 fastfood 입니다."
여기서 대문자로 시작하는 함수는 생성자 함수로 특정 객체를 생성하는 데 사용된다.
생성자 함수는 new 키워드를 사용하여 호출하면 새로운 객체가 생성되고 해당 객체의 this는 그 객체를 가리킨다.
위 코드에서는 Product, Food라는 생성자 함수를 정의하였다.
모든 자바스크립트 객체는 프로토타입이라는 내부 속성을 가지고 있고 이는 다른 객체를 참조한다고 하였다.
Product의 프로토타입에 getInfo()메서드를 추가하였고 이 메서드는 Product의 인스턴스에서 호출 가능하다.
프로토타입에 메서드를 추가하는 이유는, 모든 인스턴스가 같은 메서드를 공유할 수 있도록 하여 메모리 사용을 최적화하기 위함이다.
Food 생성자 함수는 Product의 생성자를 호출하여 name과 price를 초기화하고, Food의 프로토타입을 Product의 프로토타입으로 설정하여 Food 인스턴스가 Product의 메서드를 사용할 수 있도록 한다.
따라서 Food 인스턴스인 pizza가 getInfo(), getCategoryInfo()를 모두 사용할 수 있다.
클래스
클래스 문법은 ES6에서 도입되어 프로토타입 기반 상속을 더 간결하고 이해하기 쉽게 만들어준다.
클래스는 기본적으로 프로토타입을 기반으로 하며, 생성자와 메서드를 정의할 수 있다.
위 코드를 클래스로 수정하면 다음과 같다.
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
getInfo() {
return `${this.name}의 가격은 ${this.price}원입니다.`;
}
}
class Food extends Product {
constructor(name, price, category) {
super(name, price); // 부모 클래스(Product)의 생성자 호출
this.category = category; // Food의 추가 속성
}
getCategoryInfo() {
return `${this.name}는 ${this.category} 입니다.`;
}
}
const pizza = new Food("pizza", 5000, "fastfood");
// 메서드 호출
console.log(pizza.getInfo()); // 출력: "pizza의 가격은 5000원입니다."
console.log(pizza.getCategoryInfo()); // 출력: "pizza는 fastfood 입니다."
class 키워드를 사용하여 Product, Food 클래스를 정의하고, constructor 메서드(생성자)를 통해 인스턴스가 생성될 때 속성을 초기화하였다.
Product에는 getInfo() 메서드를, Food에는 getCategoryInfo() 메서드를 정의하였다.
- super - 부모 클래스의 생성자를 호출
- extends - 부모 클래스 상속
이렇게하면 생성자 함수, 프로토타입을 통한 상속을 구현하였을 때 보다. 가독성이 좋음을 확인할 수 있다.
Node.js
Java Script는 과거 웹 브라우저에서만 동작하는 프로그래밍 언어였지만 Node js가 등장함으로써 Java Script를 웹 브라우저로부터 독립시켜 실행할 수 있는 환경을 제공하였다.
- 비동기 I/O
- Node.js는 비동기 I/O 모델을 사용하여 서버가 여러 클라이언트의 요청을 동시에 처리할 수 있게 합니다.
- 단일 스레드
- Node.js는 단일 스레드로 작동하지만, 비동기 작업을 통해 동시에 많은 연결을 처리할 수 있습니다.
- npm(Node Package Manager)
- 수많은 패키지와 라이브러리 설치 가능
참고
HTML: Hypertext Markup Language | MDN
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기
developer.mozilla.org
'Fronted' 카테고리의 다른 글
[React] state와 리액트 훅 (0) | 2024.12.30 |
---|---|
[React] JSX, props (0) | 2024.12.30 |
[React] Critical Rendering Path, SPA (0) | 2024.12.30 |