[패스트캠퍼스] React 강의 학습일지 4주차

백선영·2022년 10월 10일
0

패스트캠퍼스

목록 보기
4/8
post-thumbnail

</ 4주차 복습 및 정리>

JavaScript 선행

표기법

  • dash-case(kebab-case)
    ex) hello-world

  • snake_case
    ex) hello_world

  • camelCase
    ex) helloWorld

  • PascalCase
    ex) HelloWorld

Zero-based Numbering

  • 컴퓨터는 0부터 숫자를 시작(특수한 경우는 제외)

주석(comments)

데이터 종류(자료형)

  • String(문자형): 따옴표를 사용해야함.

  • Number(숫자형): 정수 및 소수점 숫자를 나타낸다.

    • 숫자형을 따옴표로 묶으면 문자형으로 인식하기때문에 주의해야함!

  • Boolean: true, false 두 값만 존재한다.

  • undefined: 값이 할당되지 않은 상태.

  • null: 값이 비어있음을 의미.(의도적으로 비워놨다는게 포인트!)

  • object(객체 데이터): 여러데이터를 저장하는 것.

    • key=value 형태로 저장한다.

  • array(배열데이터): 여러데이터를 순차적으로 [ ] 안에 넣어 저장하는 것.

변수

  • 데이터를 저장하는 데이터의 이름
    • let: 데이터를 재할당 할 수 있음. <-> const: 데이터를 재할당 할 수 없음.
    • var: 예전에는 많이 쓰였지만 요즘은 많이 안 쓰이기 때문에 되도록 사용하지 않는것이 좋음.

예약어

  • 특별한 의미를 가지고 있어 변수, 함수의 이름으로 사용할 수 없는 단어들을 의미
    ex) this, if, break, continue, else, false, var, true 등

함수

  • 특정 동작을 수행하는 코드의 집합
    • 기명함수: 이름이 있는 함수를 뜻함. 함수를 선언한다고 이야기함.

    • 익명함수: 이름이 없는 함수를 뜻함. 함수를 표현한다고 이야기함. 데이터로 사용되기도함.

    • 객체 데이터

조건문

  • 조건의 결과에 따라 코드를 실행하는 구문
    ex) if, else

DOM API

  • DOM = HTML의 내용들을 의미, API는 일종의 명령들을 의미한다. 그래서 DOM API란 자바스크립트로 HTML을 제어할때 사용하는 명령들이라고 할 수 있음.

  • JavaScript 정리

    • HTML 요소 찾기
      const boxEl = document.querySelector('.box'); // 요소가 1개일때
      const boxEls = document.querySelcector('.box'); // 요소를 다 찾을때
    • HTML 요소에 적용할 수 있는 메소드
      • .addEventListener();
        boxEl.addEventListener('click', function() {
        	console.log('Click~!');
        });
        // boxEl요소를 클릭하면 콘솔에 Click~!을 나오게 하라는 의미.
        
      • .classList.add('클래스명');
      • .classList.remove('클래스명');
      • .classList.contains('클래스명'); : 클래스명이 포함된 클래스를 찾으라는 의미
      • .forEach: 찾은 요소들을 반복해서 함수를 실행한다. 각각의 요소에 적용
      • .textCotent: 텍스트를 추가할 수 있는 메소드
        Getter: 값을 얻는 용도
        Setter: 값을 지정하는 용도

메소드 체이닝

  • 메소드를 체인처럼 연속적으로 호출하는 것.
const a = 'Hello~';
const b = a.split('').reverse().join('');

console.log(a); // Hello~
console.log(b); // ~olleH

Node.JS

  • Node.JS란 자바스크립트 엔진으로 빌드가 된 프로그래밍 언어가 동작하는 환경(자바스크립트 런타임)을 말한다.

npm

  • 전 세계의 개발자들이 만든 패키지나 모듈등을 관리하는 것을 말한다.
    • 개발용 의존성: 개발할 때만 필요하고 웹브라우저에서는 필요하지 않은 것을 의미.
      npm install -parcel-bundel -D
      // 뒤쪽에 꼭 대문자 D를 붙여서 다운로드 해야함!
    • 일반 의존성: 웹브라우저에서도 동작할 수 있는 것을 의미.
      npm install lodash
      // 따로 무엇가를 붙일 필요가 없음.

유의적 버전

  • 버전마다 의미를 부여하여 나타내는것을 의미.

    Major.Minor.Patch
    E.g,12.14.1

    • Major(12): 기존 버전과 호환되지 않는 새로운 버전을 의미.
    • Minor(14): 기존 버전과 호환되면서 새로운 기능이 추가된 버전을 의미.
    • Patch(1): 기존 버전과 호환되면서 버그 및 오타 등이 수정된 버전을 의미.

    ^Major.Minor.Patch
    E.g,^12.14.1

    • ^(캐롯)기호: Minor, Patch버전이 언제든지 최신버전으로 업데이트 할 수 있다는걸 의미.

</ 4주차를 마치며>

드디어 내가 국비수업을 들었을 때부터 제일 어려워하던 자바스크립트 부분으로 들어왔다. 선행학습이긴 했지만 어려운건 어쩔 수 없는 것 같다. 복습도 하고 스타벅스 예제를 하면서 나혼자 스스로 공부도 해야할 것 같다.

profile
웹퍼블리셔를 꿈꾸고 있습니다✨

0개의 댓글