2023-10-12 본 캠프 6일차 / 25일차 TIL

유데미 강의 : CSS완벽 가이드 (Flexbox, Grid & Sass 포함) / 섹션 8 : 크기 & 단위

학습내용 :

1. 크기 단위
* Absolute Lengths (절대 크기)
px : 픽셀

* Viewport Lengths (viewport 크기에 따른 상대적크기)
vh : viewport height
vw : viewport width
vmin
vmax

* Font-Relative Lengths (글씨 크기에 비려한 크기)
rem : root em
em : em

* Special Case (특수한 단위)
% : percent
- position:fixed 일 경우 컨테이너 블록은 viewport
- position :absoulte 일 경우 컨테이너 블록은 조상(position이 지정된 가장 가까운 조상의 콘텐츠 padding 포함)
- position : static, relative 일 경우 컨테이너 블록은 조상 (가장 가까운 padding을 제외한 block 레벨 조상)

내일배움캠프 : 학습법 특강

1. TIL, WIL, 알고리즘 습관화
2. 개인과제, 팀과제 : 배운내용을 기반으로 복습하여 사고력, 구현력 단련
3. 프로젝트 : 기술적인 의사결정, 고민
4. 개발역량점검표 : 메타인지, 수료때까지 도달해야하는 목표

협업능력, 기술적 고민이 가장 중요
왜 이 기술을 사용했는지, 다른 기술에 비해 어떠한 장점이 있는지 고민하는 것이 중요

협업을 잘하는 방법
1. 존중하며 말하기
2. 명확하게 전달
3. 기술적인 근거를 바탕으로 소통하기

내일배움캠프 : JavaScript 문법 종합반 1주차

학습 내용 :

1주차 1강 : 자바스크립트 소개

자바스크립트란?

컴퓨터와 소통을 위한 프로그래밍 언어 중 1개 (Java, C, JavaScript, Python...)
브라우저 동작을 위한 스크립트 언어 (Chrome, 사파리, 인터넷 익스플로어...)

자바스크립트의 역사

2005 AJAX 등장 : 이벤트 실행시 전체 새로고침이 아닌 부분 새로고침이 가능해짐 > UX(User Experience) 증가

2008 V8엔진 등장 (크롬)

2009 Node.js 등장 (브라우저가 아닌 다른환경에서도 자바스크립트를 사용할 수 있게됨)
> FrontEnd+BackEnd+DB(MongoDB) = FullStack
> 자바스크립트 언어로 모든것이 가능

2015 ES6버전 등장

2016 프론트엔드 프레임 워크 (React, Vue, Angular) 대중화, SPA 개발 활성화

결론 : "현재 자바스크립트가 독보적으로 범용성 있는 언어

자바스크립트 특징

1. 객체지향 프로그래밍 언어
2. 동적 타이핑 지원
3. 함수형 프로그래밍 지원
4. 비동기 처리
5. 클라이언츠, 서버 모두 사용 가능

1주차 2강 : 변수와 상수

변수 : 값을 메모리에 저장하고, 읽어서 재사용함

변수의 5가지 주요개념

변수이름(식별자) : 저장된 값의 고유이름
변수 값 : 변수에 저장된 값
변수 할당 : 변수에 값을 저장하는 행위
변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행우
변수 참조 : 변수에 할당된 값을 읽어오는 것

변수를 선언할 수 있는 3가지 방법

var : 재선언가능 / 재할당 가능
let : 재선언 불가능 / 재할당 가능
const : 재선언 불가능 / 재할당 불가능

1주차 3, 4 강 : 데이터 타입

1. 숫자형 타입

// 1-1. 정수형
let num1 = 10;
console.log(num1);
console.log(typeof num1); //number

// 1-2. 실수형
let num2 = 3.14;
console.log(num2);
console.log(typeof num2); //number

// 1-3. 지수형
let num3 = 2.5e5; // * 10의 5승 
console.log(num3);
console.log(typeof num3); //number

// 1-4. Nan
let num4 = "Hello" / 2;
console.log(num4); // Nan : Not a number (숫자가 아닐때)
console.log(typeof num4); //number (Nan도 숫자형으로 취급)

// 1-5. Infinity
let num5 = 1 / 0;
console.log(num5); 
console.log(typeof num5); //number (Infinity도 숫자형으로 취급)

