(1) 옛날 방식 (Function Declaration)

function 키워드 사용. 호이스팅(Hoisting) 지원: 함수를 아래에 만들어도 위에서 실행 가능. (가독성을 해칠 수 있음)

function add(a, b) {
  return a + b;
}

(2) 요즘 방식 (Arrow Function) ⭐

const와 => 사용. 호이스팅 불가: 반드시 선언을 먼저 해야 실행 가능. (예측 가능성 UP)

const add = (a, b) => {
  return a + b;
};

2. 핵심: 중괄호 {}와 return의 관계 (세트 메뉴)

화살표 함수는 코드가 짧으면 괄호를 생략할 수 있는 강력한 기능이 있다. 단, 규칙이 있다.

(1) 중괄호가 있으면? 👉 return 필수!

포장지({})로 감쌌으면, 배달(return)을 명시해야 한다.

// ❌ 오답 (undefined 반환)
const toPyung = (m2) => { m2 * 0.3 } 

// ✅ 정답
const toPyung = (m2) => { return m2 * 0.3 }

(2) 중괄호가 없으면? 👉 return 생략! (자동 반환)

코드가 한 줄이라면 포장지를 벗겨버리자. 알아서 값을 반환해준다. (암시적 반환)

// 가장 깔끔한 실무 코드
const toPyung = (m2) => m2 * 0.3;

데이터가 3개면 console.log를 3번 쓰면 되지만, 100개라면? 반복문이 필수다.

1) for 문 (수동 조작)

시작점, 끝점, 증감(보폭)을 직접 설정한다.

장점: 순서를 내 맘대로(거꾸로, 짝수만) 조절 가능. 단점: 문법이 복잡하고, 조건 설정을 잘못하면 무한 루프에 빠질 위험이 있다.

// i가 0부터 시작해서; 개수보다 작을 때까지; 1씩 증가
for (let i = 0; i < products.length; i++) {
    console.log(products[i].name);
}

2) forEach 문 (자동 주행) ⭐추천

배열에 들어있는 요소를 처음부터 끝까지 알아서 하나씩 꺼내준다.

장점: i를 신경 쓸 필요가 없어 코드가 깔끔하고 안전하다. 실무: 데이터를 화면에 단순 나열할 때 가장 많이 쓴다.

// item: 꺼내진 상품 하나하나 (객체)
products.forEach(function(item) {
    console.log(item.name + "의 가격: " + item.price);
});

