profile
야매로 먹고사는 프론트엔드 개발자

React Query - useQuery 재사용

그동안 서버상태를 가져다 리액트 기반의 앱에서 화면에 표출하려면 참 많은 방법들을 사용했었다. 뭐 직접 axios 같은 것을 호출해서 useState 를 업데이트 하기도 하고 좀 더 고급진 방법으로는 redux 와 같은 상태관리 라이브러리 내에서 미들웨어를 통해서 ap

2022년 3월 20일
·
0개의 댓글

getServersideProps 의 오해

원래 좋소 탈출기라는 글을 썼다가 지웠다. 이제는 어지간하면 글을 네거티브하게 보단 포지티스하게 쓰고 싶어서였다. 그래서 그런가? 좋은 일만 생기고 몸도 많이 건강해졌다.하지만 인수인계가 좀 짧았던지라 계속 후속지원을 해주고 있는데 유독 페이지 로딩이 오래걸리는 부분이

2022년 3월 7일
·
0개의 댓글

Array.prototype.splice vs Array.prototype.slice

배열은 참 많은 메소드를 제공해준다. 그중에 splice 의 특징에 대해서 알아보자.말 그대로다. 원본 배열에 호작질을 한다.명확하게 나와있다. 인자로 3개를 받는데첫번째 인자는 원본 배열의 시작 인덱스두번째 인자는 첫번째 인자로 지정한 인덱스부터 몇개 날릴 것인지 (

2021년 11월 10일
·
0개의 댓글

Next.js 폰트를 읽지 못하다.

사실 지금 나는 미친 짓을 하고 있다. 다니는 회사가 조그마한 스타트업인데 (진짜 지긋지긋) 괜찮은 아이템을 갖고 국외에서 서비스를 하고 있다. 신기한 건, 웹으로 만들고 앱으로 가야하는데 이 회사는 앱으로 만들어 놓고 웹을 이제서야 좀 만들고 있다. 당연히 앱은 RN

2021년 10월 28일
·
0개의 댓글

Next.js 에서 global.d.ts 꽂아넣기

리액트를 다루면 한번쯤은 들어보게 되는 프레임워크이다. 왜 쓰는지 설명하자면 대표적으로 두가지 정도 있다.1\. 편하고 쉬운 라우팅2\. 편하고 쉬운 SSR, SSG그리고 거의 zero-config 수준의 설정까지.. 근데 그러다보니 조금 내 입맞에 맞추기는 어려운 경

2021년 10월 28일
·
0개의 댓글

프론트엔드 개발자 이직하기

태생적으로 작은 회사는 항상 경영문제에 시달리게 되어 있다. 다니던 회사를 2년 5개월 만에 나와야 했다.철저히 저 개인이 이해한 방식을 정리하는 곳입니다. 100% 맞다고 장담할 수 없는 부분도 있으니 유의하시기 바랍니다.이렇게 생겼다. return 을 만나는 순간

2021년 7월 6일
·
0개의 댓글

useEffect

보통 리액트를 처음 배울 때, componentDidMount 라는 것을 document.ready 에 해당한다고 배웠다. 그래서 잘 써먹었고 그게 Hooks로 넘어오면서 useEffect 라는 녀석으로 바뀌면서 사용법도 재밌어졌다. 오늘은 (결국은 내 머리의 문제)

2021년 1월 14일
·
0개의 댓글

useState

react 를 쓰는 이유 중에 하나는 바로 빠른 리렌더링이다. 그 중에 특히 몇가지 상황이 발생하면 빠르게 리렌더링을 하는데 그 중에 하나가 바로 state 가 변할 때 이다. 클래스 형을 사용할 때 setState 가 바로 그것이다.react v16.8 이상부터 함수

2020년 11월 9일
·
0개의 댓글

form 요소가 아닌 곳에서 blur 이벤트 구현

보통 햄버거메뉴 같은 걸 클릭, 터치하면 컨텍스트 메뉴가 튀어나오고 뭔가를 선택하게 된다. 하지만 그렇지 않고 컨텍스트 메뉴를 닫아야 할 경우도 있다. 일반 PC에서는 햄버거를 다시 누르면 되고 그게 어렵지 않지만 모바일에서는 그렇지 않다.blur event on di

2020년 10월 27일
·
0개의 댓글

안드로이드 앱(코틀린)에서 웹뷰의 JS를 호출하는 방법

웹뷰로 만들어진 앱의 경우는 간혹가다 안드로이드 앱(이하 "앱")에서 웹뷰에 존재하는 JS를 호출해야하는 경우가 있다. 안드로이드에서는 loadUrl 이라는 method를 이용하여 미리 약속된 함수의 이름을 바로 호출할 수 있다. 위의 코드의 경우는 something이

2020년 9월 11일
·
0개의 댓글

react-router-dom 에서 props 를 넘겨주고 싶을 때

보통은 SSR 과 코드 스플리팅의 이슈로 next.js 를 많이 사용하는데 이번엔 간단하게(?) 가고 SSR도 필요없고 SEO도 필요없는 그런 서비스를 하나 만들어야 한다. 그래서 CRA를 사용하였는데 route 부분에서 next.js의 직관적인 부분과 좀 다른 부분이

2020년 6월 30일
·
0개의 댓글

싸이월드 이미지 한방에 다운받기

https://github.com/crazy4u2/cy-img-backup백문이 불여일견, 언능 돌려들 보시라.

2020년 6월 19일
·
0개의 댓글

Error: ENOSPC: System limit for number of file watchers reached,

가끔 react 를 가지고 열심히 일을 하다보면 라는 에러를 내뱉는 경우를 볼 수 있다. 이럴 경우 라고 터미널에 입력해주면 아주 깔끔하게 처리된다.원인은 너무 열심히 일을 해서 시스템의 파일와쳐가 limit 에 달해서 그렇다고 한다.출처https://gith

2020년 5월 15일
·
2개의 댓글

일단 따라해보는 webpack - 인강보고 복습하며 내 말로 풀어보는 webpack

들어가며 webpack 이 세상에 나온 건 꽤 되었다. 원리나 컨셉은 단순한데 (모든 js 파일이나 기타 등등을 묶어서 하나로 만들어준다~) 그것을 설정하는 webpack.config.js 의 내용은 꽤나 어렵다. 그러면서 리액트를 사용할 때 쓰는 CRA나 NEXT.J

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

웹서비스 개편중 겪는 일들

별 수 있나 월급쟁이가 사장이 시키면 해야지..현재 서비스는 앵귤러로 한번 외도했다가 지금은 Nodejs 기반에 ejs 템플릿으로 구동되고 있다. 뭐 나름 괜찮게 돌아가고 있고 내가 합류해서 서비스의 뷰를 좀 볼만하게 만들어놨고 전담 퍼블리셔가 합류하여 한번 더 업그레

2020년 3월 12일
·
0개의 댓글

Promise

비동기, Promise 요즘 작업을 하다보면 피할 수 없는 단어가 바로 비동기, Promise 같은 그런 단어이다. 브라우저에 내장된 fetch API도 그렇고 대중적으로 많이 쓰는 axios 의 경우도 Promise 객체를 반환한다. 오늘 작업 중에 다음과 같은 문제

2020년 2월 4일
·
0개의 댓글

nextjs 에서 window객체와 document객체

생각해보면 너무 당연한 말인데 SSR을 하는 nextjs 이다보니 window객체와 document객체는 속칭 '브라우저가 뜨고' 나서 작동된다. 그러고 보니 componentDidMount나 componentDidUpdate 에서만 쓸 수 있다. 나는 아무래도 당분간 클래스형 컴포넌트로 계속 만들어야 할 듯 ㅠ

2020년 1월 3일
·
0개의 댓글

forEach, splice, slice

벨로퍼트님의 강의를 들으며 그가만든 서비스에 노트를 적는 좋은 세상이다. forEach forEach를 가지고 놀면 배열을 쉽게 다룰 수 있다. 다만 forEach를 가지고 놀 때 기본적으로 파라미터가 몇개 넘어오는지 잘 모르던(MDN에 사실 잘 나와있지만 짧은 영어, 그리고 근본없는 실력 덕분에..) 시기가 있었는데 항상 몇개일지 궁금했는데 참 멍청했...

2019년 12월 19일
·
0개의 댓글

Android webview

들어가며 요즘은 플러터나 리액트 네이티브 같은 좋은 녀석들이 많아서 앱 개발의 진입장벽이 많이 낮아졌다. 하지만 우리 회사처럼 하드웨어 디펜던시가 높은 서비스(블루투스 시리얼 통신 같은..)나 거기에 웹으로 된 걸 당장 앱에다 때려넣는 그런 서비스라면 안드로이드 웹뷰를 외면할 수 없다. sessionStorage 안드로이드 웹뷰는 기본적으로 sessionS...

2019년 9월 16일
·
0개의 댓글

map과 for 를 이용한 html 템플릿 그리기

비동기로 데이터를 받아서 처리하는 부분을 그릴 때 전통적으로 for 를 이용한 방법을 많이 쓰게 된다. for ~ var arrData = []; //ajax 같은 비동기 통신으로 자료를 받아서 넣어둠. var template = ''; for (i=0; i ar

2019년 7월 9일
·
2개의 댓글