전체 글

React 동작 방식

💡 Vanilla Javascript로 DOM을 그릴 때와 React로 DOM을 그릴 때에 대해 간단히 짚어 보자 (1) Vanilla JS로 만든 간단한 카운터 예제 이해를 돕기 위한 코드로 destroy에 대한 부분은 정의하지 않고 간단하게 만들었다. DOM을 그리는 부분은 다양하게 구현이 가능하다. (insertAdjacentHTML, innerHTML 등) 0 Increment Decrement const counterElement = document.getElementById('counter'); const incrementButton = document.getElementById('incrementButton'); const decrementButton = document.getElementB..

Vanilla JavaScript로 React Hooks 구현하기

Hook은 React 16.8부터 도입된 기능으로, 기존의 class component에서 벗어나 functional component로 상태를 관리하고 react의 다른 기능을 사용할 수 있게 한다. 하지만 어떤 원리로 동작하는 걸까? 어떻게 컴포넌트가 계속 리렌더링되고 변경되는 것과 무관하게 상태를 관리하고 가져올 수 있는 걸까? 답은 Closure!! JavaScript Closure lexical environment와 함수의 조합으로 함수 내부의 lexical scope에서 정의한 변수는 함수 바깥에서는 직접적으로 참조하거나 수정할 수 없다 [JavaScript] Closure (클로저) Vanilla JavaScript로 useState 구현 기본적인 구조는 useState를 사용하는 컴포넌트..

프로토타입 (Prototype)과 객체지향 프로그래밍

function Work(indicator) { this._indicator = indicator ?? 0; } Work.prototype.start = function () { setInterval(() => { this._indicator += 10; this._draw(); }, 1000); } Work.prototype._draw = function () {} function WorkA() { Work.call(this, 0); } WorkA.prototype = Object.create(Work.prototype, {}); WorkA.prototype._draw = function () { /* linear progress drawing logic */ }; function WorkB() { W..

[자료구조] 정렬

정렬 알고리즘 키를 항목값의 대소 관계에 따라 데이터 집합을 일정한 순서로 바꿔 놓는 작업을 의미한다. 숫자 : 사전식 순서 또는 크기를 기준으로 나열 문자 : 사전식 순서에 따라 나열 정렬 방법 오름차순 (ascending) : 작은 것에서 큰 것 내림차순 (descending) : 큰 것에서 작은 것 단일 키 (single key) : 하나의 정렬 기준 복합 키 (multi key) : 두 개 이상의 정렬 기준 활용 파일 처리 데이터 베이스 전화번호부 정렬 관련 용어 집합(set) : 정렬할 데이터 셋 전체 원소(element) : 데이터 셋의 datum 부분 집합(subset) : 전체 데이터셋을 어떤 기준으로 분할한 일 부분 키(key) : 정렬의 기준이 되는 특정 값 비교(comparison) ..

[자료구조] 스택과 큐 Stack vs Queue

스택은 “쌓다”라는 의미로, 데이터를 차곡차곡 쌓아 올린 형태의 자료구조이다. 위 사진과 같이 데이터가 순서대로 쌓이며 가장 마지막에 삽입된 자료가 가장 먼저 삭제되는 구조를 가지고 있다. 또한, 스택은 정해진 방향으로만 쌓을 수 있으며, top으로 정한 곳을 통해서만 접근 가능하다. 새로 넣는 자료 혹은 삭제할 때도 top이 가르키는 가장 맨 위에서 진행된다. 용어 top(peek) : 가장 최근에 저장된 데이터 / 가장 먼저 삭제 될 데이터 push : 데이터를 삽입하는 것, 삽입 된 데이터는 삭제시 가장 먼저 삭제 될 데이터가 된다 pop : 데이터를 삭제할 때 사용, 가장 최근에 저장된 데이타가 삭제된다 활용 예시 웹 브라우저 방문기록(뒤로가기) : 가장 나중에 열린 페이지부터 다시 보여준다 역순..

[20240309 Week 1] 시작하는 마음

시작하는 마음 지금까지의 회고 과거 1년 동안 스타트업에서 혼자 개발하며 웹과 앱을 포함한 다양한 프로젝트를 경험했습니다. 이로 인해 기술적으로 많이 성장했다고 느끼고 있지만, 동시에 고지식해 진다는 느낌이 들고 있습니다. 혼자 개발하며 생긴 타협점을 버리고 더 나은 방법을 찾고자 하는 욕구가 생겨, 동료의 추천으로 프론트엔드 1기 코스에 참여하게 되었습니다. 항해 플러스 참여 계기 개발 실력 향상 뿐만 아니라 다양한 사람들과의 교류를 통해 새로운 아이디어와 관점을 얻고자 하는 목적이 큽니다. 혼자서만 생각하고 개발하는 것이 아니라 다양한 의견을 수용하며 성장하고자 하는 욕구가 있습니다. 향후 5년뒤 커리어 방향성 5년 뒤에는 프론트엔드 개발자로서 성장하고, 원하는 회사에서 주요한 역할을 맡아 일하고 싶..