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-..

이 글을 작성하는 이유내가 했던 프로젝트들 중에 Next.js를 사용한 사이트가 2개 있다. 내 포트폴리오를 수정하다가 프로젝트에 왜 이러한 프레임워크나 라이브러리를 왜 사용하게 됐는지 선택한 것들의 장점을 살려 이유를 작성하려했는데,  왜 Next.js를 사용해야하는 것인가? 에 대해 내가 아는 답변은 SSR 밖에 떠오르지 않았다. 이러니 난 내가 왜 Next.js를 사용했는지를 작성하는데 어려움을 겪고 있던 것이다. 그래서 이번 기회에 Next.js를 사용하는 이유와 어떻게 하면 next.js를 잘 사용했다고 할 수 있을지 낱낱이 파헤치겠다.  1. 브라우저 렌더링 방식 먼저 React와 Next.js의 가장 큰 차이점이라 하면 Next.js를 사용하는 사람들은 거의 알듯이 브라우저 렌더링 방식에 있..

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 + , ] 를 눌러 들어갈 수 있다.설정으로 들어간 후에 검색창에 ..

오늘은 스토리북에 대해 공부해보려한다. 스토리북에 대한 강의를 몇 개 듣고, 이번 프로젝트에서 한 번 사용해보았다. 하지만 스토리북을 왜 사용하는지, 구체적으로 어떤 식으로 사용하는 것이 효율적인지 등 간단한 강의만 듣기에는 모르는 것이 많았다.모르는 상태로 바로 진행했더니 어떤 식으로 작성해야하는 것인지도 잘 몰라서 애를 많이 먹었다.그래서 한 번 관련 공식문서를 훑어보았다.     🤷🏽  스토리북의 사용법에 대해 간단하게 정리해보자공식문서에 따르면 스토리북은 UI 구성 요소와 페이지를 격리하여 빌드하기 위해 만들어졌다.따라서 전체 앱을 렌더링할 필요 없이 하나의 컴포넌트의 상태와, 다양한 엣지 케이스들을 눈으로 확인하면서 개발하고, 다른 사람에게 공유도 가능하다.  스토리북의 몇 가지 개념에 대해..

자기 소개 웹페이지 중에서 프로필 페이지 구현을 모두 마치고 프로젝트 페이지를 구현 중에 있다. 프로젝트 페이지의 경우 한 프로젝트 당 들어가는 이미지가 여러장 되기 때문에 프로젝트 페이지 하나에 프로젝트 하나의 이미지들만 import 해도 기본 6장은 되었다. 이를 하나하나 import 하려니 soso 귀찮,,, 어떻게 하면 하나의 파일에 있는 이미지를 모두 가져올 수 있을까? 바로 구글링을 해보았다! 그 결과, 내가 인터넷 검색을 통해 찾아보았던 방법은 두✌️개이다. 1. 이미지를 import 하는 js 파일을 따로 생성 후에 거기서 컴포넌트처럼 import 해온다. import project1_1 from "../assets/images/project1_results/project1_1.png"; ..

부트캠프에서 첫 번째 프로젝트가 끝났다. 👏👏👏 끝난 후, 이제 곧 타입 스크립트를 들어갈 예정인데, '타입스크립트를 배우다보면 React를 까먹지 않을까?' 생각이 들었다. 그래서 나는 개인프로젝트를 시작해보기로 목표를 잡았다. 왜냐하면! 현재까지 쌓아온 React 관련 지식을 더욱 견고하게 유지하기 위해 다양한 강의 수강과 팀 프로젝트 경험을 통해 나만의 실력을 객관적으로 평가하고, 개선할 기회를 만들어내기 위해 🕵️ 주제 개인 프로젝트를 하기로 마음을 먹었지만, 당장에 어떤 주제로 프로젝트를 시작해야할지 막막했다. 어렵지 않은 가벼운 주제에 대해서 하고 싶었다. 한참 고민하면서 나는 내 팀프로젝트에 대해서 노션에 정리를 하고 있었는데, 그 때 문득 든 생각이 나에 대해 소개하는 페이지를 만들어보면 ..

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