Deep Dive 1. 템플릿 리터럴 (백틱 `)

"" + name + "" 최신 자바스크립트(ES6)에서는 백틱(Backtick, 숫자 1 옆에 있는 ~ 키)을 쓰이며, 디자이너가 일러스트레이터에서 텍스트 박스 만들고 글자 쓰는 거랑 똑같다.

const name = "ARCHIVE 소파";
const price = 300000;

// ❌ 옛날 방식 (더하기 지옥)
console.log("상품명은 " + name + "이고, 가격은 " + price + "원 입니다.");

// ✅ 최신 방식 (백틱 사용)
// ${변수명} 자리에 변수를 쏙 집어넣으면 끝!
console.log(`상품명은 ${name}이고, 가격은 ${price}원 입니다.`);

HTML 예제

// 그냥 HTML 쓰듯이 쭉 쓰고 변수만 ${ }로
const htmlCode = `<div class="card">
    <h2>${name}</h2>
    <p>${price}원</p>
</div>`;

1) 배열 (Array): [ ]

개념: 연관된 데이터를 순서대로 담는 컨테이너 (트럭). 특징: 순서(Index)가 중요하며, 0번부터 시작한다.

2) 객체 (Object): { }

개념: 하나의 대상에 대한 상세 정보를 Key: Value로 묶은 포장 박스. 특징: 이름(Key)으로 값을 찾는다. (예: product.price)

3) 끝판왕: 배열 안에 객체 (Array of Objects)

실무 데이터의 99%는 이 구조다. "상품 리스트 트럭([]) 안에 개별 상품 박스({})가 실려있는 형태"다.

const products = [
    { name: "벨벳 소파", price: 300000, isSoldOut: false }, // 0번
    { name: "우드 테이블", price: 500000, isSoldOut: true }, // 1번
    { name: "플로어 램프", price: 50000, isSoldOut: false }  // 2번
];

1. 뒤쪽(End)에서 조작하기

데이터가 순서대로 쌓이고, 맨 마지막 것부터 건드리는 방식이다. (Stack 구조)

1) push() : 밀어 넣기 (추가)

상황: 장바구니 담기, 게시판 댓글 작성. 동작: 배열의 맨 끝에 데이터를 추가한다.

const cart = ["소파", "침대"];
cart.push("책상"); 
// 결과: ["소파", "침대", "책상"]

2) pop() : 꺼내기 (삭제)

상황: '실행 취소(Undo)', 뒤로 가기. 동작: 배열의 맨 끝에 있는 데이터를 삭제한다.

cart.pop(); 
// 결과: ["소파", "침대"] (방금 넣은 책상이 삭제됨)

2. 앞쪽(Front)에서 조작하기

데이터의 순서(Index)가 전체적으로 밀리거나 당겨진다.

1) unshift() : 새치기 (추가)

상황: 최신 뉴스, 인스타그램 피드 (최신 글이 맨 위에 와야 함). 동작: 배열의 맨 앞(0번)에 데이터를 추가하고, 나머지를 뒤로 민다.

const feed = ["어제 글", "그저께 글"];
feed.unshift("방금 올린 글");
// 결과: ["방금 올린 글", "어제 글", "그저께 글"]

2) shift() : 입장하기 (삭제)

상황: 선착순 대기열 처리, 할 일 목록 완료 처리. 동작: 배열의 맨 앞(0번) 데이터를 삭제하고, 뒤에 있는 것들을 앞으로 당긴다.

feed.shift();
// 결과: ["어제 글", "그저께 글"] (맨 앞글 삭제됨)

3. 중간(Middle) 저격하기: 스나이퍼

맨 앞이나 뒤가 아니라, 내가 원하는 위치를 콕 집어서 처리한다. 가장 중요하다.

⭐ splice() : 수술하기 문법: 배열.splice(시작인덱스, 삭제할개수) 상황: 장바구니 목록 중 특정 상품의 'X' 버튼을 눌러 삭제할 때.

const playlist = ["아이유", "박효신", "뉴진스"];
// 박효신(1번 인덱스)만 지우고 싶다면?

// "1번 자리에서 시작해서, 1개만 지워줘."
playlist.splice(1, 1);

console.log(playlist); 
// 결과: ["아이유", "뉴진스"]

2. 반복문

데이터가 3개면 console.log를 3번 쓰면 되지만, 100개라면? 반복문이 필수다.

1) for 문 (수동 조작)

시작점, 끝점, 증감(보폭)을 직접 설정한다.

장점: 순서를 내 맘대로(거꾸로, 짝수만) 조절 가능. 단점: 문법이 복잡하고, 조건 설정을 잘못하면 무한 루프에 빠질 위험이 있다.

// i가 0부터 시작해서; 개수보다 작을 때까지; 1씩 증가
for (let i = 0; i < products.length; i++) {
    console.log(products[i].name);
}

2) forEach 문 (자동 주행) ⭐추천

배열에 들어있는 요소를 처음부터 끝까지 알아서 하나씩 꺼내준다.

장점: i를 신경 쓸 필요가 없어 코드가 깔끔하고 안전하다. 실무: 데이터를 화면에 단순 나열할 때 가장 많이 쓴다.

// item: 꺼내진 상품 하나하나 (객체)
products.forEach(function(item) {
    console.log(item.name + "의 가격: " + item.price);
});

Deep Dive 1. 템플릿 리터럴 (백틱 `)

"" + name + "" 최신 자바스크립트(ES6)에서는 백틱(Backtick, 숫자 1 옆에 있는 ~ 키)을 쓰이며, 디자이너가 일러스트레이터에서 텍스트 박스 만들고 글자 쓰는 거랑 똑같다.

const name = "ARCHIVE 소파";
const price = 300000;