// 1-6. -Infinity
let num6 = -1 / 0;
console.log(num6); 
console.log(typeof num6); //number (-Infinity도 숫자형으로 취급)

2. 문자열 타입

- '', "" 모두 사용가능

let str = "Hello World!";
console.log(str);
console.log(typeof str);

// 2-1. 문자열의 길이
console.log(str.length);
// 2-2. 문자열 결합
let str1 = "Hello ";
let str2 = "Wolrd!";
let result = str1.concat(str2); // 인수로 받은 문자열을 붙혀서 저장
// let result = str1+str2;
console.log(result);

// 2-3. 문자열 자르기
let str3 = "Hello, World!";
console.log(str3.substr(7, 5)); //7인덱스에서 5개 출력
console.log(str3.slice(7,12)); //7인덱스부터 12인덱스 전까지 출력

// 2-4. 문자열 검색
let str4 = "Hello, World!";
console.log(str4.search("World")); //해당 문자열이 시작되는 인덱스 출력

// 2-5. 문자열 대체
let str5 = "Hello, World!";
let result01 = str5.replace("World!","JavaScript!"); // 문자열 내 World 문자열을 JavaScript로 변경 
console.log(result01);

// 2-6. 문자열 분할
let str6 = "apple, banana, kiwi";
let result02 = str6.split(','); // ','을 기준으로 문자열을 나누어 배열로 저장
console.log(result02);

3. 불리언 (Boolean)

- true(참)/false(거짓) 두가지 값

let bool1 = true;
let bool2 = false;

console.log(bool1); // true
console.log(typeof bool1); //boolean
console.log(bool2); // false
console.log(typeof bool2); //boolean

4. undefined

- 정의되지 않은 값, 값을 할당하지 않은 상태

let x; // 선언만 하고 값을 할당하지 않음
console.log(x); // undefined

5. null

- 값이 존재하지 않음을 '명시적'으로 나타내는 방법
- null != undefined

let y=null;
console.log(y); // null

6. Object (객체)

- Key와 Value의 형태로 이루어진 해쉬의 형태

let person = {
    name:'Kim',
    age:24,
    isMarried:false,
}
console.log(person); // { name: 'Kim', age: 24, isMarried: false }
console.log(typeof person); // object

7. Array (배열)

- 여러 개의 데이터를 순서대로 저장하는 데이터 타입

- 인덱스를 가지며 순회가 가능하다. (0부터 시작)

let number =[1,2,3,4,5];
let fruits =['apple','banana','orange'];
console.log(number); // [ 1, 2, 3, 4, 5 ]
console.log(typeof person); // object
console.log(fruits); // [ 'apple', 'banana', 'orange' ]
console.log(typeof fruits); // object

1주차 5강 : 형 변환

- 데이터 타입 형태를 바꾸는 것.
- 명시적 형 변환과 암시적 형 변환으로 구분된다.

1. 암시적 형 변환

//1-1. 문자열
let result1 = 1 + "2"; // 이때 + 는 문자열 연결 연산자로 작용, 1 > '1'로 형변환
console.log(result1); //'12'
console.log(typeof result1); //string

let result2 = "1" + true; // 이때 + 는 문자열 연결 연산자로 작용, true > 'true'로 형변환
console.log(result2); // '1true'
console.log(typeof result2); //string


//1-2. 숫자
let result3 = 1-"2"; // 이때 "2"는 숫자로 자동 형변환
console.log(result3); // -1
console.log(typeof result3); //number

let result4 = "2" * "3"; // 이때 "2", "3"은 각각 숫자형 2, 3으로 자동 형변환
console.log(result4); // 6
console.log(typeof result4); //number

2. 명시적 형 변환

//2-1. Boolean
//falsy value
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log("---------------------------");
//truthy value
console.log(Boolean("false")); // true
console.log(Boolean({})); // true

//2-2. 문자열
let result5 = String(123);
console.log(result5); // '123'
console.log(typeof result5); // string

let result6 = String(true);
console.log(result6); // 'true'
console.log(typeof result6); // string

let result7 = String(false);
console.log(result7); // 'false'
console.log(typeof result7); // string

let result8 = String(null);
console.log(result8); // 'null'
console.log(typeof result8); // string

let result9 = String(undefined);
console.log(result9); // 'undefined'
console.log(typeof result9); // string

