minTech

이번 동아리 프로젝트를 진행하면서,, ✈️  최적화 여행을 하게 된 계기나의 PR을 올리기 전에 항상 lint 검사와 "npm run build"를 통해 빌드를 해서 사전에 github actions에서 잡힐 오류들을 미리 검사하곤 하였다. 하지만 어느샌가부터 빌드 시 아래와 같은 경고 문구가 발생했다. 더보기(!) Some chunks are larger than 500 kB after minification. Consider:- Using dynamic import() to code-split the application- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-..

Vite를 사용하기 전에는,,브라우저에서 ES Modules를 지원하기 전까지는 JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다. 즉, Javascript 모듈 기능을 브라우저 또는 Javascript 엔진 자체에서 기본적으로 지원하지 못했다.  따라서 require.js, commonJS, AMD 와 같은 외부 라이브러리나 Webpack, Rollup, Percel과 같은 번들러(Bundler)에 의존해야했다. 번들링이란 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 작업을 말한다.번들러를 통해 여러 개의 모듈 파일을 하나로 번들링하여 브라우저에서 실행할 수 있는 하나의 파일로 만들어준다. 📚 CommonJS 와 ES Modules두 개는 모두 JS 모듈을..

prettier는 새로고침(cmd + s) 시에 코드를 올바르게 정렬해준다.  하지만 오랜만에 React를 사용하려니 갑자기 Prettier가 작동되지 않았다. 이럴 경우 어떤 것을 확인해보면 좋을까? 다음에도 까먹지 않게 간단히 정리해보았다. 1. prettier 설치 유무를 확인해보자!먼저 Prettier 포매터를 사용하려면 일단 vsCode의 확장탭을 열어 해당 Formatter가 설치되어있는지 확인해야한다. 검색에서 Prettier를 치고 나온 결과에서 아래와 같이 뜬다면 설치가 되어있다는 것이다. 설치가 안되어있으면 설치를 해준다.   2. prettier 설치 유무를 확인해보자!Vs Code 에서 설정은 맥북의 경우 [ cmd + , ] 를 눌러 들어갈 수 있다.설정으로 들어간 후에 검색창에 ..

이번 프로젝트에서 react의 color picker를 사용하는데 색상을 선택하는 부분의 사이즈 조절이 가능한지 알아보기 위해 여러 라이브러리를 찾아보면서 정리한 글이다. 내가 생각하기에는 "컬러 피커"의 기능적인 측면에서는 사용자가 여러 색깔 코드 중에 원하는 색상을 선택하는 기능만 있으면 되기 때문에, 이러한 관점에서 보았을 때 많은 라이브러리가 비슷한 기능을 제공할 것 같았다.  그렇기 때문에 먼저, 컬러 피커 관련 라이브러리들을 모아 그 사이에서 사용 수와 최근 업데이트 날짜를 비교해보고, 어떤 라이브러리가 대표적인 라이브러리인지 먼저 보았고, 그 후에 유저가 원하는 커스터마이제이션이 얼마나 가능한지를 보았다.내가 조사한 관련 라이브러리들은 다음과 같았다.react-colorreact-color-..

프로젝트를 진행하면서 본격적인 페이지 구현에 들어가기에 앞서 모달창 구현을 맡았다.전체적인 모달창은 react portal을 이용해 만들었다.  처음에 프로젝트를 진행하기 전까지 react portal을 몰랐고, 사용해본 적도 없었는데 이를 사용해서 모달창을 만들면 어떻냐는 팀원분의 의견에 공부해볼겸 정면돌파 해보았다.  그럼 내가 지금까지 이해한 react portal에 대해서 정리해보겠다.  🕵️ React Portal "포탈"이라는 단어를 생각해보면 말 그대로 순간이동의 느낌이 든다. 원하는 목적지를 선택하면, 그 목적지로 바로 이동할 수 있다.   react potal를 사용하면 이러한 간단한 원리를 통해 모달창을 표시할 수 있다. 먼저 내가 필요한 모달 컴포넌트를 생성하고, 모달이 화면에 표시..

해당 에러가 발생했을 경우에는 문제 원인 react-scripts의 버전이 5 버전 아래여서 발생한 에러이다. 문제 해결 react-scripts를 삭제했다가 재설치 npm uninstall react-scripts npm install react-scripts 참고 자료 https://naraewool.tistory.com/350

이틀 정도 걸려서 내 개인 프로젝트의 stack 페이지에 캐서셀을 구현해보았다. 🤷‍♂️ 캐러셀(Carousel) ? 사용자가 화면에서 이미지를 옆으로 넘길 수 있도록 swipe 기능을 제공한다. 사용자는 손가락을 사용하여 터치 슬라이드하거나 마우스로 드래그하여 이미지를 넘길 수 있다. 이를 이용해 한 영역에서 하나 이상의 이미지를 볼 수 있다. 캐러셀이라는 단어를 몰라서 구글링도 처음에 못하고, 이 부분에 대해서 어떻게 구현해야할지 참 막막했었다. 그래서 이미지 슬라이딩.. 이미지 넘기기,, 등 다양하게 검색창에 쳐보다가 알게된 것이 화살표나 dots 등을 이용해 여러 개의 이미지를 넘겨볼 수 있는 형태가 캐러셀 형태라는 것을 알게되었다. 그러던 중 추가적으로 알게된 것이 캐러셀을 구현하는 라이브러리가..

프로젝트를 하면서 내가 맡았던 기능 중에 하나가 바로 무한 스크롤이다. 개인적으로 intersection observer API를 이용하기 위해, 그것을 먼저 이해하고, 내가 원하는 기능으로 구현하려는 것이 어려워서 가장 오래걸렸던 기능이다,, 😭 그래도 어려웠던 만큼 성공했을 때 제일 짜릿했고, 이 과정을 글로 작성하면 나중에 꼭꼭 활용될 것이라는 확신에 바로 정리를 시작해본다. 🕵️‍♀️ Infinite Scroll(무한 스크롤) ? 무한 스크롤이란 사용자가 스크롤 동작을 할 때마다 새로운 데이터를 동작으로 로드하여 컨텐츠를 보여주는 방식을 얘기한다. 기존의 페이지를 새로고침하거나, 별도의 페이지 버튼을 누르지 않고도 사용자가 끊임없이 컨텐츠를 스크롤 하여 볼 수 있게 해주는 기술이다. 특히 무한 스..