Framework/React & RN16 React Native 환경에서 svg 파일 불러오는 방법 서론 대상독자 RN 개발 시, svg 파일을 사용하고 싶은 개발자 학습목표 오늘은 RN Expo 환경에서 svg 파일을 불러오는 방법에 대해서 알아보겠습니다. 본론 react-native-svg와 react-native-svg-transformer 설치하기 yarn add react-native-svg react-native-svg-transformer react-native-svg와 react-native-svg-transformer란 라이브러리를 설치해줍니다. metro.config.js 수정하기 그런 뒤, metro.config.js 파일에서 아래와 같이 설정해줍니다. const { getDefaultConfig } = require("expo/metro-config"); module.exports.. Framework/React & RN 2022. 4. 1. [React] 함수형 컴포넌트와 클래스 컴포넌트의 차이점 서론 오늘은 리액트를 배운 사람이라면 한 번쯤은 묻게 되는 기본적인 내용에 관해서 정리해보려고 합니다. 지금은 함수형 컴포넌트와 Hooks로 리액트 컴포넌트를 작성하는 게 일반적이지만, Hook가 정식으로 추가되기 전인 React 버전 16.8 (2019년 2월 출시) 이전에는 클래스형 컴포넌트를 작성하는 것이 일반적이었습니다. 또 오픈소스 프로젝트 중 여전히 클래스형 컴포넌트로 작성된 경우가 더러 있습니다. 따라서 오늘은 그 둘의 차이점에 대해서 알아보고, 리액트에서 왜 Hooks로 작성하는 것을 권장하는 지 알아보도록 하겠습니다. 이 차이는 클래스와 함수의 차이에서 비롯됩니다. 함수형에서는 this가 가리키는 undefined인 반면, 클래스형에서는 해당 객체를 가리킵니다. 문제는 이 this가 컴포.. Framework/React & RN 2022. 3. 30. ReactNative 개발, 어떻게 시작하면 좋을까? 서론 대상독자 React 개발을 경험이 있으나, 처음 React Native(이하 RN)으로 앱 개발을 하려는 프론트엔드 개발자 학습목표 리액트와 RN의 차이점을 알고 그 차이가 어디에서 비롯되는지 이해한다. 네이티브 앱과 RN의 차이점을 알고 RN의 한계점에 대해서 이해한다. RN 개발환경을 이해하고 상황에 맞게 능동적으로 선택할 수 있다. Expo와 React Native Init 간 차이점을 알고 장/단점을 설명할 수 있다. 본론 리액트와의 차이점 RN을 활용하면, 리액트에서 자주 활용했던 jsx 문법, 라이프사이클 함수, react hooks, 함수형/클래스형 컴포넌트 등을 활용할 수 있습니다. 그래서 공통점을 언급하는 것보다는 차이점에 대해서 중점을 두고 설명해보려 합니다. 웹이 아닌 앱 개발에.. Framework/React & RN 2021. 12. 29. [FE] 프론트엔드에서의 상태관리란 무엇인가? (1) 등장배경과 정의 서론 대상독자 프론트엔드(이하 FE) 상태관리를 처음 접하는 웹 프로그래밍 입문자. 큰 맥락에서 FE 상태관리를 이해하고 싶은 웹 프로그래밍 초급자. 오늘의 학습 목표 웹의 역사와 FE 상태관리의 등장배경에 대해서 이해한다. 상태관리의 정의를 이해하고 활용 방법에 대해서 학습한다. 다양한 상태관리 라이브러리들의 장/단점을 비교할 수 있다. 개발 상황에 알맞게, 상태관리 라이브러리를 선택할 수 있다. 실제 웹 어플리케이션에 필요한 기능을 상태관리를 활용하여 구현할 수 있다. 프론트엔드 상태관리란 무엇이며, 왜 필요한가? FE 개발을 할 때, 가장 중요하게 여겨지는 두 가지가 있습니다. 바로 스타일링과 상태관리인데요, 그래서인지 프론트엔드 개발을 할 때 어떤 상태관리 라이브러리를 사용할 것인지가 화두로 떠오.. Framework/React & RN 2021. 11. 6. 이전 1 2 다음 반응형