// ❌ 옛날 방식 (더하기 지옥)
console.log("상품명은 " + name + "이고, 가격은 " + price + "원 입니다.");

// ✅ 최신 방식 (백틱 사용)
// ${변수명} 자리에 변수를 쏙 집어넣으면 끝!
console.log(`상품명은 ${name}이고, 가격은 ${price}원 입니다.`);

HTML 예제

// 그냥 HTML 쓰듯이 쭉 쓰고 변수만 ${ }로
const htmlCode = `<div class="card">
    <h2>${name}</h2>
    <p>${price}원</p>
</div>`;

디자인할 때 레이어에 이름을 붙이거나, 컴포넌트를 만드는 것과 같다. 값을 재사용하기 위해 이름표를 붙여 저장하는 것이다.

const (상수)

개념: 한 번 선언하면 절대 바꿀 수 없는 값. 디자인 비유: 디자인 시스템의 Primary Color나 Logo. (Lock 걸린 레이어) 사용처: 브랜드명, 도메인 주소, 고유 ID 등.

let (변수)

개념: 상황에 따라 계속 바뀌는 값. 디자인 비유: Page Number나 Toggle State. 사용처: 스크롤 위치, 장바구니 수량, 현재 탭 번호 등.

JavaScript

// 쇼핑몰 'ARCHIVE' 예시

const brandName = "ARCHIVE";  // 절대 변하지 않음 (const)
let productCount = 50;        // 재고는 변할 수 있음 (let)

productCount = 49;            // 재고 변경 가능
// brandName = "Gagu";        // 에러! (const는 변경 불가)

자료형 (Data Type): 그릇에 담긴 '내용물'

변수라는 그릇에 담기는 데이터의 형태다. 실무에서 가장 많이 쓰이는 3가지.

String (문자열): 따옴표("", '')로 감싼 글자. Number (숫자): 연산이 가능한 숫자. Boolean (논리형): true / false 딱 두 가지 상태. (스위치 ON/OFF)

const productName = "벨벳 라운지 체어"; // String
const price = 300000;                 // Number
let isSoldOut = false;                // Boolean (품절 여부)

2. 연산자 (Operator)

데이터를 가공하거나 비교할 때 사용한다.

비교 연산자 (===) 중요: 자바스크립트에서는 '같다'를 표현할 때 = 하나가 아니라 === (등호 3개)를 써야 정확하다. (= 하나는 값을 '대입'할 때 쓴다.)

const myMoney = 200000;
const chairPrice = 300000;
console.log(myMoney > chairPrice); // false (살 수 없음)

Intro: True/False가 아니다 자바스크립트의 논리 연산자는 단순히 참/거짓을 알려주는 게 아니라, "선택된 값(Value)"을 반환한다. 이 원리를 모르면 화면에 의도치 않은 0이 출력되거나, 기본값 설정이 꼬이는 버그를 만나게 된다. 실무 필수 문법인 단축 평가, Truth/Falsy, 그리고 Null 병합 연산자를 정리한다.

1) Truthy vs Falsy (참과 거짓의 기준)

자바스크립트는 모든 값을 참 아니면 거짓으로 분류한다. 아래 5가지(Falsy)만 외우면, 나머지는 다 참(Truthy)이다.

false 0 (숫자 0) 🚨 주의! "" (빈 문자열) null undefined

Tip: "0"(문자열 0), "false", " " (공백)은 안에 내용물이 있으므로 참(Truthy)이다.

2) AND 연산자 (&&) : 깐깐한 문지기 (Guard)

원리: 앞에서부터 보다가 하나라도 거짓(Falsy)이면 그 값을 반환하고 끝낸다. (끝까지 다 참이어야 마지막 값을 줌)

용도: "조건부 실행". A가 있을 때만 B를 보여줘라.

const isLoggedIn = true;
const welcomeMsg = isLoggedIn && "환영합니다!";

console.log(welcomeMsg); // "환영합니다!"

3) OR 연산자 (||) : 낙천가 (Default Value)

원리: 앞에서부터 보다가 하나라도 참(Truthy)이면 그 값을 반환하고 끝낸다.

