유자맛바나나의 Dev-log

1. 클래스 기초 클래스는 Javascript ES6(ECMAScript6)에 추가된 스펙 2. Class 문법과 사용 constructor(): 생성자 함수로 인스턴스를 생성할 때 실행되는 함수이다. Method: 클래스 내에 정의하는 Method는 prototype에 저장된다. Method는 Function과 다름에 주의한다. Method는 특정 객체에 종속된 것으로 객체가 아닌 반면, Function은 객체로 취급된다. Example Code class User { // 멤버 변수 정의 grade = "Master"; // 생성자 함수 constructor(name, age){ this.name = name; // this를 써줘야 클래스의 멤버 변수로 남는다 한다. this.age = age; }..

보호되어 있는 글입니다.

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

변수 선언 1. let : 변수 선언시 사용 수정이 가능한 변수를 선언할 때 사용한다. let 을 사용하면 동일한 변수명으로 두번 이상 let으로 정의할 수 없다. // 예시) // let 변수 선언 let test = "value"; console.log(test); > "value" // 변수 수정 test = "update"; console.log(test); > "update" // let 변수 동일 이름 선언: 위에서 선언했기 때문에 error let test = "value"; > "Identifier 'test' has already been declared" 2. const : 상수 선언시 사용 수정이 불가한 상수를 선언할 때 사용한다. // 예시) // const 변수 선언 const t..

Trouble Could not determine react-native-codegen location Error react-naitve start, react-naitve run-ios 와 같이 react-naitve 프로젝트를 빌드하려고 할 때 react-native-codegen이 없다고 나올 수 있다. (react-native-codegen/package.json 설정이 잘못되었다 등) Shooting 라이브러리에 react-native-codegen가 없거나 global package에 설치되었는데 프로젝트 라이브러리에서 찾을수도 있다. 1) 프로젝트 라이브러리 확인 프로젝트에서 node_modules > react-native-codegen가 있는지 확인한다. @react-native와 같은 ..