프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다."이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다그렇다면 저는 왜 이 둘을 헷갈렸을까요?utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.커스텀 훅이..

React를 사용할 때 데이터를 시각화하는 데 도움이 되는 다양한 차트 라이브러리가 있습니다. 이번 블로그 글에서는 이러한 라이브러리들의 특징과 장단점, 그리고 어떤 상황에서 사용해야 할지에 대해 알아보겠습니다. + 따로 순위는 지정하지 않고 다룬 글임을 알립니다 1. React-chartjs React-chartjs는 Chart.js 라이브러리를 기반으로 한 React용 차트 라이브러리입니다. 가볍고 빠르며, 다양한 차트 종류를 제공하고 있습니다. 그러나 기능이나 커스터마이징 측면에서는 다른 라이브러리에 비해 제한적입니다. 장점: 가볍고 빠르며, 다양한 차트 제공 단점: 기능 및 커스터마이징이 제한적 사용 상황: 간단한 차트를 빠르게 구현하고 싶을 때 2. Victory Victory는 React와 R..

React 애니메이션 라이브러리는 웹 애플리케이션의 사용자 경험(UX)를 높이기 위해 많이 사용됩니다 1. Framer Motion 특징: Framer Motion은 사용하기 쉬운 API와 풍부한 기능을 제공하는 React 애니메이션 라이브러리입니다. 물리 기반 애니메이션, 제스처 제어, 컴포넌트 간 전환 등의 기능을 제공합니다. 장점: 사용하기 쉬운 API 높은 성능 물리 기반 애니메이션 및 제스처 제어 지원 풍부한 예제와 문서화 단점: 비교적 큰 파일 크기 사용해야 하는 경우: 사용하기 쉬운 API와 높은 성능이 필요한 경우, 물리 기반 애니메이션을 적용할 때 사용합니다. 2. React-Spring 특징: React-Spring은 물리 기반의 애니메이션을 구현할 수 있는 라이브러리입니다. 직관적인 ..

영상으로 보기 [Techeer Talk] About JavaScript ES6 자료 JavaScript ES6를 소개합니다 JavaScript의 역사 JavaScript ES6 소개 주요 문법 소개 문법별 예제 코드 활용법 및 실전 적용 JavaScript의 역사 JavaScript는 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나입니다 European Computer Manufactures Association + Script 유럽 컴퓨터 제조업체 협회를 뜻하며 ECMA의 표준화에 많은 역할을 담당했습니다 년도별로 살펴보기 넷스케이프 커뮤니케이션즈에서 브라우저 상에서 동작하는 스크립트 언어로 개발 초기 이름은 'LiveScript'이었으나, 자바의 인기에 편승하기 위해 'JavaScript'로..

들어가며 최근 React를 배우고, 프로젝트에서 실행을 하면서 많은 시행착오를 겪었습니다 그중에서도 많은 개발자들이 공통적으로 성장하면서 겪는 실수들이 있다고 하는데, 이 글은 그러한 내용들을 다루고 있습니다 공감되는 부분이 있고, 아닌 부분들도 있겠지만 대부분은 겪고 지나간다는 일이니 재밌게 봐주시길 바라며 포스팅을 시작합니다 KOR 본문 1. 컴포넌트화의 부재 하나의 파일에 모든 코드를 입력하여 만들려고 한다면 후에 디버깅을 하고 다루는 데에 어려움을 겪게 된다 하지만 모든 것이 여러 컴포넌트로 세분화가 잘 이루어져 있다면? 프로젝트 관리를 굉장히 편안하게 할 수 있을 것이다 2. 직접적인 state 수정 리액트의 모든 state들은 변하지 않는 값을 가지고 있다 state, object, array..

This is a good plugin to organize your long-dizzy tailwind classnames. You have to install Prettier before you get started preview a result ... ... How to install 1. put this text in the terminal npm install -D prettier prettier-plugin-tailwindcss 2. Save the codes by using Prettier 3. Well done! Happy Hacking! + How classes are sorted? They sorted High Level class to Low Level class examples En..