Homile

React 19 React 공식 블로그에 24.02.15에 업데이트 진행사항이 올라왔습니다. 주요 내용은 크게 React Compiler, Actions, New Features in React Canary입니다. React Compiler 공식블로그에 따르면 React를 위한 컴파일러가 개발중이며 오픈 소스 릴리즈를 준비하고 있다고 한다. React의 상태를 관리할 때 의도와는 달리 많은 리랜더링이 발생하는 경우가 있는데 이것을 해결하기 위해서는 useMemo, useCallback등과 같은 메모이제이션 방식을 통해 리랜더링을 줄이는 방법을 사용했는데 이를 자동화으로 최적화할 수 있도록 되어있다고 한다. Actions 아래 코드에서 보이는 것과 같이 form에 action이 추가 되었습니다. actio..

React Native CLI로 시작하기 해당 글은 Mac을 기준으로 작성했습니다. 공식 문서 상에서 iOS를 개발하기 위해서는 Expo Go로 생성을 하거나 macOS가 필요하다고 작성되어 있습니다. Mac OS로 Android 개발 시작하기 개발 툴 설치 (IDE) InteliJ, Visual Studio Code 등과 같이 Code를 작성할 수 있는 IDE를 설치합니다. 저는 VSCode를 기반으로 작성하겠습니다. https://code.visualstudio.com/ Hombrew 설치 Node, Watchman, JDK 등 패키지 설치를 하기위해 Homebrew를 설치합니다. https://brew.sh/ko/ /bin/bash -c "$(curl -fsSL https://raw.githubus..

React native란 무엇인가? React Native는 Facebook에서 개발하고 관리하는 오픈 소스 모바일 애플리케이션 프레임워크입니다. 이 프레임워크는 웹 개발에 사용되는 JavaScript와 React를 기반으로 하고 있으며, iOS와 Android 모두에서 사용할 수 있는 앱을 만들 수 있습니다. React native의 장점/특징 React Native는 한 번의 개발로 iOS와 Android 모두에 대응할 수 있는 앱을 만들 수 있습니다. 이는 개발 시간을 줄이고, 유지 보수를 간편하게 합니다. React Native는 JavaScript를 사용하기 때문에 React를 사용하던 개발자들이라면 진입장벽이 낮습니다. React native vs Flutter React Native Reac..

notion에 작성했던 내용을 옮겨 적었습니다. 타입스크립트란? 타입스크립트틑 자바스크립트를 기반으로하는 프로그래밍 언어이다. 타입스크립트는 프로그래밍 언어면서 도구이기도 하다. 작성한 코드를 실행하면 타입스크립트 코드를 자바스크립트로 컴파일하는 강력한 컴파일러다. 자바스크립트 언어에 타입을 추가한다. 자바스크립트 언어에 기능을 추가한다. 장점 새로운 기능과 장점을 추가하는 언어로 JS 코드를 더 쉽고 강력하게 작성할수 있도록합니다. 스크립트가 실행되고 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 개발자가 미리 식별할 수 있는 기회를 제공한다. 개발중에 런타임에러로 인해 발생하는 에러를 초기개발과정에서 발견하고 수정할수 있도록 ㄱ추가적인 오류 검사를 제공한다. 단점 타입스크립트는 브라우저와 같..

React Hook Form이란? React에서 form의 유효성검사를 도와주는 라이브러리이다. React Hook Form 장점 공식문서에 따르면 아래와 같은 장점이 있다. 기존의 유효성 검사보다 적은 코드를 사용할 수 있다. 불필요한 재렌더링을 제거하고 검증 계산을 최소화하여 마운팅 속도를 높여 성능을 향상 시킨다. 패키지의 종속성이 없어서 작은 라이브러리로 가볍다. React Hook Form과 yup을 같이 사용한 이유 React Hook Form만으로도 충분히 좋은 퍼포먼스를 낼 수 있지만, yup과 같이 사용한다면 인라인으로 작성되는 코드를 분리하여 사용할 수 있어 가독성이 조금 더 좋기 때문에 같이 사용하게 된다는 것을 알게되어 사용하게 되었다. 아래는 React Hook Form 공식문서에..

Redux 상태를 업데이트 할 때는 항상 원본 state는 수정하지 않고 새로운 state를 반환해야한다. 프로젝트가 더 복잡해질수록 리덕스를 올바르게 사용하기도 더 복잡해진다. 리덕스에서 관리해야 할 상태가 더 많아질 때 생길 수 있는 현상 액션 타입에서 문제가 생길 수 있다. 식별자는 오타가 나서는 안되지만 오타가 날 경우 리듀서가 처리하지 못하게 된다. 해결: 상수를 지정하여 오타를 막을 수 있다. 작은 프로젝트에서는 문제가 되지않지만 큰 프로젝트에 많은 개발자가 들어가는 프로젝트에서는 문제가 될 수 있다. 서로 다른 액션이 많을 때 식별자의 충돌이 발생할 수 있다. 관리하는 데이터의 양이 많을 수록 상태 객체도 점점 커지며 많은 상태를 복사해야한다. 모든 상태를 유지하려면 계속 복사해야하고 리듀서..

Vite란? 공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다. 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. Create React App대신 사용하는 이유 CRA는 JavaScript로 구성된 Webpack을 사용하는데 속도가 느린편입니다. 평소에는 못느낄 수 있지만 처리해야 할 코드의 양이 많아질 수록 느린 속도를 채감할 수 있습니다. 위와 같은 단점을 해결하기 위해 Esbuild..

Redux? 상태를 전역적으로 관리하기 위해서 사용되는 상태관리 도구이며, Redux 외에도 MobX, React Context, Recoil 등이 있습니다. 상태관리 도구를 사용하여 Props drilling 이슈를 해결할 수 있습니다. Props drilling? 상태가 존재하는 컴포넌트에서 자식 컴포넌트로 이동을 할 때, 수많은 props를 계속해서 내려야하는 경우를 말하며, 코드의 가독성이 나빠지고 유지보수 또한 힘들어집니다. Action 상태에 어떤 Action(행동)을 취할 것인지 정해놓는 객체입니다. Action이 많아질 경우 ActionTypes 파일을 생성하여 타입을 모아두는 경우도 있습니다. Action 타입을 정의할 때는 모두 대문자로 Snake Case로 작성합니다. // 전달 받을..

React 프로젝트 구성 #1 (프로젝트 생성) Firebase를 사용하여 React 프로젝트에서 Firestore를 사용할 수 있도록 작업을 시작해보겠습니다. 1. Firebase 로그인 및 콘솔로 이동 구글 계정을 생성후 firebase.google.com 링크에 접속하여 우측 상단에 있는 '콘솔로 이동'을 클릭하여 Firebase 프로젝트를 생성하러 이동합니다. 2. 프로젝트 생성 콘솔로 이동하게 되면 중앙에 프로젝트 추가 버튼을 클릭해줍니다. 프로젝트의 이름을 지정합니다. 애널리틱스를 설정합니다. *애널리틱스: 무제한 무료 분석 솔루션인 Google 애널리틱스를 사용하면 Firebase Crashlytics, 클라우드 메시징, 인앱 메시지, 원격 구성, A/B 테스팅, Cloud Functions..

Firebase? 모바일 및 웹 애플리케이션을 만들기 위해 개발된 플랫폼입니다. Firebase로 플랫폼을 구축 시 자동적으로 서버를 구축해주어 리눅스의 명령어를 알 필요가 없으며, 인증, 데이터베이스, 스토리지, API 등을 구성하는데 조금 더 간편하게 작업을 할 수 있도록 도와줍니다. 이를 통해서 적은 비용으로 좋은 앱을 만들 수 잇습니다. 기능 기본적으로 가장 많이 사용하는 기능만 적어보도록 하겠습니디ㅏ. Authentication 계정 기능을 쉽게 만들 수 있게 해주는 API입니다. SNS 로그인 기능 또한 구현할 수 있습니다. Cloud Firestore SQL 언어를 사용하지 않고, 클라우드에 데이터를 저장하여 사용할 수 있습니다. 실시간 데이터베이스 사용자 기반 보안으로 온/오프라인에서 실시..