바르고 뜨겁게

React Js - Global CSS 설정 + styled resetcss 초기화를 위해 styled-reset 설치styled-components는 local로 동작하기 때문에 global 한 css 를 만들기 위해 GlobalStyles.js 생성설치 yarn add styled-reset사용Components/GlobalStyles.js import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; ​ const globalStyles = createGlobalStyle` ${reset}; a{ text-decoration:none; color:inherit; } *{ box-sizing:boerder..

React Js - styled components따로 css 파일을 만들지 않고 자바스크립트 안에서 css 사용이 가능함벡틱을 이용하여 css를 변수화 시켜서 태그로 사용함css를 컴포넌트안에서만(local) 사용이 가능함단, 익스에선 정상적으로 작동하지 않음설치 yarn add styled-componentslocal 사용Header.js import React from "react"; import styled from "styled-components"; ​ // 자바스크립트 방식의 페이지이동 (href 대신 to 사용) import { Link } from "react-router-dom"; ​ const List = styled.ul` display:flex; &:hover{ background..

React Js - CSS 모듈App.js 에서는 컴포넌트 폴더만 import를 해준다.컴포넌트 폴더내의 index에 의해 추가 경로는 적을 필요가 없다.Components/Header/index.js import Header from "./Header"; ​ export default Header;하나의 컴포넌트는 다른 컴포넌트에 영향을 미치지 않도록 한다 ( Header.css 가 TV.js 에 영향을 주지 않음)CSS 모듈 사용className을 지역화 해서 전역에 영향을 끼치지 않도록 한다.파일의 이름뒤에 .module 추가한다. ex - Header.module.csscss를 사용할 js에선 다음과 같은 방식으로 import 한다. import styles from "./Header.module..

React Js - Router Routerurl 주소로 페이지를 연결해주는 역활을 한다.설치 npm install --save react-router-dom사용Router.js import Home from "Routes/Home"; import TV from "Routes/TV"; import Search from "Routes/Search"; ​ // BrowserRouter import { HashRouter as Router, Route } from "react-router-dom"; ​ export default () => ( );Composition 두개이상의 라우터를 동시에 렌더링 하는 방식 (같은 페이지에 렌더링됨) Popular} /> Redirect페이지 이동 처리설치react-rou..

React - 리액트란? 페이스북에서 공개한 자바스크립트 UI 라이브러리.컴포넌트 단위의 개발이 가능하다.프레임워크가 아닌 라이브러리이기 때문에 다른 환경과 함께 사용이 가능하다. 가상 DOM 사용DOM(Doucument Object Model)은 정적인 UI이기 때문에 자바스크립트로 동적인 수정을 하면 페이지를 다시 그리는 과정에서 많은 시간이 들어간다. React는 가상 DOM을 사용해 변경된 부분만 처리하므로 빠른 처리가 가능하다. 단방향 데이터 흐름 지향.리액트는 기본적으로는 부모>자식 으로 단방향 데이터를 지향하지만 redux등 서브파티 라이브러리를 사용하면 유동성있는 데이터 처리가 가능하다. JSX 사용 권장XML 사용이 가능한 자바스크립트 확장문법. 어플리케이션의 처리 속도가 빠름 리액트 J..

Vanilla JS - Array.includes배열안에 특정 argument가 포함되어 있는지 검사한다. const numbers = [153, 8, 45, 68, 4153, 5, 8541, 635, 153, 3, 5, 1, 85, 1, 3, 5, 85]; ​ ​ if(numbers.includes(153)){ console.log('153 존재'); }else{ numbers.push(153); // 배열에 추가함 } 153 존재

Vanilla JS - Array.filterarray.filter : 배열의 각각의 argument 에 Function 실행하고 true를 리턴할 경우만 배열로 만든다 const numbers = [153, 8, 45, 68, 4153, 5, 8541, 635, 153, 3, 5, 1, 85, 1, 3, 5, 85]; ​ ​ // 10보다 큰 argument 가 리턴됨 const biggerThan10 = numbers.filter(number => number > 10); console.log(biggerThan10); ​ // 5를 제외한 argument 가 리턴됨 const del5 = numbers.filter(number2 => number2 !== 5); console.log(del5); [..

Vanilla JS - Array.maparray.map : 배열내의 각각의 argument 에 function을 [실행] 후 [return]return 을 해줘야 값이 저장된다. const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"]; ​ ​ // 리턴 없음 const temp = days.map(newArray => console.log(newArray)); console.log("temp : ", temp); ​ // 각각의 배열 파라미터에 happy를 추가하여 리턴 const smilingDays = days.map(newArray => `happy ${newArray}`); console.log("smilingDays : ", smilingDays); ​ //..

Vanilla JS - classes (자바스크립트 객체 지향 프로그래밍) 프로그래밍 패러다임함수형 프로그래밍(Functional Programming)객체 지향 프로그래밍(OOP-ObjectOrientedProgramming) ES6 부터 자바스크립트에서 객체 지향 프로그래밍이 가능하다. class Human{ constructor(name, lastName){ this.name = name; this.lastName = lastName; } } ​ // Human 상속 const myName = new Human("Right","Hot"); ​ console.log(myName); console.log(myName.name); console.log(myName.lastName); ​ class Bab..

오브젝트에서 변수꺼내기 (비구조화 할당 Object Destructuring)1. 변수명 변경해서 꺼내기2. 오브젝트 변수명으로 받3. 배열 형태로 꺼내기 const obj = { depth1_0: "1단계 0", depth1_1: "1단계 1", depth1_2: { depth2_0: "2단계 0", depth2_1: "2단계 1" } } ​ // 기존방식 const oldDepth1 = obj.depth1_0; const oldDepth2 = obj.depth1_2.depth2_0; ​ console.log(`기존방식 oldDepth1: ${oldDepth1} / oldDepth2: ${oldDepth2}`); ​ // (비구조화 할당 Object Destructuring) // 변수명변경 , 그대로..