Front-End (14) 썸네일형 리스트형 Emotion으로 React 컴포넌트 디자인하기 Emotion? HTML 요소 혹은 React 컴포넌트에 CSS를 적용하기 위한 라이브러리 CSS-in-JS 라이브러리 중에서는 Styled Component 라이브러리가 가장 대두 되었으나, MUI(Material UI)가 스타일링 엔진을 Emotion으로 채택하면서 이목이 집중되고 있음 (Emotion에서도 styled component의 장점을 차용해서 활용하려는 흔적이 돋보임) css() 함수를 통해 간편한 React 컴포넌트 스타일링이 가능 공식 문서가 굉장히 친절하므로 Getting Started 항목을 읽어보는 것이 가장 명시적 패키지 설치 (react) vanilla 환경은 @emotion/css 패키지로 설치 $ yarn add @emotion/react emotion에서도 styled .. 이벤트(Event) 흐름 제어하는 법 Event란? 웹을 탐색하는 동안 브라우저는 여러 종류의 이벤트를 등록한다. 브라우저에서의 event란 사용자가 클릭했을 '때', 스크롤을 했을 '때', 텍스트를 입력했을 '때'와 같은 것을 의미한다. Event를 알아야하는 이유 input 창에 값을 입력하고, 엔터를 쳤을 때 리스트를 추가하려고 할 때 삭제 버튼으로 리스트를 삭제하고 싶을 때 인터랙티브 한 사용자 경험(UX)을 만들고 싶을 때 동적인 웹은 사용자와 상호작용이 잘 되어야 한다. 그리고 그 상호작용은 어떤 이벤트에 의해 발생하며 이를 유연하게 다룰 줄 알아야 interactive 한 웹 앱 구현이 가능하다. 프론트엔드에서 많은 인터렉션은 모두 Event(사건)를 처리하는 것과 깊은 관련이 있다. Event의 종류 사용자 인터페이스(UI)이.. 프론트 엔드의 상태(state) 관리 최근 React로 개인 프로젝트를 구현하다가 JS 기초 개념이 부족한 것 같아 VanilaJS를 통한 새 협업 프로젝트를 하고 있다. React를 활용하면 Redux, Context를 통해 심플하게 state 관리가 가능한데 VanilaJS에서는 React의 최대 장점인 useState기능이 없어진 탓에 부모, 자식 객체 간의 깔끔한 상태 관리에 대해 다시금 깨닫고 있다.. 이를 VanilaJS로, 그것도 clean code 형태로 구현하자니 어떻게 변수를 만들어 재사용할지, 또 어떤 로직이 효율적인 방법인지 떠올리기가 생각보다 쉽지가 않았다. 프로젝트 설계 전 전체적인 상태 구조를 짜지 않고 시작하게 되면 프로젝트가 복잡해질수록 유지보수가 더 힘겨워진다. 이번 포스팅은 프런트엔드 개발자가 갖춰야 할 상.. BOM (Browser Object Model) 완벽 정복하기 BOM이란? BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 대부분의 브라우저에서 구현은 되어있지만, 정의된 표준이 없어 브라우저 제작사 마다 세부사항이 다르고 다소 한정적이라는 특징이 있다. BOM의 역할은 웹 브라우저의 버튼, URL 주소 입력 창, 타이틀 바 등 웹브라우저 윈도우 및 웹페이지의 일부분을 제어할수 있게끔 하는 것이다. BOM을 이해하기 위해서는 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다. BOM의 공부와 동시에 Window 객체의 사용법을 알아야 한다. 대표적인 BO.. DOM (Document object Model) 완벽 정복하기 Front-End 개발자라면 반드시 거쳐가는 단어 DOM. DOM이란 정확히 무엇일까? DOM이라는 단어가 눈과 귀에 익숙함에도 막상 DOM이 무엇이냐고 물어봤을 때 "브라우저 개발자 툴에서 Element 객체 말할 때 그거~ 노드 말할 때 그거~" 라고 얼렁뚱땅 대답하진 않는지...? 나중에 DOM이 뭐냐는 질문을 들었을 때 마치 이 순간만을 기다렸다는 듯 간결하고 단호하게 대답하는 내 모습을 상상해보며 포스팅을 시작해본다. DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할.. SaaS (Software as a service) SaaS (Software as a service) 클라우드 컴퓨팅이 도입되면서 생긴 용어이다. 어플리케이션을 조직이나 개인에게 쉽게 제공되는 IT 서비스 방식을 의미한다. 간단하게 인터넷으로 우리가 필요한 서비스를 별다른 설치 없이 pc에서 이용할 수 있는 서비스이다. 대표적으로 웹메일, 구글 클라우드, 네이버 클라우드, MS오피스365, 드롭박스 등이 있다. SaaS는 위의 구성요소 표에서 보이는 것처럼 서비스 제공의 관점에서 볼 때 철저한 소비(Consume)를 목적으로 한다. Finished Service의 관점으로도 볼 수 있으며, 서비스 사용자에게 추가적인 개발이나 데이터에 대한 추가적인 부담을 씌우지 않는다. 기업소비 관점에서 본다면 세일즈포스닷컴의 CRM 서비스나 개인 소비 관점에서 본다면.. SEO (Search Engine Optimization) SEO Search Engine Optimization의 약어이다. 대부분의 웹 크롤러, 봇들이 JavaScript 파일을 실행시키지 못하고 HTML에서만 컨텐츠를 수집한다. 때문에 CSR 방식으로 개발된 페이지를 빈 페이지로 인식하게 된다. 검색엔진에 제대로 노출이 되지 않는다면 웹 페이지의 유입이 줄어드는 악순환이 반복된다. (반면 SSR은 view를 서버에서 전부 렌더링하여 내려주므로 HTML에 모든 컨텐츠가 저장되어 있기 때문에 SEO 적용에 큰 문제가 없다.) 따라서 많은 사람들이 리액트(React), 앵귤러(Angular), 또는 앰버(Ember) 등을 사용하여 웹사이트를 개발하면 검색 엔진 랭킹에 안좋을 것이라고 생각한다. 만약에 HTML 코드가 본문의 내용없이 메타 태그나 스크립트 태그 같.. SSR과 CSR SSR 서버 사이드 렌더링의 약어로써 단어 그대로 서버에서 렌더링을 작업한다. 기존에 존재하던 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 페이지에 대한 요청을 하며 서버에서는 HTML, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환한다. 웹에서 제공하는 정보량이 많아지고 데스크탑보다 성능이 다소 떨어지는 스마트폰의 웹에 대한 요구가 커지면서 새로운 기법이 탄생했다. CSR 클라이언트 사이드 렌더링의 약어로써 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다. 여기에 Angular JS, Backbone JS같이 SPA 개발에 쉬운 JS 프레임워크가 등장.. 이전 1 2 다음
