🍕 Build your own, custom HTML Elements 리액트 프로젝트 src폴더의 Index.js는 처음으로 실행되는 파일이다. : 여기서 react-dom에서 ReactDom을 임포트하고 있다. 이 말은 react-dom이라는 서드 파티 라이브러리에서 ReactDom이라는 객체를 임포트한다는 뜻 public 폴더의 index.html 이 유일하게 브라우저에 표시되는 화면이다. 리액트가 SPA이기 때문에 그 유일한 하나의 html이 바로 이 친구다. 그러면 컴포넌트(Component)가 뭐야? 리액트 컴포넌트는 결국 자바스크립트 함수(Function)이다!! 컴포넌트는 JSX로 쓰여진 html코드를 반환하는 함수이다. 또한, HTML,JS,CSS의 조합이다. import "./App.cs..
🍕개발환경이란? - 프로그램 개발에 필요한 컴파일러, 통합개발도구(IDE), 서버런타임, 편집기 및 유틸리티 등을 개발 컴퓨터에 세팅해놓은 것을 말합니다. 보통 프론트, 백엔드 개발의 경우 컴퓨터나 OS(운영체제)는 큰 영향이 없다. 하지만 애플의 iOS 앱을 개발한다고 하면 맥 컴퓨터가 있어야 하며 xcode라는 개발툴을 사용해 swift라는 프로그램언어로 개발해야 한다. 🍕Node.js 초기 프로젝트 생성 및 실행 1. Node.js설치 공식홈페이지를 통해 다운로드 LTS 와 최신버전으로 나눠져 있는데 LTS는 안정적, 신뢰도 높은 버전이라 LTS를 선택해서 다운받았다. -> Node.js를 설치할 때 자동으로 자바 패키지 관리 모듈인 NPM이 딸려온다. 2. VSCode 설치 3. 원하는 위치에 새..
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불러오기 또한, 특정한 코드만 변화했을 때 원하는 코드들..
- Total
- Today
- Yesterday
- reactAPI
- 형제 요소 선택자
- 타입스크립트 DT
- 항해99프론트후기
- 원티드 3월 프론트엔드 챌린지
- D 플래그
- 타입스크립트 장점
- grid flex
- float 레이아웃
- 프리렌더링확인법
- && 셸 명령어
- 항해99추천비추천
- nvm 설치순서
- is()
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- getStaticPaths
- aspect-ratio
- ~ ^
- Prittier
- 항해99프론트
- nvm경로 오류
- 원티드 FE 프리온보딩 챌린지
- tilde caret
- 프리온보딩 프론트엔드 챌린지 3월
- 틸드와 캐럿
- 원티드 프리온보딩 FE 챌린지
- getServerSideProps
- 부트캠프항해
- fs모듈 넥스트
- text input pattern
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |