오늘의 학습 키워드
- HTML / CSS / JavaScript
- SPA
- React / Vue.js
- Library vs Framework
오늘 새롭게 배운 핵심 개념
1. FE 기술 스택 - HTML, CSS, JavaScript의 역할
프론트 엔드의 영역은 크게 세 가지로 나뉜다.
-
HTML (HyperText Markup Language)
- 웹 페이지의 뼈대(구조)
- 시멘틱 태그를 통한 의미 전달
-
CSS (Cascading Style Sheets)
- HTML의 뼈대 스타일링
- 반응형 디자인 : Media Query
-
JavaScript: 특정 동작(이벤트) 기능 구현
HTML(뼈대) + CSS (데코) + Javascript (사용자 이벤트)
2. SPA
SPA(Single Page Application)는 한 번 로드된 HTML/CSS/JS 파일을 기반으로 동작하며, 이후엔 필요한 데이터만 서버에서 받아와 화면을 동적으로 갱신하는 방식이다. 다만 초기 로딩이 느리다는 단점이 있어서 이를 보완하기 위해 SSR(서버 사이드 렌더링) 같은 방법을 함께 쓰기도 한다.
- React: UI 구현에 특화된 라이브러리. .jsx 확장자를 주로 쓴다.
- Vue.js: 프레임워크 성격이 강하다. HTML+JS+CSS를 한 파일에 담는 템플릿 기반 문법(.vue 파일)을 쓴다.
3. Library vs Framework
- Library: 특정 기능을 수행하는 코드 묶음. 내가 필요할 때 직접 호출해서 씀
- Framework: 코드 묶음뿐 아니라 애플리케이션의 구조와 흐름까지 제공하는 툴. 반대로 프레임워크가 내 코드를 호출하는 구조
트러블슈팅
없음.
오늘의 회고
- 몰입도: 오늘은 프론트엔드의 구성요소를 보면서 구조를 차근차근 잡아갔던 것 같다. 어려운 부분도 있지만 추후에 더 찾아볼 계획이다.
- 느낀 점: TIL을 써내려가는것이 조금은 귀찮지만, 그래도 학습에 도움이 많이 되는 것 같다. 더 열심히 습관 들여야겠다
- 내일 공부할 것: Media Query 와 시멘틱 태그, SSR 에 대해서 추가로 찾아보기
#LGCNS #LGCNS6기 #LGCNS6기TIL #내일배움카드 #K-DT
이것저것