CodeTech (70) 썸네일형 리스트형 React Native - 1 [설치] React Native - 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다.[3] 안드로이드[4], iOS, 웹[5], UWP[6]용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다 즉, react로 모바일 앱을 만들때 사용한다. react로 모바일 앱을 만들게 해주는 프레임 워크라고 할수 있다. 개발환경은 - 모바일 기기에 expo client 설치 - node 설치 - npm 설치 - expo-cli 패키지 설치 (react native의 react-create-app같은 명령어 이다.) macbook@Macbookui-MacBookPro ~ % npm install -g expo-.. React - Material-UI [설치] CSS 에서 Material - UI로 - 별로 만들지 않은 웹사이트 지만 CSS 파일들을 조금씩 material - ui 로 변경시켜 종국에는 모든 css파일 자체가 없게 만들어보자 Material - UI - 기존의 웹개발에서는 UI 구성을 css를 사용해서 컴포넌트 js에 import시켜서 직접 해당 컴포넌트를 꾸며줬다. 물론 이방법도 나쁜 방법은 아니지만 컴포넌트의 상태가 바뀌게 되면 해당 css를 따로따로 넣어줘야 한다는 점이 매우 귀찮다. 즉, 유동적 변화에 대처가 어럽다. - Material UI는 React 개발에 쉽게 사용할 수 있는 UI - Framework 이다. - 다양한 브라우저가 기기와 맞지 않는 호환을 갖거나 html문법이 먹히지 않을 경우 material - ui 가 이를 수.. React - 8 [Router, HashRouter, BrowserRouter, Link] Router - 기본적으로 router라는 것은 어떤 인풋 하나로 다양한 아웃풋으로 나아가게 하는 중계기의 의미이다. 즉, react에서도 router 라는 것은 index.html에 들어오고 나서 router를 거침으로서 나머지 페이지로 이동할 수 있게 하는 중계의 역할을 한다. 사용자가 url로 웹페이지에 접속하면 해당 하는 웹페이지를 나눠주는 중계 역할을한다. import React from 'react'; import { HashRouter, Route } from "react-router-dom"; import About from "./routes/About"; import Home from "./routes/Home"; function App(){ return } export default A.. React - [github에 page 배포하기] 만든 react app을 무료로 배포하려면 어떻게 해야할까? github에서는 무료로 backend가 없는 페이지들을 배포시켜준다. 먼저 git-pages를 설치해야한다. 1. gh-pages 패키지 설치 npm install gh-pages 설치가 되면 react-app내부에 있는 package.json 페이지로 넘어간다. 2. package.json 파일 수정 맨아래에 hompage 속성을 하나 넣는다. https://username.github.io/reactAppName/ 이러한 형태로 url을 넣는다. 물론 곧 만들어진 페이지 주소이다. 아직은 만들어지지 않았다. username: github 닉네임 reactAppName: react 프로젝트 이름(단 프로젝트 이름은 모두 소문자여야만 한다.).. React - 다른사람의 react project가 실행이 안된다면? 내 react-project를 git push해서 올려놓고 다시 시작하려고 하면 안되는 경우가 굉장히 많다. 혹은 다른 사람의 react-project를 받아와 놓고 로컬에서 실행시키면 안되는 경우도 굉장히 많다. 해당 에러는 전부 아래 코드로 시작한다. "npm start" permission denied 이런경우는 react_app에 들어있는 node 모듈들이 현재 내컴퓨터에 있는 node 모듈과 맞지 않아서 그렇다. 즉, react_app의 node_module을 지워주고 다시 nodeJS를 설치해주면된다. medium.com/@heygabriel/npm-start-permission-denied-error-how-to-solve-it-2387c7472319 "npm start" permission.. React - 7 data-fetch [setTimeout, async/await] 컴포넌트가 실행될때 constructor -> render() -> componentDidMount() 이렇게 실행된다.그렇다면 6초후에 상태를 변경하고 싶다면? class App extends React.Component { state = { isLoading: true }; // render하면 진행되는 함수이다. 이함수는 setTimeout()함수를 통해 setState()를 6초 후에 시켰다. // 즉 data를 fetch 한것이다. componentDidMount() { setTimeout(() => { this.setState({ isLoading: false }); }, 6000) } render() { const { isLoading } = this.state; return ( {isLoa.. React - 6 State [setState(), life cycle method] function component - 쉽게 말해 함수형태의 컴포넌트이다. function APP(){ } 이렇게 정의된 컴포넌트들은 전부 함수형 컴포넌트이다. return 형태로서 반환하고 스크린에 모양을 넘길수 있다. Class component - 클래스 형태의 컴포넌트이다. - return 형태가 없어도 된다. class App extends React.Component{ render(){ return I am a class component } } 이러한 형태로서 React.Component을 상속받는다. React.component는 render()함수를 갖고 있기 때문에 APP class도 render 함수를 사용할 수 있다. 그리고 render함수가 class안에 있다면 react는 자동적으.. React - 5 [웹사이트에 동적 데이터 추가하기] 동적데이터 - 변화하는 데이터를 넣음으로서 웹페이지가 항상 같은 내용이 아닌 변화되는 데이터에 따라 달라지는 동적 변화가 일어나는 웹사이트를 만들수 있다. 웹사이트에 동적 데이터 추가하기 const onepiece = [ { name : "루피", image : "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.aladin.co.kr%2Fshop%2Fwproduct.aspx%3FItemId%3D218911203&psig=AOvVaw0g6yWi-7xweZ40-2DwCq0R&ust=1605342401333000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjh786M_-wCFQAAAAAdAAAAABAD" }, { name : "상디".. 이전 1 2 3 4 5 6 7 ··· 9 다음
