HOC(=고차함수)를 사용해 전역 타이머를 구현해보자
·
Design Pattern
2년 전, 신입으로 인터뷰를 진행하면서 받은 질문 중 하나가 고차 함수였습니다.제대로 답하지 못하자 일급 객체에 대해 알고 있는지 여쭤보셨고,이에 대해서도 답변을 못했던 기억이 있습니다. 그로부터 2년이 지난 지금, 고차 함수 개념을 이용해 타이머 기능을 구현하며다시 한번 고차 함수가 가능한 이유와 일급 객체가 무엇인지 복습할 수 있었습니다. 또한, custom hook과 HOC를 두고 어떤 방식으로 구현해야 할지고민한 이야기도 작성해보고자 합니다.일급 객체와 고차함수와의 연관성일급 객체는 함수가 변수에 할당될 수 있고,함수의 인자로 전달되거나 return 될 수 있는 특성을 의미하는데요.고차 함수는 함수를 인자로 받거나 함수를 반환하는 함수를 말합니다. React에서 컴포넌트는 함수 형태로 작성이 가능..
타이머를 구현하며 JS와 REACT 기본 개념에 대해 되묻다 (feat. 비동기, useRef)
·
JS & REACT
카메라의 타이머 기능 구현이 필요한 상황이 발생했는데요.개발하며 비동기를 포함한 자바스크립트 기본 개념을 오랜만에 복습해 볼 수 있는좋은 시간이었습니다. 처음 문제가 발생한 시점부터 개념을 복습하며 문제를 해결하기까지의과정을 정리해보았습니다.타이머 1차 구현'use client';import { useRef, useState, useEffect } from 'react';import BeforeCamera from '@/components/Camera/BeforeCamera';import PhotoShoot from '@/components/Camera/PhotoShoot';import { Flex } from '@chakra-ui/react';const CameraContainer = () => { ..