이번 포스팅에서는 React 프로젝트를 쉽고 빠르게 만들 수 있도록 도와주는 Create React App에 대해서 알아보겠습니다. Create React App React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아닙니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수인데요... React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느
국내 많은 서비스들이 당장 다국어 지원의 요구가 없더라도 향후 해외 진출을 염두해두고 개발 초기부터 애플리케이션을 국제화(internalization, i18n)하는 사례가 늘고 있는데요. 이번 포스팅에서는 React Intl 라이브러리를 이용해서 다국어를 지원하는 방법에 대해서 알아보겠습니다. React가 아닌 일반 자바스크립트에서 국제화하는 방법에 대해서는 관련 게시물을 참고 바랍니다. React Intl 설치 React Intl 라이브러리는 Node.js 패키지 매니저인 npm으로 설치할 수 있습니다. Locale: Langu
React v16.8에서 리액트 훅(React Hook)이 소개된 이후로 많은 프로젝트에서 커스텀(custom) 훅 함수를 사용하고 있는 것 같은데요. 이번 포스팅에는 리액트 훅(React Hook)을 테스트하는 방법에 대해서 알아보겠습니다. 예제 React Hook 먼저 테스트 대상이 될 간단한 React Hook 함수 하나를 작성해보겠습니다. 아래 useToggle() 함수는 true 또는 false가 될 수 있는 상태 state와 그 상태값을 반전할 수 있는 함수 toggle()을 배열에 담아 반환합니다. 초기 상태값을 ini
지난 포스팅에서 가짜 데이터를 만들 때 사용하는 Faker.js에 대해서 간단히 알아보았는데요. 이번 포스팅에서는 실제로 테스트를 작성할 때 Faker.js를 어떻게 활용할 수 있는지에 대해서 다뤄보려고 합니다. 테스트 대상 코드 작성하기 먼저 테스트 대상이 될 임의의 함수를 하나 필요한데요. 사용자 객체를 인자로 받아 회원 가입을 처리해주는 함수를 작성해보겠습니다. 이 함수는 인자로 넘어온 사용자의 이메일과 비밀번호에 대한 입력값 검증이 실패할 경우 error 속성에 오류 메시지를 담아서 반환하며, 회원 가입이 성공한 경우 use
중요: 본 포스팅에서 소개하고 있는 faker라는 라이브러리는 안타깝게도 안타깝게도 2022년에 faker를 유지보수하던 개발자가 불미스러운 일을 저질러 더 이상 사용하면 안 되는 라이브러리가 되었습니다. 가짜 데이터 생성을 위한 라이브러리가 필요하신 분들은 새로운 포스팅을 참고하시길 바랍니다. 가짜 데이터 시제품(prototype)을 개발하거나, 단위 테스트를 작성할 때 가짜 데이터가 필요할 때가 자주 있습니다. 이럴 때, 직접 가짜 데이터를 하드코딩(hard-coding)할 수도 있겠지만, 좀 더 편하고 빠르게 가짜 데이터를 얻
Git으로 협업하다 보면 커밋 이력이 점점 복잡해지는 경험을 한 번쯤 해보셨을 텐데요. git rebase는 커밋 이력을 깔끔하게 재정리해주는 명령어입니다. git merge와 비슷하게 브랜치를 합치는 역할을 하지만, 이력을 다루는 방식에서 큰 차이가 있습니다. merge vs. rebase merge와 rebase의 차이를 그림으로 살펴보겠습니다. main에서 feature 브랜치를 만든 뒤, 양쪽 모두 새 커밋이 생긴 상황입니다. 여기서 merge를 하면 두 브랜치를 합치는 병합 커밋(M)이 생깁니다. 반면 rebase를 하면
이번 포스팅에서는 tabindex 속성을 사용해서 키보드 포커스 여부와 우선순위를 제어하는 방법에 대해서 알아보았습니다. 키보드 포커스 혹시 마우스가 고장나거나 배터리가 나가서 키보드로만 컴퓨터를 조작하거나 웹서핑을 해보신 적이 있으신가요? 마우스 사용자는 포인터로 웹페이지의 어디든지 클릭을 할 수 있지만, 키보드 사용자는 포커스라는 제한된 방법을 이용해야 되는데요. 다행히도 웹은 사용자와 상호작용(interactive)이 가능한 요소(element)는 기본적으로 키보드로 포커스가 잡히게 되어 있습니다. 대표적으로 <input>,
Git을 사용한 개발에서 브랜치를 나누어 작업하는 건 기본 중의 기본인데요. 각자의 브랜치에서 작업을 마치고 나면 결국 그 변경 내용을 하나로 합쳐야 합니다. 이때 사용하는 명령어가 git merge입니다. 기본 사용법 git merge는 다른 브랜치의 변경 내용을 현재 브랜치에 합치는 명령어입니다. 예를 들어, feature/login 브랜치의 작업을 main 브랜치에 합치려면 먼저 main으로 이동한 뒤 merge합니다. 이렇게 하면 feature/login에서 작업한 모든 커밋이 main 브랜치에 반영됩니다. Fast-forw
웹에서는 UI가 비동기로 업데이트되는 경우가 참 많죠? UI가 변경될 때까지 기다려줘야 하기 때문에 많은 개발자들이 테스트하기 어려운하는 부분입니다. 이번 포스팅에서는 Testing Library로 비동기(asynchronous)로 작동하는 React 컴포넌트를 테스트하는 방법에 대해서 알아보겠습니다. 예제 컴포넌트 우선 테스트 대상이 될 간단한 React 컴포넌트 하나를 작성해보도록 하겠습니다. 아래 <Switch/> 컴포넌트 함수는 on 상태값에 따라 ON 버튼 또는 OFF 버튼을 리턴합니다. on 상태값은 최초에는 false이
Git을 사용하다 보면 HEAD라는 단어를 자주 접하게 됩니다. git log를 실행하면 (HEAD -> main)이라고 표시되고, git reset HEAD~1처럼 명령어에서도 자주 등장하죠. 하지만 HEAD가 정확히 무엇인지 물어보면 선뜻 대답하기 어려운 분들이 많습니다. "현재 브랜치를 가리키는 거 아니야?"라고 생각할 수 있지만, 사실 HEAD는 그보다 조금 더 복잡한 개념입니다. 이번 글에서는 HEAD의 정확한 의미와 함께, 실무에서 유용하게 활용할 수 있는 HEAD~, HEAD^ 같은 표현식까지 알아보겠습니다. HEAD란
CSS 코드를 읽다보면 아래와 같이 선택자(selector) 사이에서 >나 +, 또는 ~와 같은 기호를 어렵지 않게 볼 수 있습니다. CSS에서는 이렇게 선택자 사이에 나오는 기호들을 결합자(combinator)라는 다소 어려운 이름으로 부르는데요. 이번 포스팅에서는 CSS의 결합자를 사용하여 선택자를 조합하는 방법에 대해서 배워보겠습니다. CSS의 기본 선택자에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다. Descendant Combinator CSS에서 너무 흔하게 볼 수 있어서 많은 개발자들이 결합자라는 인식
git checkout은 Git에서 브랜치를 전환하고, 파일을 복원하고, 특정 커밋으로 이동하는 등 다양한 작업을 수행할 수 있는 만능 명령어입니다. 마치 도서관에서 책을 check out, 즉 대여하는 것처럼 특징 브랜치나 커밋의 내용을 작업 디렉토리로 가져온다고 생각하시면 됩니다. 브랜치 전환 가장 기본적인 사용법은 이미 존재하는 브랜치로 전환하는 것입니다. 예를 들어, main 브랜치로 전환하려면 다음과 같이 입력합니다. feature/user-auth라는 이름의 feature 브랜치로 전환할 수도 있습니다. 몇 가지 유용한
CSS에서는 선택자(selector)를 통해서 웹페이지의 특정 부분만을 선택하여 원하는 스타일을 적용할 수 있습니다. 이번 포스팅에서는 CSS의 선택자의 근간이 되는 기본 선택자에 대해서 알아보겠습니다. Type Selector CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector) 입니다. 타입 선택자를 사용하면 HTML 문서에서 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다. 예를 들어, 웹페이지 상의 모든 <strong> 요소의 글꼴 두께를 스
git switch는 브랜치를 전환하기 위해서 사용하는 Git 명령어입니다. Git 2.23 버전(2019년 8월)에서 처음 도입되었으며, 기존 git checkout 명령어의 브랜치 전환 기능을 좀 더 명확하고 안전하게 사용할 수 있도록 설계되었습니다. 레거시 명령어인 git checkout에 대해서는 별도 포스팅에서 다루고 있으니 참고 바랍니다. 브랜치 전환 가장 기본적인 사용법은 이미 존재하는 브랜치로 전환하는 것입니다. 예를 들어, main 브랜치로 전환하려면 다음과 같이 입력합니다. feature/user-auth라는 이름
HTML에는 모든 엘리먼트를 대상으로 사용할 수 있는 속성이 존재하는데요. 이를 전역 속성(global attribute)이라고 합니다. 이번 포스팅에서는 HTML에서 자주 사용되는 전역 속성에 대해서 알아보겠습니다. style 아무래도 많은 분들에게 가장 익숙한 HTML 전역 속성은 style일 것입니다. style 속성은 해당 엘리먼트에 인라인으로 CSS 스타일을 선언하고 싶을 때 사용합니다. class 두번째로 살펴볼 HTML 전역 속성은 class인데요. HTML 문서 상에서 여러 엘리먼트를 하나의 이름으로 묶고 싶을 때 사
모든 HTML 문서는 크게 head 영역과 body 영역으로 나누어 집니다. 이번 포스팅에서는 웹 개발을 하면서 간과하기 쉬운 head 영역에 대해서 살펴보려고 합니다. head 요소 HTML의 <head> 요소(element)는 <body> 요소와 함께 HTML 문서의 최상위 요소인 <html> 바로 아래 위치합니다. 브라우저 화면에 보여지는 영역을 감싸고 있는 <body> 요소와 달리 <head> 요소는 화면에 보여지지는 않지만 브라우저가 해당 HTML 문서에 대해서 알아야 할 정보를 감싸고 있습니다. 그럼, head 영역에는
Git으로 작업하다 보면 브랜치(branch)를 다룰 일이 정말 많죠. git branch 명령어를 사용하면 브랜치를 만들고 목록을 확인하고 이름을 바꾸거나 삭제할 수 있는데요. 이번 글에서는 git branch 명령어의 기본 사용법부터 실전 활용법까지 함께 살펴보겠습니다. 브랜치란? Git에서 브랜치는 특정 커밋을 가리키는 가벼운 포인터입니다. 새 커밋을 만들 때마다 현재 브랜치의 포인터가 자동으로 최신 커밋으로 이동하죠. 보통 Git 저장소를 처음 만들면 main(또는 master)이라는 기본 브랜치가 생성됩니다. 여기서 새로운
이번 포스팅에서는 터미널에서 간단한 명령어를 입력하여 웹 페이지나 API 데이터를 요청하고 받을 수 있는 HTTP 클라이언트 도구인 curl 커맨드에 대해서 알아보겠습니다. curl 커맨드 1998년에 만들어진 curl 커맨드는 Postman이나 Insomnia와 같이 다양한 기능과 화려한 UI를 제공하는 GUI 기반 HTTP 클라이언트가 계속해서 출시되는 와중에도 아직까지 꾸준히 사랑받고 있는 CLI 도구입니다. curl 커맨드는 리눅스나 macOS에 대부분의 경우 기본으로 탑재되어 있으며, 몇 가지 주요 옵션만 숙지하면 매우 간
팀 프로젝트를 하다 보면 동료가 올린 코드를 내 로컬에 반영해야 하는 상황이 자주 생기는데요. 이때 사용하는 명령어가 바로 git pull입니다. git pull은 원격 저장소(remote repository)의 최신 변경분을 가져와서 현재 브랜치에 합치는 과정을 한 번에 처리해줍니다. git fetch + git merge git pull은 사실 두 가지 명령어를 연달아 실행하는 것과 같습니다. 먼저 git fetch로 원격 저장소의 변경 내용을 로컬로 가져오고, 그 다음 git merge로 현재 브랜치에 합칩니다. 이 두 단계를
git fetch는 원격 저장소(remote repository)의 최신 변경분을 로컬로 가져오되, 현재 작업 중인 코드에는 영향을 주지 않는 명령어입니다. git pull과 혼동하기 쉬운데, git pull이 가져오기와 합치기를 한번에 하는 반면, git fetch는 가져오기만 하고 합치는 건 개발자에게 맡깁니다. git fetch vs. git pull 이 둘의 관계를 코드로 표현하면 다음과 같습니다. git fetch는 원격 저장소의 변경 내용을 origin/main 같은 원격 추적 브랜치(remote-tracking bran