time to wander

항상 css-in-js로 styled-components만 사용하다가 emotion을 써보고 싶어서 라이브러리를 설치했다. emotion에서도 styled-components와 동일하게 GlobalStyle과 ThemeProvider API를 제공하고 있어서 우선 theme과 global 파일을 생성하여 간단한 설정을 마친 후 index.js에 임포트하였다. 그런데 임포트 하자마자 아래와 같이 export 'useInsertionEffect' (imported as 'useInsertionEffect$1') was not found in 'react' 라는 문구와 함께 에러가 발생했다. 'useInsertionEffect'라는 API가 export 할 수 있는 API 리스트에 없어서 발생하는 문제인 듯 ..

밈글밈글 프로젝트 코드를 리팩토링 하려고 보는데 로그인 상태 여부를 확인해서 조건부 렌더링하는 컴포넌트가 굉장히 많았다. 그런데 로그인 상태를 전역에서 관리하면서 컴포넌트에서 구독하고 있는 게 아니라 각 컴포넌트마다 웹스토리지에 유저 정보가 있는지 확인하여 로그인 상태인지, 로그아웃 상태인지를 연산하는 작업을 하고 있었다. 이미 상태 관리 툴로 리덕스를 사용하고 있었지만 사실상 서비스 운영은 종료돼서 공부하는 김에 React에서 기본적으로 제공하는 Context API를 사용하여 로그인 상태를 전역으로 관리하고, 로그인 상태가 필요한 컴포넌트에서는 구독할 수 있도록 수정해보았다. Context API란? React는 데이터가 부모 컴포넌트에서 자식 컴포넌트로, 즉 단방향으로 흘러야 한다. 컴포넌트 dep..

깃허브 페이지로 레주메를 만들고 블로그에만 링크를 심어 놓기는 했는데..미미하겠지만 그래도 유저 트래킹을 하고 싶어서 구글 애널리틱스를 사용하기로 했다. 나는 react-ga 라이브러리를 사용했기 때문에 이전 버전인 유니버셜 애널리틱스 속성으로 계정을 생성하였다. 1. 구글 애널리틱스 계정 생성하기 계정을 생성할 때 두 번째 속성 설정 단계에서 고급 옵션의 유니버셜 애널리틱스 속성만 만들기를 선택한다. 2. index.html에 트래킹 스크립트 삽입하기 계정을 생성하고 나면 트래킹 ID가 포함되어 있는 스크립트 코드가 주어진다. 해당 스크립트를 index.html의 head 안에 삽입한다. 3. react-ga 라이브러리 설치 및 설정 react-ga 라이브러리 설치 후 실행 파일에 아래와 같이 설정한다..

프로그래머스로 이력서를 작성하던 중 다른 개발자 분들이 따로 정적 페이지를 만들어서 이력서를 작성하신 걸 보고 나도 그렇게 만들고 싶어졌다. 여러가지 방법이 있겠지만 Github Pages를 사용해 본 적이 없기도 하고, 이력서는 은근히 갱신할 일이 많을 것 같아 편하게 재배포 할 수 있도록 Github Pages를 이용해 보기로 했다. 0. 사전 준비 node.js npm 또는 yarn (패키지 매니저) 나는 항상 패키지 매니저로 yarn만 사용하다가 이번에는 npm을 사용했다. 찾아보니 yarn으로 깃허브 페이지를 배포하는 것도 크게 달라 보이지는 않았다! 1. Repository 생성하기 레포지토리 이름은 {본인의 Github 아이디}.github.io 의 형태로 설정한다. README.md 는 옵..

내가 썼지만 무슨 말인지 잘 모르겠는 제목..! 말 그대로 특정 이미지를 클릭하면 클릭한 이미지를 바로 크게 보여주고, 위나 아래로 스크롤하면 이전 이미지와 다음 이미지를 계속해서 볼 수 있는 쪼끄맣지만 소중한 기능이다..! 구현하게된 계기 지난 주 일요일, 정말 부랴부랴 실전 프로젝트의 프로덕션 배포를 했다. 런칭이 계획보다 훨씬 늦어지는 바람에 피드백을 적게 받으면 어떡하지 라는 걱정을 했었는데, 다행히 정말 많은 분들이 새로운 시선으로 자세히 봐주신 덕분에 UX 개선에 도움이 되는 피드백을 많이 받을 수 있었다! 그 중 짤방 페이지에 대한 피드백도 있었는데, 목록에서 어떤 이미지를 보려고 클릭해서 디테일 페이지로 이동한 후 또 다른 이미지를 보려면 다시 뒤로 가기를 눌러야 하는 과정이 불편하다는 피..

React key 🔑 React에서 key의 역할 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도우며, 배열의 element에 고유성을 부여하기 위해 배열 내부의 eliment에 key를 지정한다. key는 문자열을 사용하는 것이 좋으며 대부분의 경우 ID를 key로 사용하지만 안정적인 ID가 없다면 최후의 수단으로 각 element의 index를 key로 사용할 수 있다. const todoItems = todos.map((todo) => {todo.text} ); 🔑 React에서 key를 사용해야 하는 이유 효율적인 DOM 트리 구조 구축 및 렌더링 성능을 위해 💡 React의 가상 DOM 트리 비교 알고리즘은 아래의 두 가지 가정을 기반으로 한다. 📌 서로 다른 타입..