1. For 반복문 // 선언부 ; 조건부; 증감연산부; // 조건에 맞는지 확인 -> loop 돌릴려는 명령 실행 -> 증감 연산 -> 조건에 맞는지 확인 (반복) for (let i = 0; i < 10; i++) { console.log(i); } (1) break loop를 돌다가 break를 만나면 그 자리에서 탈출 i가 9가 되는 순간 탈출. (2) Continue continue를 만나면, 해당 키워드 밑의 코드들은 실행하지 않고 다시 loop로 돌아감. if 조건 만족해서 continue 만나면 밑의 문장들 실행하지 않고, 바로 loop문으로 넘어감. if 조건 만족 못해서 지나갈 경우 , 그대로 console.log 찍힘. 2. For of 반복문 (배열에서 쓰임) java에서의 for ..

1. if 2. switch 문 (1) 형태 let comment = ""; age = 14; switch (age) { case 14: comment = "중학교 1학년"; break; case 15: comment = "중학교 2학년"; break; case 16: comment = "중학교 3학년"; break; case 17: comment = "고등학교 1학년"; break; case 18: comment = "고등학교 2학년"; break; case 17: comment = "고등학교 3학년"; break; default: comment = "성인이거나 초등학생입니다."; } console.log(comment); 인수로 받은 값을 case 에 적혀있는 값들과 차례대로 비교한다. 그 중 일치하..

**완전 잘 보고 배운 곳 ** 옵셔널 체이닝 '?.' (javascript.info) 옵셔널 체이닝 '?.' ko.javascript.info 1. Optional Chaining 이 생긴 이유 (1) 생긴 이유 객체 안의 멤버의 값을 얻기 위해 점 표기법으로 접근했는데, 그 멤버가 존재하지 않는 순간이 있다. 이 경우 원래라면 에러가 난다. const User {} console.log(user.adderess); // syntax error 이와 같이 우리가 객체 안의 특정 멤버에 접근하려고 하지만, 그 멤버가 있는지 없는지 모르는 경우에 Error를 피하기 위해 OptionalChaing이 만들어진 것이다. (2) Optional Chaining 없었을 땐 어떻게 이 문제를 해결했나요? && 이 ..

1. 구조 분해 할당이란? 만약 우리가 배열에서 원소를 일일히 빼서 변수에 집어 넣는다면, 다음과 같은 과정을 거쳐야 할 것이다. const arr = [1,2,3] const a = arr[0] const b = arr[1] const c = arr[2] JS에서는 위 과정을 간단하게 한 줄의 코드로 적을 수 있는 방법이 있다. 이를 구조 분해 할당이라고 한다. 배열이나 객체의 원소들을 찢어서 변수 하나 하나에 넣어주는 방식을 말한다. 2. 배열에서의 구조 분해 (1) 기본형 // 배열 선언 const arr = [1,2,3] // 구조 분해 할당 이용: 변수 a, b, c에 각각 1, 2, 3이 차례로 들어간다. const [a,b,c] = arr console.log(a,b,c) // 1 2 3이 ..

1. 정의 (1) 형태 const a = [1,2,3] console.log(a) // [1,2,3] console.log(...a) // 1,2,3 const b = {a:'apple', b: 'banana', c: 'car'} const c = {d:'digest', e: 'earth', f: 'fool\'s day'} const r = {...b,...c} console.log(r) // {a:'apple', b: 'banana', c: 'car', d:'digest', e: 'earth', f: 'fool\'s day'} (2) 정의 배열이나 객체의 원소들을 차례대로 전개하는 연산자이다. 배열의 대괄호나, 객체의 중괄호를 벗긴다. ** console.log() 에 여러 개의 data를 찍는 법 ,..

1. Nullish병합 (1) 정의 const num = A ?? B ?? C ... // null 이나 undefined가 아닌 맨 처음 만난 data를 반환 // 만약 연산자 안에 모든 값들이 null 이나 undefined 라면 맨 마지막의 nullish 값을 반환 // (null , undifined 합쳐서 nullish라고 한다.) OR은 false가 아닌 맨 처음 만난 data를 반환 하는 연산자였다. Nullish 병합은 OR 보다 거르는 범위가 적어진 연산자이다. (2) 예시들 a. OR 과 Nullish의 차이 0은 false 값이고, 7이 제일 먼저 만난 0이 아닌 값임으로 7을 반환 0은 제일 처음 만난 nullish가 아닌 값임으로 0을 반환 b. 다양한 연산들 2. 삼항 연산자 (..

1. 그리고 && (1) 정의 A&&B 는 A, B 둘 다 참이여야지만 참을 반환 const A = true const B = true if (A&&B) { console.log('A,B 둘 다 참이다.') } // A,B 둘 다 참이다 반환 (2) JS만의 특이점 위에서 그냥 'A,B 둘 다 참이면 참을 반환' 한다고 말했지만, JS는 다른 언어들과 달리 여기서 그치지 않고 자기들만의 규칙이 있다. 만약에 A&&B 자체를 console에 찍는다고 하자. 다른 언어 같았으면, A = 0 , B = 1 이면 false를 찍는다. (0은 거짓, 0이 아닌 숫자는 모두 참 취급을 하므로 ) 하지만 JS는 0이 출력된다. 이렇게 되는 이유는 JS 만의 규칙이 존재하기 때문이다. JS에서의 && 연산자는 가장 먼..

