HTML·CSS·JS
웹 프론트
화면 만들기 · HTML·리액트
리액트
뭘 배우나요?
HTML·CSS·JS
웹페이지를 만드는 가장 기본이 되는 3가지 언어예요. 집 짓기에 비유하면 HTML은 뼈대(벽·문·창문), CSS는 인테리어(색·글꼴·배치), JavaScript는 전기·수도(버튼을 누르면 반응하는 동작)에 해당해요.
이런 걸 배워요
- HTML — 제목·문단·버튼·이미지 같은 화면 요소를 글로 적어 배치하기
- CSS — 색·글꼴·여백·레이아웃으로 보기 좋게 꾸미기
- JavaScript — 클릭·입력에 반응해 화면을 바꾸는 “동작” 넣기
- 브라우저와 서버가 데이터를 주고받는 기본 원리
다 배우면 내 손으로 간단한 웹페이지를 직접 만들고, 버튼·입력폼이 실제로 동작하는 화면까지 띄울 수 있어요. 모든 웹 개발의 출발점이라, 여기만 떼면 이후 리액트·서버 공부가 훨씬 수월해져요.
뭘 배우나요?
리액트
버튼 하나, 목록 하나를 “부품(컴포넌트)”으로 만들어 레고처럼 조립해 화면을 짜는 도구예요. HTML·CSS·JS로 손수 만들던 걸 더 빠르고 덜 꼬이게 만들 수 있게 도와줘요.
먼저 알면 좋아요 HTML·CSS·JS
이런 걸 배워요
- TypeScript — 실수를 미리 잡아주는 안전장치가 달린 자바스크립트
- React — 화면을 컴포넌트로 쪼개 재사용하고, 데이터가 바뀌면 화면이 알아서 갱신되게 하기
- Next.js — 검색 잘 되고 빠른, 실제 서비스 수준의 웹앱 만들기
- 서버(API)에서 받아온 데이터를 화면에 보여주기
다 배우면 인스타그램 같은 요즘 웹서비스의 화면을 만들 수 있어요. 실무 프론트엔드 개발자가 쓰는 바로 그 도구라 포트폴리오·취업으로 곧장 이어져요. (HTML·CSS·JS를 먼저 보고 오면 훨씬 쉬워요.)