몽땅뚝딱 개발자

에러 태그에 autofocus 속성을 적용하였으나 마운트 될 때 focus가 되지 않는 현상 autofocus processing was blocked because a document already has a focused element 원인 기존 창 위에 뜬 모달이라 이미 focus가 잡힌 엘리먼트가 있어서 생긴 에러이다. onMount() 할 때 해당 엘리먼트의 ref에 focus() 이벤트를 걸어주었다. onMounted(() => { nextTick(() => { if (InputRef.value) { InputRef.value.focus() } }) }) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

처음 한 것 치곤~~ 잘했자나~~ 하지만 앞으로 개선해야 할 것들은 꽤 많아 여기에 기록해두고 하나하나 추가하려고 한다. [✓] css 개선 - 다른 사람들은 어떤 구조를 사용하고 있는지 서치 - GlobalStyles를 어떻게 더 효율적으로 입력할 수 있나, 그리고 분리할 수 있는지 고민고민 [✓] 폰트 최적화 [✓] API - 이것도 다른 사람들은 구조를 어떻게 가져가는지 봐야 함 [✓] Redux - 공부하즈아...! ^_^ [✓] 다크모드 [✓] Jest [✓] 목업 API 추가 [✓] 경로 설정

예전에 prettier랑 eslint 설정하다가 막힌 적이 있는데 당시 그냥 하지말아야지! 하고 넘어갔었고 결국 같은 오류에 직면하고야 마는데.... 역시 그때 그때 해결해두어야 한다. (이 깨달음만 54875456465번째) 출처는 모두 여기!!!!!!!! 감사합니다. React ESLint + Prettier 적용하기 React ESLint + Prettier 적용하기 React에 ESLint와 Prettier를 적용하는 방법에 대해 알아보겠습니다. 1. ESLint 설치 ESLint는 JavaScript 코드를 분석하여 문법 검사를 지원하고 런타임 이전에 오류를 찾아주.. freestrokes.tistory.com ◽ prettier npm i --save-dev --save-exact pretti..

장대하지 않은 클론코딩의 시작...! 두두둥.. (나의 목적은 단순히 리액트를 익히는 것이다.) 나름 일정관리를 위해 노션도 만들고, 회의도 간략히 했다. 너무 심각하게 일정을 짜면 오히려 안 할 것 같아서 우선 러프하게 가되 시작부터 해보자고 했다. 친구는 모델링을 시작했고 나는 프론트엔드 프로젝트 세팅을 시작했다. 그리고 친구는 다 끝났다. 너무 멋있다. 근데 나는 안 끝남... 프론트 개발은 내가 다 주도하고 결정해야했다. (왕부담ㅠ) 리액트로 개발한다는 것만으로도 쉽지 않을 것 같아서 타입스크립트까지 하면 더 힘겨워지는건 아닌지 고민했다. 근데 주변에서 그냥 타입스크립트까지 적용하라고 해서 그렇게 했다. 어차피 고통스러운건 나,, 그래도 배우는 사람도 나,, 화이팅,, ◽ react + types..

◽ setProperty() // 적용되지 않는다. element.style.height = "240px !important" // setProperty()를 사용하여 적용한다. element.style.setProperty('height', '240px', 'important') 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ lazy import 함수형으로 사용한다. // before import Detail from './routes/Detail.js' // after import {lazy, Suspense, useEffect, useState} from 'react' const Detail = lazy( () => import('./routes/Detail.js') ) 이때 함수형으로 선언한 컴포넌트에 지연이 발생할 수 있는데, 로 감싸주면 로딩도 구현할 수 있다. 필요하다면 자체를 감싸도 된다. ◽ memo 컴포넌트가 재랜더링이 되면 안에있는 자식컴포넌트도 함께 재렌더링되어 성능이 저하될 수 있다. 그래서 꼭 필요한 경우, 특정 상황에만 재렌더링 될 수 있도록 하는 것이 memo()이며 props가 변할 때만 재렌..

// 방법 1. if문 사용 function setLocalStorage(id) { const beforeArr = JSON.parse(localStorage.getItem('watchArr')) if(!(resultArr.indexOf(id) > -1)) { resultArr.push(id) } localStorage.setItem('watchArr', JSON.stringify(resultArr)) } // 방법 2. Set 사용 function setLocalStorageUseSet(id) { let resultArr = JSON.parse(localStorage.getItem('watchArr')) resultArr.push(id) resultArr = new Set(resultArr) // Se..

간단한 페이지를 하나 구현해보려고 한 것 뿐인데 장벽이 많았다. 주로 scope로 주고있는 vue.js만 사용하다보니 리액트는 도대체 css를 어떻게 주는 것인지 알 수가 없었다. 그리고 scss를 어떻게 적용할 것인가에 대한 것도! 찾아본 방법들은 아래와 같다. 1. styled component 2. {모듈명}.module.css 3. css를 전역으로 선언 여기서 나는 2번 방법을 먼저 사용해보기로 했다. 📄 WatchedItem.module.css "{적용할 모듈명}.module.css" 형식으로 작성해준다. modules로 작성하지않도록 주의! .watched__item { color: red; } 📄 WatchedItem.js className에 "{import 해온 이름.클래스 이름}"을 넣..

보호되어 있는 글입니다.

아래 옵션을 적용하면 맨 첫번째 축은 start로, 맨 끝 축은 end로 적용되어 레이블이 모두 차트내부로 들어온다. align: 'inner', 이 옵션을 찾기 위해 chart.js github에서 사용자들이 요청하는 부분의 히스토리를 따라 가서 찾아냈다. 하지만... 글로 남기려고 적다보니 혹시 몰라 공식문서를 다시 확인하니 추가되어 있었다 ^_^ (3.9.1 버전기준) The tick alignment along the axis. Can be 'start', 'center', 'end', or 'inner'. inner alignment means align start for first tick and end for the last tick of horizontal axis 좋은 경험이었다..