분류 전체보기 97

JS, StructuredClone()

객체를 복사하려고 한다면 깊은 복사와 얕은 복사라는 개념을 알아야 함JS에서 데이터는 두가지 주요 유형으로 나눌 수 있음. 바로 원시값과 참조값임 원시값은 변수에 할당될 때 해당 변수에 직접 값이 저장됨참조값은 객체로 새로운 변수에 원본 객체에 주소가 복사되어 두 변수가 같은 객체를 가리키게 됨따라서 원본 객체를 변경하면 복사본도 영향을 받게 되는 것. 이것을 얕은 복사라고 함복사본의 영향이 가지 않도록 만들기 위해 객체의 내용을 완전히 새로운 메모리에 저장하는 것을 깊은 복사라고 함이렇게 깊은 복사로 복사된 객체는 원본 객체와는 별개의 독립적인 객체로 원본 객체의 영향을 끼치지 않음 객체를 복사할때 단순히 전개연산자(spread operator)를 사용하여 복사해 원본객체의 영향을 끼치지 않도록 복사할..

CS/프로그래밍 2024.05.01

INP란 무엇인가?

개요INP의 정의크롬 개발자 도구를 통한 INP 개선 방법 응답성(페이지가 인터렉션에 얼마나 빠르게 응답하는지)은 사용자에게 매우 중요하다. ✅ INP의 정의📦 INP (Interaction to Next Paint)다음 페이지와의 상호작용이라는 의미의 INP는 반응성을 평가하는 실험 지표로써 페이지에서 발생하는 모든 상호작용을 측정하여 페이지의 전반적인 응답성을 측정하며 이를 통해 시간을 최소화하는 것이 목표이다.INP는 페이지 수명동안의 모든 상호작용 요소를 관찰하고 가장 긴 응답 시간(지연 시간)이 가진 것을 보고한다.INP가 낮으면 페이지의 대다수의 상호작용이 대부분 빠르게 반응한다 -> 좋은 응답성을 가진다. 🎉 지연 시간이란?더보기단일 상호작용의 지연 시간은 상호작용의 일부인 어떠한 이벤트..

CS/브라우저 2024.05.01

애자일(Agile) 방법론과 TDD & Scrum

[ 애자일(Agile) 방법론 ] https://velog.io/@iamminzzy/애자일Agile-방법론-이란-BDD부터-TDD까지 소프트웨어 개발 방식의 하나로, 작업 계획을 짧은 단위로 세우고 제품을 만들고 고쳐 나가는 사이클을 반복함으로써 고객의 요구 변화에 유연하고 신속하게 대응하는 개발 방법론 쉽게 말하면, 일정한 주기를 가지고 빠르게 제품을 출시하여 고객의 요구사항, 변화된 환경에 맞게 요구를 더하고 수정해나가는 탄력적인 방법론 Agile는 기민한, 날렵한이라는 뜻으로 좋은 것을 빠르게 취하고 유연하고 효율적으로 개발할 수 있도록 만드는 다양한 방법론을 통칭해 일컫는 말임 애자일 프레임 워크 애자일 방법론을 따르는 개발 기법 ex) Scrum, kanban, XP(eXtreme Program..

카테고리 없음 2024.04.17

[Typescript] Generic과 forwardRef

개요 1. 제네릭함수와 forwardRef의 문제점 2. 해결 방안 ✅ 제네릭함수와 forwardRef의 문제점 📦 기본적인 예제 (Table) const Table = (props: { data: T[]; renderRow: (row: T) => React.ReactNode; }) => { return ( {props.data.map((item, index) => ( ))} ); }; 위 예제는 간단히 제네릭함수를 통해서 구현된 Table이다. 현재 Table 컴포넌트를 사용하는 것을 통해서 어떻게 추론이 되는지 알아보겠습니다. { (parameter) row: string return {row}; }} />; 여기서 알 수 있듯이 data로 전달된 Array형태에서 타입이 추론이 되고, 그 추론된 타..

CS/프로그래밍 2024.04.17

DX

UX(User Experience)는 고객이 이용하는 서비스에 대한 사용자 경험의 만족도를 의미함 UX 개선 작업을 통해 고객들의 서비스 만족도를 개선하고 이는 곧 더 많은 사용자 유입으로 이어지며 나아가 해당 비즈니스의 수익 증진으로 이어지게 됨 DX는 이러한 UX에서 U(User)를 D(Developer)를 대입한것으로 개발자들이 본인의 업무 환경에서 서비스를 개발하며 느끼는 경험의 만족도이며, 이를 개선하는 작업을 통해 팀과 프로젝트에 지속적으로 긍정적인 영향을 미치는 것을 말함 SW 개발은 결국 사람(개발자)들의 지적 활동이기 때문에 사람들이 어떤 생각을 가지고 일하고 있으며 동기를 부여하고 더 나은 참여도를 이끌어내는 것이 중요함 심리학의 관점에 따라 개발자 경험(DX)을 세가지 분류로 나눌 수..

