React5 디자인 패턴을 활용한 Form 컴포넌트 리팩터링: 유연성과 재사용성 모두 확보하기(최종) 2025.01.19 - [React] - 디자인 패턴을 활용한 Form 컴포넌트 리팩터링: 유연성과 재사용성 모두 확보하기(1)이전 글에서 form을 리팩터링하게 된 계기와 리팩터링하면서 했던 고민들을 작성했으니,이번 글에서는 해결 과정과 방법을 작성하고자 한다.(보안 및 저작권 보호를 위해, 특정 회사의 내부 코드나 기밀 정보를 제외하였으며,일반적인 기술 개념과 패턴을 기반으로 서술하였습니다.) 이전 글 요약기획 고도화로 form 구조가 복잡해졌고, 기존의 `` 컴포넌트는 초기 기획 기반이여서 과도하게 추상화되어 있어 유지보수가 어려웠다.이에, 리팩터링 하기로 하였고, 여러 가지 방법을 고려 후, 아래의 방법을 선택했다. 이제, 리팩터링을 어떻게 진행했는지와 디자인 패턴을 어디에서 활용했는지를 설명.. 2025. 2. 16. 디자인 패턴을 활용한 Form 컴포넌트 리팩터링: 유연성과 재사용성 모두 확보하기(1) 복잡한 형태의 form을 유연하게 사용하기 위해,form 관련 공통 컴포넌트를 리팩터링한 이야기(보안 및 저작권 보호를 위해, 특정 회사의 내부 코드나 기밀 정보를 제외하였으며,일반적인 기술 개념과 패턴을 기반으로 서술하였습니다.) 리팩터링 배경 및 필요성 1. 복잡한 form이 많이 사용되는 환경서비스의 특성상 복잡한 form이 많이 필요했다. 다수의 페이지와 모달에서 생성/수정 과정이 있었다.이때 입력 필드는 단순한 text input, number input, date input 등만 있는 것이 아니라, 복합적인 구조도 많았다. 다른 컴포넌트 내부에 중첩되어 있거나, 동적인 폼, 추가/삭제가 필요하기도 하는 등 매우 다양했다.따라서 일관된 UX를 유지하면서도 확장성을 고려한 Form 컴포넌트가 필.. 2025. 1. 19. i18next-react와 Google Sheets를 활용한 국제화(i18n) 자동화 도입기(2) - i18next적용하기(namespace 구분하기) 지난 글에서는 i18n 자동화 도입 배경과 사용 도구 및 도구 선정 배경에 대해 살펴보았다.2024.09.18 - [React] - i18next-react와 Google Sheets를 활용한 국제화(i18n) 자동화 도입기(1) - intro/도구 선정 이번에는 적용한 방법에 대해 소개하려고 한다.그중 먼저 i18next를 적용한 방법을 먼저 소개하겠다.또한, namespace를 구분할 필요가 있어서 이를 구분한 방법도 소개하도록 하겠다.(단, 코드는 보안상 실제 코드가 아닌 주로 공식 문서의 코드를 일부 수정하여 사용하였습니다) i18next 적용하기먼저 i18next를 사용해서 국제화를 적용했다. i18next의 t 함수를 사용하면, key를 통해 번역 내용을 관리할 수 있다.// 예시{t('ke.. 2024. 10. 27. i18next-react와 Google Sheets를 활용한 국제화(i18n) 자동화 도입기(1) - intro/도구 선정 도입기라고 하기엔 별거 없고,다른 블로그 글들과도 유사하지만,나중에 또 적용해야 할 나를 위해 정리해보는 도입기! 배경 및 문제인식국제화(internationalization, i18n)에는 여러 지원이 포함되지만, 가장 우선시해야 하는 것 중 하나인 언어 대응을 준비하게 되었는데, 기존 방식이 비효율적이고 생산성이 떨어지는 방식으로 되어있었다. 즉, 아래와 같은 문제점들을 도출하였고 이를 개선할 수 있는 방안을 고안하게 되었다.Problems (기존 방식의 문제점 도출) 현재 방식: 수작업 및 엑셀/Jenkins 사용한 부분 자동화 방식 개발자/기획자/번역가 등 여러 단계를 거치며 휴먼 에러 발생 가능성 높음 파일 이력/버전 관리의 어려움 비개발자와의 협업의 어려움 개발자의 생산성 저하 해결 방.. 2024. 9. 18. [원티드 챌린지] 리액트 테스트와 최적화 이 글은 원티드 프리온보딩 8월 챌린지(리액트 리팩토링 실전가이드: 테스트부터 최적화까지) 사전과제를 하며 공부한 것을 정리한 글입니다. 잘못된 부분이 있으면 언제든지 댓글 등으로 알려주세요. 1. 테스트 테스트 코드의 중요성 - 개발 과정에서 미리 문제를 발견하고 수정할 수 있다. - 코드 변경시 변경 부분으로 인한 영향도 파악이 쉽다. - 리팩토링을 안심하고 할 수 있다. 유닛테스트 vs. 통합테스트 vs. E2E테스트 비교 유닛테스트 가장 작은 단위 테스트 (각 컴포넌트 및 기능 단위의 동작 검증) 소스코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차 모든 함수와 메소드에 대한 테스트 케이스를 작성하는 절차 단시간내에 문제 파악 및 수정 가능 (쉽고 빠름) 통합테스트 단위 테스트가 끝.. 2023. 7. 26. 이전 1 다음
