bravo my life!

1. 개요 지식을 필요할 때만 여기저기서 검색하고 적용하다보니 머리속에서는 정리되지 않고 파편화가 되어있다. Context API 를 사용하기 위한 코드 작성법이 어떻게 되는지 알아보자. 2. Context API 사용의 흐름 초기 상태값의 작성 초기 상태값을 작성한다. (예: initialState) 더보기 // TodoContext.js const initialTodo = [ { id: 1, text: '프로젝트 생성하기', done: true }, ]; 리듀서 만들기 액션 타입, useReducer 를 작성한다. 더보기 // TodoContext.js // 초기 상태값 작성 const initialTodo = [ { id: 1, text: '프로젝트 생성하기', done: true }, ]; // ..

1. 개요 & + & 선택자를 사용한다면 편하게 margin을 관리할 수 있다. 연속되는 같은 클래스의 요소들 중 첫 번째 요소를 제외한 나머지만 속성을 줄 수 있는 선택자이다. 하지만 하나의 styled-components 변수안에서 & + & 선택자를 두 번 사용하게 된다면 적용이 불가능하다. styled-components 버전 5.2.0 부터 발생된 문제로 보인다. 똑같은 동작을 하는 다른 방법은 없을까? 2. 코드 상세 좌측이 수정 전, 우측이 수정 후 코드이다. & + & 로 사용하던 선택자를 &:not(:first-child)로 변경하여 첫번째 자식요소를 제외하게 만들어 주었다. 이상없이 작동이 된다.

1. 개요 TextInput이 여러개가 있다고 생각하자. 첫번째 인풋 입력 후, 두번째 인풋으로 이동하는 방법은 인풋을 터치하는 방법이 있겠지만 사용자의 엄지손가락은 이미 키보드에 있다. 엄지손가락의 이동을 최소화하려면 키보드 배열 안에서 다음 인풋으로 이동시키는 버튼이 있어야 할 것이다. 2. useRef 이용 import React, {useCallback, useRef, useState} from 'react'; import { Alert, Pressable, StyleSheet, Text, TextInput, View, } from 'react-native'; function SignIn() { ... const secondInput = useRef(null); return ( 이메일 { seco..

1. 오류 내용 react-native-reanimated 설치 후에 오류가 발행했다. Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`. 2. 해결 과정 프로젝트 루트폴더에 있는 babel.config.js에 다음의 코드를 추가한다. plugins: ['react-native-reanimated/plugin'], module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'],

해당프로젝트 폴더에서 -> ios 폴더로 이동 -> Pods 폴더 삭제 -> ios 폴더에서 터미널에 pod install 입력 후 실행 -> ios 폴더에서 터미널에 arch -x86_64 pod install 입력 후 실행 참고 블로그 https://velog.io/@bcgo99/react-native-pod-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%ACm1-silicon react native pod 관련 에러(m1 silicon ) - error Failed to build iOS project. We ran "xcodebuild" command but it exited with 아래와 같은 에러가 떳을 때 해결법.프로젝트 최상위 폴더 - ios 내에 있는 Podfile 수정..

1. 개요 리액트와 자바스크립트로는 손쉽게 했던 styled-components defaultProps 사용이 타입스크립트에서는 복잡한 느낌이 들어 기록을 위해 포스팅 한다. 2. styled-components에서 defaultProps는 왜 사용할까? defaultProps라는 이름에서 유추할 수 있듯이 CSS를 부모요소에서 props로 전달받기 위해 사용한다. 기본값을 정해 두고 부모요소에서 CSS를 변경할 수 있는 기능인데, 컴포넌트화를 하려 한다면 사용해보자. 가령, 부모요소에 같은 컴포넌트가 여러개 있다고 가정을 하고 각각 CSS를 다르게 적용하고 싶은 상황이 있을 것인데 바로 그럴 때 사용하면 좋은 기능이다. defaultProps로 background: black을 지정한 뒤 styled ..

1. 개요 작동상 문제는 없지만 굉장히 거슬리는 부분이 있다. console.log를 출력하면 두번씩 출력이 되는데 해결해 보도록 하자. 2. 증상 console.log는 분명히 한 줄만 작성했는데도 출력은 두개가 나온다. 3. 해결 src/index.js 에서 만 남기고 를 지워준다. 정상적으로 한 번만 출력이 된다. 4. StrictMode 개발 모드에서 디버그를 하며 로 감싸져 있는 자손요소의 모든 부분을 검사한다고 한다.

1. 개요 참조타입을 복사할 때는 불변성을 지켜주며 복사를 하자. 2. 불변성 관리의 이유 리액트의 상태 업데이트와 관련이 있다. 리액트는 상태 업데이트를 통해 렌더링을 하게 되는데, 리얼돔과 버추얼돔을 비교하며 참조값이 바뀐 내용이 있다면 버추얼돔의 내용을 리얼돔에 반영하는 과정에서 리렌더링이 일어나게 된다. 리액트의 렌더링 과정은 1. 렌더 페이즈 - 버추얼돔과 리얼돔을 비교하는 단계 2. 커밋 페이즈 - 변경된 컴포넌트를 리얼돔에 적용하고 리렌더링을 하는 단계 로 이루어지는데 리액트는 버추얼돔과 리얼돔을 비교할 때 얕은 비교를 하게 되고 이 과정에서 참조값만을 비교하게 된다. 객체타입은 참조타입이라고 하는 만큼 얕은 복사시 참조값이 변경이 되기 때문에 불변성을 지키지 않는다면 원치 않는 리렌더링이 ..

1. 개요 로그인 시도 후 로그인 상태 메세지를 띄울 창을 만들어 보자. toast라는 기능이고 useIonToast hook을 사용하여 구현 할 것이다. 2. 코드 상세 //login.tsx import { IonAvatar, IonContent, IonHeader, IonItem, IonList, IonPage, IonText, IonLabel, IonTitle, IonToolbar, IonItemOptions, IonItemSliding, IonItemOption, IonButton, IonIcon, IonInput, useIonToast, } from "@ionic/react"; import ExploreContainer from "../components/ExploreContainer"; imp..

1. 개요 Firebase로 로그인을 구현할 것이다. 아직 회원가입기능을 만들지 않아 오류는 발생하겠지만 진행해 보겠다. 2.코드 상세 //firebaseConfig.ts import * as firebase from "firebase/app"; import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, updateProfile, signOut, } from "firebase/auth"; import { getAnalytics } from "firebase/analytics"; const config = { apiKey: "AIzaSyBmYIPAvaJgiBdJ7JrI-D2TaxhQvSrdYcc", authDomain: "io..