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..

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: { ..