공부 기록일지📚

최신 ECMAScript인 TypeScript를 개발할 때 사용하고 사용자한테 배포할때는 BABEL(타입스크립트를 ES5, ES6의 형태로 변환된 코드로 만들어주는 자바스크립트 트랜스컴파일러 )을 이용한다. 현재 동향 SPA (Single Page Application) -> 하나의 페이지 안에서 필요한 데이터를 가져와 부분적으로 업데이트하는 형식 이러한 SPA를 조금 더 쉽게 구현하기 위해서 사용되는 대표 js프레임워크가 바로 React.js Angular.js Vue.js 인 것입니다. 강력한 자바스크립트 엔진V8*을 통해서 node.js(Back-end)가 등장 *V8은 google이 개발했으며 chrome과 node.js에서 사용됩니다. JavaScript는 WebAPI와 헷갈릴 수 있는데 다르다..

웹 환경에서 JavaScript 목적 = HTML 조작과 변경(핵심) -> HTML조작하는 것이 핵심이라고 했으므로 당연히 JS가 들어간 script태그는 HTML 요소들 아래에 작성해야 오류가 나지 않음(그래서 body태그의 끝쪽에 script태그를 넣으라고 하는 것) ->JS와 HTML은 분리시켜줘야 한다. 그래서 onclick 내부에 바로 js코드를 작성하는 것은 좋지 않음 따로따로 작성해라 ->분리시켜주기 위해 이벤트리스너를 사용하는 것 UI구현 기본 법칙 미리 디자인해놓고 숨기기(UI를 보여주고 안보여주고할때는 css display none을 많이씀) 버튼 누르거나하면 보여주기 + querrySelector로 HTML요소 가져오기 싫으면 그냥 id부여해서 getElementById() 하기 버튼..

terminal에 명령어: npm i gh-pages // (i = install)를 통해 gh-pages를 설치하기 gh-pages : 결과물을 github pages에 업로드할 수 있게 해주는 패키지 github pages : github에서 제공하는 무료 서비스, html css javascript 를 올리면 웹사이트로 만들어서 무료로 배포해줌 설치가 완료됐으면 package.json에 있는 script를 확인하기 "build" 스크립트: 실행 시, 내 웹사이트의 production ready code 생성( *production ready - 코드가 압축되고 모든게 최적화 된다라는 의미) -> build 폴더가 생성된다. 폴더 내부에는 압축된 JS코드들이 담긴 파일들이 있음 build 스크립트 실..

이번에는 기존에 Movie.js로 뭉쳐놓았던 것을 App.js과 Movie.js로 컴포넌트를 분할해서 정복해봅시다. App.js import { useEffect, useState } from 'react'; import Movie from './Movie'; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const json = await ( await fetch( `https:yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year`, ) ).json(..

이전에는 단일 페이지에 관해서 작업하는 일을 했다면 이번에는 어떻게 페이지를 여러개 만들고 전환하는 지에 대해서 배워보자. 영화 API를 통해서 영화정보를 가져온다. (쿼리를 통해서 원하는 정보만 가져오기) ?minimum_rating=8.5&sort_by=year //쿼리 스트링: 별점이 8.5이상인 영화 + sort year(연도별로 정렬) 가장 최신의 영화를 먼저 보이게 API 로딩이 끝나면 영화들을 보여준다. Movie.js import { useEffect, useState } from 'react'; function Movie() { const [loading, setLoading] = useState(true); useEffect(() => { fetch( `https:yts.mx/api/v..

Coin.js function Coin() { const [loading, setLoading] = useState(true); //coins의 기본값으로 []최소 빈배열을 주는 이유는 .length했을 때 undefined는 길이를 갖고 있지 않기 때문이다. const [coins, setCoins] = useState([]); useEffect(() => { fetch('https://api.coinpaprika.com/v1/tickers?limit=100') .then((response) => response.json()) .then((json) => { setCoins(json); setLoading(false); }); }, []); return ( The Coins! {loading ? '' ..

▶JS와 다른점: state를 직접적으로 수정하지 않는다. state는 무조건 setState함수를 사용하여 수정한다. e.g.) 기존에 빈배열에 요소를 추가해줄 때, array명.push() 이런식으로 코드를 작성했는데 그렇게 하지 않습니다. 혹은 toDos = []; 이런 식으로 X toDos array를 수정하고 싶다면 수정하는 modifier function을 사용해야 합니다. array에 element를 추가하는 방법 (array를 직접적으로 수정하지 않으면서 setToDos로 array에 element를 추가하는 방법) state는 항상 새로운 거여야 한다. modifier 함수를 사용할 때는 두가지 옵션이 있다. (복습개념) 1. setToDo("hi") // 직접 값을 전달하기 2. set..

JSX에서 JavaScript를 쓸 때에는 {}중괄호 안에 자바스크립트를 써야 한다. component는 단지 jsx를 부르는 function(함수)일 뿐이다. react.js는 state를 변화시킬 때 component를 재실행(refresh)시킨다. -> 모든 코드가 재실행된다. UI의 관점으로 보면, 새로운 데이터가 들어올 때마다 자동으로 새로고침되니 좋은 일이라고 할 수 있다. 하지만 성능적으로 좋다고 할 수 있을까? 처음에만 실행되고 그 이후에는 state가 변경이 있더라도 실행되지 않게 하는 방법을 알아야 한다. 내 컴포넌트 내부의 몇몇 코드는 처음 딱 한번만 실행되고 다시는 실행되지 않도록 하고 싶을 수 있기 때문이다. e.g.) API불러오기 또한, 특정한 코드만 변화했을 때 원하는 코드들..