[ASAC 7기] 프론트엔드 관점에서 웹 개발을 알아보자

본 포스팅은 수업내용의 단순 정리글입니다.

 

02-10. 웹 개발이란 무엇이며, 어떻게 동작하나? - 프론트엔드

이번포스팅에서는 프론트엔드 관점에서의 웹 개발을 알아본다. 과거의 직접 DOM조작에서 현재의 VDOM조작으로 변화하기까지의 내용을 다루며 자바스크립트 런타임과 비동기를 알아본다. 다음으로 프론트엔드 자바스크립트 프레임워크는 어떻게 동작하는지 원리를 알아보며 CSS 적용방법론과 CSS 전처리기, CSS 프레임워크에 대해 살펴본다. 마지막으로 프론트엔드가 웹페이지를 브라우저에게 렌더링되게하는 렌더링 패턴을 알아보고, 이 렌더링을 효율적으로 하기위해 어떤 최적화전략이 있는지 살펴본다. 

 

 

 

 

01. 들어가며 : 프론트엔드 개발에서 DOM 조작 알아보기

02-11. 웹 페이지 HTML 변경 Routing 과 Rendering : 직접 DOM 조작서 VDOM 조작으로

 

 

무엇을 배웠는가?

 

라우팅과 렌더링에 대해 알아보았으며 이 관점에서 어떻게 리액트가 많이 쓰이게 되었는지, 알아보았다. 리액트는 단순히 성능이 좋아서 쓰이는 게 아니라 가상 돔을 이용하여 효율적으로 돔 조작이 가능해졌기 때문에 범용적으로 사용하게 되었다.

 

 

1) 라우팅

• Server-side(hard navigation) : 네트워크 사용
• Client-side(soft navigation) : 네트워크 사용되지 않고, 페이지만 바뀌어 렌더링
• SPA의 등장이유는 모바일과 비슷한 화면전환을 웹에 도입하기 위해

serverside / client side

 

 

2) 웹페이지 부분 변경 : Rendering

• dom 직접 조작 : javascript(조작할 때마다 repaint)
• dom 간편 조작 : jquery
  • 직접조작보단 dx가 향상되나, 이도 똑같이 dom을 직접 변경된다.(repaint)
  • 브라우저 호환성을 위해 사용되었음(크로스 브라우징)
  • lodash도 사용되었음
• dom 간접 조작 : react
  • React = 데이터 변경에 따른 DOM 변경이 아닌 VDOM 변경 후 단일 DOM 변경하는 JS 라이브러리
  • 바닐라 자바스크립트에 비해 자체적으로 repaint가 덜 발생되고 그런건 아님.
  • 다만, data에 따라 변해야하는 DOM이 다수 일때, 전체를 조작하지 않고 필요한 부분만 변경된 데이터에 따라 조작되기 때문에 DX가 향상된다. 
• 프론트엔드 자바스크립트 프레임워크는 무엇을 하는가? 무엇을 제공하는가?
  • VDOM 을 한데 모아 DOM 을 한번에 조작하게 하는 (Batch) 자바스크립트 코드가 들어있거나
  • 페이지 이동을 네트워크를 쓰지 않고 자바스크립트를 통해 렌더링하여 SPA 가 가능하게 만들어주거나
  • 로그인하고 난 뒤 세션을 관리하고, Cookie 나 LocalStorage 등을 활용하는 자바스크립트 코드가 있거나이렇게 다양한 기능들을 한데 모아 “웹 페이지 렌더링을 간편히 개발하는데 도움이 되는 거의 모든것들을 제공”

 

‼️ javascript vs jquery vs react 배칭하여 dom 조작해보기

DocumentFragment 객체는 무엇이며 왜 써야할까?

 

 

 

 

 

02. 자바스크립트 런타임과 비동기 지원방법에 대해 알아보자.

02-12. 프론트엔드(브라우저) 언어인 자바스크립트 런타임과 비동기 지원 방법

 

무엇을 배웠는가?

웹 프론트엔드의 유일무이한 언어가 된 자바스크립트. 자바스크립트 언어를 구동하는 자바스크립트 엔진이 각자 목적에 맞게 쓰이는 곳을 자바스크립트 런타임 이라고 하는데, 자바스크립트 런타임이 어떤 단계로 동작하는지 알아보자.

 

