전체 글

전체 글

    인터뷰 질문 useCallback과 useMemo에 차이점

    최근에 회사를 옮기게 되었는데 인터뷰 하다가 나온 질문 중에 하나가 useCallback 과 useMemo을 평소에 사용하는지와 그 차이점은 무엇인지에 대해서 물어보는 것이 였습니다. 저는 평소에 사용하는 것들이라 대답하는 것이 그렇게 어렵지는 않았지만 리액트를 시작하고 어느정도 Optimization을 해보지 않았다면 모를 수도 있는 부분 같아서 한번 정리를 해보려고 합니다. 간단한 대답은 useCallback은 함수를 caching하고 useMemo는 결과 값을 caching 한다고 알고 있으면 됩니다. 이해를 돕기 위해 아래 설명을 읽어보시면 이해가 될 것이라 생각됩니다. 먼저 useCallback과 useMemo에 차이를 알기전에 왜 React 팀에서 이런 React hook을 만들었는 지를 알아..

    Dropdown 자바스크립트 없이 만들기(React)

    웹사이트를 만들다 보면 드롭다운을 만들일이 많이 있습니다. 네비게이션에 메뉴라던지 필터등 여러가지에 사용이 됩니다. 예전에 드롭다운을 만들때 리액트로 state을 써서 만든 경우가 많이 있었습니다. CSS를 잘 못했던 이유도 있었고 복잡한 경우도 많았기 때문입니다. 최근들어 다시 CSS를 공부하다가 배웠는데 dropdown을 만들 때 그냥 간단한 input과 label만 있으면 되는 것이였습니다. 이번 예제는 리액트를 사용하는데 사실 대부분이 그냥 HTML과 CSS이기 때문에 크게 걱정할 필요는 없습니다. 따라하고 싶으신 분은 맨 끝에 남겨 놓도록 하겠습니다. dropdown css로 만들기 원리 Label과 input은 id와 for로 연결 될 수 있습니다. 그렇게 연결 됐을 때에 label을 클릭하면..

    VS Code에서 터미널 노드 버전 바꾸기 nvm

    vscode를 오랫동안 사용해 오고 있었는데 최근에 버전업을 크게 하면서 node 16을 사용하고 있었습니다. 그런데 vscode 터미널만 열면 버전 8이 계속 나와서 nvm use 16을 터미널 열때 마다 치고 있었는데 더 이상은 안될것 같아서 바꿔 보려니 안되서 여러방법을 시도 해보던중에 찾게 되서 공유하고자 합니다. 일단 내 시스템에서 사용하고 있는 노드 버전을 한번 체크 해봅니다. node -v 기본 값으로 사용하고 싶은 노드 버전이 있다면 아래와 같이 터미널에 입력하면 됩니다. 예를들어 16을 사용하고 싶다면 아래와 같이 입력하면 됩니다. nvm alias default 16 vscode 터미널 버전이 다른 경우는 /usr/local/bin/node 에 노드 버전을 사용하고 있기 때문일 가능 성..

    간단히 만들어 본 크롬 익스텐션 구글 스토어 제출 하기

    제가 최근에 크리스마스 연휴를 보내가다 문득 필요한 게 있어서 크롬 익스텐션을 하나 만들어 보았습니다. 화면에 blur 한 부분이나 화면 전체를 가리는 팝업을 제거해주는 플러그인입니다. 최근 들어 많은 웹사이트들이 부분적으로 가리고 전체 화면 뛰워서 가입 안 하면 못하게 하는 방법을 많이 사용하고 있어서 만들었습니다. 물론 여러 웹사이트들은 자바스크립트로 콘텐츠를 부분적으로 보여주거나 가짜 데이터를 보여 주는데 그러면 어떻게 할 수가 없습니다. https://chrome.google.com/webstore/detail/visibilize/cepdgdncnnflfcmahndoefpkljnnebmn?hl=en&authuser=0 Visibilize Remove all blurred contents and r..