My devlog

styled-components css가 컴포넌트에 종속 되게끔 컴포넌트.module.css props로 배경색 바꾸기 import styled from 'styled-components'; let YellowBtn = styled.button` background : ${ props => props.bg }; color : black; padding : 10px; `; function Detail(){ return ( 오렌지색 버튼임 파란색 버튼임 ) } useEffect html이 렌더링 된 다음 실행됌 1. 이러면 재렌더링마다 코드를 실행가능합니다. useEffect(()=>{ 실행할코드 }) 2. 이러면 컴포넌트 mount시 (로드시) 1회만 실행가능합니다. useEffect(()=>{ 실행할코..

콜스택 setTimeout(() => { console.log("timeout"); }, 1000); function a() { console.log("A"); function b() { console.log("B"); } b(); } a(); 큐 내에 순서 micro 1 브라우저마자 다름 macro Animation DOM api node vs element node 123 abc element // qeuryselector 는 요소를 찾음 const divEl = document.querySelector("div"); // qeuryselectorAll 는 nodelist 라는 배열 데이터처럼 생긴 개체를 찾음 //nodelist // Object object const divNodeList = do..

arrray method .reduce() const arr = [1,2,3,4] let sum =0 for (let i = 0; i acc + cur, 0) const data = [ 'regNum', 'name', 'logo', 'representative', 'startDate', 'address', 'contactEmail', 'tags', 'intro', 'homepage', 'introFile' ] const res = data.reduce((acc, name) => Object.assign(acc, { [..

🎥 인강 내보내기 1. Default export - 이름을 지정하지 않아도됌 -> 따라서 디폴트를 import 할땐 이름을 임의로 지정 가능 - 하나의 파일에서 한개의 디폴트만 사용가능 export default function (date) { return Object.prototype.toString.call(data).slice(8,-1) } 2. Named export - 이름을 꼭 지정하여야함 - 여러개 export 가능 export function random(){ return Math.floor(Math.random() * 10) } - 이름을 {}에 넣어서 import import {random, user as kmjin } from './getRandom' // as 를 사용하여 다른 이..

📢 실강 함수 (functions) new Function() 생성자 함수 호출로 함수로 만드는 법! 근데 자주 안 씀. const sum = new Function('a','b','console.log(a+b)') //클래스(객체) //서버에서 가져올땐 json으로 밖에 안됌 sum(2,4) 반환과 종료 return undefined return 키워드를 사용하면 반환하고 함수 종료! return 이 없다면 undefined 나옴 function sum (a ,b) { return console.log(a + b) //retuen 이 없으면 undefined 가 나옴 console.log(123) //나오지 않음 } 선언과 표현 매개변수 패턴 기본값 설정 function sum (a= 1 , b = 3..

JS 데이터(자료형, Date Type) 원시형 문자 숫자 불린 null undefined 심볼 큰정수(BigInt) 참조형 배열 객체 함수 문자 따옴표로 묶여 있어야 함! "Heropy" 'heropy' `heropy` 숫자 NaN : 숫자로 표시가 불가! (숫자데이터) NaN boolean true false null 값이 없음을 명시적으로 나타낼 때 쓰는 값(데이터) undefined 값이 할당되지 않은 상태를 암시적으로 나타냄 심볼 유일한 식별자(ID) 데이터 이름을 만들 떼 사용 const s = Symbol('hello world!') const user = { name: kmjin [s]: 92 } console.log(user.name) console.log(user[s]) BigInt 큰..

🎥인강 CSS 선택자{ 속성 property : 값 value; } CSS 선언방식 - 내장방식 :태그를 사용해안에 작성 - 인라인 방식 : 요소의 style 속성에 직접 작성 - 링크방식 : 태그로 외부 css 문서를 연결하는 방식 병렬 방식(한번에 가져와서 연결) - import 방식 : css 파일에 @import로 다른 css 문서를 연결하는 방식 직렬 방식(순서대로 하나씩 가져와서 연결) @import url("./box.css"); CSS 선택자 기본 선택자 * 전체 선택자 : 모든 요소 선택 태그 선택자 : 해당 태그 이름의 요소 선택 . 클래스 선택자 : HTML class 속성이 일치하는 요소 선택 # 아이디 선책자 : HTML id 속성이 일치하는 요소 선택 복합 선택자 일치 선택자 a..

git clone [리모트 URL] : 복제 git init : git repo 생성 git remote add [리모트alias] [리모트주소] git push -u [remote alias] [로컬브랜치명] git branch -M [새브랜치명] git remote remove mask git remote git remote -v Commit Convention prefix feat: features (기능구현) docs: documentations (문서작석) conf: configurations (환경설정) test: test fix: bug-fix (오류수정) refactor: refactoring (기능향상) ci: Continuous Integration build: Build (빌드에 관한..