웹 사이트에서 로고를 클릭하면 새로고침되며 이미지 박스가 먼저 보임 > 1초 후 로고 로딩되는 문제가 발생했다. 큰 문제는 아니지만, 사용자에게 신뢰를 저하시킬 수 있는 부분이라 판단되어 수정을 진행하였다. 깜빡임 원인Image 컴포넌트를 사용하였고, Image 컴포넌트가 blob을 비동기로 가져오는 동안 blobSrc 가 빈 문자열이라 깜빡임이 발생하였다. Image 와 img 태그의 차이Image 컴포넌트인증 토큰을 헤더에 포함해 fetch 로 이미지를 가져옴응답을 Blob 으로 변환URL.createObjectURL() 로 메모리 URL 생성URL 을 img 태그의 src 로 이용 * Blob (Binary Large Object) 이란?Blob 은 데이터 덩어리를 브라우저/JS 에서 ..
디바운싱(Debouncing) 이란?디바운싱은 연속적으로 발생하는 이벤트를 글로벌화해서 마지막 이벤트만 실행되도록 하는 기술이다. 사용자가 빠르게 연속해서 입력할 때, 모든 입력마다 함수를 실행하지 않고 마지막 입력 후 일정시간 대기 후에 함수를 실행하는 방식이다.디바운싱에서 전역 상태관리가 필요한 이유는, 모든 화면 위에서 관리해야 하기 때문이다. 나의 경우에 입력을 완료하고 직후에 실행되는 자동저장 기능을 구현하기 위해 디바운싱을 적용했다. 매 입력마다 저장을 실행하면 API 호출도 너무 많고, 저장되는 동안 새로운 저장이 실행될 수 있기 때문에 디바운싱이 필요하다 판단하였다. 디바운싱이 필요한 사례 1. 검색창 자동완성2. 입력값 유효성 검사3. 자동저장 다음은 검색어 입력의 디바운싱 예제이다..
프로젝트를 진행하다 보면 어느 순간 코드가 복잡해지고, 같은 로직이 여러 곳에 중복되어 있는 것을 발견할 수 있다. 이번에 프로젝트를 진행하며 상태 코드 관리 로직을 리팩토링한 경험을 기록하고자 한다. 처음에는 조건에 따라 파트를 보여주는 해당 요건을 개발하기 위해, 각 부분에 상태 값을 하드코딩하여 조건을 붙였다. 근데, 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 그러면 정상적으로 잘 실행되는 것을 확인할 수 있다.
자바스크립트에서 파일이 이미지 일때만 등록이 가능하도록 구현을 해보자. 리액트라 구조가 아래와 같은데, 자바스크립트 함수로 작성해도 구현되는 구조이다. 파일의 타입은 'image/png' 이러한 방식으로 나타난다. 뒤의 모든 타입을 등록하는 것보다 Image 만 잘라오는 것이 나을 것 같아 들어오는 파일의 확장자는 substring 해줬다. fileTypes 변수에 image 를 등록하여 비교해줬다. 이렇게 구현하면, 나중에 타입 추가하는 것도 쉬울 것 같다. 파일명의 . 뒷자리부터 가져와도 되지만, 나는 파일 타입을 가져오는 것으로 구현했다. const fileTypes = [ 'image' ] const handleFileChange = (event) => { ..
LocalStorage 에 입력한 user_id 를 서버 단의 유효시간과 동일하게 하기 위해 아래와 같은 형태로 아이디, 만료시간을 등록하였다.{"value":"sylee","expireTime":1735917224128} 이 방법의 단점은 해당 localStorage 의 데이터에 접근하기 위해서는 아래 함수를 통해 JSON.parse 후 값을 꺼내줘야 한다는 거다. const getUserId = (key) => { const item = localStorage.getItem(key); if (!item) return null; const {value, expireTime} = JSON.parse(item); return value;} LocalSt..
css 설정에서 변경해주면 된다. 위와 같이 적용하면 .endlist 에 올라가면 마우스 커서가 포인터로 변한다. Vue.js에서도 HTML처럼 CSS를 적용하면 된다. cursor: pointer; https://www.w3schools.com/cssref/pr_class_cursor.php CSS cursor property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com
