Under the Sign of Saturn

시작하며 Nomad Coder 강의 중 useTab 커스텀 훅 만드는 과정에서 제목에 써둔 것처럼 Re-rendering Issue와 Objects are not valid as a React 이슈를 만났다. 흔한 이슈이므로 작성하면서 이런 에러가 왜 발생했는지 써두고자 한다. 코드 Re-rendering Issue 정상적으로 작동할 때의 코드는 위 모습과 같다. 여기서 2번 주석 표시에서 실수를 하거나 아래 return 되는 리액트 컴포넌트의 onClick 부분을 잘못 적을 경우 Re-Rendering이 계속 발생할 수 있다. useTabs 훅은 객체 하나를 return 해주고, App() 함수형 컴포넌트에서는 이를 사용할 수 있게 한다. 맨 처음 UseTabs는 useState를 통해 currentI..

최근에 강의 노트나 튜토리얼 관련한 주석을 좀 더 두드러지게 잘 나타나게 쓰고 싶어서 github에 소스 코드를 올린 후에도 comment 부분을 열심히 활용하고 또 만족스러워했는데, 티스토리 블로그에도 그런 역할을 할 수 있게 덧글창을 관리하면 어떨까 하는 생각이 들었다. 기술 블로그를 사용하기 전에는 다른 주제의 블로그를 운영할 때도 있었지만 때맞춰 알림 받기가 어려웠던 기억도 있었다. 어차피 기술 블로그 전용으로 만들어둔 계정이니 덧글 플랫폼이 티스토리 기본 덧글에 한정될 필요는 없겠다는 생각도 들었다. disqus 도입을 고려하다가 이 링크 글을 발견했고, disqus보다 훨씬 나은 대안이라는 판단에 후다닥 도입해봤다. 포트폴리오 전용으로 만든 다른 깃헙 블로그에서 더 빛을 발할 것 같은 utte..

시작하며 PWA 연습을 위해서 간단한 프로젝트를 구성했다. 192, 512px 사이즈의 두 로고와 src 폴더에는 index.html, index.js, master.css, manifest.json 이렇게 파일을 두고 있다. lighthouse를 통해 pwa 리포트를 출력하는데 https 부분을 해결해야 할 것 같아서, Live Server 설정을 손보기로 했다. 문제 상황 Live Server extension에 들어가 설명을 보니 다행히 https를 지원한다. 공용 사이트가 아닌 테스트를 위함이니 자체 서명을 통해서 간단하게 Open SSL을 이용하기로 했다. Open SSL은 네트워크를 통한 데이터 통신에 쓰이는 두 프로토콜 TLS, SSL의 오픈 소스 버전이며, 이 링크에서 다운로드 받을 수 있..

gh-pages로 리액트 앱을 배포할 때 URL 설정을 package.json에 homepages로 추가하는 것만으로는 안 돼서 검색하다가 나중에 또 잊을까봐 기록으로 남겨둔다 ..^^ package.json gh-pages를 install한 뒤 script에 predeploy와 deploy 명령어를 넣어준 뒤 "homepage"에 내 깃헙 아이디 + github.io + 현재 저장소 이름을 넣어준 것까지는 다른 튜토리얼에 나와 있는 내용과 동일하게 진행했다. 그런데 자꾸 빌드된 파일에 번들된 css나 js 파일을 참조하는 경로가 /github.io...로 시작하고 있었다. 즉, github io를 넣은 완전한 URL을 찾지 못하고 있었다. React-router 라이브러리를 사용할 때도 비슷한 문제가 ..

문제 상황 Firebase의 Auth 기능을 이용해 유저의 프로필 정보를 받아서 DisplayName을 업데이트하려고 했다. 첫 번째 업데이트는 제대로 됐지만, 두 번째부터는 아래 같은 에러를 냈다. 문제 해결 최상위 App.js 파일에서 refreshuser라는 메소드를 두고, 프로필 정보를 업데이트할 때마다 이를 바로 반영할 수 있게 firebase.auth로부터 currentUser를 받아오고 있었다. 여기까지는 문제가 없었지만, 이를 Object.assign({}, user))로 복사한 객체를 받아오는 과정에서 enumerable 속성인 메소드 updateProfile을 복사해오지 못했던 것이다. 그래서 유저가 프로필 이름을 변경한 첫 번째 시점에서는 제대로 작동했지만, refreshuser 메소..