//2-3. Number
let result10 = Number('123');
console.log(result10); // 123
console.log(typeof result10); //number

1주차 6강 : 연산자

// 1. 더하기 연산자
console.log(1 + 1); // 2
console.log(1 +'1'); // '11', 문자열 연결 연산자

// 2. 뺴기 연산자
console.log(1 -"2"); // -1
console.log(1 - 2); // -1

// 3. 곱하기 연산자
console.log(2 * 3); // 6
console.log("2" * 3); // 6

// 4. 나누기 연산자(/)
console.log(4 / 2); // 2
console.log("4" / 2); // 2

// 5. 나누기 연산자(/) vs 나머지 연산자(%)
console.log(5 / 2); // 2.5
console.log(5 % 2); // 1


// 6. 할당 연산자 (assignment)
// 6-1. 등호 연산자 (=)
let x = 10; // x 에 10을 할당하였다 
console.log(x); // 10

// 6-2. 더하기 등호 연산자 (+=)
x += 5; // x = x + 5와 같으며 기존 x 변수에 누적하여 덧셈한다.
console.log(x); // 15

// 6-3. 더하기 등호 연산자 (-=)
x -= 5; // x = x - 5와 같으며 기존 x 변수에 누적하여 뺼셈한다.
console.log(x); // 10

// 6-3. 곱하기 등호 연산자 (*=)
x *= 2; // x = x * 5와 같으며 기존 x 변수에 누적하여 곱셈한다.
console.log(x); // 20

// 7. 비교 연산자 (true/false)
// 7-1. 일치 연산자 (===)
// 타입과 값이 모두 일치해야 true를 반환하는 연산자
console.log(2 === 2); // true
console.log(2 === '2'); // false

// 7-2. 불일치 연산자 (!==)
// 타입과 값이 모두 일치해야 false를 반환하는 연산자
console.log(2 !== 2); // false
console.log(2 !== '2'); // true

// 7-3. 작다 연산자 (<)
console.log(2 < 3); // true

// 7-4. 작거나 같다 연산자 (<=)
console.log(2 <= 3); // true
console.log(3 <= 3); // true

// 7-5. 크다 연산자 (>)
console.log(2 > 3); // false

// 7-6. 크거나 같다 연산자 (>=)
console.log(2 > 3); // false
console.log(3 >= 3); // true

// 8. 논리 연산자
// 8-1 논리 곱 연산자 (&&) / 둘다 true일 경우 > true
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

// 8-2 논리 합 연산자 (||) / 둘 중 하나라도 true일 경우  > true
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

// 8-3 논리 부정 연산자 (!)
console.log(true); //true
console.log(!true); //false

let a = true;
console.log(a); //true
console.log(!a); //false


// 9. 삼항 연산자 (? :)
// 조건에 따라서 값을 선택한다.
let num = 10;
let result = num > 5 ? "크다" : "작다"; //1항 true/false로 판단되는 표현식, 2항 true 시 반환할 값, 3항 false 시 반환할 값
console.log(result); // "크다"

let num1 = 20;
let result1 = num1 < 10 ? "작다" : "크다"; //1항 true/false로 판단되는 표현식, 2항 true 시 반환할 값, 3항 false 시 반환할 값
console.log(result); // "크다"

10. type 연산자 (typeof)
// 변수에 할당된 값의 타입을 알아보는 연산자.
console.log(typeof "5"); // string

1주차 7강 : 함수
- 함수 = function(기능)
- input과 output을 가진 단위
- 기본 골격 - function () { }

// 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수
// 1. 함수 선언문
function add (x, y) {
    return x + y;
}

// 2. 함수 표현식
let add2 = function (x, y) {
    return x + y;
}

// 3. 함수의 호출(사용)
console.log(add(2, 3)); // 5
console.log(add2(1, 2)); // 3

let functionResult1 = add(2, 3); // number type 5
let functionResult2 = add2(1, 2); // number type 3
console.log("add함수의 값은", functionResult1); //add함수의 값은 5
console.log("add2함수의 값은", functionResult2); //add2함수의 값은 3

1주차 8강 : 스코프 및 화살표 함수

1. 스코프와 전역/지역 변수

1-1. 전역변수

