혼자 적어보는 노트

nextjs에서 component selecteor사용 시 발생하는 에러 Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform. const Parent = styled.div` ${Children} { font-size: 20px; } `; ✅ 해결 next.config.js compiler: { emotion: true, },

nextjs + ts 환경에서 storybook을 설치하고 yarn storybook을 했는데 webpack building 99% 이후 아래와 같은 에러가 발생했다 ModuleNotFoundError: Module not found: Error: Can't resolve 내 폴더 경로/node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js doesn't exist 에러 메세지의 경로를 보니 module 안에서 문제가 있는 것 같았는데 오랜시간 헤매다 찾은 글로 임시로 해결했다. https://stackoverflow.com/questions/74537078/storybook-cant-resolve-generated-stori..

폴더명을 select-> Select로 변경하고 다른 추가작업을 하고 커밋을 했는데 git에서 대소문자를 구분을 못해서 변경이 적용이 안되었다. git config core.ignorecase false 위와 같이 git설정을 하고나니 대소문자 구분은 하게 되었는데 git설정을 변경하고 develop에 적용하기 전에 만들어야 했던 브랜치들이 있었고 그 브랜치를 돌아다니던 과정에서 아래와 같은에러가 발생했다. The following untracked working tree files would be overwritten by checkout 해결 방법 1. untracked file 제거 git clean -fd --dry-run 파일을 인식을 못하는건지 위의 명령어로 해결이 안되어서 다른 방법을 알아보..

webpack-dev-server를 사용할 때 index.html에서 태그로 js파일을 불러올 경우 2번 실행된다. 왜?? 빌드 시 HtmlWebpackPlugin이 번들링된 js파일을 index.html 의 body 태그 아래에 불러오기 때문에 html 내부에 작성된 script 태그가 있다면 2번 실행이 되는 것이다. html 안에 script 태그를 지워주면 해결이 되지만 script 태그가 필요하다면 injext 옵션을 변경하여 해결할 수 있다. plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", inject: false }) ], 참고 블로그 : https://tesseractjh.tistory.com/181

forwardRef를 사용할때 생기는 display name에러 ✅ 해결 display name을 적어주면 된다.

모바일 이미지 업로드 시 이미지 회전 현상 프로젝트를 리팩토링하고 확인하는 과정에서 핸드폰으로 촬영한 이미지를 업로드할 때 회전되어서 보여지는 현상이 발생했다. 사용하는 핸드폰은 아이폰이고 원본(실제크기) 그대로 올릴 경우 제대로 나타나지만 업로드 할 때 아이폰 기능에서 파일 사이즈를 줄일 경우 회전이된다. 왜 사진이 회전될까? 휴대폰을 세워서 정상적인 각도에서 사진을 찍으면 정상적으로 나타나지만 핸드폰의 각도를 기울여서 찍은 경우 틀어져서 저장이 되고 이 회전 정보를 기억한다고 한다. 이 회전된 정보는 EXIF라는 메타정보의 orientation 에 저장이 되는데 핸드폰의 경우 이 정보를 읽어서 정상적으로 갤러리에 보여주지만 브라우저는 이 orientation정보를 읽지 못한다고 한다,, 해결을 위해 ..

npm i 명령어를 통해 무언가를 설치할 때 발생했었던 에러이다. 의존성 트리에 충돌이 났다는 내용인데 대충 에러에 나타난 글을 읽어보니 버전을 맞춰야 하는 듯 했다. 찾아보니 이때 사용했던 craco는 공식적으로 CRA 4까지만 지원하고 있어서 CRA안의 react-script와 craco와 의존성 충돌이 난건가 싶었다. --force 명령어를 통해서 처리했다. 검색해보니 다양한데서 이러한 에러가 나는 것 같아서 몇 번 더 만나게 되면 포스팅을 좀 더 수정해야겠다. 참고로 중간에 npm i --force를 입력했을 때 아래와 같은 내용이 뜨고 진행이 멈추었었는데 idealTree: timing idealTree Completed in 3440ms 열려있는 터미널을 종료하고 다시 실행시키니 해결되었다. ..

error: failed to push some refs to 검색을 해보니 다양한 상황에서 발생이 되었었고 보통 로컬과 원격의 저장소의 상태가 다를 때 발생 되는 문제였다. 내가 접한 상황: 로컬에서 기존에 작업되어있는 파일들을 복사후 새 폴더를 생성하여 붙여넣은 후 github에서 레포지토리를 생성하고 연결하려는 과정에서 발생했다. git init git remote add origin 깃헙주소 git branch -M main git push -u origin main // *이 명령어 시 에러 발생 error: failed to push some refs to 'github repository 주소' ✅ 해결 git add . git commit -m "커밋 메세지 작성" git push -u o..