본문 바로가기

전체 글

 (54)
제네릭 타입은 무엇이며 왜 쓰는 걸까? 안녕하세요 :) TypeScript를 사용하다 보면 가장 많이 언급되는 개념 중 하나가 바로 제네릭(Generic)입니다. 제네릭은 다양한 데이터 타입을 유연하게 처리할 수 있도록 도와주는 타입스크립트의 도구인데, 코드 재사용성과 타입 안정성을 동시에 제공한다는 장점이 있습니다. 하지만 처음 접할 때는 다소 복잡하고 어렵게 느껴질 수 있죠.그래서 이 글에서는 제네릭의 기본 개념부터, 활용 예시, React와 같은 프레임워크에서의 확장법까지 단계적으로 알아보고자 합니다. 제네릭 타입이란?제네릭(Generic) 타입은 TypeScript에서 다양한 타입의 데이터를 유연하게 처리하기 위한 타입 지정 방법 중 하나입니다. 코드 작성 시 데이터의 타입을 명시하지 않고, 대신 타입을 변수처럼 동적으로 설정할 수 있..
알아두면 좋은 TypeScript와 JavaScript의 차이점 안녕하세요 :) TypeScript와 JavaScript는 웹 개발에서 자주 쓰이는 언어입니다. 특히 TypeScript는 JavaScript의 확장 언어로서, 코드의 유지보수성을 향상시킬 수 있는 언어입니다. 하지만, 많은 사람들이 '왜 TypeScript를 사용해야 하는지', '왜 TypeScript 코드를 JavaScript로 변환해야 하는지' 잘 모르는 경우가 많은 거 같습니다. 이번 글에서는 TypeScript와 JavaScript의 차이점을 설명하고, 왜 코드의 변환이 이루어져야 하는지에 대해 다뤄보겠습니다. 먼저 두 언어가 무엇인지부터 간단히 살펴보도록 하겠습니다. TypeScript와 JavaScript란 무엇인가?프로그래밍 언어는 각각의 목적과 특징을 가지고 있습니다. TypeScript..
WebPack 설치 및 설정하기 안녕하세요 :) 2024.12.11 - [JavaScript] - WebPack이란 무엇인가? 기본 파헤치기이전에, 'WebPack이란 무엇인가? 기본 파헤치기' 글에서 WebPack이란 무엇인가에 대해서 다뤄보았습니다. 이번 글에서는 WebPack을 설치하고 설정을 어떻게 해야 하는지에 대해 알아보려고 합니다! 먼저, WebPack을 프로젝트 폴더에 설치해야 합니다. WebPack을 설치하기 전에, Node.js를 설치해줘야 합니다. Node.js 설치 방법왜 Node.js가 필요할까요?WebPack은 기본적으로 Node.js 환경에서 동작하는 도구이기 때문입니다. Node.js는 JS를 서버 사이드에서 실행할 수 있게 해주는 런타임으로, WebPack을 비롯한 많은 개발 도구들이 Node.js를 기반..
WebPack이란 무엇인가? 기본 파헤치기 안녕하세요 :) 웹 개발을 할 때 빌드는 반드시 거쳐야 하는 과정입니다. 그렇기에 최적화된 빌드 도구의 중요성은 점점 더 커지고 있죠. 다양한 빌드 도구 중에서도 Webpack은 가장 널리 사용되는 모듈 번들러 중 하나로, 복잡한 프로젝트를 관리하고 최적화하는 데 있어서 주목받는 툴 중 하나입니다. 오늘은 이러한 WebPack의 개념부터 내부 작동 원리, 필요성까지 살펴보도록 하겠습니다. WebPack이 뭘까?웹 개발을 하다 보면 여러 가지 파일들이 한꺼번에 관리되어야 하는 상황을 자주 마주하게 되죠. 예를 들어, 자바스크립트 파일, 스타일 시트(CSS), 이미지 파일, 심지어 HTML 템플릿까지요. 이렇게 다양한 파일들을 효율적으로 관리하고 배포하는 일은 생각보다 복잡할 수 있습니다. WebPack이라..
GUI란? 컴퓨터와 사용자를 연결하는 다리 안녕하세요 :) 오늘은 GUI에 대해 간단히 알아보려고 합니다. 현대 시대는 디지털 시대라고 해도 과언이 아닌데요. 그 때문에 GUI는 우리 삶에 깊숙이 자리 잡고 있습니다. 컴퓨터, 스마트폰, 그리고 다양한 디지털 기기에서 우리가 쉽게 작업을 수행할 수 있는 이유는 바로 GUI 덕분이죠.  과거 CLI가 중심이었던 시대와 달리, GUI는 직관적인 그래픽 요소를 통해 초보자도 쉽게 디지털 기기를 다룰 수 있도록 설계되어 있습니다. 이번 글에서는 이런 GUI가 무엇이고, 어떻게 발전해왔는지 간단히 알아보도록 하겠습니다. 시대의 흐름이 CLI - GUI인 만큼, CLI가 무엇인지에 대해 먼저 살펴보고 넘어가도록 하겠습니다. CLI란?CLI는 Command Line Interface로, 사용자가 직접 명령어를..
Node.js 알아보기 안녕하세요 :) JavaScript는 웹의 언어입니다. 익히 JavaScript는 브라우저 위에서 작동하는 클라이언트 언어라고 알려져 있죠. 혹시 이런 JavaScript가 브라우저에서만 작동한다고 알고 계셨나요? 예전에는 그랬을지 몰라도 현재는 Node.js라는 환경이 있기 때문에 전혀 그렇지 않습니다!Node.js의 등장으로 JavaScript는 브라우저를 넘어 서버로, 그리고 훨씬 더 넓은 영역으로 확장되었습니다. 이제는 하나의 언어로 프론트엔드와 백엔드를 모두 개발할 수 있는 시대가 열린 것이죠. 그렇다면 Node.js란 무엇이며, 어떻게 동작하는지 알아보는 시간을 가져보도록 하겠습니다. Node.sj 란 무엇인가Node.js는 JavaScript를 브라우저 없이 실행시킬 수 있는 런타임 환경입니..
개발자처럼 유튜브 영상 다운로드 하기 안녕하세요 :) 최근에 yt-dlp를 이용해서 유튜브 영상을 다운로드 해보았습니다.같이 일하는 팀원이 '영상을 보고 자기가 필요한 부분만 잘라서 보내줄 수 있냐'라는 요청이 들어와서 yt-dlp를 사용하게 되었습니다. 원래는 macOS에 탑재되어 있는 'cmd + shift + 5'로 영상 파일만 보내주려고 했는데, 음성 파일도 같이 병합되어 있는 걸로 달라고 하더군요. cmd + shift + 5는 음성 없는 파일로 녹화만 가능했기 때문에 yt-dlp를 사용하게 되었습니다. yt-dlp는 깃허브에 올라가 있는 오픈소스 다운로드 도구로, 유튜브 뿐만 아니라 다양한 동영상 플랫폼을 지원하고 있습니다. 오늘은 제가 yt-dlp를 다운로드 받고 원하는 영상 자료를 얻는 과정을 같이 살펴보겠습니다. yt-dlp..
브라우저 간 API 차이, Shim으로 통합하기 안녕하세요 :) 개발을 하다보면 같은 기능인데 브라우저마다 API 메서드나 함수명이 다른 경우가 있습니다. 이때는 코드가 특정 브라우저에서만 작동하거나, 오류를 발생시킬 수 있기 때문에, 개발자가 골치 아픈 상황에 처하게 되죠.이런 문제를 해결하기 위해서는 어떻게 해야 할까요?문제 해결을 위한 개념이 'Shim(심)'이라는 개념인데요. 오늘은 이 Shim에 대해 알아보겠습니다. Shim이란?Shim은 브라우저 간의 API 차이를 해결하기 위해 사용되는 '코드 작성 방식'입니다. 브라우저마다 다르게 구현된 함수나 메서드를 하나의 일관된 표준 API 형식으로 통합해줍니다. 이를 통해, 모든 브라우저에서 동일한 코드로 기능을 사용할 수 있죠. Shim이라는 개념은 무슨 역할을 할까요?1. 특정 기능이 브라우저..

티스토리툴바