// x가 전역변수로 선언 될 경우 모든 영역에서 참조 가능 / 전역 스코프에서 생성
let x = 10; 

function printX(){
    console.log(x);
}

printX(); // 10
console.log(x); // 10

1-2. 지역변수

// x가 지역변수로 선언될 경우 (함수 내부 스코프), 함수 내부 외에서는 참조 불가능 / 함수 내부 스코프에서 생성
function printX(){
    let x = 10; 
    console.log(x);
}

printX(); // 10
console.log(x); // ReferenceError, 참조에러 발생

2. 화살표 함수

- ES6에서 등장한 신 문법

// 기존 함수 선언 방법 (함수 선언문)
function add (x, y) {
    return x + y;
}

// 화살표 함수
// 화살표 함수 (기본)
let add1 = (x, y) => {
    return x + y;
}

// 화살표 함수 (한줄) 
// 자동 return 처리, 한줄로 결과를 반환 할 때 사용, 2줄 이상 불가능
let add2 = (x, y) => x + y ;

1주차 9강 : 조건문

1. if 문

let x = 10;

if (x > 0) { // true를 반환할 때 코드블럭 실행
    console.log("x는 양수입니다.");
}

let y = "hello world";
if (y.length>=5) {
    console.log("y는 길이가 5 이상입니다.");
}

2. if, else

// let a = 10;
let a = -3;
if (a > 0) { // true를 반환할 때 코드블럭 실행
    console.log("a는 양수입니다.");

} else { // false를 반환할 때 코드블럭 실행
    console.log("a는 0이거나 음수입니다.");
}

3. if, else if, else

// let b = 10;
let b = 0;
// let b = -10;
if (b > 0) { // 해당 조건에 true를 반환할 때 코드블럭 실행
    console.log("b는 양수입니다.");

} else if( b < 0 ){ // 해당 조건에 true를 반환할 때 코드블럭 실행
    console.log("b는 음수입니다.");
} else { // 모든 조건에 false를 반환할 때 코드블럭 실행
    console.log("b는 0입니다.");
}

4. switch

- 변수의 값에 따라, 여러개의 경우 (case) 중 하나를 선택

let fruit = "사과";

switch (fruit) {
    case "사과" :
        console.log('사과입니다.');
        break; // break를 사용하지 않는다면 참이되는 case 아래의 모든 케이스들이 실행된다.
    case "바나나" :
        console.log('바나나 입니다.');
        break;
    case "키위" :
        console.log('키위 입니다.');
        break;
    default :
        console.log('아무것도 아닙니다.');
}

1주차 10강 : 조건문의 중첩

여러가지 조건이 있을 때 중첩하여 사용

let age = 20;
let gender = "여성";

// 미성년자 구분
if (age>=18){
    if (gender === "여성"){
        console.log("성인 여성입니다.")
    }else{
        console.log("성인 남성입니다.")
    }
}else{
    if (gender === "여성"){
        console.log("미성년 여성입니다.")
    }else{
        console.log("미성년 남성입니다.")
    }
}

조건부 실행

- 논리연산의 결과를 도출할 수 있게해주는 항을 출력

let x = 10;

// && 연산자는 1항의 조건문이 true의 값을 가지면 2항으로 값을 결정한다. 따라서 2항 출력
(x > 0) && console.log("x는 양수입니다.");

// && 연산자는 1항의 조건문이 false의 값을 가지면 이미 false로 값이 결정 되었다. 따라서 2항 출력이 되지 않음
(x < 0) && console.log("x는 양수입니다.");

삼항 연산자와 단축평가

let y;
// y는 undefined의 값을 가지며, boolean 으로 false의 값을 가짐.
// 1항이 false라면 or(||) 연산에서는 2항의 true/false 유무로 값을 결정
// 따라서 20의 값을 가짐
// 예외처리할 때 default 값을 주기 위해 자주 사용
let z = y || 20; 
console.log(z);

falsy값, truthy 값

- 다른 타입들이 boolean 값으로 형 변환 하였을 때 false의 값을 가지는 값과 true의 값을 가지는 값

// falsy Test
if (0){
    console.log("hello");
}

if (""){
    console.log("hello");
}

if (null){
    console.log("hello");
}

if (undefined){
    console.log("hello");
}

if (NaN){
    console.log("hello");
}

if (false){
    console.log("hello");
}

