바르고 뜨겁게

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

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) // 변수명변경 , 그대로..

자바스크립트에서 YouTube REST API JSON으로 받아오기https://console.developers.google.com/Youtube Data API v3 추가Youtube Data API v3 관리 > 사용자 인증정보상단 CREATE CREDENTIALS > API 키 생성생성된 API KEY 사용 1. Youtube Data API v3 추가https://console.developers.google.com/ 접속프로젝트 생성.라이브러리 선택 YouTube Data API v3 추가 2. Youtube Data API v3 관리 > 사용자 인증정보 상단 CREATE CREDENTIALS > API 키 생성 3. 자바스크립트 YouTube REST API 사용 예제자바스크립트에서 YouT..