🍊 감상

📙 열품타 코딩 시간 9hour
👍🏼 -
👎🏼 -

🚀 목표

• Udemy에서 Javascript 강좌 수강하기 (332/682)
• 커밋 연속 30일 달성하기 (2/30, 4.08 완료)

[링크 목록]
Web Developer Bootcamp 2021
모던 자바스크립트 튜토리얼

📣 The Web Developer Bootcamp 2021: 26.3-26.7

26. DOM

26-3. Input & Change Events

input value를 입력한 대로 업데이트하기

input.addEventListenr('input', function(e) {
	hi.innerText = input.value;
})

입력하는 대로 유저네임 보여주기

const heading = document.querySelector('h1');
const input = document.querySelector('input');
 
input.addEventListener('input', function (e) {
    if (!this.value) {
        heading.innerText = `Enter Your Username`;
    } else {
        heading.innerText = `Welcome, ${this.value}`;
    }
});

// Alternative Solution
let header = document.querySelector('h1');
let input = document.querySelector('input');
 
input.addEventListener('input', () => {
   header.innerHTML =`Welcome, ${input.value}`;
   if (input.value === ""){
       header.innerHTML = 'Enter Your Username';
    }
});

26-4. Event Building

Event Bubbling

event가 lower level 부터 higher level까지 trigger되는 것
다음 코드로 bubbling을 막을 수 있다

e.stopPropagation();

26-5. Event Delegation

작성한 트윗 지우기

tweetsContainer.addEventListener('click',function(e) {
	e.target.nodeName === 'LI' && e.target.remove();
})

26-6. Score Keeper

📣 Interview Question for Beginner

Part 1-1 Development common sense

객체 지향 프로그래밍(OOP)

영상 설명
데이터와 기능이 클래스로 캡슐화된 컴퓨터 자원의 묶음을 객체라 한다
은닉성 :private public
상속 :부모 클래스- 자식 클래스
다형성 : override
인터페이스
추상 클래스
코드의 재사용성 - 자주 사용되는 로직을 라이브러리로 만들어 둘 수 있다

📣 기본 개발 용어

링크

프로세스와 스레드

프로세스

프로세스: 컴퓨터에서 프로그램이 실행돼서 돌아가고 있는 상태
멀티태스킹 : 여러 개의 프로세스를 함께 돌리고 있다, 동시적, 병렬적
동시성(concurrency) : 프로세스 하나가 여러 작업들을 일부분씩 진행하는 것 - context switching
병렬적(parallelism) : 프로세스 하나에 코어 여러 개가 달려서 각각 동시에 작업을 수행하는 것, 듀얼코어, 쿼드코어 등,
컴퓨터는 프로세스마다 자원을 분할해서 할당한다

스레드

프로세스마다 주어진 자원을 사용
한 프로세스 안에 두 개의 스레드 실행 -> 까다롭고 오류 많음

컴파일러와 인터프리터

디버깅

소프트웨어 문제의 원인 찾음, 개발 중인 상태로 쓰이기도

컴파일러

코딩 -> 컴퓨터 알아볼 수 있도록 미리 해놓으면 컴파일러
컴파일러(프로그램)이 코드을 기계어 또는 중간언어로 번역 -> 컴파일 언어라고 한다(.class) -> jvm이라는 자바 가상 머신이 설치된 모든 종류의 기계에서 통용된다 - 소프트웨어 동작

인터프리터 (스크립트 언어)

코딩 -> 컴퓨터 알아볼 수 있도록 그때그때 하면 인터프리터
실시간 통역, 자바스크립트, 파이썬, 루비
코드 수정과 업데이트 수월, 컴파일러 언어에 비해 실행 속도는 느리다
프로그래밍 코드가 쉽게 누출되기도 함

빌드와 배포

빌드

코드 파일 + 라이브러리 + 이미지 + 기타 => 변형 및 압축 : 빌드
사용자가 바로 실행할 수 있도록 한다 (.exe)
코드 압축으로 전체 크기 줄이거나 난독화
컴파일 언어로 만들어진 소프트웨어는 빌드에 컴파일 작업이 포함돼 있는 것

배포

빌드한 결과물을 사용자에게 전달하는 과정

환경 변수

• 환경: 소프트웨어가 동작하는 공간

