
κ°λ°μ μμν μ§ μ΄λλ§ 3λ
μ΄λ μκ°μ΄ νλ λ€.
μ§λκ° μκ°μ κΈ°λ‘νκ³ μ μ΄λ ₯μλ₯Ό μ
λ°μ΄νΈλ₯Ό νκ³ μ νλ€.
무μμ μ¨μΌ ν κΉ ?
νλ ₯, μ΄λ¦, μ΄λ©μΌκ³Ό κ°μ΄ κΈ°λ³Έ μ 보λ₯Ό μ μΈνκ³ , μ΄λ€ μ λ€μ κ³ λ €νμ¬ μμ±ν΄μΌ λλ₯Ό μ‘°κΈ λ κΆκΈν΄ν μ§ μμ νμμ μ΄λ ₯μλ₯Ό μ΄λ€λ μκ°μΌλ‘ κ³ λ―Όμ μμνλ€.
ν¬κ² 4κ°μ§μ λ©μ΄λ¦¬λ‘ λλμλ€.
- λλ μ΄λ€ κ°λ°μμ΄λ©°, μ΄λ€ μ‘°μ§κ³Ό νμ¬λ₯Ό μ νΈνλκ°?
- κ²½ννλ νλ‘μ νΈλ 무μλ€μ΄ μκ³ , 맑μ μν μ 무μμ΄μκ³ μ΄λ€ μΌλ€μ νμλκ° ?
3. λ΄κ° κ°μ§ μ€ν¬λ€μ 무μμ΄ μλκ°
4. μ 무 μΈμ μΌλ‘ λ΄κ° μ΄λ£¬ μ±κ³Όλ€μ 무μμ΄ μμκΉ?
λλ μ΄λ€ κ°λ°μμ΄λ©°, μ΄λ€ μ‘°μ§κ³Ό νμ¬λ₯Ό μ νΈνλκ°
μ μ
λλ μ΄μ λν λ΅μ λͺ°λκΈ°μ μ΅λν μΆμμ μΌλ‘ μμ±νμλ€.
μ§κΈμ μ΄λ μ λ μ΄ κ³ λ―Όμ λν μκ°μ νμ΄ μ‘νλ€.
- κ°λ°μ λͺ°λ ν μ μλ νκ²½μ μ νΈνλ€.
π : λΉν¨μ¨μ μΈ νμμ λ¬Έμμ²λ¦¬, λΆνμνκ² λ§μ νμ λ± - μ£Όλμ κ°λ°νκ³ μ견μ λΌ μ μλ νκ²½μ μ νΈνλ€.
π€: μ΄λ° λ²νΌμ΄ μμΌλ©΄ μ’μ κ² κ°μ -> RFC μ μ -> λ Όμ -> κ°λ° λλ λ°λ € - λνκ° λ§μ μ‘°μ§μ μ νΈνλ€.
π : κ·Ή κ°μΈμ£Όμμ μ‘°μ§μ μ±ν₯μ λ§μ§ μλλ€. - κΈ°μ λ°μμ μ μ°ν νμ¬
π : λΉ λ₯΄κ² λ³νλ μ 무 νΉμ±μ λ§μ§ μκ² κΈ°μ μ νλ¦μ΄ μ μ°νμ§ μμ νμ¬λ νΌνκ³ μΆλ€.
μμ± μ λ΄κ° κ°κ³ μΆμ νμ¬μ μμ μκ°ν΄λ³΄μ
κ²½ννλ νλ‘μ νΈλ 무μλ€μ΄ μκ³ , 맑μ μν μ 무μμ΄μκ³ μ΄λ€ μΌλ€μ νμλκ° ?
1. κΈ°μ¬λ
νμ νλ κ³Όμ μμ νΉμ μ¬λμ κΈ°μ¬λ μΈ‘μ μ΄ κ°λ₯ν κΉ? λ¬Όλ‘ PR λ‘κ·Έλ₯Ό μ΄μ©ν μμΉνλ κ°λ₯νλ κ·Έκ²μΌλ‘ μ΄ μ¬λμ κΈ°μ¬λλ₯Ό κ°λ νκΈ°λ λΆκ°λ₯νλ€κ³ μκ°νλ€.
% μ κΈ°μ¬λ보λ€λ μμ μ΄ νμλ κ²½νμ νμ΄μ°λ κ² λ μ’λ€κ³ μκ°νλ€.
- CSR μΌλ‘λ§ λ λλ§νλ μμλ€μ νμνκ³³μ μ μ ν SSR μ μ μ©νμλλ 첫 νμ΄μ§ λ λλ§ μλκ° 2μ΄μμ 0.8μ΄λ‘ κ°μνμλ€.
- light house μ μλ₯Ό 60μ μμ 90μ μΌλ‘ λμ΄μ¬λ Έλ€.
μ²λΌ λ΄κ° μ¬μ©ν μ€ μλ κΈ°μ λ€μ μ΄λ»κ² μ μ©ν΄ νλ‘μ νΈμ κΈ°μ¬νμ¬ μ΄λ€ μ λ€μ΄ μ’μμ‘λ€ κ°μ μμ±μ΄ %μ μΆμμ κΈ°μ¬λλ³΄λ€ λμ΄λΉκΈ°λ νμ΄ κ°νλ€.
2. κ²½ν μ΄λ»κ² μΈκΉ ?
- UI/UX κ°μ
μμ²λΌ βμ΄λ»κ²' κ° λΉ μ§ κΈλ³΄λ€λ κ²½νμ λν λ΄μ©μ μ΄λ μ λλ ꡬ체μ μΌλ‘ μμ±μ΄ λμ΄μΌ νλ€.
- A/B ν μ€νΈ λ°μ΄ν° κΈ°λ° UI/UX κ°μ
κ³Ό κ°μ΄ λ³κ²½νλ€λ©΄ μ½λ μ¬λμ΄ μ‘°κΈ λ κΆκΈν΄μ§ κ²μ΄λ€. μ΄λ€ λ°μ΄ν°λ₯Ό κ°μ§κ³ μ΄λ»κ² κ°μ μ νλλ 무μμ΄ λ μ’μμ‘λλΌ κ°μ΄ λ©΄μ λ ν μ΄μΌκΈ°λ μκΈ°κ² λλ€.
3. μ¬μ©ν κΈ°μ μ λν μ΄ν΄
- intersection observer λ₯Ό μ΄μ©ν lazy-loading μΌλ‘ νΌν¬λ¨Όμ€κ°μ
- vue -> react λ‘ μ ν
μ΄λ ₯μλ₯Ό μ½μ μ¬λμ μ scroll event λ₯Ό νμ©νμ§ μκ³ intersection observer λ₯Ό μ¬μ©νλμ§, vue λ₯Ό μ react λ‘ λ³κ²½νμλμ§ κΆκΈ ν μ μλ€.
κ·Έλ₯ λ€λ₯Έ μ¬λλ€ λ€ μ°κΈΈλ νν΄λ³΄μ¬μ μ λ μ¬μ©νμ΅λλ€β¦ 보λ€λ κΈ°μ λ€μ μ₯λ¨μ μ νμ νμ¬ λ Όλ¦¬μ μΌλ‘ μ€λͺ νλ κ²μ΄ μ’λ€.
λ΄κ° κ°μ§ μ€ν¬λ€μ 무μμ΄ μλκ°
λ΄κ° κ°μ§ μ€ν¬μ λ²μλ μ΄λκΉμ§μΌκΉ ?
λ¨μν νλ² κ²½ν ν΄λ³Έ κ²λ λ΄κ° κ°μ§ μ€ν¬μ λ²μμΌκΉ ?

