개발자의 작은 실험실

[게임 QA] 이제부턴 QA 공부도 해볼랍니다!

JeonLay — Sat, 4 Jul 2026 23:38:31 +0900

안녕하세용

되게 오랜만에 블로그 글을 쓰는 것 같네요 헤헤

원래는 코테 공부를 계속하면서 글도 올려보려고 했는데,

현생을 살다보니 두마리 토끼를 못 잡겠더라구요ㅠㅠㅠ

그러다가 오랜만에 다시 들어왔습니다!

제가 요즘에는 게임 QA에도 관심이 많아서

한동안은 QA 공부 위주로 해보면서

개발 공부도 간간히 병행해보려고 생각 중입니다^_^

그런 의미로!

게임 QA는 어떤 업무를 할까요?

단순히 게임을 테스트 하는 직무 아니야? 라고 생각하실 수 있는데,

게임의 기획 의도가 게임에 바르게 반영이 되었는지를 확인하고,

그에 맞는 TC(Test Case, 테스트 케이스)를 설계하는 업무도 함께 합니다!

정리해보면,

1. 기획 검토

2. TC 설계

3. 버그 찾기 -> BTS(Bug Tracking System, 버그 트래킹 시스템)에 기록

등의 과정을 통해 게임의 품질을 검증하고 검수하는 직무라고 할 수 있죠!

기획 의도대로 게임의 기능이 잘 작동하는지를 확인하는 것은 물론,

게임의 밸런스나 재미 요소도 함께 살펴보게 됩니다.

아무래도 기획서를 참고해 TC를 설계하거나 테스트를 진행하다 보니,

기획자분들, 개발자분들과 소통을 할 일이 많을 수 밖에 없어서

'커뮤니케이션' 능력도 중요하다고 하더라구요.

아무리 TC 설계를 잘하고, 테스트를 꼼꼼하게 한다고 해도,

소통이 제대로 이루어지지 않으면

게임의 품질을 검수하며 발견한 문제나 분석 내용을

정확하게 전달하기 어렵겠죠..?

저도 아직 배워가는 단계이긴 하지만,

앞으로 QA를 공부하면서 알게 된 내용들이나 느낀 점들을

조금씩 정리해서 기록해보겠습니다!

모두들 안녕~!!

[코딩테스트/JS] 오늘부터 꾸준히 코테 연습하기! | CodeSignal

JeonLay — Tue, 20 Jan 2026 09:00:43 +0900

교육을 들으면서도 꾸준히 블로그 작성을 하려했지만,,,
노션에만 정리해두고 글은 올리지 못한 나 ㅎ.ㅎ
역시 글을 꾸준히 쓰는건 너무 어렵다;<

요근래 취준하면서 계속해서 서류도 넣고,
인생 첫 면접도 보면서 새로운 경험을 많이 했는데

정작 제일 중요한 코딩 연습을 너무 안해버린 이슈...
그래서 서류를 붙어도 코테에 당연히 불합격할 수 밖에 없는 실력인...

넥토리얼도 그렇고.. 기업들 코테 어떻게 치는지 봤는데..
영어..로 코테를... 보는 곳도 꽤 있다니.. 난 영어 정말 못하는데...

그래서 더 위기감을 느껴서 영어 해석하는 연습도 해볼 겸 CodeSignal이나 LeetCode로 연습도 해보려고 한다!
(알고리즘도 공부를 해야..겠쬬.. 공부 열심히 안한 과거의 나 자신.. 정말 좋다^_^)

코딩하는 감을 잃지 않기 위해 이번에는 꼭 꾸준히 글도 쓰면서 연습하길 빌며... 아자잣

바로 CodeSignal의 다양한 학습 과정 중 Four-Week Coding Interview Prep in JavaScript 로 연습 시이작!~

CodeSignal 들어가보니 다양한 과정들이 많아서 영어 코테는 물론 다른 언어도 공부하기 좋아 보였음!

[String Manipulation Basics]

1. 모음 위치(인덱스) 찾기

문자열 s를 입력 받아, 문자열을 순회하며 모음의 0부터 시작하는 위치를 배열에 저장하는 함수를 작성한다.
JavaScript 내장 메서드 사용 금지.
예를 들어, console.log(findVowelPositions("Hello WORLD"))는 [1, 4, 7]을 출력해야 한다. 여기서 'e'는 모음이고, "Hello" 문자열에서 1번째 위치이다. 'o' 또한 모음이고, 4번째 위치이다. 마지막 모음은 7번째 위치의 'O'이다.
모음은 다음 문자 중 하나로 정의된다: ['a', 'e', 'i', 'o', 'u', 'A', 'E', 'I', 'O', 'U'].

function findVowelPositions(s) {
    const result = [];
    const vowels = ['a', 'e', 'i', 'o', 'u', 'A', 'E', 'I', 'O', 'U'];
    
    // 문자열을 0-based 인덱스로 끝까지 순회
    for(i=0; i<s.length; i++){
        const char = s[i];
        
        // 현재 문자가 모음 목록 중 하나인지 확인
        for(j=0; j<vowels.length; j++){
            if(char === vowels[j]){
                result.push(i); // 모음이면 s에서의 위치(i) 저장
             	break; // 불필요한 비교를 줄이고 중복 데이터에 대비할 수 있음
            }
        }
    }
    
    return result;
}

module.exports = { findVowelPositions };

2. charCodeAt, fromCharCode 없이 알파벳 시프트하기

주어진 문자열에서 모든 문자를 알파벳 순서대로 오른쪽으로 한 칸씩 이동시킨 새로운 문자열을 반환한다.
마지막 문자 'z'와 'Z'는 각각 첫 번째 문자 'a'와 'A'로 바뀌어야 하며, 문자가 아닌 경우에는 그대로 유지해야 해야 한다.
charCodeAt()이나 fromCharCode()와 같은 문자열 내장 메서드는 사용할 수 없다.
예를 들어, "abc123XYz!"라는 문자열이 주어지면, 함수는 "bcd123YZa!"를 반환해야 한다.

function solution(s) {
    const lower = "abcdefghijklmnopqrstuvwxyz";
    const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let result = "";
    
    for(let i=0; i<s.length; i++){
        const char = s[i];
        
        // z,Z 예외 처리
        if(char === "z"){
            result += "a";
            continue;
        } else if(char ==="Z"){
            result += "A"
            continue;
        }
        
        // char가 소문자일 경우
        let idx = -1; // lower나 upper에서 발견된 위치 저장하기 위한 변수
        for (let j = 0; j < lower.length; j++) {
            if (lower[j] === char) {
                idx = j;
                break; 
            } 
        }
        if(idx !== -1){
            result += lower[idx+1];
            continue;
        }
        
       // char가 대문자일 경우 
        for (let j = 0; j < upper.length; j++) {
            if (upper[j] === char) {
                idx = j;
                break; 
            } 
        }
        if(idx !== -1){
            result += upper[idx+1];
            continue;
        }
        result += char;
    }
    
    return result;
}

module.exports = { solution };

> break: 현재 루프 1개만 종료
> continue: 현재 반복을 끝내고 다음 반복으로!
> 난 왜 이런 개념도 헷갈리는 거지!!!!!!!! 후.. 왜겠어.. 열심히 공부 안한 탓이지..

