전체 글 115

[structuredClone] Js 깊은 복사 쉽게 하기(Deep Copy)

얕은 복사 (Shallow Copy) 기본 데이터 타입의 경우 그 값이 그대로 복사한다.객체와 같은 참조 타입의 경우 메모리 주소만 복사한다. (원본데이터와 복사 데이터가 서로에게 영향을 미친다) ex) 얕은 복사 예시const obj = { a: 1, b: { c: 2 } };const shallowCopy1 = { ...obj };const shallowCopy2 = Object.assign({}, obj);console.log(shallowCopy1.b.c); // 2shallowCopy1.b.c = 3;console.log(obj.b.c); // 3 (원본 객체도 영향을 받음)shallowCopy2.b.c = 4;console.log(obj.b.c); // 4 (원본 객체도 영향을 받음)  ..

FrontEnd 2024.04.26

[Rust] 메모리 관리, 소유권 규칙 정리

https://www.rust-lang.org/ Rust Programming Language A language empowering everyone to build reliable and efficient software. www.rust-lang.org Rust 메모리 관리 Rust는 가비지 컬렉터(GC)를 사용하지 않으면서도 안전한 메모리 관리를 수행한다. 컴파일러가 소유권 규칙을 강제함으로써, 메모리 할당 및 해제를 자동으로 관리한다. 개발자는 메모리 해제를 직접 처리할 필요가 없다. 런타임 성능 저하 없이 메모리 안정성을 보장한다. Rust 소유권 규칙 모든 값은 소유자(owner)를 가지며, 한 시점에 단 하나의 소유자만이 존재할 수 있다. 소유자가 스코프를 벗어나면, 그 값은 자동으로 해제된..

Rust 2024.04.14

[TypeScript] Component Polymorphic하게 사용하기

잘못된 Polymorphic Component 예시 component 타입에 따라 필요한 props가 다름. 모든 props가 선택적(optional)으로 처리되어, 런타임에 필요한 props가 누락될 수 있음 ex) import React, { MouseEventHandler } from "react"; type ButtonType = "button" | "a"; interface ButtonProps { component: ButtonType; href?: string; onclick?: MouseEventHandler; children: React.ReactNode; } const Button = ({ component, href, onclick, children }: ButtonProps) => ..

Typescript 2024.01.27

[MFA] Module Federation 다른 서버 TypeScript Type 추론 Example (명시적 정의, @module-federation/typescript)

Module Federation에서 Remote App 모듈 사용 시 Type 추론이 자동으로 되지 않는다. 방법 1. 명시적으로 정의하여 타입 추론 Monorepo프로젝트 진행 중일 경우 Remote App 경로를 명시적으로 정의하여 타입 추론이 가능하다. 장점 경로 명시적으로 정의되어 있어, 어떤 컴포넌트에서 오는지 쉽게 파악 가능 실제 경로를 참조하여 오류를 최소화할 수 있음 tsconfig 설정만으로 간단하게 사용가능 단점 모노레포 구조에서만 사용 가능 { // ...생략 "compilerOptions": { // ...생략 "paths": { "gugbab_component_app/Button": ["../gugbab-component-app/src/components/Button"] } } }..

MSA 2024.01.21

[Error]React - DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

React를 프로젝트를 진행하며 페이지 이동시 아래 에러 발생 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 에러 발생 소스 ex) {data &&()} 에러 발생 원인 조건부 랜더링시 react에서 ins태그를 node로 인식하지 못함 해결 방법 react에서 node로 인식 할 수 있는 태그로 감싸줌 ex) {data &&()}

Error 2024.01.18

[MFA] Module Federation란? Basic Example

Module Federation webpack5에 도입된 고급 모듈 통합 기능 서로 다른 애플리케이션이 런타임에 필요한 코드를 공유할 수 있게 해 준다. 각각의 애플리케이션들이 서로 독립적으로 개발되고 배포될 수 있다. 필요한 코드만 실시간으로 로드하기 때문에 애플리케이션의 성능을 최적화할 수 있다. https://webpack.kr/concepts/module-federation/ Module Federation 구성요소 Host 다른 애플리케이션(remote)으로부터 모듈을 로드하고 사용하는 주체이다. Remote Host에 로드될 수 있는 모듈을 제공한다. 독립적으로 배포 및 업데이트가 될 수 있다. Shared Host와 Remote 애플리케이션 간에 공유되는 의존성을 의미한다. 중복된 코드의 로..

