profile
사실 나도 잘 모름

FlatList와 React Query로 Infinite Scroll 구현하기

FlatList는 ScrollView와는 다르게 몇 가지 특수한 기능들을 제공하는데, 그 중 하나가 인피니트 스크롤의 손쉬운 구현이다. 이 글에서는 React Query와 연동하여 빠르게 인피니트 스크롤이 가능한 뷰를 만드는 방법을 소개하고자 한다.onEndReache

2023년 1월 2일
·
0개의 댓글
·

Node Modules 2 - fs (file system)

fs 모듈 내의 함수들은 보통 아래와 같은 세 가지의 형태로 제공된다.메소드 이름 뒤에 sync가 붙는 형태의 함수는 비동기 처리를 하지 않는 함수로서 오류가 발생할 가능성이 있을 때는 반드시 try, catch문으로 감싸주어야 한다. 일반적으로는 굳이 sync를 사용

2022년 12월 24일
·
0개의 댓글
·

Node Modules 1 - os, process, path

주로 서버가 동작하고 있는 시스템 환경에 대한 정보를 얻어오고 싶을 때 사용하는 모듈이다.현재 동작하고 있는 노드 프로세스에 대한 정보를 얻을 수 있는 모듈이다. 그 중에서도 nextTick은 call stack이 모두 비워진 이후에 task queue가 실행되는 과정

2022년 12월 24일
·
0개의 댓글
·

타입스크립트와 클래스

노마드코더의 'Typescript로 블록체인 만들기' 강의를 기반으로 정리한 문서입니다. 정말 좋은 무료 강의니까 관심 있으시면 꼭 한 번 보시길 추천합니다!자바스크립트에서는 this.firstName와 같은 형식으로 this를 사용하여 클래스를 정의했으나, 타입스크립

2022년 12월 12일
·
0개의 댓글
·

타입스크립트 기초

노마드코더의 'Typescript로 블록체인 만들기' 강의를 기반으로 정리한 문서입니다. 정말 좋은 무료 강의니까 관심 있으시면 꼭 한 번 보시길 추천합니다!이렇게만 작성해도 타입스크립트는 a라는 변수가 number\[] 타입이라는 걸 추론(Explicit Types)

2022년 12월 12일
·
0개의 댓글
·

타입스크립트와 함수

노마드코더의 'Typescript로 블록체인 만들기' 강의를 보면서 정리한 문서입니다. 정말 좋은 무료 강의니까 관심 있으시면 꼭 한 번 보시길 추천합니다!함수를 어떻게 호출해야 하는지, 어떤 타입을 반환하는지를 정의한 것을 call signature라고 부른다. 위처

2022년 12월 12일
·
0개의 댓글
·
post-thumbnail

회사 짤렸다 (+퇴사 부검)

11개월 간 다니던 내 인생 첫 회사가 망했다. 정확히 말하자면 아직 망한 건 아니고, 망하기 직전까지 와서 마지막 버티기에 들어갔다. 그래서 같이 일하던 동료들과 함께 하루 아침에 직장을 잃었다. 지금 당장 큰 돈을 가져다 주기 힘든 사람들은 전부 회사를 떠나야 했다

2022년 11월 25일
·
4개의 댓글
·

TanStack React Table v8 - 컬럼 필터

!codesandboxreact-table-example-filtering-zhetr8?fontsize=14&hidenavigation=1&theme=darkreact-table의 필터는 크게 다음의 두 가지 종류(https://tanstack.com/tabl

2022년 8월 25일
·
0개의 댓글
·

TanStack React Table v8 - 정렬 (Sorting)

enableSorting 옵션을 통해 컬럼에 정렬 기능을 사용할지 사용하지 않을지를 선택할 수 있습니다. 예제에서는 이해를 위해 굳이 적었지만 명시하지 않더라도 기본값은 true이기 때문에, 정렬을 사용하고 싶지 않은 컬럼에만 false를 보내주면 됩니다.sorting

2022년 8월 25일
·
0개의 댓글
·

TanStack React Table v8 - 기본편

react-table은 스스로를 Headless한 라이브러리라고 소개합니다. Headless UI란, UI 엘리먼트와의 상호작용을 위한 로직, 상태, 처리 API 만을 제공하며, 그 이외에 어떠한 마크업이나 스타일, 선탑재 기능 등을 제공하지 않는 라이브러리를 의미합니

2022년 8월 24일
·
0개의 댓글
·

리액트 프로젝트에서 이미지 파일 업로드하고 열람하기

AxiosJavaScript Reactmulter (백엔드에서만 사용)유저가 파일을 업로드하는 창구로서 HTML input 태그의 file 타입을 이용하겠습니다. 우리는 이미지만 받을 것이기 때문에 accept 옵션을 통해 첨부 가능한 파일을 특정 이미지 파일 확장자로

2022년 5월 18일
·
0개의 댓글
·
post-thumbnail

Gatsby와 MDX 플러그인으로 개발 블로그 만들기 [2편]

본격적으로 블로그를 만들기에 앞서, 우리가 이용할 개츠비 플러그인이 무엇인지에 대해 간단히 알아둘 필요가 있다. 개츠비 플러그인은 개츠비에서 제공하는 자체 라이브러리로서, 개츠비로 개발하면서 자주 사용하는 기능들을 쉽고 빠르게 이용할 수 있도록 과정을 단축시켜주는 역할

2022년 5월 16일
·
0개의 댓글
·
post-thumbnail

Gatsby와 MDX 플러그인으로 개발 블로그 만들기 [1편]

개츠비는 리액트 기반의 정적 사이트 생성기이다. CRA 등을 통해서 이전에 리액트 프론트엔드 개발을 해본 개발자라면 (바로 나) 개츠비의 개발 환경에 금방 적응할 수 있고, 리액트가 제공하는 훌륭한 기능들 또한 그대로 이용할 수 있다.뿐만 아니라 개츠비는 정적 사이트

2022년 5월 9일
·
0개의 댓글
·

react-router-dom (v6) 사용법

Router가 아닌 BrowserRouter로 했을 때 제대로 동작한다.Router 안에 Routes, Routes 안에 Route의 Props로 이동할 컴포넌트를 결정한다.Nested Routing을 하고 싶다면 path의 value 가장 끝에 \*을 삽입하여 네스팅

2022년 5월 8일
·
0개의 댓글
·

createGlobalStyle로 전역 스타일 지정하기 (feat. reset CSS)

styled-components에는 전역 스타일을 한 번에 지정할 수 있는 createGlobalStyle이라는 함수가 존재한다.이를 이용하여 지정하고 싶은 모든 스타일을 미리 지정해둘 수 있다. 예를 들어, reset CSS 내용을 여기에 담아두면 전역 스타일 초기화

2022년 5월 8일
·
0개의 댓글
·

React에서 event를 TypeScript에게 설명하는 방법

바닐라 자바스크립트에서는 HTML에서 발생한 이벤트를 onChange나 onSubmit, onClick 등으로 리스닝하고, 이를 자바스크립트를 통해 핸들링하는 것이 기본적인 흐름이다.React에서도 이러한 흐름은 동일하지만, TypeScript로 작성하는 React 환

2022년 5월 8일
·
0개의 댓글
·