학습법특강

내배캠1기 수료생이자 현 커리큘럼 매니저님의 학습법특강

TIL,알고리즘 => 습관화하여 나의 자산으로 만들자!
개인과제,팀과제 => 배운내용을 복숩하며 사고력과 구현력을 단련하자!
프로젝트 => 기술적 의사결정과 기술적 고민을 동시에 할 수 있는 과정
개발역량점검표 => 메타인지능력향상, 수료까지 도달해야할 실력목표

기술적 고민

이 기술을 사용한 이유는 무엇인가?

다른 기술을 고민하였는가?
어떤 부분이 더 좋은가?
선택의 이유과 근거를 제시

기술적 고민을 잘하려면?

로직과 코드에 대한 의도를 생각해보기
구현 기술, 스택에 목적과 근거를 가지기
더 좋은 방법이 있나 고민해보기

협업을 잘하려면?

듣기 좋게 예쁘게 말하기
전달내용을 명확히 하기
데이터/기술 근거를 바탕으로 소통하기

JavaScript 문법 종합반

어제 미니프로젝트 발표와 함께 내배캠 첫번째 chapter가 끝났다.
오늘부로 팀이 재편성 되었고 새로운 강의를 지급받으며 본격적으로 JavaScript를 학습하게 되었다.

var, let, const

변수 선언은 var, let, const 3가지로 가능하며 var는 재선언,재할당이 가능하고 let은 재할당만 가능하고 const는 재선언,재할당 모두 불가능하다.

문자열

concat : 문자열을 결합시켜주는 메서드

let str1 = "hello,";
let str2 = "world!!";
let result = str1.concat(str2); //str1에 str2 붙이는 메서드
console.log(result) //hello,world!!

substr/slice : 문자열을 자르는 메서드

둘 다 문자열을 자르지만 방식이 조금 다르다.
substr(몇번째부터,몇개)
slice(몇번째부터,몇번사이)
let str3 = "hello world!";
console.log(str3.substr(6,5)); //world
console.log(str3.slice(6,11)); //world

serch : 문자열을 검색하여 몇번째 문자열에서 시작하는지

let str4 = "hello world!";
console.log(str4.search("world")) //6

replace : 문자열을 바꿔주는 메서드

.replace("바꿀문자","바뀔문자")

let str5 = "hello world!";
let result01 = str5.replace("world",'javascript')
console.log(result01)

형변환

Boolean

console.log(Boolean(0))     	//number는 0이면 false
console.log(Boolean(""))    	// string은 문자열이 비었으면 false
console.log(Boolean(null))  	//false
console.log(Boolean(undefined)) //false
console.log(Boolean(NaN)) 	    //false

console.log(Boolean(1)) 		//number는 0이 아니면 true
console.log(Boolean(2)) 
console.log(Boolean("false")) 	//string은 문자열이 존재하면 true
console.log(Boolean({})) 		//object는 값이 비었어도 true

연산자

등호연산자

// 등호연산자 =
let x = 10;
console.log(x) //10

//더하기 등호연산자 (+=)
x += 5; //원래 x값을 들고와서 5를 더하여라
console.log(x) //15

//빼기 등호 연산자 (-=)
x -= 5;
console.log(x) //10

//곱하기 등호 연산자 (*=)
let a = 10;
a *= 2
console.log(a) //20

//나누기 등호 연산자(/=)
a /= 2
console.log(a) //10

//나머지 등호 연산자(%=)
a %= 2;
console.log(a) //0

삼항연산자 : 조건에 따라 값을 선택

삼항연산자 = 조건 ? true : false

