All

218 posts

React 컴포넌트에 ref prop을 넘겨서 그 내부에 있는 HTML 엘리먼트에 접근을 하게 해주는 forwardRef() 함수에 대해서 알아보겠습니다. HTML 엘리먼트의 ref prop React에서 ref prop은 HTML 엘리먼트의 직접 …

React로 웹 애플리케이션을 개발하다 보면 간혹 React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요가 있는데요. 이번 포스트에서는 이럴 때 유용하게 사용할 수 있는 React의 독특한 prop인 …

많은 프로그래밍 언어들에서 i, j, k와 같은 소위 인덱스(index) 변수를 증가시키면서 for 루프를 돌립니다. 하지만 파이썬에서는 대신 enumerate()라는 내장 함수 이러한 인덱스 변수 없이 다소 독특한 방식으로 루프를 돌리는데요. 이번…

마치 옷의 지퍼(zipper)처럼 두 그룹의 데이터를 서로 엮어주는 파이썬의 내장 함수 zip()에 대해서 알아보도록 하겠습니다. zip zip() 함수는 여러 개의 순회 가능한(iterable) 객체를 인자로 받고, 각 객체가 담고 있는 원소를 터…

웹 페이지 상에서 많은 양의 데이터를 일목요연하게 보여주기 위해서 테이블(table) UI가 많이 사용됩니다. 정렬이나 검색을 지원하는 완성도 있는 테이블 UI를 직접 개발하려면 생각했던 것보다 구현이 복잡해지는 경우가 많은데요. React Tabl…

웹 페이지에서 많은 양의 데이터를 일목요연하게 보여주기 위해서 테이블(table) UI가 많이 사용됩니다. React로 완성도 있는 테이블 컴포넌트를 개발하려면 이외로 고려할 부분이 많아서 생각보다 많은 시간과 노력이 들어가게 되는데요. 이번 포스트…

이번 포스트에서는 환경 변수를 파일에 저장할 수 있도록 해주는 dotenv 라이브러리에 대해서 알아보겟습니다. 설치 npm 패키지 매니저를 이용하여 dotenv 라이브러리를 Node.js 프로젝트에 설치합니다. .env 파일 작성 dotenv 라이브…

이번 포스트에서는 Node.js에서 환경 변수에 어떻게 접근하고 설정할 수 있는지 알아보겠습니다. 환경 변수란? 먼저 환경 변수(environment Variables)가 무엇인지 간단하게 개념부터 짚고 넘어가겠습니다. 일반적으로 우리는 코드 베이스…

React 앱을 개발하다보면 네트워크를 통해 REST API나 GraphQL API를 호출하여 원격에 있는 데이터를 가져와야 하는 일이 빈번하게 생기는데요. 이번 포스트에서는 React 훅 함수를 이용해서 원격 API를 깔끔하게 호출하는 방법에 대해…

이번 포스트에서는 React에서 웹 스토리지를 사용해서 컴포넌트의 상태를 유지시키는 방법에 대해서 살펴보겠습니다. useState()로 유실되는 상태 관리하기 React에서 제공하는 useState() 훅 함수를 사용하면 컴포넌트의 상태를 간편하게 …