웹 사이트에서 로고를 클릭하면 새로고침되며 이미지 박스가 먼저 보임 > 1초 후 로고 로딩되는 문제가 발생했다. 큰 문제는 아니지만, 사용자에게 신뢰를 저하시킬 수 있는 부분이라 판단되어 수정을 진행하였다. 깜빡임 원인Image 컴포넌트를 사용하였고, Image 컴포넌트가 blob을 비동기로 가져오는 동안 blobSrc 가 빈 문자열이라 깜빡임이 발생하였다. Image 와 img 태그의 차이Image 컴포넌트인증 토큰을 헤더에 포함해 fetch 로 이미지를 가져옴응답을 Blob 으로 변환URL.createObjectURL() 로 메모리 URL 생성URL 을 img 태그의 src 로 이용 * Blob (Binary Large Object) 이란?Blob 은 데이터 덩어리를 브라우저/JS 에서 ..
프로젝트를 진행하다 보면 어느 순간 코드가 복잡해지고, 같은 로직이 여러 곳에 중복되어 있는 것을 발견할 수 있다. 이번에 프로젝트를 진행하며 상태 코드 관리 로직을 리팩토링한 경험을 기록하고자 한다. 처음에는 조건에 따라 파트를 보여주는 해당 요건을 개발하기 위해, 각 부분에 상태 값을 하드코딩하여 조건을 붙였다. 근데, 1차 개발했던 것을 수정하려고 하니 꽤나 쉽지 않았다. 나야 내가 만든 코드지만, 운영할 사람이 이 코드를 파악하는건 너무 어려울 것 같았다. 또한 코드 값이 변경되거나 코드가 추가되면 관리하기 쉽지 않을 것 같았다. // Before: 여러 컴포넌트에 분산된 하드코딩if (code === 'AAA' || code === 'BBB' || code === 'CCC') { // ...}..
회사에서 잘못된 useEffect 사용으로 인해 화면에 무한루프가 걸리는 문제가 발생했다.내가 원인도 파악을 못해서, 과장님이 의심되는 부분 확인해주셨다. 문제는 새로고침 후, 팝업 렌더링에서 useEffect 를 사용하는게 문제였다. useEffect 를 사용하며 새로고침이 발생해, 로그인 인증을 재실행하고, 인증 재실행 후 팝업 렌더링이 재실행되는 무한루프에 빠진 것이다. 어렴풋이 사용하고 있던 useState 와 useEffect 를 정리하고자 한다. useStateuseState 는 컴포넌트의 상태 (데이터) 를 관리하기 위해 사용한다.useState는 컴포넌트가 기억해야 할 값 (상태) 를 만들고 관리할 수 있게 해주는 Hook이다.컴포넌트 내에서 변경될 수 있는 데이터를 관리한다.useSt..
이미 존재하는 리액트 프로젝트를 실행했는데 아래와 같이 에러 메세지가 발생했다. Cannot find module 'react' or its corresponding type declarations. 해당 에러는 React 가 설치되지 않거나, 인식되지 않아 발생하는 문제이다. 아래의 과정을 통해 해결해보겠다. NodeJs 설치1. nodeJs 설치 여부 확인윈도우의 경우 windows + R > cmd 입력 > 확인으로 명령 프롬포트 실행.맥의 경우 https://skylarcoding.tistory.com/348 게시글에서 참고하면 된다.node -v 설치되어 있다면 버전 표시v18.17.1설치되지 않은 경우 'node'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아..
error when starting dev server:Error: EACCES: permission denied, .. 관련 오류가 발생했다. nodejs 버전 때문에 이거저거 시도하면서 파일의 권한이 변경된 것으로 확인된다.방법은 간단하게, 문제가 발생한 부분으로 가서 아래 명령어 입력해주면 된다.sudo chown -R (사용자명) node_modules 그러면 정상적으로 잘 실행되는 것을 확인할 수 있다.
