728x90
반응형
source-code
-
You Might Not Need a Dispatch
Type. BackgroundsFE 개발자 단톡방에 이런 질문이 올라왔습니다.결론부터 말하자면...You Might Not Need a Dispatch Type.해당 타입 사용을 선호하지 않는다기 보다, 사용할 필요가 없다 란 답이 가장 적절하다고 생각했습니다. 그 이유가 무엇일까요?언제 사용되는가?Dispatch은 React에서 useState 훅을 사용할 때 반환되는 상태 업데이트 함수의 타입입니다. 상태 값을 업데이트할 때 사용하는 setState 함수의 타입을 정의하며, React 상태 관리에서 매우 일반적으로 사용되죠. 그렇다면, 해당 타입 정의가 왜 필요할까요? 가장 대표적인 예시는 자식 컴포넌트에 Props로 전달할 때입니다. 부모 컴포넌트에서 useState로 상태를 관리한 뒤, 자식 컴포넌트에서 상.. 2024.10.29 - 지속 가능한 프론트엔드 단위 테스트 작성법 1. 프론트엔드는 테스트가 필요 없다?!프론트엔드 단위 테스트는 항상 논쟁의 중심에 있습니다. 프론트엔드 애플리케이션의 복잡성과 중요성이 증가하면서 단위 테스트의 필요성을 주장하는 목소리가 점점 늘어나고 있습니다. 하지만 자주 변경되는 UI와 그로 인해 쉽게 깨져버리는 테스트 코드들을 보며 프론트엔드에서의 단위 테스트가 불필요하고 비효율적이라는 비판도 여전히 거셉니다. 저는 여러 프론트엔드 프로젝트 경험을 바탕으로 단위 테스트는 반드시 필요하다는 결론에 도달했습니다. 단위 테스트는 코드를 안전하게 리팩토링하고, 코드 품질을 유지하며, 오류를 사전에 예방할 수 있는 중요한 수단입니다. 코드베이스가 커지고 협업 인원이 늘어날수록 단위 테스트를 통해 코드 수정 시 발생할 수 있는 문제를 사전에 방지해야만 하며.. 2024.10.09
- next.js에 FSD 폴더 구조 패턴 적용하기 Backgrounds최근 Next.js 프로젝트에 Feature-Sliced Design(FSD) 패턴을 도입하게 되었습니다. FSD는 프론트엔드 프로젝트에서 모듈들의 레이어(layer)를 명확히 구분하고, 상위 레이어와 하위 레이어 간의 의존성 방향을 명확히 하여 모듈 간 결합도를 낮추고 변경 사항이 어디까지 영향을 미칠지 예측 가능하게 만들어줍니다. 이를 통해 유지 보수성이 크게 향상된다는 장점이 있습니다.(자세한 설명은 이전 글을 참고해주세요) 하지만 Next.js와 FSD 패턴을 함께 사용하다 보니, 일부 컨벤션에서 충돌이 발생하게 되었고, 그 과정에서 몇 가지 문제점과 해결책을 찾아야 했습니다. 이번 글에서는 제가 겪었던 문제들과 이를 해결한 방법을 공유하려 합니다. 1. app 폴더 네이밍 충.. 2024.09.24
- FrontEnd 개발자가 가장 빠르게 서비스를 구축하는 방법 Introduction웹 애플리케이션을 구축하는 것은 복잡한 작업이 될 수 있지만, 최근 몇 년간 등장한 기술 스택 덕분에 개발 속도를 크게 향상할 수 있는 방법들이 많아졌습니다. 프론트엔드 개발자들은 주로 JavaScript 또는 TypeScript에 익숙한데, 최근에는 서버와 클라이언트 모두 JavaScript로 통합할 수 있는 환경이 마련되면서 프론트엔드 개발자가 웹 전체를 빠르게 구축할 수 있는 강점을 갖추게 되었습니다. 실제로 얼마 전, 저는 부산 지역의 사설 도서관들의 도서 관리 서비스를 구축해야 했습니다. 각 사용자 별 계정을 생성하고, 해당 계정이 속한 도서관에 접근해 도서를 추가하고 삭제할 수 있어야 했으며, 사용자들이 저장된 도서 정보들을 검색할 수 있어야 했죠. 즉 웹 애플리케이션의 .. 2024.09.08
lean
- 24.10.20~24.10.27 업무 공유체크리스트 관리 기능 개발여러 채널들로 유입된 기업과 미팅을 진행한 결과, 현재 제품이 제공하는 가치인 '온보딩'이 크게 두 가지로 나뉨을 확인할 수 있었다.→ 1) 고객이 가치를 느낄 수 있는 아하 모먼트까지 안내 2) 필수 세팅 과정 안내 및 지원 이 두 가지 케이스 중 1)에 해당하는 기업들은 활발하게 미팅이 이뤄지고, 실제 도입으로 이어졌다.하지만 2)의 니즈에 해당하는 기업은, 얼마 지나지 않아 이탈하는 경우가 많았다. (사실은 전부 이탈했다) 이를 해결하기 위해 사용자가 해야만 하는 일을 시각적으로 제시할 수 있는, 제크리스트를 구현하기로 결정! 실제 체크리스트를 고객사 화면에 띄울 SDK와, 체크리스트 내부 요소를 GUI로 편집할 수 있는 관리자 페이지 기능 개발이 필요했고,그중 관..
- 24.10.13~24.10.20 업무 공유SDK 실행 옵션 추가실행한 가이드가 종료되었을 때, 고객사 측에서 정의한 동작을 실행하고 싶다는 요구사항이 발생했다.→ 이미 상정되었던 상황! SDK를 통한 가이드 실행 시, 완료 시 실행될 콜백 함수를 주입받는 걸로 빠르게 구현할 수 있었다. 이때 다시 한번 느낀... 도메인 중심 사고의 중요성! 이번의 경우 가이드 완료 시에만 입력받은 콜백이 실행되어야 했는데,이를 도메인 개념에 따라 완료 / 중간 이탈 / 종료로 나누었던 것이 추후 빠른 요구사항 반영을 이끌어 낸 원동력이 되었다. 툴팁 텍스트 에디터 적용역시 고객사 요구사항 발생!문구에 강조, 크기 조절, 색상, 링크 등을 추가하고 싶다는 고객사 요구사항이 발생했다. 직접 구현할 수도 있었지만, 해당 기능이 서비스에 미치는 영향력을 고려..
- 물리적 지속 가능성 무언가를 꾸준히 지속하기 위해서는, 무엇이 필요할까? 치과용품 관련 회사에 다니는 어머니는 예전부터 가족들의 잇몸 건강에 관심(과 걱정)이 많으셨다.단순히 양치를 꼼꼼히 하는 것뿐만 아니라, 양치 후 잇몸 청결까지 신경 쓰길 바라셨다.덕분에 집에는 희한하게 생긴 칫솔, 치실, 치간 칫솔 등이 쌓여갔다. 그러던 어느 날, 난생처음 보는 물건을 회사에서 사 오신 게 아닌가.난생처음 들어보는 이름, 구강 청소기되시겠다. 잇몸 마사지 + 이물질 제거에 탁월해 하루에 한 번이라도 꾸준히 하라 강조하신 어머니.그리고... 1달이 지난 후 가족들 중 이를 사용하는 사람은 아무도 없었다. (심지어 그녀조차도!) 그리고 몇 달이 지난 뒤, 어머니는 또 희한한 물건을 사 오셨다.똑같은 구강 청소기였지만, 다른 점이 하나 ..
728x90
반응형