프론트엔드에서 실무경험을 하며 사용자 경험(UX)가 얼마나 중요한 지 깨닫게 되고있다. 데이터를 페칭해오는 시간 동안 UX를 개선하기 위해 개발자들은 많은 고민을 하고있다.그것에 대해 공부하던 도중 React Query와 함께 Concurrent UI Pattern을

영상편집 툴의 대표적인 Adobe Premiere Pro에서 동작하는 플러그인을 개발중인데 해당 플러그인은 HTML, CSS, JavaScript로 개발할 수 있다. 따라서 React환경을 구축해서 빌드하였다. 하지만 React App은 클라이언트 사이드 렌더링을 통해

프로젝트를 개발하면서 Drag & Drop 기능이 필요했는데 예전부터 써보고 싶었던 모듈인 react-beautiful-dnd를 사용해 DND를 개발해보았다. 설치 타입스크립트 환경에서 개발했기 때문에 type까지 설치해주었다. 라이브러리 이해 DragDropCo

최근 스와이퍼(캐러셀)을 사용해야하는 경우가 있었지만 인덱싱 기능이나 화살표 기능, 오토 플레이 등과 같은 스와이퍼 옵션 기능을 사용할 필요가 없었기에 오버 엔지니어링이라고 판단하여 그냥 드래그 가능한 리스트를 직접 개발했다.이 때 발생한 문제가 리스트에 스타일링한 o

프로젝트 수정할 것이 있어 오랜만에 git clone을 하고 node_modules를 설치한 뒤 yarn start를 했더니 아래와 같은 에러가 떴다.웹팩 버전 안맞어보아하니 웹팩 버전이 안맞는것 같은데... 웹팩 버전이 맞지않는 이슈는 처음이라 해결방법을 찾아보기로

코드의 가독성은 매우 중요하다. 프로젝트를 하다보면 개개인의 코드 작성 스타일이 다르기 때문에 이를 통일화 해서 코드를 작성하여야 한다 . 누구는 Tab을 2칸으로 띄우는 반면에 4칸으로 띄우는 사람도 있고, 세미콜론을 찍는 사람도 있는데 찍지 않는 사람도 있다. 이러

Github page로 React 프로젝트를 배포하는 방법.Github 리포지토리를 하나 만든다.프로젝트를 commit하고 push한다.프로젝트에 패키지를 설치한다.package.json 파일을 수정한다..명령어를 실행하면 build파일이 나오면서 해당 리포지토리의 설