분류 전체보기
-
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 내 코드를 숨기고 싶어요.사람들은 자신이 진행 중인 작업물을 다른 사람이 보고 판단하는걸 두려워합니다.이런 두려움은 인간의 본성..
-
🧑🏻💻 구글 엔지니어는 이렇게 일한다 (1) - 소프트웨어 엔지니어링📕 book/🧑🏻💻 구글 엔지니어는 이렇게 일한다 2025. 8. 31. 11:51
🚀 1. 소프트웨어 엔지니어링소프트웨어 엔지니어링은 흐르는 시간 위에서 순간순간의 프로그래밍을 모두 합산한 것이다.-구글- 소프트웨어 엔지니어링에서 프로그래밍이 큰 비중을 차지하는 건 틀림없지만 프로그래밍은 결국 새로운 소프트웨어를 제작하는 수단입니다.이 차이를 받아들인다면 자연스럽게 프로그래밍 작업(개발, development)과소프트웨어 엔지니어링 작업(개발 / development + 수정 / modification + 유지보수 / maintenance)의 차이도 궁금할 것입니다. 시간이라는 요소가 더해지면서 프로그래밍에는 중요한 차원이 하나 늘어서 더 입체적으로 바뀝니다.시간이 프로그램에 미치는 영향을 알아보려면 “이 코드의 예상 수명은?” 이라는 질문을 던져보면 좋습니다.짧게 생을 마감하는 코..
-
워커 스레드를 통한 멀티 쓰레딩Node.js 2025. 8. 30. 16:12
이전 글을 통해서 NodeJS는 이벤트 루프를 가진 싱글 스레드 모델을 사용해 파일 읽기, 네트워크 요청, 데이터베이스 쿼리와 같은 IO 작업을 메인 스레드를 차단하지 않고 효율적으로 처리하는 것을 학습했습니다.논 블로킹 I/O와 멀티 플렉싱을 활용함으로 작업 실행을 차단하지 않고 성능을 보장⚠️ 하지만 이런 싱글 스레드 모델에서의 문제점도 확인할 수 있습니다.Node.js는 I/O 작업은 논블로킹으로 잘 처리하지만 CPU 집약적인 작업은 메인 이벤트 루프를 차단합니다.전체 애플리케이션이 응답하지 않게 만들 수 있습니다.따라서 병목 현상이 되는 CPU 집약적 작업에는 적합하지 않습니다. 👀 Node.js 에서 I/O 작업 ✅ 다시 한번 Node.js 는 싱글 스레드환경에서 어떻게 I/O 작업을 처리하는..
-
fetch APINode.js 2025. 8. 27. 22:45
🔍 비동기 데이터 통신비동기 요청을 통해서 서버에서 데이터를 가져오는 것은 동적이고 상호작용적인 웹 애플리케이션에서 필수가 되었습니다.이렇게 비동기 데이터 통신을 하는 방식으로는 XMLHTTPRequest 객체를 활용하는 것으로 수년 동안 사용한 방법입니다.이후 Fetch API가 도입되어 비동기 요청 처리를 위한 더 간단한 접근 방식을 사용하게 되었습니다. 🌐 크롬 네트워크 탭크롬의 네트워크 탭을 확인하면xhr, fetch type을 볼 수 있습니다.🧩 XMLHttpRequestXMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다.XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다. // XMLHttpRequest 객체 생성var xh..
-
비동기 프로그래밍 - Promise 와 async / awaitNode.js 2025. 8. 27. 22:36
⚠️ 콜백 지옥자바스크립트는 싱글 스레드로 한 번에 하나의 작업만을 처리할 수 있습니다.이런 문제를 해결하기 위해서 비동기 프로그래밍으로 처리를 해서 해결합니다. 비동기는 특정 코드 작업이 끝날때까지 기다리지 않고 다음 코드를 수행하는 방식으로 비동기 작업 결과에 따라 다른 작업을 수행해야할 경우 콜백 함수를 이용합니다. 📖 콜백 함수매개변수로 함수 객체를 전달해 호출된 함수 내에서 매개변수 함수를 실행하는 것 function fun(text, callback) { callback(text);} 👿 콜백 지옥function fetchData(callback) { setTimeout(() => { const data = 'user data'; callback(data); }, 1000)..