선형 탐색은 n개의 배열에서 하나씩 조회하여 조건과 맞는지 확인하는 것이다.선형탐색은 순서가 무작위인 정렬되지 않은 데이터일 경우 최적의 탐색 조건이다.시간복잡도는 O(n)이다.배열에 해당 아이디가 존재하는지 판별하기 \-> 입력: 배열, 아이디 \-> 출력: 존재하면
얕은 복사는 바로 아래 단계의 값만 복사하는 방법이다.깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이다.얕은 복사의 단점이다. 바로 아래단계의 값만 복사하여 한 단계 더 들어간 urls의 내부 프로퍼티들은 기존 데이터를 그대로 참조하고있다.기본형일
레이아웃 스레싱은 웹 페이지에서 발생할 수 있는 문제 중 하나로 브라우저 엔진이 레이아웃 계산을 반복적으로 수행하면서 발생한다.레이아웃은 웹 페이지의 요소들의 위치와 크기를 결정하는 과정이다. 브우저는 웹 페이지의 요소들에 CSS 스타일을 적용하고, 각 요소의 위치와
강제 동기 레이아웃(Force Synchronous Layour, FSL) 은 웹 브라우저에서 레이아웃 계산을 강제로 동기적으로 처리하는 것을 말한다. 레이아웃 계산은 웹 페이지의 요소들의 위치와 크기를 결정하는 과정으로, 브라우저는 일반적으로 최적화를 위해 비동기적으
렌더링 최적화를 위해 will-change, position vs transform을 알아보겠다. 알아보는 이유는 브라우저 렌더링 과정 중 리플로우, 리페인트 작업 즉, 레이아웃 계산이 빈번하게 일어날 경우 렌더링이 오래 걸려서 웹 페이지 사용에 불편을 준다. 그래서
reset vs normalize, stacking context, display
div vs span, flexbox
gird, float
이미지는 <picture> 태그를 사용하여 개발하는것을 한 번 고려해보는게 좋을 것 같다.레티나 같은 고해상도를 지원해야하는 상황이라면 이미지를 어떻게 다뤄야할까?picture 태그를 사용하게되면 환경에 따라 다르게 지원해줄 수 있다.webp 파일로 설정하게 되면
실행 컨텍스트는 코드를 실행하는 데 필요한 환경들을 제공하고 코드의 실행결과를 관리하는 영역이다.전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성한다. 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.함수코드는 지역 스코프를 생성하고 지역
최상위 가상 선택자 웹페이지에서 :root를 사용하게되면 <html> 요소가 선택된다.그룹화화여 스타일을 적용한다. 대부분 :has나 다른 규칙과 함께 사용하여 자식요소에 스타일을 적용하는 경우가 많다.:where 가상 선택자와 같은 역할을 하지만 미묘한 차이가
자바스크립트에서 this는 실행 컨텍스트가 생성될 때 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로 this는 함수를 호출 할 때 결정된다라고 할 수 있다.전역 공간에서 this는 전역 객체를 가리킵니다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이
함수A의 제어권을 다른 함수 B에게 넘겨주는 경우 함수A를 콜백함수라한다.콜백함수도 기본적으로는 this가 전역객체를 참조하지만, 제어권을 받은 함수에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조하게된다.아래 예시코드에서 비교해보자!(1)
저번에 deepCopy를 모든 컬렉션들까지 카피가 이루어지도록 만들어았다. 이 때 작성한 코드는 else if 와 중첩 if 가 있어 depth가 깊어져 가독성이 떨어지고 유지보수가 어려운 코드였다. Guard Clause 를 키워드를 제시해주셨고 적용해보고, 좀 더
Set 이란? 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다.
Map은 Object 모델에서 파생된 객체이다. 키-값 의 형태를 가지고 삽입 순서를 기억한다. 모든 값(객체 및 원시 값 모두)은 키 또는 값으로 사용될 수 있다.Map은 {} 일반 객체와 굉장히 유사한데 {} 일반객체의 자유도가 굉장히 높기때문에 사람마다 활용하는
사용법call 메서드의 첫 번째 인자는 this로 바인딩 하고, 이후 인자들은 호출할 함수의 매개변수로 들어간다.함수를 그냥 호출하면 this 는 window 전역 객체를 참조하지만 call메서드를 이용하면 임의의 객체를 this로 지정할 수 있다. apply 메서드
ES5에서 추가 된 메서드 이다. call과 비슷하지만 바로 실행하지 않고 넘겨받은 this, 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다.bind 메서드를 적용해서 새로 만든 함수는 name 프로퍼티에 bound(bind 수동태) 라는 접두어가 붙는다
긴 문자열에서 부분 문자열을 검색하는 것과 관련있다.시간복잡도 O(n^2)하나씩 비교해가며 문자열에서 키워드가 얼마나 나오는지 카운트 하는 것이다.가비지 콜렌션에 대해 알아보기 전에 자바스크립트의 메모리 관리부터 알아보겠다.C, C++ 같은 경우는 메모리 관리를 개발자
화살표 함수는 기존 함수( function ) 과 비교했을 경우 사용법이 간단하게 축소되었다.생략된만큼 기능도 제한적이여서 모든 일반함수를 대체할 수 있는것은 아니다(모든 곳에서 사용 가능 x)다른 점을 살펴보도록 하자화살표 함수는 this 자체가 없다. 따라서 화살표
콜백함수는 다른 코드의 인자로 넘겨주는 함수다. 콜백 함수를 넘겨받은 코드는 적절한 때에 따라 콜백 함수를 실행시킬 것이다. 콜백 함수에서 중요한 점은 제어권에 있다. 어떤 함수 X 를 호출하면서 ‘특정 조건일 때 함수 Y 를 실행해라’ 즉 호출 주체가 나 자신이
클로저는 자바스크립트 고유개념이 아닌 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이다.클로저는 어떤 함수 A 에서 선언한 변수 a 를 참조하는 내부 함수 B 를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 a변수가 사라지지 않는 현상을 말한다.A
저번시간에 이어 클로저에 대해 알아봤는데 어디서 이걸 쓰지? 왜 쓰지? 싶었다. 클로저의 활용 사례를 보고 자바스크립트에는 없는 private , public 를 구별해서 사용할 수 있게끔 역할을 해줄 수 있다는 것을 알게됐다.콜백 함수 내부에서 외부 데이터를 사용하고
커링 함수란 여러개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출 될 수 있게 체인 형태로 구성한 것이다.중간 과정상의 함수를 실행관 결과는 그 다음 인자를 받기 위해 대기만 할 뿐, 마지막 인자가 전달되기 전까지 원본 함수가 실행되지 않는다.
Symbol 이란? symbol 원시값을 반환하는 내장 객체이며 고유함이 보장된다. 심볼은 클로저가 없다 ㅇㅇ 심볼은 객체에 속성을 추가할 때 고유한 키를 부여하여 다른 키와 충돌하지 않도록 할 때 사용되며, 일반적인 방법으로 접근할 수 없어서 약한 형태의 캡슐화,
TypeScript의 목표는 JavaScript 프로그램의 정적 타입 검사자다. 즉, 코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확인하는 도구(타입 검사)이다.any 타입을 최대한 지양하고 정확한 타입의 지정으로 타입 검사에 대한 실수를 줄이는 것
타입스크립트 부분을 지웠을 때 올바르게 동작하는 자바스크립트 코드여야 한다.JS 변환 시 사라지는 부분은 타입스크립트 코드이다.타입 자리를 잘 기억해두자!빈 배열을 선언할 때 타입 지정을 꼭 해주어야한다. 안그러면 never 타입이 자동으로 추론되는데 never 타입이
디바운싱 일정 시간내에 여러번 호출 된 함수들 중 마지막 함수만 호출하도록 하는 것 주로 ajax 검색에 사용됩니다. 예제 코드 500ms 마다 setTimeout 이 실행되어 id가 timer에 할당되는데 500ms 이내에 이벤트가 발생되면 전에 담겼던 tim
Proxy 객체를 사용하면 원래 Object 대신 사용할 수 있는 객체를 만들고, 이 객체의 속성 가져오기, 설정 및 정의 등 기본 객체 작업을 재정의 할 수 있습니다. proxy객체를 생성하게되면 원본객체를 얕은복사하는 것 같다. 맡긴하지만 주의할 점은 프록시는 여전
Proxy 처럼 자바스크립트의 명령을 가로챌 수 있는 메서드를 제공하는 내장 객체입니다.Reflect 는 함수가 아닌 일반 객체이다!!기본 객체 내장 메서드명을 객체 속성명으로 사용할 경우 버그를 방어하기위해 오류를 냅니다. Object.prototype의 메서드를 인
Promise 객체는 비동기 작업의 완료 또는 실패와 그 결과 값을 나타내는 객체입니다. 기본적으로 promise는 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체입니다.콜백 지옥에서 벗어날 수 있다.가독성이 좋다.대기(pending): 이행하지도, 거부하
enum 은 위에서부터 순서대로 0, 1, 2, .. 값이 배정된다. 임의로 설정할 수도 있고 특정 값만 설정할 수 있다.여러 변수들을 하나의 그룹으로 묶고싶을 때 사용한다.이렇게 타입으로 enum 을 사용할 수 있다. enum 말고도 객체로 해도 무방하다.keyof
전역 fetch 메서드는 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 이행하는 프로미스를 반환합니다. 네트워크 오류가 있을 때만 거부되어 then() 처리기로 반드시 response.ok 또는 Response.status 속성을 확인해야합니
타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.intersection : 교차지점페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩.스크롤 시에, 더
클래스(Class)는 “특별한 함수”이다. 함수를 함수 표현식과 함수 선언문으로 구분할 수 있듯이 클래스도 클래스 선언문과 클래스 표현식으로 표현할 수 있습니다.클래스명과 class 키워드를 사용해 선언합니다.표현식은 익명일수도 있고 기명일수도 있습니다. 이름을 가진(
클래스 내에 변수를 지역 변수를 필드라고 부릅니다. constructor(생성자) 보다 위에 정의해여하며, public - 일반 변수 선언처럼 하면 됩니다. private - 식별자 앞에 클래스는 extends 키워드로 상속을 받을 수 있습니다. subClass 에서
반환 타입에? is 가 붙으면 커스텀 타입 가드이다. 타입가드를 사용하지 않으면 타입추론을 제대로 못하는 경우가있는데 이때 사용하면 된다. promise를 예로 들어보겠다. promise는 반환값이 settled 인 프로미스를 반환해주는데 이 안에 resolve, re
implements, abstract, private, protect, public 등 을 사용할 수 있습니다.implements 는 interface를 상속받아 구현할 때 사용합니다.abstract는 interface처럼 추상화를 시킬 수 있습니다. 추상 메서드, 추
인스턴스의 \[\[prototype]] 과 생성자의 prototype은 같은 객체를 바라봅니다. 하지만 인스턴스의 내부슬롯 \[prototype] 은 접근가능한 것이 아니라 정보를 보여주기만 할 뿐입니다.우선 배열을 하나 선언했다고 가정하겠습니다. 리터럴 배열(\[1,
저번 디바운스와 스로틀링을 학습한 후 코드로 구현을 해보았습니다. 해당 코드가 한 파일에 모여있어 유지보수가 힘들고 알아보기가 힘든 관계로 모듈화를 진행해보았습니다.코드를 보고 모듈화가 왜 필요한지 알게됩니다.
객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.프로퍼티 접근법동적 타입 언어이다.자바스크립트의 변순은 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑이
lighthouse 도구는 웹페이지의 성능, SEO, 접근성 등을 검사하여 개선을 하기위한 도구이다.pc, mobile 별로 지표가 다르게 나오는데 문제가 있을 경우 어떤식으로 해결할 수 있는지를 나타내준다. 예를들어 페이로드 크기가 클 경우 줄이라고 나오는데 요청을
데이터 타입의 종류 기본형 - string, number, boolean, null, undefined, Symbol(ES6), ... 참조형 - object, array, function, date, regexp, Map, WeakMap, Set, WeakSet, .
변수란? 하나의 값을 저장하기위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 식별자란? 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 변수 선언이란? 변수를 사용하려면 반드시 선언이 필요하고, 선언은 var, let,
코드의 의미? 를 나타내는것이다. 이HTML엘레먼트가 어떤 역할을 할지 무슨 목적을 가졌는지이다.처음부터 웹 접근성에대해 생각하고 시맨틱 태그등을 사용한다면 비용이 덜든다. 나중에 개발이 전부 완료된 후 웹 접근성을 고려한다면 .. 비용이 만만치 않을것이다.시맨틱 태
시맨틱 태그에 앞서 시맨틱이란게 무엇인지부터 알아보았다.코드 조각의 의미를 나타낸다. 예) 이 HTML 엘리먼트가 가진 목적이나 역할이 무엇일까? 위에서 설명한 시맨틱의 특성을 가지고 만들어진 태그를 말한다. article, footer, header, section,
무엇을 할까? 위주의 설계 방식이다.어떻게 되는지에 대해서는 생각하지않고, 내가 무엇을 할지에 대해서만 생각하면 된다.많은 사람들이 선언형과 명령형 구분의 예시를 for 문과 map을 드는데 이유는 다음과 같다.for(let i = 0; ;) → for문은 시작부터 조
페이지를 로드할때 리소스의 우선순위가 있다.브라우저에서 기본적으로 제공하는 리소스 우선순위는 HTML에서 , 등 스크립트 태그를 만날 시 우선적으로 로드하고 실행한다.그 이외에 리소스의 우선순위를 지정할 수 있는데 prefetch, preload, preconnect
이벤트 루프에서 나오는 것인데 MicroTaskQueue, MicroTaskQueue, AnimationFrameQueue 등으로 나뉜다. 웹 API에 따라 마이크로 태스크 큐를 사용하거나, 매크로 태스크 큐를 사용한다.Promise, MutationObserver우선
입력 배열의 각 요소들의 문자를 첫 글자만 대문자로 출력해라.Write a recursive function called capitalizeFirst. Given an array of strings, capitalize the first letter of each st
CDN(Content Delivery Network || Content Distribution Network)는 데이터 사용량이 많은 애플리케이션의 로드 페이지 로드 속도를 높이는 상호 연결된 네트워크이다. 사용자가 웹 사이트를 방문할 때 웹 사이트는 서버의 데이터를
태스크 큐와 콜 스택을 감시하고 콜 스택이 비어있고 태스크 큐에 처리할 콜백 함수가 있으면 콜 스택에 올려주는 역할을 한다.자바스크립트는 싱글스레드 기반 언어지만, 자바스크립트가 구동되는 환경은 여러 스레드를 사용한다.여러 스레드가 구동되는 환경이 자바스크립트 엔진과
Problem solving 문제해결 Understand the Problem 문제 이해 Explore Concrete Examples 구체적 예시 살펴보기 우선적으로 해야할 일은 문제를 이해하는 것 입니다. 문제를 여러분 방식대로 다시 생각할 수 있나요? 여러분만
문제 해석: 인자로 들어온 문자열을 거꾸로 출력해라.풀이 조건: 재귀문제 풀이: 재귀는 무조건 함수를 호출한다. 일단 적고 시작하면 될듯ex) 함수 이름: reverse 인자값: str1\. 문자열로 들어오는 인자를 뒤에서부터 하나 씩 출력하면서 리턴할 값에 모두
TCP/IP 계층에 밀려서 7계층보단 TCP/IP 계층을 쓴다.OSI 7 계층은 물리, 데이터 링크, 네트워크, 전송, 세션, 표현, 응용 계층으로 이루어져있고 TCP/IP 계층은 물리, 데이터 링크, 네트워크, 애플리케이션 계층으로 이루어져 있다.물리 계층 - 하드웨
데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야한다. (중복)인터넷 네트워크는 매우 느리고 비싸다.(하드웨어 기준)브라우저 로딩 속도가 느리다느린 사용자 경험캐시 덕분에 캐시가 유효한 기간? 동안 네트워크를 사용하지 않아도 된다.비싼 네트워크
Content-Type: 표현 데이터의 형식 설명미디어타입, 문자인코딩예) text/html; charset-utf-8, application/json, image/pngContent-Encoding: 표현 데이터 인코딩표현 데이터를 압축하기 위해 사용데이터를 전달하는
클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능1xx(Informational):2xx(Successful):3xx(Redirection):4xx(Client Error):5xx(Server Error):클라이언트의 요청을 성공적으로 처리배치 처리 같은 곳
종료 지점(종료 조건)까지 반복 수행하는 것이다.자기자신을 호출하는 함수를 의미한다.JSON.parse, JSON.stringfy, getElementById 등 구현하면 재귀적이다 . 음 …………. 사용하는 함수들이 재귀적으로 이루어져있어서? 인가 .. 재귀 함수가
모든 것을 HTTP에 담아서 전송한다. 서버간에 데이터 주고 받을때도 사용.HTTP 1.1 가장 많이 사용, 가장 중요한 버전 HTTTP 2, 3 은 성능 개선에 초점이 맞춰져있다.특징클라이언트 서버 구조무상태 프로토콜(Stateless), 비연결성HTTP 메세지단순함
빅오란? 함수를 수행하는데 걸리는 시간, 공간을 표기하는 것이다. 빅오 표기법 O(N), O(N*log N), O(N), O(log N), O(1) 어떤 컴퓨터든 연산의 개수는 달라지지 않으므로 연산의 개수가 중심이 되고 단순화 하여 포현한다. 위 와 같은
데이터전송을 하는 2가지 방법 ⬇️GET주로 정렬 필터(검색어) 에 사용POST, PUT, PATCH회원가입, 상품주문, 리소스 등록, 리소스 변경클라이언트는 등록될 리소스의 URI 를 모른다.서버가 새로 등록된 리소스 URI 를 생성해준다.컬렉션(Collection)
지정한 IP주소에 데이터 전달패킷 통신 단위로 데이터 전달IP 패킷 정보 (출발지 IP, 목적지 IP, 기타 …)패킷: Package + BucketIP프로토콜의 한계비연결성패킷 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 (우편물 생각.. )비신뢰성중간에 패킷
Write a recursive function called capitalizeWords. Given an array of words, return a new array containing each word capitalized.조건 : 재귀다른 풀이와 비슷하게 잘 풀
문서와 문서의 관계를 설정하거나 “대역 외” 정보를 전달하는 컨텐츠이다.meta, title, script, style, link 등이 있다.(쉽게 이해하자면 걍 이 페이지에대한 정보 나타냄?)대부분의 요소들은 flow content에 속한다. 보통 텍스트, 문서 및
The first century spans from the year 1 up to and including the year 100, the second century - from the year 101 up to and including the year 200, etc
작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 실행하여 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 하는 기술이다. 작업이 완료되면 결과를 제공한다.동기 프로그래밍으로 코드를 작성할 경우 블로킹 연산이 될 때 다른 이벤트에 응답할
forEach, map, filter 타입을 분석하고 만들어보겠습니다. 모두 배열이므로 interface를 공통으로 사용하겠습니다.배열에 forEach 메서드를 콜백함수는 value, index, array 인자를 갖는데 index 는 값이 숫자이므로 타입은 numbe
Hello World 문제 풀이 Awaited 문제 풀이