Jieunny의 블로그

데이터 바인딩 : { 변수명, 함수 등 } ( getElementById 쓸 필요 x ) src, id, href 등의 속성에도 사용 가능 JSX에서 style 집어넣을 때 style={ object 자료형으로 만든 스타일 } 속성명은 camelCase로 작성 style={ { color : 'blue' , fontSize : '30px' } component 앱을 이루는 최소한의 단위 props나 state 같은 데이터를 입력받아 DOM 노드를 생성한다. 두가지 인스턴스 속성으로 props 나 state 를 갖고있다. 컴포넌트에는 onClick 쓰지 말아라. state 변수 대신 쓰는 데이터 저장 공간 useState()를 이용해 만들어야 함. 문자, 숫자, array, object 등 다 저장가능 s..

React Router : 페이지 전환 Browser Router url이 보통 웹사이트 처럼 생김. Hash Router 앞에 /#/이 붙음. Switch : Route 를 찾음 (Route는 URL을 의미) function App() { return } 누군가 우리 웹사이트에 "/" url에 있다면 Home 컴포넌트를 보여준다. Link : 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트. {title} Dynamic url 도 지원함 : url에 변수를 넣을 수 있다. // id앞에 ':' 안쓰면 그냥 텍스트 id쓴 것과 같음 useParams() : url 에 있는 변경되는 변수를 반환해준다. 동적 라우팅을 설정해주어야한다. API & fetch API : React 애플리케이션에 사용..

fetch() : JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 함수. import React from 'react'; import { useState, useEffect } from 'react' ; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); //가지고 있는 coin 데이터를 State로 가져오기 위함. useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json())//response를 받아서 response..

CSS 기술하는 순서 Position position z-index top bottom left right transform Layout float clear Display display flex-direction flex-wrap justify-content align-content align-items order flex-grow flex-shrink flex-basis align-self Visibility visibility overflow clip Box model (밖에서 안으로 향하는 순서로 나열, border는 색상과 함꼐 선언하는 경우가 많으므로 Color에 포함) box-sizing width min-width max-width height min-height max-height mar..

루트 경로 : 프로젝트 상에서 루트경로임... 바벨 자바스크립트 컴파일러 최신 자바스크립트 문법을 브라우저가 이해할 수 있도록 바꿔준다. 웹팩 : 여러 모듈을 번들화 해서 하나로 묶어준다. const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { ..

TypeScript : 자바스크립트에 타입을 부여한 언어로 자바스크립트의 확장된 언어라고 볼 수 있다. '정적타입을 지원한다' - 변수나 데이터의 종류를 명확히 지정 정적 타이핑 function sum(a: number, b: number) {//타입을 미리 설정할 수 있음 return a + b; } const message : string = 'hello world' //해당 상수 값이 문자열이라는 것을 명시 -> 해당 값을 숫자로 설정해버리면 오류가 나타난다. 우리가 사전에 지정한 타입이 아닌 값이 설정될 때 바로 에러를 발생시킨다 -> 에러가 나타났을 땐 컴파일이 되지 않는다. function sum(x: number, y: number): number { //x,y 값이 number, sum 결..