this? this는 현재 실행 되는 코드가 어떤 object를 가리키고 있는지를 알려준다 함수가 호출 되면 암묵적인 매개변수로 arguments와 this가 전달된다 this binding = 함수가 호출 될때 this에 바인딩 되는 객체가 동적으로 결정된다 함수 호출에 따른 this 자바스크립트에서는 크게 4가지 함수 호출 방식이 존재 한다 1. 함수 호출 글로벌 영역에서 선언한 전역함수 에서는 this가 당연히 전역 객체에 바인딩 되고 함수 내부에 선언된 내부 함수, 메소드 내부에 선언된 내부 함수, 콜백함수 상관 없이 내부 함수는 this가 전역 객체에 바인딩 된다 2. 메소드 호출 메소드에서는 this가 해당 메소드를 호출한 객체에 바인딩 된다 3. 생성자 함수 호출 this가 해당 함수가 생성하는 객체에 바인딩 된다 4. apply/call/bind 호출 명시적으로 this를 특정 객체에 바인딩하는 방법이다 콜백함수는 this가 전역객체에 바인딩 되기 때문에 보통 콜백함…

자바스크립트는 클래스 기반이 아닌 프로토타입 기반 객체지향 프로그래밍 언어이다 프로토타입 객체 자바스크립트에서는 모든 객체가 상위 객체에 연결되어 있다. 이러한 상위 객체들을 프로토타입 객체/프로토타입이라 한다. 예: 모든 객체는 Object라는 상위 객체와 연결되어 있고 [[Prototype]] 인터널 슬롯(__proto__)을 통해 상위 객체에 정의된 속성을 사용할 수 있다 __proto__와 prototype 프로퍼티 __proto__는 어떤 객체의 부모 역할을 하는 프로토타입 객체를 가리킨다. (e.g. 일반적으로 함수는 __proto__ = Function.prototype 값을 갖고 그 외 다른 객체는 __proto__ = Object.prototpe을 갖는다). 이 속성을 변경하는 방식으로 상속을 구현할 수 있다. prototype은 함수 객체가 생성자로 사용될때 함수의 형태를 정의하게될 부모 객체를 가리키는 속성이다. 이 속성에 프로퍼티나 메소드를 추가 하면 prot…

타입 가드 타입을 걸러내는 것을 말함 타입 단언 타입 서술어 in 연산자 사용하기 instanceof 사용하기 인덱스 시그니처 객체의 키 이름을 모르고 타입만 알고 있는 경우 사용 단점: 키가 없어도 접근이 가능함 인덱스 시그니처를 사용한 후 keyof로 해당 객체의 key 타입을 사용할 수 있다 예: let A:keyof NumberObj // let A: string | number 매핑 타입 새로운 타입을 만들때 기존 타입과 중복되는 부분이 많은 경우 사용 조건부 타입 타입을 조건적으로 부여 분산조건부 타입 제네릭 타입 위에서 조건부 타입을 사용하면 분산적으로 (분배법칙처럼) 동작한다 조건부 타입의 추론 infer (런타임에서 타입을 추론) 유틸리티 타입 타입스크립트에서 만들어놓은 타입 Partial = 모든 속성이 옵셔널로 변경된 타입을 반환 Readonly = 모든 속성이 readonly 변경된 타입을 반환 Record = 속성의 키가 K이고 속성의 값이 T인 타…

쿠키란? http는 stateless한 특징을 가지고 있다 cookie는 서버에서 브라우저에게 보내는 데이터이다. 보통 유저를 식별하는 용도로 사용되어 브라우저에서 서버에 request를 보낼때 cookie를 넣어서 보내면 서버에서 어떤 브라우저가 요청을 보냈는지 구분할때 사용된다. => cookie를 사용하면 http를 stateful하게 사용할 수 있다 일반적으로 세션 관리 유저 세팅 유저 행동을 tracking하기 위해 사용된다 쿠키 생성 서버에서 http request 받은 후 Set-Cookie 헤더에 1개 이상의 쿠키를 넣어서 보낸다 브라우저는 해당 쿠키를 저장한 후 서버에 request를 보낼때 마다 쿠키를 같이 보낸다 서버에서는 domain, path로 쿠키를 받을 수 있는 곳을 제한하거나 expiration date로 쿠키가 보내질 수 있는 시간을 제한할 수 있다 쿠키 lifetime permanent cookie는 expiration date가 명시되어 있으면 해…

