식초의 지식보관소

react-router-dom 설치하고 프로젝트 폴더 정리하기 가장 처음 만들 기능은 네비게이션 기능이다. Home, About 메뉴를 추가한다. Home은 영화 앱 화면으로 이동시켜주고, About은 개발자 자기 소개 화면으로 이동시켜준다. '화면 이동을 시켜주는 장치'가 라우터이다. (URL에 맞게 이동시켜주는 장치) 라우터는 react-router-dom 패키지를 이용하면 쉽게 도입할 수 있다. react-router-dom 설치하기 패키지 설치하기. > npm install react-router-dom components 폴더에 Movie 컴포넌트 옮기기 컴포넌트를 역할에 맞게 분리해서 폴더에 담아 관리한다. src 폴더 안에 components 폴더 만든다. Movie.js 와 Movie.cs..

영화 앱 전체 모습 수정하기 만들 영화 앱은 다음과 비슷하다. 왼쪽 위에 살짝 튀어나온 느낌의 영화 포스터 이미지가 있고, 오른쪽에는 제목, 장르, 평점(별로 표시), 시놉시스 등이 있다. 색은 회색, 흰색을 많이 사용했다. 회원가입 기능이 없다. -영화 포스터 이미지 -제목 -개봉 연도 -장르 -등급 -시놉시스 (영화 줄거리) App.css 내용 모두 지우기 노마드 코더 영화 API에서 장르 키 살펴본다 아직 추가하지 않은 영화 데이터는 장르이다. genres 키를 영화 앱에 추가한다. Movie 컴포넌트에 genres props 넘겨주기 App 컴포넌트에서 Movie 컴포넌트에 genres props를 넘겨준다고 가정하고 Movie 컴포넌트를 수정해보자. Movie 컴포넌트 인자에 genres를 추가..

영화 API 사용해 보기 영화 데이터를 로딩하려면 자바스크립트의 fetch()함수가 필요하다. fetch()함수 대신 axios 도구 사용해서 영화 앱을 만든다. axios 설치하기 터미널에 입력한다. > npm install axios YTS 영화 데이터 API 살펴보기 주소창 yts.lt/api 입력 → YTS 영화 데이터 API 사이트 → 'List Movies API' 기능 사용 API는 특정 주소를 입력하면 그 주소에 맞는 결과 보내준다. 추가로 특정 주소에 조건을 붙여 입력하면 그 조건까지 고려한 결과 보내준다. Endpoint의 가장 위에 있는 주소 사용할 것이다. 이 주소는 최신 영화 20개에 대한 데이터를 기본으로 보내준다. 영화 목록 데이터 확인하기 주소창에 Endpoint의 주소 중 ..

비슷한 컴포넌트 여러 개 만들기 앞에서 컴포넌트를 많이 만들때 ,,... 여러개 만들었다. 이것은 비효율적이다. 만약 음식이 1000개이면 반복 작성하고 fav props에도 다른 값을 입력해야 한다. 서버에서 데이터를 받아 출력하는 경우, 음식 데이터의 개수를 알 수 없다면 더 문제가 된다. 음식 데이터 만들기 서버에서 데이터를 받았다고 가정하고, 데이터를 출력하는 방법을 알아본다. foodILike라는 변수를 만들고, 빈 배열 할당한다. Food 컴포넌트는 모두 삭제한다. 서버에서 데이터 넘어온다 상상하며 배열에 코드를 넣는다. image 키값은 인터넷에서 찾은 이미지의 주소 복붙한다. 링크를 이용하면 이미지 손쉽게 출력 가능하다. name은 음식의 이름이다. 이제 foodILike에 있는 데이터를 ..

리액트 앱 실행 리액트 앱 다시 실행하기 터미널 -> 리액트 앱의 루트 폴더 -> npm start 명령어 입력 -> 자동으로 리액트 앱 실행 이때 터미널을 종료하면 안 된다. 코드 수정하기 App.js 파일에서 App( )함수의 반환값이 많아지면 소괄호로 감싸야한다. ↓ 컴포넌트 컴포넌트 정의 (by. App.js ) App( ) 함수가 정의되어 있고, HTML을 반환한다. 컴포넌트 사용 (by. index.js ) 을 ReactDOM .render( ) 함수의 첫번째 인자로 전달한다. = App 컴포넌트가 반환하는 것들을 화면에 그릴 수 있다. App 컴포넌트가 그려질 위치는 ReactDOM .render( ) 함수의 두번째 인자로 전달한다. -> App 컴포넌트는 아이디가 root인 엘리먼트에 그려..

자바스크립트는 잘못 쓴 내용도 최대한 출력하려고함 ㅎ (아래처럼) coercion => conversion (자바스크립트가 강제적으로 값을 변환시킴) console.log(66 + true) : 67, true => 1 변환시킴, false => 0 console.log(55 - true) : 54, + - * / 다 해당한다 console.log(66 + "false") : 66false console.log(25 - "1") : 24, - 는 문자열을 숫자열로 변환한다 console.log("" === true) : false, "" => 0 변환시킴, "" 0 NaN undefined null 모두 false이다 console.log("1" ==1) : true, == : type coercion ..

Canvas 이벤트 / 2D Context / path로 좌표 연동 / 색 바꾸기 / 붓 크기 / 채우기 모드 / 이미지 저장 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109..

1. reset.css (매우 좋은 CSS 기본툴) - 검색해서 복붙 2. style.css (꾸미기 CSS) : @import "reset.css"; 맨위에 써서 연결한다 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 1..

캔버스 / 컨트롤러 (붓 크기 조절 / 채우기 버튼, 저장 버튼 / 색상 버튼) 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 PaintJS Fill Save Colored by Color Scripter cs