1. !이거 붙이면 boolean 값이 toggle이 됨. // 부정(Negation) console.log(!true) console.log(!false) console.log(!0) console.log(!!0) // 중복 toggle이 가능 console.log(!!!0) console.log(!null) console.log(!undefined) console.log(!NaN) console.log(!'') console.log(!{}) console.log(![]) 2. 비교 연산자 //비교 연산자 const a = 1 const b = 3 // 동등 연산자 // (a,b 형이 다를 경우 자동으로 형 변환 해서 비교함. 따라서 0 과 '0'도 같다고 반환한다. 이는 부정확성을 초래하여 안 쓰는 ..

1. 산술 + - x / %(나머지 연산자) 2. 할당 // var -> 재선언 재할당 전부 가능 // let -> 재선언 불가 재할당 가능 let a = 3 a = 5 // ok let a = 3 let a = 2 //Error // const -> 재선언 재할당 전부 불가능 const a = 3 a =4 //Error 3. 증감 let a = 2 console.log(++a) console.log(a) // 해당 출력문 실행하기 전에 a 값에 1을 더해라 (출력 3 3) console.log(a++) console.log(a) // 해당 출력문 실행 후에 a에 1 더해라 (출력 2 3)

//데이터 타입 확인 // console.log(typeof a) // 근데 이걸로는 null, 배열[] 객체{} 는 확인하지 못한다. // Js에서는 함수도 타입으로 친다. console.log(typeof 'hello' === 'string') console.log(typeof 123 === 'number') console.log(typeof false === 'boolean') console.log(typeof undefined === 'undefined') console.log(typeof null ==='object') console.log(typeof[] === 'object') console.log(typeof{} === 'object') console.log(typeof function (..

// 참과 거짓 /* * -- boolean으로 받아들여질 시 거짓으로 간주되는 것 * (1) false * (2) 0, * (3) null, * (4) undefined * (5) NaN * (6) '' -> 빈 문자열 * (7) 0n -> Bigint란 타입으로 0을 나타낸것. * --이외에 모든 숫자 문자는 전부 참-- * 배열은 비어있어도 참임 * NaN은 잘못된 수학 계산, 잘못된 숫자를 의미한다. * ex) 0/0 ===NaN(잘못된 수학 계산), 100/"hi" === NaN (잘못된 숫자) * */ if(null){ console.log('참') } else{ console.log('거짓') }

1.컴포넌트 : 재사용이 가능한 개별적인 여러 조각 UI(User Interface)는 여러 개의 Component로 나뉜다. 카톡 화면은 위와 같이 5개의 컴포넌트로 나뉘는 것이다. 컴포넌트는 java로 치면 매소드 같은 녀석이다. 2. 컴포넌트의 종류 (1) 클래스형 컴포넌트 a. 쓰기 위한 조건 - React.Component라는 클래스를 무조건 상속해야 함. - render() 라는 함수를 사용해야 하고, 위 함수의 return 값에다가 하고 싶은 내용물을 적어야함. b. state, lifestyle(생명 주기)라는 기능을 사용할 수 있음. c. 함수 형 컴포넌트보다 메모리를 더 사용한다는 단점. (2) 함수형 컴포넌트 a. state, lifestyle이라는 기능을 사용하지 못함. 따라서 Ho..

유형 형태 뜻 예시 ===(일치 연산자) a === b a와 b가 type이 같은지 check type이 같다면 값이 같은지도 check 1 === 1 // true 1 === "1" // false 1 === true // false ==(동등 연산자) a == b 연산자가 a,b를 형 변환 해가며, 내용물이 같은지를 check 0 == 0 // true 0 == [ ] // true 0 == false // true 동등 연산자 사용 시 헷갈리는 경우가 많아 가독성이 저하되므로, 일치 연산자를 되도록이면 사용할 것!

**제일 중요 포인트** (1) 함수 이름만 적으면 그것은 함수 코드 전체(함수 데이터)를 의미 한다. function A () { return 123 } console.log(A) (2) 함수이름() 라고 적으면 이것은 해당 함수를 호출하겠다는 의미이고, 해당 함수가 실행된 결과가 반환된다. function A () { return 123 } console.log(A()) 1. 스스로 해보기 // hello 출력하는 함수 만들어서 함수 데이터 출력, 그냥 호출 function hello () { console.log("Hello!") } console.log(hello) hello() // 123을 반환하는 함수 만들어서, 함수 데이터 출력 시 type, 그냥 호출 시 type function getN..

Java의 객체랑은 다른 느낌. 여긴 클래스라는 설계도도 없고, 매소드도 저장 안함. C++의 Struct랑 비슷한 개념이다. 멤버를 key : "Value" 형식으로 넣는다. 1. 특징 (1) 객체 내부의 멤버들 사이에 정해진 순서가 없다. 따라서 출력 시 무작위 순서로 나온다. (2) 만약 객체 내부에 같은 이름의 Key를 다시 선언 한다면, 제일 최근에 선언한 Key의 Value 값으로 Value가 갱신 된다. user ={ name = "Quan xiu Min" age = 87 age = 27 } // age 출력시 27이 나온다. 2. 형식 /* Object 객체 생성 방법 3가지 */ // 1. Object() 생성자 함수 사용 user = Object() user.name ="SooMin" ..

