웹 환경에서 JavaScript 목적 = HTML 조작과 변경(핵심) -> HTML조작하는 것이 핵심이라고 했으므로 당연히 JS가 들어간 script태그는 HTML 요소들 아래에 작성해야 오류가 나지 않음(그래서 body태그의 끝쪽에 script태그를 넣으라고 하는 것) ->JS와 HTML은 분리시켜줘야 한다. 그래서 onclick 내부에 바로 js코드를 작성하는 것은 좋지 않음 따로따로 작성해라 ->분리시켜주기 위해 이벤트리스너를 사용하는 것 UI구현 기본 법칙 미리 디자인해놓고 숨기기(UI를 보여주고 안보여주고할때는 css display none을 많이씀) 버튼 누르거나하면 보여주기 + querrySelector로 HTML요소 가져오기 싫으면 그냥 id부여해서 getElementById() 하기 버튼..
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..
- Total
- Today
- Yesterday
- 타입스크립트 장점
- 원티드 프리온보딩 FE 챌린지
- Prittier
- float 레이아웃
- is()
- tilde caret
- grid flex
- text input pattern
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- && 셸 명령어
- nvm 설치순서
- getStaticPaths
- 항해99프론트
- 원티드 3월 프론트엔드 챌린지
- 형제 요소 선택자
- 부트캠프항해
- 항해99추천비추천
- 틸드와 캐럿
- reactAPI
- 항해99프론트후기
- D 플래그
- fs모듈 넥스트
- ~ ^
- aspect-ratio
- 프리온보딩 프론트엔드 챌린지 3월
- nvm경로 오류
- 프리렌더링확인법
- 원티드 FE 프리온보딩 챌린지
- 타입스크립트 DT
- getServerSideProps
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |