WEB
-
React JS_RedirectingWEB/ReactJS 2020. 1. 29. 22:50
#6.4 ~ 6.5 아래 강의 중 'ReacJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy [멤버십] 초보를 위한 React Native [중급] React Native, Expo, iOS, Android % Complete academy.nomadcoders.co 1. 리다이렉트 리다이렉트란 페이지를 다른 주소로 연결해 강제 이동 시키는 것이다. state가 없는 경우 오류가 발생하므로 이를 핸들링하기 위해 리다이렉트를 한 것이다. 즉, state가 undefined일 때 홈으로 이동하도록 한 것이다. 리다이렉트를 할 때 보이는 history.push를 살펴보면, 지난 포스팅에서 리액트..
-
React JS_Router 2WEB/ReactJS 2020. 1. 27. 16:23
#6.2 ~ 6.3 아래 강의 중 'ReacJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy % Complete academy.nomadcoders.co 1. 네비게이션 사용하기 /와 /about을 navigate 하기위해서는 네비게이션을 사용해야 한다. Navigation.js 파일에 네비게이션 컴포넌트를 다음과 같이 만든다. 코드 상의 Home, About 각각은 페이지에 대한 목록이라고 볼 수 있다. //src/components/Navigation.js import React from 'react'; import './Navigation.css'; function Navigation..
-
React JS_Router 1WEB/ReactJS 2020. 1. 27. 15:47
#6.0 ~ 6.1 아래 강의 중 'ReacJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy % Complete academy.nomadcoders.co 1. React-Router 준비하기 웹페이지를 interactive(페이지 간 이동이 용이) 하게 만들기 위해서 네비게이션이라는 것을 사용할 것이다. 네비게이션을 사용하기 위해서는 라우터(react-router-dom)라는 것을 써야한다. react-router-dom은 네비게이션 만들어 주는 패키지이다. 리액트에는 라우팅이 내장되어 있지 않기 때문에 따러 설정해야 한다. 일단 설치하자. npm install react-router-do..
-
React JS_웹 페이지 클라우드에 올리기 by GithubWEB/ReactJS 2020. 1. 26. 05:53
#5.0 아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy [풀스택] 인스타그램 클론 코딩 2.0 인스타그램 백엔드 + 프런트엔드 + 앱 + 서버 [중급] NodeJS, Prisma, GraphQL, Hooks, React Native % Complete academy.nomadcoders.co 1. GitHub page로 웹사이트 접속하기 1. gh-pages 설치하기 명령어: npm i gh-pages gh-pages는 내가 만든 웹사이트를 깃허브에 업로드하는 것을 허가해주는 모듈로, 웹사이트를 github의 github page 도메인에 나타나게 해준다. gi..
-
React JS_AxiosWEB/ReactJS 2020. 1. 22. 02:09
#4.0 ~ #4.5 아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy [이론+실전] 코코아톡 클론 코딩 % Complete academy.nomadcoders.co 1. Axios 일반적으로 자바스크립트에서 데이터 fetch하는 방은 fetch를 사용하는 것이다. 하지만 더 좋은 방법인 axios가 있다. 왜 더 좋은지는 둘다 사용해봐야 알 것 같다. 일단 구글링에 의하면, axios가 보다 사용하기 편리하며 fetch보다 더 많은 기능을 가지고 있는것 같다. axios는 fetch 위에 있는 작은 layer라고 생각하면 된다. axios를 사용하기 위한 단계는 ..
-
React JS_StateWEB/ReactJS 2020. 1. 20. 19:06
#3.0 ~ #3.3 아래 강의 중 'ReactJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다. https://academy.nomadcoders.co/courses Academy 바닐라 JS로 크롬 앱 만들기 % Complete academy.nomadcoders.co 1. Class Component State를 다루기 위해서는 컴포넌트를 class component로 선언해야 한다. class component의 형식은 아래와 같으며, React.Component를 extends한다. React.Component안에 state(data)를 넣을 수 있고 변경이 가능하기 때문이다. 즉, State 데이터를 다루기 위해서는 react component를 확장한 class..