Responsive Web 반응형 웹 정의 및 사용법

Interactive Web 인터랙티브 웹
- 유저의 어떠한 행동(Interaction, 클릭 혹은 스크롤 등)을 통해 웹에 변화들이 일어나는것
  - 유저가 어떤 행동을 했을때 애니메이션을 구동하는것이 기본 동작
- CSS Keyframe + CSS Animation(Transition, Translate) + JS
  - GSAP (GreenSock Animation Platform)
    - 타임라인 기반 애니메이션 자바스크립트 라이브러리
    - 크기 변경, 위치 변경(움직이게 하기), 색상 변경 등
    - Underscore(_) 나 jQuery($) 라이브러리처럼 CDN 을 통해 JS Script Import
- GSAP, Three.js, WebGL 과 CSS 를 통해 만든 Interactive Web 의 예시들
  - https://greensock.com/showcase/ (GSAP)
  - https://webflow.com/made-in-webflow (Webflow)
- (위 인터렉티브 웹 예시를 본 후) 프론트엔드 개발자 여러분들께 해주고싶은말
  - ~~미쳤네, 내 프론트엔드 개발자 인생은 망했어~~
    - 먼저, 저런 페이지들은 Webflow 와 같은 웹 빌더를 활용한 퍼블리셔, UX 디자이너 작품
    - 그리고 저렇게 화려한 페이지들을 만드는것이 프론트엔드 개발자의 역할이 아니다.
  - 프론트엔드 개발자라고 다 똑같은 프론트엔드 개발자가 아니다.
    - 백엔드든 프론트엔드든 쉬운 설명을 위해 단순히 설명해주었었지만
    - 남들과 똑같은 프론트엔드 직함을 달고있는 내가, 나를 브랜드할 수 있는 전략?
      - 여러분들이 찾고 갈고닦아야하는 것
    - 프론트엔드 개발자
      - 어드민 : 버그에 자유롭기에 새로운 기술을 사용해보기에 적합하다
        
        새로운 기술셋 적용 : 새로운 기술들을 빠르게 적용하는 민첩함을 가졌습니다.
        
        기존 기술과의 차이점에 대해 명확히 알면 좋음
        
        너무 새로운 것들에 집착하지 말것 (주니어들은 외연보다 깊이를 중시하길)
        
        부트캠프 졸업 및 컨설팅 했던 프론트엔드 개발자들은 어드민에 대다수의 비중
        
        아무래도 중요한 대고객 페이지를 개발할 수 있는 곳은 중견, 대기업
        
        그러다보니 규모 큰 기업에서의 경험이 이직 시 큰 타이틀이 됨
      - 대고객 : 유저 경험이 중요하기에 아래와 같이 어느 부분에 집중할까
        
        유저 수에 따라 새로운 기술 선택과 버그에 자유로울 수 있다.
        
        다만, 성과는 유저 수의 증가에 의존한다는 점을 명시하고 전략에 맞게 살자
        
        인터렉티브 웹 : 제가 인간 Webflow 입니다
        
        코드 스플리팅 : 우리 서비스 사용 유저들에게 어떠한 딜레이도 주지 않습니다
        
        오픈소스 라이브러리 생성 : 필요하다 생각하는것, 과감하게 공유합니다.
        
        Giscus 과 같은 간단한 아이디어로 큰 파급력 만들기
        
        Gatsby/Next 에서 사용될 블로그 Theme 만들어서 배포하기
        
        라이브러리 최적화 : 모두 똑같이 쓰는 라이브러리, 전 최적화를 잘합니다.
        
        본인만의 노하루를 통한 라이브러리 / 프로젝트 성능 향상
        
        등등 …
Responsive Web 반응형 웹
- 유저들은 다양한 크기의 디바이스에서 웹 브라우저를 통해 웹 서비스를 사용한다.
  - 과거에는 m. 도메인을 통해 모바일 대응
    - 기존 외주를 통한 서비스 개발(인하우스 개발자 비존재)
    - SSR 이 주축이었던 과거의 대형 서비스(네이버 등)
- ~~레이아웃 디자인 원칙 (조금은 디자이너에 가까운 역량) : https://every-layout.dev/~~
  - 참조만할 것, 현재는 알필요 없음
