카메라의 타이머 기능 구현이 필요한 상황이 발생했는데요.개발하며 비동기를 포함한 자바스크립트 기본 개념을 오랜만에 복습해 볼 수 있는좋은 시간이었습니다. 처음 문제가 발생한 시점부터 개념을 복습하며 문제를 해결하기까지의과정을 정리해보았습니다.타이머 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 = () => { ..

프론트엔드 개발을 하다보면 useEffect가 사용된 코드를꽤나 자주 목격하게 되는데요.과거 1년차 개발자의 저는 useEffect에 다소 의존적인 개발을 해왔지만2년차인 지금은 최대한 useEffect에 대한 의존도를 줄이려고 시도중입니다. 그렇다면 왜, useEffect를 줄여나가려고 하는 것이고useEffect를 줄임으로서 무엇을 얻었을까요?useEffect에 기반한 개발을 했을 때1. 내가 원하는 동작이 무엇인지 동료가 이해하기 힘들다. 한두개의 useEffect를 사용한다면(= 내용이 간결하다는 전제)그래도 동료가 어떤 방식으로 코드를 작성했구나 라는 흐름 파악이 가능하지만useEffect가 3-4개가 하나의 컴포넌트에 존재한다면? jsx에서 HTML 부분을 보고 함수를 보고 useEffect ..

회원 가입 관련 form에서 동작하던 state와 통신 함수를커스텀 훅으로 분리해 운영했을 때,클릭 이벤트 핸들러에서는 state와 통신이 정상 동작했지만키보드 이벤트 핸들러에서는 통신이 이뤄지고 state의 변경은 되지 않는 오류가 있었습니다.문제 발생 이유: 커스텀 훅의 mutation 함수를 서로 다른 곳에서 참조를 통해 사용했기 때문입니다.한 마디로 하나의 함수로 동작한 것이 아닌 서로 다른 2개의 함수가 각자 동작한것인데요.React 공식 문서의 커스텀 훅 만들기 파트를 보면 자세히 알 수 있습니다.Q.사용자 정의 Hook은 어떻게 독립된 state를 얻는 건가요?A. 각각의 Hook에 대한 호출은 서로 독립된 state를 받습니다.useFriendStatus를 직접적으로 호출하기 때문에 Rea..

알고리즘 문제 풀이 중 소문자나 대문자 구분, 숫자 구분등의 기능을 구현해야 할 때가 있는데요.상황에 따라 어떤 방식을 사용하는 것이 좋을지 알아보기 위해 개념 정리를 해보았습니다. 1. charCodeAt특징- 문자열에만 적용 가능(문자를 10진수 숫자로 치환)- 문자열의 index number를 인자로 사용 가능(해당 문자열의 index range를 넘어가면 NaN을 return)// charCodeAt example"galaxy".charCodeAt(0); // 103"galaxy".charCodeAt(1); // 97"galaxy".charCodeAt(6); // NaN32.charCodeAt(); // syntaxError: Invalid or unexpected token 2. fromC..

Leetcode - 2696. Minimum String Length After Removing Substrings문제를 풀 때 경험했던 문제입니다.당시 저는 문자열에 특정 키워드가 존재하는지에 대한 조건을변수에 할당해 사용하려 했는데, 계속 반복문에서 타임아웃이 발생했습니다.아무리 생각해봐도 문제가 변수 할당밖에 없어 변수에 할당한 조건문을 while문에 직접 추가했더니그제서야 동작하는 것을 확인했는데요.왜 이런 일이 발생하는걸까? 하자마자 바로 잘못을 깨달았습니다.문제 발생 코드var minLength = function(s) { // const hasAB = s.includes('AB'); // const hasCD = s.includes('CD'); while(s.includes(..

알고리즘 문제를 해결하며 알게된 접근 방법 중 하나가 있었습니다.그 동안 저는 숫자와 문자가 섞인 문자열이 있다면 Number(요소)를 통해NaN 값인지, Number 타입의 값인지를 구분해왔는데요.다른 분들의 풀이를 보며 Number 원시 래퍼 객체를 사용하지 않는 방법을 찾았고신기해 이를 공유하고자 합니다.기존에 구분하던 방법const s = "1 box has 3 blue 4 red 6 green and 12 yellow marbles";const extractionNum = s.split(' ').map((item)=> Number(item)).filter((num)=> !isNaN(num));map 메서드 내부에서 Number 원시 래퍼 객체를 사용해주면 string type data는 NaN으..

프로젝트 진행 중 동료 개발자분이 특정 조건에 대하여 삼항 연산자를 즐겨 사용하시는 것을 느꼈는데요.하지만 특정 상황에서의 삼항연산자는 제가 보기가 불편했습니다. 그 이유는 두 개의 조건에 대응한 조건문이 삼항 연산자인데, 세 개의 조건에 대응하여중첩 삼항연산자를 사용하셨기 때문인데요.이에 대해 언젠간 팀원분과 이야기를 나눠보고 싶었고, 팀 컨벤션을 만들어가는 과정에서중첩 삼항 연산자 사용에 애착을 가지셔서 블로그에만 저의 방법을 기록해 봅니다. 제시 조건 01. 함수로 만들어 처리하자처음 제시했던 방법입니다. 일반 삼항 연산자라면 몰라도 중첩 삼항연산자라면 차라리 함수를 생성해내부에서 if 문으로 분기 처리하는 것이 가독성이 좋아 향후 유지보수에 유리할 것으로 판단했거든요.하지만 팀원분의 말씀을 듣고선..

Recoil이란 무엇인가 궁금했다 막연히 클라이언트 상태 관리 라이브러리로만 알고있었다. 하지만 recoil은 react와 닮았다는 것을 아래의 예제를 보며 알게 되었다. 그래서 react 유저라면 사용이 쉽다고 다들 이야기를 한 것이었다. //React의 useState Hook const [state, setState] = useState(); //Recoil의 상태 문법 const [state, setState] = useRecoilState(); 위와 같이 react에서 state를 사용할 때와 동일하게 사용하면 된다. 대신 추가 해줘야 하는 설정이 있는데, 전역에서 사용하는 라이브러리이니만큼 RecoilRoot와 Atom, Selector를 만들어줘야 한다. Atom과 Selector 1) At..