Curt Poem about Computer

일반적으로 프로젝트에서 타입스크립트를 사용한다고 해도 복잡한 타입을 만들고 적용할 일은 잘 없었던 것같습니다. 저 또한 함수의 파라미터와 리턴값에서 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 구조를 정의하고 사용자 요청에 따라 적절한 페..

인터넷은 우리의 일상에서 필수적인 도구가 되었으며, 이를 통해 우리는 다양한 정보와 서비스를 이용합니다. 그러나 인터넷을 통해 주고받는 정보가 안전하지 않다면, 우리의 개인정보와 중요한 데이터가 쉽게 노출될 수 있습니다. 때문에 오늘날에는 거의 모든 인터넷 연결은 HTTPS로 이루어집니다. HTTPS는 HTTP의 보안(Sercure) 버전으로 신뢰할 수 있고 안전한 연결을 보장하는 방법입니다. 그런데 HTTPS는 어떻게 안전한 연결을 보장할 수 있을까요?HTTP(HyperText Transfer Protocol)HTTP는 웹 브라우저와 웹 서버 간의 데이터 전송을 위한 프로토콜입니다. 웹 브라우저와 웹 서버 간의 통신을 담당하며, 인터넷상의 다양한 리소스(웹 페이지, 이미지, 동영상 등)를 전송하는 데 ..

Flutter에서 MVVM (Model-View-ViewModel) 패턴을 사용하는 것은 앱의 구조를 더 잘 조직하고, 유지보수성을 향상시킬 수 있습니다. MVVM 패턴MVVM 패턴에서는 서버 등 비즈니스 로직과 관련된 데이터를 포함한 비즈니스 로직은 Model이, UI는 View가 담당합니다. 그리고 둘 사이에 ViewModel이 존재합니다. ViewModel은 UI 로직을 가지며, Model의 데이터를 가공하여 View에 제공하는 역할을 합니다. ViewModel의 상태 변화가 View에 즉시 반영되고 View의 상호작용이 ViewModel에 반영되는 양방향 상호작용을 가집니다. View는 Model에 직접 접근하지 않고 ViewModel을 통해 가공된 형태로 접근할 수 있습니다. 이를 통해 View..

Dart에서 추상 클래스와 인터페이스 클래스는 모두 코드를 구성하고 객체 간의 상호 작용을 정의하는 데 사용되는 중요한 개념입니다.둘 모두 객체를 생성할 수 없고 대신 클래스를 제작하기 위한 설계가 됩니다. 객체를 설계하고, 객체 간의 상호 작용을 정의하며, 코드 재사용성을 높이는 데 중요한 역할을 하는 것이죠.abstract class추상 클래스(abstract class)는 추상 메서드(구현되지 않은 메서드)와 구체적인 메서드(구현된 메서드) 모두(속성까지!)를 포함할 수 있는 클래스입니다. 완성이 되지 않은 클래스이며 클래스를 만들기 위한 설계도와 같습니다. 추상 클래스로는 인스턴스를 직접 생성할 수 없고 상속을 통해 자식 클래스에서 인스턴스를 생성하여야 합니다. 상속을 받은 클래스는 추상 클래스의..

최근 SSAFY(Samsung Software Academy For Youth)에서 3번째 프로젝트를 시작하였습니다. 이번 프로젝트에서는 실시간으로 여러 데이터를 주고 받아야하는데요. 내용물만 다른 여러 개의 지속적으로 보내야 하고 하나의 요청에서 오류가 나더라도 다음 요청이 계속 진행되어야 합니다. 동시에 이런 작업을 진행하는 중에 유저와의 상호작용이 멈추면 안되죠. 이런 이유로 기존에 사용하던 데이터 처리 방식과는 다른 더 효율적인 방법이 없을까하는 고민에 빠졌습니다. 그러다가 예전에 인터넷에서 보았었던 스트림(Stream)이라는 개념이 떠올랐습니다.스트림(Stream)스트림은 대용량 데이터 처리나 비동기 I/O(Input/ Output) 작업을 효율적으로 다루기 위한 수단입니다. 말 그대로 모든 형..