CS/프로그래밍 2024.04.03

useLayoutEffect의 활용

개요 1. useLayoutEffect 2. Usage 3. useLayoutEffect의 성능저하 4. SSR에서 사용이 가능한가? ✅ useLayoutEffect란? 📦 useLayoutEffect(Setup, dependencies?) 브라우저가 화면을 다시 채우기 전에 실행되는 useEffect이며, 성능 저하를 유발할 수 있어 가급적 useEffect를 사용할 것을 공식문서에서는 권장하고 있다. 리랜더링 시: (클린업함수가 정의되어있을 시)cleanup 함수(이전 값ㅋ) → setup함수(새 값) → ( 컴포넌트가DOM에서 제거되기 전) cleanup 함수 실행 의존성을 이전 값과 비교하여 실행할지 말지를 결정하며, 인수가 생략되었을 시 렌더링할 때마다 실행된다. 📦 Usage 대부분의 컴포넌트..

CS/프로그래밍 2024.04.02

Zustand란 무엇인가?

개요 1. Zustand의 특징 2. 다른 라이브러리와 비교 3. 사용 방법 ✅ Zustand 우리는 Client state를 관리하기 위해서 상태 관리 라이브러리를 사용해야하는데 현재 update가 활발하게 이루어지고 있으며 사용량도 꾸준히 증가하고 있는 Zustand에 대해서 알아보겠습니다. (Jotai를 개발한 회사에서 만들었다고 한다.) 📦 Zustand의 개발 이유 React에서 일어나는 3가지 문제점에 대한 해결책을 제시하기 위해 제작되었다고 한다. Zombie children: 하위 컴포넌트인 "A"에서 실행하던 어떠한 일이 끝나기 전 상위 컴포넌트가 unmount되었을 시에 A가 작업을 끝낸 후 화면세엇 사라져도 메모리를 지속적으로 잡아먹는 문제 React concurrnecy: 우선순위를..

CS/프로그래밍 2024.03.23

MSA(마이크로서비스 아키텍처)

[ MSA(마이크로서비스 아키텍처) ] MSA는 여러 개의 작은 서비스로 구성되어 각 서비스가 독립적으로 개발되고 배포되는 구조 즉 하나의 큰 어플리케이션을 여러개의 작은 어플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍쳐 ▶ MSA의 등장배경 Monolithic Architecture는 소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어있는 형태 아직까지는 많은 소프트웨어가 Monolithic 형태로 구현되어 있음 소규모 프로젝트에는 Monolithic Architecture가 훨씬 합리적임 간단한 Architecture이고, 유지보수가 용이하기 때문 하지만 규모가 커지게 되면Monolithic Architecture 단점이 명확함 서비스/프로젝트가 커지면 커질수록, 영향도 파악 및 전체 시..

CS/프로그래밍 2024.03.23

디자인 패턴 - 팩토리 패턴 / 전략 패턴 / 옵저버 패턴

1. 팩토리 패턴(Factory Pattern) 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴이다. 상위 클래스와 하위 클래스가 분리되기 때문에 느슨한 결합을 가지며 상위 클래스에서는 인스턴스 생성 박식에 대해 전혀 알 필요가 없기 때문에 더 많은 유연성을 갖게 됩니다. 그리고 객체 생성 로직이 따로 떼어져 있기 때문에 코드를 리펙토링하더라도 한 곳만 고칠 수 있게 되어 유지 보수성이 증가된다. 예를 들면, 라떼 레시피와 아메리카노 레시피, 우유 레시피라는 구체적인 내용이 들어 있는 하위 클래스가 컨베이어 벨트를 통해 전달되고, 상위 클래스인 바리스..

CS/프로그래밍 2024.03.22

SOLID 원칙

개요 1. SOLID 원칙이란? 2. 단일 책임 원칙 (SRP) 3. 개방 폐쇄 원칙 (OCP) 4. 리스코프 치환 원칙 (LSP) 5. 인터페이스 분리 원칙 (ISP) 6. 의존관계 역전 원칙 (DIP) ✅ SOLID 원칙이란? 소프트웨어 개발의 다섯가지 설계 원칙을 나타내는 약어로 각 원칙을 통해 소프트웨어의 재사용성, 유연성, 확장성을 높일 수 있으며 이는 쉬운 유지 보수를 가능하게 한다. 단일 책임 원칙 (SRP, Single Responsibility Principle) 개방 폐쇄 원칙 (OCP, Open Close Principle) 리스코프 치환 원칙 (LSP, Liskov Substitution Principle) 인터페이스 분리 원칙 (ISP, Interface Segregation Pr..

CS/프로그래밍 2024.03.16