개발12 [React Native Webview] 웹뷰에서 가상 키보드 노출 유무 감지하기 서비스를 개발할 때 기획상 가상 키보드의 노출 여부에 따라 레이아웃이 변경되어야 하는 상황이 발생할 수 있는데, 이 때 가상 키보드가 노출되어 있는지에 대한 정보를 알아야 구현이 가능하다. 해당 이슈에서는 네이티브에 해당 기능이 있기 때문에 감지 자체는 네이티브에서 하고, 그 데이터를 웹으로 전송하는 방식으로 구현했다.[가상 키보드 노출 예시]React Native먼저, Keyboard 모듈에 이벤트리스너를 생성해 가상 키보드 노출 여부를 웹뷰로 전송(postMessage)한다.iOS의 리스너 타입은 keyboardWillShow, keyboardWillHide이며, AOS는 keyboardDidShow, keyboardDidHide이다.주의할 점은, show와 hide 이벤트가 따로 있으므로 해당하는 .. 2024. 8. 11. [SWR] 무한스크롤 구현할 때 useSWRInfinite에서 항상 첫 페이지를 다시 불러오는 문제 문제 React에서 SWR 사용중 무한스크롤을 구현할 때, useSWRInfinite를 써서 구현할 수 있다. 이 때, 네트워트탭을 보면 이상한 점이 보인다.(중간 sentry는 무시) 이미지를 보면 최초 1페이지를 요청 후, 스크롤을 내려 2페이지를 요청할 때, 또 1페이지를 부른다. 그 후 3페이지를 요청할 때도 마찬가지로 1페이지를 다시 요청한다. (왜 그러지..?) 원인 SWR 깃허브의 유사한 이슈들과 공식 문서를 확인 결과, SWR에서는 관련된 옵션을 제공하고 있었다. revalidateFirstPage revalidateFirstPage 옵션은 무한스크롤 요청시마다 첫 페이지의 유효성을 검사할건지를 선택하는 옵션이며, 기본적으로 true로 활성화 되어있다. 예를 들어, 1페이지를 요청 후 2페.. 2023. 9. 16. React 환경 변수 설정 React 환경 변수 설정 React 개발 시 환경 변수로 분리되는 값들이 있는데, 이 환경 변수들은 .env 파일을 생성해 값을 설정하여 사용할 수 있다.(React에서는 REACT_APP_ 키워드가 앞에 붙은 변수들만 환경 변수로 사용 가능하다) // .env 파일 예시 REACT_APP_ENV=development REACT_APP_API_BASE_URL=https://url GENERATE_SOURCEMAP=false .env 설정을 마치고 나면 React에서는 설정했던 변수명을 아래와 같이 가지고 올 수 있다. const BASE_URL = process.env.REACT_APP_API_BASE_URL; .env의 우선 순위 env 파일은 우선순위를 가지고 있는데, .env가 가장 마지막으로 적.. 2023. 6. 2. AWS CodePipeline 환경 변수 세팅 1. AWS → CodePipeline에 접속해서 설정하고자 하는 파이프라인 선택 2. 해당 파이프라인 오른쪽 위 편집 버튼 클릭 3. Build 단계 스테이지 편집 클릭 (등록 설정에 따라 명칭은 다를 수 있습니다.) 4. + 작업추가 버튼 왼쪽 아래의 편집 아이콘 클릭 (X 버튼 왼쪽 위치) 5. 환경 변수 항목에서 환경 변수 추가 클릭 6. 변수명(이름)과 값을 작성 후 최하단 저장 버튼 클릭 2023. 6. 2. iframe 내부 스크롤 위치 감지하기 React에서 iframe 사용하기 iframe은 외부 파일을 중첩으로 삽입하는 것이기 때문에 별도의 환경으로 취급되어 React에서 일반적인 방법으로 컨트롤 할 수가 없지만, window.postMessage 메서드를 활용하면 상호작용 가능하다. 아래는 외부 html 파일을 삽입했고, 외부 파일의 스크롤을 감지하여 React 컴포넌트에 이벤트를 줘야하는 상황에 대한 해결책이다. window.postMessage() postMessage()는 다른 윈도우나 프레임으로 메시지를 안전하게 전달하는 데 사용되며, 부모와 자식 프레임, 또는 다른 도메인 간에도 통신할 수 있다. 두 가지의 매개변수가 있다. 1. message: 전송할 데이터: 문자열, 객체, 숫자 등 모든 형태 데이터 2. targetOrigi.. 2023. 6. 1. netlify 커스텀 도메인 연결하기 1. netlify.com 접속 후 왼쪽 사이드 메뉴의 Sites 클릭 후 도메인을 연결할 사이트 클릭 2. 왼쪽 사이드 메뉴의 Site settings → Domain management → Domains 클릭 3. Production domains 항목 하단에 있는 Add a domain 버튼 클릭 4. 아래 입력창에 타사(카페24, 가비아 등)에서 구매한 도메인을 입력하고, 아래 Add domain 클릭 5. 도메인을 등록했으면, 이제 구매한 도메인 업체 사이트에 로그인해서 네임서버를 변경 netlify의 네임서버는 도메인 등록 후 확인 가능하며, 3번 항목에서 등록한 도메인을 클릭하면 노출(카페24의 경우, 호스팅 로그인 후 도메인관리 → 해당 도메인을 선택하고 네임서버 변경 클릭 후 netlif.. 2023. 5. 27. react-hook-form + yup으로 효율적인 폼 관리하기 react-hook-form 공식 문서 yup 공식 문서 react-hook-form + yup react-hook-form은 사용자로부터 데이터를 수집하는 form을 좀 더 효율적으로 관리할 수 있도록 도와주는 라이브러리. 비제어 컴포넌트 방식으로 구현되어 있어 렌더링 이슈를 해결가능하며, yup은 form의 유효성 검증을 도와주는 라이브라리이며 주로 react-hook-form과 함께 사용한다. 설치 yarn add react-hook-form yup @hookform/resolvers yup 세팅 우선 유효성 검증을 하기위한 schema를 세팅한다. import * as yup from "yup"; const schema = yup.object({ id: yup .string() .required(.. 2023. 3. 25. nvm "PREFIX" environment variable 에러 발생 에러 발생 nvm is not compatible with the "PREFIX" environment variable: currently set to "/opt/homebrew" Run `unset PREFIX` to unset it. 해결책 노드 경로를 찾지 못해 발생한 문제로, yarn을 brew로 설치하면(brew install yarn) 프리픽스가 붙어 생기는 문제이다. brew uninstall yarn으로 삭제 후 npm install —global yarn으로 재설치해서 해결 2023. 3. 19. Styled Components 적용하기(React + Typescript) styled-components 설치 styled-components와 @types/styled-components를 함께 설치해준다. yarn add styled-components yarn add --dev @types/styled-components기본 적용 import styled from "styled-components"; const App = () => { return ( color change ); } const StyledButton = styled.button` width: 200px; height: 50px; font-size: 16px; `;간단 예제 클릭 시 버튼의 색이 변경되는 예제 const App = () => { const [color, setColor] = useState.. 2023. 3. 19. React + Typescript 프로젝트에 eslint, prettier 적용 기본적으로 vscode를 사용한다면 extensions에서 eslint와 prettier를 설치해주는 것이 좋다. eslint 설치 yarn add -D eslint eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react react 문법 규칙 적용 @typescript-eslint/parser typeScript parser @typescript-eslint/eslint-plugin typescript-eslint의 규칙 적용 .eslintrc 생성 // .eslintrc 파일을 루트에 생성하고 아래 기본적인 내용을 작성한다. { "parser": "@typescript-eslint/.. 2023. 2. 5. 이전 1 2 다음