- @Media + useMediaQuery(React, Client Side)
- 몇가지 원칙을 통해 반응형 웹 개발을 위한 마인드셋 함양 (링크, 더 상세한 강의)
  1. Start from Global
    - 어렵게 생각하지말고 Padding / Margin 에서 시작하자
      - 디바이스 종류에 따른 적합한 상하좌우 공백 설정
  2. Avoid Fixed Size (Use Relative)
    - Relative to Font-size(rem…) / Viewport(vw…)
      - rem (Relative, html 요소 기준 보통 16px) : 반응형 웹 다 귀찮으면 이걸로 진행
    - width ⇒ max-width (Viewport 사이즈가 줄어듬에 따라, 자동으로 줄어듬)
    - height ⇒ min-height (내부 컨텐츠가 커짐에 따라, 계속 커질 수 있음)
  3. Flexbox and Grid
    - Flexbox : 작은 디바이스에서는 수직적 배치, 큰 디바이스에서는 수평적 배치
      - 예) 랜딩 페이지에서 “좌-텍스트 & 우-이미지” 배치를 모바일에선 수직으로 배치
    - Grid : 표기되는 아이템의 개수를 디바이스 크기에 따라 달리한다.
      - 예) Desktop 에는 1 Row 에 5 개의 아이템, Mobile 에는 1 Row 에 2 개의 아이템
  4. Media Query for added complexity
    - 1개에서 많으면 2~3개의 Breakpoint 가 좋다 - 수많은 기기들이 새로 생겨나기때문
      - 만약 네가 이 글을 읽고 있는 시점에 Breakpoint 를 정의하려한다면 참조
        
        위 참조 글을 읽을때쯤이면 얼마나 다양한 디바이스가 있을까?
        
        애플워치가 웹 브라우저를 내장하는 세상이 올까?
        
        전기차 내 웹 브라우저를 내장하는 세상이 온다면, 그때는?
      - 현재 개인적으로는 3개의 Breakpoint 로 4개의 타입 Viewport 를 지원
        
        Mobile → Tablet (Vertical / Horizontal) → Desktop
        
        Tablet 에서 Vertical 과 Horizontal 을 구별지을 필요가 있었다.
    - 정의는 min-width 부터 시작하라.
    - display: flex (예, Desktop) ⇒ display: block (예, Mobile)
  5. Take Advantage of Modern CSS
    - clamp 사용 (출처) + min / max

Typescript 타입스크립트 활용

타입스크립트 : 선언 declare
- 개발자가 정의한 타입(interface, type)은 프로젝트 내 어디에서든지 가져다 사용할 수 있다.
- 개발자가 정의하지 않았지만, 해당 객체나 함수를 사용하려면 에러가 발생한다.
  - 타입스크립트는 무엇을 사용하던, 무조건 타입이 정의되어있어야하기 때문
  - 어떤 경우일까?
    - (1) Frontend Analytics : window 에 <script> 태그를 통해 객체/함수를 주입하여 사용
    - (2) Customize, Expand Types : next-auth 의 경우 커스텀 Session 타입 정의 필요
- 추가로 학습할 내용 : Pixel(Facebook), GA 등등 은 어떻게 활용되는가?
- 2가지 방식으로 정보를 수집한다.
  1. Javascript 가 자동으로 유저의 행동 및 페이지 이동 흐름 분석
  2. Pixel, GA 가 제공하는 특정 이벤트 발행
    - Type + Payload 를 보낸다는 점에서 Reducer 랑 비슷한 느낌, 물론 다릅니다.
      - 예) Type : “Purchase” + Payload : “고객아이디, 위치, 가격, 상품 정보 등”
타입스크립트 : 선언 파일 (*.d.ts)
- 위에서 선언 declare 가 왜 필요한지 이해했다.
  - 언제 필요로 할까?
    - (1) Library 사용 시 혹은 만들어 배포할 시
      1. Vanilla JS 만으로 구성된 라이브러리를 배포하고
        
        개별 배포가 아닌 라이브러리 자체가 *.d.ts 를 갖고 있을수도 있다.
        
        예) react-hook-form
      2. TS declare 만으로 구성된 @types 라이브러리를 개별로 배포한다.
    - (2) Customize, Expand Types : 앞선 next-auth 와 동일하게 타입 확장 시
타입스크립트 : Generic 제네릭

[TypeScript] 타입스크립트 - Generic

타입스크립트 + Emotion/Styled : Styled 확장한 React Component 에서 Props 정의하고 싶다면

type ImageProps = {
  src: string
  width: number
}

// Using a css block = `` 반환
const Image0 = styled('div')<ImageProps>`
  color: ${(props) => props.theme.palette.primary.main};
  width: ${(props) => props.width};
  background: url(${(props) => props.src}) center center;
  background-size: contain;
`

// {} 반환
const Image1 = styled('div')<ImageProps>((props) => ({
  color: props.theme.palette.primary.main,
  width: props.width,
  background: `url(${props.src}) center center`,
  backgroundSize: 'contain',
}))

타입스크립트 : 기존 HTML 요소를 확장한 새 React Component 만들시 타입을 어떻게 정의할까

TypeScript + React: Component patterns
- Spread attributes to HTML elements
  - JSX.IntrinsicElements["button"]
    - JSX.IntrinsicElements 는 HTML 요소의 속성을 자식 타입으로 매핑
```
type ButtonProps = JSX.IntrinsicElements["button"];

function Button({ ...allProps }: ButtonProps) {
  return <button {...allProps} />;
}
```
- Preset attributes + Omit ⇒ Hint : 현업에서 Omit 을 가장 잘 활용했었습니다.
  - Omit 을 사용할때는 거의 기존 HTML 요소 를 확장한 새 React Component 만들었을때
    - 기존 HTML 요소 Props 중에 특정 Props 를 고정하고 싶을때
    - 기존 HTML 요소 Props 중에 특정 Props 만 사용하고 싶을때
      - 너무 많은 Props 들이 있어서, 해당 컴포넌트 사용자에게 불필요한 복잡도를 주기때문
