ChatGPT 선생님과 성장하는 독학 개발자의 기록

Debounce와 Throttle`Debounce`와 `Throttle`은 이벤트 핸들러를 효율적으로 관리하기 위한 기술이다. 이 두 가지는 비슷하지만, 사용 목적과 동작 방식에서 중요한 차이점이 존재한다. Debounce연속적으로 발생하는 이벤트를 일정 시간동안 지연시키고, 이벤트가 발생하지 않을 때, 마지막 한 번만 실행하는 기법이다. 주로 사용자가 입력을 빠르게 할 때, 마지막 입력만 처리하고 싶을 때 유용하다. 동작 방식은 다음과 같다.이벤트가 발생할 때마다 지정된 시간(대기 시간) 동안 대기대기 시간동안 추가적인 이벤트가 발생하지 않으면 마지막 이벤트 처리대기 시간동안 추가 이벤트가 발생하면 대기 시간을 초기화하고 다시 대기 아래의 예시 코드를 보고 조금 더 이해해보자.입력 필드에서 검색어를 입..

2024년 08월 백엔드 챌린지 간단 요약 백엔드 포지션의 업무는 무엇일까?단순하게 말해, '프로그래밍'으로 '문제를 해결'해야 하는 직무입니다. 그렇다면, 개발 시장에서 신입보다 경력직이 경쟁력을 갖춘 이유가 무엇일까요?프로그래밍은 문제를 해결하는 것이라고 말했습니다. 그렇기 때문에 기술에 대한 이해도, 개발 환경에 이해도, 도메인 이해도 등 회사에서 개발 환경을 경험하고, 실제로 기능을 만들어 본 개발자가 유리한 것 입니다. 즉, 경력직의 경험은 '회사의 비즈니스 문제를 해결'하는 것에 있습니다. 객체 지향 설계 원칙 준수각 도메인 객체를 명확히 분리하여 책임을 부여해야 합니다.예를 들어, Order 클래스는 주문 자체를, OrderLine 클래스는 개별 주문 항목을, ShippingInfo 클래스는..

Web웹에서 '싱글 스레드(Single-thread)' 환경에서 비동기 호출이 가능한 이유가 무엇일까?바로 '비동기 프로그래밍 모델'과 '이벤트 루프(Event-loop)' 개념 덕북에 가능한 것이다. 이 두 가지 개념을 통해 싱글 스레드 환경에서도 동시에 여러 작업을 수행할 수 있게 된다. 싱글 스레드'싱글 스레드' 환경에서 하나의 스레드만을 사용하여 모든 작업을 처리한다. 즉, 한 번에 하나의 작업만 수행할 수 있다. 브라우저의 자바스크립트 엔진은 기본적으로 싱글 스레드로 동작한다. 이는 동시에 여러 작업을 수행하지 않는다는 것이다. 비동기 호출'비동기 호출'은 어떤 작업이 시작된 후, 그 작업이 완료되기까지 기다리지 않고 다른 작업을 계속 수행하는 방식을 말한다. 비동기 호출의 예로는 서버에 데이터..

DOMReact의 '가상 DOM(Virtual DOM)'과 '일반 DOM(Document Object Model)'은 웹 페이지 렌더링 방식에서 차이점을 가지고 있다. 일반 DOMDOM은 웹 페이지의 구조를 표현하는 객체 모델로, HTML 문서를 객체 형태로 변환해 자바스크립트로 페이지의 요소를 수정하거나 조작할 수 있게 만든다. 브라우저는 DOM을 기반으로 페이지를 그리고, DOM 트리가 변경되면, 브라우저는 전체 페이지를 다시 렌더링하여 변경 사항을 반영한다. 가상 DOMReact의 가상 DOM은 React에서 사용하는 메모리 내의 DOM의 복사본이다. 실제 DOM에 접근하기 전 가상 DOM에서 변화를 계산하고, 최적화된 방식으로 실제 DOM을 업데이트 한다. React는 컴포넌트의 상태가 변경되면 ..

TypeScriptAny | Unknown타입스크립트에서 `Any`와 `Unknown`은 모두 타입이 확실하지 않거나 동적으로 처리되는 값을 다루기 위한 타입이다.그러나, 이 두 타입은 사용하는 방법과 안전성 측면에서 차이점이 존재한다. 공통점타입 검사 우회`Any`와 `Unknown`은 모두 타입 검사에서 벗어나게 해준다. 즉, 컴파일러는 이들 타입을 사용할 때, 타입에 대한 구체적인 검사를 진행하지 않는다. 유연성이들 타입은 특정 타입이 아닌 다양한 타입을 받아들인다. 그렇기 때문에, 동적 타입의 데이터를 다룰 때 유용하다. 차이점안전성`Any` 타입은 타입 체크를 완전히 무시한다. 이 타입으로 지정된 변수는 어떤 값이든 할당할 수 있어 `Any` 타입의 변수에 대해 타입 검사가 이루어지지 않는다. ..

2024년 8월 프론트엔드 챌린지 간단 요약 Turn Over: 정원T/O가 발생하는 이유는 기존 직원이 퇴사하거나, 신규 서비스 런칭으로 인해 신규 채용이 발생하는 경우입니다. T/O에 따라 필요한 사람이 다릅니다.결원발생이전 사람과 비슷한 연차, 비슷한 연봉, 비슷한 실력팀에서 사용중인 Skill Tree를 벗어나지 않는 경우대부분 경력직 채용신규연차, 연봉에 비교적 자유많은 T/O를 가지고 있기 때문에 비교적 쉬운 도전 채용공고에서 '지원 자격', '우대 사항'과 관련되어 최대한 필요한 내용을 담으려고 노력해야 합니다. 주니어 지원자격에서의 프론트엔드 기술력은 다음과 같습니다.최소한의 경력으로 작은 경력이어도 괜찮습니다.팀에서 사용하고 있는 기술스택에 대한 기술력을 갖추고 있으면 좋습니다.개발에 대..

자바스크립트this`this`는 상당히 중요한 개념이다. 현재 실행중인 코드의 문맥(Context)을 참조하는 특별한 키워드로, 함수가 호출되는 방법에 따라 다른 값을 갖는다. 예를 들어, 객체의 메서드, 생성자 함수, 일반 함수 등에서 `this`는 다르게 동작한다. 객체의 메서드에서의 'this'객체의 메서드에서 `this`는 메서드를 호출한 객체를 참조한다. const person = { name: 'Hong' greet: function() { console.log('Hello, ' + this.name); }};person.greet(); // Hello, Hone 여기서 `this.name`은 person 객체의 `name` 속성을 참조한다. 생성자 함수에서의 'this'생성..

2024년 7월 원티드 프리온보딩 백엔드 챌린지 간단 요약 소프트웨어 가치소프트웨어 개발자가 할 수 있는 일은 새로운 가치를 제공할 수 있고, 변화하는 요구사항에 적응할 수 있는 소프트웨어를 만드는 일입니다. 변화에 적응하는 소프트웨어의 특징은 '유연성', '확장성', '유지 보수성'이 있습니다. 의존의존은 어떠한 일을 자신의 힘으로 하지 못하고 다른 어떤 것의 도움을 받아 의지한다는 의미를 갖고 있습니다.(A → B: A가 B의 의존한다) 코드에서는 '객체 참조에 의한 연관 관계', '메서드 리턴타입이나 파라미터로서의 의존 관계', '상속에 의한 의존 관계', '구현에 의한 의존 관계'로 표현할 수 있습니다. 객체 참조에 의한 연관 관계class ClassA { var b: ClassB = ClassB..