000. 프론트엔드 개발 흐름
* JAVASCRIPT, React, Vue.js... [프론트엔드]
ClientSideScript 언어이다.
주로 브라우저(사용자)측에서 동적으로 페이지를 렌더링할 때 사용됨.
* JSP, PHP, Thymeleaf... [백엔드]
ServerSideScript 언어이다.
주로 WAS 서버측에서 동적으로 페이지를 렌더링해서 페이지를 사용자 측으로 던져줄 때 사용.
CSR/SSR은 실시간 처리라는 개념은 동일하지만
실행되는 기준(위치)이 다르다.
1. 클라이언트 사이드 스크립트 언어 발전순서
old Javascript -> JQuery / Ajax -> ES6 -> React / Vue.js / Angular
2. ES6 vs React 비교
🏗️ Modern Javascript 실전 커리큘럼
[1단계] 기본 문법 잡기 (JS 뼈대 이해)
하루~이틀이면 끝낼 수 있어. 가볍게만 이해!
- var, let, const (변수 선언 차이)
- function 선언 vs arrow function
- template literals (백틱 `` 로 문자열 쉽게 쓰기)
- if, for, while 같은 기본 제어문
- array, object 기본 조작 (map, filter, forEach)
✅ 목표: 문법을 "외우지 말고", "대충 흐름만 이해"
[2단계] DOM 조작 + 이벤트 처리
진짜 웹페이지 만질 수 있는 기본 능력!
- document.querySelector(), getElementById()
- 버튼 클릭 이벤트 .addEventListener("click", () => {...})
- form 입력값 가져오기 .value
- 클래스를 추가/삭제 .classList.add(), .classList.remove()
✅ 목표: 버튼 클릭해서 뭐 뜨게 하고, 입력값 받아오기
[3단계] 비동기 통신 (AJAX → fetch)
서버랑 데이터 주고받는 기본!
- fetch()로 GET, POST 요청 보내기
- .then(), .catch() 체인 연결하기
- async / await로 코드 더 깔끔하게 쓰기
✅ 목표: 서버에 데이터 요청하고 받아서 화면에 뿌리기
[4단계] ES6 고급 문법 맛보기
실무 코드 읽을 때 이거 모르면 벽 느껴.
- 구조 분해 할당 (Destructuring)
- 스프레드 연산자 (...)
- 삼항 연산자 (조건 ? 값1 : 값2)
- 옵셔널 체이닝 (?.)
✅ 목표: 복잡한 Modern 코드 봐도 겁 안 먹기
[5단계] 작은 토이 프로젝트 만들기
진짜 실력은 직접 만들어야 느는 거야.
예시:
- 간단한 할 일 목록(todo list) 만들기
- 날씨 정보 가져와서 화면에 보여주기 (open API 활용)
- 로그인/회원가입 폼 흉내내기
✅ 목표: 작은 거라도 직접 만들면서 연습