<strong>비대면 학습</strong>: JavaScript, React 문법과 기본 사용법을 익히는
시간
<strong>대면 스터디</strong>: 실무에서 왜 그런 기술이 필요해졌는지, 팀에서는
어떻게 협업하는지, AI 시대에 개발자가 어떤 판단을 해야 하는지 이야기하는 시간
<strong>6주차(1)</strong>: HTML/CSS/JS 리마인드와 브라우저 렌더링 — 우리가 쓴
코드가 어떻게 화면이 되는가
<strong>6주차(2)</strong>: AI 시대의 개발 방식과 프론트엔드 개발자의 위치 —
개발자는 이제 무엇을 판단해야 하는가
<strong>7주차</strong>: 프론트엔드 프로젝트가 복잡해지는 이유 — 구조와 책임
분리
<strong>8주차</strong>: API와 통신 — 프론트엔드와 백엔드의 계약 <strong>9주차</strong>: Next.js 렌더링 진화와 웹 퍼포먼스, 그리고 스터디 최종
정리
---
<strong>HTML/CSS/JS 역할 다시 정리하기</strong> — 구조, 스타일, 동작이 각각
무엇을 담당하는지
<strong>4~6주차 핵심 감각 회복하기</strong> — 레이아웃, 타입/변수,
객체/함수/스코프
<strong>브라우저 렌더링 파이프라인 이해하기</strong> — 코드가 실제 화면으로
바뀌는 과정
---
<header>사이트 상단</header>
<main>
<section>
<h1>스터디 모집</h1>
<p>프론트엔드 기초부터 함께 공부합니다.</p>
<button>신청하기</button>
</section>
</main><strong>static</strong>: 기본값. 문서 흐름대로 배치됩니다.
<strong>relative</strong>: 원래 자기 위치를 기준으로 이동합니다. 원래 자리는
남습니다.
<strong>absolute</strong>: 가장 가까운 positioned 조상을 기준으로 배치되고,
문서 흐름에서 빠집니다.
<strong>fixed</strong>: 뷰포트 기준으로 고정됩니다. 스크롤해도 따라옵니다.
.card {
position: relative;
}
.badge {
position: absolute;
top: 12px;
right: 12px;
}/* 한 줄/한 방향 정렬 */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 행과 열을 함께 다루는 레이아웃 */
.card-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}let value = 1;
value = "hello";
value = true;console.log(a); // undefined
var a = 1;
console.log(b); // ReferenceError
let b = 1;const user = { name: "Jin", age: 24 };
const sameUser = user;
sameUser.age = 25;
console.log(user.age); // 25function outer() {
const name = "outer";
function inner() {
console.log(name);
}
inner();
}---
HTML → DOM
CSS → CSSOM
DOM + CSSOM → Render Tree
Render Tree → Layout(Reflow) → Paint → Composite
JavaScript → DOM/CSSOM 변경 → 필요한 단계 다시 실행<body>
<h1>Hello</h1>
<button>Click</button>
</body>Document
└─ body
├─ h1
└─ buttonbutton {
background-color: black;
color: white;
}
button:hover {
background-color: #333;
}.hidden {
display: none;
}
.invisible {
visibility: hidden;
}<strong>display: none</strong>: Render Tree에서 빠집니다. 자리도 차지하지
않습니다.
<strong>visibility: hidden</strong>: 보이지만 않을 뿐, 레이아웃 자리는
남습니다.
width, height
margin, padding
top, left
font-size
DOM 요소 추가/삭제
background-color
color
box-shadow
border-color
/* 비싼 애니메이션이 되기 쉬움: 위치 계산을 다시 해야 함 */
.bad-move {
position: relative;
left: 100px;
}
/* 더 선호되는 방식: 합성 단계에서 처리하기 쉬움 */
.good-move {
transform: translateX(100px);
}---
const button = document.querySelector("button");
const box = document.querySelector(".box");
button.addEventListener("click", () => {
box.textContent = "변경됨";
box.style.width = "300px";
});---
---
Post Q&A
프론트엔드 스터디 대면 6주차(1): HTML/CSS/JS 리마인드와 브라우저 렌더링 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
비동기와 async/await를 배운 뒤, 대면에서는 API를 단순 호출 방법이 아니라 프론트엔드와 백엔드 사이의 계약으로 바라봅니다. HTTP, REST, CORS, 프록시, API 클라이언트 구조, TanStack Query와 파일 배치까지 연결합니다.