본문 바로가기
반응형
[번역] useEffect 단순화 Photo by Christopher Burns 원문 : https://tkdodo.eu/blog/simplifying-use-effect 글에서 오타나 오역을 발견하신 경우, 댓글로 알려주시면 감사하겠습니다. 의역이 포함되어 있습니다. :D useEffect. 모두에게 필요한 훅이지만 누구도 원하지 않습니다. 리액트 공식 문서에 따르면 이것은 "리액트의 순수 함수형 세계에서 명령형 세계로 탈출하는 창구"입니다. 리덕스 원작자이자 리액트의 핵심 팀원인 댄 아브라모프(Dan Abramov)가 작성한 useEffect 완벽 가이드는 49분 분량이며, 실제로 이해하는 데 최소 두 배의 시간이 걸립니다. useEffect는 리액트에서 얻을 수 있는 만큼 복잡하고, 이것 없이 애플리케이션을 작성할 수 있을 가능성.. 2022. 9. 12.
MUI Data grid column default value 설정 방법 MUI Data grid는 기본적으로 column의 필드값이 존재하지 않으면 빈값으로 노출이 됩니다. 하지만 상황에 따라 기본이 되는 값을 변경하고 싶을 때가 있습니다. 예를 들어 날짜별로 제품의 주문횟수들을 계산할 때, 주문이 들어오지 않아 받아오는 데이터에 해당 속성이 없다면 어떻게 할까요? 코드로 확인해보겠습니다. 코드 import { Box } from '@mui/material'; import { DataGrid } from '@mui/x-data-grid'; const rows = [ { id: 1, date: '01', name: '반팔', orders: 2550, stock: 9230 }, { id: 2, date: '02', name: '코트', stock: 1872 }, { id: 3,.. 2022. 8. 30.
오늘 하루 그만 보기 모달 윈도 구현하기(feat.Cookie) 마케팅 회사의 개발자로 일하다보니 꽤 많은 온라인 쇼핑몰에서 모달 윈도를 다양하게 활용하고 있다는 것을 알게 되었습니다. 특히 사용자의 구매 유도를 위한 배너 광고 형식을 자주 보는 것 같아요. 배너 광고 형식 외에도 프로모션 알림, 공지사항 등이 있겠네요. 여기엔 '오늘 하루 그만 보기', '3일 동안 보지 않기'와 같은 기능도 포함이 되어 있습니다. 이러한 기능은 어떻게 구현을 하는지 해당 기능을 중심으로 알아보겠습니다. 왜 쿠키(Cookie)일까? '오늘 하루 그만 보기'와 같은 기능은 대부분 쿠키를 통해서 구현을 합니다. 현재 네이버의 프로모션 알림도 쿠키를 통해 제어를 하고있습니다. 확인하는 방법은 개발자 도구를 켜서 애플리케이션 탭의 쿠키에서 확인을 하실 수 있습니다. 네이버에서 '3일 동안 .. 2022. 8. 18.
9개월 차 프론트엔드 개발자 회고 지난 회고에 이어 3개월이 지났다. 이번 회고는 다른 시기와 달리 더 보고, 듣고, 배우고, 느꼈던 것들이 많았다. 개발자 커뮤니티 이제는 커다란 커뮤니티가 된 테오의 프론트엔드 오픈채팅방은 다양하고 많은 질문들과 대답들이 오고간다. 뛰어난 분들이 많아서 대화를 보는 것만으로도 도움이 될 때가 많다. 그 외에도 컨퍼런스나 해커톤, 좋은 블로그 글 등 유용한 정보들을 공유 해주어서 주변 개발자 지인들에게도 추천하고 있다. 요즘은 대화가 많이 쌓여있을 때는 못볼 때도 있지만 틈틈이 출근길이나 퇴근길에 보려고 노력하고 있다. 그리고 그 덕분에 인프런 네트워킹 데이 행사에도 참여할 수 있었다. 프론트엔드 개발자들이 오프라인으로 모여 연사도 듣고, 피자와 맥주를 마시면서 대화도 나누는 네트워킹 행사였다. 걱정했던.. 2022. 8. 8.
인프런 네트워킹 데이에 다녀오다 이틀 전인 6월 17일(금), 인프런에서 주최한 FE 개발자 네트워킹 데이에 다녀왔습니다. 정말 운이 좋게 당첨 되었어요. 총 695분 중 60명 안에 들었으니까요. 개발자로 취직을 한 이후에 커뮤니티도 굉장히 중요하다고 생각해와서 이런 저런 기회가 생기면 지원을 했어요. 하지만 오프라인 행사는 처음이었기에 너무나 떨린 마음으로 갔던 기억이 납니다. 너무 어색해서 얼굴에 경련이 일기 직전, 인프런 직원들이 오셔서 먼저 말도 걸어주시고 저의 얼굴 근육도 풀어주셨습니다. 지금와서 생각해보면 오히려 일찍 도착을 한 게 다행인 것 같아요. 덕분에 네트워킹 데이 비하인드(?)도 듣고 조금씩 즐기게 되었습니다. 그렇게 시간이 흘러, 조금씩 사람들이 채워지고 제가 배정받은 팀의 팀원분들도 오시기 시작했습니다. 이미 .. 2022. 6. 19.
[JavaScript] 디바운싱과 쓰로틀링 디바운싱(debouncing)과 쓰로틀링(throttling). 언뜻 들어는 봤지만 유야무야 시간을 보내다가, 기술 과제 탈락 후 디바운싱과 같은 최적화 작업을 했으면 좋겠다는 피드백을 받았다. 그렇다면 어떨 때는 디바운싱을 사용해야하고, 쓰로틀링을 사용해야할까? 이번 기회에 제대로 개념을 잡고 가야겠다고 생각했다. 들어가기 전 setTimeout() - 함수의 실행을 예약하는 타이머 기능 clearTimeout() - 타이머의 실행을 취소하는 기능 디바운싱 - 빈번하게 발생하는 이벤트를 '특정 시간 이후에 한번만' 실행 시키는 최적화 기법 쓰로틀링 - 빈번하게 발생하는 이벤트를 '일정한 간격으로 한번만' 실행 시키는 최적화 기법 setTimeout() - 함수의 실행을 예약하는 타이머 기능 setTim.. 2022. 6. 10.
알프레드? 레이캐스트! 맥북을 처음 샀을 때부터 지금까지 쭉 잘 써왔던 알프레드를 이제는 보내줄 때가 되었다. 사실 알프레드가 익숙하기도 하고 나름 설정을 정성스럽게 해놔서 웬만하면 바꾸지 않으려 했다. 하지만 레이캐스트를 사용한 지 15분만에 마음을 바꾸게 되었다. 개발자를 위한 생산성 도구 레이캐스트(Raycast) 레이캐스트는 알프레드와 비슷하게 Mac 사용자의 생산성을 크게 높여준다. 단축키, 키워드, 기능 확장 등을 사용하여 Mac과 웹의 검색을 돕는다. 하지만 알프레드의 유료 사용자만 가능했던 기능들을 레이캐스트에서는 무료로 사용이 가능하고, 부드럽게 동작하고, 굉장히 빠르다. 게다가 클립보드와 스크린샷 히스토리, VS Code 프로젝트 매니저, Github 매니저 등 개발자 친화적인 기능 확장들이 굉장히 많다. 한.. 2022. 5. 12.
반응형

티스토리툴바