공부 기록일지📚

웹표준은 W3C에서 지정한 웹에서 표준적으로 사용되는 기술과 규칙을 말함 웹 표준에 호환성과 접근성도 포함 호환성: 다양한 디바이스, 브라우저에서 일관성있게 보이고 같은 기능을 제공하는 것 접근성: 호환성과 함께 웹사이트에서 제공하는 정보를 차별없이 누구나 다양한 환경에서 일관성 있게 볼 수 있도록 보장하는 것 아래의 사이트를 통해 HTML 코드 오류나 전체적인 문법 검사를 할 수 있습니다. ->이후에 그 아래에 있는 CSS 마크업 검사를 하면 됩니다. https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on s..

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 ? '' ..