Framework/React & RN16

• 

  [React] CRA(Create React App) 환경에서 env 파일 사용하는 방법 서론 CRA(Create React App) 환경에서는 API 끝점, 키 및 기타 설정과 같은 환경별 구성을 관리하는 것이 확장 가능하고 유연한 애플리케이션을 구축하는 데 매우 중요합니다. 다행히도, CRA는 환경 파일을 사용하여 환경 변수를 처리하는 간단한 방법을 제공합니다. 이 튜토리얼에서는 CRA 프로젝트에서 env 파일을 효과적으로 활용하는 방법에 대해 알아보겠습니다. 1단계: 환경 파일 생성 시작하려면 프로젝트 루트에 새 파일을 만들고 이름을 ".env"로 지정하십시오. CRA는 이 파일을 자동으로 인식하고 개발 중 환경 변수로 내용을 로드합니다. 파일 이름은 점으로 시작해야 하며 파일 확장명이 없어야 합니다. 2단계: 환경 변수 정의 .env 파일 내에서 환경별 변수를 키-값 형식으로 정의할 .. Framework/React & RN 2023. 6. 2.

• 

  [RN] React Native/Typescript 환경에서 env 파일 사용하는 방법 서론 대상독자 RN 개발 시, env 파일을 사용하고 싶은 개발자 학습목표 오늘은 RN Expo와 타입스크립트 환경에서 env 파일을 설정하는 방법에 대해서 알아보겠습니다. 본론 라이브러리 설치하기 // js yarn add react-native-dotenv; // ts yarn add -D @types/react-native-dotenv; react-native-dotenv를 설치해줍니다. 타입스크립트의 경우, 타입을 지정하기 위한 @types/react-native-dotenv 라이브러리를 추가로 설치해줍니다. babel.config.js 수정하기 그런 뒤, babel.config.js 파일에서 해당 값을 plugins 항목에 넣어줍니다. module.exports = function () { re.. Framework/React & RN 2023. 3. 27.

• 

  [RN] 자주 쓰이는 단축키, 사이트 모음 본론 환경설정 방법 Setting up the development environment · React Native - 링크 Xcode 빌드 캐시 삭제 Windows : Shift+Command+K Mac : Option+Shift+Command+K 완전 삭제 ~/Library/Developer/Xcode/DerivedData 문제 있는 프로젝트 삭제 Pods Dependency Error rm -rf node_modules && yarn install && cd ios && rm -rf Pods && pod install && cd .. React Dependency Error npm install --force npm install --legacy-peer-deps --force를 하면 package.. Framework/React & RN 2022. 8. 22.

• 

  [RN] IOS 네이티브 모듈 다루기 서론 오늘은 RN에서 IOS 네이티브 모듈과 직접 통신하는 방법에 관해서 알아보도록 하겠습니다. 본론 먼저, Xcode 상에서 새로운 Object-C 파일을 생성해줍시다. XCode 상, File -> New -> File로 접근할 수 있습니다. Object-C 모듈/메서드 내보내기 // RTCCalendarModule.h #import @interface RCTCalendarModule : NSObject @end 헤더파일에 RCTBridgeModule 모듈을 항상 불러와줍니다. 그래야, JS와 Object-C 간에 통신이 가능합니다. // RCTCalendarModule.m #import "RCTCalendarModule.h" #import @implementation RCTCalendarModule.. Framework/React & RN 2022. 6. 26.

• 

  [React] Creact React App을 분석해보자 서론 오늘은 리액트 환경설정을 자동화해주는 툴인 CRA에 관해서 알아보도록 하겠습니다. 본론 CRA란 CRA란 별다른 설정 없이 react 개발환경을 구축해주는 boilerplate 입니다. 이를 활용하면, 쉽게 환경설정을 할 수 있다는 장점이 있습니다. 구체적으로 CRA가 해주는 역할은 대표적으로 다음과 같습니다. public 디렉토리에 index.html과 logo, favicon 등의 static asset 및 기본적인 리액트 코드(index.js, app.js) 설정 webpack, babel, eslint, jest 등 리액트 개발에 필요한 각종 환경설정 react, react-dom, react-scripts 등 각종 라이브러리 설치 react-scripts를 사용하여 package.json에.. Framework/React & RN 2022. 4. 26.

• 

  [React] CRA 없이, 리액트 개발 환경을 설정해보자 서론 학습목표 오늘은 리액트 개발 환경셋팅을 자동으로 해주는 CRA 없이 리액트 개발환경을 설정할 수 있다. 웹팩, 바벨이 하는 역할을 알고 직접 관련된 설정을 해줄 수 있다. CRA가 해주는 역할에 대해서 바르게 안다. 본론 리액트로 처음 개발할 땐, CRA로 개발환경을 셋팅해주곤 합니다. CRA란 Create React App의 약자로 바벨, 웹팩, 린트 등 복잡한 개발환경을 쉽게 설정해줄 수 있도록 돕는 툴입니다. 사용법은 정말 쉽습니다. 그러나 문제는 개발자로써 더 환경설정을 커스터마이징하고 싶을 때, 하기 어렵다는 점입니다. 따라서 오늘은 CRA 없이 밑바닥부터 리액트 개발환경을 설정해보도록 하겠습니다. 참고로 2022년 4월 21일 기준으로 패키지 버젼을 맞춰 줬습니다. 프로젝트 셋팅하기 먼저.. Framework/React & RN 2022. 4. 21.