• 환경 변수 : 컴퓨터마다 지정된 값
  개발용(dev) 배포용(prod) 라는 환경 변수 값을 넣고 그에 따라 조건을 주어서 개발용 배포용 구분

라이브러리와 프레임 워크

라이브러리: 모듈화된 코드, 또는 그 묶음 (리액트)
프레임워크: 소프트웨어의 기초 설계가 프로그래밍돼 있는 것 (스프링, 장고, 뷰)

클래스와 오브젝트

링크
class는 연관 있는 data를 한 데 묶어놓는 container같은 것

class person{ //class
	name; //property //속성(field)
    age; //property //속성(field)
    speak(); //function //행동(method)
}

fields + methods -> class
method 없이 fields만 있는 것을 데이터 클래스라고 한다
캡슐화 : 클래스 내에서 내부적으로 보여지는 변수와 밖에 보이는 변수가 나뉜 것 (incapsulation)

class: 청사진, 틀, 템플릿 (teplate, declare once, no data in), 붕어빵 틀
정의만 한 것이라서 메모리에 올라가지 않음

object: 클래스에 실제로 데이터를 넣어서 만드는 것, instance of a class, created many times, data in, 팥붕어빵, 크림붕어빵, 피자붕어빵

• js파일에 'use strict'; 넣기 -> declared되지 않은 것은 에러가 발생함
  잘못 입력한 변수 이름이 global variable이 되지 않도록 해준다
  링크

파라미터

함수 하나로 다양한 기능을 실행할 수 있다
링크

자바스크립트 클래스 선언

clss declaration

object 생성 -> const object = new class(constructor fields);

c언어 : procedure언어 - 함수 호출 실행 언어
java: object oriented programming 언어
class: 커피 벤딩 머신
property

• integer: number of coffee (사용자가 -1으로 설정해도 0으로 될 수 있도록 getter와 setter을 쓰는 것) (다른 사람이 integer 수정할 수 없도록 private으로 만드는 게 incapsulation)
• method: 동전 넣기 / 커피 만들기

자바스크립트 자료형

링크

const name = "Mike"; //문자열 string
const name1 = "Mike"; //큰따옴표
const name1 = 'Mike'; //작은따옴표 - 역슬러쉬로 특수문자 인식 가능
const name1 = `Mike`; //백틱 - 문자열 내부 변수 표현

const age = 30; //숫자형

const a = true; // boolean

null //존재하지 않는 값
undefined //값이 할당되지 않았다 -> 변수 선언만 하고 할당하지 않으면
let age; 
console.log(age) //undefined

//객체형
//심볼형

console.log(typeOf null); //object, 객체의 자료형을 알아낼 수 있다, 다른 프로그래머의 코드를 보거나 api 에서 받아온 데이터를 처리해야 할 때 자주 쓸 수 있다
//여기선 null이 객체라고 나오지만 객체가 아니다, 자바스크립트 초기 버전의 오류임

자바스크립트에선 문자형 숫자형 섞어서 쓸 수 있으나 문자형으로 변경됨

getter & setter

get이라는 키워드로 값 리턴
set으로 값 설정 - value 받아와야 함

📣 자바의 정석

자바란

실행환경(JRE) + 개발도구(JDK) + 라이브러리(API)

pc 애플리케이션 - IJ, eclipse
웹 애플리케이션 - 스프링 프레임웤
모바일 애플리케이션(안드로이드)
빅 데이터 - hadoop(기본 플랫폼)
게임(마인 크래프트), 과학, 소형기기 등

모던 프로그래밍 언어(객체지향+함수형)

배우기 쉬운 객체지향 언어
자동 메모리 관리 (가비지 컬렉터, GC)
멀티 쓰레드를 지원
풍부한 라이브러리
운영체제에 독립적 (여러 운영체제에서 실행 가능)
-> JVM 자바 가상 머신 덕분에 write once, run anywhere

• 가비지 컬렉터: memory leak(메모리 누수)를 방지, 자바는 managed language, 램
  1) mark and sweep - root에서 닿지 않는 변수들을 치운다
  2) reference counting(참조 카운팅) - 참조 0이 되면 치운다
  순환 참조하지 말 것 - 레퍼런스 카운팅이 0이 안 돼서 안 치워짐

Java 설치 및 실행

메서드 - 클래스 검색할 수 있음