web(4)
-
웹의 역사, 그리고 프론트엔드
개념을 파악할 때 역사적 맥락에서 이해하면 핵심을 놓치지 않으며, 디테일을 가져갈 수 있고, 기억에 또한 오래 남는다. 그런 의미에서 웹과 프론트엔드의 역사를 살펴보고 이를 통해 미래를 더듬어 보자. 1. 초기의 웹, Web 1.0 1990년, 최초의 웹은 정보 제공이 목적이었다. 가상 공간에서 문서를 쉽게 제작하고, 하이퍼텍스트를 통해 문서와 문서를 연결하여 많은 사람들에게 문서가 공유될 수 있도록 하는 역할을 수행했다. 이후 1990년대 중반, CGI(Common Gate Interface) 통신이 가능해졌다. 유저들은 정보를 서버로 보내고 서버에서는 동적으로 페이지를 생성할 수 있게 되었다. PHP를 비롯해 여러 서버 스크립트 언어들이 탄생했다. 이 무렵, 서버와 통신하기 위한 간단한 조작이 클라이..
2022.07.28 -
React의 Higher-order Component란?
React에서 Higher-order Component(HOC)는 고차 함수 확장 기능을 도입해 Component들의 기능을 조합해 새로운 Component를 구현할 수 있도록 하는 디자인 패턴이다. HOC를 사용하면 반복적인 코드를 재사용하여 기능 구현을 편리하게 할 수 있고, 이를 응용해 웹서비스의 전체적인 틀을 제작할수도 있다. 1. 개요 클래스의 상속은 개발에 있어 많은 편의를 제공한다. 그러나 상속 관계가 깊어지면서 전체적인 상황을 헨들링하기가 어려워진다. 이러한 상속관계 간의 종속성을 없애고 직관적인 기능 구현을 위해 데코레이터 패턴이 도입된다. 함수형 언어에서의 대표적인 데코레이터 패턴이 바로 고차 함수다. HOC는 이러한 고차 함수를 활용한 기법이다. 어떤 Component를 제작할 때, ..
2022.05.06 -
CSS의 BEM이란?
BEM은 front-end 개발 시 권장되는 일종의 naming method(작명 방법론)다. BEM을 도입해 CSS class 이름을 체계적으로 작성하면, 가독성 및 유지보수에서 이득을 얻을 수 있다. 1. 개요 분야를 막론하고 설계, 디자인에 있어 다양한 방법론과 관례가 존재한다. 각각의 방법론에는 장단점이 있으며, 이로 인해 개인 및 팀에 따라 선호도가 있다. 그러나 모든 방법론들이 추구하는 바는, 협업 및 유지보수에 있어 이점을 얻기 위해서일 것이다. BEM 또한 마찬가지다. CSS에서 BEM은 일종의 Naming Convention으로, CSS class이름을 짓는 규칙이다. BEM에 입각한 CSS class명은 그 자체만으로 해당 class의 목적과 기능을 유추할 수 있게 된다. 때문에 프로젝..
2022.04.27 -
React Router란?
React Router는 React.js에서 routing을 위해 사용하는 standard library다. React Router를 활용하면 부드러운 브라우저의 URL 전환이 가능하다. 본 포스팅은 2022년 4월 기준 react-router-dom v6 최신 버전에 대한 글이다. 1. 개요 React.js 하면 가장 먼저 떠오르는 점은 SPA(Single Page Application)일 것이다. 즉, React를 사용한 앱은 주로 Client에서 Rendering되며, 하나의 페이지 내에서 추가 리로딩없이 데이터를 업데이트하는 방식으로 사용자에게 View를 제공한다. 비록 SEO(검색 엔진 최적화)에 불리하고, 첫 로딩 시간이 상대적으로 길다는 단점이 있지만, React로 구축한 서비스는 화면의 깜..
2022.04.25