πŸ“˜
Lif31up's Blog
  • Welcome! I'm Myeonghwan
  • How to Read the Pages
  • Fundamental Machine Learning
    • Foundational Work of ML: Linear/Logistic Regression
    • Early-stage of AI: Perceptron and ADALINE
    • What is Deep Learning?: Artificial Neural Network to Deep Neural Network
    • * Challenges in Training Nerual Network
  • Meta Learning
    • Overview on Meta Learning
    • Prototypical Networks for Few-shot Learning
    • Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks
  • Natural Language Process
    • Bag-of-Words
  • Actionale AI
    • * Overview on Actionable AI
  • Front-end Development
    • Overview on Front-end Development
    • Learning React Basic
      • React Component: How They are Rendered and Behave in Browser
      • State and Context: A Key Function to Operate the React Application
      • Design Pattern for Higher React Programming
  • Songwriting
    • A Comprehensive Guide to Creating Memorable Melodies through Motif and Phrasing
  • Sound Engineering
    • How to Install and Load Virtual Studio Instruments
    • A Guide to Audio Signal Chains and Gain Staging
    • Equalizer and Audible Frequency: How to Adjust Tone of the Signal
    • Dynamic Range: the Right Way to Compress your Sample
    • Acoustic Space Perception and Digital Reverberation: A Comprehensive Analysis of Sound Field Simulat
  • Musical Artistry
    • What is Artistry: in Perspective of Modern Pop/Indie Artists
    • Visualizing as Musical Context: Choose Your Aesthetic
    • Analysis on Modern Personal Myth and How to Create Your Own
    • Instagram Management: Business Approach to Your Social Account
  • Art Historiography
    • Importance of Art Historiography: Ugly and Beauty Across Time and Space
    • Post-internet Art, New Aesthetic and Post-Digital Art
    • Brutalism and Brutalist Architecture
Powered by GitBook
On this page
  1. Front-end Development

Overview on Front-end Development

ν”„λ‘ νŠΈμ—”λ“œ 개발(front-end development) λ˜λŠ” ν΄λΌμ΄μ–ΈνŠΈ-μ‚¬μ΄λ“œ 개발(client-side development)은 μ›Ήμ˜ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€μ™€ μ‚¬μš©μž κ²½ν—˜μ„ μ„€κ³„ν•˜κ³  κ΅¬ν˜„ν•˜λŠ” 데 μ΄ˆμ μ„ 맞좘 μ›Ή 개발의 μ„ΈλΆ€ λΆ„μ•Όμž…λ‹ˆλ‹€.

  • ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμ€ ν•˜μ΄νΌν…μŠ€νŠΈ λ§ˆν¬μ—… μ–Έμ–΄(HTML HyperText Markup Language)λ₯Ό μ‚¬μš©ν•˜μ—¬ μ›Ήμ˜ ꡬ쑰적 계측을 ν˜•μ„±ν•©λ‹ˆλ‹€.

  • CSS(Cascading Style Sheets)λŠ” μ‹œκ°μ  계측(styling layer)을 λ‹΄λ‹Ήν•˜λ©°, μ›Ή νŽ˜μ΄μ§€μ˜ λ””μžμΈκ³Ό ν‘œν˜„μ„ μ œμ–΄ν•©λ‹ˆλ‹€.

  • λ™μž‘ 계측(behavioral layer)은 JavaScript둜 κ΅¬ν˜„ν•˜μ—¬ μƒν˜Έμž‘μš©κ³Ό 동적 κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€.

λ§ˆν¬μ—… μ–Έμ–΄, μŠ€νƒ€μΌλ§, μƒν˜Έμž‘μš©, λ°˜μ‘ν˜• λ””μžμΈ, μ ‘κ·Όμ„± 등을 μ„€κ³„ν•˜κ³  κ΅¬ν˜„ν•˜λŠ” ν”„λ‘œκ·Έλž˜λ° νŒ¨λŸ¬λ‹€μž„λ„ ν¬ν•¨λ©λ‹ˆλ‹€.

Theoretical Foundation and Academic Research & Emerging Trends

ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμ€ 컴퓨터 κ³Όν•™κ³Ό 인간-컴퓨터 μƒν˜Έμž‘μš©(Human-Computer Interface, HCI)의 핡심 κ°œλ…μ„ 기반으둜 ν•©λ‹ˆλ‹€.

  • μ›Ή μ„±λŠ₯ μ΅œμ ν™”(web performance optimization)

  • μ›Ή λ³΄μ•ˆ(web security)

  • 진보적 μ›Ή μ‘μš©(PWAs, Progressive Web Apps)

  • μƒνƒœ 관리(state management)

  • μ›Ή μ ‘κ·Όμ„±(web accessibility)

ν”„λ‘ νŠΈ μ—”λ“œ 개발이 λ‹€λ₯Έ μ‘μš© κ°œλ°œμ— λŒ€ν•΄ κ°€μ§€λŠ” 차이점

ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμ€ λ‹€λ₯Έ μ†Œν”„νŠΈμ›¨μ–΄ μ‘μš© ν”„λ‘œκ·Έλž¨ 개발과 μ°¨λ³„ν™”λ˜λŠ” λ…νŠΉν•œ ꡐ윑적 νŠΉμ„±μ„ 가지고 μžˆμŠ΅λ‹ˆλ‹€.

  • ν”„λ‘œμ νŠΈ 기반 ν•™μŠ΅μ΄ μ£Όλ₯Ό 이루며, μ‹€μ œ ν”„λ‘œμ νŠΈλ₯Ό 직접 κ°œλ°œν•˜λ©° ν•™μŠ΅μ΄ μ§„ν–‰λ©λ‹ˆλ‹€.

  • UI/UX λ””μžμΈ 원칙에 λΆ€ν•©ν•˜λŠ” μ½”λ“œ μž‘μ„± λŠ₯λ ₯이 ν•„μˆ˜μ μž…λ‹ˆλ‹€.

  • ν”„λ‘ νŠΈμ—”λ“œλŠ” λ””μžμΈνŒ€, λ°±μ—”λ“œνŒ€, λ§ˆμΌ€νŒ…νŒ€ λ“± λ‹€μ–‘ν•œ λΆ„μ•Όμ™€μ˜ κΈ΄λ°€ν•œ ν˜‘μ—…μ΄ ν•„μš”ν•©λ‹ˆλ‹€.

ν”„λ‘ νŠΈ μ—”λ“œ 개발의 μ΅œμ‹  연ꡬ 동ν–₯ ν‚€μ›Œλ“œ

  • Wasm(Web Assembly)

  • SSG(Static-Site Generation)/Jamstack Architecture

  • Motion UI & Micro-interface

  • AI-driven front-end development

Previous* Overview on Actionable AINextLearning React Basic

Last updated 25 days ago