if (true){
    console.log("hello"); // 실행
}

1주차 11강 : 객체

- key-value pair로 구성
- 하나의 변수에 여러개의 값을 넣을 수 있다. (모든 타입의 데이터)

1. 객체 생성 방법

1-1. 기본적인 객체 생성 방법

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

1-2. 생성자 함수를 이용한 객체 생성 방법

function Person(name,age,gender) { // 생성자 함수는 함수 이름이 대문자로 시작
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person('김명섭',24,'남자'); // new 키워드로 객체 생성
console.log(person1);

2. 접근방법

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

console.log(person.name); // '김명섭'
console.log(person['name']); // '김명섭'

3. 객체 메소드

- 객체가 가진 여러가지 기능, 함수형태 : Object.~~()

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

//3-1. Object.keys()
console.log(Object.keys(person)); //[ 'name', 'age', 'gender' ]

// 3-2. Object.values()
console.log(Object.values(person)); //[ '홍길동', 30, '남자' ]

// 3-3. Object.entries() // 모든 key와 value를 배열로 묶어서 배열에 저장
console.log(Object.entries(person)); //[ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

// 3-4. Object.assign // 객체 복사
let newObj = {};
Object.assign(newObj,person);
console.log(newObj); // person 객체의 프로퍼티가 모두 복사됨

let newObj2 = {};
Object.assign(newObj2,person,{age : 31});
console.log(newObj2); // person 객체의 프로퍼티를 복사하되 age 프로퍼티의 값을 다른 값으로 재할당 하여 복사

// 3-5. 객체 비교
// 객체가 참조하는 것은 값 자체가 아닌 값의 참조 주소를 참조한다. 
let person2 = {
    name : '홍길동',
    age : 30,
    gender : '남자',
}
let person3 = {
    name : '홍길동',
    age : 30,
    gender : '남자',
}
console.log(person2===person3); // false
//JSON.stringify()는 문자열화 시키는 메서드
console.log(JSON.stringify(person2)===JSON.stringify(person3)); // true

// 3-6. 객체 병합
let person4 = {
    name:"홍길동",
    age:30,
};
let person5 = {
    gender:"남자",
};
// spread 문법 ... (배열이나 객체를 풀때 사용)
let person6 = {...person4, ...person5};
console.log(person6);

1주차 12, 13강 : 배열

- 인덱스가 중요 (순서)

// 1. 생성
// 1-1. 기본 생성
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits); // [ '사과', '바나나', '오렌지' ]
console.log(fruits.length); // 3

// 1-2. 크기 지정 생성
let number = new Array(5);
console.log(number); // [ <5 empty items> ]
console.log(number.length); // 5

// 2. 요소 접근
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"
console.log(fruits[2]); // "오렌지"

// 3. 배열 메소드
// 3-1. 배열.push(item), 마지막 인덱스로 item 추가
console.log(fruits); // [ '사과', '바나나', '오렌지' ]
fruits.push('키위');
console.log(fruits); // [ '사과', '바나나', '오렌지', '키위']

// 3-2. 배열.pop(), 마지막 인덱스 item 제거
console.log(fruits); // [ '사과', '바나나', '오렌지', '키위']
fruits.pop();
console.log(fruits); // [ '사과', '바나나', '오렌지']

// 3-3. 배열.shift(), 첫번째 인덱스 item 제거
console.log(fruits); // [ '사과', '바나나', '오렌지']
fruits.shift();
console.log(fruits); // [ '바나나', '오렌지']

// 3-4. 배열.unshift(item), 첫번째 인덱스 item 추가
console.log(fruits); // [ '바나나', '오렌지']
fruits.unshift('사과');
console.log(fruits); // [ '사과', '바나나', '오렌지']

// 3-5. 배열.splice(변경할 인덱스의 시작, 개수, 변경할 값들)
// 1번째 인수를 통해 지정한 인덱스부터 2번째 인수의 개수만큼 삭제하고 해당부분에 3번째부터 지정한 인수 값으로 변경
console.log(fruits); // [ '사과', '바나나', '오렌지']
fruits.splice(1, 1, "포도", "키위");
console.log(fruits); // [ '사과',  '포도', '키위', '오렌지']

