1. 알고리즘이란?
알고리즘이란
어떤 문제를 해결하기 위한 순서와 방법이다.
즉,
“무엇을 어떻게 순서대로 할 것인가”를 정리한 것이다.
예시) 라면 알고리즘
- 물을 끓인다.
- 면과 스프를 넣는다.
- 3분 정도 기다린다.
- 불을 끈다.
이처럼
문제를 해결하기 위한 단계적인 절차가 알고리즘이다.
2. 웹의 기본 구조
웹은 크게 3가지로 구성된다.
- HTML → 구조 (공간 만들기)
- CSS → 디자인 (공간 꾸미기)
- JavaScript → 동작 (데이터와 기능)
3. HTML : 구조 (공간)
HTML은 화면에 보이는 구조를 만드는 언어이다.
자주 사용하는 태그
- div → 의미 없는 기본 박스
- nav → 네비게이션 영역
- section → 하나의 구역
- span → 인라인 요소
- ul → 리스트 묶음
- li → 리스트 항목
관계 개념
HTML은 트리 구조로 이루어져 있다.
- 부모 (Parent)
- 자식 (Child)
- 형제 (Sibling)
이 관계는 CSS 선택자와 JS에서 매우 중요하다.
4. CSS : 배치와 스타일
CSS는 만들어진 공간을 꾸미는 언어이다.
자주 사용하는 개념
- display
- float
- position
- flex
- 선택자 (~, + 등)
예:
display → block, inline, flex
position → relative, absolute, fixed
요즘 레이아웃은 대부분 flex를 많이 사용한다.
5. JavaScript : 동작과 데이터
JavaScript는
데이터를 다루고, 동작을 만드는 언어이다.
JS 핵심 4가지
- 변수
- 값
- 조건문
- 반복문
- 함수 / 객체
6. 공간과 데이터
HTML은 화면의 공간
JavaScript는 데이터의 공간
변수는 데이터를 담는 공간이다.
7. 데이터 종류
숫자 (Number)
123
-29
11
문자 (String)
"123"
"안녕"
※ "123"은 숫자가 아니라 문자이다.
8. console.clear()
console.clear();
콘솔 창을 깨끗하게 비우는 명령어이다.
이전 로그들을 모두 지워준다.
변수에서 재선언과 재할당 차이 정리
1. 변수란?
변수는 데이터를 담는 공간이다.
이름이 붙은 “공간”을 만들고, 그 안에 값을 저장하는 것이다.
예:
let a = 10;
여기서
a = 공간 이름
10 = 저장된 값
2. 재선언과 재할당 차이
재선언 (Re-declaration)
이미 만들어진 변수 이름을
다시 선언하는 것.
즉, 같은 이름의 공간을 또 만들려고 하는 것.
예:
let a = 10;
let a = 20; // 에러 (재선언)
이미 a라는 공간이 존재하는데
또 let a로 새 공간을 만들려고 해서 충돌이 발생한다.
재할당 (Re-assignment)
이미 만들어진 변수에
값만 다시 넣는 것.
예:
let a = 10;
a = 20; // 가능 (재할당)
공간은 그대로 두고
안의 값만 바꾸는 것이다.
3. var, let, const 비교
1) var (만능 컵)
console.log("== var ==");
// var : 재할당, 재선언 가능
var a = 10;
console.log(a);
var a = 10; // 가능
a = 20; // 가능
console.log(a);
var 만능_컵 = "물";
만능_컵 = "주스";
var 만능_컵 = "우유";
- 재할당 가능
- 재선언 가능
- 규칙이 느슨함
이미 있는 이름을 다시 선언해도 에러가 나지 않는다.
그래서 실수 발생 가능성이 높다.
2) let (절제된 컵)
console.log("== let ==");
// let : 재할당 가능, 재선언 불가능
let b = 10;
console.log(b);
// let b = 10; // 불가능
b = 20; // 가능
console.log(b);
let 절제된_컵 = "물";
절제된_컵 = "주스";
let 절제된_컵 = "물"; // 에러
- 재할당 가능
- 재선언 불가능
공간은 한 번만 만들 수 있다.
하지만 값은 바꿀 수 있다.
3) const (까다로운 컵)
console.log("== const ==");
// const : 재할당, 재선언 불가능
const c = 10;
// const c = 10; // 불가능
// c = 20; // 불가능
console.log(c);
const 까다로운_컵 = "물";
까다로운_컵 = "주스"; // 에러
const 까다로운_컵 = "주스"; // 에러
- 재할당 불가능
- 재선언 불가능
처음 저장된 값을 유지해야 한다.
4. 한 문장 정리
재선언 = 같은 이름의 공간을 또 만들려고 하는 것
재할당 = 이미 있는 공간에 값만 바꾸는 것
5. 선언 한 줄의 의미
let a = 10;
이 한 줄은 사실 두 단계다.
- a라는 공간을 만든다. (선언)
- 10이라는 값을 넣는다. (할당)
그래서
a = 20;
이건 선언이 아니라
값만 다시 넣는 것 → 재할당이다.
문제 - 변수
동영상
'코딩 > 수업메모' 카테고리의 다른 글
| JS 4강 개념- if, else if, else (0) | 2026.02.23 |
|---|---|
| JS 3강 개념 - 조건문(if, else if, else) (0) | 2026.02.20 |
| JS 1강 개념 - 출력문 (0) | 2026.02.20 |
| 컴포넌트 제작 및 반응형 상단바 코딩 (0) | 2025.12.09 |
| 251103 반응형 (0) | 2025.11.03 |