타입스크립트 소개 타입스크립트 = 자바스크립트에 타입 syntax가 추가된 것 자바스크립트가 실행되는 모든 곳에서 실행가능 @ts-check -> @param 으로 타입을 점차 설정 가능 사용 이유: 자바스크립트는 동적 타입 언어라 런타임에 변수의 타입이 결정됨, 타입스크립트는 정적 타입 언어라 컴파일 타임에 변수의 타입이 결정됨 (타입 에러 미리 발견가능) + 타입스크립트는 es6을 es5나 es3으로 변환해 크로스브라우징 문제를 해결가능 (babel이 필요없음) + 가독성을 높여줌, 유지보수가 중요한 프로젝트에 적합함 (작은 프로젝트는 오버 엔지니어링) 타입스크립트 기본 타입 string, number, boolean 기본 타입 소문자임 object 보통 interface를 사용 key type 형태로 object property의 타입 지정 Array, Tuple, enum Array (e.g. number[]) Tuple은 길이와 타입이 고정된 배열 (e.g. [string…

Closure 변수의 유효범위를 의미한다 전역 스코프, 지역 스코프 변수와 같이 전역 스코프, 지역 스코프로 크게 나눌 수 있다 함수 스코프, 블록 스코프 자바스크립트는 일반적으로 함수 스코프를 갖는다 (var를 사용한 경우) let을 사용하면 블록 스코프를 사용할 수 있다 렉시컬 스코프 렉시컬/정적 스코프에서는 함수 스코프의 상위 스코프를 함수가 선언된 위치의 스코프가 상위 스코프가 된다 동적 스코프에서는 함수가 호출된 위치의 스코프가 상위 스코프가 된다. 자바스크립트는 렉시컬 스코프를 따른다 암묵적 전역 변수(?) 자바스크립트에서는 변수 선언 없이 identifier를 사용해 값을 할당하면 window 객체의 프로퍼티에 해당 identifier를 포함해 전역 객체처럼 사용할 수 있다. 하지만 실제 전역 변수는 아니라 hoisting이 발생하지 않고 delete로 객체에서 삭제가 가능하다. 끝 😊 Closure 전역 스코프, 지역 스코프 함수 스코프, 블록 스코프 렉시컬 스코프 …

zustand 로 전역 상태 관리하기 특징 useState처럼 사용 가능 준비사항 store 파일 생성 후 store 만들기 + 관리할 상태 + 상태 변경 함수 만들기 컴포넌트에 바인딩해서 사용 1. store 파일 생성 후 store 만들기 + 관리할 상태 + 상태 변경 함수 만들기 2. 컴포넌트에 바인딩해서 사용 끝 😊 zustand 로 전역 상태 관리하기 특징 준비사항 1. store 파일 생성 후 store 만들기 + 관리할 상태 + 상태 변경 함수 만들기 2. 컴포넌트에 바인딩해서 사용

Closure func1 함수 안에 func2 함수가 정의되어 있을때 func2 (inner) 함수에서 func1 (outer) 함수의 scope에 접근할 수 있다는 것을 의미한다 위와 같은 함수가 있을때 func에서는 func1에 있는 name에 접근이 가능하다. Garbage Collector에서 사용되고 있는 주소가 있으면 sweep을 하지 않기 때문에 가능하다. Closure는 언제 사용되는가? 1. 상태 유지 클로저를 사용하면 요렇게 isShow 의 상태가 유지된다. React의 useState훅이 클로저를 응용한 내용인듯하다 2. 정보 은닉 이렇게 하면 외부에서는 count의 값을 직접 접근해 변경할 수 없기에 count는 private 변수의 느낌으로 사용이 가능하다 3. 커링 재사용 때문에 사용 되는 커링이라는 개념에서 사용된다 끝 😊 Closure Closure는 언제 사용되는가? 1. 상태 유지 2. 정보 은닉 3. 커링

MVC Model 실제 데이터와 관련된 로직을 처리한다 결과를 Controller로 보낸다 View Model에서 처리된 결과를 Controller로 부터 받아 보여준다 Controller Model에 어떤 처리를 해야되는지 알려준다 Model에서 처리된 결과를 View로 보낸다 예 일반적: View에서 이벤트가 발생하고 -> Controller에서 이벤트에 해당하는 메소드를 등록하고 -> Model에서 해당 메소드를 수행 후 결과를 Controller로 전달하고 Controller가 해당 결과를 View로 보낸다 pure MVC 패턴은 위에서처럼 단방향이지만 애플리케이션이 커지면서 model이 view에게 view가 model에게 영향을 줄 수 있는 양방향 패턴으로 변모할 수 있다고 한다 Flux MVC가 가지는 Model과 View가 서로에게 데이터를 전달할 수 있는 양방향 데이터 바인딩 문제를 해결하기 위해 만든 패턴 양방향 데이터 바인딩 문제는 Model이 View에 Vie…

zustand 로 전역 상태 관리하기 특징 useState처럼 사용 가능 준비사항 store 파일 생성 후 store 만들기 + 관리할 상태 + 상태 변경 함수 만들기 컴포넌트에 바인딩해서 사용 1. store 파일 생성 후 store 만들기 + 관리할 상태 + 상태 변경 함수 만들기 2. 컴포넌트에 바인딩해서 사용 zustand 로 전역 상태 관리하기 특징 준비사항 1. store 파일 생성 후 store 만들기 + 관리할 상태 + 상태 변경 함수 만들기 2. 컴포넌트에 바인딩해서 사용

redux toolkit으로 알아보는 redux 기본 개념 전역 변수 비슷한 느낌 redux가 해결하는 문제 props drilling을 통한 불필요한 rerendering과 상태 파악이 힘들다는 문제를 해결하기 위해 만들어짐 구성 요소 저장소 (store) = 여러 state가 객체로 저장되어 있는 느낌 액션 (action) = 저장소의 값을 어떻게 변경할지 정함 리듀서 (reducer) = 액션에 따라 store에 저장된 내용을 변경 (setState 느낌) 프로세스 요약 dispatch 훅을 통해 action을 redux store에 보내게 되면 store에서 받은 action에 알맞는 reducer를 실행해 저장된 내용을 조작한다 리듀서 작성 시 주의 사항 리듀서는 순수함수로 작성 해야함, 즉 외부 내용을 변경하면 안됨 = side effect가 없어야함 따라서 http 요청이나 web storage 접근 등도 불가능함 redux toolkit으로 redux 맛보기 준비사…

리스트와 key 반복되는 컴포넌트가 있다면 map 함수를 사용해 렌더링하는 것이 효율적 key 연속적으로 setState를 호출하면 batch로 묶어서 처리가됨 반복된 컴포넌트가 있을때 key는 어떤 컴포넌트에서 값이 바뀌었는지 파악하는데 도움이됨 key로 고유한 문자열을 사용하는 것이 좋음 -> 그렇지 않으면 해당 리스트의 내용이 변경 됐을때 꼬여서 이상한 위치의 내용이 변경 될 수 있음 따라서 항목의 순서가 바뀔 수 있는 경우 key에 인덱스 값을사용하면 오히려 성능 저하가 발생하거나 state 관련 문제가 발생할 수 있음 key는 형제 관계에서만 고유하면된다 key는 props로 전달되지 않음 함수 컴포넌트에서 이벤트 처리 camelCase 사용 false를 반환하는 것으로 기본 동작 방지 불가, preventDefault 필요 합성 이벤트란? addEventListener 필요없고 컴포넌트에 onClick 이렇게 한 후 콜백함수 등록하면됨 event bubbling 되는 …

요약 상태 변경을 실시간으로 알릴 수 있는 패턴 Observer 패턴이란 subject (관찰 대상), observer (관찰자)가 존재 관찰대상의 상태가 변경 된 경우 관찰자의 메소드를 호출 함으로써 상태 변경을 알려주는 패턴 로직 observer가 subject에 observer 리스트에 상태 변경 시 실행될 메소드를 등록한다 (observer 자체를 등록한 후 notify 시 해당 observer의 특정한 함수를 실행해도 된다) subject에서 상태가 변경된 후 observer 리스트에 등록된 모든 observer의 메소드를 호출해 상태 변경을 알린다 예시 끝 옵저버 패턴을 응용한 패턴으로 pub/sub 패턴이 있는데 이 부분은 나중에 알아봐야겠다 😊 요약 Observer 패턴이란 로직 예시

요약 css 클래스 이름 짓는 방법론 특징 css 명시도 (specificiy)를 높여서 요소에 적용되는 스타일이 충돌하지 않도록 하는 css 아이디와 클래스를 naming하는 방법론이다 기본적으로 아이디는 사용하지 않고 클래스만 사용함 OOCSS, Atomic 등 다른 naming 방법론도 있는데 BEM이 그나마 복잡하지 않음 클래스를 Block(독립 적인 요소), Element(block을 구성하는 단위), Modifier로 구분함 일반적으로 적는 클래스 이름은 block element인 경우 block__element modifier인 경우 block__element—modifier 예. .header => block .header__navigation => element .header__navigation—navi-text => modifier 장,단점 장점: 모듈화 (클래스에 적용되는 css가 서로에게 영향을 주지 않음): block style이 다른 element 스타일…

리액트에 대한 이해 리액트 라이브러리는 왜 사용하는 걸까? 라이브러리 선택에는 여러 가지 기준이 존재한다 현재 문제에 가장 적합한 기준을 선택해야한다 예를들어 공통적인 기준으로는 많은 사용자 수 => 대형 커뮤니티 => 낮은 버그 발생률 => 높은 새로운 기능 업데이트 수 가 있다 다른 이유로는 성능 / 속도 / 가독성 등을 이유로 들 수 있다 JSX (Javascript XML) Javascript에 XML을 추가한 확장한 문법이다   JSX는 공식적인 자바스크립트 문법이 아니라 바벨을 사용하여 일반 자바스크립트 형태의 코드로 transpiling 해주어야 한다 html 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙 사용 태그 content가 비어 있으면 /> 닫는 태그를 사용해야함 조건부 렌더링 return 문 내에서 if else 문을 사용하려면 삼항 연산자만 가능함 ({condition} ? {result1} : {result2}) if문 은 && 논리 연산자로…

시작 읽기 전에 알면 좋은 내용: event delegation = 이벤트를 처리하는 패턴 요약 bubbling을 이용한 개념 capturing_bubbling Event delegation 보통 공통으로 처리 될 수 있는 이벤트를 묶어서 처리할때 사용됨, e.g. 이벤트 bubbling 개념을 사용해 각각 child element에 eventlistener를 등록하지 않고 부모 element에만 eventlistener를 등록해 id나 class 등으로 child element를 구분하는 방법이 있음 event delegation을 응용하면 document 객체 (DOM 트리 최상위 노드)에 eventlistener를 등록하고 data property로 element를 구분해 element의 behaviour를 선언적으로 처리 하는 behaviour pattern도 사용 가능함 끝 😊 요약 Event delegation

시작 infinite scroll 임시로 json 데이터를 가져와야되는 경우 https://jsonplaceholder.typicode.com/posts 사이트 사용하면 유용함 스크롤 맨위 위치 + 클라이언트에게 보여지는 높이가 스크롤을 내린 값보다 커지는 경우 새로운 데이터를 불러오면됨 pagination 페이지네이션 이론 총 페이지 개수 계산 (totalCount / limit) 현재 페이지의 그룹 계산 (currentPage / pageCount) 현재 페이지 그룹의 첫번째/마지막 숫자 구하기 (마지막 숫자 = pageGroup * pagecount, 첫번째 숫자 = 마지막 숫자 (pagecount - 1) 현재 페이지 이전 숫자 계산 (첫번째 숫자 - 1) 현재 페이지 다음 숫자 계산 (마지막 숫자 + 1) 첫번째 숫자가 0이 아닌 경우 prev 버튼이 보이고, 마지막 숫자가 총 페이지 개수 보다 작은 경우 next 버튼이 보이도록 button 요소를 추가하면 된다. 그리고…

시작 읽기 전에 알면 좋은 내용: event.preventDefault는 브라우저가 해당 이벤트에서 행하는 기본 동작을 차단하는 함수이다 event.stopPropagation으로 이벤트가 더이상 이동되지 않게 차단 할 수 있다 event.stopImmediatePropation으로 이벤트가 동일한 depth 의 다른 callback handler도 실행하지 않게 차단할 수 있다 요약 Capturing, Bubbling은 이벤트가 이동하는 방향과 관련된 것임 Capturing = 부모에서 자식 요소로 이벤트가 이동 Bubbling = 자식에서 부모 요소로 이벤트가 이동 capturing_bubbling Capturing html을 트리 구조로 봤을때 capturing은 depth 0 -> depth n 으로 이벤트가 이동 되는 방식 Bubbling bubbling은 depth n -> depth 0 으로 이벤트가 이동 되는 방식 팁 addEventlistener(event, cal…

시작 Text Editor 기본 로직 텍스트에 style을 바꿀 수 있는 버튼들을 생성하고 각 버튼을 클릭시 이벤트를 발생 + execCommand라는 문서 편집 관련 함수를 사용해 텍스트 에디터를 구현 (현재는 deprecated된 함수) toggle .classList.toggle을 통해 class를 넣었다 뺏다 할 수 있음 preventDefault preventDefault 함수를 사용해 html 요소에 기본적으로 동작하는 동작을 취소 시킬 수 있다 innerText, innerHTML, textContent innerText는 html 요소에서 마크업이 적용된 텍스트 내용을 가져 오고, innerHTML은 html 요소에서 텍스트 + html 태그 까지 같이 가져온다, textContent는 마크업이 적용되지 않은 텍스트 내용을 가져와 성능적으로 innerText보다 좋다고 한다 Todo List 기본 로직 DOM 트리가 로딩이 완료 된 후 Todo 리스트를…

시작 읽기 전에 알면 좋은 내용: 블록 요소들은 위에서 아래로 배치되고 inline은 왼쪽에서 오른쪽으로 배치된다. 이러한 동작을 normal flow라고 한다 block_inline block formatting context 에서는 자식 요소들이 normal flow 형식으로 배치된다 html 태그는 가장 처음으로 생성되는 block formatting context이다 요약 block formatting context는 layout에 영향을 주는 성질을 가지고 있지만 보통 float 요소의 위치를 잡을때나 margin collapsing을 방지할때 사용한다고 한다 Contain internal floats 자식 요소 중 float 요소가 있을때 해당 요소를 다른 자식 요소의 height와 동일하게 맞출때 (float 자식 요소가 있을때 동일한 block formatting context에 자식 요소들을 넣을때) bfc1; Exclude external floats 형제 요소 …

시작 기본 로직 canvas를 사용해 brick, ball, paddle을 도형으로 그려준다 requestAnimationFrame 함수를 사용해 update와 draw함수를 무한하게 반복적으로 실행하도록 한다 BrickBreak 클래스의 인스턴스를 생성해 init 함수로 게임을 실행한다 requestAnimationFrame 장점: tab이 비활성화 되면 중지, 60프레임으로 동작, 브라우저가 프레임 생성 시간에 맞춰서 애니메이션 코드를 실행 시켜 애니메이션이 부드럽게 동작함 접근성과 관련해 100% 커버리지가 아니라 polyfill 사용하는 것을 추천 (https://gist.github.com/paulirish/1579671) canvas beginPath = 선을 그릴때 시작하는 함수 closePath = 선을 그릴때닫아서 시작점과 잇는 함수 추가한 내용 fontFamily의 크기를 일일히 입력 해주어야하고 canvas에서 한번에 바꾸는 것이 안되어 font의 값들을 배열로…

시작 읽기 전에 알면 좋은 내용: immutability는 함수형 프로그래밍의 핵심 개념중 하나로 pure function이 가지고 있는 특징 중 하나이다 side effect란 local environment 가 아닌 다른 environment의 vaiable의 상태(값)를 변경 하는 것을 말한다. 예를 들어 change라는 함수가 global variable a의 값을 변경한다면 side effect가 발생한 것이다 immutability개념을 사용하면 side effect를 방지할 수 있다 요약 immutability란 객체가 생성된 이 후 해당 객체의 상태를 변경할 수 없다는 것을 의미한다. 조금 더 구체적으로 말하자면 메모리의 특정한 주소에 할당된 객체 값이 변경되면 안된다는 것이다 간단하게 말하면 immutable은 메모리 주소에 저장된 내용을 변경할 수 없고 mutable은 메모리 주소에 저장된 내용을 변경할 수 있다는 개념이다 immutable value immuta…

시작 정리 박스 모델 기준으로 자바스크립트에서 얻어올 수 있는 값 해당 박스의 border 바깥 쪽은 offsetTop, offsetLeft border 사이는 clientTop, clientLeft 안에 content는 clientWidth, clientHeight border와 content를 합한 것은 offsetWidth, offsetHeight 보여지는 박스가 아닌 content의 전체 길이는 scrollHeight 현재 스크롤바의 위치는 scrollTop values throttle & debounce 이벤트나 요청의 처리 횟수를 컨트롤할때 사용 되는 개념이다 요 사이트에서 마우스 이동 이벤트를 사용한 throttle, debounce 타임 라인을 보면 이해하는데 약간 도움이 되는 것 같다 debounce 들어온 동일한 요청을 하나로 모은 후 마지막 요청만 특정 시간이 지나고나면 실행한다. 여러 요청이 발생 하는데 요청이 다 끝나고 난 후 특정 시간이 지나고 처리할때 사…

문제 링크 https://leetcode.com/problems/flatten-binary-tree-to-linked-list/ 조건 트리가 가지고 있는 노드의 갯수 [0, 2000]. -100 <= Node.val <= 100 입력값 root = Binary Tree의 루트 출력값 없음 = 기존 트리 내용만 pre-order traversal 순서대로 + right child만 가지도록 (flatten) 변환 풀이과정 leaf node 까지 traverse 한 후 left는 없애고 right 에는 이전 node를 넣어주고 prev에는 현재 node를 넣어주면서 밑에서부터 위로 traverse 진행 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

문제 링크 https://leetcode.com/problems/populating-next-right-pointers-in-each-node/ 조건 트리가 가지고 있는 node 갯수 [0, 2^12 - 1]. -1000 <= Node.val <= 1000 입력값 root = perfect Binary Tree의 루트 node의 구조 next pointe는 모두 NULL로 초기화 되어 있음 출력값 root = perfect Binary Tree의 루트 풀이과정 tree를 traverse 하면서 root가 null이거나 root.left 요소가 없는 경우 return root 에서 오른쪽에 node가 있으면 root.left.next에 해당 node를 넣어준다 현재 root 에 next가 있으면 root.right.next에 next의 왼쪽에 있는 node를 넣어주고 next가 없으면 null을 넣어준다 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

시작 읽기 전에 알면 좋은 내용: 클라이언트 서버 모델이란? 클라이언트 서버 모델은 서버가 데이터를 가지고 있고 클라이언트에서 데이터를 요청하면 서버에서 데이터를 넘겨 주는 방식의 모델이다 실제로는 통신할때 클라이언트와 서버 사이에 라우터, 모델과 같은 여러 컴퓨터들이 있지만 요런 것들은 network, transport layer에서 처리되고 HTTP는 application layer protocol이기 때문에 서버, 클라이언트 사이의 request와 response에 대해서만 알면된다 server-client 프로토콜이란? 프로토콜은 두 컴퓨터가 소통할떄 어떻게 소통할지 정해놓은 규칙이다. 예를들어 데이터를 어떤 형식으로 보낼 것인지 어떤 순서대로 보낼 것인지 등 요약 서버/클라이언트 모델 기반 프로토콜 connectionless & stateless request, response 구조 http request 상태 코드 http 특징 서버/클라이언트 모델 기반 프로토콜 어떤 …

시작 읽기 전에 알면 좋은 내용: 프로세스는 메모리에 올라가 실행되는 상태에 있는 프로그램이다 blocking/non-blocking은 호출되는 프로세스가 제어권을 호출하자마자 돌려주는지 아니면 할일을 처리하고 돌려주는지에 대한 것이다 요약 javvascript engine는 single threaded이고 javascript runtime은 multi threaded라 non blocking이 가능하다 자바스크립트는 싱글 스레드, non-blocking 언어이다 위 문장의 정확한 뜻은 자바스크립트 엔진이 싱글 스레드, 자바스크립트 런타임이 non-blocking 이기 때문에 자바스크립트는 싱글 스레드 + non-blocking 두 가지 특징을 모두 갖는다는 의미이다 자바스크립트 엔진 자바스크립트 엔진은 1개의 call stack을 가지고 있기 때문에 한번에 하나의 작업만 처리 가능하다 (=싱글 스레드) 자바스크립트 런타임 자바스크립트 런타임은 실제로 자바스크립트가 실행되는 환경…

문제 링크 https://leetcode.com/problems/same-tree/ 조건 각 트리의 노드 갯수 [0, 100]. -10^4 <= Node.val <= 10^4 입력값 roots of two binary trees p and q 출력값 두 트리가 동일한 트리인가? (참/거짓) 풀이과정 JSON.stringify로 자바스크립트 객체를 문자열로 변환 후 비교 (shallow 비교만 가능함) 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

문제 링크 https://leetcode.com/problems/path-sum-ii/ 조건 트리가 가지고 있는 노드의 갯수 [0, 5000]. -1000 <= Node.val <= 1000 -1000 <= targetSum <= 1000 입력값 root = Binary Tree의 루트 targetSum = 각 노드의 값을 합쳤을때 나와야 하는 값 출력값 2차원 배열 = root 에서 leaf 노드 까지의 path 풀이과정 tree를 preorder로 traverse하면서 현재 노드의 값을 배열에 넣고 sum 에 현재 노드의 값을 더한다 sum이 targetSum과 같고 leaf 노드인 경우 result에 결과 넣기 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

문제 링크 https://leetcode.com/problems/binary-tree-inorder-traversal/ 조건 노드의 갯수 [0, 100]. -100 <= Node.val <= 100 입력값 root = Binary Tree의 루트 출력값 inorder traversal 한 값들의 배열 풀이과정 왼쪽 -> 중간 -> 오른쪽 순서로 트리를 돌면됨 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

문제 링크 https://leetcode.com/problems/recover-binary-search-tree/ 조건 노드의 갯수 [2, 1000]. -2^31 <= Node.val <= 2^31 - 1 정확히 두 개의 노드의 값이 바뀌어진 상태 입력값 root = 바이너리 서치 트리 root 출력값 없음 (in place로 바이너리 서치 트리 값만 수정) 풀이과정 inorder traverse를 진행하면서 잘못된 위치의 노드를 first, second에 저장 traverse를 완료 후 first, second의 값을 swap 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

시작 읽기 전에 알면 좋은 내용: blocking/non-blocking, synchronous/asynchronous 은 운영체제와 관련된 개념이다 blocking/non-blocking은 I/O와 엮어서 보면 조금 더 이해가 잘되는 듯 하다 synchronous/asynchronous는 I/O와 엮어서 보면 조금 더 헷갈리는 듯 하다. I/O에서는 synchronous + blocking, asynchronous + non-blocking 방식으로 구현되어 있기 때문에 synchronous = blocking, asynchronous = non-blocking으로 생각되어 헷갈리는 것 같다 프로세스는 메모리에 올라가 실행되는 상태에 있는 프로그램이다 프로세스는 싱글 or 멀티 스레드를 가질 수 있다 스레드는 프로세스의 상태 및 스택에 대한 정보를 공유하지 않고 그 외의 메모리에 저장된 프로세스의 정보를 공유한다 프로세스는 스레드에서 작업을 처리한다. 따라서 싱글 스레드인 경우에…

문제 링크 https://leetcode.com/problems/validate-binary-search-tree/ 조건 노드의 갯수 [1, 10^4]. -2^31 <= Node.val <= 2^31 - 1 valid BST 조건 -> 노드의 왼쪽 subtree는 node val 보다 작은 값 -> 노드의 오른쪽 subtree는 node val 보다 큰 값 -> 노드의 왼쪽, 오른쪽 subtree도 바이너리 서치 트리여야함 입력값 root = 바이너리 서치 트리의 루트 출력값 bool = 바이너리 서치 트리인지 참/거짓 값 풀이과정 현재 노드의 값이 min(이전 값 or 왼쪽 subtree의 최대값)과 max (이전 값 or 오른쪽 subtree의 최소값) 사이의 값이 아닌 경우 바이너리 서치 트리가 아님 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

문제 링크 https://leetcode.com/problems/diameter-of-binary-tree/ 조건 The number of nodes in the tree is in the range [1, 10^4]. -100 <= Node.val <= 100 입력값 root = binary tree의 루트 노드 출력값 트리의 diameter = 두 node 사이의 가장 긴 거리 풀이과정 depth 값이 가장 큰 왼쪽, 오른쪽 child의 거리가 가장 큰 것이 diameter이다 dfs 방식으로 왼쪽, 오른쪽 child를 traverse 하면서 가장 큰 depth 값을 가진 왼쪽, 오른쪽 child를 찾는다 가장 큰 depth 값을 가진 왼쪽, 오른쪽 child의 depth를 합한 값이 현재 계산한 diameter 값보다 크다면 diameter 값을 업데이트 한다 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

문제 링크 https://leetcode.com/problems/move-zeroes/ 조건 1 <= nums.length <= 10^4 -2^31 <= nums[i] <= 2^31 - 1 입력값 nums = 그냥 배열 출력값 없음, nums 배열 요소의 위치들만 바꾸면됨 풀이과정 배열을 돌면서 0인 경우 해당 idx의 값을 삭제 후 배열의 맨 뒤에 0 을 넣어준다 delete로 삭제 하면 삭제된 idx의 값이 undefined로 바뀌기 때문에 배열을 돌면서 undefined인 경우 배열 요소를 삭제 해주었다 참고: 처음에 삭제할때 splice로 삭제한 후 나중에 삭제한 0의 갯수만큼 배열에 0을 추가해주는 방법도 있다 참고: 처음에 삭제할때 splice로 삭제하면서 동시에 0을 추가해 한개의 루프로 해결하려고 해봤는데 index값이 줄어 들기 때문에 삭제 후 index를 1 줄여주고 나니 무한루프에 빠졌었다 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

문제 링크 https://leetcode.com/problems/generate-parentheses/ 조건 1 <= n <= 8 입력값 n = 괄호의 pair 갯수 출력값 괄호짝이 맞는 combination을 배열에 넣어 출력 풀이과정 backtracking을 사용해 combination을 만든다 combination의 길이가 2*n인 경우 pair가 꽉 차있기 때문에 result에 결과를 넣어준다 왼쪽 괄호가 아직 n 개 만큼 없는 경우 왼쪽 괄호를 넣어준다 오른쪽 괄호가 아직 왼쪽 괄호의 갯수만큼 없다면 오른쪽 괄호를 넣어준다 이렇게 하면 괄호짝이 맞는 well-formed combination을 완성할 수 있다 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

시작 읽기 전에 알면 좋은 내용: 브라우저나 node.js는 자바스크립트 엔진을 가지고 있어 자바스크립트가 실행될 수 있는 환경 (=environment)을 제공한다 해당 과정은 Chrome의 V8 엔진 기준으로 작성되었다 엔진 마다 해석 과정에서 약간의 차이가 있을 수도 있다 요약 자바스크립트 코드 -> parsing -> AST (자바스크립트 코드를 트리 구조로 변환한 형태) -> interpretation -> 바이트 코드 (AST를 코드형태로 다시 변환함) -> compilation -> 머신 코드 실행 1. Step: parsing parser는 자바스크립트 코드를 한줄씩 읽으며 두가지 작업을 진행한다 첫번째로 lexical 분석을 통해 자바스크립트 코드를 keyword나 단어로 구분해 의미있는 단어형태(=토큰)으로 구분한다 두번째로 sematic 분석을 통해 나열된 토큰들이 문법적으로 문제가 없는지 확인한다 결과물로 아래와 같이 AST(=abstract syntax tr…

문제 링크 https://leetcode.com/problems/first-bad-version/ 조건 1 <= bad <= n <= 2^31 - 1 bad version 이 후 version 들은 모두 bad version임 입력값 isBadVersion = 해당 숫자가 BadVersion인지 확인하는 함수 (true/false return함) - leetcode에서 제공되는 API n = 버전의 갯수 [1,…,n] 로 사용된다고 생각하면됨 출력값 버전 중에서 가장 작은 수를 가진 bad version 값 풀이과정 일반 루프를 사용해봤는데 time limit exceeded 에러 발생 (n의 값이 20억이 넘기 떼문) binary search를 사용해 20억번 확인할 것을 9번으로 줄임 현재 위치의 값이 bad version인 경우 이 후 version 들은 모두 bad version 이기 때문에 찾는 범위를 왼쪽으로 이동 현재 위치의 값이 bad version이 아닌 경우 이 …

시작 해당 코드의 차이들에 대해 살펴보기 전에 알아야할 내용: 컴퓨터는 1 bit(=binary digit), 즉 2진수 (0,1) 밖에 이해하지 못한다 이때 0은 전기 신호가 없음, 1은 전기 신호가 있음을 의미한다 0과 1은 컴퓨터가 이해하는 알파벳이라고 보면 된다 컴퓨터는 0과 1을 사용해 정보를 저장할 뿐이다. 저장된 정보를 정해둔 약속에 맞게 해석한 것이 언어가 되는 것이다 1. 바이너리 코드와 머신 코드 바이너리 코드나 머신 코드나 0과 1로 나열되어 표현된 정보이다. (예: 00011000 11011111) 차이는 머신 코드는 머신이 이해할 수 있는 언어이고 바이너리 코드는 그냥 일반적인 정보이다. 2. 바이너리 코드 = 머신 코드? 관점에 따라 바이너리 코드 = 머신 코드가 성립할 수 있지만 약간의 차이가 있다. 컴퓨터에 저장되어 있는 모든 정보는 바이너리 코드이다. 바이너리 코드를 특정한 문법에 따라 해석해 컴퓨터를 조작할 수 있는 것이 머신 코드이다. 컴퓨터는 b…

문제 링크 https://leetcode.com/problems/rotate-array/ 조건 1 <= nums.length <= 10^5 -2^31 <= nums[i] <= 2^31 - 1 0 <= k <= 10^5 입력값 nums = 그냥 배열 k = 회전할 횟 수 출력값 없음, nums 배열 요소의 위치들만 바꾸면됨 풀이과정 처음에 nums.length <= 10^5 조건을 보지 않고 2중 루프로 구현해 time limit exceeded 에러가 발생했다 (다음부터는 조건 부분을 먼저 확인하자) 시간을 줄이기 위해 nums 배열을 복사한 후 해당 배열의 요소 값을 가져오는 방법을 사용했다 k를 nums의 길이와 나눈 나머지 값을 사용해 k가 nums.length보다 클때 제자리로 rotate 되는 부분을 제거한다 배열 뒷 요소부터 바꾸는 전략을 취했는데 어차피 복사한 배열에서 값을 가져오는 거라 순서는 상관 없었을듯 하다 아무튼 뒷 요소부터 i-k로 rotate 후 위치될 값…

문제 링크 https://leetcode.com/problems/search-insert-position/ 조건 1 <= nums.length <= 10^4 -10^4 <= nums[i] <= 10^4 nums는 오름차순으로 정렬되어 있음 -10^4 <= target <= 10^4 O(log n) 알고리즘 작성 입력값 nums = 오름차 순으로 정렬된 배열 target = 찾는 값 출력값 찾는 값이 있으면 해당 값의 index, 없으면 target이 오름차순으로 정렬했을때 들어가야할 index 위치 값 풀이과정 Binary search를 사용해 target의 index를 찾음 target이 있으면 index return 없는 경우 for 문을 돌면서 target이 들어갈만한 위치를 찾는다 코드 😊 문제 링크 조건 입력값 출력값 풀이과정 코드

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/92343 조건 루트 노드에는 항상 양이 있음 (answer 최소값 1) 늑대의 수가 양의 수보다 같거나 크면 모든 양을 잡아먹음 입력값 info = 각 노드에 양 (0) 이 있는지 늑대 (1) 가 있는지에 대한 정보 (배열) edges = 각 노드들의 연결 관계를 저장하고 있음 (2차원 배열) ([0,1] = 1은 0의 child 노드) 출력값 모을 수 있는 최대 양의 개수 풀이과정 DFS를 사용해 모든 경우의 수를 확인 한다 주어진 노드들의 연결 관계를 2차원 배열을 사용해 그래프 형태로 저장한다 각 노드들을 traverse 하면서 양의 수와 늑대의 수를 더한다 늑대의 수가 양의 수보다 같거나 크면 return 늑대의 수가 양의 수보다 작으면 최대 양의 수를 업데이트 한 후 현재 노드의 child 들을 다음에 확인할 노드 배열에 push 하고 현재 노드를 해당 배열에서 삭제한다…

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/92342 조건 k점 과녁에 한발이라도 더 많은 화살을 맞힌 선수가 k점을 가져감 k점 과녁에 아무도 화살을 맞히지 못하면 어느 누구도 k점을 가져가지 않음 입력값 info = 어피치가 맞힌 과녁 점수의 개수 (index 0 = 10점, … , index 10 = 0점) (배열) n = 라이언이 쏠 수 있는 화살의 개수 출력값 어떤 과녁 점수에 n 발의 화살을 맞춰야 하는지 10점부터 0점 까지 순서대로 배열에 담아 출력 (index 0 = 10점, … , index 10 = 0점) 모든 경우의 수를 확인 한 후에도 라이언과 어피치의 점수차가 같거나 어피치가 높은 경우 [-1] return 라이언이 가장 큰 점수 차이로 우승할 수 있는 방법이 여러 가지일 경우, 가장 낮은 점수를 더 많이 맞힌 경우를 return 풀이과정 낮은 점수를 더 맞힌 경우를 찾아야 하기 때문에 index …

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/92341 조건 차량에 입차 내역만 있고 출차 내역이 없으면 23:59에 출차된 것 누적 주차 시간이 기본 시간 이하인 경우 -> 기본 요금 누적 주차 시간이 기본 시간을 초과한 경우 -> (기본요금 + 올림(누적시간 - 기본시간) / 단위시간) x 단위 요금) 입력값 fees = 주차 요금 항목 (배열) records = 자동차 입/출력 내역 (배열) 출력값 자동차 청구 주차 요금 (배열) 차량 번호가 작은 자동차 순서대로 담아야됨 풀이과정 Hashmap을 사용해 각 자동차에 대해 입차시간, 총 주차 시간을 저장 출차 내역이 없는 자동차들의 총 주차 시간을 계산하기 위해 입차, 출차를 동기화 하는 배열 사용 IN인 경우 입차시간을 업데이트 OUT인 경우 출차시간 - 입차시간을 계산해 총 주차 시간을 업데이트 출차 내역이 없는 자동차들의 총 주차 시간을 업데이트 모든 자동차의 총 …

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/92334 조건 한번에 한 유저를 신고 가능 → A유저가 B,C 유저를 동시에 신고할 수 없음 (신고한 내용은 ‘userA userB’ 형태를 가짐) 동일한 유저 신고 횟수는 1회로 처리 → A유저가 B유저를 두번 이상 신고해도 1번 신고한걸로 처리됨 신고 횟수 제한 없음 k번 이상 신고된 유저는 정지 → k가 2이고 A유저가 C유저를 신고했고 B유저도 C유저를 신고하면 C유저는 정지됨 신고된 모든 내용을 취합 후 신고한 유저들에게 정지 사실 이메일 보내짐 자기 자신을 신고할 수 없음 입력값 id_list = 모든 유저 아이디 목록 (배열) report = 유저가 신고한 내용 목록 (배열) 출력값 각 유저가 받은 정지 사실 이메일 갯수 목록 (배열) id_list에 담긴 id 순서대로 담아야됨 풀이과정 key, value 형태로 데이터를 저장하는 HashMap 사용 key에는 유저…

👋 글쓰기 원칙 이 원칙들을 최대한 지키려고 해보자 기록해야할 & 기록하고 싶은 내용만 기록한다 포스팅 수를 채우기 위한 글은 작성하지 않는다 너무 긴글 (3-5분 이상 읽어야 하는글)은 여러개로 나눠서 올린다 feynman 방법을 사용해 주제를 정한 후 어린아이에게 설명하듯이 적는다 쉬운 언어로 설명하지 못하는 단어는 사용을 자제한다 어떤 내용을 포함하고 포함하지 않는지에 대한 정보를 글 초반에 적는다 😊 👋 글쓰기 원칙