리액트 썸네일형 리스트형 [Netflix clone coding] 넷플릭스 첫 화면을 리엑트와 The movie db api를 사용하여 만들었다. 제일 먼저 내 프로젝트 폴더에서 create-react-app을 해준다. 그 후 The movie DB API의 key를 생성한다. The movie DB 사이트에서 로그인 후 복사해준다. (https://www.themoviedb.org/?language=ko) 이 API를 인스턴스화하기 위하여 api라는 폴더를 프로젝트 내에 생성해주고 그 안에 axios.js, requests,js파일을 만든다. import axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", params:{ api_key: process.e.. 더보기 [React] React Router Dom React Router Dom이란? React Router Dom을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다 라우팅이 실행중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍쳐와 달리 React Router Dom은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다. Single Page Application (SPA) 리액트는 SPA이기 떄문에 하나의 index.html 파일을 가지고 있다. 이 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트들이 index.htrml 템플릿에 넣으므로 페이지를 변경하게 된다. 이때 이 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 준다. React Router 설정하기 src 폴더에서.. 더보기 [React] ToDo-List React를 이용한 ToDo List를 만들었다. 전체 코드 (App.js) import React, {Component} from "react"; import "./App.css"; export default class App extends Component{ state = { todoData:[ ], value:"" } btnStyle={ color:"#fff", border: "none", padding:"5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } getStyle = (completed)=>{ return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: co.. 더보기 [REACT]React state 컴포넌트의 입력은 props이고 이 props를 컴포넌트의 함수 처리 하여 return값이 새로운 UI가 된다. 이때 함수를 다시 실행하여 새로운 return을 만들어주는 데이터는 바로 state이다. state를 사용하는 경우는 어떠한 변화나 이벤트가 생기면 함수를 다시 실행하여 새로운 값을 출력해주는 것이다. 먼저 state를 사용하기 위해선 import {userState, useState} from 'react'; 를 추가해준다. 그럼 바로 예시를 살펴보자. 우리가 하고 싶은 것은 아래처럼 Header 컴포넌트인 WEB을 클릭하면 Article에서 'WELCOME'을 나타내거나 nav를 선택했을 시에 그에 맞는 문장이 Article에 나오게 하고 싶은 것이다. 그러기 위해선 상태를 나타내는 변수를.. 더보기 [REACT]React 컴포넌트와 속성 컴포넌트 컴포넌트는 React의 핵심으로 초기 글에서 말했듯이 사용자 지정 태그이다. Header, Nav, Article이 App에서 사용된 컴포넌트라고 할 수 있다. 이렇게 함수형식으로 만들어져 태그형식으로 사용된다. 이 컴포넌트를 직접 만들어 사용하거나 다른 사람들이 만든 컴포넌트를 사용할 수 있다. Props Prop은 컴포넌트의 속성을 말한다. 각 컴포넌트의 속성을 주기 위해선 먼저 위처럼 title, topics, body처럼 값을 정해준다. 그 후 각 컴포넌트 함수에서 그 값들을 어떻게 사용할 건지 지정해준다. 각 함수들의 props가 다양하게 사용되는 것을 확인할 수 있다. (괄호를 하면 문자 그대로 인식하지 않아서 props를 사용할 때 {}를 사용한다.) 더보기 [REACT]React의 구조와 수정 & 배포 React의 구조를 살펴보자. 제일 먼저 src폴더의 index.js를 보면 이라는 태그가 있다. 이 ./App은 App.js라는 파일에서 import 했음을 위에서 확인할 수 있다. 그렇다면 이 ./App은 무슨 역할을 하는 것인지 App.js 파일을 확인해보자. App.js를 보면 알 수 있듯이 이 App이라는 Function는 html 구조를 가진 것을 알 수 있다. 그 함수안에서의 return 값이 index.js를 통해 사용자에게 보여지고 있는 것이다. 정리해보면 index.js는 웹의 입구이자 여러가지 전역적인 설정이 포함된다. 그리고 App.js의 수정을 통해 내용,UI를 편집할 수 있다. 그렇다면 화면 관리자모드에서 보이는 id가 root인 div는 무엇일까? Index.js에서 확인할 수.. 더보기 [REACT]React의 본질과 개발 환경 구축 React의 본질은 무엇일까? 본질이라는 말이 거창하지만 간단히 말하면 코드의 Grouping이라고 생각한다. 복잡한 코드 내용을 사용자 정의 태그를 통해서 간단히 사용, 재사용하는 것이다. React를 사용하는 방법은 Class와 Function이 있는데 최근에는 Function이 주를 이뤄서 나도 Function으로 사용할 예정. 이제 React 환경을 구축해보자. React 환경을 구축하기 위해서 node.js가 필요하다. 그 후에 VSC에서 React를 활용할 폴더를 열어준다. Terminal에서 ‘npx create-react-app 현재폴더’를 해주면 그 폴더에 React 환경이 설치된다. npm에서 사용가능한 언어가 나온다. 그 후 'npm start'를 명령해주면 React 개발 환경이 구.. 더보기 이전 1 다음
