내가 한걸 티내기 위해 만든 블로그
세상을 게으르게 만들기 위해 발전하고 싶은 프론트엔드 개발자입니다. 🚀
npx 사용 bun 사용...
과거엔 클래스형 컴포넌트가 주를 이루었고 클래스형 컴포넌트에는 생명 주기를 메서드로 제공했지만, 현재는 함수형 컴포넌트가 주를 이루고 있다. 함수형 컴포넌트는 생명 주기를 메서드로 제공하지 않지만, 훅을 사용하여 생명 주기를 관리할 수 있다. React 함수형 컴포넌트...
가상DOM은 실제 DOM의 가벼운 복사본이다. 실제 브라우저의 DOM을 직접 조작하는 대신, 메모리 상에 가상의 DOM 트리를 만들어 작업산 후 필요한 변경사항만 실제 DOM에 적용하는 방식이다. 1. 초기 렌더링: 애플리케이션이 처음 로드될때 실제 DOM의 가상 표현...
Props Drilling은 React와 같은 컴포넌트 기반 프레임워크에서 발생하는 패턴으로,상위 컴포넌트에서 깊이 중첩된 하위 컴포넌트로 데이터(props)를 전달하기 위해 중간에 있는 여러 컴포넌트들을 통과시키는 과정을 말한다. 예를 들어 다음과 같은 컴포넌트 구조...
두가지 방법이 있다 한가지는 부모가 가지고 있는 상태를 조작할 수 있는 리모콘을 만들어 자식에게 전달하는 방식 다른 하나는 contextAPI 혹은 다른 상태 관리 프로그램을 활용해 데이터를 전달하는 것이다. 리엑트는 기본적으로 state와 props로 이루어져 있다....
props 와 state 둘다 데이터를 관리하기 위한 값이다. State는컴포넌트 내부에서 관리되는 데이터로, 컴포넌트의 렌더링에 영향을 주는 동적인 값이다. 컴포넌트 내부에서 생성되고 관리된다. 변경 가능(mutable)아며, 상태가 변경되면 컴포넌트가 다시 렌더링된...
엘리먼트는 UI를 구성하는 가장 작은 단위로, 화면에 표시하려는 것을 기술한다. 정의: 화면에 표시되는 실제 DOM 노드나 React와 같은 프레임워크에서는 가상 DOM 노드를 의미한다. 특성: 엘리먼트는 일반적으로 불변(immutable)이다. 즉, 생성된 후에는 자...
Flux 패턴은 Facebook(현 Meta)에서 개발한 단방향 데이터 흐름 아키텍처 패턴이다. 복잡한 UI를 가진 웹 애플리케이션에서 데이터 흐름을 관리하기 위해 만들어 졌으며, 특히 React와 함께 사용하기 위해 설계되었다. 1. 단방향 데이터 흐름: 데이터는 항...
자바스크립트는 기본적으로 '단일 스레드'언어이다. 이는 한 번에 하나의 작업만 수행할 수 있다는 의미이다. 그러나 웹 애플리케이션에서는 데이터 가져오기, 파일 읽기/쓰기 등 시간이 오래 걸리는 작업이 많이 있다. 이러한 작업을 동기적으로 처리한다면, 작업이 완료될 때까...
자바스크립트 엔진 자체는 싱글 스레드 기반으로 동작하여 한번에 하나의 작업만 처리할 수 있는 콜 스택 을 갖는다. 하지만 자바스크립트가 실행되는 환경(웹 브라우저나 Node.js)은 자바스크립트 엔진 외에도 비동기 작업을 처리하는 별도의 API(Web API 또는 C+...
자바스크립트의 모든 객체는 자신의 원형(Prototype) 이 되는 다른 객체와 내부적으로 연결되어 있다. 이 연결댄 객체를 '프로토타입 객체'또는 간단히 '프로토타입'이라고 부른다. 객체는 이 프로토타입으로부터 속성(property)과 메서드(method)를 상속받을...
this는 함수가 호출될 때 해당 함수가 속한 실행컨텍스트(Execution Context)를 가리키는 특별한 키워드 이다. 중요한 점은 this의 값은 함수가 어디서 선언되었는지가 아니라, 어떻게 호출되었는지에 따라 동적으로 결정된다는 것이다. 이는 렉시컬 스코프(선...
콜 스택은 함수 호출을 추적하기 위해 자비스크립트 엔진이 사용하는 LIFO(Last-in, First-out) 구조의 메모리 영역이다. 코드가 실행되면서 함수가 호출되면, 해당 함수의 실행 컨텍스트가 생성되어 콜 스택의 맨 위에 쌓인다(push). 함수 실행이 완료되어...
실행 컨텍스트는 Javascript 코드가 실행되는 환경에 대한 추상적인 개념이다. 코드가실행될 때마다 자바스크립트 엔진은 해당 코드의 실행 환경을 나타내는 실행 컨텍스트를 생성하고 관리한다. 실행 컨텍스트는 코드가 실행되는 데 필요한 모든 정보(변수, 함수 선언, 스...
클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합이다. 간단하게 함수가 자신이 생성될 때의 환경(변수)을 기억하는 현상을 말한다. 클로저는 자바스크립트의 핵심 개념 중 하나로, 함수형 프로그래밍 패러다임과 다양한 디자인 패턴을 ...
스코프는 변수, 함수, 객체 등 식별자(identifier)에 접근하거나 참조할 수 있는 유효 범위를 의미한다. 즉, 코드가 특정 변수에 접근할 수 있는지 여부를 결정하는 규칙이다. 자바스크립트의 스코프는 주로 렉시컬 스코프(Lexical Scope)를 따르는데, 이는...
두 연산자 모두 값을 비교하지만, 비교 방식에 차이가 있다. 예측 불가능한 타입 변환으로 인한 버그를 피하기 위해, 거의 항상 === (엄격 동등성 비교)를 사용하는 것이 좋다. ==는 타입 변환 규칙을 정확히 이해하고 특별한 의도가 있을때만 제한적으로 사용해야 한다....
라이브러리는 도구 상자와 같다. 개념: 특정 기능을 수행하는 코드 모음 사용 방식: 필요할 때만 꺼내서 사용함 주도권: 개발자가 주도권을 가짐(내가 필요할 때 사용) 프레임 워크는 집의 기초 구조와 같다. 개념: 애플리케이션 개발을 위한 뼈대, 구조 사용 방식: 프레임...
이 세가지 상태 전부 변수가 값을가지지 않거나 존재하지 않는 상황을 나타내지만, 의미와 발생 원인이 다르다. 이 세가지 상태를 혼동하면 코드에서 예상치 못한 오류가 발생할 수 있다. 특히 API 응답이나 함수의 반환 값을 다룰 때 null과 undefined를 변확히 ...
Javascript의 데이터 타입은 크게 두 가지로 나눌 수 있다. 1. 원시타입(Primitive types) 고정된 크기의 메모리에 저장되며, 값 자체가 변수에 직접 할당된다. 원시 타입은 불변한다(immutable) string: 문자열 number: 숫자(정수 ...
var,let,const는 전부 변수 선언 키워드이지만 중요한 차이점이 있다. let과 const는 var의 단점(함수 스코프, 재선언 가능 등)을 보완하기 위해 ES6에서 도입되었다. 블록 스코프와 재선언/재할당 규칙은 코드를 더 예측 가능하고 안전하게 만들어주기 때...
호이스팅은 자바스크립트 엔진이 코드를 실행하기 전에 변수, 함수, 클래스의 선언 부분을 해당 스코프의 최상단으로 끌어올리는 것처럼 동작하는 현상을 말한다. 엔진이 코드를 해석할 때 선언부를 먼저 처리하기 때문에 마치 끌어올려진 것처럼 보인다. var 변수 선언(var ...
선언, 초기화, 할당 세 단계를 구분하는 것은 호이스팅과 시간적 사각지대(TDZ)같은 개념을 이해하는 데 기초가 된다. 변수가 어떻게 생성되고 언제 접근 가능한지를 정확히 아는것은 코드의 동작을 예측하고 오류를 피하는데에 중요하다. 1. 선언(Declaration) 변...
HTTP(Hypertext Transfer Protocol)는 웹에서 데이터를 주고받기 위한 애플리케이션 계층 프로토콜 이다. 클라이언트와 서버 간의 통신을 담당한다. 무상태성: 각 요청은 독립적으로 처리되며, 서버는 이전 요청에대한 정보를 저장하지 않는다. 비연결성:...
CSSOM(CSS Object Model)은 웹 브라우저가 CSS를 처리하는 방식을 나타내는 API이다. DOM(Document Object Model)이 HTML문서의 구조를 표현한다면, CSSOM은 CSS 스타일 규칙을 표현한다. 웹페이작 로드될 때 브라우저는 HT...
DOM(Document Object Model)이란 HTML,XML 같은 마크업 문서를 위한 프로그래밍 인터페이스 이다. DOM은 문서를 노드와 객체로 표현해 웹 페이지의 구조화된 표현을 제공한다. DOM은 개발자가 Javascript를 통해 웹 페이지의 콘텐츠, 구조...
브라우저에 웹사이트가 화면에 나타나기 까지엔 다음과 같은 과정이 필요하다 1. URL 입력 사용자가 링크를 클릭하거나 주소창에 웹 주소를 입력한다. 2. DNS(Domain Name System) 조회 입력받은 도메인 이름을 IP 주소로 변환합니다.이때 DNS 캐시를 ...
웹사이트는 사용자의 요청에 따라 웹사이트를 구성하는 Javascript를 통해 조작이 가능해 진다....
웹사이트는 렌더링이 필요한 이유가 어겨기에 있다고 생각해도 될것같다. 브라우져가 HTML과 CSS를 이해하고 프로그램화 하는 과정이 렌더링 과정이라고 생각된다. 이 브라우저의 렌더링 과정중 브라우저가 Javascript를 통해 조작이 가능하도록 이해하고 인터페이스를 만...
웹 사이트가 브라우저 상에서 우리의 눈으로 보여지기 위해서는 우리가 원하는 모습을 브라우저에게 인식시켜야 한다. 이 문서의 구조와 형태를 브라우저에게 이해시키는 언어가 바로 _HTML]]_ 과 [[CSS]]이다. HTML 의 경우 문서가 어떤 구조로 구성되어 있는지 브...
웹사이트에서 HTML]]과 [[CSS]]가 각각 내용의 구조를 정하고 그 내용이 어떤 모습으로 표현되어야 하는지 브라우져에게 설명하는 언어라면 Javascript 는 웹사이트와 사용자가 상호작용을 할 수 있도록 하는 언어이다. [[변수의 선언,초기화,할당의 차이점은 무...
리액트(React)는 Facebook(현재 Meta)에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 설계되었다. 1. 컴포넌트 기반 아키텍처 리엑트는 UI를 독립적이고 재사용 가능한 조각(컴포넌트)으로 나눈다. 각 컴포넌트는 자체...
이번 프로젝트는 물류 서비스 회사인 '아임유어박스'의 웹사이트를 개발하는 외주 작업이었습니다. 기존 사이트의 여러 문제점을 개선하고 현대적인 기술 스택으로 재구축하는 것이 주요 목표였습니다. 웹사이트를 개발하면서 가장 큰 결정 중 하나는 헤드리스 CMS 선택이었습니다....
크롬 확장 프로그램을 통해 트레이딩 도구를 개발하는 도중, 한 가지 큰 문제가 있었다. 크롬 확장 프로그램은 일반 앱처럼 보이지만, 사용자가 팝업 창이나 사이드바를 닫으면 확장 프로그램의 세션이 완전히 종료된다. 이로 인해 사용자가 입력했던 데이터나 현재 보고 있던 화...
강의 주소 프로그래밍과 논리수학...
목표: 취업을 하기위한 알고리즘 공부 어디서 어떻게 시작해야 발전할 수 있는지 모르기 때문에 다른 사람들을 먼저 찾아보고 따라해보면서 공부해 나간다. 인터넷검색을 통해 내가 실천할 수 있을만한 것들을 선별하여 정리하자 출처:Velog 포스트 따라하기 쉽게 뭐부터 풀어라...
공식 홈페이지:Home | Aider > [!quote] > Aider lets you pair program with LLMs, to edit code in your local git repository. Start a new project or work with a...
복잡하게 생각하지 말고 단순하게 동적 사이트와 정적 사이트를 구분한다면 페이지의 렌더링 (화면 렌더링 아님) 시기 이다. 정적 사이트는 HTML이 빌드 타임에 미리 생성되고 수정되지 않는다. 하지만 동적 사이트의 경우 클라이언트 측이든 서버 측이든 요청에 따라 HTML...
앞선 포스트에서 살펴본것처럼 내가 중요하게 생각한 블로그의 조건은 다음과 같았다. 1. 블로그 포스팅과 노트 작성의 흐름이 자연스럽게 연결될 것 2. 노트와 블로그 포스트가 분리되어, 원하는 노트만 포스팅할 수 있을 것 3. 포스팅 시 블로그의 구조를 내가 직접 정의할...
개발자로서 내가 한 일을 기록하고, 이를 공유할 수 있는 공간이 필요했다. 여러 블로그 플랫폼이 있지만, 작성한 글을 복사해서 붙여넣어야 한다는 점이 번거로웠다. 이 과정에서 블로그 운영이 기록의 목적이 아니라 포스트를 만들기 위한 기록처럼 느껴지는 문제가 발생했다. ...
