본문 바로가기

전체 글46

[짧은 생각] 퀄리티 vs 속도 퀄리티와 속도 중 어느 한쪽을 선택하는 논의는 흔하지만, 양쪽을 모두 가져가는 것이 가장 이상적이다.다만 상황에 따라 우선순위는 달라질 수 있다. 프로덕트의 초기 검증이 필요하다면 속도를 우선하는 것이 합리적이다. 반대로 유지보수성과 확장성을 고려해야 하는 상황이라면 퀄리티에 집중해, 읽기 쉽고 검증하기 쉬운 코드를 작성해야 한다.또한 프로그램 로직을 잘 설계하는 것만큼 중요한 것은 팀 규칙에 맞춰 일정한 코드 품질을 유지하는 것이다. 이를 위해 코드 퀄리티를 체크하는 서비스와 툴들을 적극 활용할 수 있다.기본적인 ESLint와 Prettier는 물론, 필요에 따라 react-scan, million, biome, trunk와 같은 도구를 추가적으로 적용해 팀의 룰을 강화하고 일관된 코드 구조를 유지할 .. 2024. 11. 23.
Tanstack/query 캐싱 - gcTime과 staleTime https://tanstack.com/query/latest/docs/framework/react/guides/caching TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.tanstack.com Tanstack의 Query는 서버 사이드의 데이터를 캐싱하고 자동으로 갱신하며 불필요한 요청을 줄이는 기능을 제공합니다.캐싱 설정에서 gcTime과 staleTime에 대해 찾아보고 정리해봅니다.*gcT.. 2024. 11. 4.
tsconfig alias와 vite tsconfig 설정에는 baseUrl, paths를 설정하여 import 시 절대경로를 사용할 수 있는 기능이 있습니다.// tsconfig.app.json의 일부 "baseUrl": "./src","paths": {      "@hooks/*": ["hooks/*"],      "@components/*": ["components/*"] },  create-vite로 구성한 react 앱을 구성하는 과정에서 위와 같은 alias 설정을 하는 일이 있었습니다.tsconfig 설정 자체는 이상이 없었지만, vite를 통해 앱을 실행하는 과정에서 경로를 찾지 못하는 문제가 나타났습니다. 앱을 실행하는 것은 vite이기에 vite와 tsconfig 사이의 문제이지 않을까 싶어 검색을 진행했고, tsconfi.. 2024. 10. 25.
캐러셀 구현하기 CSS scroll-snap-* 웹 혹은 앱을 개발하다보면 캐러셀 구조를 구현하게 되는 경우가 종종 있습니다. 슬라이더라고도 부릅니다.좌우로 슬라이드하며 상품을 보여주기도 하고 앨범을 넘겨가며 보기도 하는 등 다양한 곳에 쓰입니다. 캐러셀은 보통 JavaScript를 통해 구현하고는 합니다.그러다 CSS의 이 속성을 알게 되었습니다. scroll-snap-type https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type scroll-snap-type - CSS: Cascading Style Sheets | MDNThe scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll co.. 2024. 9. 13.
10+. 항해를 마치고, 새로운 항해를 위해 6월 15일부터 8월 24일까지, 10주간의 항해 플러스 프론트엔드 과정이 끝났습니다. 10주에 다 담기에는 버거움이 없지는 않았던 과정이었지만, 어떻게 하나 마무리를 잘 지은 것 같습니다. 비슷하지만 또 다른 서로 다른 연차의, 다양한 동료분들을 만나고 함께할 수 있었기에 가능했지 않았나 싶습니다. 마무리하면서 스스로에게도, 남들에게도 하게 된 말이 있습니다. 아직 내용이 채워지지 않은 사전의 인덱스를 늘려놓은 것 뿐이다. 언젠가 배워야지, 써야지만 하던 것들을 10주간 몰아서 배워놨고, 키워드를 알아두고 조금은 실제 해 봤으니 다음에는 보다 쉬울 것이다.다양한 경험은 사람의 시야를 넓히고 문제 해결의 실마리를 제공할 수 있다고 생각한다. 키워드, 인덱스가 없으면 그것을 찾아가는 과정부터가 일이겠지만,.. 2024. 9. 2.
Rollup Config 'external' https://rollupjs.org/configuration-options/#external Configuration Options | Rollup rollupjs.org문제상황사내에서 npm 모듈을 제작하는 과정에서 rollup build 명령 실행 시 peer-dependency인 react가 빌드에 포함되지 않아 발생했던 문제가 있었다. 원인분석- react가 peer-dependency이기에 실제로는 빌드에 포함되지 않아야 했다 (react를 사용하는 프로젝트에만 설치되는 것을 가정하기에, 원 프로젝트의 리액트를 사용하는 것을 가정했다.)- 모노레포 구조에서 루트에는 react가 설치되어 있어, 개발 과정에서 react를 import 할 때는 문제가 없었다.- rollup -c를 실행하면 패키지.. 2024. 8. 29.
pnpm version patch 삽질하기 배경모듈을 만들어서 배포를 자동화하는 과정에서 겪은 이슈를 적어봅니다. 이 글은 pnpm으로 구성한 모노레포 환경에서 발생한 문제와 그 해결 과정을 다룹니다.프로젝트 구조pnpm으로 구성한 모노레포packages 하위에 사용하고자 하는 커스텀 모듈 위치main에 push 발생 시 GitHub Actions를 통해 packages/package-A를 GitHub Packages로 배포문제 상황npm 모듈의 버전은 달라야 하기에 package.json의 version을 변경하고 배포를 진행해야 합니다.매번 PR에서 이 package.json의 버전을 직접 바꾸는 것보다는 이를 자동화하는 것을 목표로 했고, 액션의 배포 단계에서 마이너 패치 버전을 자동으로 올리도록 설정하기로 했습니다.에러 발생packages.. 2024. 8. 9.
overscroll-behavior: 'contain'; https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior overscroll-behavior - CSS: Cascading Style Sheets | MDNThe overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.developer.mozilla.org 사이드 프로젝트를 하다가 찾게 되어 알게 된 css property이다 화면을 만들다 보면 overflow: scroll 를 적용하여 스크롤이 생기는 구역이 둘 이상 생기곤 한다.나의 경우에는 채팅창을 만들고 나서 생긴 이슈였는데, 채팅 레이아웃의 스크롤을.. 2024. 7. 2.
React Conf 2024를 다녀와서 뒤늦게 적어보는 React Conf 2024 방문기 지난 5월 14일, 5월 15일(미국 서부시간 기준) 네바다 주에서 열린 컨퍼런스에 다녀왔다.언제였는지 확실히 기억나지는 않지만 지난 겨울쯤, 5월에 컨퍼런스가 있다는 알림을 받고 뭐 되겠어 하는 심정으로 컨퍼런스 현장 참여 티켓 로터리에 참가 메일을 적어뒀다. 3월에는 그 로터리가 되었다는 메일을 받았고 이걸 가야하나 말아야하나 고민하고 상담하고 했던 기억이 난다. 가보는 게 좋다, 가야하나 고민을 많이 했던 것 같다. full attendance ticekt 비용이 999$였던게 첫 번째 걸림돌이었다. 기술적인 내용들은 어차피 공개영상으로 다 볼 수 있을 터였고, 키노트와 같이 중요한 내용들은 금방 번역과 정리들이 올라올 것이었다. 앞으로 일정이 어.. 2024. 6. 19.

티스토리툴바