moomood

브라우저에 데이터를 저장하는 방법에는 여러 가지가 있지만 대표적으로 CooKie, Local Storage, IndexedDB가 있다. CooKie의 경우 아주적은 데이터만을 저장할 수 있고 쿠키가 저장된 사이트 url에 접근할 경우 매번 서버로 쿠키데이터를 보내준다. LocalStorage는 5MB 크기의 데이터를 저장 가능하며 네트워크로 데이터를 전송하지는 않는다. IndexedDB는 브라우저마다 저장 가능한 용량이 다른데 대표적으로 크롬은 PC 저장공간의 80%, Firefox는 50% 만큼 저장 가능하다. CooKie LocalStorage IndexedDB 용량 소량 5MB 브라우저별로 다름 서버전송여부 전송 미전송 미전송 데이터타입 문자열 문자열 자유 동작방법 동기 동기 비동기 CooKie와 ..

이전에 했던 것과 같이 import를 해준다. import { createStore } from "redux"; state값을 배열로 초기화 해준다. 여기까지는 특별할 것이 없다. const reducer = (state = [], action) => { return state; } const store = createStore(reducer); action을 통해 state 값을 변경해 줄 것인데 여기서 일반 string이나 number 형식과 차이가 발생한다. 중요!!! state의 값은 read only 이다. state의 값을 직접 변경해서는 안된다. XXXXXXXXXXX state.push() XXXXXXXXXXX 와 같은 작업을 해서는 안된다. 절대로! const reducer = (state..

Redux에서 State를 관리하기 위한 방법. 아래와 같이 import 하여 사용한다. import { createStore } from "redux"; 간단한 카운팅 기능 구현을 위해 store를 선언해준다. createStore 함수를 통해 선언하며 매개변수로 reducre 라는함수를 보내주어야한다. ※현재 redux 측으로 부터 createStore는 deprecated 처리되었다. 그러나 사용에는 문제가 없으니 무시해도 상관없다. // reducer 첫째 인자는 값, 둘째 인자는 값을 제어해 주기 위한 object 변수이다. const countModifier = (count = 0, action) => { return count; } const countStore = createStore(co..

redirect : 특정 url을 입력했을 때 지정된 다른 url로 이동시키는 기법 rewrite : redirect와 같은 역할을 하지만 사용자에게 url의 변경을 알리지 않고 내부적으로 이동시키는 기법 NextJs 프로젝트를 생성하고 next.config.js 파일을 보면 버전에 따라 차이는 있겠지만 아래와 같은 형태로 파일이 존재할 것이다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, } module.exports = nextConfig 첫째로 redirect 기능을 사용하기 위해서 nextConfig 안에 redirects라는 함수를 추가해 주어야 한다. /** @type {import('n..

기존 프로젝트의 경우 모든 js 파일을 타입스크립트 파일로 변환할 수 없는경우가 대부분이다. 이런 경우 프로젝트에 타입스크립트를 적용하고 싶은 경우 기존 파일은 그대로 두고 신규 작성 코드부터 ts 파일로 작성을 하게 될것이다. 새로이 ts 파일을 생성하고 기존 자바스크립트 파일을 import 할 경우 ts 파일에서는 아래와 같이 오류가 발생한다. 이를 해결해 주려면 tsconfig.json 파일의 compilerOptions내부에 "allowJs": true 옵션만 추가해 주면 된다. 해당 옵션을 추가해 주면 타입스크립트는 해당 js 파일을 import 해오는 것을 오류가 아닌것으로 받아들인다. 추가적으로 기존 js파일에서 타입스크립트의 문법체크를 적용하고 싶은 경우가 있을 것이다 아래와 같은 js파일..

1. type 방식 type User = { name:string } type Player = User & { ... } - 장점 : 유연하다. alias 지정이 가능하다. 지정한 값만 가지도록 타입 제한이 가능하다. 2. interface 방식 interface User { name:string } interface Player extends User { ... } 장점 : 객체지향 방식에서 이해가 쉽다. property의 축적이 가능하다.(type 으로는 불가능) // property 축적 예제 interface User { name:string } interface User { firstName:string } interface User { lastName:string } const kim: Use..

웹 브라우저의 localStorage와 같이 동작하는 저장소 정도로 이해하면 된다.... https://docs.expo.dev/versions/v48.0.0/sdk/async-storage/ AsyncStorage Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev # 패키지 설치 > npx expo install @react-native-async-storage/async-storage 실제 사용법은 아래 사이트를 참고한다. https://react-native-async-storage.github.io/asyn..

https://reactnative.dev/docs/textinput TextInput · React Native A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad. reactnative.dev Props - placeholder - keyboardType : 입력모드에 들어갔을 때 키보드 유형을 지정해 준다. 직접 사용해 ..

1.TouchableWithoutFeedback https://reactnative.dev/docs/touchablewithoutfeedback TouchableWithoutFeedback · React Native If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. reactnative.dev - UI 효과가 없이 터치했을 때 이벤트를 지정해 줄 수 있다. Props onPress : 터치가 시작되어 끝나는 시점에 호출되는 이벤트를 지정해 줄 수 있다. ( === onClick ) onPressIn : 터치가 시작되는 시점에 이벤트를 지정할 수 ..

https://docs.expo.dev/versions/latest/sdk/location Location Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev #expo-location 설치 > npx expo install expo-location Method 1. 디바이스 권한요청 (필수) - requestBackgroundPermissionsAsync() : 백그라운드 권한요청 - requestForegroundPermissionsAsync() : 포그라운드 권한요청 - getLastKnownPositionAs..