개발/버그일지7

• 

  React Bootstrap 디자인 적용안되는 이유 아래의 그림처럼 react-bootstrap의 form을 그대로 복붙했는데도 적용이 안 되었다. 이상해서 한참 찾아보니깐. App.js에 import를 해줘야지 적용이 되는거였다. 안될때는 당황해서 이것저것하지말고 공식문서를 처음부터 찬찬히 읽어보자... 개발/버그일지 2024. 4. 1.

• yarn dlx @yarnpkg/sdks vscode 후에 타입설정 안되는 현상 문제점 yarn dlx @yarnpkg/sdks vscode cmd + shift + p 누르고 typescirpt의 설정을 바꿔주어야하는데 설정을 바꾸는 옵션이 안 뜨는 문제가 있었다. 터미널을 보니깐 아래와 같은 에러가 뜨고있었다. YN0001: Error: Your application tried to access color-convert, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound. Required package: color-convert Required by: /Users/parksanghyun/.yarn/berry/cache/ansi-styles-npm-4.3.0-245.. 개발/버그일지 2024. 3. 18.

• 

  yarn berry 사용시 .yarn 내부파일이 저절로 삭제되는 현상 yarn, vite를 통해서 프로젝트를 생성하고 eslint, pretter를 사용하고 있는데 프로젝트 중간에 자꾸 .node_modules 폴더가 좀비처럼 재생성되고 .yarn에 있는 파일이 저절로 삭제되는 현상을 겼었다. 특히 .yarn 내부의 파일이 삭제되는지 모르게 PR을 해서 다른 팀원분들이 .yarn/eslint/package.json이 삭제되어서 eslint를 사용을 못 하셨다. (이후 빠르게 package.json을 만들어 PR을 올렸다.) 첫 번째 시도 https://meoweundi.tistory.com/39 .yarnrc.yml 파일에 yarn/nodeLinker가 'node-modules'로 설정되어 있었다면 node_modules이 자동으로 생성된다고 한다. 근데 프로젝트 내부에 .. 개발/버그일지 2024. 2. 8.

• 

  TS에서 svg파일을 가져오지 못 할 때 willa 클론코딩을 하고있는데 이상한 일이 발생하였다. import를 해도 안되고 img 태그를 사용하여도 파일을 제대로 불러오지 못 하는 상황이였다. img 폴더안에 분명히 cut.svg파일이 있는데 이 놈의 컴퓨터가 없다고 한다. (경로도 확실하다) img태그를 사용하면 인식을 못한다. const WorkSlide = () => { return ( ); }; 하지만 아래의 방식처럼 직접 svg을 넣으니깐 제대로 작동을한다. const WorkSlide = () => { return ( ); }; 원인 svg 파일은 자바스크립트가 아니므로 자바스크립트 모듈처럼 사용할 수 없다. 대신 http 요청을 사용하여 해당 파일을 로드해야 한다고 한다. 해결 src/custom.d.ts 파일 생성 declare.. 개발/버그일지 2023. 11. 16.

• 

  엘리먼트가 변경될 때 함수가 여러번 실행되는 버그 마우스를 올리면 +1씩 올라가는 함수인데 엘리먼트에서 엘리먼트로 변경될 때 함수가 3번 실행이 되는 버그가 발생하였다. 원인 const Home = () => { const [leftNum, setLeftNum] = useState(0); const leftPlusNum = () => { setLeftNum(leftNum + 1); }; return ( {leftNum % 4 === 3 ? ( ) : ( )} ); }; export default Home; onMouseEnter는 해당 박스에 커서를 올렸을 때 발동을 한다. leftNum % 4 === 3일 때 문제가 발생한다. 1. 커서를 올릴 때 leftPlusNum 함수 발동하여 leftNum % 4 -> 3이 된다. 2. 엘리먼트로 변경되면서 l.. 개발/버그일지 2023. 10. 19.

• 

  페이지 진입, 새로고침시 페이지 render안되는 현상 commentPage에 진입 시, 새로고침시에는 화면이 안 뜨는데 코드를 추가하면 화면이 뜨는 이상한 현상이 있었다. 원인 useEffect(() => { getBoards(Number(mindId)).then((res: BoardsType[]) => { setMindData(res); }); const filterMindData = mindData.filter((data) => { return data.boardId === Number(postId); }); setPostData(filterMindData[0]); // eslint-disable-next-line react-hooks/exhaustive-deps }, [refresh]); 이 코드 전체를 이해할 필요는 없고 api를 통해서 데이터를 가.. 개발/버그일지 2023. 10. 16.

• 

  input에서 한글자 입력시 focus 잃는 현상 프로젝트를 진행하다가 다른 팀원분이 리팩토링을 해주셨는데 그 후에 input에 한 글자씩 입력을 해도 focus가 없어지는 현상이 생겼다. (유지보수는 나의 것...) 블로그 를 찾아보니 글자를 입력할 때마다 rerender가 되기 때문에 이러한 현상이 생겼다. 코드를 보자. 문제 코드 const CommentInput = ({ userInfo, postData, setCommentFlip, inputToggleBind, isCommentBind, }: commentInputProps) => { const { state: inputToggle, Setter: setInputToggle } = inputToggleBind; const { state: isComment, Setter: setIsComment.. 개발/버그일지 2023. 10. 10.