누워서 코딩하기 - 떡 먹는 것처럼 쉽고 재밌게! 🤭

env란? 어플리케이션 및 웹 개발 중 외부에 공개되면 안되는 정보 (예: 포트 번호, 데이터베이스 관련 정보, 토큰, API 키 등)가 존재하게 될텐데, 이러한 정보가 하드 코딩으로 구성 파일에 포함되면 깃허브나 기타 오픈소스에서 관련 정보들이 노출될 위험이 있습니다. 또한, 서버나 토큰 정보가 수정될 경우 하드코딩을 하였기 때문에 코드를 다시 수정하여 배포해야 하는 문제점도 발생합니다. 이때 이러한 문제를 해결하기 위해 env 파일을 사용합니다. env 파일을 사용하게 되면 외부에 공개되면 안되는 정보들을 구성 파일에 하드코딩하지 않고 사용할 수 있게 됩니다. 외부 파일(.env)에 환경 변수를 정의하여 변수로 받아오는 이유는 보안성과 유지보수성을 높이기 위함입니다. React에서 .env 파일 생성..

MobX란? 전역 상태 라이브러리 모든 상태 변화가 일어나는 부분을 자동으로 추적해주는 역할 유지보수가 쉬워지도록 상태 로직을 분리하여 모듈화할 수 있음 상태 관리의 단계를 간결하게 해줌 MobX 특징 React에 종속적인 라이브러리가 아님 redux와 다르게 store에 제한이 없음 절대적으로 필요한 경우에만 state 변경 Typescript를 기반으로 만들어짐 기본 동작 원리 및 개념 상태를 변경하기 위한 action이 발생하면 observable(상태)가 update되고, 상태가 변경되었음을 notify해서 필요에 따라 연산된 값(compute values)을 계산하거나 적절한 reaction(반응)을 수행한다. action이 state를 변경하는 단방향 데이터 흐름을 사용 영향을 받는 모든 vi..

[RN] React Native의 정의와 장단점 React Naitve란? 2015년 3월 페이스북에 의해 공개된 오픈소스 모바일 어플리케이션 프레임 워크 사용자 인터페이스를 만드는 React에 기반을 두고 제작 웹 브라우저가 아닌, iOS와 Android에서 동작하는 suji-sw.tistory.com 위의 포스팅을 통해 React Native의 정의와 장점, 단점 등을 알아보았다. React Native 개발자라면 해당 프레임워크가 어떻게 작동 하는지 알 필요성이 있기 때문에 해당 포스팅을 작성하도록 하겠다. React Native의 작동 방식 React Naitve는 크로스 플랫폼 앱 (Cross-Platform App)으로, javascript 언어로 iOS와 Android 플랫폼을 동시에 개발할..

React Query란? 리액트 쿼리는 API 연동에 특화된 라이브러리 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와줌 서버의 값을 클라이언트에 가져오거나, 캐싱, 값, 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용됨 사용하는 이유 API 호출을 통해 받아온 데이터를 useState를 사용하여 저장하였다고 가정하자. 해당 화면에서 머무르는 동안은 Hooks 함수로 인하여 변화하는 값을 계속해서 저장이 가능하다. 그러나 요청하는 API의 수가 많아질수록 그 과정은 더욱 복잡하고 귀찮아질 것이다. 컴포넌트 내부에 선언된 useState이기 때문에 사용자가 다른 화면으로 넘어가면 해당 변수에 저장된 값도 역시 사라진다. 따라서 나중에 다시 컴포넌트를 생성할 때 기존에 받아온 응답..

