위클리
1.CSS Cascade 구조 이해하기
CSS는 감으로 덮어쓰는 게 아니라 우선순위 구조로 설계하는 언어다. Imfortance, Specificity, Source Order의 흐름을 이해하면 `!important` 없이도 충돌을 통제할 수 있다!
2.HTML 시맨틱 태그 구조 이해하기
시맨틱 태그는 디자인을 위한 요소가 아니라 문서의 의미를 정의하는 도구다. <head>와 구조 태그의 역할을 정리하고, <div>와의 차이를 통해 HTML을 구조적으로 바라보는 관점을 다룬다!
3.Git branch merge 전략 이해하기
Merge는 단순히 코드를 합치는 행위일까? Fast-forward, 3-way, Squash, Rebase를 통해 Git이 어떻게 히스토리를 설계하는지 구조적으로 정리해본다.
4.협업을 구조화하는 전략: Git Flow
협업에서 merge할 때 느끼는 불안은 어디서 올까? Git Flow는 작업의 성격에 따라 브랜치를 분리해 협업을 구조 위에 올리는 전략이다.
5.JavaScript this의 동작 원리 정리
JavaScript의 this는 함수의 위치가 아니라 호출 방식에 따라 결정된다. 일반 함수, 객체 메서드, 생성자 호출, 그리고 Arrow Function까지 다양한 상황에서 this가 어떻게 달라지는지 핵심 규칙을 정리했다.
6.JavaScript 렉시컬 스코프와 스코프 체인 이해하기
JavaScript에서 변수의 접근 범위는 어떻게 결정될까? 스코프의 기본 개념부터 렉시컬 스코프 규칙, 그리고 변수가 탐색되는 스코프 체인 구조까지 정리하고 this와의 차이도 함께 살펴본다.
7.JavaScript – 복사했는데 왜 같이 바뀔까?: 얕은 복사와 깊은 복사
JavaScript에서 객체를 복사했는데 원본까지 바뀌는 이유는 무엇일까? 참조(reference) 구조를 이해하면 얕은 복사와 깊은 복사의 차이가 보인다. Spread, JSON, structuredClone을 통해 객체 복사의 원리를 정리한다.
8.JavaScript - 변수 선언의 진화: var, let, const
1. JavaScript의 변수 선언 방식 JavaScript에서 값을 저장하려면 변수에 값을 할당(assignment)해야 하며, 이를 위해 먼저 변수를 선언(declaration)한다. 그리고 JavaScript에는 변수를 선언하는 세 가지 방법이 있다. var let const 지금은 대부분 let과 const를 사용하지만 JavaScript가 ...
9.렌더링 ≠ 화면 변경: 결과 계산
1. "렌더링"이란 흔히 아는 렌더링 보통 "렌더링"이라고 하면 화면을 다시 그리는 것이라고 생각하는 경우가 많다. 예를 들어 버튼을 눌렀더니, 화면이 바뀌고 뭔가 새로 그려지는 느낌이다. 그래서 자연스럽게 렌더링은 화면이 바뀐다라고 받아들이게 된다. React에서의 렌더링 React에서의 렌더링은 조금 다르게 정의해야 한다. > 컴포넌트 함수...
10.DOM을 직접 바꾸지 않는 이유: Virtual DOM
React - Virtual DOM을 활용한 극한의 효율 챙기기