기본 이해break와 continue는 제어문에만 사용되는 개념이다.제어문이라는 것은 for 루프, while 루프, do-while 루프, switch 문 같은 것을 의미한다.정의break: 현재 실행 중인 반복문이나 switch문을 즉시 종료continue: 현재 반복을 건너뛰고 다음 반복으로 진행비유break: 영화관에서 영화가 마음에 들지 않아 중간에 퇴장continue: TV 채널에서 광고가 나오면 다음 내용으로 건너뛰기작동방식break: 제어문의 블록을 완전히 벗어남continue: 현재 반복만 중단하고 다음 반복 조건 검사로 이동존재 이유와 목적제어문을 사용하는 중에 특정 조건의 동작을 컨트롤 하고 싶을 경우 사용한다. 사실 if문만으로도 모든 제어가 가능하지만 break와 continue를..

기본 이해정의: 프로그램의 실행 흐름을 제어하는 문장비유:조건문 = 교차로의 신호등반복문 = 회전 교차로분기문 = 비상구/탈출로작동방식:순차적 실행 흐름을 조건/반복/분기에 따라 변경코드 블록 단위로 실행 여부 결정핵심 구성요소조건문if문: 단일 조건 검사if-else문: 양자 택일if-else if문: 다중 조건 검사switch-case문: 값 기반 다중 분기반복문for: 정해진 횟수 반복while: 조건 기반 반복do-while: 최소 1회 실행 보장enhanced for: 컬렉션 순회분기문break: 반복문/switch문 탈출continue: 현재 반복 건너뛰기return: 메소드 종료존재 이유와 목적동적 프로그램 흐름 제어 필요성코드 재사용성 향상조건별 다른 처리 가능반복 작업 자동화주의사항과 일..

기본 이해정의: 프로그래밍에서 데이터를 처리하기 위한 기호나 단어비유: 수학의 계산 기호(+, -, ×, ÷)와 유사작동방식: 피연산자들에 대해 특정 연산을 수행하여 결과값 반환핵심 구성요소부호/증감 연산자+ (양수)- (음수)++ (1 더하기)-- (1 빼기)산술 연산자:+ (덧셈)- (뺄셈)* (곱셈)/ (나눗셈)% (나머지)** (거듭제곱)비교 연산자== (같다)!= (다르다)> (크다)>= (크거나 같다)논리 연산자&& (AND)|| (OR)! (NOT)존재 이유와 목적데이터 조작의 기본 도구조건문과 반복문의 핵심 요소수학적/논리적 연산 수행주의사항과 일반적 오류== 와 = 의 혼동= 는 할당 연산자 : 변수 등에 값을 할당하는데 사용== 는 비교 연산자 : 두 값이 같은지 비교논리 연산자 우선순..

기본 이해명시적 형변환(Explicit Type Casting):프로그래머가 직접 데이터 타입을 변환하도록 지정코드에서 변환 의도가 명확히 보임(int), Integer.valueOf() 암시적 형변환(Implicit Type Casting):컴파일러가 자동으로 수행하는 타입 변환데이터 손실이 없는 안전한 변환만 수행작은 타입에서 큰 타입으로의 변환일상생활 비유명시적: 물을 얼음틀에 부어 얼음으로 만드는 것 (의도적 변환)암시적: 얼음이 상온에서 자연스럽게 물이 되는 것 (자연스러운 변환)명시적 형변환(Explicit Type Casting)명시적 이라는 말에서부터 알 수 있지만 직접 코드를 만들어서 형변환을 하는 방식을 뜻한다.핵심 구성요소캐스팅 연산자 () 사용가장 기본적이고 간단한 형변환 방식이다...

