🔴 Front-End

- 사용자가 볼 수 있는 모든 부분 / HTML, CSS, JavaScript -

1. HTML

• 집의 구조를 결정

• 웹페이지 틀을 잡는 것(Header, Footer 등)

• 쉽지만 중요하다. (언어가 아니라고 하는 밈이 있을 정도)

2. CSS

• 집의 인테리어

• 웹페이지를 꾸며주는 것

3. JavaScript

• 집의 기능을 부여(현관의 센서)

• 웹페이지의 기능을 부여해 주는 것

• 웹브라우저 위에서 동작하는 언어

• 바닐라 JS : 다른 라이브러리를 사용하지 않고 순수한 JS로만 작성하는 것

---

🟢 JS의 라이브러리

1) jQuery

• JS를 간편하게 사용하기 위한 오픈소스 기반 라이브러리

• JS의 코드 길이를 줄여줄 수 있음 ($사용)

• Internet Explore와 Chrome 둘 다 적용하기 위해 사용 (현재는 IE가 없어지고 속도도 느려서 선호하지 않음)

2) React

• JS 기반 라이브러리

• 최근 외국 대기업에서 가장 많이 쓰이는 라이브러리

• 프레임워크 같다는 논란이 있음

---

🟡 라이브러리 ? 프레임워크 ? ​

1) 라이브러리

• 나를 도와주는 남이 만든 도구

• 주체가 나 (ex) 내가 집을 지을 때 쓴 망치)

• 하나하나 떼어서 볼 필요 없이 사용법만 알면 됨

2) 프레임워크

• 개발을 쉽게 할 수 있도록 도와주는 남이 만든 도구

• 주체가 프레임워크 (ex) 집을 지어주는 회사)

• 규칙 지켜가면서 프레임워크를 사용하면 됨

==> '주체'에 초점을 맞춰서 답변

---

🟢 API

: 프론트엔드와 백엔드가 주고받는 정보

( 오픈 API ) → 당장 백엔드가 없을 때 공개된 정보를 가져다 쓴다

---

🔴 Back-End

- 사용자에게 보이는 부분 빼고 전부 / Server, DB etc -

---

🟡 정적인 페이지(Static Web)

: 웹에서 변화가 없어서 한 장만 있어도 됨 ex) 위키백과

==> 기계에게 HTML 작성을 시켜보면 어떨까? 
     (서버 안에 프로그래밍이 담기게 됨)
       → 기존에 쓰던 언어로 서버 프로그램을 만들어보자 
           => NodeJS

🟢 동적인 페이지(Dynamic Web)

: 새로고침 때마다 페이지가 변경됨 ex) 네이버

---

🟡 Node.js

: JS를 기반으로 한 서버 환경

: 웹브라우저가 아닌 컴퓨터에서 JS를 사용할 수 있게 만든 것

• 하나의 언어로 두 가지를 다할 수 있다는 것이 메리트

• 스타트업에서 수요가 많다. (제일 뜨는 기술)

• 최근 외국 큰 회사에서 많이 사용 (프론트에서는 React)

• NPM

  • Node Package Manager, 노드 패키지 관리자

  • Node.js에서 사용되는 모듈들을 패키지로 만들어 통합 관리 및 배포 (한마디로 앱스토어)

  • Express : 노드 패키지 중 하나 (NodeJS 할 때 Express 갖다 쓰면 돼서 좋음)

---

⌨️ 2022.09.22. 선영표 선생님 보강