출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! Publishing 핵심 : github 페이지에 deploy하는 방법에 대해 배운다. cmd에 npm i gh-pages를 입력해준다. . gh-pages는 결과물을 github pages에 업로드 할 수 있게 해준다. 1. pacage.json 파일에서 scripts를 build 시켜준다. scripts를 실행하게 되면, 우리 웹사이트의 production ready code를 생성해주는데, production ready란 코드가 압축되고 모든게 최적화 되는 것을 의미한다. 2. pacage.json 파일 맨 아..

출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! React Router 핵심 :React Router에 대해서 알아본다. . Switch의 역할은 Route를 찾는 것인데 Route는 URL을 의미한다. Switch는 URL을 찾으면, 컴포넌트를 렌더링한다. 또한 Switch는 한번에 Route 하나만 렌더링 되게 해준다. 1. BrowserRouter 방식 function App() { return ( {/* 유저가 해당 경로에 있다면, Detail를 렌더링 해준다는 뜻*/} {/* 유저가 해당 경로에 있다면, Home Route를 렌더링 해준다는 뜻*/} );..

출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! Movie App part 핵심 : Movie App을 만들며 배운것들을 총 복습해본다. 구현할 기능들 : 영화들의 기본적인 정보들과 링크를 삽입하여서 그 영화에 대해서 더 많은 것을 찾아볼 수 있도록 다른 곳과 연결시켜줌 . then이라는 문법보다 더 많이 사용하고 있는 문법이 있는데 바로 async-await이라는 문법이다. then으로는 아래와 같이 작성되고 useEffect(() => { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_..

출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! Coin Tracker 핵심 : Coin Tracker를 만들며 배운것들을 복습해본다. 구현할 기능들 : 페이지를 들어왔을 때 로딩 메세지가 보이고, 코인들이 나열되면 로딩 메세지를 숨기고 코인들을 멋진 리스트로 보여주는 기능 // --------- import --------- import { useEffect, useState } from "react"; function App() { // --------- state --------- const [loading, setLoading] = useState(true..

출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! To Do List 핵심 : to-do list를 만들며 배운것들을 복습해본다. // --------- import --------- import { useEffect, useState } from "react"; function App() { // --------- state --------- const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); // --------- function --------- const onChange=..

출처 : https://nomadcoders.co/ 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! Introduction 핵심 : React에서 Event는 무엇인지, 왜 배워야 하는지에 대해서 알아본다. // button.js에 있는 Button 컴포넌트를 import한다. import { useState } from "react"; function App() { // state const [counter, setValue] = useState(0); // function const onClick =() => { // btn을 클릭시 counter를 2씩 증가해주고 리렌더링 setValue(prev => pre..