Vite (비트) 란 간략하게 말하자면, '진짜 빠른 번들링 툴'실무 초반엔 Vue-CLI를 활용한 빌드를 진행했었다. (Vite의 필요성을 크게 느끼지 못했기 때문)그런데 프로젝트 규모가 커지면서, 빌드하는데 시간이 오래걸리기 시작했다.프론트엔드 개발은 코드를 계속 갱신하면서 테스트를 진행하기 때문에, 핫로딩/빌딩이 빠르게 이뤄져야 개발효율성이 높아진다. 그래서 Vue-CLI에서 Vite로 전환을 하게 되었고, 빠른 빌드 속도로 업무 효율성이 크게 증가했다.Vite는 비록, Vue.js의 창시자인 Evan You가 Vue3과 함께 개발한 번들링 툴이긴 하지만, Vue에만 국한되진 않는다.그래서 React 프로젝트에도 요즘 많이 사용된다고 들었다.💎 Vite 템플릿으로 프로젝트 생성하는 방법1. cre..

요즘 채용 시장을 쭉 훑어보니 Vue보다 React의 비중이 훨씬 높은 것 같다.기존에 Vue 기반 프로젝트를 찐하게 해오던 상황이라, React로도 경험을 쌓아봐야할 것 같아 제대로 공부해보기로 했다.이미 SPA 프레임워크에 대한 이해는 어느 정도 되어있는 상황이라, 빨리 적응할 수 있지 않을까?React와 React Native두개는 용도가 다르기 때문에, 프로젝트의 목적에 따라 어떤 것을 사용할지 결정해야 한다. 항목  React  React Native 플랫폼  웹 (PC/모바일 웹 브라우저) iOS, Android (모바일 앱) 언어  HTML, CSS (JSX), JavaScript/TS JavaScript/TS (네이티브 컴포넌트) 렌더링 방식 DOM (HTML) 렌더링 네..

🎈 Lazy Loading을 구현해본 방법Vue 기반 프로젝트를 진행하면서, Lazy Loading을 적용해볼 기회가 있었다.두 가지 방법을 적용해봤는데,  1. 백엔드에 전체 데이터를 요청해서, 프론트 단에서 Chunk로 잘라서 보여주기2. 백엔드에 부분적으로 다음 데이터를 요청해와서 보여주기 데이터가 1000~2000개 정도였을 때는 1번도 무리 없이 동작 했었다. 그런데 4000~5000개 이상 넘어가기 시작하니까, 백엔드에서 정보를 불러오는데도 오래걸리고 (특히 네트워크가 느린 곳에서는 더더욱), 프론트 단에서 후처리하는데도 메모리를 많이 잡아먹기 시작했다.그래서 두번째 방법을 적용하기로 결정! 두번째 방법에는 구현 방법이 여러가지가 있는데,처음에는 'Scroll 이벤트'를 발생시켜서 전체 창 ..

React 프로젝트 환경 구축 후, 로그인 페이지 만드는 과정에서 마주친 오류 해결 일기:) 우와! 난리가 났다! Too many re-renders. React limits the number of renders to prevent an infinite loop. 영어를 그대로 해석하면 알 수 있듯, 리렌더링이 무한으로 계속 돌면서 발생하다보니 React에서 터뜨려버린 에러이다. 에러 원인 setState를 잘못 사용했다. App.js 컴포넌트에서 조건문이나, 이벤트 핸들러 없이 바로 냅다 그냥 호출해버렸더니... 컴포넌트가 렌더링될 때마다 state가 set 되면서 무한 루프에 빠져버린 것... 에러 해결 useEffect안에 setState를 넣어주면, 렌더링 후 한번 실행이 된다! 짜잔! 이렇게 ..

React 프로젝트를 생성해서 실행시키는 과정에서 이런 오류가 났다 Error: error:0308010C:digital envelope routines::unsupported 구글링해보니 node 버전이 너무 높아서 그렇다는 이야기가 있었다 그래서 다운그레이드도 해보고, 아예 node와 npm을 삭제도 해보고,, Program Files 들어가서 관련 폴더 삭제도 해봤는데 해결이 안됨 ㅠ 그러다 https://naraewool.tistory.com/350 https://www.freecodecamp.org/news/error-error-0308010c-digital-envelope-routines-unsupported-node-error-solved/ 이 두 글을 보고 해결했다! 에러 원인 react-..