현인

인터넷은 컴퓨터들이 서로 통신 가능한 거대한 네트워크 인프라이다. 인터넷은 기술 인프라이며 웹은 그 위에서 동작하는 하나의 서비스일 뿐이다.인터넷은 어떻게 구성되어 있는가?두 개의 컴퓨터가 통신이 필요하다면, 우리는 두 컴퓨터를 물리적인 방법(보통 이더넷 케이블) 혹은 무선(Wifi나 Bluetooth 시스템)으로 연결해야 한다. (이 글의 예제들은 유선 케이블이지만, 무선 네트워크도 동일한 방식이다.)하지만 이 세상은 두 대의 컴퓨터만 존재하진 않는다. 10대의 컴퓨터를 서로서로 모두 연결한다고 가정해보면, 컴퓨터당 9개의 플러그가 달려야 하고, 총 45개의 케이블이 필요해진다.이 문제를 해결하기 위해 각 컴퓨터는 라우터라고하는 특수한 소형 컴퓨터에 연결된다. 라우터는 단 하나의 작업만을 처리한다. A..

1. grep 명령어로 특정 문자열이 포함된 브랜치 목록 찾기$ git branch | grep "MEDIA-1" deploy/MEDIA-1078 deploy/MEDIA-1210 feature/MEDIA-10682. grep으로 찾은 브랜치를 xargs 명령에 pipeline으로 넘겨줘서 삭제한다.xargs 명령어는 앞 명령어의 출력 결과를 다음 명령어의 인자로 넘겨주는 명령이다.$ git branch | grep "MEDIA-1" | xargs git branch -DDeleted branch deploy/MEDIA-1078 (was f21fb73ce).Deleted branch deploy/MEDIA-1210 (was d8918276b).Deleted branch feature/MEDIA-106..

웹 개발을 하다보면 REST라는 용어를 자주 접하게 될 것이다. REST라는 개념을 이전에 공부한 적이 있었지만 일을 하다보니 개념에 대해 확실히 알아두고 싶어 글로 정리해보려 한다. 이 글에선 REST 란 무엇이고 어떻게 등장하였으며 더 나아가 RESTful, REST API 까지 알아볼 것이다. REST REST는 웹의 창시자(HTTP) 중의 한 사람인 Roy Fielding의 2000년 논문에 의해서 소개되었다. 현재의 아키텍쳐가 웹의 본래 설계의 우수성을 많이 사용하지 못하고 있다고 판단했기 때문에, 웹의 장점을 최대한 활용할 수 있는 네트워크 기반의 아키텍쳐를 소개했는데 그것이 바로 REST(Representational safe transfer)이다. REST 구성 자원 (Resouce) - ..

React에서 텍스트를 표기할 때 텍스트가 길어서 개행이 필요한 경우 데이터 중간에 태그를 삽입할 수 없다. 그래서 보통 데이터 안에 '\n'을 담아서 보내주는데, 이 또한 제대로 개행 처리가 안될 때가 있다. 이 때 아래 코드처럼 white-space 속성을 'pre-wrap'으로 변경해주면 정상적으로 개행 처리된다. const textExam = ({ apiData }) => { {apiData.content} } white-space 의 default 값은 normal 로 기존의 줄바꿈 값을 하나의 공백으로 병합(치환) 한다. pre-wrap 속성은 줄바꿈을 병합하지 않고 보존한다. pre, pre-line 값 으로도 줄바꿈이 가능하다. 더 자세한 내용은 CSS / white-space / 공백 처..

interface Data { [key: string]: DataInfo[]; } [key : string] 이런식으로 활용해서 동적으로 키 타입을 정의할 수 있다. 특정 객체에 string으로 키 값을 정의하고 싶을 때 활용한다.

문제 요격시스템 https://school.programmers.co.kr/learn/courses/30/lessons/181188?language=javascript 소요시간 30분 풀이 계획 풀이 방법 (s,e) 구간이 여러 개 주어지는 배열을 s를 기준으로 오름차순 정렬 첫 번째 원소의 e 값을 기록 두 번째 원소 부터 순차적으로 접근 현재 타겟의 s 값이 기록된 e 값 보다 크거나 같은 경우 answer 1 증가시킨다. (새로운 구간을 발견 했기에 요격할 미사일이 하나 더 필요해짐) 기록된 e 값을 현재 타겟의 e 값으로 갱신 현재 타겟의 s 값이 기록된 e 값 보다 작은 경우 현재 타겟의 e 값이 기록된 e 값 보다 작으면 e 값을 현재 타겟의 e 값으로 갱신 (기록하고 있는 구간안에 포함되는 ..

※ 제 글은 리액트를 처음 접하시거나 아직 Hook에 대해 익숙하지 않으신 분들이 빠르게 Hook에 대해 이해하실 수 있도록 핵심만 정리했습니다. 조금 더 상세한 내용은 React Hook 공식 문서를 통해서 이해하시면 좋을 것 같습니다. 참고 자료 : 김민준. 『리액트를 다루는 기술』. 길벗, 2019. useEffect useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방합니다. useEffect 적용 예시 useState 글에서 만들었던 Info 컴포넌트에 useEffect를 한 번 적용해 보겠습니다. import React, {..

※ 제 글은 리액트를 처음 접하시거나 아직 Hook에 대해 익숙하지 않으신 분들이 빠르게 Hook에 대해 이해하실 수 있도록 핵심만 정리했습니다. 조금 더 상세한 내용은 React Hook 공식 문서를 통해서 이해하시면 좋을 것 같습니다. 참고 자료 : 김민준. 『리액트를 다루는 기술』. 길벗, 2019. useState uesState는 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. useState 활용 예제 useState 훅을 사용한 숫자 카운터 예제를 보겠습니다. import { useState } from 'react' const Counter = () => { const [value, setValu..

클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. ES6에서 도입된 클래스는 기존 프로토타입 기반 객체 지향 프로그래밍보다 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 그렇다고 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼..

클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 클로저의 정의가 ECMAScript 사양에 등장하지 않는다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의 했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프라 한다. 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다. 렉시컬 환경은 자신의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. 이것이 바로 스코프 체인이다. 정리하면, 렉시컬 환경의 “외부 렉시컬..