용도: "빈칸 채우기(기본값)". 입력이 없으면 기본값을 써라.

const userName = ""; // 입력 안 함 (Falsy)
const displayName = userName || "익명"; 

console.log(displayName); // "익명"
// 설명: 앞이 거짓이니, 뒤에 있는 "익명"을 선택함.

4) 실무 버그 1순위: 숫자 '0'의 함정

&& 연산자를 쓸 때 0은 거짓(Falsy)이므로, 0이라는 값 자체가 반환되어 화면에 출력되는 문제가 발생한다.

const count = 0; // 0개

// 의도: 0개니까 아무것도 출력 안 하겠지?
// 현실: 0은 Falsy니까, 0이라는 '값' 자체가 반환되어 화면에 찍힘.
const result = count && "결과 있음"; 

console.log(result); // 0 (숫자가 뚱하니 출력됨)

0을 거르고 싶을 땐, 확실한 조건식(부등호)을 써서 false를 만들어야 한다.

// 0 > 0 은 false(찐 boolean)이므로 안전함.
const safeResult = (count > 0) && "결과 있음";

5) 구원 투수: ?? (Null 병합 연산자)

|| 연산자는 0이나 ""도 거짓 취급해서 무시해버린다. (할인율 0%인데 할인 없음 처리 등) 이때 null과 undefined만 콕 집어서 거르는 ??를 사용한다.

const price = 0; // 무료 (유효한 데이터)

// ❌ || 사용 시: 0을 무시하고 3000원 결제됨
console.log(price || 3000); // 3000

// ✅ ?? 사용 시: 0을 인정해줌
console.log(price ?? 3000); // 0

요약 가이드 입력창 빈칸("") 처리할 때: 👉 || 사용 숫자 0도 데이터로 인정해야 할 때: 👉 ?? 사용

3. 조건문 (If-Else)

특정 조건에 따라 다른 코드를 실행하는 로직. 엑셀의 IF 함수나, 디자인의 Responsive(반응형) 분기점과 비슷하다.

실습: 회원 등급별 할인 로직 "VIP 회원이면 10% 할인, 아니면 5% 할인"을 코드로 구현해 보았다.

const VIP_LEVEL = "VIP"; // 기준값 (상수)
let myLevel = "NORMAL";  // 나의 현재 등급 (변수)

if (myLevel === VIP_LEVEL) {
  console.log("10% 할인 쿠폰 발급");
} else {
  // 굳이 'myLevel !== VIP_LEVEL' 조건을 다시 쓸 필요 없다.
  console.log("신규/일반 5% 할인 쿠폰 발급");
}

_💡 Insight: 전역 변수(Global Variable) 위 코드에서 VIP_LEVEL과 myLevel은 코드 최상단(대지 바깥)에 선언되었기 때문에 전역 변수다. 어디서든 가져다 쓸 수 있지만, 너무 남발하면 꼬일 수 있으니 주의하자. (마치 모든 레이어를 그룹 없이 최상위에 풀어놓 는 것과 같다!)

전체적 경험

UI(User Interface) 란

구성요소, 공간, 접점

USABILITY(사용성) 란

측정

UCD(User Centered Design) 란

마음가짐?

Design Thinking 란

이해하기

공감 -> 문제 정의

  - 공감: 사용자를 더 잘 이해하기 위해 리서치 수행
  - 문제정의: 리서치 결과와 사용자가 가진 문제를 연결

탐구하기

아이디어 -> 프로토타입

  - 아이디어: 문제 해결을 위한 창의적 아이디어 도출
  - 프로토타입: 아이디어를 눈으로 볼 수 있고 만질 수 있게 표현

구체화하기

검증 -> 실행

  - 검증: 사용자로부터 다시 피드백 얻기
  - 실행: 목표를 달성하기 위해 실행

1. 이미지 대체 텍스트 :

alt 속성으로 대체 택스트를 지정해주어야 한다

2. 스킵 네비게이션 :

alt 링크가 많은 페이지를 효율적으로 이용하기 위해서 스킵 네비게이션(바로가기)링크를 제공해야 한다

3. 문서의 구성화 :

