전체 글212 react-fast-marquee v1.6.5: Duration 계산 불안정으로 인한 속도 불일치 이슈 제기 해당 내용은 사내 프로젝트에서 라이브러리 이슈가 있어서 분석후 라이브러리 repo의 이슈에도 등록해놓았습니다.- 버전 : 1.6.5- 이슈 내용- 원인 분석(with 소스코드 분석)- 재현 방법- 이전 관련 PR 이력 파악https://github.com/justin-chu/react-fast-marquee/issues/130 티커 라이브러리를 사용하는데 다른 컴포넌트를 생성시 티커 컴포넌트의 속도가 달라지는 현상이 발생하였습니다.소스코드에서 speed로 계산하는 부분이 있나 살펴보겠습니다.https://github.com/justin-chu/react-fast-marquee/blob/master/src/components/Marquee.tsxmarqueeWidth, containerWidth, spee.. 2025. 3. 28. 디자이너, 다른 개발자와 소통하기 다른 개발자와 소통 - 코드리뷰테스트한 사항 정리전체적인 코드 흐름 파악버그 점검 다른 개발자와 소통 - 기존 코드를 이해하고 그림으로 남겨서 다른 팀원의 온보딩 단축하기사내 프로젝트에 투입된 초기에, 그리고 함께 개발해나가면서 다른 팀원의 코드를 이해하는것은 중요합니다.이 글은 다른 팀원의 코드를 이해하는 방식에 대하여 소개합니다.서버와 클라이언트 관계가 어떻게 되는지 큰 흐름에서 파악할 수 있습니다.이렇게 큰 흐름을 파악한 그림은 나중에 처음 프로젝트에 투입된 팀원에게도 빠르게 프로젝트를 파악하는데에 도움이 되기 때문에 그림으로 남겨둡니다. 디자이너와 소통 - Figma 디자인 이슈 템플릿사내 프로젝트를 진행하면서 기획이나 디자인이 나오더라도 개발하다보면 논의할 사항이 있을 수 밖에 없습니다.그런.. 2025. 3. 23. vue3, Pinia https://github.com/HongJungKim-dev/hobby-hive 배포주소https://hobby-hive-eight.vercel.app/ Hobby Hive - 취미 공유 커뮤니티취미 이미지 공유 나만의 취미 활동을 이미지로 기록하고 다른 사람들과 공유해보세요. 당신의 취미 활동을 사진으로 기록하고, 다른 사람들과 함께 나눠보세요. 취미 커뮤니티에서 새로운 아hobby-hive-eight.vercel.app위의 프로젝트는 Next, React환경에서 만든 프로젝트이고 아래 레포에서 vue로 진행중이지만 vue로 구현한 레포는 아직 배포 및 퍼블리싱이 미비되어서 프로젝트 내용은 상단 코드와 배포주소에서 확인 가능합니다.https://github.com/HongJungKim-dev/hobb.. 2025. 3. 23. TanStack Query 내부구조 (with 코드) + 실무 적용 React Query 가이드 문서에서 제공하는 내용을 통해 사용법만 익혀서 프로젝트에 적용할 수도 있습니다. 그런데 내부의 동작을 파악하면 라이브러리를 올바르게 사용하는 데에 도움이 되고 디버깅 시간도 줄일 수 있을것 같아서 파악해보았습니다. 최대한 올바르게 파악하기 위하여 React Query 블로그에서 제공하는 자료와 github코드를 참고하였습니다.이러한 원리를 학습하고 이를 사내 프로젝트에 적용한것을 아래에서 예시를 들어 설명하겠습니다. 1. 주요 구성 요소React Query는 크게 Query Core와 Framework Specific로 나뉩니다.Query Core (프레임워크 독립적인 핵심 로직)QueryClient: React Query의 중심 객체로, 기본 설정(defaultOptions.. 2025. 3. 16. 적응형 도입 과정 rem을 사용하는 경우rem을 사용하는 경우 그 이유에 대해 여러 블로그를 찾아보았는데 크게 두가지 인것같습니다.웹접근성을 고려하여 크롬 폰트 설정에서 폰트 크기를 변경하였을때 그 변경이 웹서비스의 css보다 우선되어서 크기가 변하는가 (시각에 어려움이 있는 사용자를 위함)폰트 사이즈, 비율이 변화됨에 따라 padding의 크기등이 폰트와 함께 변하면서 전체적인 UI가 전반적으로 유사하게 유지되는가(반응형으로 배치 다르게 하는 내용과 다른 이야기, 대부분의 서비스는 반응형이 되어있고 그것 외에 어느정도 변화에 따라 padding등도 같이 변화하는지 여부)https://youtu.be/okw-whFWGEo?si=HXFPIhc77o0-xYqFhttps://ossam5.tistory.com/m/310 [CSS.. 2025. 3. 16. 라이브러리 선택 과정 정리 및 공유 라이브러리 선택을 하는경우 무작정 사내 프로젝트에 적용할 수는 없습니다.이유는 크게 다음과 같습니다.라이브러리에 오류가 없는지 확인프로젝트 반영에 필요한 기능을 충분히 제공하는지 확인물론, 커뮤니티가 활성화 되어서 에러핸들링하기 적절할지, 공식문서가 잘 작성되어있어서 개발자들이 빠르게 적용할 수 있는지, 여러 라이브러리중 필요한 기능만 포함된 경량 버전인지 등을 확인하는것도 필요할 수 있습니다.여기에서는 DnD 라이브러리, AJV를 선택한 과정을 예시로하여, 템플릿화하여 공유한 내용을 설명합니다.DnD 라이브러리 선택이유라이브러리를 선택하면서 npmtrends사이트를 통해서 다운로드, 깃허브 관리를 통해 커뮤니티가 활성화되어있는지 확인하였습니다.다른 라이브러리의 공식문서 제공여부 demo사이트가 있는지,.. 2025. 3. 16. 이전 1 2 3 4 ··· 36 다음
