Coding Story

노마드코더 React JS 마스터 클래스 #2 STYLED COMPONENTS npm i styled-components 로 styled-components를 설치해준다. import styled from "styled-components"; function App() { return ( ); } export default App; 기존의 코드는 태그 안에 일일히 style을 지정해주는 것이였다. styled component 사용하면 className이나 style을 사용할 필요가 없다. styled component에서 import한 styled를 이용한다. div를 사용해 닫아줄 필요가 없다. 모든 style은 컴포넌트를 사용하기 전에 미리 컴포넌트에 포함된다. css코드를 css 방식 그대로 쓸 ..

async / wait를 사용하면 비동기 처리를 할 수 있다. 이전엔 promise 를 사용하였는데, 비동기 처리에서 사용되는 객체로 axios가 이를 기반으로 만들어졌다. promise의 단점을 해결하기 위해 async/await 키워드가 추가되었다. const getMovies = async () => { const response = await fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ); const json = await response.json(); 이렇게도 사용할 수 있다. const getMovies = async () => { const json = await ( await fetch( `ht..

import styles from "./App.module.css"; import { useState, useEffect } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); const [money, setMoney] = useState([]); const onChange = (event) => setMoney(event.target.value); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((jso..

노마드코더 ReactJS로 영화 웹 서비스 만들기 #7 To Do List import { useState, useEffect } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDos((currentArray) => [toDo, ...currentArray]); setToDo(""); }; console..

더보기 노마드코더 ReactJS로 영화 웹 서비스 만들기 #Cleanup import Button from "./Button"; import styles from "./App.module.css"; import { useState, useEffect } from "react"; function Hello() { useEffect(() => { console.log("hi :)"); return () => console.log("bye :("); }, []); return Hello; } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return (..

import Button from "./Button"; import styles from "./App.module.css"; import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); useEffect(() => { console.log("I run only once."); }, []); // 처음 rend..

학기 중에 못했던 리액트를 다시 복습하기 위해서 노마드코더 리액트 강의를 들었다. 새로 2021 버전으로 업데이트 됐는데, 훨씬 이해가 잘되고 접근하기 쉬운 느낌이었다. 위의 코드는 단위를 변환하는 간단한 코드로, state를 연습해보기 좋았다.

리액트로 도서 검색 사이트 만들기 기능 -책 제목, 출판사, 저자 별 단어 검색 -책 클릭시 상세정보 나오기 -페이지 클릭시 해당 페이지로 이동, 맨 끝 페이지/ 맨 앞 페이지 이동 -회원가입, 로그인 기능 리액트로 해본 첫 프로젝트였다. 백엔드 분들이랑 다른 프론트엔드 분들이랑 같이 작업했는데 백엔드에서 준 api 책 정보들을 프론트에서 받아 띄우는 식으로, 출판사, 저자, 책 이름별 검색시 필터링해 검색 단어가 포함된 책을 한 페이지 안 책의 개수만큼 렌더링하게 해줬다. 그리고 책 클릭 시 책 상세 정보 api를 받아 보여줬다. 페이징 처리 하는 부분에서 리액트에 원래 내장된 페이징 기능을 그대로 쓰지 않고 로직을 직접 짜서 했는데, 이 부분이 가장 어려웠던거 같다. 회원가입 부분에서는 post 방식..

터미널에 npm i gh-pages 를 입력하여 gh-pages를 설치한다. gh-pages는 github에 웹페이지를 업로드하는 것을 허가해주는 모듈이다. git remote -v 를 입력하면 현재 깃허브 프로젝트 도메인을 확인할 수 있다. package.JSON으로 가서 맨 밑에 "homepage" : "https://{github username}.github.io/{project name}/" 을 추가한다. 그리고 package.JSON의 "script"에 마지막 두 줄을 추가한다. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "reac..

Rendering Movies.data.data.movies로 영화 데이터 목록들을 확인한다. es6를 사용해 이렇게 단축시킬 수 있다. getMovies = async() => { const {data : {data : {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); } 이제 이 movies를 state안에 넣어야 한다. this.setState({movies : movies}); 를 최신버전 자바스크립트를 사용해 이렇게 짧게 표현한다. getMovies = async() => { const {data : {data : {movies}}} = await axios.get("http..