Curt Poem about Computer

미디어 쿼리의 단점CSS에서 미디어 쿼리를 사용하는 이유는 주로 웹 페이지의 반응성과 유연성을 높이기 위해서입니다. 현제 HTML 문서를 조회하는 디바이스의 뷰포트 크기에 따라 화면의 요소를 유동적으로 조정하고 사용자에게 더 나은 경험을 제공합니다. 하지만 미디어 쿼리는 몇 가지 문제점을 가지고 있습니다. 그중 가장 큰 문제점은 바로 전체 화면 크기만을 고려한다는 점입니다. 프론트 엔드 개발에서 각 요소는 컴포넌트화되어 상대적인 위치를 가지게 됩니다. 다시 말해, 부모 컴포넌트가 차지하는 공간 내에서 문서의 흐름에 따라 배치됩니다. 이런 상황에서 뷰포트의 크기에 따라 컴포넌트를 조정하는 것은 쉬운 일이 아닐 수 있습니다. 특히, 부모 컨테이너가 존재하는 경우, 부모 컨테이너가 바뀌는 것에 따라 자식컨테이..

type-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기: Easy 난이도 - 2type-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기: Easy 난이도 - 1일반적으로 프로젝트에서 타입스크립트를 사용한다고 해도 복잡한 타입을 만들고 적용할 일은 잘 없었던 것같습니curt-poem.tistory.comtype-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기 시리즈의 Easy 난이도 마지막 입니다. 그럼 바로 시작하겠습니다.Concat요구JavaScript의 Array.concat 함수를 타입 시스템에서 구현하세요. 타입은 두 인수를 받고, 인수를 왼쪽부터 concat한 새로운 배열을 반환해야 합니다.예시type Result = Concat //..