3. toLowerCase, toUpperCase 없이 모든 소문자/대문자를 모든 대문자/소문자로 변환하기

주어진 문자열 inputString에서 모든 소문자를 대문자로, 모든 대문자를 소문자로 변환하는 함수를 작성한다.
문자가 아닌 경우에는 변환하지 않는다.
변환 과정에서 'toLowerCase()', 'toUpperCase()' 등의 JavaScript 내장 메서드를 사용하지 않는다.
예를 들어, 입력 문자열 "HelLo WoRld 123"의 출력은 "hELlO wOrLD 123"이어야 한다.

function solution(inputString) {
    const lower = "abcdefghijklmnopqrstuvwxyz";
    const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let result = "";
    
    for(i=0; i<inputString.length; i++){
        const char = inputString[i];
        
        let idx = -1;
        
        //소문자 -> 대문자
        for(j=0; j<lower.length; j++){
            if(char === lower[j]){
                idx = j
                break;
            }
        }
        if(idx !== -1){
            result += upper[idx];
            continue;
        }
        
        //대문자 -> 소문자
        for(j=0; j<upper.length; j++){
            if(char === upper[j]){
                idx = j
                break;
            }
        }
        if(idx !== -1){
            result += lower[idx];
            continue;
        }
        
        result += char;
    }
    
    return result;    
}

module.exports = { solution };

영어로 된 코테부터 연습하려하니 안그래도 안굴러가는 머리가 더 안굴러가는 기분이다ㅠ-ㅠ
코테를 지금에서야 준비한다는게 정말 늦었다고 생각해서

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

바로 실전으로 가보려고 했지만...?
JS 개념들을 꼭 되짚어봐야겠다고 느꼈다ㅠ (알고리즘들도...)
기초 복습도 하면서 하루에 코테 2~3문제씩은 꼭 풀 수 있도록 해보자아ㅏ아아아아ㅏ
(어떤 방식으로 기초 복습할지 다들 어떤식으로 계속 공부하는지 또 찾아봐야겠뜨아)

