개발 블로그를 하나 시작해 볼까 고민하시는 분들이 많은데요. 막상 시작하려고 하면 어디에 써야 할지부터 막히곤 합니다. 블로그 서비스에 가입해서 바로 쓸지, 아니면 직접 만들지 말이죠. 🤔 저는 블로그를 꽤 오래 운영하면서 이 고민을 여러 번 했습니다. 구글의 블로그 서비스로 시작해서 정적 사이트 생성기(Static Site Generator) 네 가지를 거쳐 지금에 이르렀는데요. 이 글에서는 그 과정에서 겪은 일을 바탕으로 블로그를 시작하는 방법을 비교하고, 직접 만든다면 어떤 도구를 고르고 어떻게 배포하면 좋은지 정리해 보겠습
요즘 프론트엔드(front-end) 개발을 하다 보면 SPA, SSG, SSR처럼 비슷해서 헷갈리는 약어를 심심치 않게 듣게 되는데요. 여기에 사전 렌더링(prerendering), 하이드레이션(hydration), ISR 같은 말까지 더해지면 무엇이 무엇인지 정리가 잘 안 되기 마련입니다. 🤔 이 글에서는 세 가지 렌더링(rendering) 방식을 HTML이 언제 어디서 만들어지는가라는 하나의 기준으로 비교해 보고, 요즘 프레임워크들이 이 방식들을 어떻게 섞어 쓰는지까지 살펴보겠습니다. 렌더링 시점으로 보면 한 번에 정리된다 세
웹사이트를 개발하다 보면 아무래도 사람들에게 보여질 부분에만 치중하기 쉬워집니다. 그런데 알고보면 사람뿐만 아니라 기계가 웹사이트를 읽어야하는 경우가 의외로 많은데요. 여기서 기계라함은 유저가 사용하는 브라우저가 될 수도 있고 웹사이트의 데이터를 수시로 수집해가는 검색엔진이 될 수도 있겠습니다. 또한 어떤 웹페이지의 링크를 공유하면 링크를 열기 전에 해당 콘텐츠를 미리보여주는 SNS나 메신저가 될 수도 있겠네요. 이번 포스팅에서는 이러한 기계들이 웹페이지를 효과적으로 이해할 수 있도록 도와주는 메타 태그에 대해서 알아보겠습니다. 메
자바스크립트로 개발을 시작하게 되면 꼭 한번 씩은 만나게 되지만 별로 대수롭지 않게 넘어가는 함수 2개가 있습니다. 바로 setTimeout() 함수와 setInterval() 함수인데요. 이번 포스팅에서는 자바스크립트의 타이머를 사용하는 이 두 내장 함수에 대해서 한 번 알아보려고 합니다. setTimeout() 사용법 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데요. 이럴 때는 자바스크립트의 setTimeout() 함수를 사용할 수 있습니다. setTimeout() 함수는 첫번째 인자로 실행할
페이지네이션(pagination)은 여러 개의 게시물을 보여주는 웹사이트에서 보통 화면 하단에서 흔히 볼 수 있는 UI입니다. 이번 포스팅에서는 아래와 같이 간단한 페이지네이션(pagination) UI를 구현하는 방법에 대해서 알아보겠습니다. 전체 게시물 목록 구현 우선 단순히 모든 게시물의 목록을 보여주는 React 컴포넌트를 페이지네이션이 없이 구현해볼까요? 게시물 데이터는 JSON Placeholder라는 인터넷에 공개된 API를 통해 가져오도록 하겠습니다. <Posts/>라는 함수 컴포넌트를 작성하고, useState()
자바스크립트에서 배열을 다룰 때 자주 사용하게되는 함수 중에서 이름이 상당히 비슷한 slice()와 splice()가 있습니다. 이번 포스팅에서는 예제 코드를 작성하면서 이 두 함수가 어떤 점이 비슷하고 어떤 점이 다른지에 대해서 알아보겠습니다. slice() 함수 slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환합니다. 간단한 실습을 위해 숫자
사이트 네비게이션(site navigation)은 웹사이트에서 사용자가 효과적으로 페이지 사이를 이동을 할 수 있도록 도와주는 매우 흔하면서도 중요한 UI 입니다. 이번 포스팅에서는 React와 Styled Components를 이용하여 아래와 같은 다단계 사이드 네비게이션 UI를 한 번 구현해도록 하겠습니다. 컴파운트 컴포넌트 HTML에는 부모없이는 단독으로 쓰이지 않는 요소들이 있습니다. 대표적인 예로 <option> 요소는 항상 <select> 요소 안에서 사용되며, <li> 요소는 항상 <ul>이나 <ol> 요소 안에서 사용
이번 포스팅에서는 자바스크립트에서 JSON 내장 객체를 이용하여 JSON 형식으로 표현된 데이터를 다루는 방법에 대해서 알아보겠습니다. JSON 이란? 자바스크립트의 JSON 내장 객체에 대해서 배우기 전에 먼저 JSON이 무엇인지에 대해서 간단하게 짚고 넘어가겠습니다. JSON은 JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용됩니다. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터
이번 포스팅에서는 Node.js에서 파일 입출력 처리를 할 때 사용하는 fs 모듈에 대해서 알아보겠습니다. fs모듈 불러오기 fs 모듈은 Node.js에 내장되어 있어 있기 때문에 별도의 라이브러리 설치없이 바로 불러와서 사용할 수 있습니다. CommonJS 모듈 시스템을 사용하는 프로젝트에서는 require 키워드로 불러오고, ES 모듈 시스템을 사용하는 프로젝트에서는 import 키워드를 사용할 수 있습니다. 비동기 함수 vs 동기 함수 fs 모듈는 비동기(asynchronous) API와 동기(synchronous) API를
Git을 쓰다 보면 "이 파일은 추적하지 마!" 하고 싶을 때가 참 많습니다. .env 파일에 담긴 비밀 키, node_modules처럼 덩치 큰 의존성 폴더, IDE가 만들어내는 .idea나 .vscode 디렉토리까지. 대부분은 .gitignore에 한 줄 추가하면 끝이지만 실제로는 그것만으로 해결되지 않는 상황이 꽤 있습니다. "팀 전체가 아니라 나만 무시하고 싶은 파일이 있는데?", "이미 커밋된 파일인데 이제 와서 무시하려면?", "설정 파일을 로컬에서만 살짝 바꿔 쓰고 싶은데?" 이번 글에서는 Git에서 파일 추적을 막는
이번 포스팅에서는 Node.js에서 파일이나 디렉토리의 경로를 다룰 때 사용하는 path 모듈에 대해서 알아보겠습니다. 운영체제 파일이나 디렉토리의 경로를 다루는 게 뭐가 어렵다고 굳이 별도의 모듈이 필요할까요? 사실 경로 처리는 많은 분들이 간과하지만 알고 보면 은근히 오류가 발생할 소지가 많은 부분인데요. 일단 유닉스 계열 운영체제와 윈도우 운영체제는 서로 다른 문자로 디렉토리 구조를 표현합니다. 유닉스 계열 운영체제에서는 / 문자를 사용하는 반면에 윈도우 운영체제에서는 문자를 사용하죠. 유닉스 계열 윈도우 또한 이 두 진영의
이번 포스팅에서는 .gitignore 파일을 이용하여 Git으로 프로젝트의 버전 관리를 할 때 특정 파일이나 디렉토리를 제외시키는 방법에 대해서 알아보겠습니다. 버전 관리를 하지 않는 파일과 디렉토리 어떤 프로그래밍 언어로 프로젝트를 하든 버전 관리를 할 필요가 없거나 하지 말아야하는 파일이나 디렉토리가 생기기 마련입니다. 대표적인 예로, 자바스크립트(JavaScript) 프로젝트에서는 의존성을 설치하고 나면, 프로젝트에 node_modules 디텍토리가 생성되고 그 안에 npm 저장소로 부터 내려받은 라이브러리 코드가 저장됩니다.
이번 포스팅에서는 하나의 컴퓨터에서 여러 버전의 Node.js를 사용할 수 있도록 도와주는 도구인 nvm(Node Version Manager)에서 대해서 알아보겠습니다. nvm 설치 제가 Mac을 사용하는 관계로 macOS를 기준으로 nvm을 어떻게 설치하는지 설명하겠습니다. macOS를 포함한 리눅스 계열의 운영체제에서는 nvm 사이트에서 설치 스크립트를 확인할 수 있으며, 윈도우 운영체제의 경우 nvm-windows 사이트에서 설치 파일을 다운로드 받을 수 있습니다. 터미널을 열고 다음 설치 스크립트를 실행합니다. 여기서 다운
우리가 사용하는 웹 사이트나 웹 애플리케이션에서는 수많은 이벤트가 발생합니다. 사용자가 마우스나 키보드로 일으킬 수 있는 이벤트도 있고, 브라우저 스스로도 웹페이지를 로딩하면서 여러 이벤트를 발생시킵니다. 이번 포스팅에서는 이렇게 웹에서 다양한 이유로 발생하는 이벤트를 처리하는 여러 가지 방법에 대해서 알아보겠습니다. HTML 이벤트 속성 먼저 가장 고전적이지만 사용하기 간단한 방법부터 알아볼까요? HTML 요소(element)에서 발생하는 이벤트를 처리하는 가장 쉬운 방법은 HTML의 이벤트 속성을 활용하는 것입니다. on<이벤트
2006년에 출시되었던 jQuery는 한 때는 자바스크립트 개발이 곧 jQuery 개발이라고 여겨질 정도로 정도로 상당히 오랫동안 자바스크립트 생태계를 주름잡던 라이브러리입니다. 하지만 최근에는 React, Angular, Vue.js, Svelte와 같은 모던 자바스크립트 라이브러리에 밀려 주로 레거시(legacy) 코드에서나 미처 못해 쓰는 라이브러리로 전략하고 말았는데요. 아무래도 컴포넌트 기반의 웹 프로그래밍의 대세가 되고 브라우저의 표준화가 전반적으로 개선되고 있어서 앞으로 jQuery의 입지는 점점 더 좁아질 것 같습니다
이번 포스팅에서는 자바스크립트에서 패키지 매니저로 가장 많이 사용되고 있는 npm과 Yarn에 대해서 알아보겠습니다. 자바스크립트 패키지 매니저 패키지 매니저(package manager)는 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 갱신, 삭제할 수 있도록 도와주는 관리 도구입니다. 그 어떤 프로그래밍 언어보다 풍부한 오픈 소스 생태계를 자랑하는 자바스크립트에서 특히 패키지 매니저는 중요한 역할을 하는데요. 아무리 간단한 자바스크립트 프로젝트라고 해도 적게는 수십게 많게는 수백개의 다른 패키지에 의존하기 때문입니다. 대부
이번 포스팅에서는 HTML 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 CSS의 position 속성에 대해서 알아보겠습니다. position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 s
자바스크립트 프로젝트에서 개발을 하다보면 터미널을 열고 명령어를 실행해야하는 경우가 빈번하게 생기는데요. 대표적인 예로 로컬 환경에서 애플리케이션을 빌드하고 구동하거나 테스트를 실행하는 것을 들 수 있습니다. 이번 포스팅에서는 자바스크립트 프로젝트에서 자주 사용되는 명령어를 스크립트로 등록하고 실행하는 방법에 대해서 알아보겠습니다. 반복 명령은 스크립트로 자바스크립트 프로젝트에서 개발을 진행하다보면 테스트나 빌드(build), 린트(lint), 포맷(format)처럼 반복적으로 수행해야하는 작업들이 생기기 마련입니다. 각 작업은 일
이번 포스팅에서는 배경을 스타일할 때 잘 정리해두면 두고두고 요긴하게 쓸 수 있는 CSS 속성에 대해서 알아보겠습니다. background-color 배경 관련 CSS 속성 중 가장 많이 사용되는 것은 아마도 배경색을 지정할 때 사용하는 background-color일 것입니다. 기본값은 transparent, 즉 투명이며 색상명이나 색상 코드를 사용할 수 있습니다. 일반적으로 배경색은 웹 접근성(accessibility)을 준수하기 위해서 글자색과의 명암비를 고려해서 결정을 하는데요. 시력이 안 좋으신 분들도 텍스트를 인식하는데
다른 프로그래밍 언어에서 넘어오신 개발자 분들께서 파이썬의 yield 키워드 때문에 당혹스러워하시는 것을 종종 목격하게 되는데요. 이번 포스팅에서는 파이썬에서 제네레이터(generator)를 만드는데 사용되는 yield 키워드에 대해서 예제를 통해서 이해하기 쉽게 설명드리겠습니다. yield 키워드 대부분의 프로그래밍 언어에서 일반적으로 함수는 어떤 결과 값을 return 키워드를 이용해서 반환을 하는데요. 하지만 파이썬에서는 함수가 yield 키워드를 이용해서 다소 다른 방식으로 결과 값을 제공할 수 있습니다. 장황한 설명보다는