식초의 지식보관소

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의 주소 중 ..

state로 숫자 증감 기능 만들어 보기 state는 동적 데이터를 다룰 때 사용한다. 동적 데이터란 변경될 가능성이 있는 데이터이다. 예를 들어 객체의 구성 요소 중 일부가 있다가 없을 수도 있고, 구성 요소가 하나였다가 둘이 될 수도 있다. 클래스형 컴포넌트 작성하기 App.js에서 두 줄(맨 위, 맨 아래)만 남기고 모두 지운다. 클래스형 컴포넌트 코드 핵심은 App 클래스가 React.Component 클래스를 상속 받도록 extends React.Component를 붙인다. '리액트가 제공하는 Component 클래스를 상속받는다' 의 뜻은? 상속은 '클래스에 다른 클래스의 기능을 추가할 수 있게' 해준다. extends React.Component를 붙이면 (리액트가 제공하는 Component..

비슷한 컴포넌트 여러 개 만들기 앞에서 컴포넌트를 많이 만들때 ,,... 여러개 만들었다. 이것은 비효율적이다. 만약 음식이 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인 엘리먼트에 그려..

update read 기능과 create기능이 결합되어 있다. update란 기존의 콘텐츠를 수정하는 것이다. read처럼 기존의 콘텐츠를 불러와서 form에다가 내용을 추가해주는 작업이 필요하다. form이 들어있는 CreateComponent를 복사해서 이름을 바꾼다. 내용도 바꾼다. App.js로 와서 import에 CreateComponent를 추가한다. 그리고나서 render()부분에 else if 부분을 복사해서 붙여넣기 한다. (this. state.mode === 'update')로 바꿔준다. UpdateComponent.js 에서 제목을 Update로 바꿔준다. 결과 : 브라우저에서 update를 클릭하면 내용부분에 Update라고 뜨고, 콘솔 컴포넌트에서도 mode: update로 바뀐..

베이스 캠프 헷갈리는 개념이 있을 때 이미지 검색을 해보자. 인포그라피를 확인한다. props are read-only (바꾸는 것 금지) states can be modified using this.setState (내부적으로 필요한 것은 state로 관리한다) props와 states 모두 render()함수 호출한다. 두 가지를 적절히 사용하면서 UI를 바꿀 수 있다. 사용자의 props, 구현자의 states 상위 컴포넌트가 하위 컴포넌트로 값을 전달할 때는 props로 전달한다. 하위 컴포넌트가 상위 컴포넌트로 값을 바꾸고 싶을 때는 event를 통해서 한다. vs. REDUX는 하나의 저장소이므로 값이 하나 바뀌면 전체가 알아서 바뀐다. 소개 Create Read Update Delete 중 ..

이벤트 강의에서 한 것 : Subject.js 파일에 있던 코드를 App.js의 Subject 컴포넌트가 있던 자리에 복붙해서 작업했다. 옮겨놨던 코드를 비활성화 한다. 그리고 원래 Subject 컴포넌트 코드를 돌려 놓는다. 이벤트 생산자가 된다! [제목을 클릭했을 때, welcome화면으로 바꾸고 싶다] [Subject 컴포넌트는 onChangePage라는 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때, 이벤트에 설치한 함수를 설치하도록 만든다] App.js 에서 Subject 컴포넌트에 onChangePage 이벤트를 입력한다. onChangePage라는 함수는 props의 형태로 Subject.js에 전달된다. Subject.js 에서 a 태그를 onClick 했을때, 함수가 실행되고, ..

이벤트 챕터에서 하려는 것은 다음과 같다 1. 제목 WEB에 링크를 달아서 -> 클릭하면 Welcome 화면을 보이게 한다 2. 목차 링크를 클릭해서 -> 해당 본문으로 이동한다 이벤트 state props 그리고 render()함수 [제목에 링크를 단다] 제목 파일은 Subject.js 이다. 를 제목을 포함해서 넣는다. [현재 페이지가 Welcome 페이지인지 Read 페이지인지 알아햐 한다] App.js 파일에서 App 컴포넌트 안 State에서 mode 값을 준다. mode: 'welcome' 그리고 mode: 'Welcome'일 때, Content 영역에 있을 내용 넣는다. welcome: {title: 'Welcome', desc: 'Hello, React!!!'} 리액트에서는 props나 S..