1) 자바스크립트 런타임

• 자바스크립트 런타임 = 자바스크립트 엔진 + API 및 라이브러리
  • 자바스크립트 엔진 (V8)
    • 싱글스레드 + 메모리(Stack함수 실행 + Heap변수 및 함수 저장 바구니)
  • API 및 라이브러리
    • 우리가 돔조작을 위해 쓰는 것도 Web API다. 

 

2) 자바스크립트 런타임 환경 종류

• 웹 브라우저 Chrome(V8) : 자바스크립트 엔진 + Web APIs
  • call stack > task queue > event loop > call stack
  • 자바스크립트 엔진은 기본적으로 싱글스레드이다. 하지만 만약 개발자 자체적으로 멀티 스레드를 활용하여 웹 브라우저 기능을 개발하고 싶다면?
    • 백그라운드 스레드 활용을 위한 Web Worker API 존재하므로 쓰면된다. (‼️)
• 웹서버 Node.js(V8) : 자바스크립트 엔진 + Node APIs + LIBUV

 

 

 

 

 

 

03. 번들러, 트랜스파일러를 통해 JS 프레임워크 동작원리 에 대해 알아보자.

02-13. 프론트엔드 자바스크립트 프레임워크 동작 원리

 

무엇을 배웠는가?

웹페이지의 다수의 파일을 압축하기 위해서 번들러를 쓴다는 것을 배웠고, 트랜스파일러로 고버전의 문법을 저버전으로 바꾼다는 것을 알았다. typescript는 js에 안정성을 보장하기 위해 사용된다. 결국 js를통한 dom조작을 풍부하게 하기 위함이다.

 

1) 번들러 : 다수의 JS 를 하나의 JS 파일로 압축

• webpack, vite 동작원리(❓)

2) 트랜스파일러 : 고버전 JS/TS 를 → 저버전 JS 로 변환

• 어떤 ES 버전으로 개발하더라도 Babel 트랜스파일러를 통해 저버전 ES 버전으로 변환 가능

3) 정적 타입체킹을 통한 동적 타입언어인 JS 안정성 보장 : Typescript(❓)

• zod(❓)
• joi(❓)

 

4) 프론트엔드 자바스크립트 프레임워크 정리

 

• JS 를 통한 DOM 조작을 풍부하게 → Javascript Framework (번들링 + 컴파일/트랜스파일 + 렌더링)
• Javascript Framework = Rendering System
  • 심화 : 3 Main Feature of a Framework = MVC
    • View : Rendering (HTML ~= DOM)
    • Model : Data Handling
    • Controller : Event Handling

 

 

 

 

 

04. CSS 방법론 7개와 CSS 번들링, 트랜스파일링을 알아보자.

02-14. CSS 적용 방법론 7개와 CSS Preprocessor / CSS Framework

 

무엇을 배웠는가?

그동안 css를 적용한 7가지의 방법론이 있었다. 그 역사를 살펴보았으며, css 개발을 쉽도록 하는 전처리기를 알아보았다. 그 중 요즘 자주 쓰이고 있는 tailwind css에 대해 알아보았다. 

 

1) CSS 적용을 위한 7개의 방법론

• Global CSS
• CSS Modules
• CSS Preprocessor
• CSS-in-JS
• Tailwind CSS (CSS Framework 로 분류)
• UI Framework(bootstrap)
• Component Library(Material Design, Chakra UI, Chadcn)

2) Tailwind CSS (CSS Framework 로 분류)

• 장점 1 = 유틸리티 클래스 : CSS 단위 조각 = CSS 정의를 유틸리티 클래스 단위로 제공하여
  • → 이를 조합하여 원하는 스타일을 적용
• 장점 2 = Purge / Minify : CSS 번들링 최적화를 위해 가지치기
• 단점 = ClassName 이 너무 더러워진다. 사실상 인라인 스타일과 거의 유사하다는 비판
  • 다음을 통해 이제 더러워진 ClassName 도 아래와 같이 정리 가능하다.
    • ① 웹 프론트엔드 라이브러리/프론트엔드를 통해 Component 화
      • 해결 ⇒ <MyBlueButton />
    • <button className="py-4 px-3 bg-blue-500 text-white font..." />
    • ② @apply 를 통해 단일 클래스화
      • 해결 ⇒ <button className="**btn-blue**" />
        • .btn-blue { @apply py-4 px-3 bg-blue-500 text-white font…; }
    • <button className="py-4 px-3 bg-blue-500 text-white font..." />

