이번 포스팅에서는 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)에 대해서 알아보겠습니다. 알고달레에서 코딩 테스트/인터뷰 준비에 좀 더 특화된 컨텐츠를 만나보세요! 📝 기본 개념 책으로된 영어 사전(요즘은 거의 안 쓰죠? 😓)에서 단어를 찾거나 지역 업소록에서 상호명을 어떻게 찾으시나요? 수백, 수천 페이지가 되는 이러한 책을 맨 첫 페이지부터 한 장씩 넘기면서 찾으시는 분들은 아마 없으실 것입니다. 보통은 대강 중간 쯤 어딘가를 어림잡아서 페이지를 펼쳐본 후에 찾으려는 단어나 업소명과 비교하면서 검색 범위를
![[자바스크립트] 웹 스토리지 (localStorage, sessionStorage) 사용법](https://img.youtube.com/vi/PfbrRd8xLB8/maxresdefault.jpg)
자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생깁니다. 보통 이럴 때 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하거나 경우가 많을 것입니다. 하지만 저장해야 할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 이번 포스팅에서는 클라이언트 단, 즉 브라우저 상에 데이터를 저장할 수 있는 기술인 웹 스토리지에 대해서 알아보겠습니다. 로컬 스토리지 vs. 세션 스토리지 웹 스토리지(we
Git으로 작업하다 보면 "지금 어떤 파일을 수정했더라?", "스테이징에 뭘 올려놨지?" 같은 순간이 자주 옵니다. git status는 바로 이런 질문에 답해주는 명령어인데요. 현재 작업 디렉토리와 스테이징 영역의 상태를 한눈에 보여줘서, 다음에 뭘 해야 할지 파악하는 데 큰 도움이 됩니다. 기본 사용법 사용법은 정말 간단합니다. 그냥 git status를 입력하면 됩니다. 이 출력을 세 구역으로 나눠서 살펴보겠습니다. 출력 내용 읽기 Changes to be committed 구역은 git add로 스테이징 영역에 올라간 파일들
자바스크립트에서 모듈을 불러올 때 보통 파일 맨 위에 import 문을 작성하죠. 이 방식은 간결하고 직관적이지만 항상 파일의 최상단에 위치해야 하고 조건에 따라 불러올 모듈을 바꾸는 게 불가능합니다. 앱 규모가 커지면서 모든 모듈을 한꺼번에 불러오는 것이 성능 문제로 이어지기도 하는데요. 이런 상황에서 빛을 발하는 게 바로 Dynamic Import, import() 표현식입니다. 이 글에서는 import()의 기본 사용법부터 코드 분할, React에서의 활용까지 차근차근 살펴보겠습니다. 정적 import/export 문법이 아직
리액트(React)는 보통 HTML과 매우 흡사한 JSX 코드로 작성하는 경우가 대부분인데요. 이 JSX 때문에 리액트를 좋아하는 사람도 많지만 반면에 이 JSX 때문에 리액트를 싫어한다는 분들도 많이 보게 됩니다. 이번 포스팅에서는 이렇게 말도 많고 탈도 많은 리액트의 JSX와 JSX를 변환해주는 Babel에 대해서 알아보도록 하겠습니다. 왜 React를 임포트할까? 리액트를 처음 사용해 본 자바스크립트 개발자라면 한 번 쯤 이러한 생각을 해보신 적이 있으실 겁니다. 내 코드에 React를 사용하는 곳이 없는데 왜 React를 굳
JSX 문법으로 코드를 작성하다보면 리액트(React)가 어디까지나 자바스크립트 라이브러리는 사실을 잊어버리기 쉬운 것 같습니다. 이번 포스팅에서는 리액트 API를 JSX 없이 날 것 그대로 자바스크립트로 사용하면서 리액트가 어떻게 작동하는지 알아보겠습니다. JavaScript Library 리액트(React)를 비롯하여 최근에 많이 사용되는 프론트엔드(frontend) 라이브러리들은 기본적으로 자바스크립트로 HTML 엘리먼트를 동적으로 생성하여 DOM에 추가하는 방식을 취합니다. 따라서, 이러한 모던(modern)한 라이브러리로
사전(dictionary)은 파이썬에서 리스트(list)와 더불어 가장 널리 사용되는 내장 자료형입니다. 하지만 너무 기본적인 기능이다 보니 오히려 이 중요한 자료형의 사용법을 제대로 익히지 않고 넘어가기 쉬운 것 같아요. 이번 포스팅에서는 파이썬에서 사전을 어떻게 사용하는지에 대해서 차근차근 알아보도록 하겠습니다. 참고로 리스트(list)에 대해서는 별도의 포스팅에서 아주 자세히 다루고 있습니다! 사전의 특징 해시 테이블(hash table)이라는 자료구조를 기반으로 하는 사전은 키(key)와 값(value)으로 이루어진 여러 쌍