본문 바로가기

Front-end/TypeScript & JavaScript21

[TypeScript] ① 왜 쓰는 건지, 컴파일러와 tsconfig 제대로 이해하기 "타입 쓰면 코드가 길어지잖아. 왜 써야 하는 건데?" 에 대한 진짜 답. TypeScript를 처음 접했을 때는 "JavaScript에 타입만 붙인 거 아냐?"였다. : string 붙이고, interface 만들고, 빨간 줄 나오면 as any 때리고. 그게 TypeScript인 줄 알았다. 근데 실무에서 코드베이스가 커지면서 "타입이 없었으면 이거 어떻게 유지보수했을까" 싶은 순간이 계속 왔다. 리팩토링할 때 타입 에러가 가이드 역할을 하고, API 응답 타입을 정의하면 프론트-백 계약이 되고, 에디터 자동완성이 문서 역할을 한다. 📝 자료조사만 AI를 사용하였으며, 본인의 이해를 위해 글은 직접 작성하였습니다.TypeScript는 왜 만들어졌는가JavaScript의 태생적 문제JavaScript.. 2026. 4. 23.
Node.js 시리즈 ③ — Node.js로 어디까지 할 수 있는가, Deno와 Bun의 도전 Node.js가 "서버도 JS로 만든다"였던 시절은 지났다. 이제는 거의 모든 곳에 있다. 1편에서 내부 동작 원리, 2편에서 버전별 변화와 Java 비교를 다뤘다.마지막 편에서는 Node.js의 활용 범위, 경쟁자(Deno, Bun)와의 비교, 실무 패턴을 다룬다.📝 자료조사만 AI를 사용하였으며, 본인의 이해를 위해 글은 직접 작성하였습니다.Node.js로 할 수 있는 것들Node.js가 처음 나왔을 때는 "서버 사이드 JavaScript"가 핵심이었다. 지금은 범위가 훨씬 넓어졌다.1. 웹 서버 / API 서버가장 기본적인 용도.Express → 가장 많이 쓰이는 웹 프레임워크. 미니멀Fastify → 성능 중심. Express보다 빠름NestJS → TypeScript 기반 구.. 2026. 4. 18.
Node.js 시리즈 ② — 18, 20, 22 뭐가 다른지 + Java 생태계와 비교 Node 18 쓰다가 20으로 올리래서 올렸다. 뭐가 바뀐 건지는 모르겠다.1편에서 Node.js의 내부 동작 원리를 다뤘다. 이번에는 버전별로 뭐가 바뀌었는지, 그리고 Java 생태계와 어떻게 다른지를 정리한다.Node.js는 짝수 버전이 LTS(Long Term Support)다. 18, 20, 22가 LTS이고, 홀수(19, 21, 23)는 Current(최신 기능 먼저 탑재, 짧은 지원)다.📝 자료조사만 AI를 사용하였으며, 본인의 이해를 위해 글은 직접 작성하였습니다.Node.js 릴리스 주기[릴리스 타임라인]Node.js 18: 2022년 4월 출시 → LTS 2022년 10월 → EOL 2025년 4월Node.js 20: 2023년 4월 출시 → LTS 2023년 10월 → EOL 2026.. 2026. 4. 17.
[Javascript] reduce 함수: 너도 나도 궁금한 데이터 요리사의 비밀 🥄 reduce 함수 톺아보기! 🥄자바스크립트 reduce 함수는 배열을 하나의 값으로 “축약”하는 만능 데이터 요리 도구입니다. 그냥 숫자나 문자열만 더하는 게 아니라, 배열을 원하는 형태로 조리(?)할 수 있어요. 그럼 이제, reduce라는 데이터 요리사의 주방을 탐험해볼까요?🥪 reduce의 기본 레시피문법array.reduce((accumulator, currentValue, index, array) => { // 로직}, initialValue); reduce는 배열의 각 요소를 돌며 아래의 재료들을 받아요:accumulator: 요리사가 사용하는 그릇 같은 역할! 이전 단계에서의 결과를 담습니다.currentValue: 지금 처리 중인 재료index: 현재 재료의 위치(선택 사항)array.. 2025. 1. 13.
[Javascript] callback의 bucket relay: 협업의 예술 🎨 📣 콜백의 버킷 릴레이에 대해 톺아보자 !자바스크립트를 쓰다 보면 한 번쯤 들어봤을 단어, 바로 콜백(callback). 함수의 인수로 전달되어 나중에 호출되는 이 개념은 비동기 작업의 심장부에서 작동합니다. 그런데, 이런 콜백도 버킷 릴레이(bucket relay)처럼 끊임없이 다음 주자에게 작업을 넘길 수 있다는 사실, 알고 계셨나요? 오늘은 콜백과 버킷 릴레이의 개념, 이를 실제 코드에서 어떻게 구현하는지, 그리고 이 패턴에서 주의해야 할 점까지 차근차근 알아봅시당. 🚀🌟 콜백(callback)이란?콜백은 “나중에 불러줘”라는 의미를 가진 함수입니다. 즉, 함수의 인수로 전달되어 특정 조건이 충족되거나 작업이 완료된 후 실행되는 함수죠.콜백 기본 예제function greet(name, cal.. 2024. 12. 30.
[TypeScript] Interface: 타입을 구조적으로 정의하기!📘 📘 TypeScript의 Interface 톺아보기!TypeScript에서 interface는 객체의 구조를 정의하는 데 사용됩니다. 함수, 클래스, 객체 등 다양한 타입을 안전하고 명확하게 작성할 수 있도록 도와주는 중요한 도구죠. 이 글에서는 interface에 대해 깊이 있게 다루어 볼게요. 🛠️🔍 Interface란 무엇인가요?Interface는 객체의 타입을 선언할 때 사용하는 TypeScript의 키워드입니다. 객체가 가져야 할 속성과 속성의 타입을 지정할 수 있어요.interface Person { name: string; age: number;}const person: Person = { name: "John", age: 30,}; 위 예제에서 Person은 name과 age .. 2024. 12. 26.
[TypeScript] 객체 타입: 객체를 보호하는 강력한 방패 🛡️ 타입스크립트의 객체 타입 톺아보기! 🛡️TypeScript에서 객체 타입은 코드의 안정성과 가독성을 보장하는 데 중요한 역할을 합니다. 객체는 자바스크립트에서 가장 기본적인 데이터 구조 중 하나지만, 동적 타입 시스템에서는 실수가 잦죠. TypeScript를 활용하면 객체에 대해 명확하고 안전한 구조를 정의할 수 있습니다. 이번 글에서는 객체 타입의 기본 개념부터 활용까지 차근차근 파헤쳐 보겠습니다.1. 객체 타입이란? 🖍️객체 타입은 객체의 속성 이름과 속성 타입을 정의하여 객체의 구조를 미리 고정하는 역할을 합니다. TypeScript는 이를 통해 객체의 형태를 검사하고, 잘못된 속성 접근을 사전에 방지합니다. 1.1 기본 객체 타입 선언객체 타입은 중괄호 {}를 사용해 정의합니다.let user.. 2024. 12. 22.
[TypeScript] 타입 관리: 선언, 표기, 추론까지 완벽 가이드 🌏 TypeScript의 타입 톺아보기! 🌏 TypeScript는 정적 타입 시스템을 제공해 코드의 안정성과 가독성을 높이는 데 중요한 역할을 합니다. 이 글에서는 타입 선언, 표기, 추론의 모든 것을 다루며, TypeScript 타입의 세계를 깊이 탐구해 보겠습니다. 타입을 명확히 이해하면 더 안전하고 효율적인 코드를 작성할 수 있어요!1. TypeScript의 기본 타입과 선언 🗄️TypeScript는 JavaScript의 타입 없는 자유로움을 보완하기 위해 타입 선언을 제공합니다. 변수, 함수, 객체 등에 타입을 지정해 코드의 의도를 명확히 표현할 수 있습니다.1.1 기본 타입숫자(Number)let age: number = 25; // 숫자 타입 문자열(String)let name: string .. 2024. 12. 21.
[TypeScript] TSX: TypeScript와 React의 만남 🌀 TSX 톺아보기! 🌀TSX(TypeScript + JSX)는 TypeScript와 JSX(JavaScript XML)를 결합한 형태로, TypeScript의 정적 타입 검사와 React의 컴포넌트 기반 개발을 동시에 즐길 수 있는 문법입니다. React 프로젝트에서 TSX를 활용하면, 강력한 타입 안정성과 코드 품질을 확보할 수 있어요. 이번 글에서는 TSX의 기본 개념부터 설정, 주의사항, 그리고 실무에서 마주칠 수 있는 에러와 해결 방법까지 한 번에 알아봅시다! 🛠️TSX란? 🤔TSX는 React 컴포넌트에서 TypeScript의 타입 검사와 JSX 문법을 동시에 사용하는 파일 형식입니다..tsx 확장자를 사용하며, React 컴포넌트 개발에 필수적입니다.JSX가 HTML과 비슷한 문법으로 UI.. 2024. 12. 20.
[TypeScript] 타입스크립트란 왜 쓰일까? 🛡️ TypeScript: 톺아보기! 🛡️TypeScript(타입스크립트)는 자바스크립트의 슈퍼셋으로, 코드의 신뢰성과 유지보수성을 대폭 개선하는 도구입니다. 이번 글에서는 TypeScript가 무엇인지, 왜 사용하는지, 기본 개념, 그리고 실전 예제까지 다룰 거예요. TypeScript를 통해 더 안전하고 효율적인 개발 세계로 들어가 보세요!TypeScript란? 🤔TypeScript는 Microsoft가 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트에 정적 타입 시스템을 추가합니다. 자바스크립트의 모든 기능을 포함하면서도 타입 검사 및 코드 자동 완성을 통해 개발자가 더 안정적으로 코드를 작성할 수 있도록 돕죠. 주요 특징정적 타입 검사컴파일 단계에서 타입 오류를 감지해 실행 전에 문제를 해결합니다.. 2024. 12. 19.
[Javascript] 템플릿 리터럴(Template Literal): 자바스크립트 문자열의 진화 🌟 템플릿 리터럴(Template Literal) 톺아보기! 🌟자바스크립트에서 문자열을 다루다 보면 복잡한 문자열 연결이나 표현식을 삽입하는 일이 빈번하게 발생합니다. 과거에는 + 연산자를 사용해 문자열과 변수를 연결해야 했지만, ES6(ECMAScript 2015)에서 도입된 템플릿 리터럴은 이런 불편함을 말끔히 해결해 줍니다. 이번 글에서는 템플릿 리터럴의 기본 개념부터 활용 방법, 그리고 실무에서 어떻게 사용하면 좋은지까지 차근차근 알아보겠습니다. 😊템플릿 리터럴이란? 🤔템플릿 리터럴은 문자열을 다루기 위한 새로운 방식으로, 다음과 같은 특징을 가지고 있습니다:백틱(Backtick, ``)으로 문자열을 감쌉니다.표현식 삽입을 위해 ${} 구문을 사용합니다.여러 줄의 문자열을 쉽게 작성할 수 있습니.. 2024. 12. 17.
[React] Component Lifecycle: 컴포넌트의 생명주기! 🎢 Component Lifecycle 톺아보기 🎢리액트에서 컴포넌트는 생명주기(Lifecycle)를 가집니다. 컴포넌트는 태어나고(Mounting), 살아가며(Update), 마침내 떠나죠(Unmounting). 리액트의 라이프사이클 메서드와 훅을 이해하면, 컴포넌트의 상태 변화와 동작을 제어할 수 있습니다. 리액트 개발자라면 반드시 이해해야 하는 개념! 함께 시작해볼까요? 🚀리액트 라이프사이클, 왜 중요할까? 🤔리액트 컴포넌트는 여러 단계에서 특정 작업을 수행할 기회를 제공합니다. 예를 들어:컴포넌트가 화면에 나타날 때 데이터를 로드하거나,상태가 변경될 때 DOM을 업데이트하거나,컴포넌트가 사라질 때 리소스를 정리할 수 있죠이 과정은 크게 세 단계로 나뉩니다:마운트(Mounting): 컴포넌트가 D.. 2024. 12. 4.
자바스크립트의 filter: 데이터를 깔끔하게 추려내는 요술사 ✨ filter 톺아보기! ✨filter는 자바스크립트 배열 메서드 중에서도 필수 중의 필수로 꼽히는 도구입니다. 배열에서 원하는 조건을 만족하는 요소만 골라내 새로운 배열을 만들어 주죠. 코드를 깔끔하고 직관적으로 작성할 수 있어, 데이터를 다룰 때 없어선 안 될 친구랍니다. 이번 글에서는 filter의 사용법부터 실전 활용까지, 개발자라면 알아야 할 모든 것을 담아볼게요. 💡filter란? 🤔filter는 배열 메서드로, 주어진 조건을 만족하는 요소들만 추출해 새로운 배열을 반환합니다. 원본 배열은 그대로 유지되며, 배열을 “필터링”해 데이터를 정리하거나 분류할 때 사용되죠.문법 📜array.filter(callback(element, index, array), thisArg);callback: 각.. 2024. 12. 3.
자바스크립트의 concat: 배열 합치기의 마법사 🧙‍♂️ concat 함수 톺아보기 💡concat은 배열이나 문자열을 연결할 때 사용하는 아주 깔끔하고 직관적인 방법입니다. 특히 데이터를 합치거나 복사할 때 강력한 도구로 사용되죠. 이번에는 concat의 사용법부터 실무에서의 활용까지 아주 깊이 있고 풍부하게 다뤄볼게요!concat이란? 🤔concat은 배열이나 문자열을 변경하지 않고(원본 불변) 새로운 배열이나 문자열을 반환하는 메서드입니다. 여러 배열이나 문자열을 한데 묶어 새롭게 사용하고 싶을 때 딱이에요.문법 📜배열에 사용하는 경우:const newArray = array1.concat(array2, array3, ...); 문자열에 사용하는 경우:const newString = string1.concat(string2, string3, ...);.. 2024. 12. 2.
자바스크립트의 map 함수: 알고 보면 개발자의 베프 💡 map 함수 톺아보기 💡자바스크립트를 조금만 써본 사람이라면 한 번쯤 들어봤을 map. 배열을 변환하거나 데이터를 다룰 때 강력한 도구로 활약하는 함수입니다. 특히 프론트엔드 개발, 더 좁게 말하면 React JSX와의 궁합은 환상적이죠.그럼 map의 모든 것을 속속들이 파헤쳐 볼까요? 🚀map 함수란? 🌍map 함수는 배열 내 각 요소에 대해 특정 작업을 수행한 결과로 새로운 배열을 반환하는 자바스크립트 배열 메서드입니다.원본 배열을 변형하지 않고, 새로운 배열을 만들어낸다는 점에서 매우 유용해요!문법 📚const newArray = array.map((element, index, array) => { // 반환할 값 작성}); 매개변수element: 현재 처리 중인 배열 요소index (선택.. 2024. 12. 1.
콜백 함수: 자바스크립트의 비밀 병기 🕵️‍♀️✨ 콜백 함수 톺아보기! 🕵️‍♀️✨프로그래밍을 하다 보면 “콜백 함수”라는 단어를 자주 듣게 되죠? 처음엔 왠지 고급 기술처럼 느껴지지만, 사실 콜백 함수는 아주 친숙한 개념이에요. 콜백 함수를 알면 자바스크립트를 훨씬 유연하게 다룰 수 있습니다.그럼, 콜백 함수란 무엇인지, 왜 필요한지, 그리고 어떻게 사용하는지 찬찬히 알아볼까요? 🎉콜백 함수란? 🤔콜백 함수는 “다른 함수의 인자로 전달되어 실행되는 함수”를 말해요. 이름 그대로 “나중에 호출(callback)될 함수”라는 뜻이죠. 간단히 말해, A라는 함수가 B라는 함수를 호출 시점까지 책임지고, 나중에 B를 실행하게 되는 구조예요. 기본 예제: 콜백 함수의 모습function greet(name, callback) { console.log(`.. 2024. 11. 30.
자바스크립트의 비구조화 할당: 데이터를 다루는 예술 🌟 비구조화 할당(Destructuring Assignment)이란? 🌟 비구조화 할당은 객체나 배열에서 필요한 데이터만 쏙쏙 골라내어 변수에 할당할 수 있는, 자바스크립트의 강력한 문법이에요.예를 들어, 데이터를 나눠주는 “스마트 택배 분류기”라고 생각해보세요!이 문법 덕분에 코드가 깔끔해지고 가독성이 좋아지며, 데이터 처리도 훨씬 쉬워집니다. 📦 왜 비구조화 할당을 사용할까? 🤔1. 코드 간결화불필요한 연산자를 줄이고, 선언과 추출을 한 번에 할 수 있어요. 또한 변수 선언도 한눈에 파악하기 훨씬 쉬워집니다.2. 가독성 향상어떤 데이터를 추출하는지  “무엇을 가져오는지” 명확하게 보여주므로 협업에도 유리합니다.3. 유연한 데이터 처리필요한 값만 선택적으로 추출 가능해 성능 최적화에 도움을 줍니다.4.. 2024. 11. 20.
[자바스크립트] 화살표 함수, 뭐가 그렇게 특별할까? 🎯 화살표 함수란? 🎯 화살표 함수는 ES6(ECMAScript 2015)에서 도입된 함수 표현식의 한 형태로 자바스크립트의 현대적이고 깔끔한 함수 표현식이에요. => 구문을 사용해 간단하게 작성할 수 있어요. 기존의 function 키워드를 사용하는 방식보다 코드가 훨씬 짧아지고, 특히 this를 다루는 방식이 달라 특정 상황에서 더 유용하게 사용할 수 있습니다.// 전통적인 함수 선언 방식function add(a, b) {  return a + b;}// 화살표 함수const add = (a, b) => a + b; 기존 함수 방식에 비해 문법은 더 간단하고, this는 더 명확해졌어요.그럼, 화살표 함수가 얼마나 매력적인지 한 번 살펴볼까요? ✨전통적인 함수 vs 화살표 함수 🚀1. 문법 차이: .. 2024. 11. 18.
[자바스크립트] 변수 선언 방식: const, let, 그리고 var 자바스크립트에는 변수를 선언하는 방법이 세 가지 있어요: const, let, var. 각 방법이 선언된 위치나 스코프, 값의 변경 가능성 등에 따라 다른 특성을 지니기 때문에, 상황에 맞게 적절히 사용하는 게 중요합니다.const: 변하지 않는 상수 선언 const는 값을 고정해 놓을 때 사용하는 선언이에요. 한 번 선언한 뒤에는 값을 바꿀 수 없기 때문에, 상수처럼 쓸 수 있는 값에 적합합니다.const name = "John";name = "Doe"; // ❌ Error! 재할당 불가 const의 주요 특징 • 재할당 불가: 선언된 값을 다시 바꿀 수 없습니다. 고정된 값으로 사용해야 해요.• 블록 스코프: const로 선언된 변수는 선언된 블록 {} 내에서만 유효해요. 함수, 조건문, 반복문 등에.. 2024. 11. 17.
Javascript에서 undefined와 맞짱뜨는 법 JavaScript에서 undefined: 발생 원인과 해결 방법JavaScript에서 undefined는 매우 흔하게 발생하는 데이터 타입 중 하나이다. 이는 변수가 선언되었지만 값이 할당되지 않았거나, 함수가 값을 반환하지 않을 때 주로 나타난다. 이번 블로그에서는 undefined가 발생하는 다양한 경우와 이를 해결하기 위한 방법, 그리고 TypeScript를 도입했을 때의 이점에 대해 깊이 있게 알아보겠다.1. undefined란 무엇인가?undefined는 JavaScript에서 데이터 타입 중 하나로, 변수가 값이 할당되지 않은 상태를 나타낸다. 기본적으로 다음과 같은 경우에 undefined가 발생한다:변수가 선언되었으나 초기화되지 않았을 때함수가 명시적으로 값을 반환하지 않을 때객체의 속성.. 2024. 9. 23.

티스토리툴바