현인

웹 개발을 하다보면 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에서는 클로저에 대해 다음과 같이 정의하고 있다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의 했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프라 한다. 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다. 렉시컬 환경은 자신의 외부 렉시컬 환경에 대한 참조를 통해 상위 렉시컬 환경과 연결된다. 이것이 바로 스코프 체인이다. 정리하면, 렉시컬 환경의 “외부 렉시컬..

date 시간 값을 가져오는 과정에서 시간이 안 맞는 문제가 있어서 알아보게 되었다. 문제 파악 const date = new Date("2023-08-22T08:32:03.986Z") const hour = date.getHours(date); console.log(date): // Tue Aug 22 2023 17:32:03 GMT+0900 (한국 표준시) console.log(hour); // 17 Date.getHours() 메서드는 인자로 넘겨준 날짜의 시간 값을 24시간 형식(0~23)으로 반환해준다. 하지만 위 코드에서 보이는 것처럼 hour을 콘솔에 출력해보면, '17'이라는 값이 나온다. 이렇게 되는 이유는 Date 생성자 함수를 사용해서 가져온 현재 날짜와 시간은 기본적으로 사용자의 P..

들어가며 개발을 할 때 네이밍은 언제나 골칫거리 입니다. Github에 관련된 치트시트가 있어서 내용을 알아보게 되었습니다. 참고로 자바스크립트를 예제로 사용하기에 자바스크립트가 주 언어가 아니시라면 가볍게 개념만 읽어주셔도 좋을 것 같습니다. 영어 사용 /* Bad */ const primerNombre = 'Gustavo' const amigos = ['Kate', 'John'] /* Good */ const firstName = 'Gustavo' const friends = ['Kate', 'John'] 식별자 네이밍은 영어를 활용합니다. 좋든 싫든 영어는 프로그래밍에서 지배적인 언어입니다. 모든 프로그래밍 언어의 구문은 영어로 작성되며 수 많은 문서와 교육 자료도 영어로 작성 되기에 코드를 영어로..