react 9

react 에서 navigate 사용하기 (useNavigate / Navigate)

🤙 Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줍니다. 1. useNavigate 쓰기 useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공합니다. import { useNavigate } from 'react-router-dom'; function Func() { const navigate = useNavigate(); const onClickImg = () => { navigate(`/comment/id/등등 내가 원하는 주소`); }; return ( ); } export default Func; 이렇게 작성한다고 합니다. 이 코드에서의 url이 ww..

Programming/React 2022.07.23

[REACT] .env 를 이용한 변수선언 및 사용법

ENV란? 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. .env 파일 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. .env 파일은 프로젝트의 최상위 루트에 파일을 만들어놓는다. 환경변수 설정 규칙 변수명은 반드시 ‘REACT_APP­_‘으로 시작되어야한다. create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACTAPP으로 시..

Programming/React 2021.09.07

[REACT] .env 를 이용한 변수선언 및 사용법

ENV란? 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. .env 파일 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. .env 파일은 프로젝트의 최상위 루트에 파일을 만들어놓는다. 변수명은 반드시 ‘REACT_APP­_‘으로 시작되어야한다. create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACTAPP으로 시작되지 않는 환경변수..

Programming/React 2021.08.27

[React] WebPack

Webpack Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다. 그리고 다수의 자바스크립트 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다. 웹팩을 사용하는 이유 각기 다른 자바스크립트를 로딩할 때, 스크립트 로딩 순서와 해당 HTML에서 필요하지 않은 js 파일들까지 로딩하여 리소스 낭비가 생김. 필요한 파일만 로딩하고 관리하고자 웹팩을 사용하게 됨. 1. 웹팩 시작하기 node.js를 설치하고, npm을 설치한다. 그런다음 CLI 환경에서 아래와 같이 작성한다. 1 2 3 4 ..

Programming/React 2020.09.12

[React] React error : 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.

React Project를 실행할때 가끔 yarn을 실행할떄 문제가 발생한다. 그러면 다음과 같은 방법으로 해결할 수 있다. npm run start " react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. " 라는 에러메세지를 볼수 있다 그럴경우 다음과 같은 명령어를 통해 해결할수 있다. npm update npm start

Programming/Web 2019.10.31