μ μ λλ λλΌλ μ μ΄μΌ λ κ² κ°μμ λ©λ΄νμ²λΌ νλ² μ€μ³ μ§λκ° κ²λ€λ λ€ μ μλ κΈ°μ΅μ΄ μλ€.
μ λ κ² μ μ΄λμΌλ©΄ λ©΄μ λ λ°λμ λ©΄μ κ΄μ ν΄λΉ κΈ°μ μ λν΄ μ§λ¬Έν κ²μ΄λ€. νλ² κ°λ³κ² μ€μ³ μ§λκ° κΈ°μ μ λν΄ κΉμ΄ μλ μ€λͺ μ΄ κ°λ₯ν κΉ ? λλ΅μ βμλμ€β λ€.
μ΄λ μ λ λ΄κ° μμ μ΄ μκ³ , κ·Έ μ£Όμ μ λν΄ κ°λ³κ² λ Όμ ν μ μμ μ λλ λμ΄μΌ λ΄κ° κ°μ§ κΈ°μ μ΄ μλκΉ ?
- React: ν¨μ¨μ μΈ μ»΄ν¬λνΈ λ¨μ κ°λ°, Context API, Redux, Mobx λ₯Ό νμ©ν State Manage, SEO, SSR
- HTML/CSS: μλ©ν±ν ꡬ쑰ν, SCSS, μ λλ©μ΄μ μ²λ¦¬
μμ²λΌ μ€ν¬μ λμ΄ν λλ μ€ν¬μ μ μλ₯Ό μ£Όλ κ²λ³΄λ€λ ν΄λΉ κΈ°μ μ μ΄λ μ λ νμ©ν μ μλμ§ μ μ΄μ£Όλ κ²μ΄ μ’λ€.
μ 무 μΈμ μΌλ‘ λ΄κ° μ΄λ£¬ μ±κ³Όλ€μ 무μμ΄ μμκΉ ?
μ
무 μΈμλ λ΄κ° κ΄μ¬ μλ μμλ€μ μμ±νλ κ²λ μ’λ€.
κ·Έκ²μ μ¦λͺ
ν μ μλ λ§ν¬λ ν¨κ» λ¬μμ€λ€λ©΄ λ μ’μ§ μμκΉ?
- λμΈνλ
- λΈλ‘κ·Έ
- λ°ν μλ£
- μ€νμμ€ κΈ°μ¬
- μ¬μ΄λ νλ‘μ νΈ λ±
μ¬μ΄λ νλ‘μ νΈμ λν΄ κ³ λ―Όνλ€λ³΄λ, μ 무λ νλ‘μ νΈ λ±μ μ§ννλ©° μ΄μ νΈλνΉνλ μμλ€μ νκ³³μ λͺ¨μλλλ€λ©΄ μΈμ κ°λ μ’μ μ€νμμ€ λ³΄λ¬Όλ¨μ§κ° λ κ² κ°λ€λ μκ°μ΄ λ€μλ€.
μ΄λ»κ² λ§λ€κΉ ?
μ£Όλ λ§ν¬λμΈμ μ΄μ©νκ² λ ν λ°, κΈ°μ‘΄μ μ΄λ ₯μ νλ‘λ μμ λ‘κ² ννμ΄ λΆκ°ν μμλ€μ΄ μμ΄ μΉμμμλ μ€ν μ΄λ ₯μλ₯Ό λ§λ€λ €κ³ νλ€.
Figma λ₯Ό μ΄μ©νμ¬ κ°λ³κ² λμμΈμ νκ³ Gatsby + TypeScript + Styled-Components λ₯Ό μ΄μ©νμ¬ νλ‘μ νΈλ₯Ό ꡬμ±νκ³ μ νλ€.
