Week 8
기간: 2026.01.05 - 2026.01.09
커리큘럼: 프론트엔드(HTML · CSS · JavaScript)
1. Facts — 무엇을 했나?
아래의 내용은 프론트엔드 시리즈 글로 상세히 정리하였다.
< HTML >
- [HTML 문서 구조와 텍스트 태그]
<!DOCTYPE html>부터html,head,body기본 구조를 이해하고, 문서 내 텍스트 태그(p, h, strong 등)와 엔티티( , <)를 실습하며 기본 문법을 익힘. - [링크, 이미지, 리스트, 테이블]
a,img,ul/ol/li,table등 콘텐츠 구성 태그를 실습하고style속성을 활용한 인라인 스타일링까지 적용. - [폼(form) 태그]
action,method,enctype을 중심으로 label/input/select/button을 조합한 회원가입 폼 제작. - [HTML 내 CSS/JavaScript 적용]
CSS/JS의 인라인, 내부, 외부 적용법과 DOM 로드 순서에 따른 실행 차이를 비교 실습.
< CSS >
- [CSS 기초 문법 및 실습]
텍스트 관련 스타일(font, color)과 단위(px, %, em, rem, vw, vh), 박스모델(margin, padding)을 실습하며 시각적 구조를 조정하는 감을 익힘.
< JavaScript >
- [기초 문법] 변수/상수, 원시·객체 타입, 배열, 타입변환, 주요 내장 함수 학습.
- [연산자와 함수] 비교/삼항/typeof 연산자, 함수 선언·표현식, window 내장 함수 실습.
- [JSON 데이터 처리]
JSON.parse/JSON.stringify를 통한 객체-문자열 변환 실습. - [콜백·비동기 처리] 동기/비동기 개념, 콜백 함수,
setTimeout, forEach 실습. - [AJAX와 Axios]
jQuery/Axios 기반 비동기 요청 구조를 학습하고, async/await으로 콜백지옥을 개선하는 흐름 확인.
< 코딩테스트 >
- gold 5 승급!
< 스터디 >
- 정규 수업시간 알고리즘 문제 코드리뷰, 이후 스프링 스터디 예정
햄버거 맛집 "버거리" / 처음으로 등장한 기획서(?) / 23기 치킨집 회식
2. Feelings — 어떻게 느꼈나?
- HTML 구조를 직접 코드로 짜보며 “웹 문서의 뼈대가 이렇게 단순하면서도 체계적이구나”라는 감각을 잡을 수 있었음.
- CSS는 눈에 보이는 즉각적인 피드백이 주어져 흥미로웠고, 단위와 박스모델 관계를 이해하니 레이아웃 제어가 쉬워짐.
- JavaScript는 타입 유연성과 함수 개념이 처음엔 낯설었지만, 실습 중 데이터를 조작하면서 점점 익숙해짐.
- 특히 JSON 처리나 Axios 통신처럼 백엔드와 연결되는 부분에서 “이게 바로 프론트-백엔드의 연결구조구나” 하는 깨달음을 얻음.
3. Findings — 무엇을 배웠나?
- HTML: 브라우저가 문서를 읽는 흐름(Head → Body)과 블록/인라인 구분이 시맨틱 마크업의 핵심임을 이해.
- CSS: 단위와 박스모델 개념이 스타일링의 토대이며, 구조를 이해해야 반응형 디자인으로 확장 가능.
- JavaScript:
- 변수는 동적 타입으로 선언 가능하며, 배열·객체를 통한 데이터 구조 표현이 자유로움.
- JSON은 서버와 데이터 교환의 표준 포맷으로,
parse/stringify변환 패턴을 반드시 숙지해야 함. - 콜백·비동기 개념을 이해하면 실행 순서를 제어할 수 있고, async/await으로 가독성을 개선할 수 있음.
4. Future — 다음에 어떻게 활용할까?
- HTML/CSS: 포트폴리오 페이지의 레이아웃 기초 구조를 직접 설계하고 시맨틱 태그로 구성.
- JavaScript:
- Axios를 이용한 간단한 API 연동 페이지 구현 (예: 사용자 등록, 댓글 작성).
- 비동기 흐름을 명확히 관리하며, 나중에 React fetch 로직의 기초로 확장할 예정.
- 학습 루틴:
- DOM 조작, 이벤트 처리, fetch API까지 확장 실습
- CSS Flex/Grid로 레이아웃 완성도 높이기
🧩 마무리 한 줄
서버와의 연결까지 그려지며 프론트와 백엔드를 연결하는 첫 발을 뗀 한 주였다.
Eazy하게