ABBO 기술 블로그

Author: 니용 반응형 웹이라는 것이 나온 건 꽤 오래된 거 같아요. 스마트폰과 태블릿 시장이 크게 성장하면서 우리는 웹 페이지에 접근하게 되어 화면을 보고 주로 사용하는 디바이스가 스마트폰/태블릿/노트북 등 종류가 정말 다양해졌어요. 아무래도 웹 페이지 하나를 스마트폰과 PC에서 사용하는 두 개의 스타일링이 다르다 보니 이를 하나의 페이지로 통합하고 해상도에 맞춰 자동적으로 변환해주다 보니 자연스럽게 반응형 웹 페이지를 개발하는 게 선택 사항이 아닌 필수 사항이 돼가고 있는 거 같아요. 그래서 오늘은 간단하게 반응형 웹은 어떻게 만드는 것인지, 만드는 방법은 어렵지 않은지 간단히 살펴볼까 해요. 대표적으로 어느 정도 프론트엔드 개발에 관심을 두고 계시고 경험이 있으신 분들은 다 아시겠지만, 주로 움..

Author: 니용 안녕하세요! 블로그 담당자 니용입니다. 오늘부터 개발자 일상이라는 카테고리를 오픈하여 개발하면서 겪은 불편한 일들이나 갖가지 이슈, 일상등을 기록해보려고 해요. 잡다한 이야기가 될 수도 있지만 이러한 실수가 쌓이고 쌓여서 나중에 저의 재산이 될 것이라 생각하려고 합니다. 본격적인 이야기는 계속 적어나가겠습니다 :)

앞에서 기본적인 자바스크립트 문법으로 작성을 해보았다면 여기서는 스크립트의 파일을 어떻게 나눌지와 각각 분리되어 있는 여러 가지 파일을 가져와 사용하는 방법을 작성해보려고 합니다. 다시 말해, 디자인 패턴 구조를 상세히 시키는 것입니다. 이전에 알아두어야 하는 것은 React 컴포넌트를 구분하는 방법입니다. 컴포넌트를 구분하는 방법에는 4가지가 있습니다. 1. Container vs Presentational 2. Stateful vs Stateless 3. Smart vs Dumb 4. Pure vs Unpure 사실 이러한 방식은 몰라도 개발에 전혀 문제가 없습니다. 하지만 React의 특성상 컴포넌트이 재사용성이 매우 뛰어난 것에 비해 활용을 하지 못한다면 기존의 자바스크립트를 그대로 사용하는 것이..

이번에는 React를 사용하여 간단한 시계를 만들어보려고 합니다. 가장 먼저 설치를 안하신 분은 여기 글로 가셔서 설치를 해주시면 되겠습니다! 앞에서 언급한대로, index.js는 React에서 사용하는 가상DOM을 렌더링 시켜주는 소스뿐이 없습니다. 이 소스를 통하여 React는 같은 경로에 있는 App.js 파일을 호출해오고 그 부분에 document.getElementById라는 DOM 선택자를 통하여 렌더링을 진행하는 간단한 소스입니다. import는 상단에 기본적으로 제공하는 React / ReactDOM / App.js와 css 파일을 진행하고 있고, serviceWorker는 해당 서비스가 정상적으로 작동하도록 도와주는 역할을 합니다. 지금은 스킵하도록 하겠습니다! 기본적으로 App.js에는..