리액트로 개발을 진행하다보면 하나의 컴포넌트에서 여러 개의 상태(state)를 사용해야 될 때가 있습니다. 상태가 많아지는 것 자체는 큰 문제가 되지 않을 수도 있지만 상태가 많을 경우 여러 방식으로 상태가 변화할 수 있기 때문에 상태 관리가 복잡해 질 수있습니다. 리액트에서는 이 문제를 해결하기 위해 Reducer를 사용할 수 있습니다.예시 코드만약 목록들을 생성, 수정, 삭제하는 기능을 가진 컴포넌트를 만들어야 한다고 가정해봅시다. 그러면 해당 요구사항을 충족하기 위해 다음과 같은 컴포넌트를 만들 수 있습니다.import { useState } from 'react';import AddElement from "./AddElement"import List from "./List"export defaul..

저는 프로젝트를 진행하면서 과자를 먹곤 하는데요. 과자를 먹다 나온 쓰레기들을 버리러 갈 때 팀원들의 자리에 있는 쓰레기도 함께 모아 가져가며 가비지 콜렉터라는 농담을 했습니다. 그러다가 문득 JavaScript의 Garbage Collection(가비지 콜렉션 이하, GC)은 어떤 방식으로 작동하는지 궁금했습니다. 이전에는 알아보았을 땐 BFS와 같은 탐색을 진행하면서 참조할 수 없는 메모리를 해제한다고 얼렁뚱땅 넘어갔었는데 FE article에서 소개한 Garbage Collection in V8를 읽고 내용을 정리하고 요약해 보았습니다.V8 엔진V8엔진은 구글에서 개발한 오픈 소스 자바스크립트 엔진입니다. 웹 브라우저에서 자바스크립트 코드를 실행하는 데 사용되며, 높은 성능을 가지고 있습니다. 또한..

프론트 엔드 분야는 React나 Vue를 이용한 SPA가 가장 유명합니다. 그러나 프론트 엔드 분야를 처음 접하면 CSR(Client Side Rendering)과 SSR(Server Side Rendering)이라는 용어도 함께 접해 본적이 있을 것입니다. 각각의 방식은 최초의 DOM tree가 어디서 생성되느냐에 따라 구분 지은 것입니다. Client Side Rendering(CSR) CSR은 서버에서 JS파일을 가져와 브라우저(Client)가 화면을 그리는(Render)방식을 뜻합니다. CSR은 초기 로드 시 클라이언트는 빈 HTML 페이지를 받고, JavaScript를 사용하여 필요한 DOM element를 구성하여 화면에 렌더링합니다. 이로 인해 초기 로딩 속도가 느릴 수 있지만, 한 번 로딩..

자바스크립트와 HTTP 통신에서 가장 많이쓰이는 라이브러리 중 하나인 Axios는 여러 편리한 기능들을 제공하고 있습니다. Axios 여러 편리한 기능을 이용하지 않는다면 자바스크립트의 기본 스펙인 fetch() 함수를 이용하는 것과 다를 바가 없죠. 그렇다면 Axios의 편리한 기능을 한 번 알아 볼까요? 인스턴스(instance)로 모듈화하기 Axios의 편의 기능 중 하나는 새로운 Axios 인스턴스를 만들 수 있다는 것입니다. 여기서 말하는 인스턴스는 객체 지향에서 말하는 인스턴스와 동일합니다. 동일한 설정을 공유해야 하는 경우, 서로 다른 기본 구성을 가진 요청을 만들어야 하는 경우에 Axios를 사용하면 각각의 설정과 구성을 가진 HTTP 클라이언트 인스턴스를 만들어낼 수 있죠. 예를 들어 서..