Jieunny의 블로그

JS 는 dynamic typing 가능 TS 는 JS 랑 문법은 같은데 type 을 지정해주는 것 ( 코드 에디터 부가기능 역할로 봐도 될 듯 ) 5 - '3'; //원래는 숫자 - 숫자만 가능하지만 js가 알아서 숫자로 바꿔줌 //이런 장점이 프로젝트가 커지면 단점이 됨 TS 사용하는 이유 1) TS 는 타입 엄격히 검사해줌. 2) 에러메세지 퀄리티가 좋음. ts 파일을 js 로 변환해야 사용가능 tsc -w 켜두면 자동으로 js파일 생기고, ts 파일 업데이트 하고 저장할때 마다 자동으로 js 파일 업데이트 됨. 파일 사용시에는 당연히 js파일 갖다써라. tsconfig.json : ts->js 변환 시 옵션 설정 해줄 수 있음 JS 문법 const 변수 등호로 재할당만 막는 역할을 한다. cons..

JSX : javascript XML의 약자로 자바 스크립트에 XML 문법을 추가한 확장형 문법이다. 자바 스크립트에 HTML 문법을 사용 할 수 있다. 확장자는 .jsx, .js, .tsx(타입 스크립트와 호환 가능) 가 사용 가능하다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 Babel을 사용하여 자바 스크립트 형태의 코드로 변환된다. 문법 규칙 1) 컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸야 한다. // 잘못된 코드 function App(){ return ( Hello Is it working well? ) } // 올바른 코드 function App(){ return ( Hello Is it working well? ) } 2) J..

App.js /* eslint-disable */ import React, { useState } from 'react'; import logo from './logo.svg'; import './App.css'; function App() { let [title, setTitle] = useState(['치킨 맛집 추천', '도넛 맛집 추천', '피자 맛집 추천']); let [good, setGood] = useState(0); let [modal, setModal] = useState(false); let [push, setPush] = useState(0); let [input, setInput] = useState(''); function changeTitle(){ var newTitle = [..

데이터 바인딩 : { 변수명, 함수 등 } ( 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..