CS겸 취준까지

프록시(Proxy)Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로,가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달 되기도 함 Proxy의 사전적 뜻은 '대리인', '대리'라는 뜻으로 자바스크립트에서도 대리인의 역할을 수행함 프록시 객체(Proxy object)는 대상 객체(Target object) 대신 사용됨대상 객체를 직접 사용하는 대신, 프록시 객체가 사용되며 각 작업을 대상 객체로 전달하고 결과 다시 코드로 돌려줌 이러한 방식을 통해 프록시 객체는 자바스크립트의 기본적인 명령에 대한 동작을 사용자 정의 가능하도록 함객체 자체가 처리하는 특정 명령을 정의할 수 있게 되는 것이런 명령의 종류는 속성검색..

ArrayList 란?ArrayList는 배열의 상위호환 버전 정도로 이해하면 된다.기존의 배열만으로는 자료를 담고 관리하는데 약간 불편함이 있어서 나온 것이 ArrayList이기 때문이다.ArrayList는 내부적으로 배열을 사용하여 구현되어 있지만, 동적으로 배열의 크기를 바꿀 수 있다.ArrayList는 초기에는 일정한 크기의 배열을 생성하고, 요소를 추가할 때마다 내부 배열의 크기를 자동으로 조정한다.요소를 추가할 때 내부 배열이 가득 차게 되면, ArrayList는 현재 배열의 크기를 늘려 더 많은 요소를 수용할 수 있는새로운 배열을 생성한다.그리고 기존의 요소들을 새 배열로 복사하고, 새로운 요소를 추가한다.이렇게 배열의 크기를 동적으로 조정하여 ArrayList가 동적으로 요소를 추가, 제거..

JotaiJotai는 React State Management Libarary 중 하나이고 Recoil, Redux와 같이 상태 관리에 필요한 편의 기능을 제공하는 라이브러리Jotai는 Recoil과 같은 Atomic 접근 방식으로 React에서 사용되는 state와 비슷하게 리액트 트리 안에서 상태를 저장하고 관리하는 방법임 Jotai 특징https://jotai.org/ Jotai, primitive and flexible state management for ReactJotai takes a bottom-up approach to global React state management with an atomic model inspired by Recoil. One can build state by c..

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

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