코딩 기록기

문제 설명 정수 배열 numbers와 정수 num1, num2가 매개변수로 주어질 때, numbers의 num1번째 인덱스부터 num2번째 인덱스까지 자른 정수 배열을 return 하도록 solution 함수를 완성해 보세요. 제한사항 2 ≤ numbers의 길이 ≤ 30 0 ≤ numbers의 원소 ≤ 1,000 0 ≤num1

HTTP 의 특징 비연결지향 ( Connectionless ) request 에 대한 response 를 해주면 서버와 클라이언트가 연결이 끊어진다. 커넥션을 낭비하지 않기 때문에 리소스의 낭비를 줄일 수 있다. 상태없음 ( Stateless ) 연결을 끊는 순간 상태 정보를 유지하지 않는다. 쿠키와 세션을 쓰는 이유는 ? HTTP의 2가지 특징인 비연결지향(connectionless) 와 상태없음(stateless) 로 인해 서버는 클라이언트의 상태를 알 수 없다. 클라이언트의 상태를 알아야 될 경우 ( ex. 인증 ) 쿠키와 세션을 사용한다. 쿠키 Cookie-name : Cookie-value’ 형태의 저장소 구조를 갖는다. Cookie-value는 문자열 형태만 가지며, 클라이언트에 300개까지 ..

메모이제이션 (memoization) 이란 ? memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다. useMemo 사용법 useMemo(() => fn, deps) useMemo 는 deps 가 변한다면, () => fn 이라는 함수를 실행하고, 그 함수의 반환 값을 반환한다. 예시 import React, { useState, useCallback, useMemo } from "react"; export default function App() { const [ex, setEx] =..

기존 함수 const arrow = function() { ... }; 화살표 함수 const arrow = () => { ... }; 위 비교만으로도 왜 화살표 함수가 ES6에 추가되어 많은 개발자에게 사용되는지 알 수 있다. function이 =>로 변경되었다. 바꿔 말하면 타이핑 8이 타이핑 2로 변경되었다. 함수는 가장 많이 사용하는 기능인데, 이를 1/4로 줄인 것만으로도 개발자들에게 환호받을만하다. 이뿐만이 아니다. 조건에 한해 return 생략까지 가능해졌다. 조건 : return이 한 줄인 경우 let sum = (a, b) => a + b; // vs let sum = function(a, b) { return a + b; }; 그러면 이쯤에서 화살표 함수에 대해 한번 정리해보자. 화살표..

TCP, UDP 란 ? OSI 7 계층 중 Layer 4: 전송계층에서 사용되는 프로토콜로써, 전송계층은 프로토콜 내에서 송신자와 수신자를 연결하는 통신 서비스를 제공하는 계층인데, IP에 의해 전달되는 패킷의 오류를 검사하고 재전송 요구 등의 제어를 담당합니다. 이러한 전송계층에서 사용되는 프로토콜이 바로 TCP와 UDP이다. TCP(Transmission Control Protocol) TCP를 해석하면 전송을 제어하는 프로토콜(규약)이라는 뜻인데, 이는 아래의 정의와 별 다를 바 없습니다. 인터넷상에서 데이터를 메시지의 형태로 보내기 위해 IP와 함께 사용하는 프로토콜 신뢰성 있는 데이터 전송을 지원하는 연결 지향형 프로토콜 일반적으로 TCP와 IP가 함께 사용되는데, IP가 데이터의 전송을 처리한..

Prettier '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다 코드를 읽어들여 개발자가 설정한 옵션에 따라 코드를 다시 리포맷하는 코드 포맷터다. ESLint ES 는 Ecma Script를, Lint 는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. ESLint 는 자바스크립트 문법에서 에러를 표시해주는 도구다. 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이다. 요약 ESLint 는 코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질 개선에 중점을 둔 반면, Prettier 는 코드가 정갈해 보이도록 하는 것이 중점이지, 코드의..

DOM(Document Object Model) 이란? 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다 문서 객체란 ? html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. 따라서 돔이란 ? 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. 다시 말해 DOM은 HTML과 스크립팅언어(Javascript)를 서로 이어주는 역할을 하고 있다. 자바스크립트는 어떻게 HTML 태그들을 조종할 수 있는 걸까? document라는 전역 객체를 통해 접근할 수 있다. 또한 window라는 객체는 document객체의 상위에 위치한다. 가상돔이 나오게 된 이유 여기서 h1이라는..

display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성이다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하는게 조금 더 감이 잘 잡히는 것 같다 display 속성값의 종류 속성 속성값 설명 display none 화면에 표시X (영역 차지X) block 블록레벨 요소로 표시, 너비/높이 설정 가능 inline 인라인 요소로 표시, 너비/높이 설정 불가 inline-block 인라인 요소이나 너비/높이 설정 가능 예제 코드 HTML I am none I am block I am inline I am inline-block CSS body div { font-size: large; margin-bottom: 50px; ..

메모리 구조 먼저, 프로그램이 실행되면 운영체제(OS)는 메모리(RAM)에 이 프로그램을 위한 공간을 할당해 준다 그 공간은 다음과 같이 총 4가지(Code, Data, Heap, Stack)으로 나뉘어져 있다 코드 (code) 가장 낮은 수준의 메모리 영역으로, 실행할 프로그램의 코드가 저장되는 영역이다 CPU는 코드 영역에 저장된 명령어를 하나씩 가져가서 처리한다. 프로그램이 시작하고 끝날때까지 메모리에 계속 남아있다. 텍스트 영역이라고도 한다. 데이터(data) 프로그램의 전역 변수, 정적 변수(상수, 리터럴, 전역변수, Static 등)가 저장된다. 프로그램의 시작과 함께 할당되고 종료되면 소멸한다. 힙(heap) 사용자가 직접 관리할 수 있는, 직접 관리해야하는 영역으로 사용자에 의해 메모리 공..

브라우저 렌더링 과정은 간략하게 다음과 같이 이루어진다. 브라우저는 서버에 리소스를 요청하고 응답받는다. 브라우저 렌더링 엔진은 응답된 HTML 파일을 한 줄씩 순차적으로 읽어 들이면서 HTML을 파싱하여 DOM을 생성한다. CSS 링크를 만나면 DOM 생성을 일시 중단하고, 서버에 파일을 요청하고 응답받아 CSS를 파싱하여 CSSOM을 생성한다. 자바스크립트를 만나면 작업을 일시 중단하고, 서버에 파일을 요청하고 응답받으면 제어권이 자바스크립트 엔진에게 넘어간다. 자바스크립트 코드를 파싱하여 바이트코드로 변환하고 이를 실행한다. DOM과 CSSOM을 결합하여 렌더 트리를 만든다. 렌더 트리를 기반으로 레이아웃을 계산한다. 브라우저 화면에 페인팅한다. URL 입력 브라우저 주소창에 https://goog..