헤딩태그(h1~h6) 목록(ul,ol,dl) 문단(p) 태그 등을 이용하여 내용에 맞게 태그를 분리하여야 한다

4. 메타태그 활용 :

보통 검색엔진 최적화(SEO)를 위해 메타 정보를 설정하며, html 문서의 head 태그 사이에 입력하고 타이틀,키워드,만든사람의 정보 등 웹페이지의 정보를 제공한다.

** 종류 ** ** 1. ** static(기본값) : 요소를 일반적 문서 흐름에 따라 배치합니다.

** 2. ** relative : 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 적용하며 다른 요소에는 영향을 주지 않습니다.

** 3. ** absolute : 일반적은 문서 흐름에서 제거하고, 가장 가까운 위치 지정 상위 요소에 대해 상대적으로 배치합니다. 상위 요소중에 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 합니다.

** 4. ** fixed : 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 모든 페이지의 같은 위치에(고정) 출력 됩니다.

이렇게 4가지의 속성이 있으며 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성을 통해 배치 할 최종 위치를 결정합니다.

웹 표준

웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대해 호환이 가능하도록 제시된 표준으로 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하고 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 통해 웹 페이지를 제작 하는 것을 말한다.

웹 표준 장점

1. 수정 및 운영관리가 쉽다 2. 접근성이 향상된다 3. 검색엔진의 최적화(SEO) 4. 효율적인 마크업 5. 호환성 가능(크로스 브라우징) 6. 브라우저와 os 관계없이 하나의 모드로 코든 플랫폼 대응 가능 7. 구조와 표현의 분리가 가능

모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준기술 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한 핵심이다.

오늘은 자바스크립트 호이스팅에 대해 이야기 해보겠습니다.

자바스크립트에는 호이스팅이라는 것이 있는데, 변수 및 함수를 유효범위 내에 최상단으로 끌어 올리는 것을 말합니다.

함수 호이스팅

b();
function b(){
  console.log('hyj');
};

위 코드를 보면 호출이 함수 선언보다 위에 있지만 함수선언문은 호이스팅으로 인해 유효범위까지 최상단으로 끌어 올려지기 때문에 정상적으로 작동을 합니다.

function b(){
  console.log('hyj');
};
b();

위 코드는 자바스크립트엔진에 의해 호이스팅 된 코드입니다.

변수 호이스팅

  function fruitName(){
    console.log("종류: " + fruit); //종류: undefined
      var fruit = "포도";
      console.log("이름: " + fruit);
}
fruitName()

위 코드를 보면 종류는 오류가 날 것 같지만 undefined가 나오는 것을 볼 수 있습니다.

  function fruitName(){
    var fruit; //호이스팅
    console.log("종류: " + fruit); // 종류: undefined 가 나오게 됩니다
    fruit = "포도"; //할당
      console.log("이름: " + fruit); //이름: 포도
}
fruitName()

위 코드는 자바스크립트엔진에 의해 해석된 코드입니다. 변수 호이스팅에 의해 var fruit는 유효범위인 fruitName함수 내에서 최상단으로 끌어 올려지고, 위에서 선언은 되었지만 할당은 console.log("종류: " + fruit);밑에서 이루어 지기 때문에 종류: undefined라는 결과가 나오게 됩니다.

for문을 공부할 때 다들 한번 쯤 해보셨을 별찍기 예제 입니다.

//삼각형 찍기
for(let i = 0; i < 5; i++){
    let str = "";    
        for(let j = 0; j <= i; j++){
            str  = str + "*";
        }
        // str += "\n"
    console.log(str)  // *, **, ***, ****, *****  
}

//역삼각형 찍기
for(let i = 5; i >= 1; i--){
    let str = "";    
        for(let j = 1; j <= i; j++){
            str  = str + "*";
        }
        // str += "\n"
    console.log(str) // *****, ****, ***, **, *
}

논리 연산자

// 논리합(||) 연산자 true || true // true true || false // true false || true // true false || false // false

// 논리곱(&&) 연산자 true && true // true true && false // false false && true // false false && false // false

// 논리 부정(!) 연산자 !true // false !false // true