Next.js 강의를 수강하던 도중 다음과 같은 에러가 발생했습니다. Error: Route "/movies/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at MovieDetail (src/app/(movies)/movies/[id]/page.tsx:6:10)  강의 내용과 버전차이가 있어서 발생한 문제로 파악되어 공식문서를 참고했습니다.주어진 오류는 params를 비동기적으로 처리해야 한다는 것을 의미합니다.  경고 발생 원인코드 내에서 동적 렌더링을 사용하는 API에 접근할 때 발생합니다.이는..

lighthouse는 웹/앱 브라우저의 성능과 품질을 측정시키는 데 사용할 수 있는 오픈소스 툴이다.개발자도구(F12)를 열고, 상단 메뉴에서 Lighthouse를 선택한 후 보고서를 생성하면 된다.자동으로 성능, 접근성, SEO 등에 대한 분석을 알아서 시작하고 분석 결과를 확인 할수 있다.  Lighthouse - Chrome 웹 스토어Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.chromewebstore.google.com  개발 초기설정 연습을 하던 레포에서 한 번 실험 삼아 돌려봤는데 생각보다 성능이 좋지 않았다.  딱히 코드를 많..

최근 플젝할 일이 많아졌는데 프론트엔드 레포 초기 구성은 보통 나의 몫이다.프로젝트마다 레포 설정을 이것저것 건드리는 것은 매우 귀찮은 일이다...ㅎ 따라서 여러 프로젝트에서 활용할 수 있을만한 default config Repo를 만들면 어떨까하는 생각이 들었다.그래서 먼저 FE 레포를 초기 구성해보고, 이와 함께 tailwind css를 도입해보기로 했다.아직 한 번도 사용해본적이 없어서 연습할 겸 공부해보기로~😁  React & Vite 공식문서를 통해 쉽게 설정하는 방법을 확인할 수 있다.npm create vite@latestnpm create vite@latest my-react-app -- --template reactTailwindCSS + PostCSS & AutoFixer에 대해 알아..

타입스크립트란?  자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 오픈소스 언어이다.자바스크립트의 확장판이라고 해도 무방하다.  타입스크립트를 왜 써야할까?리액트를 공부하면서 자바스크립트를 많이 사용해보았다. 전공 공부를 하며 Python, C++, JAVA와 같은 언어들을 배워보았는데, 비교적 입문하기 쉬운 편에 속한다고 생각한다.(물론 깊이 들어가면 들어갈수록 모든 언어가 어렵다...🥹)  Node.js는 자바스크립트의 런타임 환경으로, 이를 이용해 자바스크립트 코드를 읽어서 실행할 수 있다.웹브라우저 뿐만 아니라 어디서든 자바스크립트를 통해 구동이 가능해졌다.지금도 웹서버나 앱, 데스크탑 앱 등을 만드는데 활용되고 있다. 그런데 복잡한 상황이나 대규모 프로그램에서 발생하는 ..

스토리북이란?최근 스토리북(Storybook)에 대해 알게되었다.스토리북이란 FE 개발에서 필수적인 컴포넌트를 문서화하고 시각화할 수 있는 도구이다.props와 onClick 등 다양한 매개변수에 대한 테스트도 가능하며, 페이지 자체도 구동할 수 있다.또 문서화된 스토리북 자체를 배포해서 협업에 유용하게 사용할 수 있다! 물론 정석적으로는 스토리북과 함께 개발하는 것이 베스트겠지만공부를 위해 현재 진행하고 있는 프로젝트에 스토리북을 임시로 설치해봤다.이번 연습을 통해 스토리북을 익혀서 다음 프로젝트에 적용할 수 있었으면 좋겠다.  설치 방법npx storybook@latest init 실행방법npm run storybook 실행 후 localhost 6006번에 접속하면 된다.다음과 같은 화면이 뜬다면 ..