01. ReactJS Build
React 프로젝트는 빌드 프로세스를 사용한다. 근데 왜 React는 왜 Build 과정, 즉 코드 변환이 필요할까? 두가지 이유에 대해 알아보자.
① 리액트는 JSX 문법으로 작성된다.
- JSX : 자바스크립트 또는 타입스크립트 파일에 작성된 HTML 코드를 의미
- Build : JSX파일 → HTML 파일로 변환하는 과정
브라우저는 HTML/CSS/JS 문서를 파싱하여 화면에 렌더하는 브라우저는 JSX를 이해하지 못한다. 따라서 브라우저가 JSX 코드를 이해하고 실행할 수 있도록 변환하는 과정이 필요하다.
때문에 트랜스파일러인 바벨을 통해 JXS 코드를 브라우저가 이해할 수 있는 JavaScript 코드로 컴파일(트렌스파일)한다.
② 프로덕션 최적화
React 라이브러리는 스스로 작성한 코드를 프로덕션을 위해 최적화되지 않았다, 때문에 create-react-app,vite와 같은 툴을 이용해 프로젝트를 만들면, 자동으로 프로덕트 시 프로젝트에 빌드 프로세스가 포함되어 생성된다.
※ 프로덕트 툴을 사용하지 않는다면, 일일히 빌드 프로세스를 형성해야하는 번거로움이 있다.
💡 읽어 볼 Article
02. 자바스크립트의 오버로딩과 오버라이딩
객체지향 프로그래밍(OOP)의 특징 중 다형성을 지원하는 방법으로 메서드 오버로딩과 메서드 오버라이딩이 있다.
✴︎ 오버로딩(Overloading)
같은 이름의 메서드(함수)를 여러 개 정의하고, 매개변수의 유형과 개수에 따라 다양한 유형의 호출에 응답할 수 있도록 하는 기술
하지만 자바스크립트는 함수형 프로그래밍을 지향하는 언어로, 문법적으로 오버로딩을 제공하고 있지 않다.
👉 대신 생성자 함수를 이용해 일반 객체지향 언어의 클래스를 모방하여 오버로딩을 구현할 수 있다.
• 문법
자바스크립트에서는 매개변수 정보를 담고 있는 arguments를 이용해 오버로딩을 흉내낼 수 있다.
오버로딩은 함수와 메서드에서 동일하게 사용할 수 있다.
function 함수() {
arguments 객체 활용
}• 자바스크립트 오버로딩 예제
arguments 객체에 담긴 매개변수 값을 매개변수 개수만큼 반복한 코드
function sum() {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
console.log(sum(10, 20)); // 30
console.log(sum(10, 20, 30)); // 60
console.log(sum(10, 20, 30, 40)); // 100
console.log(sum(10, 20, 30, 40, 50)); // 150✴︎ 오버라이딩(Overriding)
상위 클래스의 메서드를 하위 클래스가 상속받아, 이를 재정의해서 사용하는 기술
주로 다음과 같은 경우 사용한다.
- 부모 클래스의 기능을 사용하지 않고, 자식 클래스에서 구현한 기능을 사용하고 싶은 경우
- 부모 클래스의 기능을 자식 클래스에서 확장하고 싶은 경우
• 문법
부모 클래스의 기능 중 재정의(오버라이드)하고자 하는 기능을 자식 클래스에서 똑같은 이름으로 만들어 구현한다.
부모컴포넌트.prototype.부모메서드 = fucnction() {}
자식컴포넌트.prototype.부모메서드 = function() {}• 자바스크립트 오버라이딩 예제
실행 결과, 더 이상 부모 클래스의 method1() 메서드가 동작하지 않고, 자식 클래스에서 작성한 method1()가 동작하는 것을 확인할 수 있다.
이처럼 부모 클래스의 기능을 직접 수정하지 않고, 해당 기능을 재정의할 때 메서드 오버라이드를 사용한다.
// 부모 클래스
function MyParent() {
this.property1 = 'data1';
console.log('MyParent');
}
MyParent.prototype.method1 = function () {
console.log('property1 = ' + this.property1);
};
// 자식 클래스
function MyChild() {
console.log('MyChild');
}
// 부모 클래스 상속하기
MyChild.prototype = new MyParent();
// 생성자 설정
MyChild.prototype.constructor = MyChild;
/**
* ------------------
* 메서드 오버라이드
* ------------------
**/
MyChild.prototype.method1 = function () {
console.log('프로퍼티 1은 = ' + this.property1 + ' 입니다.');
};
// 자식 인스턴스 생성
var child = new MyChild();
// 메서드 호출
child.method1();
// 콘솔창 결과
// MyParent
// MyChild
// 프로퍼티 1은 = data1입니다.
출처: https://webclub.tistory.com/404 [Web Club:티스토리]이 밖에도 부모 클래스의 기능을 지식 클래스에서 확장하는 코드도 구현할 수 있다!
03. 선언형(함수형) 프로그래밍 vs 명령형 프로그래밍
선언형 프로그래밍은 What(무엇을 할건지)을, 명령형 프로그래밍은 How(어떻게 할지)를 표현한다.
🍉 선언형 프로그래밍
함수형 프로그래밍도 선언형 프로그래밍의 일종이다.
- 개발자가 무엇을 하는지에 더 관심을 가지는 것이다.
기계의 작동 모델보다개발자의 정신 모델에 더 부합하는 프로그래밍을 지향한다.- 선억적 문장으로 프로그래밍한다.
- 제어 흐름, 알고리즘을 설명하지 않고, 그 연산 논리를 표현하는 패러다임이다.
🍓 함수형 프로그래밍
함수형 프로그래밍은 프로그램이 상태의 변화 없이 데이터 처리를 수학적 함수 계산으로 취급하고자 하는 패러다임이다.
- 순수 함수의 조합으로 프로그래밍하며, 최종 output이 발생할 수 있도록, 순수 함수들을 엮어서 호출한다.
- 문이 아닌 식이나 선언으로 수행되는 선언형 프로그래밍 패러다임을 따른다.
👉함수형 프로그래밍에 대해 더 알고 싶다면?
🥝 명령형 프로그래밍
프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임이다.
- 명령형 프로그램은 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다.
※ 참고자료
