[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 사전직무교육 2일차(05.27)

학습기록

📜 조건문

🟡 조건문이란?

👉🏻 특정 조건을 만족할 때 실행하는 명령의 집합

👉🏻 조건이 참과 거짓인지에 따라서 달라지는 계산이나 상황을 수행하는 문법

 

🟡 if문

if(조건) {
	// 실행해야 할 명령
}

 

👉🏻  if(만약 ~라면), else(만약 ~가 아니라면), else if(만약 ~가 아니라 ~라면)

let person = 17
if (조건1) {
 실행문
} else if (조건2) {
  실행문
} else {
  실행문
}

 

🟡 if문 작동

 👉🏻 소괄호 안에 있는 표현식의 참 거짓 여부 판별 후 참이면 중괄호 안의 코드 실행

 👉🏻 거짓이면 else if 또는 else로 넘어감

 👉🏻 else if는 여러 개 사용 가능

 👉🏻 else 생략 가능

• 조건 하나만 있으면 if만 사용
• 참, 거짓처럼 명확한 두가지 조건이 있으면 if~else를 사용
• 추가적인 조건이 있으면 if ~ esle if ~ 사용

👉🏻 if ~ else 조건문 vs 삼항연산자

let num = 10
if (num % 2 === 0) {
  console.log("짝수")
} else {
  console.log("홀수")
}
//짝수

let answer = num % 2 === 0 ? "짝수" : "홀수"
console.log(answer) // 짝수

 

 

🟡 switch문

switch(값){
 case 조건1(값이 ~일때) :
  실행문;
 break;
 case 조건2:
	  실행문;
 break;
 default(조건1도 안맞고 2도 안맞을때): 
	 실행문; // 옵션이라서 안 써도 됨
}

👉🏻 switch문에서의 break

• switch문에서 빠져나갈 수 있게 해줌
• case별로 동작을 주고 싶으면 break문을 작성해주면 됨
• break을 사용하지 않으면 break가 나오거나 끝날때 까지 다 실행함

 

🟡 조건문 주의점

 👉🏻 조건문은 항상 소괄호안의 식을 참 또는 거짓으로 반환하려고 해서 0, false, null, undefined 이외의 값은 전부 참이라고 봄 

 

📜 반복문

🟡 while

 👉🏻 표현식이 참이면 {}안의 코드를 실행시킴

 👉🏻 false값이 나올때 까지 무한 루프 발생 가능 ⇒ false가 나오는 종료조건 꼭 넣어줘야 함

while(표현식){
 // 표현식이 참이면 실행 
 }

 👉🏻 표현식이 참이면 {}안의 코드를 실행시킴

 👉🏻 false값이 나올때 까지 무한 루프 발생 가능 ⇒ false가 나오는 종료조건 꼭 넣어줘야 함

 

🟡 do...while

do{
// 실행명령
// 한 번은 무조건 실행하고 그 이후에는 표현식이 참이면 실행
}while(표현식)

 👉🏻 코드를 한 번 먼저 실행시키고 반복하려고 할 때 사용,

 👉🏻 값이 참이 아니더라도 한번은 실행

 

🟡 for

for(초기문; 조건문; 증감문) {
//실행명령;
}

 👉🏻 for문의 실행 순서

1. 초기문을 실행
2. 조건문의 참/거짓 판단 조건문이 참이면 코드실행, 거짓이면 종료,
3. 증감문 실행
4. 2번부터 과정 반복

 

🟡 for...in

 👉🏻 배열이나 객체 안의 모든 요소들을 하나씩 다루기 위해 사용

let user = {
  age:10,
  name:"lee",
  grade:"B"
}

for(key in user){
  console.log(key) // "age", "name", "grade"
  console.log(user[key]) // 10, "lee", "B"
}

const grade = ["A","B","C"]

for(index in grade){
  console.log(index) // "0", "1", "2"
  console.log(grade[index]) // "A", "B", "C"
}

 

 

🟡 for...of

 👉🏻 배열에서 요소에 접근할때 사용 객체에 쓰면 오류남

let arr = ["일","이","삼"]

for(element of arr){
  console.log(element) // "일","이","삼"
}

 

📜 함수

🟡 함수 문법

 👉🏻 함수 선언식

function func () {}

 

👉🏻 함수 표현식 ( 변수에 함수를 할당한 것)

let func = function() {} // 익명함수
let func = function funcs () {} // funcs 함수

 

 

👉🏻 화살표함수 : 화살표 함수를 호출하기 위해 일반적으로 변수에 담아서 사용

const arrowFunc = () => {}

 
👉🏻 new Function() : 잘 사용 안함

const newFunc = new Function()

 

🟡 함수

 👉🏻 함수이름과 소괄호'()' 사용해서 함수 호출

 👉🏻 함수에는 매개변수 전달가능 

function sumFunc(a,b) {
console.log(a+b) // 3
}
sumFunc(1,2) 

// 나머지 함수이용
function sumFunc2 (...arg){
  let result = 0
  for(let i = 0; i < arg.length; i++){
    result+=arg[i]
  }
  return result
}
console.log(sumFunc2(1,2,3,4,5)) // 15

// 가변 인자 사용
function sumFunc3 () {
  let result = 0
  for(let i = 0; i < arguments.length; i++){
    result+=arguments[i]
  }
  return result
}
console.log(sumFunc3(1,2,3,4,5)) // 15

 가변인자(arguments) : arguments 객체란 함수 호출 시 전달된 인수들의 정보를 담고 있는 객체 여러정보가 들어있기 때문에 이왕 쓸거면 나머지 매개변수 사용추천!

 

🟡 콜백 함수

 👉🏻 매개 변수로 함수를 전달 받아 함수 내부에서 실행하는 함수

function sayHello(callback) {
  setTimeout(() => {
    console.log("say hello")
    callback()
  }, 2000)
}

sayHello(() => {
  console.log("say hi")
})

//say hello , say hi

 

📜 호이스팅

🟡 호이스팅

 👉🏻 호이스팅은 변수와 함수 선언이 코드의 상단으로 옮겨지는 현상,

 👉🏻 코드 실행전에 변수와 함수 선언이 메모리에 할당되는 것을 의미함

 👉🏻 변수 호이스팅의 경우 ‘var’키워드로 선언된 변수는 해당 스코프의 상단으로 옮겨지지만, 초기화는 옮겨지지 않아서 변수를 선언하기 전에 접근하려면 undefined가 반환됨

console.log(language) // undefined
var language = "english"

// 동작방식
var language;
console.log(language)
language = "english"

 

 👉🏻 함수 호이스팅은 함수 선언문은 호이스팅되지만 함수 표현식은 호이스팅 되지 않음

 👉🏻 let 과 const는 호이스팅이 되긴하지만 참조오류 발생 ⇒ 실행컨텍스트에 대해 알아야 좀 더 이해하기 쉬움

 👉🏻 

 

📜 컨텍스트

 👉🏻 실행 컨텍스트는 자바스크립트 코드가 실행되기 위해서 필요한 환경(코드 실행에 영향을 주는 조건이나 상태)을 제공하는 객체(Object)

 👉🏻 레코드(record)와 아우터(outer)로 구성

 👉🏻 아우터 : 연결 통로

 👉🏻 콜스택에서 실행컨텍스트를 생성해서 작동함

📜 객체

🟡 객체

 👉🏻 배열과 같이 여러 개의 데이터를 하나로 관리해주는 데이터 형태

 👉🏻 객체는 key(키)와 value(값)으로 이루어진 property(속성)들의 집합

const obj = {
key: value, // => property
//property name : property value
}

 

🟡 객체 접근 방법 

 👉🏻 점 표기법과  대괄호([]) 표기법

const user = {
 name:"july",
 age:10
}

// 점 표기법
console.log(user.name) // "july"

// 대괄호 표기법
console.log(user["name"]) // "july"

 

🟡 동적으로 객체 제어하기

const user = {
 name:"july"
}

// 추가
user.age = 10
console.log(user) // {name:"july", age:10}

// 변경
user.name = "sola"
console.log(user) // {name:"sola", age:10}

// 삭제
delete user.age
console.log(user) // {name:"sola"}

---

2일차 후기

음... 와... 오... 예... 하루만에 진도가 엄청나갔다.. 배웠던걸 복습하는 것처럼 생각하면 될듯할것 같지만 집에가서 복기해보기가 너무 힘듦 수업 끝나고 집에가면 밤이 되어있어서 주말에 몰아쳐서 복습해야할 듯? 화이팅!

온라인 젭으로 수업받는 분들 앉아계시는거 너무 귀여움

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성 되었습니다.