멋사 프론트엔드 스쿨 1기 - 46일차

서지영·2022년 1월 5일
0
post-thumbnail

★ 새로운 시작

오늘부터 혼공쓰를 공부하기로 맘 먹었다. 책을 공구로 사고 받았을 때 신이 나서 눈으로만 절반 정도 읽다가 조금 소홀해졌었는데 어제 JS 현타 맞고 처음부터 다시 배봐야겠다는 생각이 들어서 책을 폈다.

일단 이번주까지 이 책을 완독하고 다음주부터 JS100제 문제를 풀 계획을 짰다. 그동안 책을 읽을 때 눈으로만 보고 코드를 직접 치지 않았었는데(시간이 너무 오래 걸린다는 핑계로..) 이제부터 예제 코드를 직접 쳐보고, 단원마무리 문제도 쳐보면서 공부를 했다.

또한, 유튜브 무료 강의도 함께 병행하면서 책을 보고 있는데, 강사님께서 알려주실 때는 이해 했다가도 직접 코드를 짜지 못하는 나를 보며 한번 더 나의 부족함을 깨닫고 반성할 수 있게 되었다. 앞으로 가야할 길이 멀었지만, 시간을 투자하더라도 탄탄하게, 천천히 가야겠다.


★ [혼공JS] 2단원 - 자료와 변수

★ 식별자

  • 키워드를 사용하면 안 됨
  • 숫자로 시작하면 안 됨
  • 특수 문자는 _와 $만 허용됨
  • 공백 문자는 포함할 수 없음

★ 식별자의 종류

  • 식별자 뒤에 괄호가 없음
    -> 변수(단독 사용) / 속성(다른 식별자와 사용)
  • 식별자 뒤에 괄호가 있음
    -> 함수(단독 사용) / 메소드(다른 식별자와 사용)

★ 이스케이프 문자

  • \n : 줄바꿈
  • \t : 탭
  • \\ : 역슬래시(\) 자체를 의미

★ 오류 종류

  • ReferenceError (예외 처리)
    : alert를 alrt 등처럼 뭔가가 잘못 입력된 경우의 오류
  • SyntaxError (구문 오류)
    : 토큰(기호)를 잘못 입력했을 때의 오류
  • Uncaught SyntaxError : Unexpected identifier (구문 오류)
    : 식별자가 예상하지 못한 위치에서 등장했다는 오류이며, 예를 들면 이스케이프 문자를 사용하지 않고 한 종류의 따옴표만 사용했을 경우 나타남
  • Identifier has already declared (구문 오류)
    : 특정한 이름의 상수는 한 파일에서 한 번만 선언할 수 있으며, 같은 이름으로 상수를 한번 더 선언할 경우 나타나는 오류
    -> 새로고침 또는 다른 이름의 식별자를 사용하여 상수 선언
  • Identifier has already been declared (구문 오류)
    : 상수와 마찬가지로 특정한 이름의 변수는 한 파일에서 한 번만 선언할 수 있으며, 같은 이름으로 변수를 한 번 더 선언할 경우 발생하는 오류
    -> 다른 이름의 식별자를 사용하여 변수 선언
  • Missing initializer in const declaration (구문 오류)
    : 상수를 선언할 때 값을 지정해 주지 않을 경우 나타나는 오류
    -> 상수 선언 시, 값을 지정
  • Assignment to constant cariable (예외 처리)
    : 한번 선언된 상수의 자료는 변경할 수 없으며, 변경할 경우 나타나는 오류
    -> 상수가 아닌 변수를 사용해야 함

★ 자료형 변환

  • prompt(메시지 문자열, 기본 입력 문자열)
    - prompt( ) 함수는 사용자로부터 내용을 입력받아서 사용함
    - 리턴 : 함수를 실행한 후 값을 남기는 것

  • 예시 1번

  • 예시 2번
  • confirm(메시지 문자열)
    - 확인 클릭 시, true 리턴
    - 취소 클릭 시, false 리턴

★ 불 자료형으로 변환하기

