이번 포스팅에서는 플렉스박스(Flexbox)와 미디어쿼리(media query)를 사용하여 반응형 네비게이션을 만들어보도록 하겠습니다. 네비게이션 1 아래 HTML 코드는 여느 웹사이트에서나 흔히 볼 수 있는 젼형적인 네비게이션입니다. 화면의 너비가 좁은 모바일 화면에서는 메뉴를 세로로 표시하고, 화면의 너비가 넓은 데스크탑에서는 메뉴가 가로로 표시하는 경우가 많은데요. 모바일 스타일 반응형 디자인을 할 때는 모바일 우선으로 스타일을 적용하는 것이 여러 가지 측면에서 좋은 관행으로 알려져있습니다. 먼저 <ul/> 엘리먼트를 Flex
양식(form)은 사용자로 부터 데이터를 입력 받기 위해 웹애플리케이션에서 필수적인 요소임에도 불구하고, 리액트(React)로 직접 구현을 해보면 생각보다 고려해야 부분이 많다는 것을 느끼게 됩니다. 이번 포스팅에서는 React Hook를 이용해서 좀 더 깔끔하게 양식 UI를 구현하는 방법에 대해서 알아보겠습니다. 상태 관리 코드 분리하기 기본적으로 하나의 <form/> 여러 개의 <input/>, <select/>, <textarea/>으로 구성됩니다. 이렇게 사용자가 입력해야 값이 많아질수록 양식은 내부적으로 많은 상태를 가지게
양식(form)은 웹 애플리케이션에서 사용자로 부터 데이터를 입력 받기 위해 필수적인 UI 요소이죠? 그런데 리액트(React)로 직접 양식 UI를 구현해보면 처음에 생각했던 것보다 고려해야 할 부분이 많다는 것을 깨닫게 되는데요. 이번 포스팅에서는 비밀번호를 변경하기 위한 전형적인 양식 UI를 React 컴포넌트로 구현하면서 어떤 부분에 신경을 써서 프로그래밍을 해야 하는지 알아보겠습니다! JSX 마크업 먼저 하나의 입력란과 제출 버튼으로 구성된 간단한 양식에 대한 마크업을 작성해보겠습니다. <form/> 부모 엘리먼트 아래에 <
optional chaining을 지원하기 위해서 ES2020에서 추가된 문법인 ?. 연산자에 대해서 알아보도록 하겠습니다. . 연산자를 통한 속성값 접근의 문제점 그동안 자바스크립트에서는 주로 . 연산자(chaining)를 사용해서 객체의 속성값에 접근했었습니다. 간단한 예로, user 객체의 name 속성의 first 속성값은 다음과 같이 접근할 수 있습니다. 하지만 이렇게 여러 단계로 이루어진 객체를 탐색할 때는 항상 TypeError가 발생할 확률이 생깁니다. 이를 방지하기 위해서 일반적으로 다음과 같은 방어 로직을 넣게 되
nullish coalescing을 지원하기 위해서 ES2020에서 추가된 문법인 ?? 연산자에 대해서 알아보도록 하겠습니다. || 연산자를 통한 기본값 처리의 문제점 그동안 자바스크립트에서는 주로 || 연산자(logical OR)를 사용해서 기본값 처리를 해왔는데, 이 방법은 한 가지 맹점이 있었습니다. 간단한 예로, options 객체를 인자로 받는 다음 isEnabled 함수를 생각해보겠습니다. 의도했던 대로 enabled 속성값이 undefined이거나 null일 때, 기본값인 true를 리턴합니다. 하지만 enabled 속
자바스크립트 프로젝트의 규모가 커지면 디렉토리 구조도 복잡해지기 마련입니다. 혹시 다음과 같은 코드 때문에 해당 모듈을 찾으려고 상위 디렉토리를 하나씩 짚어가며 올라가다가 스트레스 받으신 적이 있으신가요? 😝 상대 경로 Node.js에서 내부 모듈을 불러올 때 가장 흔히 사용되는 방법은 상대 경로를 사용하는 것입니다. 위에서 보시는 것 처럼 상대 경로를 사용해서 모듈을 불러오면 모듈이 어느 경로에 위치하는지 파악하기가 난해해지는 경우가 생깁니다. 뿐만 아니라, 이 자바스크립트 파일을 다른 디렉토리로 옮기려면 상대 경로를 그에 따라
ES6(ES2105) 이상의 최신 자바스크립트 문법으로 작성된 코드가 노드JS(Node.js)에서 실행이 안 되서 애를 먹는 경우가 종종 있는데요. 이번 포스팅에서는 자바스크립트 트랜스파일러(Transpiler)인 Babel을 이용하여 이 문제를 깔끔하게 해결해보겠습니다. 개발자들이 실행 환경에 구애받지 않고 항상 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 유용한 도구인 바벨(Babel)에 대해서는 별도 포스팅을 참고바랍니다. Node.js에서 ES6 코드 실행 오류 먼저 간단한 예제 프로젝트를 하나를 만들겠습니다. js
Flexbox(플렉스박스)를 이용한 반응형 웹디자인이 대중화되면서 CSS에서 Flexbox의 존재감이 점점 커지고 있습니다. 이번 포스팅에서는 Flexbox를 이해하기 위해서 꼭 필요한 핵심 개념과 자주 사용되는 속성에 대해서 살펴보겠습니다. Flexbox 구성 요소 Flexbox는 일반적으로 하나의 Flex container와 여러 개의 Flex item으로 구성됩니다. 따라서, Flexbox를 사용할 때 마크업과 스타일은 대략 다음과 같은 형태를 띠게 됩니다. 여러 개의 내부 엘리먼트를 담고 있는 외부 엘리먼트에 display:
Material UI에서 기본적으로 제공하는 컴포넌트를 그대로 사용해도 훌륭하지만 약간씩 스타일을 변경하고 싶을 때가 있습니다. 이번 포스팅에서는 Material UI에 사용자가 정의한 스타일을 적용하는 방법에 대해서 알아보겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. CssBaseline 컴포넌트 어떤 브라우저를 돌아가느냐에 상관없이 일괄적인 스타일을 적용되려면, CSS를 전역에서 정규화(normalize)시켜주는 것이 권장됩니다. 이를 위해서 우선 <CssBaseline /> 컴포넌
웹페이지의 레이아웃을 잡을 때 컨텐츠를 화면 중앙에 위치시키기나 격자로 배치해야 할 때가 많이 있습니다. Material UI의 <Container/>와 <Grid/> 컴포넌트를 사용하면 이러한 웹페이지 레이아웃을 매우 쉽고 간단하게 잡을 수 있습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. Container 컴포넌트 <Container/> 컴포넌트는 컨텐츠를 좌우에 적당한 간격을 두고 화면 중앙에 위치시킬 때 사용합니다. 최대 너비만을 제한하는 fluid 모드와 항상 동일한 너비를 강제하
자바스크립트 생태계에서 모듈 시스템은 꽤 오랜 기간 혼란스러운 주제였는데요. Node.js가 처음부터 채택한 CommonJS의 require와 ES6에서 도입된 import가 공존하면서, 개발자들은 환경에 따라 두 가지 방식을 오가야 했습니다. 위 두 코드는 동일하게 ExpressJS 라이브러리를 불러와 서버 객체를 생성하고 있지만, 사용하는 모듈 시스템이 다릅니다. Node.js 초기에는 ES 모듈을 쓰려면 Babel 같은 트랜스파일러가 필수였지만, 버전 13.2부터 ES 모듈이 정식 지원되기 시작했고, 새로 시작하는 프로젝트에서
웹페이지의 UI를 구현하다 보면 서로 관련이 있는 여러 개의 컴포넌트를 시각적으로 하나의 그룹처럼 묶어주는 컴포넌트가 필요합니다. 이렇게 관련된 여러 컴포넌트를 보기 쉽게 도와주는 Material UI의 <Paper/>와 <Card/> 컴포넌트에 대해서 알아보겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. Paper 컴포넌트 먼저 살펴볼 <Paper/> 컴포넌트는 마치 포스팅잇처럼 화면에서 도드라져 보이는 효과를 제공합니다. elevation, outlined 이렇게 2가지 형태를 사용할
마크다운(Markdown)은 경량화된 마크업 언어로 구조적인 텍스트의 편집 용도로 여러 가지 도구에서 사용되고 있습니다. 대표적인 사례인 Github의 경우, 확장된 형태의 마크다운을 지원하고 있기 때문에 이슈(issue)나 PR(pull reqeust)를 생성할 때 쉽게 접해볼 수 있습니다. 이번 포스팅에서는 Markdown 형태의 텍스트를 HTML 형태의 택스트로 변환하는 방법에 대해서 살펴보겠습니다. Unified, Remark, Rehype remark는 마크다운을 처리할 때 사용하는 라이브러리이고, rehype은 HTML을
사용자로 부터 정보를 입력 받는 양식(form) UI의 경우 <input/> 또는 <select/>, <textarea/>와 같은 HTML 엘리먼트가 많이 사용됩니다. 이러한 입력 엘리먼트는 브라우저마다 다른 스타일로 표현되고, 기본 스타일은 그대로 사용하기에는 너무 단조롭기 때문에 CSS를 이용해서 커스텀 스타일을 해주는 것이 일반적일 것입니다. Material UI는 이러한 입력 엘리먼트를 이미 예쁘게 디자인된 React 컴포넌트 형태로 제공을 해주기 때문에 우리는 그냥 편리하게 갔다 쓰기만 하면 됩니다. 이번 포스팅에서는 Ma
React 앱을 개발할 때 Material UI와 같은 컴포넌트 라이브러리를 사용하는 이유 중 하나는 버튼과 같이 너무 기본적인 컴포넌트를 직접 구현하는데 들어가는 시간과 노력을 절약하기 위함일 것입니다. 일반적으로 버튼은 UI에서 사용자의 명령을 받아드리는 창구 역할을 하고, 여러 페이지에 거쳐서 다양한 형태로 사용됩니다. 따라서 단순히 사용자 경험 뿐만 아니라 해당 서비스의 전체적인 브랜드 이미지에도 큰 영향을 줄 수 있습니다. 이번 포스팅에서는 이렇게 생각보다 상당히 중요할 수 있는 버튼을 Material UI에서 제공하는 <
지난 포스팅에서는 Material UI의 <Typography/> 컴포넌트를 사용하여 텍스트를 표현하는 방법에 대해서 알아보았습니다. 이번 포스팅에서는 텍스트와 더불어 UI에서 감초같은 역할을 하는 아이콘을 Material UI에서 어떻게 사용할 수 있는지 알아보도록 하겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. Material Icons Material UI는 @material-ui/icons 패키지를 통해서 1,000 여종의 SVG 아이콘을 제공하고 있습니다. 그래서 아이콘을 엄청
Material UI는 현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나입니다. 많은 React UI 컴포넌트 라이브러리는 기존에 있는 CSS 라이브러리를 기반으로 만들어지는 경우가 많습니다. React Bootstrap이 대표적인 예인데요. 이러한 React 라이브러리는 근간이 되는 CSS 라이브러리에 대한 이해나 경험이 없는 경우 여러모로 사용하기 불편한 경우가 많습니다. 하지만 Material UI는 여타 React UI 컴포넌트 라이브러리와 달리 처음부터 React로 만들어졌기 때문에 많은 개발자들에
개발 환경에서는 브라우저 콘솔이나 터미널에 에러가 바로 찍히니까 디버깅이 어렵지 않은데요. 프로덕션에 배포하고 나면 이야기가 완전히 달라집니다. 사용자가 "뭔가 안 돼요"라고 제보하면 로그를 뒤지면서 뭐가 문제인지 추적해야 하는데, 이게 생각보다 꽤 고된 작업이거든요 😅 이런 상황에서 빛을 발하는 도구가 바로 Sentry입니다. Sentry는 애플리케이션에서 발생하는 에러를 실시간으로 수집하고, 스택 트레이스와 함께 발생 맥락까지 보여주는 에러 모니터링 서비스인데요. 이번 글에서는 Sentry를 처음 도입하려는 분들을 위해 프로젝
웹 페이지에서 이미지를 다룰 때 한 가지 파일로 모든 상황을 커버하기란 쉽지 않습니다. 모바일에서는 세로로 길쭉한 이미지가 잘 어울리는데 데스크톱에서는 가로로 넓은 이미지가 필요할 수 있고, 최신 브라우저에서는 AVIF로 용량을 줄이고 싶지만 구형 브라우저에서는 JPEG로 보여줘야 하죠. <img> 태그 하나로는 이런 분기를 처리할 수가 없습니다. HTML의 <picture> 요소는 바로 이런 문제를 해결하기 위해 등장했는데요. 화면 크기, 이미지 포맷 지원 여부, 해상도 등 여러 조건에 따라 브라우저가 최적의 이미지를 골라서 보여
Subscription GraphQL에는 query와 mutation 그리고 subscription 이렇게 총 3가지 operation type이 있습니다. 이 중에 query는 데이터 조회를 위해서 필수적으로 사용되고, mutation은 데이터 변경을 위해서 많이 사용되고 있습니다. query와 mutation 대비 다소 생소한 subscription은 주로 실시간(real-time) 애플리케이션을 구현하기 위해서 사용되는데요. subscription도 기본적으로 query처럼 데이터를 조회를 위해서 사용되지만 작동 방식에서 큰