프론트엔드 요즘 기본 상식

강의 동영상

https://www.youtube.com/watch?v=ZM55pce2AkY

1. HTML, CSS, JavaScript

HTML

웹 페이지에 글, 그림 넣고 싶을 때

CSS

웹 페이지에 디자인 넣고 싶을 때

JavaScript

웹 페이지에 기능 넣고 싶을 때

2. Library

Library

다른 사람이 작성한 코드 (가져다쓰면 코딩이 편해짐)

• JavaScript는 수많은 라이브러리와 함께 해야 하는 운명 + 라이브러리 많이 써도 괜찮음

대표적인 예시

• npm : JavaScript 라이브러리 관리가 쉬워짐 (설치, 수정, 삭제 등)
• webpack : 번들링 툴. JavaScript 라이브러리 용량 줄여줌 (라이브러리 안에서 안 쓰는 코드 삭제하면서)

3. npm

npm

JavaScript 라이브러리 관리를 도와주는 패키지 매니저 (설치, 수정, 삭제)

• npm을 사용하려면 nodejs 설치하면 된다.
  • 설치 : npm install [라이브러리 명]
  • 수정 : npm update [라이브러리 명]
  • 삭제 : npm uninstall [라이브러리 명]

4. nodejs

nodejs

자바스크립트 파일 실행 엔진

• 자바스크립트 코드는 원래 웹 브라우저 안에서만 실행할 수 있음.
• 브라우저 안 켜고 PC 아무데서나 자바스크립트 파일을 실행하고 싶다! = nodejs 사용!

// index.js
console.log('바보')

$ node index.js
바보

5. Bundling tool

bundle/build tool

js 파일들을 하나의 파일로 합쳐줌 => 이러면 나중에 배포같은 건 쉬워짐.

• npm으로 설치한 라이브러리들은 node_modules라는 폴더에 설치가 됨.
  • node_modules => 라이브러리 보관폴더
• 이러한 라이브러리를 자바스크립트 파일에서 사용하는 방법은

import * as 어쩌구 from 'mysql`

• 이런 방식으로 파일을 불러오고 하면서 파일 구조가 복잡해짐.

  • 하지만 번들링 툴을 이용하면 하나의 파일로!!

• 그 외의 장점

  • 안 쓰는 함수, 변수 다 제거 => 전체 파일 용량 축소 가능
  • .ts, .vue, .jsx 등으로 개발한 것들을 .js로 변환
  • 최신 문법을 호환성 좋게 (옛날 문법으로) 바꿔줌

대표적인 예시

• TURBOPACK(사용법 쉬움), vite(쉬움), rollup.js, webpack, PARCEL

vite 사용법

vite 세팅이 완료된 프로젝트를 만들려면

$ npm create vite@latest

6. Build

Build

번들링툴을 이용해서 js 파일을 하나로 합치기

• 개발 완료 -> 번들링 해서 하나의 파일로 합치고 싶다.

npm run build

• 빌드 실행 완료 > dist 라는 폴더 생성 완료.
  • dist 폴더 안에 들어가면 assets 폴더 있고 그 안에 여러 파일 있고, 자바스크립트 파일 하나 존재. (하나로 합친 결과물)
• assets 폴더 안에 있는 내용물들을 서버에 올리면 웹 개발 끝

7. SPA

Single Page Application = SPA

html을 동적으로 생성하고 구조를 변경하는 것

• 자바스크립트로 html 조작이 편리해짐
• Single Page Application을 만들 수 있음
  • 모바일 앱처럼 새로고침없이 부드럽게 넘어가는 사이트 제작 가능
  • html 동적 생성, 구조 변경이 매우 쉬워짐
  • html 생성 조작을 자바스크립트로 하는 것을 client side rendering이라고 함.

대표적인 라이브러리

• 요즘 많이 쓰는 자바스크립트 라이브러리
• Vue, Svelte, React, Angular

8. State Management

State Management

SPA에서 사용중인 변수들을 관리하는 행위

• 자바스크립트 라이브러리의 단점
  • 수많은 변수 관리 어려움
• State Management로 해결!

state management를 도와주는 외부 라이브러리

• redux, recoil, mobx, zustand, jotai

9. Server Side Rendering

Server Side Rendering = SSR

html을 서버에서 만들어서 보내주는 것

• 자바스크립트 라이브러리의 단점
  • 웹 페이지들을 구글 검색 결과에 노출시키도록 하는 게 어려움
  • 자바스크립트 파일 사이즈가 너무 커지면 첫 페이지 로딩시간이 너무 길어짐
  • 이게 싫다면 Server Side Rendering

10. meta-framework

meta-framework

리액트문법으로 server side rendering 하고 싶을 때 사용하는 도구(라이브러리)

대표적인 예시

• NextJs, NuxtJS, Remix, SvelteKit
  • 자바스크립트 문법으로 풀스택 개발 가능
  • server side rendering 가능

11. TypeScript

TypeScript

타입 기능이 추가된 자바스크립트

• 자바스크립트
  • 타입을 강제하는 기능 X => 타입 틀려도 봐줌
  • 타입이 틀려서 생기는 버그 발생 가능성 O => 이걸 방지하기 위한 것이 타입스크립트
• .ts 파일은 브라우저에서 해석할 수 없기 때문에 번들링 툴을 이용해서 .js로 바꿔서 사용

12. serverless

serverless

서버 역할을 대신 해주는 서비스

대표적인 예시

• Firebase, Supabase, AWS Lambda, Pocket-Base
• 회원 인증, DB 입출력, 기타 서버 기능을 알아서 해줌