Java랑 비슷한 듯 /*Array (배열)*/ // 1. 배열 선언 방식 2가지 // (1) 정식 방식 weeks = new Array("Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun") // (2) 대괄호 리터럴 방식 weeks =["Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun"] // 2. 출력 // (1) 배열 전체 출력 console.log(weeks) // (2) 배열의 특정 요소 출력 console.log(week[0])// Mon 을 출력 // (3) 배열의 길이 출력 console.log(week.length) 배열 이름 = [ ] 방식이 대괄호 리터럴이라 불리는 이유. 기호를 이용하여 데이터를 만드는 것을 리터..

1. var-let-const 의 차이점 명령어 뜻 var name = "value" 재 선언가능, 재 할당 가능 let name = "value" 재 선언 불가, 재 할당 가능 const name = "value" 재 선언 불가, 재 할당 불가 -> 한번 선언하면 그 뒤로 상수 취급 /*var*/ //최초 선언 var a = "apple" // 재 선언 (가능) var a = "array" //재 할당 (가능) var a = "age" /*let*/ //최초 선언 let a = "apple" // 재 선언 (에러) let a = "array" //Uncaught SyntaxError: Identifier 'title' has already been declared //재 할당 (가능) let a = "..

1. JavaScript 변수 선언의 특징 JavaScript는 느슨한 타입의 동적 언어이다. Java 처럼 int, float, String 등등으로 type이 따로 나누어져 있지 않다. 따라서 type 선언이 따로 없고, 하나의 변수에 어떤 타입의 값으로든 할당 및 재할당이 가능하다. (문자열, 숫자, boolean 등) a = "Class" a = 27 a = true 2. String 선언 방식 3가지 a = "bla bla" a = 'bla bla' a = `bla bla` 큰 따옴표, 작은 따옴표, 물결표로 진화 전 모양 3가지로 문자열을 표현할 수 있다. 큰 따옴표와 작은 따옴표는 기능이 같으므로 둘 중 하나를 취향 껏 사용하면 된다. 이 기호는 특별한 기능이 하나 더 장착 되어 있다...

0. 프로젝트 만들 폴더 열기 (VScode 이면 파일 누르고 폴더 열기) 1. npm 깔기 (터미널에 npm init -y ) (-y 쓰면 메타데이터 설정하는 거 건너 뛰겠다는 소리) 2. Parcel 번들러 설치 (터미널에 npm -i -D parcel) (여기서 -D는 개발할 때만 해당 module을 쓰겠다는 의미, 배포 시 안 따라감.) 3. package.json의 script 영역 편집 - script 영역은 명령어들을 설정할 수 있음. "A" : "B" 형태로 설정 설정 시 npm run A 라고 터미널에 치면 B가 수행됨. - 우리는 여기서 개발 용 빌드와 진짜 찐막 배포 시 빌드로 빌드 명령어를 2개로 나눌 것임. parcel 옆에 build를 적으면, 배포용으로 빌드 하겠다는 소리고 빌..

프로그램이 개발되는 특정 시점에다가 번호를 매겨서 의미를 부여 하는 것을 유의적 버전이라고 한다. 위의 사진은 lodash와 parcel의 유의적 버젼을 보여준다. 세부적으로 뜯어보면 유의적 버젼은 Major.Minor.Patch 로 나뉘어져 있다. Major는 기존 버젼과 호환이 되지 않는 새로운 기능이 추가된 버젼을 의미한다. (여기서 기존 버전이란 직전버젼이다. lodash가 4버젼이니까, 기존 버전은 3버전이다.) Minor는 기존 버전과 호환이 되는 기능이 추가된 버전을 의미한다. patch는 기능이 추가된 것이 아니라, 버그 및 오타가 수정된 버전을 의미한다. 그리고 앞에 ^ 표시는 '메이저 버젼이 바뀌지 않는 상태에서 가장 최신 버전으로 업데이트 가능' 이라는 뜻을 가지고 있다. 만약 프로그..

웹 브라우저에 띄울 수 있는 언어는 HTML, CSS, JS 이 세 개 뿐이다. TS(typescript)는 JS를 더 쉽게 쓰기 위하여 나온 언어 이지만 이 코드는 웹 브라우저에 띄울 수 없기 때문에 변환 과정을 거쳐야 한다. 이 변환 과정을 자동으로 해주는 Module이 바로 Parcel이다. Parcel의 또 다른 장점은 빌드가 빠르고 쉽다는 것이다. 또한 우리는 JS에서의 설정 파일인 package.json을 이용해, test 상황과 배포 상황 각각 빌드를 다르게 해주는 환경을 만들 것이다. 1. package.json 안의 내용 수정 "scripts": { "dev": "parcel ./index.html", "build": "parcel build ./index.html" } package.j..