uni's code uni's code

react native를 구현하기 위해, 사용하는 툴은 expo와 react native cli가 있다. 간단히 비교해보자. 1. Expo "기본적인 셋팅이 다 구성되어 있으며, native 관련 파일은 숨겨두어 자동으로 관리해줌." 1) 장점 기본 셋팅이 미리 구성 → 빠르게 개발 가능 파일들을 자동으로 관리 윈도우 환경에서도 expo 앱을 통해 아이폰(ios) 테스트 가능 배포가 편함. 2) 단점 expo에서 제공하는 기능만 사용 가능 native 파일을 직접 제어 불가 2. React native cli "native 파일을 직접 제어 가능" 1) 장점 native 변경 필요시, 변경 가능 다양한 라이브러리 사용 가능 2) 단점 expo보다 느리게 개발이 될 수 있음 android studio, x..

들어가며 지난 번 글([Next.js] Next.js 13에서 유저의 권한에 따른 protected route / protected api Setting (권한에 따른 페이지 접근 제한)에서 권한에 따라 페이지 접근 로직을 다루었다. 이 글에 나온 내용에서 방안4인 middleware를 사용한 방법으로 실제 프로젝트에 도입해보려고 한다. next.js에서 middleware는 페이지를 이동하려고 할 때, 중간에 검증 함수 역할을 한다. 여기서 유저의 권한 인증에 대해 검증 함수를 추가하여, 유저 권한에 따른 페이지 접근 가능 여부를 구현가능하다. 예를 들어, 로그인한 유저가 로그인 페이지에 접근하는 것은 올바르지않다. 반대로, 로그인 하지 않은 유저가 로그인이 필요한 마이페이지에 접근하는 것도 옳지 않다..

들어가며 안녕하세요 :) 프론트엔드는 백엔드에 비해 쉽게 UI 변경이 잦고, 기능이 여러 추가됩니다. 이때, 변경할 때마다 쉽게 대응이 가능한 유연한 코드를 짠다면 업무의 양이 줄어들 것입니다..! 마침 변경에 용이한 컴포넌트 짜는 방법에 대해 소개한 글을 발견하여 공유하면 좋을 것 같아 번역글을 작성합니다. 원글: Building future facing frontend architecures Building future facing frontend architectures A deep dive into how component based frontend architectures can implode with complexity at scale, and how to avoid it. frontendma..

들어가며 코드를 작성하는 것은 개발자로서 당연한 업무이다. 이때 코드를 작성할 때의 목표는 원하는 기능의 구현 일 것이다. 그렇게 기능 위주로 작성하다보면, 문득 “코드를 잘 만들었는가” “다른 사람이 보았을 때, 이해할 수 있는 코드를 만들었는가”에 대한 고민이 생기기 마련이다. 나만 알아볼 수 있는 코드는 다른 동료들과 미래의 나에게 곤란하게 하는 상황을 초래하고, 사이드 이펙트 및 레거시의 우려가 남아있기 때문이다. 리액트는 컴포넌트로 구성된 라이브러리이다. 간단한 프로젝트면 컴포넌트 설계에 대해서 깊게 고민하지 않아도 되겠지만, 규모가 어느정도 있는 프로젝트를 수행할 경우 비즈니스 로직이 더해진 다양하고 복잡한 컴포넌트는 수정하기 힘들어질 수 있다. 그래서 리액트의 코드를 잘 작성하기 위해서는 컴..

1. 사용 이유 결론은, React.memo, useMemo와 useCallback은 react의 성능을 향상(불필요한 렌더링 또는 변수, 함수 호출 방지)이 목적입니다. * React.memo는 HOC이고, useMemo와 useCallback은 hook입니다. 컴포넌트가 렌더링이 되면, 선언된 함수형 컴포넌트들 안에 있던 변수, 함수도 다시 정의되고, 사용됩니다. 또한, 컴포넌트는 자신의 state나 부모 컴포넌트로 부터 받은 props가 변경, 혹은 부모 컴포넌트가 리렌더링될 때마다 리렌더링됩니다. 그래서 재렌더링의 작업이 많아질 경우, 불필요한 함수 혹은 변수가 호출될 수 있습니다. → 특정 컴포넌트, 함수와 변수(값)을 메모이제이션하게 만들고 싶을 경우, React.memo, useMemo와 u..

오늘은 react의 hoc 패턴에 대해 알아보겠습니다. 1) hoc란? hoc는 high order component의 약자로써, 고차컴포넌트라고 합니다. 쉽게 말하면, 다른 컴포넌트(=자식)를 감싸는 wrapper 컴포넌트(=부모)라는 뜻입니다. 리액트 공식 문서에 따르면 hoc를 사용하는 이유는 횡단관심사의 분리 입니다. 횡단관심사는 Cross-Cutting concern이라고 합니다. 하나의 컴포넌트만 가지고 있는 관심사를 넘어서 여러 컴포넌트에서 가지고 있는 공통의 관심사라는 의미입니다. 예를 들어, 각 페이지 별 유저에 대한 권한을 검사해 검증을 하는 기능이 공통적으로 가지고 있다고 합시다. 이러한 권한 검사가 공통의 관심사가 됩니다. 이러한 페이지 컴포넌트를 자식 컴포넌트로, 검증하는 컴포넌트..