3) 3.3. 실무서 Tailwind CSS 사용 시 Tailwind-Merge + CVA + CLSX

cva, tailwindmerge, clsx를 조합하여 재사용 가능한 UI 만들기

 

 

 

05. 웹 페이지 렌더 방식에 대해 알아보자 : SSG, SSR, CSR, hydration, ISR

02-15. Rendering Pattern : 웹 프론트엔드 페이지 제공 방법

 

무엇을 배웠는가?

웹 페이지 렌더 방식인 SSG, SSR, CSR에 대해 배웠다. SSG는 미리 렌더링된 페이지를 반환하는 것이고 SSR은 요청이 올때마다 렌더링한 페이지를 반환하는 것이며 CSR은 매 요청이 올때마다 렌더링한 페이지를 반환하는 것이다. hydration은 서버에서 렌더링된 HTML을 브라우저가 받아와 클라이언트에서 JavaScript를 통해 다시 활성화하는 과정을 말하며 리액트같은 라이브러리에서 주로 사용된다. ISR은 next.js같은 프레임워크에서 제공하는 기능으로 SSG의 장점을 유지하면서도 동적 데이터 갱신이 가능한 방법을 제공한다. 

 

1) Static websites

• 정적 페이지를 반환하는 웹 서버(Nginx, Apache, S3)를 사용한다. 

2) SSR(Multi page)

• 동적 페이지를 반환하는 웹 어플리케이션 서버(WAS: Tomcat(Spring Boot + Thymeleaf))를 사용한다.
• 동작원리(❓)

3) CSR(SPA)

• 웹 브라우저 내 자바스크립트 활용해 동적 페이지 생성
• 자바스크립트 반환을 위한 웹서버 or 저장소(S3)

4) SSR with Hydration = MPA + SPA

• 과정(https://teawon.github.io/cs/csr-ssr/#41-ssr%EC%9D%98-%EA%B3%BC%EC%A0%95)

1. 사용자의 브라우저 방문, 서버에게 HTML 요청
2. 서버는 렌더링 준비가 된 HTML을 전달
3. 클라이언트는 HTML을 파싱하고 렌더링
   • 이 시점에서 화면상에 콘텐츠가 표현됩니다 (서버에서 생성해줌)
4. HTML을 파싱하는 과정에서 “script” 태그를 만나게 되면 해당 JS 파일을 요청합니다.
   • bundle.js파일을 다운로드 받습니다.
5. 브라우저는 JS를 실행하고 구성요소를 하이드레이션 합니다
   • 하이드레이션은 서버에서 렌더링된 정적 HTML에 클라이언트 사이드의 동적인 기능을 연결하는 과정
   • 이때부터 사용자와의 상호작용이 가능

 

 

5) SSG with Hydration(❓)

 

 

6) ISR(Incremental Static Regeneration)(❓)

 

 

 

06. 렌더링 최적화 전략에 대해 알아보자

02-16. 심화 : 렌더링 최적화 전략

 

무엇을 배웠는가?

웹 렌더링 최적화 전략이 있다. 각각의 컴포넌트 단위로 어떤 것은 웹서버에서 가져오고, 어떤 것은 웹 브라우저에서 렌더링 할 수 있다. 

 

1) Hydration

• 하이드레이션 Hydration 은 SSG, SSR 장점 위에 CSR 장점을 얹기 위한 방법

 

2) 점진적인 하이드레이션

• Code Splitting 일종인 Lazy Loading : CSR 수행하는 JS 에게 그거 아직 필요없으니까 나중에 렌더해달라는것

 

 

3) Island

• 정적인 영역은 서버를 통해 미리 만들어놓은거나, 만들어서 가져오고 동적인 부분에 대해서만 JS 를 로드한다

 

4) Streaming SSR

• RSC(React Server Component) 등장으로 인해 SSR 에서 Streaming 이 가능해졌다.

5) Resumability

• Qwik 이 채택한 새로운 렌더링 패러다임 : Serializable - 뭐든 다 갈아서(JS 이벤트 핸들러도) HTML 조각으로