MSA 2024.01.07

[MFA]Nginx Reverse Proxy Server특징 example(pnpm+turborepo+vite)

Reverse Proxy Server 클라이언트 요청을 받아 백앤드 서버로 전달하고, 서버의 응답을 클라이언트에게 다시 전달하는 중간 서버 역할 로드 밸런싱을 통하여 트래픽을 여러 서버에 분산시키고, 적절한 서버로 라우팅 한다. 캐싱을 이용하여 동일한 응답을 두에 있는 서버에 다시 요청하지 않을 수 있음 외부 사용자로부터 내부의 서버를 숨겨 보안에 도움을 준다. SSL/TLS암호화를 사용하여 안전한 데이터 전송을 보장한다. Nginx Reverse Proxy Server 특징 이벤트 기반, 비동기 아키텍처로 설계되어 높은 동시 연결을 효율적으로 처리한다. 적은 메모리와 CPU 사용으로 더 많은 트래픽을 처리할 수 있다. 효과적인 로드 밸런싱 기능과 강력한 캐싱 기능을 통해 서버 부하를 줄이고 응답 시간을..

MSA 2024.01.01

[MFA] 트랜스파일러(Transpiler), 번들러(Bundler) 특징 (Babel, SWC, webpack, Vite)

트랜스파일러(Transpiler) JS 코드를 다른 버전의 JS 코드로 변환하는 도구 주로 ES6이상의 JS를 지원하지 않는 브라우저 환경에서 ES6이상의 문법을 사용할 수 있게 해주는 도구 장점 지속적으로 업데이트되는 브라우저나, Node.js 환경에서 최신문법을 사용하더라도 이전 버전의 JS로 변환하여 여러 환경에서 코드를 실행할 수 있다. ECMAScript 표준을 사용할 수 있게 해 줘 표준화된 코드를 작성하고 유지할 수 있다. 다양한 플러그인을 지원하여 사용자가 필요한 트랜스파일 과정을 제어할 수 있다. 폴리필(Polyfill) 최신 자바스크립트의 기능을 구식 자바스크립트 코드로 똑같이 구현한 코드 대표적인 트랜스 파일러 Babel https://babeljs.io/ 최신 자바스크립트 문법을 브..

MSA 2023.12.25

[SEO] 캐노니컬 태그 (Canonical tag) 특징 사용법

캐노니컬 태그 중복 콘텐츠의 문제를 해결하고 검색 엔진 최적화를 돕기 위해 사용되는 태그 캐노니컬 태그 특징 동적 페이지나 여러 URL로 접근 가능한 페이지에서 주된 페이지를 지정하여 중복 콘텐츠를 방지한다. 중복 콘텐츠를 방지하여 검색 엔진의 혼란을 줄여 페이지 랭킹을 향상할 수 있다. 캐노니컬 태그 주의사항 올바르지 않은 주소 사용으로 검색 엔진의 최적화를 방해할수 있다. 모든 페이지에 동일한 캐노니컬 태그 사용시 중요한 페이지에 대한 랭킹이 희석될 수 있다. 캐노니컬 태그 사용법

FrontEnd 2023.12.18

[MFA] NX 특징 , NX Cache Example

https://nx.dev/ Nx: Smart, Fast and Extensible Build System Nx is a smart, fast and extensible build system which comes with first class monorepo support and powerful integrations. nx.dev NX 특징 현재 가장 많은 기능을 제공하는 모노레포 빌드 시스템 도구 개발자 생산성 향상, CI 성능 최적화, 코드 품질 유지를 위한 도구 단일 워크스페이스 혹은 전체 워크스페이스드에 대한 태스크를 수행할 수 있다. 단일 워크스페이스 태스크 실행: nx[명령어] [app이름] 전체 워크스페이스 태스크 실행 : nx run-many -t [명령어] 작업의 결과에 대한 캐싱 기..

MSA 2023.11.26