HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
학습 TIL/
📝
N일차 배운 것 정리/
📝
1일차 배운 것 정리
📝

1일차 배운 것 정리

목차

목차1. javascript와 프론트엔드 개발 개요1-1.2. 변수, 상수, 자료형 그리고 메모리2-1. 변수, 상수, 자료형2-2. 메모리3. 표현식과 연산자4. 흐름제어5. 배열과 객체5-1. 배열5-2. 객체6. 스코프와 클로져

1. javascript와 프론트엔드 개발 개요

  • js 탄생배경
    • html에 동적인 기능을 추가하기 위해 빠르게 개발된 언어
    • by 팀 버너스 리, 브랜든 아이크
  • js로 무엇을 할 수 있을까
    • 서버개발 - nodejs, NestJS, Express
    • 앱개발 - ReactNative, NativeScript, Cordova , ...
    • 프론트엔드 개발
      • React, Vue, Angular, JQuery, Backbone.js,
      • 다양한 프론트엔드 개발 분야
          • notion image
  • 브라우저 동작 원리
    • 통신 - 렌더링 - 스크립트 실행
  • 프론트엔드 개발자의 역할
    • 브라우저에서 동작하는 UI를 개발하는 일
    • 디자인과 백엔드와의 의존도가 높다.
      • 디자인에서 목업,와이어프레임을 받고,
      • 백엔드에서는 데이터, API를 받는다.
      • 마지막에 작업하기 때문에 협업과 일정을 잘 맞추는 것이 중요한 직무
    • 6가지 핵심 역량
      • 커뮤니케이션
      • UI
      • 네트워크
      • 보안
      • 브라우저
      • 디자인
        • ↔ CS소홀, CSS안하기, 코더가 되는 것

1-1.

2. 변수, 상수, 자료형 그리고 메모리

2-1. 변수, 상수, 자료형

  • 변수
    • 프로그래밍에서의 변수는 메모리에 할당한 값을 의미
    • 변수 선언 키워드 var와 let
  • 상수
    • 상수는 변하지 않는 값
    • 한 번 선언된 이후 변할 수 없는 값
  • 자료형
    • String ( “”, ‘’ , ``)
    • Number (소수점, 실수, NaN, Inf)
    • Boolean( true, false )
    • Object > Array
    • Function
    • Undefined
    • Null

2-2. 메모리

  • 할당 → 사용 → 해제
  • 할당
    • 변수 선언 시 메모리에 할당
  • 사용
    • 할당된 메모리에 값을 넣어 사용
  • 해제
    • js에서는 GarbageCollector를 통해 해제
  • 식별자는 값이 아닌 메모리 주소를 참조하고 있다.
  • js엔진의 가상머신의 메모리 구현
    • Heap - Object 참조타입
      • 동적인 크기 변경 가능
    • CallStack - 원시타입
        •  
  • 가비지컬렉터의 Mark and Sweep 알고리즘
    • 닿을 수 없는 주소를 필요없는 주소로 정의하여 지워버리는 알고리즘
    • 루트노드로 부터 참조되든 모든 객체들을 순회하며, 순회 이후 방문하지 않은 객체들을 삭제한다.

3. 표현식과 연산자

  • 표현식
    • 표현식(Expressions) vs 문장(Statesment)
  • 연산자
    • 할당연산자 ( = )
    • 비교연산자 (== , ===)
    • 산술연산자 (+, -, *, /)
    • 논리연산자 (|| ,&&)
    • 삼항연산자 (? :)
    • 관계연산자 ( in )
      • 객체에 해당 속성이 있는지 확인하기 위한 연산자
        • const obj = {name: "soo", height: 177}
"name" in obj; // true
"gender" in obj; // false
    • typeof
      • 피연산자의 타입을 반환하는 연산자

4. 흐름제어

  • Control Flow
    • 조건이나 반복을 통해 상태를 제어하는 것
    • Goto, if-then-else, switch-case, for-while
  • Data Flow
    • 함수형 프로그래밍에서 데이터를 중심으로 제어하는 방식

5. 배열과 객체

5-1. 배열

  • 연관된 데이터를 연속적인 형태로 저장하는 데이터 타입 (ex. 출석부)
  • 생성
    • new Array(배열의 크기) 로 생성
    • fill 메소드를 통한 배열의 요소 생성
    • Array.from(Array(5), (value, index) ⇒ () )
  • join, reverse, concat
  • 끝 요소 추가/제거 - push, pop
  • 첫 요소 추가/제거 - unshift, shift
  • 배열 자르기 - slice, splice
  • for .. of ... 를 통한 배열 순회

5-2. 객체

  • 여러 값을 키-값 형태로 결합시킨 데이터 타입 (ex. 사물함)
  • 생성
    • new Object, { }
  • 추가
    • obj[”email”] = value
    • obj.email = value
  • 삭제
    • delete obj.email
  • 조회
    • Object.keys(obj) - 키 조회
    • Object.valuse(obj) - 값 조회
    • Object.entries(obj) - 키와값 동시 조회

6. 스코프와 클로져