기본 이해멤버변수클래스 내부에서 선언된 변수지역변수메서드 내부에서 선언된 변수로, 해당 메서드 내에서만 사용class House { furniture = "침대"; // 멤버변수: 집에 계속 있는 가구 clean() { let vacuum = "청소기"; // 지역변수: 청소할 때만 꺼내 쓰는 도구 console.log(`${vacuum}로 ${this.furniture} 청소`); } // 메서드가 끝나면 vacuum은 사라짐, furniture는 계속 존재}핵심 구성요소멤버변수접근제어자 사용 가능 (public, private 등)클래스 전체에서 접근 가능객체의 상태를 저장지역변수접근제어자 사용 불가 - 메서드 내부에서만 사용 가능하기때문선언된 블록 ..

문제 상황카테고리 섹션이 배경 요소(#starBackground)에 가려져 보이지 않는 현상 발생이런 식으로 실제로는 중앙에 위치해있지만 보이지 않는 문제 발생원인 파악배경 요소에 position: fixed 속성이 적용되어 있었음카테고리 섹션에 position 속성이 없어 z-index가 제대로 작동하지 않음문제의 기술적 설명position: fixed가 적용된 요소는:새로운 쌓임 맥락(Stacking Context)을 생성뷰포트를 기준으로 고정일반 문서 흐름에서 분리기본적으로 다른 요소들보다 상위에 표시됨해결 방법css가 가지는 기본적인 쌓임 맥락 우선 순위의 문제이기 때문에 position: relative를 추가해서 쌓임 맥락을 줘서 보이도록 조정//문제가 있던 코드#starBackground {..

🎬시퀀스 애니메이션이란?시퀀스 애니메이션(Sequence Animation)이란 웹 개발에서 여러 개의 이미지나 프레임(frame)을 연속적으로 빠르게 보여주어 움직이는 듯한 효과를 만드는 기법을 말한다. 이는 전통적인 셀 애니메이션(cel animation)과 유사한 원리로, 각기 다른 정지 이미지를 순서대로 재생하여 동적인 착시를 일으킨다. 간단하게 말하자면 공책(note)에 여러장의 그림을 그린 다음 빠르게 넘겨서 움직이는 것처럼 보이게 만드는 플립북(Flipbook)을 웹상에서 구현한 것이라고 할 수 있다.⚙️작동방식전체 동작을 여러 장의 이미지로 분할스크롤이나 시간에 따라 이미지를 순차적으로 교체빠른 전환으로 연속된 움직임처럼 보이게 함실제로는 이런식으로 여러장의 이미지를 준비해서 차례대로 보..

문제 상황Flex container 내부의 카드 요소들이 의도한 크기(160px)보다 작게 표시되는 현상 발생.cards-track { display: flex; padding: 20px 0; gap: 2rem; width: max-content;}.card { width: 160px; height: 160px; padding: 2rem; border: 3px dashed;}원인 분석전역 CSS 설정의 영향*, *:before, *:after { box-sizing: inherit;}모든 요소가 상위 요소의 box-sizing 값을 상속일반적으로 border-box가 적용됨Box Model 계산 방식border-box: width/height에 paddin..

자바의 가비지 컬렉션(Garbage Collection)기본 이해개념: 자바의 자동 메모리 관리 시스템으로, 더 이상 사용되지 않는 객체를 자동으로 감지하고 제거하는 프로세스비유: 집안 정리와 비슷함. 더 이상 필요 없는 물건(미참조 객체)을 정기적으로 치우는 청소부작동방식:Mark: 사용중인 객체 식별Sweep: 미사용 객체 제거Compact: 남은 메모리 조각 정리핵심 구성요소Young GenerationEden SpaceSurvivor Space (S0, S1)Old GenerationMetaspace (Java 8 이후)GC 알고리즘Serial GCParallel GCCMS GCG1 GC존재 이유와 목적메모리 누수 방지개발자의 메모리 관리 부담 감소안정적인 장기 실행 보장자동화된 메모리 최적화주의..

메서드 영역(Method Area)기본 이해개념 정의JVM의 메모리 구조 중 하나로, 클래스 구조, 메서드, 정적 변수 등을 저장하는 영역모든 스레드가 공유하는 영역일상생활 비유도서관의 책장처럼 모든 사람이 공유하며 참고할 수 있는 공간작동 방식클래스 로더가 클래스를 로딩할 때 생성JVM 시작 시 생성되어 종료 시까지 유지정적 데이터를 포함한 클래스 정보 저장핵심 구성요소Type Information클래스와 인터페이스의 정보메서드와 필드 정보타입 관련 상수풀Runtime Constant Pool클래스와 인터페이스의 상수메서드와 필드에 대한 레퍼런스Field Datastatic 변수상수 변수(final)Method Data메서드 바이트코드메서드 시그니처존재 이유와 목적클래스 정보의 중앙 집중화메모리 효율성..