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

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

태생적으로 작은 회사는 항상 경영문제에 시달리게 되어 있다. 다니던 회사를 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일
·
0개의 댓글

일단 따라해보는 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개의 댓글

자바스크립트에 대해 오늘 알게된 사실들 몇가지..

sessionStorage에는 boolean 값이 안들어간다. 이거 몰라서 엄청 삽질했다. 생각보다 웹소켓을 다루는 일은 어렵지 않다. 다만 네트워크에 대한 지식이 없으면 삽질을 많이하게 된다. ajax 콜백은 정말 미칠 거 같다. 거기서 빠져나오는 걸 떠나서 콜백에서 작성한 코드들과 그 밖에서 작성된 코드들의 관계가 참 까다롭다. 어렵다 어려워 ㅠㅠ

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

자바스크립트에서 시간 다루기

자바스크립트에서 시간을 다루는 데에는 moment.js 만큼 좋은 것이 없다. 포맷변환도 쉽고 사용법도 상당히 직관적이다. 오늘 문제는 ISO 규격으로 시간을 다루던 중 발생됐던 일이다. 나는 흘러간 시간을 구해야하는데 원리는 사실 간단하다. 현재시간에서 기준이 되는 시간을 빼서 1초마다 업데이트 하면 되는 것이다. 하지만 시간이 자꾸 엉뚱하게 만들어지는...

2019년 6월 25일
·
0개의 댓글

mongodb 3.0 이상에서의 mongorestore

흔히 우리가 아는 mongodb restore 명령어가 있다. "mongorestore -h 127.0.0.1 -d [db이름] ~/덤프경로" 근데 이게 3.0이상에선 되질 않는다. 언제부터 업그레이드 됐는지는 모르겠지만.. 약간의 검색을 하면 답이 나오긴 하는데 아직은 좀 숨겨져(?) 있다. "mongorestore -d [yourdbname] [you...

2019년 4월 10일
·
0개의 댓글

NEXT.js 구동순서

NEXT.js는 기능에 비해 상대적으로 그 개념이 배우기 쉬운 프레임워크다. 그렇게 남의 프로젝트에 숟가락 얹어서 작업을 하다가 혼자 독립된 작업을 해야하는 순간이 와 버렸다. NEXT.js 튜토리얼을 따라하면 기본 개념은 금방 잡히지만 역시나 술에 물탄 듯, 물에 술

2018년 12월 27일
·
2개의 댓글