React (9) 썸네일형 리스트형 [React] useEffect useEffect(() => { console.log("I run when 'keyword' changes."); }, [keyword]); useEffect 두가지 argument를 가지는 function 첫번째 argument : 우리가 실행시키고 싶은 코드 두번째 argument: dependencies : react.js가 지켜보아야할 코드 keyword가 변화할 때 코드를 실행할 거라고 react.js에게 알려준다. 이것이 바로 빈 array를 주었을 때는 코드가 단 한번만 실행된 이유. 왜냐면 변화하는 부분이 없기 때문에 useEffect(() => { console.log('I run only once.') }, []); 그리고 변화할 코드는 여러가지를 작성해줄 수 있다. useEffect(.. [React] useState, props # 리액트 튜토리얼 ## 0. 참고하면 좋을 사이트 - https://react.dev/learn/thinking-in-react ## 1. state let account = 0x000ads0affads; {account} account=1faadsfadsfadsf - 데이터가 저장되는 곳, 변할때 마다 자동 렌더링 ```js const [counter, setCounter] = useState(0); // number const [loading, setLoading] = useState(true); // boolean const [weather, setWeather] = useState([]); // list const onClick = () => { setCounter((current) => cur.. [React] 에러 해결 : img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text 에러 상황 src 이미지 주소를 삽입하였더니 경고 메세지가 떴다. img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text 원인 및 해결방법 아래와 같이, 웹 표준에 따라 img 태그는 alt를 작성해야 한다. alt를 작성하지 않는 경우도 있지만, 웹표준에 맞추려 alt를 작성해야 하는 것이다. alt 내용은 자유롭게 적으면 된다. [React] React.JS, React-dom , Babel, JSX React.JS UI를 아주 인터랙티브하도록 만들어주는 library로 엔진과 같다. UI에서 바뀐 부분만 업데이트 해준다. React-dom library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌. ReactDOM.render() render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것. 즉, 사용자에게 보여준다는 의미 ReactDOM.render(span, span이 가야할 위치) 그래서 보통 body에 id=“root” 만들어서 span을 root 안에 둔다. JSX 자바스크립트를 확장한 문법으로 html 문법과 유사하다. 1/ 보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 된다.. [React] 오류 sh: react-scripts: command not found 1. 에러 상황 npm start 실행 시 다음과 같은 오류가 났다. 2. 에러 코드 sh: react-scripts: command not found 3. 원인 package.json 내 모든 dependency를 다운로드하지 않아 package.json 내 script를 제대로 읽지 못해서 생긴 에러이다. 해결 방법 npm install 을 통해 모든 패키지를 설치해주기! npm install npm start 를 하니까 리액트가 잘 실행되었다! 출처 : https://heytech.tistory.com/412 [React]react-router-dom 설치하기 1. 터미널 창을 켜서 react-router-dom 을 설치하고 싶은 react 디렉토리로 이동 2. 설치 명령어 입력 npm install react-router-dom --save 3. package.json 에 가서 react-router-dom 이 추가되었는지 확인하기 [React]npm start 실행할 때 포트가 이미 실행중이라고 뜰때 npm start 를 실행하니 다음과 같이 나왔다. ? Something is already running on port 3000. Probably: /usr/local/bin/node /Users/eunnyeongjang/Desktop/projects/test/node_modules/react-scripts/scripts/start.js (pid 32989) in /Users/eunnyeongjang/Desktop/projects/test Would you like to run the app on another port instead? › (Y/n) 이건 localhost:3000/ 이 이미 실행중이라는 뜻. 어디선가 내 컴퓨터에서 실행되고 있나보다. 이럴때는 Y를 누르면 https://localhos.. sudo 계정 이후 npm start permission denied create-react-app 을 실행시키려고 npm start 를 실행시켰더니 다음과 같은 오류가 떴다. Compiled with problems: × ERROR [eslint] EACCES: permission denied, mkdir '/Users/eunnyeongjang/Desktop/projects/test/node_modules/.cache' sudo 를 사용해서 에러가 발생했다. 그래서 이번에도 sudo npm start 로 하니까 성공 ! 이전 1 2 다음
