개발기록창고

처음 리액트 환경 세팅할 때 무작정 npx create-react-app 로 시작을 했었는데 오늘 프로젝트를 위해 환경 세팅을 알아보다가 Vite를 알게 되었다. CRA로 프로젝트를 생성할경우 기본 제공되는 react-scripts 번들러를 사용하게 되는데 이 라이브러리 내부에서 사용되는 것은 webpack인데 Vite보다 속도도 느리고 메모리도 많이 사용되어 무겁다. 리액트는 JSX로 작성되어 JS로 컴파일 하는 과정이 필요한데 CRA는 코드가 바뀌면 모든 코드를 새로 번들링하기 때문에 앱이 커질수록 HMR(Hot Module Reloading)이 느려진다. 하지만 Vite는 Esbuild를 이용하여 변경된 부분만 새로 번들링한다. (물론 처음에 전체적으로 한 번 번들링한다) 그렇게 때문에 이번 프로젝..

토이 프로젝트를 하다 commit이 꼬여서 깃허브에 의도했던 방향과 다른 커밋 기록이 올라갔다..ㅜㅜ 이를 해결하기 위해 구글링을 해보았고 해결하였다! 또 이러한 일이 생길 수 있기 때문에 기록해둔다 git branch 우선 깃허브 브랜치를 확인해준다 (어떤 브랜치를 사용해주는지 확인) git reset HEAD^ 가장 최근의 커밋 기록 제거하기 git reset --hard HEAD~2 가장 최근의 커밋 기록 2개 제거하기 (뒤에 숫자만 변경하여 특정 개수 정할 수 있다) git push -f origin 에 위에 확인해던 브랜치를 넣어주면 원격지 커밋이 갱신되어 제거하고자 한 깃허브 브랜치가 삭제됨을 알 수 있다!

바닐라js 클론코딩하다가 강의에서 getElementById가 있는데 불구하고 querySeletor로 사용을 해서 둘이 같은 기능을 구현하는데 차이점이 무엇일까라는 궁금점을 시작으로 찾아보았다. getElementById( ) element = document.getElementById(id); dom방식 id를 통해 element 반환 document에 구체적인 id의 element가 없다면 null반환 querySeletor( ) element = document.querySeletor(selector); css element 선택자로 쓰임(id, class 등의 다양한 선택자 사용 가) selector와 일치하는 document안의 첫번째 element 반환 (여러개 반환시 querySeletor..