// 3-6. 배열.slice(추출할 인덱스의 시작, 추출할 인덱스의 마지막+1)
console.log(fruits); // [ '사과',  '포도', '키위', '오렌지']
let slicedArray = fruits.slice(1, 2);
console.log(slicedArray); // ['포도']



let numbers = [4, 1, 5, 4, 5];

// 3-7. 배열.forEach(콜백함수)
// 기본 함수 활용
numbers.forEach(function(number){
    console.log(number);
});
// 화살표 함수 활용
numbers.forEach(number => {
    console.log(number);
});

// 3-8. 배열.map(콜백함수), 기존 item을 새로운 형태의 배열로 변경
// 리턴을 하지 않는다면 기존 함수의 개수만큼 undefined로 채워진 배열 생성
// 기본 함수 활용
let newNumbers = numbers.map(function(number){
    return number *2
});
console.log(newNumbers); //[ 8, 2, 10, 8, 10 ]
// 화살표 함수 활용
let newNumbers2 = numbers.map(number=>number*2);
console.log(newNumbers); //[ 8, 2, 10, 8, 10 ]

// 3-9. 배열.filter(콜백함수), 콜백함수 내 리턴문에 해당하는 조건을 충족하는 item들을 배열로 리턴
let filterNumbers = numbers.filter(function(number){
    return number === 5;
})
console.log(filterNumbers);//[ 5, 5 ]
// 화살표 함수 활용
let filterNumbers2 = numbers.filter(number=>number === 5);
console.log(filterNumbers2);//[ 5, 5 ]


// 3-10. 배열.filter(콜백함수), 콜백함수 내 리턴문에 해당하는 조건을 충족하는 최초 item 1개를 리턴
let findNumber = numbers.find(function(number){
    return number > 4;
})
console.log(findNumber);//5
// 화살표 함수 활용
let findNumber2 = numbers.find(number=>number > 4);
console.log(findNumber2);//5

1주차 14강 : for문

// 1. for문
// 1-1 기본 사용
for (let i=0; i<10; i++) {
    console.log('for문 돌아가고 있음',i); 
}

// 1-2 배열과 for문
const arr = ['one','two','three','four','five'];
for (let i = 0 ;i<arr.length; i++){
    console.log(i);
    console.log(arr[i]);
}

// 1-2 조건문과 for문
// 0 ~ 10 중 2의 배수만 출력
for (let i=0; i<=10; i+=2){
    if (i!==0){
        console.log(i);
    }
}

for (let i=0; i<=10;i++){
    if (i!==0 && i%2 == 0){
        console.log(i);
    }
}

// 2. for ~ in 문
// 객체를 순회하는 방법
let person = {
    name: 'Kim',
    age: 30,
    gender:'male',
}
for (let key in person) {
    console.log(key, ":", person[key] );
}

1주차 15강 : while

//while
let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

// do ~ while, 코드블록을 선 실행시켜 조건에 만족하지 않더라도 최소 한번은 실행시킨다.
i = 0;
do {
    console.log('do while문입니다 : ',i); //do while문입니다 :  0
    i++;
}while (i > 10)

// break 문
for (let i =0 ; i<10; i++){
    if (i===5){
        break; // 반복문 종료
    }
    console.log('break test : ', i);
}

// break 문
for (let i =0 ; i<10; i++){
    if (i===5){
        continue; // 조건문이 만족하면 현재 반복을 종료하고 다음 반복으로 진행
    }
    console.log('continue test : ', i);
}

// while문을 활용하여 3초과 100 미만의 숫자중 5의 배수만 출력
let num = 4;
while (num<100){
    if (num%5 === 0 && num>=5) {
        console.log(num,"는 5의 배수입니다.")
    }
    num++; // 증감식
}

저작자표시 변경금지

'내일배움캠프 TIL' 카테고리의 다른 글

2023-10-14~15 주말 TIL (0)	2023.10.16
2023-10-13 본 캠프 7일차 / 26일차 TIL (0)	2023.10.14
내일배움캠프 팀소개페이지 프로젝트 KPT 회고 / 2023-10-11 본 캠프 5일차 / 24일차 TIL (0)	2023.10.12
2023-10-10 본 캠프 4일차 / 23일차 TIL (1)	2023.10.11
2023-10-09 22일차 TIL (0)	2023.10.11

개발하는 소대장

2023-10-12 본 캠프 6일차 / 25일차 TIL