coding- w00se

리액트 파일은 통상적으로 .js 대신 .jsx 확장자를 사용합니다. 이런 컨벤션은 JSX가 표준 Javascript가 아니기 때문에 발생했다고 합니다. 즉 파일 내부에 표준 Javascript 문법만 사용됐다면 파일 확장자로 .js가 적절합니다. 반면에 jsx나 Typescript처럼 파일 내부에 표준 Javascript 이외에 다른 코드가 있다면 해당 파일의 확장자는 .js가 아닌 다른 확장자로 지정한다고 합니다. 예를 들어 jsx가 사용된 파일 확장자는 jsx로, typescript가 작성된 파일 확장자는 .ts로 지정합니다. 참고 자료 https://stackoverflow.com/a/46169521

플러그인(Plugin) 플러그인은 로더가 할 수 없는 다르 작업을 수행할 목적으로 제공됩니다. 플러그인은 번들된 파일에 후처리 작업을 할 때 사용된다. ex. 번들된 파일 맨 위에 build 시간을 주석으로 삽입하는 작업 플러그인을 만들면 플러그인의 동작 원리를 이해하는데 도움이 됩니다. 커스텀 플러그인을 만드는 예제는 김정환 님 블로그에 자세히 나와있습니다. 플러그인 설정 방법 플러그인은 webpack.config.js 파일에 plugins 속성에 배열로 등록합니다. 예제 코드 const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', entry: { main: './src..

로더(Loaders) webpack은 기본적으로 Javascript와 JSON 파일만 이해합니다.(= 모듈화 할 수 있습니다.) css, 이미지 파일, 폰트 등의 다른 유형의 파일들을 번들하기 위해서는 로더(Loader)의 도움을 받아 처리해야 합니다. 즉, 로더는 Javascript와 JSON을 제외한 다른 유형의 파일들의 처리하여 모듈화 가능하게 해 줍니다. 커스텀 로더를 만들면 로더의 동작 원리를 이해하는데 도움이 됩니다. 커스텀 로더를 만드는 예제는 김정환님 블로그에 잘 나와있습니다. 로더 설정 방법 로더는 webpack.config.js 파일에 modules 객체의 rules 속성에 배열로 등록합니다. 예제 코드 // webpack.config.js const path = require(&#39..

webpack 이란 무엇인가? webpack은 모듈 번들러이다. 각 모듈의 의존 관계를 파악해서 하나의 묶음 파일(bundle)로 만들어준다. 로더를 사용하면 css 하나의 javascript에 통합할 수 있다. 왜 필요한가? webpack이 필요한 이유는 등장하게 된 배경과 연관이 있습니다. webpack의 등장 배경에 대해서는 이 글에 자세히 정리되어 있습니다. 간략히 목록으로만 정리하면 웹팩의 등장 배경은 아래와 같습니다. 파일 단위의 모듈 관리의 필요성 웹 개발 작업 자동화 도구 웹 애플리케이션의 빠른 로딩 속도와 높은 성능 webpack 설치 및 설정 webpack 설치 npm install --save-dev webpack webpack-cliwebpack 설정 webpack의 기본 설정 파일..

Toast message는 아래 예시처럼 짧은 시간 나타났다 사라지는 메시지를 말합니다. Toast message는 Android에서 기본으로 지원하는 기능으로 React Native의 공식 문서에도 Android 한정으로 지원을 해주고 있습니다. https://reactnative.dev/docs/toastandroid 이번 게시글에서는 javascript로 Toast 메시지를 구현하는 방법을 정리하려 합니다. 필요 라이브러리 - react-native-reanimeted * react-native-reanimated v2 설치가 필요하신 분은 아래 링크를 참고해도 좋을 거 같아요😊 https://coding-w00se.tistory.com/39 진행 순서 1. Toast 기능 구현 step 0. Vi..

