HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
학습 TIL/
🧐
[TIL] 데브코스 1일차
🧐

[TIL] 데브코스 1일차

Date
Mar 21, 2022
대주제
TIL
주제
자료형과 메모리
활동 기록

오늘 배운 것

  • javascript와 프론트엔드 개발 개요
  • 변수, 상수, 자료형
  • 메모리와 가비지컬렉터
  • 표현식과 연산자
  • 흐름제어
  • 배열과 객체 기본 메소드
  • 스코프와 클로저
🗣️
선협님의 추천 공부 방법/태도
 

어려웠던 내용

궁금한 내용 / 부족한내용

  • 클로저란
    • 실제 개발환경에서 어떻게 사용되고 있고 사용할 수 있을지
  • Data-Flow 방식(함수형 프로그래밍)의 장점과 적용사례들

느낀점

  • 모든 강의가 세부적인 내용까지 다루기보다는 해당 개념들을 간단히 설명해주는 방식으로 진행되었다. 알고 있었던 부분이 많았지만, 또 클로저와 함수형 프로그래밍 부분은 낯설게 느껴지기도 하였다.
  • 프론트엔드의 분야가 정말 다양하다는 것을 다시 한 번 깨닫게 되었다.
    • 그래도 한 번씩은 다 살펴본 개념이라는 것에서 그동안 공부 열심히 해왔구나! 더 열심히 해야겠다! 라는 다짐을 하게 되었다.
      • notion image

참고링크

강의노트
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안하기, 코더가 되는 것
변수, 상수, 자료형 그리고 메모리
  • 변수
    • 프로그래밍에서의 변수는 메모리에 할당한 값을 의미
    • 변수 선언 키워드 var와 let
  • 상수
    • 상수는 변하지 않는 값
    • 한 번 선언된 이후 변할 수 없는 값
  • 자료형
    • String ( “”, ‘’ , ``)
    • Number (소수점, 실수, NaN, Inf)
    • Boolean( true, false )
    • Object > Array
    • Function
    • Undefined
    • Null
메모리
  • 메모리
    • 할당 → 사용 → 해제
    • 할당
      • 변수 선언 시 메모리에 할당
    • 사용
      • 할당된 메모리에 값을 넣어 사용
    • 해제
      • js에서는 GarbageCollector를 통해 해제
  • 식별자는 값이 아닌 메모리 주소를 참조하고 있다.
  • js엔진의 가상머신의 메모리 구현
    • Heap - Object 참조타입
      • 동적인 크기 변경 가능
    • CallStack - 원시타입
        •  
  • 가비지컬렉터의 Mark and Sweep 알고리즘
    • 닿을 수 없는 주소를 필요없는 주소로 정의하여 지워버리는 알고리즘
    • 루트노드로 부터 참조되든 모든 객체들을 순회하며, 순회 이후 방문하지 않은 객체들을 삭제한다.
표현식과 연산자
  • 표현식
    • 표현식(Expressions) vs 문장(Statesment)
  • 연산자
    • 할당연산자 ( = )
    • 비교연산자 (== , ===)
    • 산술연산자 (+, -, *, /)
    • 논리연산자 (|| ,&&)
    • 삼항연산자 (? :)
    • 관계연산자 ( in )
      • 객체에 해당 속성이 있는지 확인하기 위한 연산자
        • const obj = {name: "soo", height: 177}
"name" in obj; // true
"gender" in obj; // false
    • typeof
      • 피연산자의 타입을 반환하는 연산자
흐름제어
  • Control Flow
    • 조건이나 반복을 통해 상태를 제어하는 것
    • Goto, if-then-else, switch-case, for-while
  • Data Flow
    • 함수형 프로그래밍에서 데이터를 중심으로 제어하는 방식
배열과 객체
  • 배열
    • 연관된 데이터를 연속적인 형태로 저장하는 데이터 타입 (ex. 출석부)
    • 생성
      • new Array(배열의 크기) 로 생성
      • fill 메소드를 통한 배열의 요소 생성
      • Array.from(Array(5), (value, index) ⇒ () )
    • join, reverse, concat
    • 끝 요소 추가/제거 - push, pop
    • 첫 요소 추가/제거 - unshift, shift
    • 배열 자르기 - slice, splice
    • for .. of ... 를 통한 배열 순회
  • 객체
    • 여러 값을 키-값 형태로 결합시킨 데이터 타입 (ex. 사물함)
    • 생성
      • new Object, { }
    • 추가
      • obj[”email”] = value
      • obj.email = value
    • 삭제
      • delete obj.email
    • 조회
      • Object.keys(obj) - 키 조회
      • Object.valuse(obj) - 값 조회
      • Object.entries(obj) - 키와값 동시 조회
스코프와 클로저
  • 스코프
    • 유효범위, 변수가 어느 범위까지 참조하는지를 의미
    • var를 사용하면 안되는 이유 - 스코프
  • 클로저
    • 함수가 선언된 환경의 스코프를 기억하여, 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법
    • 사용 이유
      • 은닉화
      • 알기힘든 버그 수정을 위해