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

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

Swift 란? https://developer.apple.com/kr/swift Swift - Apple Developer Swift는 iOS, iPadOS, macOS, tvOS 및 watchOS를 위한 강력하고 직관적인 프로그래밍 언어입니다. Swift 코드 작성은 대화식으로 재미있고, 구문은 간결하면서도 표현력이 풍부하며, Swift에는 개발자들이 좋 developer.apple.com Swift는 Apple에서 개발한 프로그래밍 언어로, iOS, macOS, watchOS 및 tvOS 앱을 개발하는 데 사용된다. Swift는 C 및 Objective-C와 호환되며, 안전하고 빠른 코드 작성을 위해 설계되었다. Swift의 특징 안전 중심 설계(SAFE) 안전하게 코드를 작성할 수 있는 기능 제공..

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 플랫폼을 동시에 개발할..

Redux(리덕스)란? Redux는 Javascript 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 상태를 관리할 수 있다. 예를 들어 회원가입 시 사용자가 입력한 정보를 가지고 다른 화면으로 이동해야 한다고 가정했을 때 이를 props로 넘기는 것은 매우 비효율적이다. 따라서 상태 관리 라이브러리인 Redux를 사용하여 쉽게 상태 값을 전달하거나 업데이트 할 수 있다는 것이다. 즉 전역 상태를 관리할 때 굉장히 효과적이다. Redux의 특징 1. Single source of truth Redux는 한 곳에서 데이터를 전역적으로 관리하고, 관리하는 이곳을 store라고 부른다. 즉, 하나뿐인 데이터 공간이 있다. 2. State..

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

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

Next.js란 ? - React에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크 - 특별한 설정 없이 SSR, SEO부터 Typescript까지 생산에 필요한 많은 기능들을 제공해주는 강력한 React 프레임워크 SSR - 서버 사이드 렌더링 - 서버 측에서 렌더링하여, 클라이언트 쪽으로 보내주는 것 요청이 올 때마다 해당하는 html 문서를 그때 그때 생성하여 반환 - ex) react CSR - 클라이언트 사이드 렌더링 - 서버에서 데이터를 받아와, 클라이언트 환경에서 렌더링하여 브라우저 화면에 표시하는 것 - ex) next.js Next.js의 작동 방식 1. 초기에 사용자가 서버에 페이지 접속을 요청하면, 기본적으로 서버 측에서 React 코드 실행 2. React.js를 서버 측에서 Pr..

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..