반응형 React16 npm install과 npm install --save의 차이 위 차이를 알기전에 먼저 package.json과 package-lock의 차이부터 알고가자 1. package.json package.json은 의존성 패키지 목록을 저장하는 파일이다. 즉 내 프로젝트에 필요한 외부 라이브러리들의 목록들이나 마찬가지이다. 그리고 npm install을 치면 설치될 목록들이다. 2. package-lock.json package-lock.json은 실제로 설치된 패키지가 저장된 파일이다. 무슨말이냐 하면, 내가 package.json에 버전을 명시해서 기록해놔도 실제로는 그 버전대로 설치되지 않을 수 있다. 그리고 실제로 설치된 버전들이 기록되는 파일은 package-lock.json이다 그럼 npm install과 npm install --save의 차이는? npm i.. 2023. 6. 30. ESLint 끄는법 리액트를 하다보면 ESLint가 에러가 아닌데 에러가 나도록 표시하는 경우가 있다. 몹시 짜증나므로 ESLint를 끄는방법을 배워보도록 하자 간단하다. .env 파일에서 아래와 같이 추가해준다. DISABLE_ESLINT_PLUGIN=true 2022. 12. 2. 리액트에서 카메라 사용법 https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia MediaDevices.getUserMedia() - Web APIs | MDN The MediaDevices.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media. developer.mozilla.org 1. 개요 React에서 카메라를 사용하려면 getUserMedia() 함수를 사용하면 됩니다 허나 이 함수는 단순히 카메라만 사용하는것이 아닌 마.. 2022. 12. 2. 부모 컴포넌트에서 자식 컴포넌트 함수 호출하기 1. 개요 부모 컴포넌트에서 자식 컴포넌트의 함수를 호출하려면 다음 두가지를 알아야 한다 forwadRef : 자식 컴포넌트의 요소에 대해 ref를 따는 API useImperativeHandle : 자식 컴포넌트의 여러 요소를 부모에게 노출시키는 hook. 여러개의 요소를 오브젝트의 형태로 담아 부모에게 전달 할 수 있다. 위 두가지는 서로 짝짝쿵이며 이에 대한 설명은 아래 글에 간단하게 적어놨다. (링크타기 부담스러우신분들은 안타도 충분히 위 두줄로 이해 되니깐 그냥 패스하세용) [React] forwardRef, useImperativeHandle에 대한 이해 1. 한줄요약 자식 컴포넌트의 element에 대해 ref를 따고 싶으면 forwardRef를 사용해라! 2. forwardRef에 대한 예.. 2022. 11. 17. forwardRef, useImperativeHandle에 대한 이해 1. 한줄요약 자식 컴포넌트의 element에 대해 ref를 따고 싶으면 forwardRef를 사용해라! 2. forwardRef에 대한 예제 아래와 같은 FancyButton이라는 컴포넌트가 있다고 하자 function FancyButton(props) { return ( {props.children} ); } 이 컴포넌트를 자식으로 두는 부모의 컴포넌트가, 저 의 ref를 따고 싶다면? forwardRef를 사용하면 된다. const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); // You can now get a ref directly to the DOM button: const ref = React.createRef(.. 2022. 11. 17. 이벤트 버블링과 캡처링 https://www.robinwieruch.de/react-event-bubbling-capturing/ React: Event Bubbling and Capturing Event bubbling in React explained with examples. You will learn how to prevent events from bubbling, how to capture events before the bubbling, and how to access the target and currentTarget ... www.robinwieruch.de 1. 개요 리액트 컴포넌트를 여러개 tree구조로 만들고 각각의 컴포넌트에다가 click 리스너를 달았다고 하자. 그리고 클릭 이벤트를 발생시켰다. 그럼 t.. 2022. 11. 17. 리액트에서 특정페이지 스크롤 막기 useEffect를 이용하여 컴포넌트가 마운트 될 때 스크롤을 막고, 컴포넌트 정리를 할 때 return 값으로 스크롤을 해제해준다. useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = 'auto'; } }, []); 2022. 11. 16. 초 간단 Redux 사용법 https://redux.js.org/tutorials/quick-start Quick Start | Redux - How to set up and use Redux Toolkit with React-Redux redux.js.org Redux란? state를 관리해주는 라이브러리 왜씁니까? state를 선언했는데 이를 어디 저 밑에 있는 자식컴포넌트한테 줘서 쓸일이 있다고 칩시다. 그럼 죄다 props 뚫어줘서 state랑 setState함수 넘겨줘야 되는데 끔찍함. 그래서 state를 전역으로 관리하는게 필요할 때 씀 1. 설치 npm install @reduxjs/toolkit react-redux 2. 개념 알아둬야할 개념 세가지가 있음 Store : 말그대로 상태를 저장하는곳 Provider :.. 2022. 11. 8. Framer 애니메이션 배우기 https://www.framer.com/docs/introduction/ Introduction | Framer for Developers Get started with Framer Motion and learn by exploring interactive examples. www.framer.com 리액트에서는 애니메이션 구현방법이 여러가지이이다. 그중에서 가장 많이 쓰는 Framer에 대해 배워보도록 하겠다. (본 내용은 위 사이트를 번역한 내용임) 1. Overview, 프레이머 간단히 둘러보기 먼저 프레이머가 어떻게 돌아가는지, 어떤 기능들이 있는지 살펴보자. 그리고 각각의 자세한 내용은 후반부에 설명하겠다. 컴포넌트 프레이머에서는 애니메이션을 하기 위해서 기존 DOM 요소들에 motion을 붙.. 2022. 11. 1. Cannot find file does not match the corresponding name on disk 리액트를 하다가 파일 임포트를 할 때 absolute path 설정을 해주면 가끔 저런 에러가 뜬다. 분명 파일 위치를 제대로 정해줬는데 왜 못찾는다고 난리일 까... 원인을 알아보니 망할 vscode의 자동완성 때문이였다. 나는 위에처럼 Root라는 컴포넌트를 임포트하고 싶었는데 vscode가 자동으로 위와같이 경로를 만들어 주었다. 허나 확인해보니 실제 경로는 아래처럼 되어있다. 무엇이 문제인지 진짜 한참 고민하다가 겨우 알았다... 실제 경로는 'routes/root' 가 아니라 'routes/Root' 라는 것을... vscode는 소문자로 찾아서 임포트 해주었지만 실제로는 대문자를 적어줘야 했던 거다 맨날 android studio같은 갓IDE만 쓰다가 vscode 쓰니깐 화병나 미춰버리긋네.... 2022. 9. 21. useHref() may be used only in the context of a <Router> component. 문제원인 리액트 라우터를 사용할 때 컴포넌트를 바깥쪽에서 사용하여 생긴 문제이다. 라우터 바깥에 있으니 Link가 가리키는 곳이 어딘지 몰라 에러가 나는 것이다. 해결방법 를 라우터 안쪽으로 옮겨주면 해결된다 2022. 9. 19. Objects are not valid as a react child 해결법 문제 원인 자바스크립트 Object를 리액트 컴포넌트처럼 사용하려 했을 때 생기는 문제이다 function myComponent() { const jsObject = { abc: 1, edf : 2}; return ( {jsObject} // jsObject는 리액트 컴포넌트가 아니므로 에러! ); } 해결방법 리액트 컴포넌트가 아닌 jsObject가 마치 리액트 컴포넌트처럼 사용된 부분이 있는지 확인한다 2022. 9. 19. React Router v6.4 튜토리얼 배우기 https://reactrouter.com/en/main/start/tutorial Tutorial Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that let's you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in t reactrouter.com All images and contents from above link 양이 조금 방대해서, 순서나 내용에 오류가 조금 있을 수 .. 2022. 9. 16. Fragment 사용법 Fragment란? 프래그먼트는 컴포넌트가 여러개의 엘리먼트를 하나로묶어, 하나의 엘리먼트처럼 리턴해주록 하는 기능이다. 컴포넌트는 하나의 엘리먼트를 리턴해야 한다. 물론 그 엘리먼트 안에 여러 자식 엘리먼트들이 있을 수 있다. 그러나 특정한 상황에서 여러개의 엘리먼트를 리턴해주어야 하는 경우가 있다. 아래 예시를 보자 class Table extends React.Component { render() { return ( ); } } 위 예시에서 안에 Columns는 여러개의 를 리턴해야 한다 허나 컴포넌트는 하나의 엘리먼트만 리턴해야 함으로 이를 로 아래처럼 감쌌다고 하자 class Columns extends React.Component { render() { return ( Hello World ).. 2022. 9. 15. 리액트 커스텀 환경변수 사용하기 https://create-react-app.dev/docs/adding-custom-environment-variables/ Adding Custom Environment Variables | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev 1. 개요 Create Recat App에서는 커스텀 환경변수를 추가하여 마치 local variable 처럼 접근하여 사용이 가능하다. 리액트에서는 기본적으로 NODE_ENV라는 환경변수가 정의되어 있으며 커스텀으로 사용하는 환경변수는 REACT_APP_ 으로 시작한다. 2. 환경변수를 정의하는법 환경변수를 정의하는 방법은.. 2022. 9. 14. useEffect 이해하기 https://reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces reactjs.org 공식문서 설명이 한글로 거지같아서 영어로 읽고 한번 정리하는 내용임 useEffect는 class Component의 componentDidMount, componentDidUpdate, componentWillUnmount 에 대응되는 개념이다. 많은 케이스에서 componentDidMount와 componentDidUpdate에 똑같은 작업을 동시에 수행하는 경우가 있었다. 이에 페이스북은 useEffect에 두 기능을 한번에 묶어버렸다. 물론 따로 if문으로 두.. 2022. 9. 6. 이전 1 다음 반응형