Collapsible Tab View는 아래의 예시처럼 Tab Screen의 scroll gesture에 따라 Header가 위치 및 크기가 조절되는 view입니다. React Native에서 해당 기능을 아래 라이브러리로 구현 가능합니다. - react-native-collapsible-tab-view 또한 라이브러리는 아니지만 JungHsuan 님께서 멋진 예시 코드를 공개해주셨습니다. - https://github.com/JungHsuan/react-native-collapsible-tabview 이번 게시글에서는 Collapsible TabView를 구현하기 위해 위 두 가지 코드를 보면서 공부한 내용을 정리하려 합니다. 필요 라이브러리 - react-native-tab-view 진행 순서 ste..

기존 RN 프로젝트를 Refactoring 하기 위해 Redux를 공부했습니다. 하지만 아쉽게도 팀 내부 회의 후 Redux 대신 MobX를 도입하기로 결정해서 Redux로 Refactoring을 진행하지는 못했지만, Redux를 공부한 내용을 간단히 정리하려 합니다. (MobX는 추가적으로 더 공부한 후 정리하려 합니다😁) ※해당 게시글은 Redux에 대해 자세한 설명보다는 각 용어나 개념에 대한 짧은 정리 수준의 내용으로 이뤄져 있습니다. 조금 더 깊고 많은 내용을 원하시는 분은 참고 자료에 있는 게시글 들을 보시는 것도 좋을 거 같습니다. Redux란? 점유율이 가장 높은 상태 관리 라이브러리로, 글로벌 상태 관리를 쉽게 할 수 있도록 도와준다. - container component와 presen..

Animated의 Interpolate는 활용도가 높은 메서드입니다. 이번 글에서는 Interpolate의 설정 값 중 extrapolate에 대해서 정리하려 합니다. extrapolate는 Animated value가 interpolate의 inputRage 범위를 벗어났을 때 값을 처리하는 방법에 대한 설정입니다. React Native 공식 문서에 따르면 extrapolate에는 아래와 같이 총 세 종류의 값을 설정할 수 있습니다. 1. extend 2. identity 3. clamp 1. extend extrapolate의 default 값으로 extrapolate에 별도의 값을 설정하지 않으면 기본으로 extend가 설정 됩니다. extend는 Animated Value가 inputRage를 ..

별점(star rating)은 상품이나 컨텐츠에 대한 유저의 만족도를 간단히 수치화할 수 있는 수단입니다. 이번 글에서는 PanResponder로 드래그 가능한 별점의 구현 방법을 정리했습니다. * 별점 기능을 구현하기 위해 react-native-reanimated 라이브러리를 사용했습니다. 라이브러리 설치가 필요하신 분은 아래 링크를 참고하면 좋을 거 같아요☺️ https://coding-w00se.tistory.com/39 구현 예시 특징 1. 터치 또는 드래그 제스처로 별점을 표현할 수 있습니다. 2. 저장되는 별점은 0 ~ 5 사이의 0.5 간격의 수이며, 올림 함수(Math.ceil)를 이용하여 계단 함수처럼 구현했습니다. 구현해야 할 효과 및 기능 위 예시를 위해 구현해야 할 기능은 아래와 ..

문제 상황 react version: 16.13.1 react-native-version: 0.63.4 문제가 발생한 OS 및 version: ios 14.0 해당 이슈는 ScrollView나 FlatList가 사용된 모든 스크린에서 발생되는 건 아니였습니다. 때문에 정확한 원인을 찾기는 힘들었지만 다행히 구글링을 통해 해결방법은 찾았습니다. 해결 방안 이슈의 원인은 '어떠한 이유로 ios 환경에서 ScrollView(또는 FlatList)를 사용 시 scrollIndicatorInsets props의 right 속성에 0이 적용이 안된다.'인 거 같습니다. 해당 이슈는 이미 react-native issue에 올라와 있으며 이슈 페이지에 올라온 예시처럼 scrollIndicatorInsets props..