profile
더 나은 서비스를 고민하는 프론트엔드 개발자.

[React] 몇 초 이상 hover 시에 popover 띄우기

element 위에 mouse hover했을 때, 몇 초가 유지하면 popover를 띄워보자onMouseEnter에 다가 setTimeout을 걸어두니깐 잠까 들어갔다가 나왔는데 몇 초후에 뒷북으로 popover가 생겼다가 사라짐간단하게 clearTimeout을 걸어두

3일 전
·
0개의 댓글

[React] 복잡한 함수 속에서 state 변화 즉각 반영하기

오늘은 간단하게 본문부터!복잡한 동작을 하는 함수가 실행되는 동안 유저에게 loading state 표기button click -> handleClick 함수 -> loading State = true -> 유저에게 표기위 처럼 코드를 짜면 handleClick을 눌렀

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

[fabric.js] 내 사진에 직접 인스타 필터를 적용해보자!

인스타그램 필터(인스타그램 필터

2022년 4월 30일
·
0개의 댓글

[fabric.js] fabric js에서 canvas putImageData 적용 안됨 (custom filter 넣기)

fabric.js를 기반으로 구현한 nhn의 tui.image-editor를 사용해서 이미지 편집기를 만들던 중, 라이브러리에서 제공중인 필터가 마음에 들지 않아서 커스텀 필터를 몇 개 넣기로 했다.위 라이브러리의 applyFilter를 보니 fabric.js의 app

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

[React] drag leave가 반복적으로 발생할 때

input에다가 이미지를 drop시켜서 uploading하는 기능을 구현하던 중에 drag over, drag leaver가 반복적으로 발생하는 이슈 발견위와 같이 nested된 간단한 구조의 컴포넌트가 있다.여기에 사진을 drop시켜서 upload하는 기능을 구현해보

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

[React] custom hook에서 useState를 사용할 때 주의할 점 (No rerender)

목표 : 사이트 소개 툴팁 구현하기 dor.gg 사이트의 유저들에게 사이트 사용 방법을 설명하는 툴팁을 만드는 작업이었다. 기본적으로는 useState를 사용하되, 다음번에 유저가 들어왔을 때에는 툴팁이 뜨지 않도록 localStorage에 저장하는 방법으로 구현 중이

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

[React] Hide Header when scroll down (ft.throttle)

scroll을 아래로 내릴 때, header가 안보이게 되어야 한다. scroll을 위로 하면, header가 다시 보여야 한다. go down, go up에서 state true, false를 정해주어서 header의 표시를 정해주면 된다. https://w

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

[Javascript] PeerJS 개념 이해하기

dor.gg 개발을 한지 어언 6개월정도 지났다. 이제 사이트의 기본적인 틀은 (매칭 시스템) 잡힌 것 같아서 '베타 버전'이라는 꼬리표를 떼기 위해 두 개의 큰 산이 남은 상황이다. 그 중 하나가 바로 음성채팅이었는데.peerJS의 사용법을 적기 앞서 그 기반이 되는

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

[react] bottom sheet modal 구현

지난 여름부터 진행하고 있는 Dor.gg 프로젝트는 web 뷰를 기반으로 모바일 화면에서도 원활하게 사용할 수 있도록 반응형으로 제작하고 있다. 프로젝트 초기에는 모바일 앱을 react native나 flutter를 사용해서 만들려고 했으나 인력 부족으로 (...😥)

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

[javascript] 화면 상에서의 위치

모바일 화면에서 아래쪽에 모달 처럼 뜨는 (bottom sheet라고 하더이다.)를 구현해보고 싶어서 서칭을 하던 중. 콴다 기술 블로그에서 구현 방법을 자세하게 적어둔 글을 보게 되었다. 따라해보는데, 내가 그동안 화면 내에서의 높이, 길이, 너비 등등을 제대로 이해

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

[번역, 정리] Making Google Fonts Faster

해당 포스트는 다음 페이지의 번역, 정리본입니다. 원문을 읽고 싶으면 다음 페이지를 방문해주세요.This article is translation of this article. If it's a problem, I will delete this article. Plea

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

[Next] svg import 하기

여러가지 방법이 있는데, 그 중 내가 사용했던 방법은 두가지였다.첫번째 방법은 next/Image에서 바로 svg를 불러와서 사용하는 방법이다. 이렇게 하면 손 쉽게 사용할 수 있지만, svg의 color 등을 조절하기 힘들다. 따라서 두 번째 방법을 사용하는 것을 추

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

[React] useEffect 작동 순서

글을 쓴 이유 방금 우연하게 useEffect에 대해서 체크해보고 싶은 것들이 있어서 검색을 하던 중에 useEffect의 작동 순서에 대해 검색을 해보던 중에 충격적인 사실을 알게 되서 이렇게 글을 쓰게 된다. 지금까지 나는 useEffect가 top-botton

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

[React] React-helmet과 그 한계. (next로 migrate하려는 이유)

React는 기본적으로 SPA를 서비스해주기 때문에 SEO관리가 어렵다는 한계를 지니고 있다. 그래서 public폴더의 index.html에 직접 meta tag를 적어서 관리해주고 있는데, 이를 react-helmet이라는 라이브러리를 통해 js를 사용해서 관리할 수

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

[React] infinite loop error

회원가입 직 후에 자꾸 해당 에러가 발생. 해당 에러가 useEffect 밖에서 setState가 이뤄져서라고 발견문제는 이런 코드를 찾는데에 별로 힌트를 안 줬다는 건데..App에서 찾아서이 부분을 찾아냄. setState와 유사한 작업을 하는 dispatch가 us

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

[Next] 개념 잡기

이 글은 Next JS의 공식 문서를 읽고 개념을 요약해놓은 글입니다. 자세한 내용은 Next JS 공식홈페이지 참고page-based routingprerendering (SSG, SSR)code splittingCSS-in-JSCRA처럼 비슷한 템플릿을 제공next

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

[React] Modal 만들기

Yes -> modal 보여줌, no -> modal 안 보여줌. 대신 전역적으로 관리해줄 뿐.우리 스크림도르 사이트에서는 모달을 굉장히 많이 사용한다. modal을 만들어주는 다양한 라이브러리가 있는 것을 알고 있지만 createPortal을 사용해서 직접 구현해보고

2021년 12월 23일
·
0개의 댓글

[DockerFile] 개념 잡기

이 글은 생활 코딩 - 도커 이미지 만드는 법의 요약입니다한줄 핵심 : dockerfile은 console 창에 쓰는 명령어를 한 파일에 담은 것. ex. cd, install 등image ---- run ---> containercontainer ----commit

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

[Docker] 개념 잡기

Docker 한 줄 핵심 > 도커는 여러 운영체제 등의 실행환경을 손쉽게 구성할 수 있게 해준다. 사용 방법 도커란? 도커는 리눅스의 container 기술을 사용하는데 도움을 주는 일종의 라이브러리. host(우리 컴퓨터)위에서 돌아가는 container.

2021년 12월 21일
·
0개의 댓글

[react] 진짜 진짜 마지막 로그인 정리

이전 블로그에 정리했던 내용스크림도르 프로젝트를 시작했던 8월부터 4개월 내내 로그인 프로세스에 대해 고민했던 것 같다. 이제는 정말정말 마지막 최종 정리를 해보려고 한다. 위의 블로그에도 적어 놓았지만 로그인을 위해 여기저기 서치도 많이 하고 여쭤보기도 많이 했었다.

2021년 12월 20일
·
0개의 댓글