유자맛바나나의 Dev-log

export와 export default의 차이 1. export export만 사용한 컴포넌트의 경우 import 할 때 각 컴포넌트를 직접 명시해줘야 한다. Box.js export default를 사용하지 않고 export로만 세 가지 컴포넌트를 정의함 export const RedBox = () => { return Red Box; }; export const GreenBox = () => { return Green Box; }; export const BlueBox = () => { return Blue Box; }; App.js Box.js의 각 컴포넌트를 import 할 때 컴포넌트 명을 {}안에 정확히 명시해주어야 한다. as를 이용해 alias를 지정할 수 있다. import React ..

사전에 필요한 것 1. node.js 웹사이트에서 다운받아 설치 2. npm node.js 설치시 자동 설치 3. npx npm install npx -g 4. Visual Studio Code 최신 버전 설치하기 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and..

❑ JavaScript 문법(10) setTimeout() / setInterval() 1. setTimeout(): 일정 시간이 지난 후 함수를 실행 1.1) setTimeout() // 매개변수가 없는 함수 function tikTok() { console.log("tik-tok"); } setTimeout(tikTok, 3000); // 3초가 지난 후 tikTok 함수를 실행 > "tik-tok" // 매개변수가 있는 함수 function printName(name) { console.log(name); } setTimeout(printName, 3000, "citron"); // citron을 매개변수로 넘겨 printName 실행 > "citron" 1.2) clearTimeout(): set..

❑ 문자열 메소드(String methods) 1. length: 문자열 길이 let test = "value"; console.log(test.length); > 5 2. 문자열 인덱싱 let test = "value"; console.log(test[0]); > "v" 3. toUpperCase(), toLowerCase(): 대/소문자로 변환 let test = "Value"; console.log(test.toUpperCase()); > "VALUE" console.log(test.toLowerCase()); > "value" 4. indexOf(): 문자열 위치 찾기 찾는 문자열의 첫 글자 위치를 반환한다. 없을 경우 -1을 반환한다. let test = "Value example"; conso..

❑ 객체 메소드(Object methods) 1. Object.assign(): 깊은 복사(Deep copy) 독립적인 메모리를 사용하는 별도의 객체를 생성하는 깊은 복사를 할 땐 Object.assign() 메서드를 사용한다. 매개변수로는 기존 객체와 복사할 객체를 순서대로 넣는다. 즉, Object.assign(기존 객체, 복사할 객체)이다. 1.1. 빈 객체에 복사 const user = { name: "citron", age: 20 } // 기존 객체: {} (빈 객체) // 복사할 객체: user const user_deepcopy = Object.assign({}, user); // {} + {name: "citron", age: 20} 으로 보면 됨 user_deepcopy.name = "b..

❑ 대화상자 함수 javascript의 기본 대화상자 메서드 alert, prompt, confirm을 알아본다. 참고로 세가지 함수는 css로 스타일링이 불가하므로 html과 css로 별도의 대화상자를 구현하기도 한다. 디자인과 창의 위치는 브라우저를 따라가는 단점이 있지만 빠른 적용의 장점이 있다. 1. alert(): 알려준다 // 예시) alert("안녕하세요"); 2. prompt(): 값을 입력 받는다 // 예시) const name = prompt("이름을 입력하세요"); 유자바나나 prompt 창을 띄울 때 기본 값을 입력해놓을 수 있다. // 예시) const name = prompt("예약일을 입력해주세요", "2021-09-")..

❑ 조건문(if, else) // 예시) const age = 19; if(age "10대" ❑ Switch문 // 예시) const fruit = "유자"; switch(fruit){ case "유자": console.log("100원 입니다"); break; case "바나나": console.log("200원 입니다"); break; case "유자바나나": console.log("30000원 입니다"); break; default: console.log("판매하지 않는 과일입니다."); break; } ❑ 반복문(..

1. 함수 선언 문법 3가지 1.1. 함수 선언문 JavaScript의 함수는 return 타입과 매개변수 타입을 지정하지 않는다. function myFunction(param1, param2, ...) { ... logic return ...; } 1.2. 함수 표현식 let myFunction = function(param1, param2, ...) { ... logic return ...; } [함수 선언문과 함수 표현식의 차이] 함수 선언문은 함수를 호출하는 코드의 위치가 어디서든(함수 선언 위치보다 위/아래) 가능하지만, 함수 표현식은 함수 선언 위치보다 '아래'에서만 가능하다 1.3. 화살표 함수(arrow function) let myFunction = (param1, param2, .....

❑ 연산자 기본적인 +, -, *, /, %은 다루지 않는다. 거듭제곱: ** // 예시) console.log(2**3); > 8 증가/감소 연산자: ++, -- // 예시) let num = 10; let result = ++num; console.log(result); > 11 ❑ 비교 연산자 기본적인 , = 는 다루지 않는다. Eqaul: == // 예시) console.log(1==1); > true 주의) 숫자형과 문자형을 비교할때 주의해야 한다 // 예시) console.log(1=="1"); > true 숫자형이 문자형으로 자동 형변환 되기 때문으로 유추할 수 있다. Not Equal: != // 예시) console.log(1!=1); > false Value and Type Eqaul:..

❑ 형 변환 1. String(): 문자형으로 변환 // 예시) console.log(typeof String(3)); // Number → String console.log(typeof String(true)); // Boolean → String console.log(typeof String(null)); // object → String console.log(typeof String(undefined)); // undefined → String 2. Number(): 숫자형으로 변환 // 예시) // String → Number console.log(typeof Number("3")); > "number" console.log(Number("3")); > 3 console.log(typeof Num..