문제 상황 useEffect를 쓰면서 자주 만나는 에러 핸들링을 해보자. 문제 원인 및 해결 useEffect는 클래스 컴포넌트에서 componentDidMount()와 componentDidUpdate() 라이프 사이클 메소드 두 개를 합친 역할을 한다고 배웠다. 따라서, useEffect 함수의 두 번째 인자에 빈 배열을 넣거나, 업데이트 하고자 하는 state를 넣어주어 렌더링의 횟수를 제한해주어야 하는데, 위 에러는 해당 state가 빠졌거나, 잘못 들어갔거나 해서 나오는 에러이다. 문제의 원인이 된 코드는 App.js와 Snackbar.js 컴포넌트에서였다. App.js에서는 Redux를 통해 반응형 컴포넌트 빌딩을 위해 size를 store에 등록해주기 위해 리팩토링을 하다가 생겼다. func..

시작하며 1편에서 다루었던 글에서는 redux-actions를 사용하는데, redux와 react-redux 모듈로도 충분하지 않을까 싶었다. 패턴 역시 좀 더 직관적으로 이해할 수 있으면 좋을 것 같아서 즐겨보는 유튜버의 Redux 강의를 한 번 들어봤다. 디렉토리 구성 store └modules └ index.js └ test.js └config.js └index.js 기존에는 위 같은 구성이었다. 이를 간단하게 actions와 reducers로 구분했다. 기본 설정 1 step reducer 생성 reducers 폴더 내에 counter와 로그인 여부를 확인하는 isLoggedIn reducer를 만들어보기로 한다. // src/reducers/counter.js const counterReduce..

시작하며 App이 점점 규모가 커지면서 상태 관리할 필요를 계속 느끼고 있었는데, 이번에야 도입했다. 필요한 모듈을 설치하고, 간단하게 +/- 버튼을 통해 카운트되는 기능을 만들어보면서 Redux에 접근해봤다. 필요 모듈 다운로드 yarn add react-redux redux redux-actions yarn을 통해 위 dependencies를 받았다. 폴더 구성 최종 폴더 구성은 사진처럼 되어 있다. src/store 내 config.js, index.js 파일을 가지며, modules 폴더를 따로 두었다. store 1. config.js 파일 생성 해당 파일은 여러 store를 모아 외부 컴포넌트와 연결하기 위함이다. store는 state를 관리하는 일종의 보관처. // src/config.js..

문제 상황 버튼을 클릭하면 바로 위의 문단이 fade out 되면서 사라져야 하는데, 해당 부분을 드래그하면 draggable 하고, 복사까지 된다. 코드 .fade { animation: fade ease 1s forwards; } @keyframes fade { from { opacity: 1; } to { opacity: 0; } } 해결 방법 위 코드를 아래처럼 바꾼다. @keyframes fade { from { opacity: 1; pointer-events: all; } to { opacity: 0; pointer-events: none; } } 더 이상 Clickable 하지 않다. pointer-events CSS 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 ..

속성을 이용한 CSS 셀렉터는 거의 사용하지 않아서 잊어버렸는데, CSS Diner라는 귀여운 게임을 찾은 김에 Attribute만을 통해 셀렉트하는 방법을 정리해두면 좋을 것 같았다. A[attribute] a[href] input[disabled] input[type='checkbox'] 태그 네임, 클래스 네임, ID 등등 다른 CSS 선택자와 Attribute Selector를 함께 쓰는 방식이다. 위 예시는 href='anything'인 a 태그를 선택하거나 disabled 속성을 가진 input을 선택한다. [Attribute] [value] { .. } value라는 attribute를 가진 요소를 선택한다. ^, $, * [attribute^='value'] .toy[category^='S..