let z = 10;
let result1 = (z > 5) ? '크다' : '작다';
console.log(result1 //크다

let y = 20;
let result2 = (y < 10) ? '작다' : '크다'
cosole.log(result2) //크다

함수

함수 선언/표현식

function add(x, y) {   //기본적인 함수모양
    let result = x + y;
    return result;
}
console.log(add (7,5)) // 12

let add2 = function (x,y){ //함수 표현식
    return x + y;
}
console.log(add(3,5)) //8

화살표함수 (ES6 신문법)

function add (x,y){
    return x+y
}

//1-1 기본적인 화살표 함수
let arrowFuc01 = (x,y) => {
    return x+y
}

//1-2 한 줄로 함수가 처리할 로직이 한줄로 끝날때 길면 {} 필요
let arrowFuc02 = (x,y) => x + y

let arrowFuc03 = x => x //매개변수가 1개일때 () 생략 가능

객체

기본적인 객체 생성 방법

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

생성자 함수를 이용한 객체 생성 방법

function Person(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}
let person1 = new Person("홍길서",29,"여성") 
console.log(person1) //{name: '홍길서', age: 29, gender: '여성'}
let person2 = new Person("홍길남",28,"남성")
console.log(person1) //{name: '홍길남', age: 28, gender: '남성'}

Object.entries() : key와 value를 묶어서 배열을 만드는 메서드 (2차원배열)

let entries = Object.entries(person)
console.log("entries =>", entries) //[['name','홍길동],['age',30],['gender','남성']]

Object.assign : 객체를 복사해오는 메서드, 수정도 가능

Object.assign(어디다가,뭘복사할래?)

let newPerson = [];
Object.assign(newPerson,person)
console.log(newPerson)//[name: '홍길동', age: 30, gender: '남성']

Object.assign(newPerson,person, {age : 25}) //복사를 하며 value 수정도 같이가능!
console.log(newPerson)//[name: '홍길동', age: 25, gender: '남성']

객체의 병합

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

C에는 geder가 없고 D에는 gender만 있는 상황
... : spread operator 객체의 {}를 풀어서 반환

let perfectMan = {...personC, ...personD}; //{}를 풀어서 합친후 다시 {}를묶음
console.log(perfectMan) //{name: '홍길동', age: 30, gender: '남자'}

배열

pop : array의 마지막 index에 위치한 element를 지우는 메서드

let fruits = ['사과', '바나나', '오렌지']
console.log(fruits1) //['사과', '바나나', '오렌지']
fruits1.pop();
console.log(fruits1) //['사과', '바나나']

shift : array의 첫번째 index에 위치한 element를 지우는 메서드

console.log(fruits1) //['사과', '바나나']
fruits1.shift();
console.log(fruits1) //['바나나']

unshift : array의 첫번째 index에 element를 추가하는 메서드

console.log(fruits1)//['바나나']
fruits1.unshift("메론")
console.log(fruits1)//['메론','바나나']
fruits1.unshift("수박","키위","토마토")
console.log(fruits1)//['수박', '키위', '토마토', '메론', '바나나']

splice : array의 index 번호를 지정하여 새로운 element로 변경시켜주는 메서드

splice(index1,index2,element)

console.log(fruits1)//['수박', '키위', '토마토', '메론', '바나나']
fruits1.splice(1,1,"포도")
console.log(fruits1)//['수박', '포토', '토마토', '메론', '바나나']
fruits1.splice(2,4,"망고","참외")
console.log(fruits1)//['수박', '포도', '망고', '참외']

map, filter, find

map : 기존 array를 가공하여 새로운 array 생성하는 메서드, retrun과 새로운 array를 받을 변수가 필요, 항상 원본 배열의 길이만큼이 return됨

let numbers = [3, 2, 5, 1, 4]
let newNumbers = numbers.map(function (item) { //newNumbers = 맵을 받을 새변수
    return item * 2;//기존 array가공  return안넣으면 모두 undefine
})

console.log(newNumbers) //[6, 4, 10, 2, 8]

filter : array에서 조건에 해당하는 사항만 걸러주는 메서드

console.log(numbers) // [3, 2, 5, 1, 4]
let filteredNumber = numbers.filter(function (item) {
   return item > 2; //return이 필요하나 map과다르게 걸러질 조건
})
console.log(filteredNumber) //[3, 5, 4]

find : array에서 조건에 부합하는 첫번째 값만 반환해주는 메서드

console.log(numbers) // [3, 2, 5, 1, 4]
let result1 = numbers.find(function(item){
    return item>2;
})
console.log(result1) //3

while 문

모양

let i = 0;  초기화
while (조건){
메인로직
    증감
}

let i = 0;
while (i<10){
    console.log('hi') //hi 10번찍힘
    i++
}

while문 3초과 100미만의 수 중 5의 배수만 출력

i = 4
while (i>3 && i < 100){
    if(i % 5 === 0 && i>=5){
        console.log(i + "은 5의 배수입니다.") // 5는 5의 배수입니다 .... 95는 5의 배수입니다.
    }
    i++
}

do ~ while 문 : 조건에 부합하지 않더라도 일단 1회는 실행

i = 0;               //초기화
do {                //실행
    console.log(i)  // 0 한번만 실행
    i++             //증감
} while (i > 10) // 조건

break

for (i=0; i<10; i++){
    if (i === 5){
        break; //for문을 멈춤
    }
    console.log(i) //0 1 2 3 4
} 

continue

for (i=0; i<10; i++){
    if (i === 5){
        continue; //i가 5가됐을때 로직이 실행되지않고 바로 다음 i로 넘어감
    }
    console.log(i) //0 1 2 3 4 6 7 8 9 
}