- false로 반환되는 것들

  1. 0
  2. NaN(Not a Number : 숫자로 나타낼 수 없는 숫자)
  3. " " (빈 문자열)
  4. null
  5. undefined
  • 이를 제외한 것들은 true로 반환됨

★ [혼공JS] 3단원 - 조건문

★ if / if else / if else if 조건문

★ switch 조건문

switch (자료) {
  case 조건A : 
	break
  case 조건B : 
    break
  default : 
    break
}
  • default 키워드는 생략할 수 있음
  • break 키워드는 switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드임
  • switch 조건문은 특정 값의 조건을 비교할 때 사용함

★ 조건부 연산자 (삼항 연산자)

불 표현식 ? 참 일때의 결과 : 거짓일 때의 결과

★ 짝수와 홀수 구분하기

코드 1번 : 끝자리를 이용한 짝수 찾기

코드 2번 : 나머지 연산자(%)를 이용한 짝수 찾기

★ 태어난 연도를 입력받아 띠 출력하기

if else if 조건문 사용

split로 문자열 잘라 사용


★ [혼공JS] 4단원 - 반복문

  • 배열 : 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형
  • 인덱스 : 요소의 순서
  • 요소 : 배열 내부에 들어 있는 값
    - 요소의 개수를 확인할 때는 배열의 length 속성을 사용함
    - 사용 예시 : 배열.length

★ 배열 뒷부분에 요소 추가하기

  • push( ) 메소드를 사용해 배열 뒷부분에 요소 추가하기

    배열.push(요소)

  • 인덱스를 사용해 배열 뒷부분에 요소 추가하기

    const fruitsA = ['사과', '배', '바나나']
    // undefined
    fruitsA[10] = '귤'
    // "귤"
    fruitsA
    // (11) ["사과", "배", "바나나", empty*7, "귤" ]

    const fruitsB = ['사과', '배', '바나나']
    // undefined
    fruitsB[fruitsB.length] = '귤'
    // "귤"
    fruitsB
    // (4) ["사과", "배", "바나나", "귤" ]

★ 배열 요소 제거하기

  • 인덱스로 요소 제거하기

    배열.splice(인덱스, 제거할 요소의 개수)

    const itemsA = ['사과', '배', '바나나']
    // undefined
    itemsA.splice(2, 1)
    // ["바나나"]
    itemsA
    // (2) ["사과", "배"]

  • 값으로 요소 제거하기

    const 인덱스 = 배열.indexOf(요소)
    배열.splice(인덱스, 1)

  • 배열의 특정 위치에 요소 추가하기

    배열.splice(인덱스, 0, 요소)

★ for in 반복문

for (const 반복 변수 in 배열 또는 객체) { 문장 }

  • 반복 변수에는 요소의 인덱스들이 들어옴

★ for of 반복문

for (const 반복 변수 of 배열 또는 객체) { 문장 }

  • for in 반복문과 다르게 반복 변수에 요소의 값이 들어감

★ for 반복문

for (let i = 0; i < 반복 횟수; i++) {문장}

  • 반복변수를 let 키워드로 선언함

  • 중첩 반복문을 사용한 피라미드( * 한 개씩 증가)

  • 중첩 반복문을 사용한 피라미드( * 두 개씩 증가)

★ while 반복문

while(불 표현식) {문장}

  • 불 표현식이 true면 계속해서 문장을 실행함
  • 반복문이 무한 반복되는 것을 무한 루프라 함
  • break키워드를 사용하여 무한루프를 벗어날 수 있음

- for 반복문 vs while 반복문

-> 횟수를 기준으로 반복할 경우 : for 반복문
-> 조건을 기반으로 사용할 경우 : while 반복문


내일은 5단원 함수 정리할 예정!!

★ 긍정의 한줄

나는 과거를 생각하지 않습니다. 중요한것은 끝없는 현재 뿐이지요. - 윌리엄 서머셋 모옴 -

오늘부터 다시 시작하는 마음으로 하자!!
앞으로 잘하면 된다!!

profile
코딩코딩

0개의 댓글