전체 글
-
Typescript 컴파일러 옵션🆎 타입스크립트 2025. 9. 16. 22:56
🔍 타입스크립트 컴파일러 옵션타입스크립트의 컴파일과정에서는 작성한 코드에 타입 오류가 없는지 검사하고 오류가 없다면 자바스크립트 코드로 변환합니다.이 컴파일 과정의 세부적인 사항들을 컴파일 옵션이라고 하고 개발자가 직접 설정하여 각자 원하는 방향으로 컴파일 옵션을 설정할 수 있습니다.얼마나 엄격히 타입 오류를 검사할 것인지?컴파일 결과로 생성되는 자바스크립트 코드의 버전은 어떻게 할 것인지?etc.. 이런 컴파일 옵션을 작성한 내용은 tsconfing.json에 작성하게 되고 이 파일은 타입스크립트 프로젝트의 root에 존재합니다. tsconfig.json에서 옵션들을 미리 정의해 놓으면 컴파일 할때 명령어에 일일히 대상 파일이나 옵션을 지정하지 않아도 되어 tsc, tsx 같은 명령어를 그냥 실행하면..
-
Node.js 환경에서 타입스크립트 설치하기🆎 타입스크립트 2025. 9. 16. 22:49
이번에 Typescript를 처음 사용해보면서 Node.js 환경에서 Typescript를 설치하고 이를 실행해보는 과정을 정리하고자 합니다.📌 타입스크립트 컴파일러 설치타입스크립트는 컴파일러에 의해서 자바스크립트로 변환한 다음에 실행합니다.컴파일 하기 위해 타입스크립트 패키지를 설치해줍니다. npm install -g typescript 위 명령어를 실행하면 node_modules 폴더에tsc, tsserver 가 설치된 것을 확인할 수 있습니다. 📌 @types/node 설치하기npm install @types/node @types/node는 Node.js API(내장 모듈, 예: fs, path, http 등)에 대한 TypeScript 타입 정의 패키지입니다. 타입스크립트 코드는 코드 실행 ..
-
📖 타입스크립트 개요🆎 타입스크립트 2025. 9. 16. 22:40
🔎 타입스크립트란?TypeScript는 Microsoft에서 개발한 JavaScript를 확장해 만든 언어입니다.정적 타입 검사를 지원하여 코드 실행 전 오류를 미리 발견할 수 있습니다.최신 ECMAScript 표준(ES6+) 기능도 지원하며 기존 JavaScript 코드와 완전 호환됩니다.타입스크립트 코드는 반드시 컴파일러가 JavaScript로 변환(트랜스파일)되어 실행됩니다.TypeScript= JavaScript + Type 문법JavaScript Superset 빠른 사용을 위해 설계되었으며 어플리케이션들을 작성하기 위해 JavaScript를 사용하지만 모든 언어는 이상한 점과 놀랄만한 점이 있으며 JavaScript 도 역시 많은 문제가 있습니다. 🤔 왜 타입스크립트를 사용? ⚠️ 자바..
-
모듈 프로그래밍의 역사와 ESM🍌 자바스크립트 2025. 9. 13. 17:35
🔍 모듈(Module)?프로젝트 규모가 커지면서 Javascript 코드를 여러 파일과 폴더에 나누고 서로가 불러와 사용할 수 있도록 해주는 시스템의 필요성이 커졌습니다.JavaScript에서는 각 파일을 서로 다른 모듈로 생각해 각 모듈에서 변수나 함수를 공유하기 위해 이를 내보내고 불러올 수 있어야 합니다.사용하고 있는 모듈 시스템과 사용하려는 모듈이 어떤 시스템을 따르고 있는지에 따라 사용 방식이 달라집니다. 👍 모듈 장점1️⃣ 유지보수 용이모듈화가 잘 되어 있다면 의존성을 줄여 기능 개선이나 수정에 용이 2️⃣ 네임스페이스화전역스코프에 존재하는 변수명이 겹치는 경우가 있을 수 있다.모듈로 분리하면 모듈만의 네임스페이스를 가지기 때문에 이런 문제를 해결할 수 있습니다. 3️⃣ 재사용성같은 코드를..
-
History API 와 클라이언트 라우팅FE 2025. 9. 8. 23:07
🚀 SPASPA는 URL이 바뀔 때마다 새로운 페이지를 서버로 요청하지 않고 클라이언트 단에서 라우팅을 합니다.React, Svelte, Vue.js 같은 대부분의 프론트엔드 프레임워크를 사용할 때 이런 클라이언트 단 라우팅을 지원하는 라이브러리를 사용합니다.✅ 이런 라우팅 라이브러리는 내부적으로 자바스크립트의 History API를 사용하고 있습니다. 🧩 SPA에서 URL Routing이 필요한 이유 🤔 만약 URL Routing이 없다면?SPA에서는 실제 html 파일은 하나로여러 페이지를 돌아다녔지만 방문 기록이 없습니다.따라서 뒤로가기 / 앞으로 가기 등의 기능을 사용할 수 없습니다.본인이 보고 있는 페이지의 접근 방법을 알기 어렵습니다. 즉 SPA역시 우리가 알고 있는 웹페이지와 같은 사용..
-
DocumentFragment으로 DOM 조작하기FE 2025. 9. 8. 22:58
👻 DOM 트리에 노드를 추가createElement 와 appendChild 를 사용해서 DOM 트리에 노드를 추가할 수 있습니다.const container = document.createElement('div'); // 노드를 생성const content = document.createElement('div');container.appendChild(content); // DOM 트리에 추가⚠️ 문제점이렇게 직접 DOM에 접근하여 노드를 추가하게 되면 DOM에서 매번 reflow가 발생하여 문제가 발생합니다. 📖 reflow요소의 너비, 높이, 위치 등이 변경되어 render tree가 재생성특정 요소에서 reflow가 발생하면 주변 요소(부모, 자식, 형제)에도 영향을 주게 됩니다. 🔍 Do..
-
프론트엔드 아키텍처 구조 - MVC, MVVMFE 2025. 9. 2. 16:49
프론트엔드 개발에서 아키텍처를 설계하는 것은 애플리케이션의 유지보수성, 확장성 및 성능을 결정짓는 중요한 요소입니다.특히, 관심사의 분리는 프론트엔드 아키텍처를 설계할 때 기본적으로 고려해야 하는 원칙 중 하나입니다.예를 들어, 사용자 인터페이스(UI), 비즈니스 로직, 데이터 관리 등의 관심사를 분리함으로써 각각의 부분을 독립적으로 개발하고 테스트할 수 있습니다.1️⃣ MVC 패턴MVC 패턴은 애플리케이션을 모델(Model), 뷰(View), 컨트롤러(Controller)의 세 부분으로 분리하는 가장 일반적인 아키텍처 패턴 중 하나입니다. 🤖 구성 요소🧩 Model (모델)애플리케이션의 데이터와 비즈니스 로직을 관리데이터의 상태를 유지하고 데이터 처리 규칙을 정의 🧩 View (뷰)사용자에게 정보..
-
🧑🏻💻 구글 엔지니어는 이렇게 일한다 (2) - 팀워크 이끌어내기📕 book/🧑🏻💻 구글 엔지니어는 이렇게 일한다 2025. 9. 2. 09:47
🚀 2. 팀워크 이끌어내기이 주제를 논하려면 여러분이 반드시 통제해야 하는 하나의 변수, 즉 ‘여러분 자신’ 을 조망하는 데서 시작해야 합니다.사람은 완벽하지 않습니다.그래서 인간을 ‘간헐적 버그들의 집합’에 가깝다고 이야기하곤 하죠.하지만 동료에 내재된 버그를 이해하려면 무엇보다 여러분 내면에 서식하는 버그를 먼저 이해해야 합니다. 이번 장의 핵심 주제는 소프트웨어 개발은 ‘팀의 단합된 노력’의 결실이라는 점입니다.그래서 엔지니어링팀이 (혹은 어떤 형태든 창의적 협업이) 성공하려면 겸손, 존중, 신뢰라는 핵심 원칙에 맞게 여러분 자신의 행동을 바로잡아야 합니다. 📖 2.1 내 코드를 숨기고 싶어요.사람들은 자신이 진행 중인 작업물을 다른 사람이 보고 판단하는걸 두려워합니다.이런 두려움은 인간의 본성..