공부 기록일지📚

Prettier이란? Visual Strudio Code에서 코드를 보기 좋게 정리해주는 확장 프로그램이다. 대부분의 프로그래밍 언어에서 사용 가능 협업 시 코딩 스타일이 달라서 merge할 때 문제가 생길 수 있으므로 사용하는 것이 좋음 설치방법: Visual Studio Code 화면에서 왼쪽 사이드 바에서 테트리스같이 생긴 extension(확장)아이콘을 누르고 prettier를 검색 후 설치합니다. (가장 위에 뜨는 걸 선택하면 됩니다.) 맨 하단을 보면 Prettier가 설치된 모습을 확인할 수 있다.▼ + 빨간색으로 체크한 부분을 클릭하면 프리티어에 관한 상세 속성을 볼 수 있다. ▼ 프리티어 적용이 안될 때, 해결방법 1. Format on Save 확인 vscode 설정(settings)에..

웹표준은 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 ? '' ..

▶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불러오기 또한, 특정한 코드만 변화했을 때 원하는 코드들..