React 에서 setInterval, timer 사용하는 법 리액트 JS TS

위와 같은 기능을 구현하기 위해서 setInterval()을 사용할 필요가 있었다. 리액트에서 setInterval()을 사용하기 위해선 useEffect를 사용하면 된다. function HomeBanner({ backScreenData }: { backScreenData: ITrending[] }) { const [order, setOrder] = useState(1); const [isPlay, setIsPlay] = useState(true); const handleAfterClick = () => { setOrder((prev) => (prev + 1 === 4 ? 0 : prev + 1)); }; const handleBeforeClick = () => { setOrder((prev) => (..

• format_list_bulleted 개발관련/React
• · 2023. 6. 22.
• textsms

하루 30분 모던 자바스크립트 딥 다이브. 함수와 일급 객체

일급 객체 일급 객체란 무명의 리터럴로 생성할 수 있다. 즉 동적으로, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 함수는 일급 객체이다. 일반 객체와 동일하게 사용할 수 있다. 함수 객체의 프로퍼티 arguments 프로퍼티 arguments 프로퍼티의 값은 arguments 객체이다. 함수 호출 시 전달된 인수를 저장하는 순회 가능한 유사 배열 객체이다. 지역 변수처럼 사용된다. 매개변수의 개수보다 인수를 더 많이 전달한 경우 초과된 인수는 무시된다. 하지만 암묵적으로 arguments 객체의 프로퍼티로 보관된다. 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다. 유사 배열..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 6. 21.
• textsms

하루 30분 모던 자바스크립트 딥 다이브. 생성자 함수에 의한 객체 생성

생성자 함수 객체 리터럴에 의한 객체 생성 방식의 문제점 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다. 생성자 함수에 의한 객체 생성 방식의 장점 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다. function Circle(radius){ this.radius = radius; this.getDiameter = function () { return this.radius*2; } } const circle1 = new Cicle(5); cosnt circle2 = new Circle(10) 생성자 함수의 인스턴스 생성 과정 인스턴스 생성과 this 바..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 6. 20.
• textsms

하루 30분 모던 자바스크립트 딥 다이브. 프로퍼티 어트리뷰트

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. 이중 대괄호 ([[…]]) 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드에 직접적 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. ex) [[Prototype]] 내부 슬롯은 __proto__를 통해 간접적으로 접근 가능. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티 상태를 나타내는 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 값 [[Value]] 값의 갱신 가능 여부 [[W..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 6. 19.
• textsms

하루 30분 모던 자바스크립트 딥 다이브. let, const 키워드

let 키워드 변수 중복 선언 금지. 블록 레벨 스코프 변수 호이스팅 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 이는 아니다. let foo = 1; { console.log(foo) //Referenc Error let foo - 2; } b. 변수 호이스팅이 발생하여 위와 같은 결과가 나타난다. let 키워드로 선언한 변수는 “선언 단계”와 “초기화 단계”가 분리되어 진행된다. 스코프의 시작지점 부터 초기화 지점까지 변수를 참조할 수 없는 부분을 TDZ(Temporal Dead Zone)이라 한다. var 키워드로 선언한 전역변수, 전역 함수, 암묵적 전역은 전역 객체 window의 프로퍼티가 된다. 하지만 let 키워드로 선언한 전역 변수는 전역 객체의 프..

• format_list_bulleted 개발관련/하루 30분 모딥다
• · 2023. 6. 16.
• textsms

CSS 반응형 사각형 만들기. Responsive Square with CSS

How to Create a Responsive Square with CSS I needed to create a square element that would maintain its square shape as it responsively resized to a changing window size. spin.atomicobject.com 위의 글을 참고하였습니다 너비를 알 때 높이 지정 없이 반응형 사각형 만들기 CSS의 너비, 높이 값을 %값으로 적용함으로 써 반응형 요소를 만들 수 있는데, 정확한 %값을 알지 못하는 경우가 많다. 그럴경우 반응형 사각형을 만드는 일이 까다롭게 느껴져 방법을 찾았다. width값을 지정한다. 원하는 요소의 width값을 %로 지정하여 요소의 원하는 크기를 설정한다...

• format_list_bulleted 개발관련/CSS
• · 2023. 6. 16.
• textsms