React 앱을 개발하다보면 네트워크를 통해 REST API나 GraphQL API를 호출하여 원격에 있는 데이터를 가져와야 하는 일이 빈번하게 생기는데요. 이번 포스팅에서는 React 훅 함수를 이용해서 원격 API를 깔끔하게 호출하는 방법에 대해서 알아보겠습니다. useEffect()로 원격 데이터 가져오기 보통 원격 API를 호출하는 작업은 컴포넌트 랜더링을 막지않기 위해서 비동기로 처리하기 경우가 대부분인데요. 이러한 Side Effect 처리를 위해 React에서는 useEffect 훅 함수를 제공하고 있습니다. 예를 들어
이번 포스팅에서는 React에서 웹 스토리지를 사용해서 컴포넌트의 상태를 유지시키는 방법에 대해서 살펴보겠습니다. useState()로 유실되는 상태 관리하기 React에서 제공하는 useState() 훅 함수를 사용하면 컴포넌트의 상태를 간편하게 관리할 수 있는데요. 예를 들어, 버튼 클릭 횟수에 대한 상태 관리가 필요한 간단한 카운터 컴포넌트를 작성해보겠습니다. 너무 당연한 얘기겠지만 페이지를 새로 고침하는 순간 기존의 count 상태값은 사라집니다. 만약에 이 컴포넌트의 상태값을 웹 스토리지를 이용해서 유지시키고 싶다면 어떻게
웹 개발을 하다보면 <script> 요소를 이용해서 HTML 문서 안에 자바스크립트 코드를 삽입하는 경우가 필연적으로 생기기 마련인데요. 이번 글에서는 이렇게 정말 자주 사용하게 되는 <script> 요소를 좀 더 효과적으로 사용하는 방법에 대해서 알아보겠습니다. script 요소의 위치 혹시, 브라우저가 <script> 요소를 어떻게 처리하는지 생각해보신 적이 있으신가요? 당연한 얘기처럼 들리기시겠지만 브라우저는 HTML 문서를 처리하다가 <script> 요소를 만나면 src 속성에 명시된 경로의 파일을 내려받아 자바스크립트 코드
브라우저 상에서 사용자가 발생시키는 이벤트에 웹 애플리케이션이 예상대로 반응하는지 어떻게 테스트할 수 있을까요? 이번 포스팅에서는 사용자와 애플리케이션의 상호 작용을 검증하기 위한 테스트 코드를 작성하는 방법에 대해서 알아보겠습니다. 예제 컴포넌트 우선 테스트 대상이 될 간단한 React 컴포넌트 하나를 작성해보도록 하겠습니다. 아래 <LoginForm/> 컴포넌트는 이메일 입력란과 비밀번호 입력란, 로그인 버튼으로 구성되어 있습니다. 로그인 버튼은 이메일과 비밀번호가 입력되었을 때만 활성화가 되고, 클릭을 하면 prop으로 넘어온
이번 포스팅에서는 Jest를 이용해서 스냅샷(snapshot) 테스트를 하는 방법에 대해서 알아보겠습니다. Jest에 대한 기본적인 설치 및 사용 방법은 관련 포스팅를 참고하시길 바랍니다. 스냅샷 테스팅 스냅샷 테스팅(snapshot testing)이란 어떤 기능의 예상 결과를 미리 정확히 포착해두고 실제 결과에 비교하는 테스트 기법입니다. 테스트 대상 기능의 구현이 변경되어 실제 결과과 스냅샷을 떠놓은 예상 결과와 달라질 경우 해당 테스트 케이스는 실패하게 되는데요. 이럴 경우, 다시 새로운 스냅샷을 떠서 기존 스냅샷을 교체하는
requests는 파이썬으로 HTTP 통신이 필요한 프로그램을 작성할 때 가장 많이 사용되는 라이브러리입니다. 특히 원격에 있는 API를 호출할 때 유용하게 사용할 수 있는데요. 이번 포스팅에서는 requests 라이브러리를 사용하는 방법에 대해서 알아보겠습니다. 패키지 설치 파이썬의 패키지 매니저인 pip를 이용해서 requests 패키지을 설치합니다. 설치가 잘 되었는지 파이썬 인터프리터를 실행하여 확인해봅니다. requests 라이브러리로 구글에 접속을 해보니 상태 코드 200이 응답이 되는 것을 볼 수 있습니다. 🎉 API
이번 포스팅에서는 useMemo() 함수와 더불어 성능 최적화에 사용되는 React의 useCallback() hook 함수에 대해서 알아보겠습니다. useMemo에 대한 내용은 관련 포스팅를 참고하시기 바랍니다. 함수 메모이제이션 useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다. 예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다
git restore는 작업 디렉토리(working directory)나 스테이징 영역(staging area)에 있는 파일을 이전 상태로 되돌릴 때 사용하는 Git 명령어입니다. Git 2.23 버전(2019년 8월)에서 처음 도입되었는데요, 기존 git checkout의 파일 복원 기능을 좀 더 명확하고 안전하게 쓸 수 있도록 만들어졌습니다. 레거시 명령어인 git checkout에 대해서는 별도의 포스팅에서 다루고 있으니 참고 바랍니다. 작업 디렉토리의 변경사항 되돌리기 코드를 수정하다 보면 변경한 내용이 마음에 들지 않아서
코딩을 하다 보면 여러 가지 이유로 프로그램의 실행을 잠시 멈추거나 일정 시간동안 실행을 지연시키고 싶을 때가 있습니다. 예를 들어, 자바에서는 Thread.sleep() 함수, 파이썬에서는 time.sleep() 함수를 사용해서 이렇게 의도된 지연을 줄 수가 있습니다. 다른 프로그래밍 언어들에서는 이러한 API를 쉽게 찾아볼 수 있는데요. 자바스크립트에서는 어떻게 프로그램의 실행을 일정 시간동안 지연시킬 수 있을까요? setTimeout() 함수 자바스크립트 API에서 다른 언어에서 제공하는 sleep 함수와 그나마 가장 유사한
Git으로 작업하다 보면 방금 한 커밋을 취소하고 싶거나, 스테이징한 파일을 다시 내리고 싶을 때가 있죠. 이럴 때 가장 먼저 떠오르는 명령어가 바로 git reset입니다. git reset은 현재 브랜치의 HEAD 위치를 옮기면서 커밋 히스토리와 스테이징 영역, 작업 디렉토리의 상태를 조절할 수 있는 강력한 명령어인데요. 그만큼 옵션에 따라 동작이 크게 달라지기 때문에 제대로 이해하고 써야 합니다. 이번 글에서는 git reset의 세 가지 모드를 중심으로 기본 개념부터 실전 활용법까지 함께 알아보겠습니다. HEAD가 무엇인지
React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 setState() 함수인데요. 좀 더 복잡한 상태 관리가 필요한 React 컴포넌트에서는 setReducer() hook 함수를 사용할 수 있습니다. React Hooks 중 하나인 setState() 함수에 대한 설명은 관련 포스팅를 참고 바랍니다. Redux 패턴 기본적으로 useReducer() hook 함수는 다음과 같은 형태로 사용을 합니다. reducer 함수는 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운
Git으로 작업하다 보면 "이 커밋에서 뭘 변경했더라?" 하고 궁금해지는 순간이 많습니다. git log로 커밋 목록은 볼 수 있지만 각 커밋의 실제 변경 내용까지 바로 확인하기는 어렵죠. 바로 이럴 때 git show가 유용합니다. git show는 커밋의 메타 정보와 변경 내용을 한 번에 보여주는 명령어인데요. 커밋뿐만 아니라 태그나 브랜치, 특정 파일까지 다양한 Git 객체의 내용을 살펴볼 수 있습니다. 이번 글에서는 git show의 기본 사용법부터 실전에서 유용한 팁까지 함께 알아보겠습니다. 기본 사용법 git show를
자바스크립트로 코딩을 하다보면 한 번쯤 듣게 되는 용어가 클로저(closure)입니다. 기술 면접 같은데서 자주 물어보는 질문이기도 한데요. 이번 포스팅에서는 이 알쏭달쏭한 클로저에 대해서 한 번 얘기해보려고 합니다. 클로저란? 클로저에 대해서 얘기를 하려면 일단 클로저가 도대체 어떤 개념인지에 알아야겠죠? 클로저는 일반적으로 어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 뜻합니다. 다음과 같이 미국 달러를 대한민국 원으로 환전해주는 간단한 함수를 예를 들어 설명해보겠습니다. 이 함수는 미국 달러(usd)를
Git으로 프로젝트를 진행하다 보면 "지난주에 이 파일 누가 수정했지?" "이 기능은 언제 추가된 거야?" 같은 궁금증이 생기기 마련입니다. 이럴 때 커밋 히스토리를 살펴볼 수 있는 git log 명령어가 유용한데요. git log는 저장소의 커밋 기록을 시간 역순으로 보여주는 명령어입니다. 단순히 커밋 목록만 나열하는 게 아니라 옵션을 조합하면 원하는 정보만 골라서 볼 수 있어서 코드 리뷰나 디버깅, 릴리스 관리 등 여러 상황에서 두루 쓰이죠. 이번 글에서는 git log의 기본 사용법부터 실전에서 유용한 옵션까지 함께 알아보겠습
Git의 pre-commit 훅(hook)은 우리가 작성한 코드를 커밋할 때 마다 자동으로 특정 작업을 실행해줍니다. 많은 프로젝트들이 이를 통해 포맷터(formatter)를 실행하여 코드 스타일을 통일하고, 린터(linter)를 실행하여 코드에 잠재하고 있는 문제들을 찾아냅니다. 이번 포스팅에서는 Git의 pre-commit hook을 편리하게 사용할 수 있도록 도와주는 pre-commit라는 도구에 대해서 알아보겠습니다. 설치 pre-commit은 자신의 컴퓨터에 파이썬이 설치가 되어 있다면 파이썬의 패키지 매니저인 pip를 사
코드를 수정하다 보면 "내가 방금 뭘 바꿨더라?" 하는 순간이 자주 찾아옵니다. 여러 파일을 동시에 고치고 있으면 어디를 얼마나 바꿨는지 감을 잃기 쉽죠. git diff는 변경 내용을 한눈에 확인할 수 있게 해주는 명령어인데요. 작업 디렉토리, 스테이징 영역, 커밋 사이의 차이를 비교해주기 때문에 커밋 전에 변경 내용을 점검하거나 브랜치 간 차이를 파악할 때 쓸 일이 많습니다. 이번 글에서는 git diff의 기본 사용법부터 실전에서 유용한 옵션까지 함께 알아보겠습니다. 기본 사용법 git diff를 인자 없이 실행하면 작업 디렉
JavaScript, API, Markup를 근간으로 하는 JAM stack이 모던 웹 개발의 새로운 트랜드가 되고 있습니다. 이에 따라, 예전처럼 서버 단에서 대신 API를 호출해주기 보다는 클라이언트 단에서 직접 API를 호출하는 경우가 많아지고 있습니다. (이렇게 브라우저에서 직접 비동기로 HTTP 통신을 하는 것을 한 때 소위 Ajax라고도 일컬었죠...) 이번 포스팅에서는 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 fetch() 함수에 대해서 살펴보겠습니다. 라이브러리? 원격 API 호출하면 제일 먼저
React Hooks 중에서 useState()나 useEffect() 처럼 많이 쓰이지는 않지만 가끔 나와서 햇갈리게 하는 녀석이 있습니다. 바로 useRef() 훅(hook) 함수인데요. 이번 포스팅에서는 useRef() 함수가 왜 필요하고, 언제 사용하는지에 대해서 알아보겠습니다. 상태 변경 -> 컴포넌트 재 랜더링 React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 다시 랜더링(rendering)이 됩니다. 예를 들어, 아래 <Counter/> 컴포넌트의 버튼을 5번 클릭하면 count 상태값은 5번 바뀌
git commit은 Git에서 가장 핵심적인 명령어라고 할 수 있습니다. 스테이징 영역(staging area)에 올려놓은 변경 내용을 하나의 변경 이력으로 저장소에 기록할 때 사용하는데요. 프로젝트 개발 과정에서 의미 있는 단위로 작업을 나누어 기록해두면, 나중에 특정 시점으로 돌아가거나 다른 사람이 코드 변경 이력을 이해하기 훨씬 수월해집니다. git add와 git commit git commit 명령어를 사용하기 전에 반드시 git add로 스테이징 영역에 변경 내용을 올려놔야 합니다. Git은 작업 디렉토리의 모든 변경
정렬된 데이터를 검색할 때 가장 널리 사용되는 이분 탐색(binary search)에 대해서 알아보겠습니다. 알고달레에서 코딩 테스트/인터뷰 준비에 좀 더 특화된 컨텐츠를 만나보세요! 📝 기본 개념 책으로된 영어 사전(요즘은 거의 안 쓰죠? 😓)에서 단어를 찾거나 지역 업소록에서 상호명을 어떻게 찾으시나요? 수백, 수천 페이지가 되는 이러한 책을 맨 첫 페이지부터 한 장씩 넘기면서 찾으시는 분들은 아마 없으실 것입니다. 보통은 대강 중간 쯤 어딘가를 어림잡아서 페이지를 펼쳐본 후에 찾으려는 단어나 업소명과 비교하면서 검색 범위를