• 

  [Hooks] 모달 띄웠을 때 스크롤을 막는 방법 오늘은 모달이 떠있는 상태에서 스크롤이 안되도록 처리해보겠습니다. 방법은 아주 간단합니다! 모달을 띄울 때, body의 style로 overflow hidden을 주면 됩니다. 반대로, 모달을 닫을 땐 overflow 속성을 지워주면 되겠죠? import { useCallback } from 'react'; export function useBodyScrollLock() { const lockScroll = useCallback(() => { document.body.style.overflow = 'hidden'; }, []); const openScroll = useCallback(() => { document.body.style.removeProperty('over.. Framework/React & RN 2022. 4. 15.

• 

  [React] 리스트에 key 값을 잘못 입력하면 어떻게 될까? 서론 리액트에선 리스트 컴포넌트에 key 값을 입력하도록 권장합니다. 오늘은 그 까닭과 올바른 key 값을 입력하지 않으면 어떤 문제가 발생할 수 있는지 함께 살펴보도록 하겠습니다. 본론 키 값을 입력해주는 것은 왜 중요할까? 질문에 답을 하기에 앞서서, 리스트 형태의 리액트 컴포넌트에 key 값을 입력해주는 것은 왜 중요할까요? 목록의 데이터 간 값 비교를 사용자가 입력한 key 값을 바탕으로 하기 때문입니다. 올바르지 못한 key 값을 입력하면 어떤 에러가 발생될까? 흔히 하는 실수가 Array의 map 메서드의 index를 key 값으로 제공하는 것입니다. 허나, 이는 배열의 원소가 삭제/추가되어 배열의 순서가 변동되는 경우에는 적합하지 않습니다. 아래의 예제처럼 말이죠. 실제 동작은 해당 링크를 .. Framework/React & RN 2022. 4. 14.

• 

  [Expo 44] 최신 Expo 환경에서 복수 이미지 업로드하는 방법 서론 대상독자 React Native Expo 개발 시, 이미지 업로드를 구현하고 싶은 개발자 학습목표 최신 Expo 환경(Expo 44)에서 복수 이미지 업로드를 구현하는 방법에 대해서 알아보겠습니다. expo-image-picker에선 하나의 이미지만 선택할 수 있으므로, 한 번에 여러 이미지들을 업로드 할 수 있도록 프로그램을 작성하겠습니다. 본론 먼저 필요한 패키지들을 설치합니다. 라이브러리 설치하기 expo install expo-image-picker expo-media-library expo-image-picker와 expo-media-library 라이브러리를 설치해줍니다. expo 모듈 같은 경우에는 expo 버젼에 따라 패키지 사용방법이 상이하므로, expo cli로 설치해주는 것이 중.. Framework/React & RN 2022. 4. 2.

• 

  React Native/Typescript 환경에서 react-navigation을 활용하여 라우팅하는방법 서론 대상독자 타입스크립트로 RN 개발 시, react-navigation을 활용하여 라우팅하고 싶은 개발자 학습목표 @react-navigation에는 bottom-tabs, stack(native-stack), 드로어(drawer) 이렇게 총 3가지 종류의 네비게이터가 존재합니다. 오늘은 react-navigation을 활용하여 바텀 탭과 스택 네비게이팅에 대해서 알아보도록 하겠습니다. 기본적으로 리액트의 네비게이팅을 위해 쓰이는 React Router와 유사한 구조인데요, 바로 살펴보겠습니다. 본론 모듈 설치하기 yarn add @react-navigation/bottom-tabs @react-navigation/native @react-navigation/native-stack @react-nav.. Framework/React & RN 2022. 4. 2.

• 

  [Expo 44] 최신 Expo 환경에서 구글 로그인 구현하는 방법 서론 대상독자 React Native Expo 개발 시, 구글 로그인을 구현하고 싶은 개발자 학습목표 최신 Expo 환경(Expo 44)에서 구글 로그인을 구현하는 방법에 대해서 알아보겠습니다. 본론 먼저 필요한 패키지들을 설치합니다. expo-auth-session 설치하기 expo install expo-auth-session expo-random expo-auth-session와 expo-random 라이브러리를 설치해줍니다. expo 모듈 같은 경우에는 expo 버젼에 따라 패키지 사용방법이 상이하므로, expo cli로 설치해주는 것이 중요합니다. 그럼 자동으로 expo에서 앱의 expo 버젼에 맞게 패키지를 설치해줍니다. 코드 작성하기 공식 문서에서 예제 코드를 불러와 사용하겠습니다. impo.. Framework/React & RN 2022. 4. 1.

• 

  React Native/Typescript 환경에서 Styled-component를 사용하는 방법 서론 대상독자 RN 개발 시, Styled-component를 사용하고 싶은 개발자 학습목표 오늘은 RN Expo와 타입스크립트 환경에서 Styled-component를 설정하는 방법에 대해서 알아보겠습니다. 본론 라이브러리 설치하기 yarn add styled-components; yarn add -D @types/styled-components @types/styled-components-react-native 리액트에서 사용할 때와 유일한 차이점은 @types/styled-components-react-native 패키지를 추가로 설치해준다는 점입니다. 실제로 사용해보기 테스트를 위해 버튼 컴포넌트를 스타일드 컴포넌트를 활용하여, 스타일링 해보도록 하겠습니다. 잘 적용되는 것을 보실 수 있을 겁니다.. Framework/React & RN 2022. 4. 1.