```
type ButtonProps =
  Omit<JSX.IntrinsicElements["button"], "type">;

function Button({ ...allProps }: ButtonProps) {
  return <button type="button" {...allProps} />;
}

// 💥 This breaks, as we omitted type
const z = <Button type="button">Hi</Button>;
```
- ~~MakeRequired 라는 커스텀 타입 만들어보기~~ - 어려워서 패스할 것
```
type MakeRequired<T, K extends keyof T> = Omit<T, K> &
  Required<{ [P in K]: T[P] }>;

type ImgProps
  = MakeRequired<
    JSX.IntrinsicElements["img"],
    "alt" | "src"
  >;

export function Img({ alt, ...allProps }: ImgProps) {
  return <img alt={alt} {...allProps} />;
}

const zz = <Img alt="..." src="..." />;
```
- Controlled Input (제어 컴포넌트) 를 위한 커스텀 타입 만들어보기
  - JSX.IntrinsicElements["button"]
    - JSX.IntrinsicElements 는 HTML 요소의 속성을 자식 타입으로 매핑
```
type ButtonProps = JSX.IntrinsicElements["button"];

function Button({ ...allProps }: ButtonProps) {
  return <button {...allProps} />;
}
```
- Next.js 의 Caching 총 4가지 이해하기 (중요!)
  - (A) Server 에서의 Caching
    - Request Memoization (React Feature) 와 Data Cache (Next.js Feature) 동작 차이
      - (1) Request Memoization : “단일” 페이지 렌더 시 다중 fetch 호출 방지
      - (2) Data Cache : 무슨 요청이든 fetch 호출 시 데이터 재사용 (반복 fetch 호출 방지)
    - (3) Full Route Cache : 반복 렌더링 방지 (HTML or RSC Payload)
      - ~~주의 ! 아래 단어 모두 다 같은 말 (예전에 학생들이 이들의 차이가 무엇인지 질문했었었음)~~
        
        ~~the process of rendering and caching routes of your application at build time.~~
        
        ~~Automatic Static Optimization~~
        
        ~~Static Site Generation~~
        
        ~~Static Rendering~~
  - (B) Client 에서의 Caching
    - (4) Router Cache : 반복 렌더 호출 방지 (HTML or RSC Payload)
      - 서버 찌르지마, 있는거 그냥 써
- Next.js 의 Rendering 이해하기 (중요!)
  - 어떻게 Next.js 가 동작하는지 이해하기 위해서는 Caching 과 Rendering 이 둘의 이해가 필수
    - Server Components
    - Client Components
    - Server and Client Composition Patterns (배웠던 React Design Pattern)
    - Edge and Node.js Runtimes
      - 학생들 질문 : Next.js 를 CDN 에 배포하면 서버사이드 렌더링은 어떻게 동작하는거에요?
        
        이를 이해하기 위해서는 위에 Next.js 의 Deploying 이해하기 를 읽으면 됨
        
        답변 : Next.js 배포는 무조건 서버리스 or 서버 로 배포해야합니다
        
        서버리스 = Edge Function (이 또한 결국 Node.js 이긴함)
        
        서버 = Node.js Server (예, EC2)
- Next.js 의 Deploying 이해하기
  - Next.js npm run build (**next build**) 를 수행하면 어떤 디렉토리, 파일들이 생성되는가?
  - Managed Next.js with Vercel & Self-Hosting 은 따로 보지 않아도됨
  - Other Services & Automatic Updates & Manual Graceful shutdowns 읽으면 좋음
- Next.js 의 Data Fetching 이해하기 (중요!)
  - 몇몇분들이 개인/팀 프로젝트 진행시 제게 물어보는 말 : 전역 상태 관리 어떻게 할까요
    - 답변 : fetch + Redux 혹은 Redux Toolkit 혹은 React Query / SWR
      - 본 답변과 관련하여 API 는 어떻게 호출할지? 에 대해 추가 설명해드리는데, 아래가 그 내용
        
        **서버**에서 fetch 를 통한 호출
        
        **서버**에서 3rd Party 라이브러리 를 통한 호출
        
        **클라이언트**에서 Next.js 서버를 통해 (Routes Handler) 간접 호출
        
        **클라이언트**에서 3rd Party 라이브러리 를 통한 호출
- Next.js 의 Styling 이해하기
  - CSS-in-JS 가 Next.js 에선 실제로 어떻게 동작하며, 어떻게 설정하는지?
- Next.js 의 Routing 이해하기

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

03_반응형 웹 프로그래밍.md

03_반응형 웹 프로그래밍.md

Responsive Web 반응형 웹 정의 및 사용법

Typescript 타입스크립트 활용

Files

03_반응형 웹 프로그래밍.md

Latest commit

History

03_반응형 웹 프로그래밍.md

File metadata and controls

Responsive Web 반응형 웹 정의 및 사용법

Typescript 타입스크립트 활용