개발자 노트 - oseungun311 story

학습 목표 1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자 2. 연습 문제 - 오류 해결 1. 웹 브라우저가 웹 페이지를 렌더링하는 일반적인 과정웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어집니다HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성합니다.CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성합니다.렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성합니다.레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산합니다.페인팅 (Painting): 렌더 트리를 기반으로, ..

학습 목표BOM(Browser Object Model)과 DOM(Document Object Model)의 차이점을 설명할 수 있습니다.최상위 객체인 window 객체를 이해하고, 하위 객체들의 용도를 파악합니다.location 객체로 URL을 제어하고, history 객체로 페이지 이동을 제어할 수 있습니다. 1. BOM과 DOM, 무엇이 다를까요?우리는 자바스크립트로 몇 가지 대상을 제어할 수 있습니다.DOM (Document Object Model): 웹 페이지의 **'내용'**을 제어합니다.h1 태그의 텍스트를 바꾸거나, div를 숨기거나, 버튼 색을 변경하는 등 문서의 요소를 제어합니다.BOM (Browser Object Model): '브라우저' 자체를 제어합니다.새 창을 띄우거나, URL 주..

DOM (문서 객체 모델)이 무엇인지 설명할 수 있습니다.DOM 요소에 접근하는 5가지 방법을 알고 차이점을 설명할 수 있습니다.자바스크립트로 DOM 요소를 조작(내용 변경, 스타일 변경, 생성, 추가)할 수 있습니다.addEventListener를 사용하여 DOM 이벤트를 처리할 수 있습니다. 1. DOM 이란 무엇일까? (문서 객체 모델)DOM(Document Object Model)은 브라우저가 HTML 웹 페이지를 읽고 해석한 뒤,자바스크립트 같은 언어가 웹 페이지의 내용, 구조, 스타일을 쉽게 읽고 조작(수정)할 수 있도록객체(Object) 형태로 구조화한 모델(API)입니다.쉽게 말해, DOM은 자바스크립트와 HTML을 연결해주는 다리입니다. 웹 페이지 문서 브라우저가 위 HTML을 ..

학습 목표함수를 선언하고 호출할 수 있습니다.매개변수(Parameter)와 인수(Argument)의 차이점을 이해합니다.함수 표현식을 이해하고 '일급 객체'의 의미를 설명할 수 있습니다.함수 선언문과 표현식의 차이점 (호이스팅)을 이해합니다.화살표 함수(Arrow Function)의 간결한 문법을 사용할 수 있습니다.콜백 함수의 개념과 용도를 이해합니다.함수 종류에 따른 this의 동작 차이를 설명할 수 있습니다. 1. 함수란 무엇인가?함수(Function)는 특정 기능을 수행하는 코드 블록을 하나로 묶어놓은 것'**입니다.함수를 사용하는 가장 큰 이유는 **'재사용'**입니다. "Hello"를 100번 출력해야 할 때, 100줄을 복사/붙여넣기 하는 대신, "Hello"를 출력하는 함수를 한 번만 잘 ..

학습 목표데이터의 묶음인 **객체(Object)**를 리터럴 방식으로 생성하고 활용합니다.데이터의 목록인 **배열(Array)**을 리터럴 방식으로 생성하고 기본 메서드를 사용합니다.실무 핵심 배열 메서드인 map, filter, find 의 용도를 이해하고 사용합니다. 1. 왜 객체와 배열이 필요할까요?만약 학생 1명의 정보를 저장해야 한다면 어떨까요? let student1Name = "홍길동";let student1Age = 20;let student1Major = "컴퓨터공학"; 정보가 많아질수록 변수 이름도 길어지고 관리하기가 매우 불편합니다. 이때 객체(Object)를 사용하면 '홍길동' 학생의 정보를 하나의 '보관함'에 묶을 수 있습니다. let student1 = { name: "..

학습 목표변수가 살아 숨 쉬는 유효 범위, 스코프(Scope)를 이해합니다.var, let, const의 결정적인 차이점을 설명할 수 있습니다.자바스크립트의 독특한 동작 방식, **호이스팅(Hoisting)**의 원리를 이해합니다.왜 우리는 var를 사용하면 안 되는지 깨닫습니다. 1. 스코프: 변수의 활동 범위스코프(Scope)란 변수가 선언된 후, 그 변수를 사용할 수 있는 유효 범위를 의미합니다. 놀이동산의 '자유이용권'처럼, 특정 구역에서만 사용 가능한 변수가 있고 모든 곳에서 사용 가능한 변수가 있습니다.1) 블록 스코프 (Block Scope)let과 const는 블록 스코프를 따릅니다. 여기서 **블록 { }**이란 if, for, function 등에서 사용하는 중괄호를 의미합니다. 블록 ..

학습 목표데이터를 저장하는 상자, 변수(let, const)를 선언하고 사용합니다.데이터의 종류인 자료형(string, number 등)을 이해하고구분합니다.데이터를 가공하는 도구인 연산자를 사용해 다양한 계산을 합니다. 1. 변수: 데이터를 담는 상자컴퓨터가 어떤 값을 기억하게 하려면, 그 값을 담을 상자를 만들고 이름표를 붙여줘야 합니다. 이 상자를 '변수(Variable)'라고 부릅니다.자바스크립트에서는 두 가지 키워드로 변수를 만듭니다. let: 변경이 가능한 값을 담는 상자입니다. let name = "홍길동"; // 'name' 상자에 "홍길동"을 담는다.console.log(name); // "홍길동" const: 변경이 불가능한, 한 번 정하면 바뀌지 않는 값을 담는 상자입니다. (상수,..

1. 왜 자바스크립트를 배워야 할까요?여러분, 안녕하세요! 자바스크립트 강의에 오신 것을 환영합니다. 우리가 매일 사용하는 웹사이트들을 떠올려볼까요?프로필 버튼을 누르면 내 정보가 보이고,'좋아요' 하트를 누르면 숫자가 올라가고,지도 앱에서 스크롤하면 새로운 지역이 나타나죠.이렇게 멈춰있는 웹 페이지를 '살아 움직이게' 만들고,사용자의 행동에 '반응'하게 만드는 핵심 기술이 바로 자바스크립트(JavaScript)입니다.이 강의에서 우리의 첫 번째 목표는, 정적인 웹 페이지에 생명을 불어넣어 사용자와 '상호작용(Interaction)'하는똑똑한 웹 페이지를 만드는 것입니다.2. 웹 페이지를 만드는 삼총사: HTML, CSS, JS웹사이트는 보통 세 가지 언어가 힘을 합쳐 만들어집니다. 이 셋의 관계를 우리..

ToString 사용시 순한 참조 조심해야 합니다. package com.puzzlix.solid_task.domain.comment;import com.puzzlix.solid_task.domain.issue.Issue;import com.puzzlix.solid_task.domain.user.User;import jakarta.persistence.*;import lombok.*;@Getter@Setter@NoArgsConstructor@AllArgsConstructor@Entity@ToString(exclude = {"issue", "writer"}) // 순한 참조 방지(양방향 매핑시 조심해야 될 부분)public class Comment { @Id @GeneratedValue(stra..

설정 - 프로파일 로컬 spring: # =================================================================== # 1. 데이터소스(DB) 설정 # H2 데이터베이스에 어떻게 연결할지 스프링에게 알려줍니다. # =================================================================== datasource: # url: jdbc:h2:mem:solidtask -> 'solidtask'라는 이름의 메모리 기반 DB를 사용합니다. # 서버를 재시작하면 데이터는 사라집니다. url: jdbc:h2:mem:demsolidtask username: sa # H2 DB 기본 사용자 이름 ..