Ella 프론트엔드일지

0. class - ES6 의 클래스가 도입되기 이전에는 생성자 함수로 프로토타입 기반의 인스턴스를 생성했다. - ES6 클래스 문법은 좀더 Java 스럽게 객체지향적으로 표현하기 위해 추가된 새로운 문법이다. - 결국엔 object 를 여러개 만들기 위해서 class 를 쓰는 것이다. 1. class 만드는 방법 🔸class 를 선언하는 방법 class 에는 constructor 라고 하는 키워드를 넣어야한다. 1)클래스 선언문 class MySelf { constructor(age, height) { this.age = age; this.height = height; } } 2) 변수에 클래스를 선언(기명 클래스 표현식) const MySelf = class MySelf { constructor(ag..

0. font-awesome 좋은 점 이미지처럼 보이지만, 폰트라서 css로 색깔 크기도 제어할 수 있다. 1. font-awesome 방법 여기로 접속해서 로그인 하자 https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com account 클릭 -> Kits 의 settings 클릭 체크 한 후에 저장함 Set Up 에 보면 script 태그 복붙해서 html head 안에 넣는다. 그리고 나서 내가 사용하고 싶은 아이콘..

0. strict 모드 오타나 문법 지식의 미비로 인한 실수를 줄여 안정적인 코드를 생산하기 위해 ES5에 추가된 모드이다. strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다 🔸사용 방법 스크립트 최상단에 "use strict" 를 위치시킨다. "use strict"; 🔸strict 모드를 통해 예방할 수 있는 것 1️⃣암묵적 전역변수 예방 - 변수를 선언하지 않고 사용하는 암묵적인 전역 변수를 방지합니다. - 변수를 명시적으로 선언하고 스코프를 지정함으로써 예기치 않은 변수 선언을 방지하고 코드의 가독성과 유지보수성을 향상시킵니다. 2️⃣ 함수의 동일한..

해당 게시글은 맨 밑의 참고자료 링크를 기반으로 재구성한 것입니다. 0. 객체지향 프로그래밍 객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. (모든 것이 객체로 그룹화된다) 사람이 세계를 보고 이해하는 방법과 흡사하다. 현대의 프로그래밍 언어 대부분이 해당한다(Java,C++,C# 등) (프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍) 이미지 출처 : https://www.reddit.com/r/ProgrammerHumor/comments/418x95/..

0.프로토타입 프로토타입은 객체가 다른 객체로부터 속성과 메서드를 상속받기 위한 템플릿 역할을 한다. 자바스크립트에서 모든 객체는 프로토타입을 가지며, 이를 통해 다른 객체의 속성과 메서드를 공유할 수 있다. 🔸프로토타입 객체 자바스크립트에서 어떤 객체는 반드시 부모 객체를 가지며, 이 부모객체를 프로토타입이라고 한다. 즉, 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)을 제공한다. 프로토타입을 상속받은 하위(자식) 객체는 상위(자식) 객체의 모든 속성(프로퍼티)를 사용할 수 있다. 🔸[[Prototype]] : 프로토타입 링크 프로토타입 객체를 가리키는 내부슬롯으로 사용자가 직접 접근 X, __proto__접근자를 통해 간접적으로 접근 가능 🔸__prot..

0. useCallback - 렌더링 성능을 최적화 해야하는 상황에서 사용하는 Hook으로, 만들어놨던 함수를 재사용할 수 있어서 메모리 사용량을 줄일 수 있다. - 리액트 컴포넌트가 자주 렌더링 되거나, 함수가 큰 자원을 사용할 때 중요하다. 🔸useCallback 사용 방법 const memoizedCallback = useCallback(콜백함수, 의존성 배열); useCallback은 첫 번째 인자로 넘어온 콜백 함수를, 두 번째 인자로 넘어온 의존성배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다. const add = () => x + y; // useCallback을 사용하면 아래와 같이 표현하기 const add = useCallback(() => x +..