react 14

forwardRef 를 알아보자

https://ko.reactjs.org/docs/forwarding-refs.html Forwarding Refs – React A JavaScript library for building user interfaces ko.reactjs.org React.forwardRef를 사용해 전달된 ref를 얻고, 렌더링되는 DOM으로 전달해준다. ref는 직접 접근하기 위해 사용된다. html 엘리먼트가 아닌 React컴포넌트에서 ref props를 사용하려면 forwardRef() 함수를 사용해야한다. 컴포넌트를 forwardRef()로 감싸주면 , 해당 컴포넌트는 두개의 매개변수를 갖게 된다. 어렵잖아..

Frontend/React 2022.05.24

Manifest: Line: 1, column: 1, Syntax error.

갑자기 이 빨간 글자가 떠서 너무 신경쓰였고.. 고쳤습니당 너무 쉽게~! 1. manifest < 가 들어가있는 index.html을 찾아가십쇼 2. rel = "manifest" 을 rel ="/manifest"로 수정하면 끝! 요렇게~~~~ 근데 manifest는 뭘까..? manifest.json 앱에 대한 정보를 담고있는 JSON파일이라구 한다 https://developer.mozilla.org/ko/docs/Web/Manifest Web app manifests | MDN 웹 앱 매니페스트(Web app manifest)는 프로그레시브 웹 앱(PWA)라고 칭하는 웹 기술 모음집의 일부로서, 앱 스토어를 거치지 않고 장치의 홈 화면에 설치할 수 있는 웹사이트를 구성합니다. 단순한 홈 develo..

Frontend/React 2022.04.06

React 18에서 지원하지 않는 [ReactDOM.render]

React 18로 업그레이드 된 후로 18버전을 쓰려고 한다. 이떄 ReactDOM.render는 지원하지 않기 때문에 주의해서 사용하길! ReactDOM.render를 쓰면 17을 쓰게된당~ ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot Before import React from "react"; import ReactDOM from "react-dom"; impor..

Frontend/React 2022.04.06

Next.js 환경변수 (React , Next.js) 를 설정하자

그냥 나는 하던것처럼 .env 파일에 환경변수를 REACT_APP_으로 설정 했을 뿐인데... console.log에 찍어보니 없다...! 당황해서 여기저기 찾아봤고..삽질만 했다 큽 next.js에서는 환경변수 prefix는? NEXT_PUBLIC_ 였ㄷㅏ...^^..ㅋ NEXT_PUBLIC을 쓰는 이유는? 1) React컴포넌트를 사용해 빌드되어 클라이언트에게만 보여지는 React UI 부분 2) Next.js 서버에서 실행되는 부분 이렇게 두가지 부분이 있다. /pages/api라우팅 getServerSideProps() 서버사이드 props를 가져올때 getStaticProps() 빌드시 한번만 props를 가져올때 위의 세가지 기능은 항상 서버에서 실행되므로 NodeJS의 프로세스에 액세스 한다..

TIL/개발지식 2022.03.16