Hooks React 16.8 버전에서 새롭게 추가된 기능이다. 이전에는 컴포넌트의 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행하려면 클래스형 컴포넌트를 사용해야 했지만, Hooks를 이용할 수 있게 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었고 컴포넌트의 생명 주기에 맞춰 특정 작업을 수행할 수 있게 되었음. 컴포넌트의 생명 주기 모든 컴포넌트는 생성 → 업데이트 → 제거 의 생명주기를 갖는다. 생명주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해주어야 불필요한 업데이트를 방지할 수 있다. 따라서 Hooks를 써서 컴포넌트의 생명 주기에 맞춰 원하는 작업을 제때 실행시킬 수 있게 해야 한다. 1. useState const [state, setState] = useState(i..

React Naitve란? 2015년 3월 페이스북에 의해 공개된 오픈소스 모바일 어플리케이션 프레임 워크 사용자 인터페이스를 만드는 React에 기반을 두고 제작 웹 브라우저가 아닌, iOS와 Android에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크 React-Native의 장점 두 플랫폼(iOS, Android)을 동시에 개발할 수 있음 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있는 Fast Refresh 기능 제공 Fast Refresh: 컴포넌트가 변할 때 즉각적으로 반응한다는 기능으로, 프로젝트 내 대부분의 수정 내용이 1~2초 내로 변경사항이 적용됨. "수정 → 새로고침", "수정 → 컴파일 → 새로고침" 이라는 번거로운 작업..

토큰의 만료 FCM 토큰은 정해진 수명이나 갱신 주기가 없다. 따라서 시간과 관계없이 아래 이벤트가 발생하지 않는다면 만료되지 않는다. 앱이 인스턴스 ID를 삭제한 경우 앱이 새 기기에서 복원되었을 경우 사용자가 앱을 제거/재설치 한 경우 사용자가 앱 데이터를 지운 경우 토큰의 갱신 상기와 같이 fcm token은 정해진 수명이나 갱신 주기가 없으나, 오래된 토큰은 권장하지 않기 때문에 유효기간(2주)가 지나면 새로운 토큰을 발급받는 것이 좋다. 따라서 마지막 fcm token 발급 시점으로부터 14일 이상 경과한 경우 현재 fcm token을 삭제하고 재 발급한다. // 토큰 삭제 await messaging().deleteToken(); // 재발급 const token = await messagin..

토큰의 생성 앱을 처음 실행할 때 FCM은 클라이언트 앱 인스턴스에 대한 등록 토큰 생성 // React native에서의 토큰 생성 import messaging from '@react-native-firebase/messaging'; const token = await messaging().getToken(); React Native의 경우 android, iOS 설정을 각각 해줘야 한다. iOS 권한 iOS에서는 사용자가 앱에게 알림 권한을 부여하지 않으면 알림 전송을 할 수 없다. 알림 권한 종류 granted not determined(default) declined 사용자가 권한 요청을 거절한다면 다시 요청할 수 없으며, 사용자가 직접 iOS 설정에서 변경해야 한다. // React nativ..

FCMToken이란? firebase Cloud Messaging의 약자로, google firebase에서 사용하는 클라우드 메시징 서비스로, 무료로 메세지를 안정적으로 전송할 수 있는 교차 플랫폼 메시징 솔루션이다. 그렇다면 FcmToken은 왜 사용하는가? fcmToken은 어플리케이션에서 사용자에게 푸시 알림을 줄 때 필요하다. fcmToken은 디바이스마다 다르게 부여 되는데, 서버는 이 토큰으로 디바이스를 구분한다. 이 토큰으로 구분하지 않는다면, 서버는 어떤 디바이스에 알림을 줘야하는 것인지 모르기 때문이다. DB의 유저 테이블에 fcm Token 필드를 추가하고, 푸시 알림을 주고자 할 때 유저의 토큰 필드를 조회하여 프론트에 보내주는 방식으로 앱 푸시 알림을 구현할 수 있다. Fireba..

Javascript란 웹 개발에 주로 사용되며, 웹 페이지를 대화식으로 만드는 프로그래밍 언어 클라이언트 측 스크립팅 언어 객체 지향 프로그래밍 지원 높은 수준의 코드 탐색과 디버깅 자바스크립트 호환 TypeScripte란 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 컴파일 언어, 정적 타입 언어 객체 지향 프로그래밍 지원 높은 수준의 코드 탐색과 디버깅 자바스크립트 호환 ➡️ 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠름. React Native에서의 코드 차이 변수 선언 // Javascript const [ data, setData ] = useState([]); const [ text, setText ] = useS..