-
[React] React-Query와 상태관리 (feat.우아한 테크 세미나) - 1Today's/DevelopStory 2023. 6. 30. 10:43
React혹은 React-Native 프로젝트를 진행하면서 무심코 사용해왔던 React-Query에 대해 한번 정리하고자 한다. 유튜브 채널 "우아한 테크"의 2022년 2월에 올라온 영상, React-Query와 상태관리 편을 시청하면서 정리했다. 서론 상태란 무엇인가? 상태(State)는 주어진 시간에 대해 시스템을 나타내는 것. 언제든지 변경될 수 있다. UI/UX의 중요성이 부각되면서 관리해야되는 상태가 많아졌다. Props Drilling 이슈로 인해 Redux, Mobx 같은 라이브러리를 활용하기도 한다. 상태관리 영역의 확장 서버값을 저장하는 것까지 개념이 확장됨 기존 redux와 같은 전역상태관리 라이브러리의 store에 API 통신 관련 코드가 포함되기 시작 isError, isFetch..
-
[ReactNative] Build 환경 분리하기 (feat. Codepush)Today's/DevelopStory 2023. 3. 28. 19:00
프로젝트를 진행하다보면, 이미 서비스 중인 Live 환경과 개발을 진행 중인 Develop 환경이 분리되어야 하는 상황이 필연적으로 생긴다. 거기다 QA 환경, 내부 교육용 환경 등 프로젝트의 성격이나 회사의 업무진행 방식에 따라 더 많은 환경 분리가 필요하기도 하다. 따라서 이러한 환경에 맞춰 앱 자체를 각각 빌드하는 방법에 대해 알아보고 정리해두고자 한다. 시작하기에 앞서, 해당 글은 Appcenter CodePush를 적용 한 프로젝트에서 시작하였다. [ReactNative] Appcenter Codepush 연동하기 [ReactNative] Appcenter Codepush 연동하기 리액트 네이티브로 제작한 프로젝트는 심사없이 간단한 업데이트를 진행할 수 있다. 이는 네이티브 단의 코드를 변경하지..
-
[ReactNative] 숫자 3자리마다 콤마(",") 삽입하기Today's/DevelopStory 2023. 3. 24. 16:51
네이티브 개발을 진행하다가 오랜만에 ReactNative로 프로젝트를 하게되었다. 일반적으로 숫자 3자리마다 콤마를 삽입하는 가장 편한 방법은 toLocaleString() 메소드를 사용하는 방법이다. 하지만 이는 iOS환경에서는 문제없이 동작하지만, Android 환경에서는 정상적으로 콤마가 출력되지 않는 문제가 있었다. 분명 예전에 ReactNative 프로젝트를 진행할 때 겪었던 문제였음에도 불구하고, 제대로 기록해두지 않으면 이렇게 또다시 반복적인 삽질을 하게 된다... 그래서 이번엔 아예 커스텀 메소드를 구현하면서 이 문제를 정확히 기록해두고자 한다. Android 환경에서 toLocaleString() 메소드가 제대로 동작하지 않는 이유에 대해서 아주 간략히 설명하자면, ReactNative는..
-
[ReactNative] Appcenter Codepush 연동하기Today's/DevelopStory 2023. 3. 24. 11:36
리액트 네이티브로 제작한 프로젝트는 심사없이 간단한 업데이트를 진행할 수 있다. 이는 네이티브 단의 코드를 변경하지 않는 이상 실질적으로 JS번들 내의 내용을 변경하는 것이고, 스토어에 새로운 빌드를 업로드 하지 않고 JS번들만 Appcenter 에서 등록/관리 하여 변경하면 되기 때문이다. 다음은 실제 작업한 프로젝트 ‘Walky’에 Appcenter CLI를 적용하는 과정을 기록한 것이다. 1. 설치하기 npm install -g appcenter-cli 2. 시작하기 Appcenter CLI를 사용하기 위해선 Appcenter에 가입을 해야 한다. 구글 계정 등을 사용할 수 있으니 간단히 가입할 수 있다. appcenter login 해당 명령어를 통해 로그인이 가능하다. 명령어를 실행하면 브라우저..
-
[Compose] LaunchedEffect와 DisposableEffect 그리고 React의 useEffect와 유사점Today's/DevelopStory 2023. 2. 23. 18:12
부트캠프에서 처음 프론트엔드 개발에 대해 배울때 가장 많이 접하는 라이브러리가 React일 것이다. React로 개발을 하다보면 함수형 컴포넌트에서 사용하는 리액트 훅(ReactHook), 특히 useEffect를 자주 사용하게 된다. 안드로이드 앱 개발 프로젝트를 진행하면서, 리액트로 개발을 시작한 나에게 있어 객체지향형 프로그래밍이랑 너무나도 어려운 개념이었다. 그러다 선언형 프로그래밍이 가능한Jectpack Compose을 사용하게 되었고, 자연히 React의 useEffect와 비슷한 역할을 하는 함수에 대해 알아보았다. - React, useEffect React의 useEffect는 컴포넌트가 렌더링될 때마다 실행되는 함수다. useEffect를 사용하여 비동기 작업을 수행하거나, 외부 리소스..
-
[Kotlin] 객체 배열에서 특정 Key의 값(value)만 추출하여 배열만들기Today's/DevelopStory 2023. 2. 22. 18:38
코틀린에서는 map 함수와 getOrDefault 함수를 사용하여 객체 배열에서 특정 키에 해당하는 값들만 추출할 수 있다. fun main() { val arr = arrayListOf( mapOf("a" to 1, "b" to "가", "c" to 70.5), mapOf("a" to 2, "b" to "나", "c" to 80.5), mapOf("a" to 3, "b" to "다", "c" to 90.5) ) val aValues = arr.map { it.getOrDefault("a", null) } .filterNotNull() .toTypedArray() println(aValues.joinToString()) } 이 코드는 주어진 객체 배열에서 "a"라는 키에 해당하는 값들만 추출하여 배열로 ..
-
[React] 미들웨어 사용 예시Today's/DevelopStory 2021. 7. 16. 00:14
서버와 통신을 할 때 비동기 작업을 수행하기 위해서 필요한 것이 미들웨어이다. 해당 예시에서는 미들웨어 패키지 중에서 thunk를 사용하였다. const nickCheck = (id) => { return function (dispatch) { instance .post('/api/sign/nickname', { nickname: id }) .then((res) => { dispatch(checkDup(true)); window.alert('사용 가능한 아이디입니다.'); }) .catch((error) => { dispatch(checkDup(false)); window.alert('이미 존재하는 아이디입니다.'); }); }; }; 닉네임 중복 체크를 위해 서버와 통신하는 미들웨어를 간단히 작성하였다.
-
[React] redux module 예시Today's/DevelopStory 2021. 7. 6. 02:55
//user.js (모듈) import { createAction, handleActions } from 'redux-actions'; // { 액션생성함수, 리듀서 } 작성 편의성 패키지 import { produce } from 'immer'; // 불변성 관리 편의성 패키지 import { setCookie, getCookie, deleteCookie } from '../../shared/Cookie'; //1. Actions (액션 타입 정하기) const LOG_IN = 'LOG_IN'; const LOG_OUT = 'LOG_OUT'; const GET_USER = 'GET_USER'; //2. Action Creators (액션생성함수 만들기) createAction을 사용하여 편리하게 작성하..