사과하는 제라스

https://github.com/crossplatformkorea/react-native-kakao-login/issues/231 카카오톡이 설치된 IOS 기기에서 로그인 할 경우 카카오톡으로 넘어간 다음 아무런 응답이 오질 Version of kakao-login libraries 3.3.2 Version of react-native 0.63.4 Platforms you faced the error (IOS or Android or both?) IOS Expected behavior 카카오톡이 설치된 IOS 기기에서 로그인 Actual behavior 카카오톡이 설치된 ... github.com 카카오 소셜 로그인을 구현해두었고 ios 시뮬레이터에서는 잘 보이지만 TestFlight로 접근한 ios ..

해당 오류는 Xcode가 없어서 발생한 문제였다. Xcode를 설치를 마친 후 실행하면 잘 굴러간다.

- 웹 애플리케이션에서는 서버쪽 데이터가 필요할 때 Ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신함. - JS에서는 비동기 작업을 할 때 가장 흔히 사용하는 방법이 콜백 함수를 사용하는 것임. - Promise는 콜백 지옥을 형성하지 않게 하는 방안으로 ES6에 도입된 기능임. -> Promise 객체를 생성하고 이를 반환하는 함수에 .then으로 콜백 요청 가능 - async/await는 Promise를 더 쉽게 사용할 수 있게 해주는 ES8 문법임. -> 함수의 앞부분에 async 키워드를 추가하고 해당 함수 내부에 Promise의 앞부분에 await 키워드를 사용함. (이러면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있음.) - .prettierrc ..

- 라우팅이란? "사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것." - 라우팅 시스템 라이브러리 종류 1) react-router 2) Next.js 3) react-location, rakkas 등등 - SPA(Single Page Application)이란? "하나의 페이지로 이루어진 애플리케이션" -> HTML을 한번만 받아와서 웹 애플리케이션을 실행시킨 후, 이후에는 필요한 데이터만 받아와서 화면에 업데이트하는 것. - 리액트 라우터 적용 및 기본 사용법 - 기본 사용법 1) 를 src/index.js 파일에서 감싸주면 됨. 2) 컴포넌트 내에 로 트리 틀을 잡음. - 타 페이지로 이동하는 Link 버튼 설정 소개 - URL 파라미터 : useParams라는 Hook을 쓰면 URL 파..

- immer 라이브러리를 설치하여 사용함. - 사용법: import produce from 'immer'; //이렇게 import해와서 사용. ... const [form, setForm] = useState({name: '', username: ''}); //아래와 같이 작성하면 됨. const func = () =>{ setForm( produce(form, draft => {draft[name] = value;}) ) } //useState의 함수형 업데이트로 쓸 수도 있음. const func = () =>{ setForm( produce(draft => {draft[name] = value;}) ) } immer 라이브러리를 쓰면 컴포넌트의 상태 업데이트가 까다로울 때 사용 시 유용함.

- useState 사용 시 useState(func()) //이러면 리렌더링될 때마다 func함수가 호출됨. useState(func) //이런 식으로 파라미터를 함수 형태로 넣어주면 컴포넌트가 처음 렌더링딜 때만 func 함수 실행함. - 느려지는 원인 분석 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceUpdate 함수가 실행될 때 컴포넌트의 개수가 많은데 모두 리렌더링을 하게 되면 느려지는 이슈 발생 -> 컴포넌트 리렌더링 성능을 최적화해줘야 함. 1. React.memo를 활용 import React from 'react'; import { MdCheckBoxOutlineBlank, MdCheckBox, MdRem..

주로 쓰는 Prettier 설정 //.prettierrc { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80, } - 의 요소로 onSubmit이 있음. -> onClick으로 클릭 버튼을 둘 수도 있지만 onSubmit 이벤트의 경우 인풋에서 엔터키를 눌렀을 때도 발생하기 때문에 편리함. - Style 공부 .TodoListItem-virtualized { & + & { border-top: 1px solid #dee2e6; } &:nth-child(even) { background: #f8f9fa; } } .TodoListItem { padding: 1re..

1. CSS 2. Sass, Scss 3. CSS Module 4. Styled-component {...} import styled, { css } from "styled-components"; const Box = styled.div` background: ${(props) => props.color || "blue"}; -> props로 값을 전달해주어서 적용시킬 수가 있음. padding: 1rem; display: flex; width: 1024px; margin: 0 auto; @media (max-width: 1024px) { width: 768px; } @media (max-width: 768px) { width: 100%; } `; const Button = styled.button` b..

정리보단 지식 쌓기 느낌으로 정리하였다. - React.StrictMode란? useEffect를 사용한 코드에 문제가 있는지 없는지 감지하기 때문에 console.log() 코드가 두번 실행이 됨. - useEffect를 통해 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떤 작업을 수행하고 싶을 땐, useEffect에서 뒷정리(cleanup) 함수를 반환해 주어야 함. -> 렌더링될 때마다 뒷정리 함수가 계속 나타남, 뒷정리 함수가 호출될 때는 업데이트되기 직전의 값을 보여줌. 오직 언마운트될 때만 뒷정리 함수를 호출하고 싶으면 useEffect 함수의 두번째 파라미터에 []를 넣으면 됨. - 리듀서: 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환..

라이프사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 카테고리는 총 3가지로 나뉨 1. 마운트 2. 업데이트 3. 언마운트 마운트 : DOM이 생성되고 웹 브라우저 상에 나타나는 것. 컴포넌트 만들기 -> constructor -> getDerivedStateFromProps -> render -> componentDidMount 업데이트 : props가 바뀔 때 / state가 바뀔 때 / 부모 컴포넌트가 리렌더링될 때 / this. forceUpdate로 강제로 렌더링을 트리거할 때 업데이트를 발생시키는 요인(ex. props변경, state 변경, 부모 컴포넌트 ..