이번 포스팅에서는 CSS를 이용하여 라디오 버튼을 스타일하는 요령에 대해서 알아보겠습니다. 차근차근 따라오시다보면 아래와 같은 라디오 버튼을 만드실 수 있으실 거에요. 🍅😄 왜, 라디오 버튼을 스타일할까? 먼저 웹사이트를 만들 때 라디오 버튼(radio button)을 뭐하러 직접 스타일하는지에 대해서 잠깐 짚고 넘어가겠습니다. 일반적으로 웹사이트에서 라디오 버튼은 브라우저나 운영체제, 디바이스에 따라서 미묘하게 다르게 표현이 됩니다. 그래서 플랫폼에 구애받지 않고 일관적인 사용자 경험을 제공하기 위해서 라디오 버튼에 커스텀 스
모바일 우선(mobile-first) 웹디자일 할 때 컨텐츠를 위에서 아래로 배치하는 화면 레이아웃을 제일 먼저 고려하게 되는데요. 이 때 대부분의 경우 컨텐츠 (특히, 텍스트 컨텐츠)를 수평 중간에 위치시켜야 하죠? 이번 포스팅에서는 CSS로 레이아웃 잡을 때 컨텐츠를 수평 중간에 정렬하는 요령에 대해서 알아보려고 합니다. 수평 중간 정렬 컨텐츠를 수평에 정렬하는 작업은 웹페이지의 여러 부분에 걸쳐서 일어나게 되므로 보통 클래스로 스타일하는 경우가 많습니다. 관례적으로 container나 max-width-wrapper와 같은 클
이번 포스팅에서는 화면(viewport) 너비에 따라서 적절히 반응하는 글꼴을 CSS로 어떻게 스타일하는지 알아보겠습니다. Media Queries 반응형 글꼴하면 가장 쉽게 떠올리리 수 있는 방법이 바로 미디어 쿼리(media query)를 사용하는 것입니다. 예를 들어, 화면 너비가 480px 이상과 1024px 이상이 되었을 때 HTML의 여러 요소(element)와 클래스(class)에 적용된 글자 크기가 자동으로 늘어나게 스타일해볼까요? 오래전 부터 쓰이던 이 방법은 보시다시피 동일한 CSS 선택자에 대해서 여러 번 스타일
웹이 지금과 같이 대중적인 플랫폼이 되는데 서로 다른 웹페이지를 무한대로 연결해주는 HTML의 링크(link)가 중요한 역할을 했을텐데요. 이번 포스팅에서는 HTML의 <a> 요소로 마크업이 되는 링크(link)를 CSS로 스타일하는 방법에 대해서 알아보겠습니다. 브라우저 기본 링크 스타일링 우리가 굳이 링크를 스타일해주지 않더라도 대부분의 브라우저에서는 링크를 유관으로 구분하기 쉽도록 기본적으로 스타일을 제공하는데요. 보통 이렇게 브라우저 자체에서 지원하는 기본 스타일을 User Agent Stylesheet이라고 합니다. 크롬
React에서는 컴포넌트 스타일링을 위해서 CSS-in-JS 라이브러리가 매우 많이 사용되고 있는데요. 이번 포스팅에서는 Styled Components와 함께 CSS-in-JS 라이브러리의 양대산맥으로 손꼽히는 손꼽히는 이모션(Emotion)을 사용해서 React 컴포넌트를 스타일하는 방법에 대해서 살펴보겠습니다. 외부 라이브러리 없이 React 컴포넌트를 스타일링하는 방법은 React 컴포넌트 CSS 스타일링 기본을 참고 바랍니다. 패키지 설치 자바스크립트 패키지 매니저인 npm을 이용하면 React 프로젝트에 Emotion을
구글 지도(Google Maps)는 구글에서 제공하는 글로벌 지도 서비스입니다. 네이버나 카카오에서 제공하는 지도 서비스와 달리 국내 지도 뿐만 아니라 해외 지도까지 제공하기 때문에 전 세계 사용자를 대상으로 하는 애플리케이션을 개발할 때 특히 유용하게 사용할 수 있는데요. 이번 포스팅에서는 구글 지도를 웹페이지 상에서 띄우고 제어할 때 사용하는 구글 Maps API에 대해서 알아보려고 합니다. 차근차근 따라오시다보면 위와 같은 구글 지도를 웹페이지에 나오게 수 있으실 것입니다. 😁 API 키 발급 받기 구글 Maps API를 사
React 프로젝트에서 대부분의 외부 스크립트는 npm 패키지로 설치해서 불러올 수 있지만 간혹 npm 패키지가 제공되지 않는 경우도 있습니다. 이럴 경우 어쩔 수 없이 웹에서 전통적으로 외부 스크립트를 불러오는 방법인 HTML 문서의 <script> 태그를 사용할 수 밖에 없는데요. 이번 포스팅에서는 React 컴포넌트에서는 어떻게 <script> 태그로 외부 자바스크립트 불러울 수 있는지에 대해서 알아보도록 하겠습니다. index.html 파일 안에 script 태그 추가하기 일반적으로 React 프로젝트에는 public 폴더나
지난 포스팅에서는 커스텀(custom) React Hook을 사용하여 양식(form) UI를 구현해보았는데요. 이번 포스팅에서는 이와 유사한 방식으로 React Hook 기반의 API를 제공하는 React Hook Form 라이브러리에 대해서 알아보려고 합니다. 새로운 라이브러리를 배우는 가장 효과적인 방법은 그 라이브러리를 이용해서 무언가를 만들어보는 것이 겠죠? 본 포스팅을 끝까지 따라오시면 아래와 같은 로그인 폼(form)을 만드실 수 있으실 거 에요 😁 패키지 설치 React Hook Form 라이브러리는 자바스크립트 패키
이번 포스팅에서는 타입스크립트 코드를 자바스크립트로 코드로 컴파일하는 기본적인 방법에 대해서 알아보겠습니다. 타입스크립트 컴파일러 우선 타입스크립트 컴파일러(TypeScript compiler)가 무엇을 해주는 도구인지 간단히 짚고 넘어갈까요? 일반적으로 컴파일(compile)은 소스 코드를 특정 플렛폼에서 실행 가능한 형태로 변환하는 과정을 의미하는데요. 기존에는 C++나 Java와 같이 자체 타입 시스템을 가진 프로그래밍 언어에서 주로 다뤄지던 개념이었으나, 타입스크립트의 등장 이후로는 자바스크립트에서도 컴파일이라는 용어를 심심
많은 자바스크립트 프로젝트에서 ESLint를 사용하여 코드에 문제가 없는지 검사를 하고 있습니다. 이번 포스팅에서는 ESLint를 어떻게 설정하는지에 대해서 각 옵션 별로 좀 자세히 알아보겠습니다. ESLint에 대한 기본적인 사용법은 관련 포스팅를 참고 바랍니다. 설정 파일 형식 ESLint는 JSON, YAML, JavaScript와 같이 다양한 형식의 설정 파일을 지원하는데요. 설정 파일의 이름은 항상 .eslintrc가 되야하며, 원하는 포맷에 따른 파일 확장자를 사용해야 합니다. 예를 들어, JSON 파일 포맷을 사용하고
이번 포스팅에서는 깃허브의 CI 서비스인 GitHub Actions를 사용하여 자바스크립트 프로젝트의 지속 통합(Continuous Integration)을 위한 워크플로우를 구성하는 방법에 대해서 알아보겠습니다. 또한 자바스크립트 프로젝트에서 GitHub Actions 셋업이 용이하도록 깃허브에서 제공하는 Setup Node 액션에 대해서도 살펴보겠습니다. 실습 프로젝트와 코드 저장소 생성 실습을 위해서 Create React App을 통해 간단한 자바스크립트 프로젝트를 하나 생성하겠습니다. 그 다음 본인 깃허브 계정에 새로운 코
이번 포스팅에서는 MSW(Mock Service Worker) 라이브러리를 이용하여 백엔드 API를 모킹(mocking)하는 방법에 대해서 알아보겠습니다. Mock Service Worker란? MSW(Mock Service Worker)는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다. 쉽게 말해, 브라우저에 기생(?)해서 마치 백엔드 API인 척하면서 프론트엔드의 요청에 가짜 데이터를 응답해주는 녀석이라고 볼 수 있겠네요. 비교적에 최근에 도입된 웹 표준
이번 포스팅에서는 npm 설정을 할 때 필요한 npmrc 파일과 npm config 커맨드에서 대해서 알아보겠습니다. npmrc 파일 npmrc 파일은 npm에서 설정을 저장해두는 파일로서 내장(builtin), 전역(global), 사용자(user), 프로젝트(project) 이렇게 4가지 범위의 npmrc 파일이 존재하는데요. 먼저 내장 설정은 npm이 설치된 경로에 있는 npmrc 파일에 명시되어 있으며 모든 기본 설정을 담고 있습니다. 전역 설정은 같은 컴퓨터를 사용하는 다른 사용자와 모든 프로젝트에 광범위하게 적용되기 때문
며칠 전에 드디어 React v18이 정식 릴리스가 되었죠? 🎉 이번 포스팅에서는 React v18에서 단연 가장 큰 주목과 기대를 받고 있는 기능일 Suspense에 대해서 알아보겠습니다. Suspense란? Suspense는 2018년에 첫 시연되어 React 커뮤니티에서 큰 반향을 일으킨 후, React v16.6에 실험적인(experimental) 기능으로 추가되어 이미 알 만한 분들은 다들 한 번씩 써보셨을텐데요. 많은 리액트 개발자들이 Suspense가 React의 정식 기능이 되기를 목이 빠지게 기다렸던 걸로 아는데
이번 포스팅에서는 다국어 지원을 할 때 정말 유용하게 쓸 수 있는 자바스크립트의 Intl API에 대해 알아보도록 하겠습니다. Intl API 소개 여러 가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정을 흔히 국제화(internalization, i18n)라고 합니다. 이를 위해서는 웹페이지 상에 사용된 문구들을 단순히 번역하여 표시해주는 것만 뿐만 아니라 동일한 데이터를 언어나 지역별로 다른 형식으로 보여줘야 하는데요. 예를 들어, 12/11/21로 표시된 날짜 데이터를 한국 사용자들은 2012년 11
요즘 프론트엔드(front-end) 개발을 하다 보면 SPA, SSG, SSR이라는 상당히 비슷해서 헷갈리는 약어를 심심치 않게 들을 수 있는데요. 이번 포스팅에서는 모던 웹 개발의 트랜드를 주도하고 있는 이 3가지 랜더링(rendering) 기법에 대해서 이야기해보려고 합니다. SPA: Single Page Application SPA(Single Page Application)는 직역하면 단일 웹페이지로 돌아가는 애플리케이션을 의미하는데요. 이를 곧이곧대로 받아드리면 정말로 페이지 하나로 이루어진 정말 간단한 웹사이트로 오해할
웹사이트를 개발하다 보면 아무래도 사람들에게 보여질 부분에만 치중하기 쉬워집니다. 그런데 알고보면 사람뿐만 아니라 기계가 웹사이트를 읽어야하는 경우가 의외로 많은데요. 여기서 기계라함은 유저가 사용하는 브라우저가 될 수도 있고 웹사이트의 데이터를 수시로 수집해가는 검색엔진이 될 수도 있겠습니다. 또한 어떤 웹페이지의 링크를 공유하면 링크를 열기 전에 해당 콘텐츠를 미리보여주는 SNS나 메신저가 될 수도 있겠네요. 이번 포스팅에서는 이러한 기계들이 웹페이지를 효과적으로 이해할 수 있도록 도와주는 메타 태그에 대해서 알아보겠습니다. 메
자바스크립트로 개발을 시작하게 되면 꼭 한번 씩은 만나게 되지만 별로 대수롭지 않게 넘어가는 함수 2개가 있습니다. 바로 setTimeout() 함수와 setInterval() 함수인데요. 이번 포스팅에서는 자바스크립트의 타이머를 사용하는 이 두 내장 함수에 대해서 한 번 알아보려고 합니다. setTimeout() 사용법 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데요. 이럴 때는 자바스크립트의 setTimeout() 함수를 사용할 수 있습니다. setTimeout() 함수는 첫번째 인자로 실행할
페이지네이션(pagination)은 여러 개의 게시물을 보여주는 웹사이트에서 보통 화면 하단에서 흔히 볼 수 있는 UI입니다. 이번 포스팅에서는 아래와 같이 간단한 페이지네이션(pagination) UI를 구현하는 방법에 대해서 알아보겠습니다. 전체 게시물 목록 구현 우선 단순히 모든 게시물의 목록을 보여주는 React 컴포넌트를 페이지네이션이 없이 구현해볼까요? 게시물 데이터는 JSON Placeholder라는 인터넷에 공개된 API를 통해 가져오도록 하겠습니다. <Posts/>라는 함수 컴포넌트를 작성하고, useState()
자바스크립트에서 배열을 다룰 때 자주 사용하게되는 함수 중에서 이름이 상당히 비슷한 slice()와 splice()가 있습니다. 이번 포스팅에서는 예제 코드를 작성하면서 이 두 함수가 어떤 점이 비슷하고 어떤 점이 다른지에 대해서 알아보겠습니다. slice() 함수 slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환합니다. 간단한 실습을 위해 숫자