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 활용)
• 로그인/회원가입 폼 흉내내기

✅ 목표: 작은 거라도 직접 만들면서 연습