시리즈의 다른 글 보기구조적 타이핑지난 글에서 타입스크립트를 집합이라고 표현하였는데요. 이를 조금 더 정확하게 말하면 구조적 서브타이핑(structural subtpying)이라고 합니다. 구조적 서브타이핑은 다른 말로 덕 타이핑 (duck typing)이라고도 하는데, "오리처럼 꽥꽥거리고 걷고, 헤엄치고, 날아다니는 새가 있다면 그 새를 오리라고 부를 것"이라는 말에서 유래되었다고 합니다. 즉 A 타입의 규칙(속성 또는 메서드)을 전부 가진 B라는 오브젝트가 존재한다면 오브젝트 B는 A 타입으로 본다는 말입니다.type Duck = { quack: () => void; walk: () => void; swim: () => void; fly: () => void;};function quack(d..

시리즈의 다른 글 보기타입스크립트는 자바스크립트 위에 타입시스템을 추가하여 코드의 안정성을 높이고 대규모 애플리케이션 개발을 보다 용이하게 하려는 목적으로 만들어졌습니다. 자바스크립트는 동적 타입 언어로 런타입에 타입과 관련된 오류거 발생할 수 있습니다. 이에 마이크로소프트 사에서 자바스크립트의 한계, 특히 코드의 안정성과 유지 보수성 향상을 위해 타입스크립트를 개발하였습니다. 타입스크립트는 컴파일 과정을 통해 자바스크립트 코드로 변환되는데, 컴파일 시에 타입 오류를 발견할 수 있도록 만들었습니다. 더불어 자바스크립트에서 지원이 미흡했던 객체 지향 프로그래밍을 쉽게 구현할 수 있도록 하였습니다.타입 추론타입스크립트의 이름에서 드러나있듯이 타입은 타입스크립트에서 가장 중요한 요소입니다. 특히 타입스크립트는..

type-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기: Easy 난이도 - 1일반적으로 프로젝트에서 타입스크립트를 사용한다고 해도 복잡한 타입을 만들고 적용할 일은 잘 없었던 것같습니다. 저 또한 함수의 파라미터와 리턴값에서 number, string 등 기본적인 자료형만curt-poem.tistory.com type-challenges 문제 풀이로 타입스크립트 타입 시스템 깊이 파기 시리즈의 2번째 포스팅입니다. 이번 역시 easy난이도입니다. easy난이도는 아마 3번째 시리즈까지 포스팅하면 끝날 것 같습니다. 그럼 바로 시작하겠습니다.Length of Tuple요구배열(튜플)을 받아 길이를 반환하는 제네릭 Length를 구현하세요.예시 type tesla = ['tesla'..

시리즈의 다른 글 보기   타입스크립트 심층 분석의 첫 번 째 글에서는 타입스크립트와 타입에 대해 원론적인 내용을 담고 있습니다. 가볍게 시작한다는 마음으로 읽어주시면 좋겠습니다. 최근 타입스크립트의 깊이 있는 사용에 대해 관심이 생겼는데요. 사실 일반적인 웹 앱을 개발할 때 타입스크립에 대한 많은 학습이 필요하지 않은 것 같습니다. 하지만 이전에 개발 노트: React navigation에서 덜 귀찮기 위해 더 강력한 타입 사용하기글을 쓴 것처럼 타입을 더 상세하게 적용하여 명확한 코드를 작성하고 싶은 욕심과 라이브러리 개발자들이 타입을 설정하는 것에 대한 궁금증, 그리고 언젠간 직접 라이브러리 개발을 하고 싶다는 욕망까지 많은 이유가 합쳐져 타입 스크립트에 대해 깊이 있게 공부를 시작하였습니다.타입스..

Iterator이터레이터는 반복 가능한 객체를 순회할 수 있게 해주는 객체입니다. 조금 더 구체적으로 표현하자면 이터레이터는 이터러블 객체를 반환하는 Symbol.iterator 메서드를 구현한 객체입니다. 이터러블 객체(Iterable Object)는 자바스크립트에서 반복 가능한 객체를 의미합니다. 이터러블 객체는 반복 작업을 지원하며, for...of 루프나 스프레드 연산자, 배열 디스트럭처링 등 다양한 자바스크립트 문법에서 사용할 수 있습니다. 이터러블 객체는 Symbol.iterator라는 특수한 메서드를 가지고 있습니다. 이 메서드는 이터레이터를 반환해야 하며, 이터레이터는 next 메서드를 통해 반복 작업을 처리합니다. next 메서드는 { value, done } 형태의 객체를 반환하며, 다..

지난번에 JSDoc으로 더 나은 주석 작성하기, 그리고 개발 관련 도서 추천이라는 글을 썻었는데요. JSDoc으로 함수, 클래스, 변수에 설명을 추가할 뿐만 아니라 타입을 지정해 주어 쉽게 파악이 가능한 주석을 작성하는 법을 포스팅했습니다. 오늘은 이 JSDoc을 이용하여 ts 파일이 아닌 js 파일에서도 타입을 검사할 수 있게 만드는 법을 포스팅하겠습니다. 더불어 타입스크립트처럼 사용할 수 있도록 제넥릭과 타입 캐스팅 같이 조금 더 심화된 사용법을 설명해드리겠습니다.JS 파일에서 타입검사하기// @ts-check파일의 최상단에 위와 같은 키워드를 붙이면 js 파일에서도 타입스크립트와 같은 타입검사가 가능합니다. 이 키워드를 사용한다면 JavaScript 파일에 타입 정보와 주석을 추가하여 코드의 타입 ..

일반적으로 프로젝트에서 타입스크립트를 사용한다고 해도 복잡한 타입을 만들고 적용할 일은 잘 없었던 것같습니다. 저 또한 함수의 파라미터와 리턴값에서 number, string 등 기본적인 자료형만이 사용했었습니다. 물론 그대로 타이핑하지는 않았지만 interface를 만들어 json 키-값을 타입으로 만든다거나, 컴포넌트의 props의 타입을 지정해주는 것정도에 그쳤습니다. 이 정도로만 사용하여도 타입스크립트의 장점을 가져올 수 있으며, 충분히 편리한 개발 경험을 가질 수 있습니다. 하지만, 라이브러리의 내용을 보거나 혹은 단순 성장의 욕구로 타입스크립트를 더 똑똑하게 사용하고 싶었습니다. 저의 경우 리액트 네이티브 프로젝트에서 네비게이션 기능의 타입을 쉽게 쓰기 위해 타입을 만들어 가면서 타입스크립트의..

MixinMixin은 Dart에서 다른 클래스의 기능을 재사용하는 방법을 제공하는 도구입니다. Mixin은 클래스 자체가 되지는 않지만, 다른 클래스에 포함되어 해당 클레스에 기능을 추가할 수 있습니다. Mixin은 다중 상속과 유사한 기능을 제공하지만, 엄밀히 말하면 다중 상속과는 다르게 작동합니다. 다중 상속은 하나의 클래스가 여러 부모 클래스로부터 직접 상속하는 것인 반면, Mixin은 다른 클래스의 기능을 포함하는 방식으로 작동합니다. Mixin을 사용하면, 깊은 클래스 계층 구조를 만들지 않고도 여러 클래스에 기능을 추가할 수 있습니다.상속과의 차이점?상속은 클래스가 다른 클래스의 기능을 그대로 가지도록 하는 메커니즘입니다. 상속받은 클래스는 기본 클래스의 모든 속성과 메서드에 액세스할 수 있습..

타입 추론(Type Inference)타입스크립트는 여러 값들의 타입을 자동으로 추론하는 타입 추론기능이 있습니다. 타입스크립트가 코드를 해석하여 해당 값의 타입을 알아서 찾는 편리한 기능입니다.let a = 3let b = "타입"변수 a와 b는 타입을 명시적으로 설정해주지 않았음에도 불구하고 타입스크립트는 a가 number, b가 string이라는 것을 알 수 있습니다. 타입 추론은 변수를 선언하고 초기화할 때 자동으로 일어나는 과정입니다. 변수 뿐만아니라 함수의 반환값이나 객체의 속성에서도 자동으로 타입을 추론하여 해당 값이 어떤 타입인지 알고 있습니다.Best common typelet x = [0, 1, null];위와 같이 배열에 숫자와 null이 동시에 들어간 경우는 어떻게 될까요? 타입스크..

JavsScript를 사용하여 개발을 한다면 npm을 이용해 외부 라이브러리 혹은 프레임 워크를 사용해 본 경험이 있을 것입니다. npm을 실행한다면 프로젝트의 루트 디렉토리에 package.json이라는 파일이 생성됩니다. 보통 의존성을 관리하기 위한 문서로 생각하고 있지만 그 외에도 몇 가지 역할을 더 하고 있습니다.package.json다른 사람이 개발한 패키지를 쉽게 관리하고 설치할 수 있도록 도와주는 파일이라고 정리하고 있습니다. 그리고 더 구체적으로는 다음의 3가지 기능을 언급하고 있습니다.프로젝트가 의존하는 패키지 목록시맨틱 버전 관리 규칙을 사용하여 패키지의 버전을 지정빌드를 재현 가능하게 만들어서 다른 개발자들과 쉽게 공유할 수 있게 함name과 versionpackage.json은 반드..

Git을 사용한다면 add, commit, push, status는 당연히 사용해 보았을 겁니다. 더불어 branch, checkout 및 remote와 같은 기본적인 명령어까지는 한번쯤은 사용하게 되는 명령어입니다. 그렇지만 git에는 다른 명령어가 많습니다. 오늘은 개발하면서 한 번쯤은 편리하게 써먹게 될 git 명령어 몇 가지를 소개하겠습니다.commit --amend이미 완료된 커밋을 수정할 때 사용합니다. 커밋 메세지를 수정하거나 커밋에 수정사항을 추가하고 싶을 때 사용합니다. 예를 들어 커밋 메세지에 오타가 있거나, 실수로 같이 커밋해야될 파일을 add하지 못했을 경우에 사용하면 유용합니다. 다만 이미 원격 레포지토리(giHub, giLab)에 푸시한 내역을 수정하려면 강제로 푸시하여야 되기 ..

let globalVariable = "글로벌 변수";function logOuterVariable() { console.log(globalVariable);}위의 코드와 같이 자바스크립트에서는 함수가 함수 외부의 변수에 접근할 수 있습니다. 함수는 어떤 기준으로 외부의 변수에 접근하는 것일까요? 이는 렉시컬 환경과 큰 연관이 있습니다. 렉시컬 환경은 코드가 작성된 시점의 변수 스코프와 그 접근 권한을 정의하는 환경으로 함수가 선언되는 순간 결정됩니다. 그리고 이 렉시컬 환경을 기억하고 그 환경에 접근할 수 있는 함수를 뜻합니다.렉시컬 환경(Lexical Environment)먼저, 외부 변수에 접근하는 함수를 생성해 보겠습니다. 외부 변수에 접근하는 함수의 예시치고는 복잡하지만 렉시컬 환경부터 클로저..

라이브러리를 사용하다 보면 함수를 작성할 때 해당 함수의 설명이 작성된 경우를 볼 수 있습니다. 이런 설명을 보다보면 함수의 사용법을 더 쉽게 파악할 수 있게 됩니다. 이 기능은 JSDoc라는 기능을 이용한 것으로, 자바스크립트 뿐만 아니라 Java(JavaDoc), python(docstring) 등 다양한 언어에서 지원하며 문법도 거의 똑같다고 합니다. JSDoc을 사용하면 함수의 설명 뿐만 아니라 파라미터와 반환 값의 타입에 대한 정보도 지원해 줄 수 있습니다. 파라미터와 반환값의 타입을 컴퓨터도 알게 되니 타입스크립트처럼 자동완성이 각 타입에 맞게 추천됩니다. 일반 주석과 다른 점은 VSCode와 같은 편집기를 이용한다면 해당 함수가 작성된 곳이 아닌 사용되는 곳에서도 내용을 확인할 수 있다는 것..

웹 컴포넌트는 HTML, CSS, 자바스크립트를 활용하여 재사용 가능하고 캡슐화된 웹 요소를 만드는 도구입니다. 웹 컴포넌트는 표준 웹 기술을 사용하여 구현하기 때문에 웹 프레임워크나 라이브러리에 의존하지 않고 개발할 수 있습니다. 덕분에 다양한 환경에서 사용될 수 있고, 개발자가 선택할 수 있는 유연성을 제공합니다.웹 컴포넌트웹 컴포넌트는 React나 Vue에서 말하는 컴포넌트와 같은 것을 가르킵니다. 즉 재사용이 가능한 코드를 의미합니다. 웹 컴포넌트를 사용하면 다른 컴포넌트를 사용하는 것과 똑같은 이점을 가질 수 있습니다. 웹 개발자들이 쉽게 코드를 재사용하여 생산성을 높이고 동일한 디자인 요소를 가진 코드를 컴포넌트로 만들어 일관된 사용자 인터페이스를 구현할 수 있게 하는 것이 바로 웹 컴포넌트 ..

Next js지난번에 SSR에 대해 포스팅한적이 있습니다. 아주 간단하게 요약하자면 웹 페이지 방문자가 볼 컨텐츠를 서버에서 (어느정도는)그린 다음에 클라이언트에 전송해 주는 방식입니다. SSR을 사용하기 위해서는 프론트 엔드 서버가 필요하고 해당 서버를 구축하기 위한 방법 중 하나가 바로 Next js입니다. Next는 React를 기반으로 하는 SPA 프레임워크로 오늘은 단순 React 프로젝트와의 가장 큰 차이점 중 하나인 앱 라우터를 설명해보고자 합니다.라우팅Next.js의 앱 라우터(App Router)는 Next.js 13에서 도입된 기능입니다. 이전까지는 페이지 라우터만을 사용할 수 있었습니다. Next.js 앱 라우터는 웹 애플리케이션의 URL 구조를 정의하고 사용자 요청에 따라 적절한 페..