React

JavaScript 자바스크립트 이벤트 리스너(eventListener)

나.. 이벤트리스너 모르네 ✍ addEventListener EventTarget 인터페이스의 메서드. 지정한 유형의 이벤트를 수신할 때마다 호출할 함수를 설정한다. = 호출 시 인자를 전달받는다. 일반적인 대상 Element, Document, Window지만 XMLHttpRequest 같이 이벤트를 지원하는 모든 객체가 대상이 될 수도 있다. target.addEventListener('click', function(){}) 이벤트명을 나타낸 문자열 함수 (콜백함수) 옵션 ( capture, once, passive, signal ... ) 기존 이벤트 핸들러 (onclick)등을 사용하는 것에 비해 addEventListener을 사용하면 이전에 추가한 이벤트 핸들러를 제거할 수 있응 대응 메소드 ..

[ React Hook Form ] react에서 form 쉽게 이용하기 (+TypeScript)

0. 이용 목적 react에서 form을 사용해 본 사람이면 알겠지만, 더욱이 form의 개수가 한 두 개가 아닌 무더기로 있어본 경험을 해본 사람이면 알겠지만 react에서 form을 만들고 input과 button을 관리하는 데는 은근히 신경 쓸 부분이 많다. input에 작성된 값을 인식하고... 보내고... preventDefault() 까지 익숙하다면 익숙한 과정이지만 더 간결한 코드를 위해 이번 프로젝트에서 이용해 보았다. react에서 form을 작성하는게 지겹다면 꼭 한번 시도해보면 좋을 것! react 뿐만 아니라 react native에서도 사용할 수 있다 1. 설치 설치 npm install react-hook-form 혹은 yarn add react-hook-form 2. 사용 방법..

[ TIL ] Next.js에서 Link 사용하기

✍ React와 Next.js에서 란? React에서 react-router-dom을 이용할 때도 Link 태그를 사용했었다. : react-router-dom About 익숙한 모습이다. : Next.js Home {post.title} Blog Post . . . 다른 점이 몇 개 있다. 그 중 하나가 바로 a 태그이다. react에서는 페이지를 전환하는 과정에서 페이지를 불러오지 않고 페이지의 주소만 변경해야 하기 때문에 a 태그를 쓰지 않는다. 반면에 Next.js는 페이지 전환을 방지하는 Link 내에서 a 태그를 사용한다. Home Next.js Link 태그 안에 a 태그를 따로 쓰지 않더라도 HTML 마크업은 a 태그 안에 Home이 쌓여져 나온다 => a 태그를 Link 안에 넣지 않아도..

[ TIL ] Next.js 동적 라우팅 ( Dynamic Routing )

✍ Next.js에서의 라우팅 Next에서는 Static Routing(정적 라우팅)과 Dynamic Routing(동적 라우팅)을 지원한다. Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route. The files inside the pages directory can be used to define most common patterns. Next.js는 파일 시스템 기반의 라우팅을 해준다 pages 경로에 파일을 추가하면 자동적으로 route할 수 있다 => Next.js 프로젝트..

BrowserRouter HashRouter 차이 + BrowserRouter 배포시 흰 화면 문제

내가 공부하다가 궁금해서 정리해본 차이점 react는 알다시피 SPA(single page application)에 최적화 되어있다. 그 이유 중 하나가 바로 router. 1. react-router-dom을 설치해서 이용하며 2. a 태그를 이용할 때 생기는 무의미한 재랜더링을 예방 => 속도가 빠르다 router에는 우리가 익히 아는 BrowserRouter HashRouter 외에도 StaticRouter MemoryRouter NativeRouter 이 있다. 🤷‍♀️ BrowserRouter과 HashRouter의 차이는? BrowserRouter www.123123/post 1. HTML5의 history API를 이용해 UI를 업데이트 2. 동적인 페이지에 적합 3. 새로 고침 / 경로를 ..

[ CSS ] 아이템에 shadow 주기

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com css shadow쓸 때 좋음 https://getcssscan.com/css-buttons-examples?ref=beautifulboxshadow-bottom CSS Scan - The fastest and easiest way t..

[react] .process.env.REACT_APP_KEY undefined

문제 상황 드림코딩 강의를 들으면서 분명히 하라는 대로 했는데 계속해서 문제가 생겼다. firebase도 일부러 다운그레이드를 해서 버전 7로 실행했는데. 계속 process.env.REACT_APP_FIREBASE_API_KEY가 undefined라는 것 key 값이 잘못되었나 확인을 하고 .env 파일에서 값을 복붙해 컴포넌트에 직접 담았을 때는 정상적으로 작동되었다. 따라서 key값에는 문제가 없고, _FIREBASE_API_KEY 뿐만 아니라 .env 파일에 담아둔 키들이 활동을 못하는 것 같았다 해결방법 일단 맨 처음 할 일은 .env파일에 ,를 넣은 것은 아닌지 살펴보고 .env파일을 root에 생성한 것이 맞는지 다시 확인한다. 아무리 해도 코드에 문제가 없다면 'dotenv'를 설치하면 된..