ES5까지의 역사 - varES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드의 특징이자 let, const가 나오게 된 근본적인 원인이 된 독특한 작동 방식을 알아보자. 변수 중복 선언var 키워드는 중복 선언이 가능하다.var x = 10;console.log(x); // 10var x = 20;console.log(x); // 20위 예제에서는 var 키워드로 x 변수를 중복 선언했다. 이렇게 중복 선언하게 되면 초기화문 유무에 따라 다르게 동작한다.초기화문이 있는 변수 선언문: 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. 즉, 새로운 값으로 기존 변수를 덮어쓴다.초기화문이 없는 변수 선언문: 자바스크립트 엔진은 이 선언문을 무시한다..

자바스크립트에서는 변수를 선언할 때 데이터 타입을 명시하지 않는다. 유연하게 코드를 작성할 수 있지만 데이터 타입이 중요한 이유가 있다.  메모리 공간의 확보와 참조프로그램에서 값을 저장하고 참조하려면 메모리 공간이 필요하다. 값의 타입을 알면 필요한 메모리 공간의 크기를 결정할 수 있다. 예를 들어, 자바스크립트에서 아래와 같이 변수를 선언하고 숫자 값을 할당하는 경우를 보자.let a = 10; 이 코드가 실행되면 컴퓨터 내에서 다음과 같은 작업이 이루어진다.숫자를 저장하기 위한 메모리 공간 확보확보된 메모리 공간에 숫자 10을 2진수 형태로 저장 이 때 자바스크립트 엔진은 숫자 타입의 값 10을 저장하기 위해 필요한 메모리 공간의 크기를 결정한다. 값을 저장하는 경우자바스크립트 엔진은 데이터 타입에..

큰 React 프로젝트를 구성할 때 코드의 관리와 가독성을 높이기 위해 각 디렉토리별로 index.ts 파일을 활용하는 전략이 많이 사용된다. 이 방식을 활용하면 여러 모듈을 효과적으로 관리하면서, 프로젝트의 구조를 조금 더 확실하게 해주어 이번 프로젝트에 도입하게 되었다. 이렇게 했을 때 가지는 이점은 아래와 같다. 1. 깔끔한 임포트디렉토리 내에 위치한 index.ts 파일은 외부에서 해당 디렉토리를 지칭하는 이름만으로 모듈을 임포트할 수 있게 해줌으로써 비교적 간단해진다. 기존에 사용하던 방식에서는 상대 경로가 더 길어질 수 있는데 반해, index.ts 파일을 사용하면 import 구문이 조금 더 깔금해지고 관리하기 쉬워진다.// index.ts가 없는 경우import { Ch..

컴포넌트 분리는 React 개발에서 기본적인 원칙으로 사용자 인터페이스를 독립적이고 재사용 가능한 부분으로 나누는 것이다. 이 방법론은 외형적인 조직에 관한 것 뿐만 아니라, 애플리케이션의 장기적인 생존성, 유지보수성 및 개발 팀의 효율성에 중대한 영향을 미친다. 향상된 코드 유지보수성 컴포넌트 분리를 위한 가장 설득력 있는 주장 중 하나는 코드 유지보수성에서의 극적인 개선이다. 개발자들이 기능을 별개의 컴포넌트로 분리함으로써 애플리케이션의 한 부분에서의 변경이 의도치 않게 다른 부분에 영향을 미치지 않도록 한다. 이러한 분리는 업데이트와 디버깅을 단순화한다. 왜냐하면 어떤 변경의 범위도 자연스럽게 수정되는 컴포넌트로 한정되기 때문이다. 예시 - 사용자 정보 표시와 편집 기능 및 데이터 가져오기 로직을 ..

컴포넌트 생명주기의 세 단계 리액트 컴포넌트의 생명주기는 마운팅$_{mounting}$, 업데이트$_{update}$, 언마운팅$_{unmounting}$으로 크게 세 가지 주요 단계로 나눌 수 있다. 1. 마운팅 단계 마운팅 단계는 React 컴포넌트의 생명주기에서 컴포넌트가 생성되는 단계이다. 최초로 DOM에 삽입되며 애플리케이션에서 컴포넌트가 시작된다. 이 과정에서 몇 가지 핵심적인 생명주기 메서드가 호출되며 각각의 메서드는 컴포넌트의 초기화와 설정에 필수적인 역할을 한다. constructor(props) constructor 메서드는 컴포넌트의 생성자 함수로, 컴포넌트가 생성될 때 가장 먼저 실행된다. 이 메서드는 컴포넌트의 초기 상태를 설정하거나, 이벤트 핸들러를 바인딩하는 데 주로 사용된다...

React 개발 영역에서 프로젝트의 파일과 디렉토리를 조직하는 방식은 생산성과 애플리케이션의 유지보수성에 상당한 영향을 미칠 수 있음 프로젝트가 확장됨에 따라 잘 고안된 디렉토리 구조는 애플리케이션 아키텍처의 기반이 됨 기본 이해 특정 디렉토리 구조에 대해 뛰어들기 전에, React 프로젝트의 핵심 구성 요소를 파악하는 것이 필수적임 React 애플리케이션은 핵심적으로 서로 상호작용하는 컴포넌트로 구성되어 사용자 인터페이스를 형성함 컴포넌트 외에도 애플리케이션은 상태 관리, 라우팅, 유틸리티 함수, 스타일링을 포함할 수 있음 이러한 요소를 인식하는 것은 프로젝트의 요구에 맞는 조직 전략을 고안하는 첫 단계임 단순한 vs. 복잡한 프로젝트 구조 프로젝트의 폴더 구조의 복잡성은 애플리케이션 자체의 복잡성을 ..

현대 웹 개발의 영역에서, 컴포넌트 기반 아키텍처는 개발자들이 확장 가능하고 유지보수가 용이한 애플리케이션을 구축할 수 있게 하는 핵심 요소로 부상하였다. 이 아키텍처의 핵심에는 컴포넌트라는 개념이 자리잡고 있으며 기능을 캡슐화하는 고립되고 재사용 가능한 UI 조각들을 의미한다. 그러나 애플리케이션이 일관된 전체로 기능하기 위해서는 컴포넌트들이 서로 통신하고 데이터를 공유할 필요가 있다. 여기서 props가 컴포넌트 간 데이터를 전달하는 기본 개념으로 등장한다. 이는 컴포넌트의 재사용성을 향상시킬 뿐만 아니라 애플리케이션 내의 데이터 흐름을 관리 가능하고 예측 가능하게 만든다. 이 글에서는 props의 개념을 기본 사용법부터 처리 기법에 이르기까지 깊이 탐구하고 어떻게 구현되는지를 살펴볼 목표를 가지고 ..