CS겸 취준까지

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

개요 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형태에서 타입이 추론이 되고, 그 추론된 타..

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

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

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

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

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

개요 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..

[ 메모리 관리 ] 각각의 프로세스는 독립된 메모리 공간을 갖고, 운영체제 혹은 다른 프로세스의 메모리 공간에 접근할 수 없는 제한이 걸려있음. 단지, 운영체제 만이 운영체제 메모리 영역과 사용자 메모리 영역의 접근에 제약을 받지 않기 때문에 운영체제에서 메모리를 관함. 또한, 멀티프로그래밍 환경으로 변화하면서 한정된 메모리를 효율적으로 사용해야 했고, 운영체제가 이를 어떻게 관리하는지에 대한 관리방법이 중요해짐 즉, 어떤 프로그램이든 프로세스가 되어 프로세서에 적재되기 위해서는 메모리에 적재되어야 실행이 가능함 따라서 메모리는 중요한 작업 공간이고 한정된 메모리를 다중 프로그래밍 환경에서 이용하기 위해서는 여러 프로세스가 함께 메모리를 사용하므로 효율적인 관리를 해야함 이러한 메모리 관리를 위해 메모리..

1. EC2란 무엇인가? 3. 마무리 ✅ EC2란 무엇인가? Amazon Elastic Computed Cloud의 준말로 AWS 클라우드에서 온디맨드 확장 가능 컴퓨팅 용량을 제공하여 하드웨어 비용 절감 및 빠른 애플리케이션 배포를 목적으로 사용하는 클라우딩 컴퓨팅 서비스 사용한만큼 비용을 지불하기에 Elastic(탄력적)이라는 용어가 붙었으며, 비용뿐만아니라 성능, 용량 또한 자유롭게 조절할 수 있다. 우리는 물리적으로 서버를 구축하여 사용하는 것보다 더욱 빠르고 간편하고 적은 비용을 들이고 효율적으로 서버를 구축하기 위해 클라우딩 컴퓨팅 서비스를 이용할 수 있다. 📌 온디맨드 확장 가능하다? 더보기 사용자가 필요할 때마다 실시간으로 컴퓨팅 리소스를 추가하거나 줄일 수 있다는 의미로 이러한 유연성을 ..