콛 다이어리

객체를 생성하는 방법let 변수 = {    키: "문자열인 값",    키: 숫자,    키: true 나 false    키: 함수,    키: 배열    키: 객체}; let eundong = {// 문자열     name: "은동",// 숫자     age: 5,// 불리언     large: false,// 함수     function ( ) { },}; // 객체(에 객체 추가)let myDog = {     name : "은동이",     gender : "female",    birthday: "180830",    color: "white",    white : {    pink : "first favorite",    purple: "second favorite" },}; // 객체에 ..

GlobalStyle- 모든 컴포넌트에 적용해야 할 속성이 존재한다면,전역적으로 지정해주는 스타일  사용법변수 선언→ 백틱(`) 안에 적용받고 싶은 곳 입력ex)const GlobalStyle = createBlobalStyle `          body {       // 모든 컴포넌트에 적용할 속성          }`; export default GlobalStyle   css reset- *크로스 브라우징 이슈를 해결하기 위한 기법(사람마다 쓰는 브라우저가 다르다.누구는 크롬, 누구는 사파리, 누구는 엣지, 파이어폭스...그래서 같은 태그여도 크기가 다르기 때문에그 크기를 맞춰주기 위해 default style을 제공한다.     (*크로스 브라우징 :여러 종류의 웹 브라우저에서 동일한 사용자 ..

태그에 스타일 주는 방법html파일에서 클래스나 아이디를 부여계속 import 해야함유지보수하기 힘듬 style을 사용하여 객체 형태로 부여가독성이 떨어짐 3. css in js모든 파일을 import 해줄 수 있음조건문, 변수 등 다양한 로직을 작성할 수 있음 기본 사용법최상단에 import styled from 'styled-components' 입력→ const 변수 = styled. 표준태그 `      속성: 값;      속성: 값;      속성: 값;    `→ 변수를 표준태그처럼 사용      + 표준태그 말고 함수도 입력할 수도 있다.const 변수 = styled. ('함수')`      속성: 값;      속성: 값;      속성: 값;`

리액트웹 페이지를 만들 때 사용하는 자바스크립트 라이브러리다양한 화면 요소를 컴포넌트로 나눠서 만들 수 있음 DOM (Document Object Model)웹 페이지의 구조를 나타내는 트리구조트리구조를 이루는 것들은 엘리먼트(여는태그+닫는태그)(엘리먼트들이 모여서 트리구조가 됨)웹 브라우저는 이것을 읽어서 화면에 페이지를 출력   2. 하는 일리액트- 컴포넌트를 DOM이 읽고 웹 브라우저에 보여주는 역할을 한다. 가상 DOM (Virtual DOM)- 실제 DOM의 복사본- 페이지의 변화가 생기면 여기서 변화를 계산한다.- 실제 DOM과 비교해서 필요한 부분만 업데이트한다.  → 페이지가 더 빠르고 효율적으로 작동 즉,리액트 DOM은 리액트 컴포넌트를 웹 페이지에 실제로 보여주고 관리하는 역할을,가상 ..

함수 선언하는 방법 - function 함수명() {  } - const 변수 = function 함수명 () { } // 이러한 형태가 가능한 이유는 자바스크립트 안에서 참조한 변수들은 // 부모 타입이라고 할 수 있는 상위타입이// object 타입이라고 할 수 있음// 그래서 function() 역시도// 그냥 값으로 취급한다면 이런 표현도 가능 const add = function (a, b) { return a + b; } //  단어' function'를 없앰 // → 매개변수 괄호 우측에 화살표 입력 // →  return이 한 줄인 경우// 중괄호와 return의 키워드가 필요없음 const add = (a, b)=> { return a + b; } const add = (a, b)=> a..

promise 비동기 작업의 최종 완료 또는 실패 결과에 따라 콜백 함수를 연결할 수 있음 상태 pending (대기중) 초기상태 성공 또는 실패가 결정되지 않은 상태 fulfill (이행됨) 연산이 성공적으로 완료되어 프로미스가 결과값을 반환한 상태 rejected (거부됨) 연산 실패 오류 const myPromise = new Promist(function (resolve, reject) if ( true) { resolve("Seccess"); } else {   reject ("Failed"); } }); then은 성공한 경우 catch는 실패한 경우 async 함수 선언 앞에 붙여 정의 항상 Promise를 반환 async function fetchData() {    return 'Data..

모듈 관련 함수, 변수, 객체, 클래스 등을 한 파일로 그룹화 한 것 재사용할 수 있는 함수, 객체 또는 원시값export 키워드를 사용해서 모듈 생성 다른 파일에서 사용할 수 있게 함 import 키워드로 다른 파일에서 함수를 불러와 사용 가능자바스크립트의 실행 환경은 브라우저 환경과 Node 환경이 존재 Node 환경에서의 import 방식은 CommonJS 방식과 ES6 방식 존재 React 개발환경은 대부분 ES6에서 게시된 방법 사용여러 스크립트에서 동일한 함수 이름을 사용하더라도 모듈을 사용하면 각 스크립트에서 정의된 함수는 해당 모듈 내에서만 유효 사용하는 이유:    // 위에서 아래로 흐르기 때문에 모듈 시스템 import $ from 'jquery'; // 자동으로 jQuery에 대..

spread perators 객체나 배열을 복사할 때 많이 쓰임 배열이나 객체를 합칠 때 많이 쓰임 const originalUser = { name = "조희진" age = 26, };복사해야 할 경우 const updatedUser = originalUser; 복사 X참조하는 위치를 변경 O불변성과도 관련그래서 Spread Operators가 나옴originalUser에 조희진과 26이라는 value를 가지고 있음updatedUser.name = "조은진"; console.log("원본 =>" updatedUser); // name: '조은진', age: 26 console.log("원본 =>" originalUser); // name: '조은진', age: 26 UpdatedUser는 Origina..

Template Literals 변수와 표현식을 문자열 안에 쉽게 삽입할 게 해주는 문법백틱(`) 문자열을 여러 줄로 작성하는 목적으로도 사용됨const customer = { name: "인스피릿",    }; const item = { name: 스타크래프트 리마스터 카툰팩"; price: 50, };console.log("감사합니다. " + customer.name + "님!"); // 감사합니다. 인스피릿님! console.log("감사합니다. " + customer.name + "님!" +  item.name + "을(를) +  item.price + "원에 구매하셨습니다."); // 감사합니다. 인스피릿님! 스타크래프트 리마스터 카툰팩을 50원에 구매하셨습니다. console.log(`감사합니..

연산자+더하기 연산자우선순위는 문자열console.log(1+1); // 2console.log(1+"1"); // 11 -빼기 연산자우선 순위는 숫자console.log(1 - "2"); // -1console.log(1 - 2); // -1 *곱하기 연산자우선 순위는 숫자console.log(2*3)  // 6console.log(2:*3); // 6 / 나누기 연산자console.log(4/2); // 2console.log("4"/2); // 2  %나머지 연산자나누기 연산자 (/) vs 나머지 연산자 (%) console.log(5/2); // 2.5 console.log(5%2; // 1 등호연산자 (=) let x = 10; 더하기 등호 연산자(+=)x += 5;x = x+5와 같음 빼기 등..