📌시작하며 이 글은 아래와 같이 이어집니다. Next.js 13의 특징과 변화(1) Next.js 13의 특징과 변화(2) Next.js 13의 특징과 변화(3) Next.js 강의를 수강을 시작한지 어느정도 시간이 지났다. 내가 React를 공부하기 시작했을 때는 많은 프로젝트나 강의가 클래스형 컴포넌트에...

📌시작하며 웹 애플리케이션에서 성능 측정은 어떻게 할까? 이번 글에서는 내 나름대로 성능지표와 Lighthouse에 대해 정리하고, 활용해볼 수 있는 자료를 만들어보고자 한다. ✨Lighthouse 이 내용은 Chrome for Developers 를 참고해 작성한다. Lighthouse는 웹페이지 품질을 개선하기 위한 오픈소스 자동화 ...

📌시작하며 컴포넌트를 만들다 보면, onClick이나 onMouseOver등의 이벤트를 props로 받아와야 하는 일이 간혹 생기곤 한다. 물론 props로 내려줘서 작업해도 문제는 없지만, 이벤트가 하나 더 발생하면, 컴포넌트에 정의해둔 props의 interface안에 작성해줘야 하는 번거로움이 생긴다. 그래서 미리 정의할 때 타입을 확장해서 ...

📌시작하며 연말에 가볍게 진행한 프로젝트에서 Jest를 간단히 적용해보았다. 역시 처음 도입하는 것이다 보니 시간도 많이 소요되고 삐그덕 거리기는 했지만 그래서 그런지, PASS가 뜰 때마다 너무 기뻐서 다들 봐달라고 하고 싶었다… 🤣 어쨌든, 이번 포스팅에서는 프로젝트를 진행하면서 새롭게 배운 Jest의 내용을 정리해보면서 복습해보려고 한다. ...

개인 프로젝트를 진행하면서 자주사용했던 Node.js 모듈을 한 번에 정리해보고자 한다.🙌 📌Node.js Node.js는 개발자가 웹 브라우저 외부에서 JavaScript 코드를 실행할 수 있는 오픈 소스 크로스 플랫폼 JavaScript 런타임 환경이다. 우리가 Javascript를 실행하기 위해서는 웹 브라우저가 반드시 필요했으나, Node...

📌시작하며 간단한 토이 프로젝트를 진행하고 있다! 사실 코드만 간단히 연습용으로 써보려고 했는데 역시 뭐든 각이 잡혀야(?) 더 재밌는 법이라…!😌 프로젝트는 포켓몬API와 GraphQL을 활용하는 건데 이 데이터를 어떻게 재밌게 활용해볼까 하다가, 어렸을 때 닌텐도로 포켓몬 게임을 했던 것을 떠올려봤다. 플레이어가 가지고 있는 스타팅 포켓몬은 ...

📌들어가며 Card Check라는 프로젝트를 진행하면서 가장 중요했고, 구현 시간이 다소 소요되었던 부분은 카드를 필터링 하는 부분이었다. 이 부분에 대해 질문이 들어온 적이 있는데 설명을 버벅여서 부끄러웠던 기억이 있어서..😅 리마인드 겸 주요 개념을 복습해보고자 한다. ✅전체 코드 아래는 이 로직의 전체 코드다! 이제 차근차근 살펴보자. /...