Coding Story

TypeScript 자바스크립트를 기반으로한 프로그래밍 언어. strongly-typed 언어로, 프로그래밍 언어가 작동하기전에 type을 확인한다. 브라우저는 TypeScript를 이해하지 못한다. 사용자에게 publish할 때, TypeScript가 컴파일해서 평범한 JavaScript로 만들어준다. Typescript 테스트 할 수 있는 곳 https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www...

노마드코더 리액트 마스터 클래스 #2 STYLED COMPONENT index.js import React from "react"; import ReactDOM from "react-dom"; import { ThemeProvider } from "styled-components"; import App from "./App"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke", }; ReactDOM.render( , document.getElementById("root") ); App.js import..

import styled from "styled-components"; const Father = styled.div` display: flex; `; const Input = styled.input.attrs({ required: true })` background-color: tomato; `; function App() { return ( ); } export default App; As as 라는 props를 사용하면 명시한 태그로 컴포넌트를 사용할 수 있다. Father 컴포넌트는 header가 된다. Attrs attrs 뒤에 대괄호 안에는 input으로 전달된 모든 속성을 가진 오브젝트를 담을 수 있다. 모든 input 에 required: true가 적용된다.

노마드코더 React JS 마스터 클래스 #2 .2 컴포넌트 확장이란, 기존 컴포넌트의 모든 속성을 가지고 오면서 새로운 속성까지 더해주는 것이다. props를 통해 컴포넌트 style을 설정한다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; const Circle = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100..

노마드코더 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..