전체 글 (131) 썸네일형 리스트형 [Visual Studio Code] vscode 단축키 (터미널 열기, 한 줄 삭제, 한 줄 이동) 기존 터미널 창 열기 : Ctrl + `(백틱, 따옴표 아님, 키보드 자판 물결(~) 위치) 한줄 삭제 : Ctrl + Shift + K 코드 한 줄 씩 이동 : Alt + ↑, ↓ [ReactJS] [Movie App] [2] : react-router(페이지 전환) ReactJS 에서 페이지를 전환하는 방법 현재의 아래와 같은 코드를 좀 정리하고 싶다. div 태그 ul 태그 등 많기에 여기서 ReactJS의 장점을 좀 활용하고자 한다. 바로 Component를 사용할 수 있다는 것이다. Props 를 활용하기 위해 아래와 같이 Movie Component 인자에 적어주었다. 저것이 무슨 뜻이냐 하면 genres,summary 와 같은 정보들을 Movie component가 Parent component 로 부터 받아온다는 것을 의미한다. 그런 다음 이제는 App.js 로 가서 Movie 컴포넌트를 랜더해 줘야 할 것이다. 어떠한 Property 다 보낸 상태 컴포넌트 이기에 저렇게 작성이 가능하다. Props 이기에 자유롭게 이름을 정해줘도 된다. key 는 Re.. [ReactJS] Props, Property Props (ReactJS 의 개념) 상위 컴포넌트가 하위컴포넌트에 값을 전달할때 사용 - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.) Property (JS 의 개념) 객체 내부의 속성 - ‘Property’ 는 속성 이란 뜻으로, JS에서는 객체 내부의 속성을 의미한다. - 객체안에 프로퍼티가 속해있다는 이미지로 생각하면 이해가 빠름 출처: https://goddaehee.tistory.com/300 [갓대희의 작은공간] [ReactJS] [Movie App] - 1 영화 API 가져와서 화면에 출력 (then 대신에 async-await, map) then 대신에 이제는 await - async 를 사용해 볼 것이다. then 과 같은 거고 조금 더 보기 좋아줬을 뿐이다. await 안에 await를 써주어 다음과 같이 축약해 줄 수도 있다. 콘솔 창에서는 아래와 같이 두번 보이는데 그 이유는 setMovies 와 setLoading으로 각기다른 state지만 두번 수정해주었기에 랜더링도 2번 일어난 것이다. 화면에 어떻게 보여줄까? 정답 map!!(map은 오래된 array를 가져다가 각 element, item을 변형시키는 것이었다. 그리고 변형돼서 return 된 것을 포함해 새로운 array에 넣어준 우리는 원하는 걸 얻을 수가 있다.) (보통 map 을 쓰게 되면 배열로 부터 전달받을 각각의 item 에 대해 자유롭게 인자명을 정해줄 수 .. [Chrome]생산성 높여주는 유용한 크롬 확장 프로그램(사이트 차단, 영단어 검색. etc) WasteNoTime 강력추천 (무료)원하는 사이트만 허용 / 특정 사이트만 차단 :https://chrome.google.com/webstore/detail/wastenotime/enebomhlllfaccbelnjhfgblnalofhch WasteNoTime Blocking time-wasting sites so you can be productive. Privacy conscious, feature rich, and highly customizable! chrome.google.com Tooltip Dictionary 영단어 바로 검색 찾고자 하는 단어에 마우스를 올리면 사전을 제공 https://chrome.google.com/webstore/detail/tooltip-dictionary/kibbn.. [ReactJS] 코인api 로 데이터 가져오기(fetch, map) fetch 안의 url의 쿼리문 limit 는 조절해주면 된다. import { useState, useEffect } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers?limit=5000") .then((response) => response.json()) .then((json) => { setCoins(json); setLoading(false); }); }, []); return ( The Coins! {loading ? Load.. [ReactJS]삼항 연산자 사용시 주의사항 (JSX 식에는 부모 요소가 하나 있어야 합니다.)(Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. ) 증상 삼항 연산자를 이용해 조건문에 따른 태그들을 return 해 주고 싶었는데 잘되지 않았다. 에러메세지 JSX 식에는 부모 요소가 하나 있어야 합니다. Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? (27:10) 해결 반환하는 태그는 상위 부모태그 1개로 제한된다. 즉 묶어주어야 한다. 아래의 경우에는 div 태그로 input, h1, ul 태그들을 묶어주었다. [ReactJS] [error solving] You need to enable JavaScript to run this app. & Request content was evicted from inspector cache 증상 : api를 fetch 를 통해 데이터를 받아오려 하는데 오류메세지 뜨면서 안됨. 강의에서는 그냥 되던데. 오류 메세지 : [1] (콘솔 요소 body 태그 안) :You need to enable JavaScript to run this app. [2] (네트워크 ticker) : Request content was evicted from inspector cache 해결 : api를 통해 받아오는 정보가 너무 많을 때 생기는 듯?? 그냥 전부다 받아오는 건 어떻게 해야하는지 모르겠다. https://api.coinpaprika.com/v1/tickers?limit=10 마지막에 쿼리문으로 요청하는 데이터의 양을 제한하면 해결이 됨. 강의에서 되던건 어쩌면 요청하는 데이터의 양이 강의 당시 보다 .. 이전 1 2 3 4 5 ··· 17 다음
