🔍 Tech 🔍/Front-End

지난번에 gesture handler, reanimated 라이브러리를 사용해 top sheet를 직접 구현해 보았는데, 오늘은 top sheet가 확장/축소 됐을 때 다른 컨텐츠를 보여주고 하단에 자연스럽게 스크롤이 생기게 적용했다. 1. 컨텐츠 배치top sheet 아래 부분에 메인 컨텐츠가 표시되어야 하므로 Section 컴포넌트를 ScrollView로 묶어주었다.   현재 상태(top sheet가 축소된 상태)에서는 Section에 스크롤이 생기지 않는다.하지만 확장되면 늘어난 top sheet의 높이만큼 스크롤이 생긴다.    2. 확장/축소 컨텐츠위 사진처럼 서로 다른 컨텐츠를 자연스럽게 변환하기 위해 몇 가지 기능을 추가해야 했다. 2-1. useSharedVa..

회사에서 진행하는 Kotlin 앱을 React Native로 컨버팅 하는 프로젝트 진행 중 기획 단계가 끝나고 어떤 라이브러리를 사용할지 설계 중이었다. 기존 앱의 메인 페이지에는 상단에 드래그 가능한 Top Sheet가 구현되어 있는데, 열심히 찾아보아도 RN에선 Botton Sheet 라이브러리만 있을 뿐 원하는 Top Sheet 라이브러리는 없었다. # 가장 많이 사용하는 Bottom Sheet 라이브러리https://ui.gorhom.dev/components/bottom-sheet/ React Native Bottom Sheet | Gorhom UIA performant interactive bottom sheet with fully configurable options 🚀ui.gorhom.d..

그동안 React로 CSR 방식의 프로젝트만 구현했었는데, SSR 방식을 알아보던 중 React 문법을 사용할 수 있는 Next.js를 직접 사용해 보면서 어떤 차이점이 있는지 알아보고 싶어 간단한 애플리케이션을 구현해보았다. 1. 애플리케이션 생성 https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.js Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file. nextjs.org 기존에 React로 생성할 때 CRA(create-..

1월 원티드 챌린지에서 프론트 엔드에서도 테스트 코드가 필요하다는 것을 알게 되었다. 프론트 엔드에서 테스트 코드를 활용한 경험을 담은 기술블로그의 글을 읽다 보면 공통적으로 말하는 장점이 있다. 1. 오류를 빠르게 발견하고 수정할 수 있다. 2. 다른 라이브러리/프레임워크로 쉽게 리펙터링이 가능하다. 3. 로직의 흐름을 파악하기 쉬우므로 문서화 역할을 하며 새로운 팀원이 해석하기 쉽다. 여기에 추가적으로 TDD 방법론을 적용하였을 때 개발 시간이 줄어든다는 실제 사례를 에서 본 기억이 있다. 복잡한 비즈니스 로직이 포함된 코드가 아닌 간단한 사칙연산 수준의 코드를 구현함에 있어서도 위처럼 유의미하게 차이가 발생했다. 챌린지에서 배웠던 내용을 한마디로 요약하자면 "UI 테스트는 하지 않고, 요구사항의 사..

원티드 온보딩 챌린지를 참여하며 새로 알게 된 개념인 CCP에 대해 알아보았다. 결국 프론트 엔드 개발을 하며 많은 시간을 할애하는 부분은 코드 구현이 아닌 계획과 설계 그리고 리펙터링인 것 같다. 독립적인 컴포넌트 작업으로 얻을 수 있는 여러 이점들이 React를 사용하는 이유라면 장점을 극대화하기 위해선 컴포넌트 하나하나 신중하게 생성해야 할 것이다. 바로 이 부분을 염두한 패턴이 CCP가 아닐까 싶다. https://patterns-dev-kr.github.io/design-patterns/compound-pattern/ Compound 패턴 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다 - … patterns-dev-kr.github.io import React from 'rea..