[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 4

JeonLay — Thu, 12 Jun 2025 21:38:47 +0900

JavaScript 기초 정리 - 스코프, 모듈, 객체, 조건문, 객체 비교

오늘 수업에서는 JavaScript의 스코프(Scope), 모듈 스코프, 객체(Object)의 구조와 활용,
그리고 조건문, 객체 비교 방식에 대해 배웠다!

스코프

| 블록 스코프 예제

// 전역
let scope = '전역'

{
  let scope1 = '지역'

  {
    let scope2 = '중첩된 지역'
    console.log(1, scope2) // ✅ '중첩된 지역'
  }

  console.log(2, scope1) // ✅ '지역'
}

console.log(3, scope) // ✅ '전역'

라인	코드	설명
2	let scope = '전역'	전역 스코프. 어떤 블록이나 함수 밖에 있으므로 어디서든 접근 가능
5~7	let scope1 = '지역'	첫 번째 블록 내부에만 존재. 블록 밖에서는 접근 불가
8~10	let scope2 = '중첩된 지역'	중첩 블록 내부에만 존재
10	console.log(1, scope2)	현재 블록 안이므로 '중첩된 지역' 출력
13	console.log(2, scope1)	scope1은 같은 바깥 블록에 있으므로 '지역' 출력
16	console.log(3, scope)	전역에 선언된 변수이므로 '전역' 출력

핵심 포인트: let, const는 블록 스코프를 가지므로 선언된 블록 안에서만 유효하다.

| 함수 스코프 예제

let name = '전역'
let nickname = '레이'

function 함수() {
  let name = '함수'

  function 중첩된함수() {
    let name = '중첩된 함수'

    console.log(1, name)      // ✅ '중첩된 함수'
    console.log(1, nickname)  // ✅ '레이'
  }

  중첩된함수()

  console.log(2, name)        // ✅ '함수'
}

함수()
console.log(3, name)          // ✅ '전역'

라인	코드	설명
1~2	let name, let nickname	전역 스코프
4	function 함수()	함수 스코프 생성
5	let name = '함수'	함수 안에서만 유효한 지역 변수
7	function 중첩된함수()	또 하나의 함수 스코프 생성
8	let name = '중첩된 함수'	이 안에서만 유효
10	console.log(1, name)	가장 가까운 name = '중첩된 함수'
11	console.log(1, nickname)	nickname은 전역에서 찾음
14	console.log(2, name)	중첩된 함수 바깥에 있는 '함수' 출력
18	console.log(3, name)	최상단 전역 name인 '전역' 출력

핵심 포인트: 함수는 자신만의 지역 스코프를 가지고, 안쪽 함수는 바깥 함수나 전역의 변수도 접근 가능하지만, 바깥은 안쪽 변수에 접근할 수 없다.

| 요약 비교

항목	블록 스코프 ({})	함수 스코프 (function)
적용 대상	let, const	var, 함수 내부 전체
바깥에서 접근	❌ 불가능	❌ 내부 변수 접근 불가
중첩 접근	✅ 안쪽은 바깥 참조 가능	✅ 내부는 외부 참조 가능
전역 변수 접근	✅ 가능	✅ 가능

모듈

| 기본 스크립트(`type="module"` 없이 작성된 스크립트)

파일 안에서 선언된 전역 변수는 전역 객체(window)에 등록된다.
따라서 다른 스크립트나 콘솔 등에서 접근이 가능하다.

| type="module"을 사용한 스크립트

해당 JS 파일은 모듈 스코프를 가지게 된다.
따라서 파일 내부의 전역 변수는 전역 객체(window)에 등록되지 않고 외부에서 접근할 수 없다.

즉, 일반 스크립트는 전역 변수 → window.변수명 으로 접근 가능하지만,
모듈 스크립트는 자체 스코프 안에서만 유효하다.

객체 (Object)

변수가 기억할 수 있는 데이터 타입은 아래의 두 가지 뿐.

기본(Primitive, 원시) 데이터 타입
객체(Object) 데이터 타입

| 객체란?

키(key)-값(value) 쌍을 포함하는 데이터
중괄호 {} 안에 쉼표로 구분하여 작성

// 객체 생성자(Constructor)를 사용해 객체 생성
const 우유 = new Object();
우유.이름 = '저지방 우유';
우유.브랜드 = '서울 우유';
우유.용량 = '1000ml';

// 객체 리터럴을 사용해 객체 정의 (쉬운 방법)
const 커피 = {
  용량: '600ml',
  브랜드: '스타벅스',
  이름: '아메리카노',
};

객체와 유사한 구조

HTML <dl> 설명 목록
CSS 스타일 블록

나의 노트북을 객체로 만들어 보자!

const labtop = {
  장치_이름: 'JYEON',
  프로세서: 'Intel(R) Core(TM) Ultra 5 125H   3.60 GHz',
  설치된_RAM: '16.0GB(15.6GB 사용 가능)',
  시스템_종류: '64비트 운영 체제, x64 기반 프로세서',
  펜_및_터치: '펜과 10개 터치 포인트 지원',
};

| 객체에 포함 가능한 값

JavaScript에서 유효한 모든 값 포함할 수 o

const anObject = {
  string: '객체란는 모든 값을 포함할 수 있습니다.',
  number: 2025,
  boolean: true,
  anotherObject: {},
  aFunction: function() {},
  anArray: [],
}

| 객체 속성 값 읽기

점 표기법: album.key
대괄호 표기법: album['key']

JavaScript의 속성은 “property"라고 하며, 객체의 key이다.
반면, HTML의 속성은 “attribute”라고 하며, 태그에 정의된 고정된 값이다.

대괄호 표기법 사용이 필요한 경우② 변수로 속성을 읽어야 할 경우
① 속성 이름이 따옴표로 묶인 경우 (유효하지 않은 속성 이름은 따옴표로 묶어야 한다.)

// 변수 이름 작성 규칙을 따르지 않는 객체의 속성 이름일 경우
const example = {
'유효하지 않은 속성 이름' : 'value'
}
console.log(example['유효하지 않은 속성 이름']) // value

// 변수를 통해 속성을 읽어야 할 경우
const macbookPro= {
macOS : '2.4 GHz 8코어 Intel Core i9',
}
let propertyName = 'macOS'
console.log(macbookPro[propertyName]) // '2.4 GHz 8코어 Intel Core i9'

| 객체 속성 값 쓰기

album.key = '앨범명'
album['key'] = '앨범명'

| 객체 속성 삭제

delete album.key
delete album['key']

| 객체의 메서드

객체의 속성 중 함수를 값으로 포함하는 속성을 메서드라고 부름
호출 방법: album.method() 또는 album['method']()
메서드에 매개변수 전달 가능

| 함수의 타입은?

객체 타입(Object Type)이다!!
객체 타입이기에 객체처럼 속성을 가질 수도 있다.

| 함수는 값으로 취급

함수가 값처럼 취급되는 성질: 일급 객체(First-class Object)
함수를 인수로 받거나 반환하는 함수: 고차 함수(Higher-order Function)

결국 함수는 값으로 취급 되고, 인수로 함수를 전달할 수 있다는 이야기다
+ 함수에서 함수를 반환할 수도 있다.

조건문 - if…else

특정 상황에서 프로그램의 작동을 조건부로 제어

// 예시
let isActive= true
if (isActive) {
  console.log('활성화 상태입니다.');
} else {
  console.log('비활성화 상태입니다.');
}

// 활성화 상태입니다.

| 참, 거짓 평가

모든 조건은 표현식이므로 참(Truthy) 또는 거짓(Falsey)인지 평가한다.

값이 거짓으로 평가되는 것들

false (boolean)
0 (number)
''(빈 문자열)
null
undefined
NaN (숫자 + undefined)

불리언 타입 변경

값이 거짓으로 평가되는 것들을 제외한 나머지 값은 모두 참으로 평가된다.

자동 타입 변경

조건문 내부에서 평가되는 표현식은 자동으로 불리언(Boolean) 타입으로 변경된다.

if (10 - 11) {
  console.log('조건이 참이다.');
} else {
  console.log('조건이 거짓이다.');
}

| 비교 연산자

숫자 비교에 사용: >, ≥, <, ≤
각 항을 비교하거나 같거나 다른지 평가에 사용: ==, ===, ≠, ≠=

느슨한 vs 엄격한 비교

1. 느슨한 비교

==, !=
변수의 할당된 값의 타입이 유동적으로 변경될 수 있다.
따라서 타입이 다른 두 값을 비교할 때, JavaScript가 타입을 자동 변환해서 비교하기 때문에 예측과는 다른 평가가 될 수 있다.

모든 타입을 숫자로 자동 변환 시도한다.

2. 엄격한 비교

===, !==
엄격한 비교를 수행할 때, 두 가지 사항을 확인한다.
- 변수에 할당된 값의 타입
- 변수 값
JavaScript가 타입을 자동 변환하지 않기 때문에 예측한 대로 평가된다.

| else if 문

조건이 여럿인 경우에는 if, else 외에도 else if문을 사용해 비교하여 처리

객체 비교

| 동치 vs 동등 연산자

객체 타입의 비교는 기본 타입의 비교 처리와 다르다.

연산자	비교 방식	의미
===	엄격한 동치	값과 타입이 모두 같아야 true
==	느슨한 동등	값만 같으면 true (타입 자동 변환)

객체끼리는 ===나 == 모두 참조가 다르면 false!

| 객체는 참조로 비교된다.

⇒ “고유 식별자”가 생기는데, 이를 “객체 참조(Object Reference)”라고 한다.

(like 신분증)

객체는 값이 아니라 참조(메모리 주소) 를 비교한다.
아무리 모양이 같아도 참조가 다르면 다른 객체이다.
같은 참조를 가리킬 때만 === 결과가 true

| 메모리와 객체

타입 종류	저장 위치	비교 방식
기본(원시) 타입	스택(Stack)	값 자체를 비교
객체(참조) 타입	힙(Heap)	참조(주소)를 비교

기본 타입의 값은 = 를 하면 값이 복사된다.
그런데 객체 타입은 값이 복사되는 것이 아니라 참조가 복사된다.
따라서 객체 타입은 값이 비교되는 것이 아니라, 참조가 비교되는 것이다.

| 객체 속성·값이 같은지 확인하려면?

===로는 비교 불가 (참조만 비교)
모든 속성과 값을 하나씩 비교해야 함
이를 위해 반복문(루프) 사용해야 한다. → 이건 다음번에 학습!

오늘의 느낀 점 !

오늘 배운 스코프, 모듈, 객체, 조건문, 객체 비교에서 몇 가지는 익숙한 개념들이라 부담 없이 받아들일 수 있었다.

그런데, '일급 객체'라거나 '고차 함수' 같은 용어는 처음 들어봐서 조금 낯설었…지만,

결국 이 용어들이 말하고자 하는 건 결국 함수도 값이다! 라는 개념이라 이해할 수 있었다.

그리고 객체 참조랑 메모리 구조에 관해서 설명을 들을 때는

"아.. 전공 수업 때 배운 내용이네..." 싶은 순간이 있었는데, 그걸 거의 다 까먹은 나 자신이 살짝 미울 뻔했다...^_^

그만큼 더 공부해서 잊어버린 것들을 되찾아야겠다는 다짐을 해본다

[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 3

JeonLay — Wed, 11 Jun 2025 23:31:53 +0900

자바스크립트 기초 정리 2

| 기본값, return, 표현식, 호이스팅, 함수 선언 방식, 화살표 함수 표현식

오늘은 어제에 이어서 함수에 대해서 마저 배우고, 화살표 함수 표현식에 대해 배웠다!

함수 (Function)

| 함수, 변수의 기본값

undefined

| 반환값

return 키워드로 값을 명시적 반환한다.
함수 내부에서 return을 사용하면 실행을 중단하고 값을 반환함.
return 아래 코드들은 실행되지 않음.
return이 없으면 함수는 암묵적으로 undefined를 반환함.

function add(x, y) {
  return x + y;
}

| 표현식

전달되기 전에 평가되어야 하는 값
- 예: 12 + 9, sum(21 + 11 ,9)
표현식(예: 21 + 11)을 전달하는 경우, 해당 표현식은 함수에 전달되기 전에 먼저 평가
함수를 호출해 반환 값을 다른 함수에 전달하는 경우, 값을 사용하기 전에 먼저 함수 평가
자바스크립트는 오직 "값"만 전달할 수 있음.

| 함수 선언 방식 2가지

함수 선언: 특정 순서에 따라 작업이 실행되는 코드 묶음(블록)

1. function을 사용한 함수 선언

function add(x, y) {
	return x + y
}

2. 함수 표현식(expression)

함수명을 지정하지 않아도 함수를 선언할 수 있다.
익명(Anonymous) 함수라고도 함.

const add = function(x, y) {
	return x + y
}

| 호이스팅 (Hoisting)

함수 선언

function 선언 방식은 호이스팅되어 코드의 맨 위로 끌어올려짐.
함수 호출이 선언보다 먼저 나와도 정상 작동함.

→ 코드를 구조적으로 정리하기 좋음.

sayHello() // 가능

function sayHello() {
  console.log('안녕!')
}

함수 표현식

var, let, const로 선언한 함수 표현식은 변수 선언 자체는 호이스팅되지만, 함숫값은 호이스팅되지 않음
선언 전에 호출하면 에러 발생.

sayHello() // ❌ 에러

const sayHello = function() {
  console.log('안녕!')
}

변수 선언 (var, let, const)

var로 선언한 변수는 선언과 동시에 undefined로 초기화됨.
선언 이전에 접근하면 undefined가 출력됨.
따라서 참조는 가능하지만, 값은 아직 할당되지 않음.

console.log(마이네임) // undefined

var 마이네임 = '레이'

let과 const는 호이스팅은 되지만 "TDZ(Temporal Dead Zone)" 때문에
선언 전에 접근하면 참조 에러(ReferenceError) 발생함.

console.log(마이네임) // ❌ ReferenceError

let 마이네임 = '레이'

변수 선언 방식별 동작 비교 (함수 호출 vs 변수 참조)

구분	var	let	const
호이스팅	O (선언 + undefined 초기화)	O (but TDZ에 걸림)	O (but TDZ에 걸림)
초기화 시점	선언과 동시에 undefined	선언문 도달 시	선언문 도달 시 (초기화 필수)
선언 전 변수 참조 시	가능 (undefined 반환)	ReferenceError	ReferenceError
선언 전 함수 호출 시 (※ 함수 표현식일 때)	TypeError (undefined is not a function)	ReferenceError	ReferenceError
재할당 가능 여부	가능	가능	불가능

TDZ (Temporal Dead Zone, 일시적 사각지대)
- 변수는 호이스팅되어 메모리에 등록은 되어 있지만, 초기화되기 전까지 접근할 수 없는 구간

호이스팅 현상을 잘 이용하면 코드의 실행 흐름을 깔끔하게 유추할 수 있다.

// 코드 흐름을 먼저 보여줌
wakeUp()
brushTeeth()
haveBreakfast()

// ...

// 함수들은 파일 맨 끝에 배치
function wakeUp() {
  console.log('⏰ 일어납니다.')
}

function brushTeeth() {
  console.log('  이를 닦습니다.')
}

function haveBreakfast() {
  console.log('  아침을 먹습니다.')
}

화살표 함수 표현식

화살표 함수는 뚱뚱한 화살표(Fat Arrow =>) 모양을 사용
function 키워드 제거
함수의 (), {} 사이에 => 모양 추가

let readABook = (bookName) => {
  console.log('"' + bookName + '"을 읽는다.');
};

readABook('로미오와 줄리엣'); // "로미오와 줄리엣"을 읽는다.

| 다양한 화살표 함수 구문

1. 매개변수 개수

// 1. 매개변수의 개수
//    0개
let readABook = () => {
  console.log('책을 읽는다.');
};

// 매개변수를 사용하지 않을 경우, 관례로 밑줄(_)을 사용할 때도 있다.
let readABook = _ => {
  console.log('책을 읽는다.');
};


//    1개
let readABook = (bookName) => {
  console.log('"' + bookName + '"을 읽는다.');
};
readABook('오만과 편견')

//    매개변수 1개면 소괄호 생략 가능
let readABook = bookName => {
  console.log('"' + bookName + '"을 읽는다.');
};
readABook('오만과 편견')


//    2개 이상인 경우, 소괄호는 생략하지 않는다.
let readABook = (bookName, day) => {
  console.log(day+'일에 걸쳐서 '+'"' + bookName + '"을 읽는다.');
};
readABook('오만과 편견', 21)

2. 암묵적 반환

1. 함수에 한 줄의 코드만 작성
2. 해당 코드 줄을 중괄호({})로 묶지 않는다.

위 두 가지 조건이 충족될 경우, 자동으로 반환문을 생성한다.
암묵적으로 반환 기능을 사용하면 세 줄의 코드를 단 한 줄로 줄일 수 있다!

화살표 함수에서 객체를 반환할 때 주의할 점

아래의 코드처럼 작성하면 오류가 발생한다.

let getStyles = _ => {
  'display': 'flex',
  'row-gap': 24

Uncaught SyntaxError: Unexpected token ':'

이유

화살표 함수에서 중괄호 {}는 "함수의 코드 블록"으로 해석된다.
자바스크립트는 { 'display': 'flex' }를 객체가 아니라 일반 코드 블록으로 보고 처리
결과적으로 객체 리터럴 문법을 잘못된 코드로 인식해서 오류가 발생한다.

✅ 해결 방법

let getStyles = _ => ({
  'display': 'flex',
  'row-gap': 24
})

소괄호 ()로 감싸면 중괄호 {}가 "객체 리터럴"로 인식됨
따라서 함수는 해당 객체를 암묵적으로 반환하게 된다.

➕ 왜 함수 표현식에 const를 사용할까?

// 잘못된 예시
let thisIsAFunction = () => {
  console.log('이것은 함수입니다.')
}

thisIsAFunction = {}      // ❌ 함수가 다른 타입으로 재할당됨
thisIsAFunction()         // ❌ TypeError: thisIsAFunction is not a function

| 정리 포인트

1. const는 재할당을 막아준다

const로 선언하면 변수 자체를 다른 값으로 바꾸는 것이 불가능함.
즉, 실수로 함수가 다른 타입(예: 객체, 숫자)으로 덮어쓰게 되는 것을 방지할 수 있음.

const thisIsAFunction = () => {
  console.log('함수입니다.')
}

thisIsAFunction = {} // ❌ TypeError: Assignment to constant variable

2. 화살표 함수는 값(데이터)이기 때문에 변수에 할당됨

화살표 함수는 함수 선언이 아니라 함수 표현식이다.
자바스크립트에서 함수 표현식은 하나의 값(value)이므로 변수에 할당되는 게 기본.
함수는 변하지 않아야 하는 값이기 때문에, const를 쓰는 것이 일반적인 패턴.

3. 함수의 의도와 역할을 명확하게 표현

이 변수는 “변하지 않는 함수”임을 선언 시점부터 드러낼 수 있음.
팀원 또는 미래의 나에게 “이 변수는 바뀌면 안 돼”라는 메시지를 줌.

| 정리 요약

화살표 함수는 const로 선언하는 것이 기본 패턴이다.

실수로 다른 값으로 재할당하는 것 방지

이 함수가 "변하지 않아야 할 값"임을 명확하게 보여줌

따라서 함수 표현식에는 let보다 const가 더 안전하고 권장된다.

오늘의 느낀점 !

기존에 알고 있던 언어들과 유사한 부분도 있어서 해당 부분들은 아마도(?) 이해하기 수월했던 것 같다...!

그런데 호이스팅이라는 개념이 이해되는 듯하면서도 생소했다...

특히 변수의 호이스팅에 대해서 배웠을 때, 왜 var는 호이스팅이 되고 let과 const는 호이스팅이 안된다고 하는지 정확히 이해하지는 못했다

그래서 AI와 검색의 도움을 받아서 자바스크립트에서 변수의 호이스팅에 대해 좀 더 공부해 봐야 할 것 같다.

점점 배우는 양이 늘어나니까 언제 과부화가 올진 모르겠다.

'학'만 하는 것이 아닌 꼭 '습'까지 해서 기초 지식을 나의 것으로 만들어버리자~!!

[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 2

JeonLay — Wed, 11 Jun 2025 00:48:42 +0900

자바스크립트 기초 정리 - 주석, 세미콜론, 데이터 타입, 변수, 함수

오늘은 JavaScript에서 꼭 알아야 할 개념들을 배웠다.

처음 배우는 JavaScript인 만큼 수업에 집중해서 기초부터 차근히 다져가자!

주석 (Comments)

| 한 줄 주석

// 한 줄 주석이다.

| 여러 줄 주석

/* 여러 줄 주석입니다. 
여러 줄에 걸쳐 설명할 수 있다. */

주석은 JavaScript 파일 내부에서 코드 설명을 남길 때 사용

; 세미콜론 (Semicolons)

| 꼭 써야 할까?

JavaScript는 줄 끝마다 세미콜론(;)을 붙이는 언어지만, 생략해도 동작하는 경우가 많다고 한다.
이는 ASI(Automatic Semicolon Insertion) 기능 덕분이다.

console.log(2025); 
console.log(6) 
console.log(10);

위처럼 세미콜론을 생략해도 대부분의 경우 실행된다.
하지만 코드 압축 시 오류가 발생할 수 있기 때문에, 명시적으로 붙이는 것을 권장한다.

세미콜론을 사용하려면...

세미콜론을 써야할 때, 쓰면 안될 때를 구별해야한다.
그래서 “세미콜론을 항상 쓰자”라면 신경 써야할게 많다.

세미콜론을 사용하지 않으려면...

절대 [, {, ‘로 줄을 시작하지 않는 것!
쓰게 된다면 줄 앞에 세미콜론 붙여주면 됨.

팀 프로젝트에서는?

팀마다 세미콜론 사용 여부를 통일하는 것이 중요하다.
Prettier, ESLint 같은 린터 도구를 사용해 자동으로 맞춰주는 것이 편하다!

기본 데이터 타입 (Primitive Types)

JavaScript에는 총 7가지의 기본 타입이 존재한다.

String (문자열)
Number (숫자)
Boolean (불리언)
Null (널)
Undefined (언디파인드)
Symbol (심볼)
BigInt (빅인트)

1. 문자열 (String)

console.log("It's my birthday!");
console.log('나의 기록은 12\'26\"입니다.');
console.log('기록: ' + "12'26\"");

문자열은 ' 또는 "로 감싼다.
문자열은 + 연산자로 연결할 수 있다.

2. 숫자 (Number)

console.log(123 + 456); 
console.log(1_000_000_000); // 자릿수 구분자 사용 가능

정수, 소수 모두 포함
산술 연산: +, -, *, /, % 사용 가능
안전 범위는 Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER 참고

3. 불리언 (Boolean)

console.log(true); 
console.log(false);

true 또는 false 두 값만 존재

4. Null

console.log(null); // 의도적으로 '없음'을 나타냄

5. Undefined

let result; 
console.log(result); // 값이 정의되지 않음

6. Symbol

console.log(Symbol('id'));

고유한 식별자가 필요할 때 사용
객체에 속성을 추가할 때 고유한 키를 부여하여 다른 코드와 충돌하지 않도록 할 때 많이 쓰임

7. BigInt

console.log(BigInt(Number.MAX_SAFE_INTEGER + 10))
console.log(10000000000n); // n을 붙이면 BigInt로 인식

매우 큰 정수를 다룰 수 있음

변수 (Variables)

| 변수란?

데이터를 기억하고 재사용하기 위한 이름 있는 저장 공간
의미 있는 변수명을 사용하면 코드의 가독성과 이해도가 높아짐.

let count = 10; 
const MAX_VALUE = 100;

| 변수 선언 키워드

키워드	설명	재할당	권장 여부
let	일반 변수	✅ 가능	✅
const	상수 (변경 불가)	❌ 불가	✅
var	예전 방식	✅ 가능	❌ (지양)

| 변수 이름 규칙

숫자로 시작 ❌
특수문자 중 _, $만 허용
예약어 사용 금지
카멜 표기법 사용 권장 (예: myVariableName)

let totalApples = 31;

| var vs let

1. var myName

{
  var myName;
  console.log(1, myName);   // ✅ undefined (호이스팅)
  myName = 'apple';
  console.log(2, myName);   // ✅ apple
}

myName = 'pineapple';       // ✅ 가능: var은 블록 밖에서도 접근됨
console.log(3, myName);     // ✅ pineapple

var는 블록 {}을 무시하고 해당 함수 전체나 전역 범위로 끌어올려짐.
그래서 블록 외부에서도 myName을 계속 사용할 수 있다.

2. let myName2

{
  let myName2;
  console.log(1, myName2);   // ✅ undefined
  myName2 = 'apple';
  console.log(2, myName2);   // ✅ apple
}

myName2 = 'pineapple';       // ❌ ReferenceError
console.log(3, myName2);

let은 블록 스코프라서 {} 블록 바깥에서는 존재하지 않는 변수로 취급
따라서 myName2 = 'pineapple' 부분에서 ReferenceError 발생

요약 정리

구분	var	let
선언 위치	함수 스코프	블록 스코프
블록 바깥에서 접근	✅ 가능	❌ ReferenceError
호이스팅 시 초기화	undefined	TDZ(선언 전 접근 불가)
실무 사용	❌ 지양	✅ 표준 방식

| const vs let

const - 상수

: 처음 선언 시 할당된 값이 이후에 변경되지 않음

let - 변수

: 시간의 흐름에 따라 값이 변경됨

함수 (Functions)

| 함수란?

특정 작업을 실행하는 코드 블록
입력 → 처리 → 출력 구조

function sayHello(name) { 
	return 'Hello, ' + name; 
} 

console.log(sayHello('Alice')); // Hello, Alice

함수는 function 키워드로 선언
()를 붙이면 함수 실행
매개변수(Parameter)는 함수 내부에서 사용할 변수
인수(Argument)는 함수 호출 시 전달하는 값

| 함수 이름 작성 규칙

숫자로 시작 ❌
공백 ❌
의미 있는 이름 사용
카멜케이스 사용 (drawWater, sayHello 등)

| 매개변수 vs 인수

function greet(name) { 
	// name = 매개변수 
    console.log("Hello " + name); 
} 

greet("Bob"); // "Bob" = 인수

| 예시: 일기 작성 함수

function writeDiary(year, month, day) { 
	console.log(`${year}년 ${month}월 ${day}일에 일기를 씁니다.`); 
    } 
    
writeDiary(2025, 6, 10);

> 2025년 6월 10일에 일기를 씁니다.

오늘의 느낀 점 !

처음 배우는 JavaScript 였지만, 다른 언어들을 해본 적 있어서 그런지 다행히도 이해가 어렵지는 않았다.

그렇지만 타 언어랑 다른 부분도 존재하기 때문에 조금 헷갈려서 역시 복습을 안하면 안될 것 같다

나중에 본격적으로 코드 작성을 하게 된다면 조금 어질어질해질 것 같지만?

"포기하지 않고 나아가다보면 마스터하겠지~!!" 라는 마인드로 열심히 배워나가기!

[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 1

JeonLay — Wed, 11 Jun 2025 00:10:35 +0900

프로그래밍과 자바스크립트의 이해

드디어 JavaScript 배우게 된 첫 번째 날이다.

UI 프로젝트를 끝낸 뒤 처음 듣는 수업이었는데.. 집중력이 많이 떨어짐을 느꼈다ㅠㅠ

그렇지만 열심히 정신을 차리고 수업을 들었다..!

오늘은 프로그래밍을 처음 배우는 입장에서 꼭 알아야 할 개념들과, JavaScript가 어떻게 웹의 핵심 언어가 되었는지를 배웠다.

프로그래밍이란?

: 컴퓨터에게 일을 시키기 위한 명령어를 작성하는 과정

이때 사람과 컴퓨터 간 소통을 위해 사용하는 도구가 바로 프로그래밍 언어이다.

컴퓨터는 자연어를 이해하지 못한다!

컴퓨터는 한국어, 영어 같은 자연어를 이해하지 못한다.
대신, 정의된 문법을 가진 언어(프로그래밍 언어)로만 명령을 인식한다.

프로그래밍 언어의 종류

1. 머신 코드 (Machine Code)

컴퓨터가 직접 이해할 수 있는 유일한 언어
0과 1로 이루어져 있으며, CPU마다 해석 방식이 다릅니다
사람이 직접 작성하거나 해석하기 매우 어렵습니다

2. 저수준 언어 (Low-Level Language)

머신 코드에 가까운 언어로, 하드웨어 제어에 적합합니다
대표 예시: 어셈블리 언어

MOV AL, 61 ; 레지스터 AL에 61 넣기

3. 고수준 언어 (High-Level Language)

사람이 읽고 쓰기 쉬운 언어
하드웨어보다는 생산성과 유지보수에 유리
예시: JavaScript, Python, Java, C 등

컴파일러 vs 인터프리터

구분	컴파일러	인터프리터
실행 방식	전체 코드 번역 후 실행	한 줄씩 읽어 실행
실행 속도	빠름	느림
에러 처리	번역 후 일괄 처리	실행 중 바로 발생
출력 결과	실행 파일 생성	별도 실행 파일 없음
예시 언어	C, Java	Python, JavaScript

JavaScript는 대표적인 인터프리터 언어

인터미디에이트 코드 (중간 코드)

컴파일러 + 인터프리터의 중간 단계
일부만 번역한 문서
예: Java → 바이트코드 → JIT → 실행

➕ 트랜스파일러 (Transpiler)

한 고수준 언어를 다른 고수준 언어로 변환하는 것

JavaScript란?

: 웹 브라우저에서 동작하는 대표적인 고수준 언어

현재는 프론트엔드뿐 아니라 서버(Node.js), 데스크탑, 모바일 등으로 영역이 확장되었다.

| 특징

인터프리터 기반 언어
동적 웹 제작에 필수
사용자와의 상호작용, HTML/CSS 조작, 애니메이션 등 가능

JavaScript의 역사와 생태계

1. 탄생 배경

Netscape가 동적인 웹을 만들기 위해 JavaScript의 초기 형태인 Mocha 개발
이후 LiveScript를 거쳐 JavaScript라는 이름으로 재탄생

2. 브라우저 전쟁

Netscape vs Microsoft (JavaScript vs JScript)
호환성 문제로 인해 ECMA에서 표준화 → ECMAScript

3. AJAX의 등장

페이지 전체를 새로고침하지 않고 서버와 통신 가능
Gmail, SPA 등의 기반 기술로 사용됨

4. 현재와 미래

Node.js를 통해 서버 개발까지 가능
V8 엔진, WebAssembly, 프레임워크(React 등)를 통해 지속 발전 중

JavaScript 엔진

JavaScript 코드를 실제로 실행해주는 프로그램을 엔진이라고 부른다.

| 대표 엔진

V8 (Chrome, Node.js 등)
SpiderMonkey (Firefox)
JavaScriptCore (Safari)

| V8의 실행 과정

코드 입력 - 사용자가 작성한 JavaScript 코드를 받음
구문 해석 (AST 생성) - 코드를 구조적으로 분석
바이트코드 생성 - Ignition 인터프리터 실행 준비
실행 중 분석 - 자주 실행되는 부분(핫 코드) 감지
JIT 컴파일 - TurboFan이 핫 코드를 최적화된 머신 코드로 변환
최적화 반복 - 실행 중 성능 개선을 지속적으로 수행

| V8의 주요 특징

빠른 실행 속도 - 바이트코드와 JIT 컴파일로 성능 극대화
실행 중 최적화 - 코드를 분석하며 성능을 점점 높임
플랫폼 독립성 - 다양한 운영체제와 환경에서 동일하게 실행
Node.js 호환 - 서버에서도 JavaScript 실행 가능하게 함

JavaScript 실행 환경

웹 브라우저 (Chrome, Safari 등): 클라이언트 측 실행
Node.js 런타임: 서버 측 실행

JavaScript 사용 방법

| 스크립트 작성 방식

<!-- 내부 스크립트 --> 
<script> console.log(2025); </script> 

<!-- 외부 스크립트 --> 
<script src="./js/main.js"></script> 

<!-- 모듈 사용 --> 
<script type="module" src="./module.js"></script>

| 경로 설정

상대 경로: ./js/main.js
절대 경로: /js/main.js 또는 CDN 사용

콘솔(Console) 사용법

: 개발 중 실행 결과나 오류를 확인하는 도구

브라우저에서 F12 또는 Ctrl + Shift + I로 열 수 있음
console.log()를 사용해 로그 출력

console.log('콘솔 출력 예시');

| 자주 발생하는 문제

net::ERR_FILE_NOT_FOUND:
- 파일 경로나 파일명이 잘못되었을 때 발생
- HTML 파일의 <script src="..."> 경로를 다시 확인
코드 수정 후 변화가 안 보임:
- JS 파일을 저장하지 않았거나, 브라우저 새로고침을 하지 않은 경우
- 반드시 저장 후 새로고침!
캐시 문제:
- 브라우저 캐시가 켜져 있으면 코드 수정 사항이 반영되지 않을 수 있음
- 개발 중에는 캐시 비활성화 권장
- (DevTools의 "Disable cache" 옵션 활용)

+ 빌드(Build)와 보일러플레이트(Boilerplate)

빌드: 코드를 실행 가능한 형태로 변환하는 과정 (예: 컴파일, 링크, 패키징 등 포함)
보일러플레이트: 자주 반복되는 코드의 기본 틀이나 템플릿

예: HTML 기본 구조, API 요청 기본 코드 등

오늘의 느낀 점 !

글의 서두에서도 언급했다싶이 집중력이 많이 떨어졌다고 느꼈다..

그 이유로 예상컨데 프로젝트 끝난 뒤 3일의 휴식 기간동안 생활패턴이 요란해져서(?) 그런 것이 아닐까

다시 배움의 시간이니만큼, 집중할 수 있도록 잠을 제대로 자고 체력을 길러야겠다!!

[멋사 프론트엔드 부트캠프 14기] SVG 넣었는데 아래에 이상한 여백이 생긴다...?

JeonLay — Tue, 20 May 2025 21:23:23 +0900

이번에는 검색바를 만드는 실습으로 flex 연습을 했다.

실습을 진행하다보니 뭔가 로고의 높이가 이상해보여서 개발자도구로 확인해봤더니 아래의 사진과 같았다.

<a href="https://www.naver.com/" title="홈으로 이동">
	<figure>
		<svg aria-labelledby="logo" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H8L15.5 12V0H24V24H15.1875L8 12.5L8 24H0V0Z" fill="url(#paint0_linear_2294_3)" />
            <defs>
             	<linearGradient id="paint0_linear_2294_3" x1="4.5" y1="-1.93715e-07" x2="20.5" y2="24" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#1BF008" />
					<stop offset="1" stop-color="#03CCA8" />
				</linearGradient>
			</defs>
		</svg>
		<figcaption id="logo" class="sr-only">네이버</figcaption>
    </figure>
</a>

SVG 크기는 24px인데, 실제로 여백이 생겨서 27px처럼 보인다??

분명 svg의 크기는 24px*24px이니까 svg과 위 코드처럼 figure로 감싸져있어도 svg의 크기대로 나올 줄 알았는데 아니었다ㅠ

원인

처음엔 “margin이나 padding 때문인가?” “figcaption 때문인가?” 생각했지만,
진짜 이유는 SVG가 인라인 요소이기 때문이었다 :(

그래서 텍스트처럼 baseline 정렬을 하게 되는데, 이는 글자 아래쪽 선 기준으로 정렬하는 방식이라서, SVG 아래에 불필요한 여백이 생기게 된다..

이건 svg에만 해당되는 것은 아니고, img, span, inline svg, button, a 처럼 인라인 요소인 것에는 불필요한 여백이 생길 수 있다.

해결 방법 3가지

1. display: block; ← 가장 심플

baseline 정렬에서 빠져나와 여백 제거
내부 콘텐츠만큼만 정확히 높이 차지
텍스트 요소 아니면 대부분 block이 안전함

2. display: flex;

figure 안의 요소를 수직 정렬하고, 내부 콘텐츠 기준으로 크기 정리
다양한 UI 컴포넌트에 잘 어울림

3. height를 직접 지정 ⚠️

당장의 문제는 해결되지만, 유연성이 떨어질 수 있음
SVG 크기 바뀌면 수동으로 계속 수정해야 함

방법	유연성	설명
display: block	높음 ↑	간단하고 안전함
display: flex	높음 ↑	수직 정렬까지 필요할 때
height 고정	낮음 ↓	유지보수 불리함

[멋사 프론트엔드 부트캠프 14기] Outline Algorithm과 숨겨진 제목 요소(h태그) 분석

JeonLay — Tue, 13 May 2025 02:12:02 +0900

Outline Algorithm이란?

Outline Algorithm은 HTML5부터 자동으로 문서의 제목 태그(h1~h6)를 기반으로 문서 구조를 계층화하는 방법이다.
페이지의 구조를 명확히 하고, 검색 엔진과 사용자가 페이지를 더 쉽게 이해하고 탐색할 수 있도록 도우며, 문서의 논리적 구조를 파악하기 위해 사용된다.
이를 통해 웹 페이지의 가독성과 접근성을 높이며, SEO에도 긍정적인 영향을 미친다.
Chrome의 익스텐션인 HeadingsMap을 통해 웹사이트의 문서 계층 구조를 시각적으로 확인할 수 있다.

Daum 사이트 사례 분석

daum 사이트의 문서 계층

Daum 사이트를 HeadingsMap으로 분석했을 때, h2 요소로 검색이라는 항목이 계층 구조에 표시되었다.

그러나 실제 웹사이트 화면에는 "검색"이라는 단어가 보이지 않았다.
개발자 도구(윈도우: F12 / Elements 패널)로 확인해보니, h2 태그 안에 "검색"이라는 텍스트가 실제로 존재했다.

CSS로 스타일 제거 후 확인

Chrome의 익스텐션인 Web Developer을 이용해보자.

Web Developer 익스텐션 → CSS 탭 → Disable All Styles 옵션으로 모든 CSS 스타일을 제거해보았다.

스타일이 없어지자, 숨겨져 있던 h2 텍스트 **"검색"**이 화면에 표시되었다.
이는 CSS를 이용해 요소를 숨긴 것이라는 사실을 확인할 수 있었다.

정리

HTML 구조에는 존재하지만, CSS로 시각적으로 숨겨진 요소가 있을 수 있다.
문서 계층 구조(Outline)는 HTML 구조 기준으로 생성되기 때문에, 실제 화면에서 보이지 않는 제목이라도 계층에 포함될 수 있다.

주의사항

웹 접근성(Accessibility) 측면에서, 숨겨진 제목 요소가 사용자 경험에 어떤 영향을 미치는지 주의해야 한다.

| 문제점: 숨겨진 제목이 스크린 리더에 영향을 미칠 수 있음

시각적으로 숨겨진 제목 요소가 스크린 리더와 같은 보조 기술에 영향을 미칠 수 있다.

스크린 리더는 HTML의 구조를 기반으로 문서를 읽어주기 때문에, 시각적으로 숨겨진 제목이라도 여전히 스크린 리더를 통해 읽힐 수 있다.

따라서 시각 장애가 있는 사용자나 키보드만 사용하는 사용자에게 혼란을 줄 수 있으며, 불필요한 정보나 비가시적인 콘텐츠가 접근성에 영향을 미칠 수 있다.

| 해결 방법: 접근성 고려

웹 접근성을 고려할 때, 숨겨진 콘텐츠나 제목이 불필요하게 읽히지 않도록 접근성 속성을 활용해야 한다.

예를 들어, aria-hidden="true" 속성을 사용하여 스크린 리더에서 해당 요소를 제외하거나, 문서의 논리적 구조와 일관성을 유지할 수 있도록 신경 써서 사용자 경험을 개선할 수 있도록 해야 한다.

코드를 다 짠 후에, HTML이나 CSS를 꼭 검사해서 접근성이 좋은 웹을 만들 수 있도록 하자~!

[멋사 프론트엔드 부트캠프 14기] Git 작업할 때, 주의해야 할 것은??

JeonLay — Tue, 13 May 2025 01:36:41 +0900

1. Pull 전 필수 작업

원격 저장소에서 코드를 가져오기 전에 반드시 로컬 변경 사항을 처리해야 한다.
처리 방법 두 가지:
- git commit: 변경 내용을 영구 저장
- git stash: 임시 저장 (나중에 다시 적용 가능)

2. 브랜치 이동 시 주의 사항

다른 브랜치로 전환할 때는 작업 디렉터리를 깨끗한 상태로 유지해야 한다.
변경 사항이 있는 경우:
커밋으로 저장하거나
스태시에 임시 보관 후 이동

3. 변경 사항 무시 방법 (위험 )

로컬 변경 사항을 포기하고 강제로 진행하는 방법

git reset --hard # 모든 변경 사항 삭제
git checkout -f # 강제 브랜치 이동

주의: 이 방법은 되돌릴 수 없으므로 신중하게 사용해야 한다.

4. 문제 발생 시 해결 절차

git status로 현재 상태 확인
변경 사항 커밋 또는 스태시
원하는 작업(pull 또는 브랜치 이동) 실행
충돌 발생 시 파일 수동 편집 후 해결

5. Tip

작업 시작 전에 항상 git pull로 최신 코드 동기화
작은 단위로 자주 커밋하는 습관
브랜치 이동 전 작업 상태 확인 필수!!

공부하거나 프로젝트 하면서 git 사용할 때 조심하자~!

[멋사 프론트엔드 부트캠프 14기] Emmet이란?

JeonLay — Mon, 12 May 2025 22:45:24 +0900

수업 중, 다음과 같은 코드를 settings.json에 추가했다.

"emmet.syntaxProfiles": {
    "html": "xhtml"
  }

위 코드를 추가하고 난 뒤, HTML 파일에서 img 처럼 태그 이름만 입력하고 Enter를 누르면 자동완성된다는 것!!
신기하니까 한 번 emmet에 대해서 더 알아보자!

Emmet 이란?

HTML 문법을 자동 완성할 때 XHTML 스타일로 마크업 출력하라는 설정
코드를 빠르게 작성할 수 있게 해주는 플러그인 또는 기능
주로 HTML이나 CSS 작성할 때 자동완성(Snippet Expansion)을 엄청 빠르게 도와줌.
예를 들어 ul>li*3 입력하고 Tab 키를 누르면,이런 식으로 자동으로 코드를 만들어 줌!

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

syntaxProfiles는 뭐지?

Emmet의 syntaxProfiles 설정은 "특정 언어(문법)로 자동 완성할 때, 어떤 스타일로 완성할지" 를 결정하는 옵션임.
쉽게 말해서 "HTML을 작성할 때 어떤 규칙으로 태그를 만들어줄까?" 를 정하는 것!

"html": "xhtml" 이 뜻하는 것은?

"html": HTML 파일에서 사용할 때
"xhtml": 자동완성 스타일을 XHTML 규칙에 맞춰서 출력해라

즉, HTML 파일 안에서 Emmet이 태그를 만들 때, XHTML 스타일을 따르도록 설정한 것!

XHTML 스타일이란?

Extensible HyperText Markup Language의 약자
XHTML은 XML 문법을 따르기 때문에, 태그를 엄격하게 작성해야 함.

HTML 스타일	XHTML 스타일
<img src="img.png">	<img src="img.png" />
<input>	<input />
<br>	<br />

닫는 슬래시(/)가 꼭 필요!!
Emmet이 자동완성할 때, 이렇게 XHTML처럼 빈 태그를 닫아서 만들어 줌.

예시 비교

만약 img 입력하고 Tab이나 Enter 누르면,

기본 HTML 설정이라면

<img src="" alt="">

하지만 XHTML 스타일 설정을 해두면, /가 붙은 XHTML 스타일로 자동 완성된다~!!

<img src="" alt="" />

요약

Emmet	HTML/CSS를 빠르게 작성하는 도구
syntaxProfiles	특정 문법에서 자동완성 스타일을 정하는 설정
"html": "xhtml"	HTML 파일에서 XHTML 스타일로 태그를 생성하겠다는 뜻
XHTML 스타일	빈 태그는 꼭 <tag />처럼 닫는다 (엄격한 문법)

개발자의 작은 실험실

[게임 QA] 이제부턴 QA 공부도 해볼랍니다!

[코딩테스트/JS] 오늘부터 꾸준히 코테 연습하기! | CodeSignal

[String Manipulation Basics]

1. 모음 위치(인덱스) 찾기

2. charCodeAt, fromCharCode 없이 알파벳 시프트하기

3. toLowerCase, toUpperCase 없이 모든 소문자/대문자를 모든 대문자/소문자로 변환하기

[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 4

JavaScript 기초 정리 - 스코프, 모듈, 객체, 조건문, 객체 비교

스코프

| 블록 스코프 예제

| 함수 스코프 예제

| 요약 비교

모듈

| 기본 스크립트(type="module" 없이 작성된 스크립트)

| type="module"을 사용한 스크립트

객체 (Object)

| 객체란?

객체와 유사한 구조

나의 노트북을 객체로 만들어 보자!

| 객체에 포함 가능한 값

| 객체 속성 값 읽기

| 객체 속성 값 쓰기

| 객체 속성 삭제

| 객체의 메서드

| 함수의 타입은?

| 함수는 값으로 취급

조건문 - if…else

| 참, 거짓 평가

값이 거짓으로 평가되는 것들

불리언 타입 변경

자동 타입 변경

| 비교 연산자

느슨한 vs 엄격한 비교

| else if 문

객체 비교

| 동치 vs 동등 연산자

| 객체는 참조로 비교된다.

| 메모리와 객체

| 객체 속성·값이 같은지 확인하려면?

오늘의 느낀 점 !

[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 3

자바스크립트 기초 정리 2

| 기본값, return, 표현식, 호이스팅, 함수 선언 방식, 화살표 함수 표현식

함수 (Function)

| 함수, 변수의 기본값

| 반환값

| 표현식

| 함수 선언 방식 2가지

1. function을 사용한 함수 선언

2. 함수 표현식(expression)

| 호이스팅 (Hoisting)

함수 선언

함수 표현식

변수 선언 (var, let, const)

변수 선언 방식별 동작 비교 (함수 호출 vs 변수 참조)

화살표 함수 표현식

| 다양한 화살표 함수 구문

1. 매개변수 개수

2. 암묵적 반환

➕ 왜 함수 표현식에 const를 사용할까?

| 정리 포인트

| 정리 요약

오늘의 느낀점 !

[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 2

자바스크립트 기초 정리 - 주석, 세미콜론, 데이터 타입, 변수, 함수

주석 (Comments)

| 한 줄 주석

| 여러 줄 주석

; 세미콜론 (Semicolons)

| 꼭 써야 할까?

세미콜론을 사용하려면...

세미콜론을 사용하지 않으려면...

팀 프로젝트에서는?

기본 데이터 타입 (Primitive Types)

1. 문자열 (String)

2. 숫자 (Number)

3. 불리언 (Boolean)

4. Null

5. Undefined

| 기본 스크립트(`type="module"` 없이 작성된 스크립트)