react11 [TIL] useRef current null 이슈 해결 📘 TL;DR 특정 element를 조건부로 호출하고 있기에 초기 렌더링 시 컴포넌트가 만들어지지 않은 상태에서, ref.current가 null인 이슈가 발생한다. ref 특성상 렌더링 될 때 데이터를 받아오고, 읽기 전용이라 리렌더링을 발생하지 않고 업데이트되지 않도록 동작하므로 발생하는 문제이다. 따라서 ref에 있는 조건을 하위로 옮겨서 element가 항상 렌더링 되도록 수정하여 해결하였다. ✅ 요구사항 🙋🏽 PO: 리뷰를 작성할 때 리뷰 작성 영역이 최상단으로 스크롤되도록 만들어주세요~ 👩🏻💻 FE: textarea 쪽에 ref 추가해서 focus되었을 때 scrollto 하면 되겠다! ❗️ 에러 발생 를 감싸는 상위 태그 의 element를 useRef를 사용하여 가져왔는데, const c.. 2023. 7. 17. [React] CRA(create-react-app) + TypeScript 세팅하기 이제는 React 프로젝트에 TypeScript를 적용하지 않은 케이스를 만나는 게 어려운 시대가 되었다. 프로젝트 생성할 때마다 매번 공식 문서를 확인하고 검색하는 나 자신을 위해서 기록용으로 소소하게 남겨두려고 한다. 우선 해야 할 작업들은 다음과 같다. CRA(create-react-app)에 TypeScript 템플릿을 적용하여 프로젝트를 생성하기 eslint, prettier를 적용하여 코드 컨벤션 보장하기 typescript가 필요한 라이브러리 세팅 tsconfig.json에 src 절대 경로 세팅 1️⃣ CRA(create-react-app) + TypeScript TypeScript 로 새로운 Create React App 프로젝트를 생성하려면 원하는 디렉터리에서 아래 명령어를 작성한다. .. 2023. 4. 28. [React] Hooks란? 사용방법과 배경 정리 (useEffect, useState, Custom Hook) Hook Hook을 사용하여 기존 Class 바탕의 코드를 작성할 필요 없이, 상태 값 관리와 여러 React 기능을 사용할 수 있다. (v16.8 부터 추가됨) Hook이 만들어진 배경 기존 컴포넌트 사이에서 상태 로직 재사용이 어려웠다. React는 컴포넌트 간 재사용 가능한 로직을 붙이는 방법을 제공하지 않는다.(ex. 스토어에 연결) 따라서, render props나 HOC(고차 컴포넌트) 패턴으로 해결해 왔지만, 이런 패턴은 컴포넌트 재구성을 강요하며, 코드 추적을 어렵게 만든다. provicders, consumers, HOS, render props 그리고 다른 레이어로 둘러싸인 wrapper hell이 될 수 있다. 그래서 React는 상태 관련 로직 공유를 위한 좀 더 좋은 기초 요소가 .. 2023. 4. 21. [OpenAI] 음악 추천 서비스 만들어보기 (React) 1부 오늘은 ChatGPT에 사용된 OpenAI를 사용해서 음악 추천 서비스를 만들어보려고 합니다! 어떻게 만들면 되는지 과정을 기록해보고 공유해보겠습니다. OpenAI 가이드를 따라서 하면 어렵지 않게 서비스를 만들 수 있습니다. 아래 OpenAI 링크에서 가이드를 확인할 수 있어요. OpenAI 링크: https://platform.openai.com 0. 먼저 Api Key를 발급받아 저장해둡니다. 첫 번째 발급받을 때에는 영구히 유지할 수 있는데, 두 번째 발급부터는 기간이 있다고 하니 나중에 만료일자 신경쓰지 않아도 되도록 잘 저장해두어야겠어요. 저는 메모장과 노션에 따로 저장해두었습니다. 1. 먼저 저는 빠른 세팅을 위해서 CRA로 React 프로젝트를 생성해주었습니다. 음악 추천 서비스이니 이름은.. 2023. 2. 18. Typescript에서 useState를 props로 넘기는 법 useState로 선언한 setValue를 컴포넌트에 props로 넘기고 싶은데 아래처럼 코드를 짜면 Typescript에서는 타입 경고가 뜬다! // ParentComponent.tsx const [value, setValue] = useState(true); // ... return ( ); // SomeComponent.tsx interface SomeComponentProps { setValue: () => void; } // ... 이 때 저 ParentComponent.tsx의 setValue에 마우스를 올리면 이런 친절한 가이드가 나오는데, 이대로 인터페이스 타입 세팅을 수정해주면 된다. // SomeComponent.tsx import { Dispatch, SetStateAction } f.. 2022. 11. 9. [TIL] iOS 16 개발자 모드가 필요함 설정 방법 프로젝트: react + cordova 프로젝트 기기: iOS 16으로 업데이트 이슈: App distribution에 올려놓은 앱이 실행되지 않고 ‘개발자 모드가 필요함’ 팝업 노출됨 (00 앱을 실행하려면 개발자 모드가 필요합니다. 개발자 모드가 활성화되기 전까지는 이 앱을 사용할 수 없습니다. 문구) 해결 방법: iOS16 설정 > 개인정보 보호 및 보안 > Developer Mode(개발자 모드) 활성화 > 재시동 2022. 10. 14. React에서 <input> 태그를 사용할 때 주의할 점 리액트에서 input을 사용하다 보면 가끔 원하는 대로 동작하지 않을 때가 있는데, 이 때 props나 state 값을 잘 연결했는지 확인해보아야 한다. 주의할 점은 다음과 같다. 1. (중요) input에 value 속성을 지정하면 인풋값이 변경되지 않는다. 항상 변경되는 상태값(this.state.inputValue)을 연결해주어야 한다. 2. React의 onChange 이벤트는 값이 입력되어 변경이 생기면 발생한다. 참고 및 출처 https://velog.io/@towozy/React를-쓰면서-착각할-수-있는-몇가지-요소-3kjukr898l 2021. 7. 23. [React] React onClick에 여러 함수를 넣고 싶다면 (+주의사항) React onClick할 때 여러 동작을 붙이고 싶은 경우가 많다. 처음에 많이 당황스러웠던 에러는 onClick에 함수 두 개 넣었을 때 예상치도 못했는데 에러가 무한으로 발생했을 때. 이런 간단한 코드에서 에러가 발생하다니 난 바보야.. 같은 생각 들면서 당황스러웠더랬지.. 그럼 이럴 때는 어떻게 하면 되는지 침착하게 알아보자. 함수 하나일 때와 여러 개일 때의 차이점은? 단순하게 설명하자면 함수 하나일 때와 여러 개일 때의 차이는 바로 () => {} 유무이다. 당연하게도 onClick에 여러 함수를 넣었을 때, 그냥 무작정 코드 추가만 하게 되면 에러가 발생한다. 실수로 놓칠 때도 있었고 알고 나서도 꽤 많은 에러가 여기서 났었다. 이 정도 실수는 다신 안해 싶을 때 또 찾아오는 에러.. 방심은.. 2021. 7. 23. React, React-Native 한 번에 여러 스타일 적용하는 법 한 번에 여러 스타일 적용하는 법 (multiple styles) 스타일 적용 시 아래와 같은 TypeError가 발생했고 스타일 적용 문제였다. React — TypeError: CSS2Properties doesn’t have an indexed property setter for ‘0’ 한 태그에 여러 스타일을 적용하려고 한 부분에서 생긴 에러였고, 한 번에 여러 스타일을 적용하는 해결방법을 찾았다. React style={Object.assign({},style1, style2, ...)} React-Native style={[style1, style2, ...]} 참고 https://medium.com/@abhaytalreja/react-typeerror-css2properties-doesnt-.. 2021. 7. 23. [Redux] 새로고침 유지: Redux Persist 테스트 후기 도입 배경 Redux의 스토어는 페이지 새로고침 시 state의 데이터들이 초기화되기 때문에, 새로고침 시에도 저장된 상태가 없어지지 않도록 캐시 기능을 구현하는 장치가 필요했다. 기존에는 새로고침 시에 로그인이 풀리지 않도록 하기 위해서, LocalStorage로 사용자 인증 상태를 확인하기 위한 토큰을 저장하고 불러와서 사용하고는 했다. 하지만 그 토큰에 페이지의 많은 상태값이 의존하고 있고, LocalStorage에 매번 직접 접근하여 인증 정보를 가져오는 것보다 store에서 관리하는 것이 더 적합하다고 생각했고, 추후 자동 로그인 기능 도입을 위해서도 반드시 대안이 필요할 것이라고 판단하였다. 또한 새로고침 시에 유지해야 할 상태값들이 많이 추가되었고, 앞으로의 확장성을 위해서도 Redux Pe.. 2021. 7. 23. React 빌드, 배포 시 주의할 점 소스맵 제거하기 create-react-app으로 빌드, 배포하는 경우 기본적으로 webpack에 의해 번들링 된 파일과 sourcemap이 생성된다. sourcemap은 디버깅을 위한 파일이기 때문에 브라우저 내에서 다시 원본 소스처럼 확인할 수 있다. 개발자 도구에서 source 확인 시, 코드가 그대로 노출될 위험이 있으므로 반드시 package.json에서 아래와 같이 수정이 필요하다. 최종 배포 전에 꼭 브라우저에서 다시 확인하는 작업이 중요하다. GENERATE_SOURCEMAP=false "build" : "GENERATE_SOURCEMAP=false react-scripts build" 또는 빌드 후 직접 삭제 (v1.0.11 보다 높은 버전이어서 사용해보지는 않았다) "build": "r.. 2021. 7. 23. 이전 1 다음
