개발하는 너구리

1. 동기 코드 (Synchronous Code)동기 코드는 즉시 실행되고, 완료될 때까지 다음 코드로 진행하지 않습니다.console.log('동기 코드 1');console.log('동기 코드 2');    2. 태스크 큐 (Task Queue)태스크 큐는 setTimeout, setInterval과 같은 비동기 작업의 콜백을 보관합니다. 이 콜백들은 호출 스택이 비어있고 마이크로태스크 큐가 비어있을 때 실행됩니다.console.log('동기 코드 1');setTimeout(() => { console.log('태스크 큐');}, 0);console.log('동기 코드 2');    3. 마이크로태스크 큐 (Microtask Queue)마이크로태스크 큐는 Promise의 then 핸들러, Mutat..

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.먼저 MDN에서는 클로저를 위와 같이 정의하고 있습니다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는 렉시컬 스코프를 따릅니다. const x = 1;function foo () { const x = 10; boo();}function boo () { console.log(x);}foo(); // 1boo(); // 1 위의 코드를 본다면 boo 함수가 출력하는 x가 foo 함수의 지역 변수가 아닌 전역 변수인 x인 것을 알 수 있습니다. 함수 boo가 실행되는 환경에서 스코프가 결정이 된다면 foo 함수 내부에서 정의된 x = 10이 출력될 것이지만, 정의된 위치에 의해 상위..

실행 컨텍스트 실행 컨텍스트(Execution Context)는 JavaScript 코드가 실행될 때 생성되는 환경을 나타냅니다. 이 환경에는 코드가 실행되는데 필요한 여러 정보들이 포함되어 있습니다. 실행 컨텍스트는 스택(Stack) 자료 구조로 관리되며, 가장 최근에 생성된 실행 컨텍스트가 스택의 맨 위에 위치합니다.  실행 컨텍스트는 다음과 같은 요소들로 구성됩니다. Variable Environment (변수 환경)현재 실행 중인 코드에 대한 변수들과 함수 선언이 포함되어 있습니다.전역 컨텍스트의 경우 전역 객체와 전역 변수들이 포함됩니다.  Lexical Environment (어휘 환경)변수 환경과 유사하지만, 스코프 체인(Scope Chain)과 함께 클로저(Closures)를 위한 정보를 ..

이메일계정 연동 회원가입 기능import React, { useState } from 'react';import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';function EmailLogin() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const handleLogin = async () => { try { const auth = getAuth(); await signInWithEmailAndPassword(auth, emai..

ReactReact는 UI 라이브러리로, 동적인 사이트를 구축하는 데 주로 사용됩니다. React를 사용하면 클라이언트 사이드에서 상태를 관리하고, 실시간 데이터 업데이트, 사용자 상호작용 등을 효율적으로 처리할 수 있습니다.Gatsby Gatsby는 정적 사이트 생성기(Static Site Generator)로, 정적 콘텐츠 중심의 사이트를 만드는 데 특화되어 있습니다. 블로그, 마케팅 페이지, 포트폴리오 사이트와 같은 정적 콘텐츠가 많은 사이트에서 뛰어난 성능을 발휘합니다. 그러나 실시간 데이터 처리나 빈번한 업데이트가 필요한 동적 사이트에는 다소 부적합할 수 있습니다.Next.jsNext.js는 React 기반의 프레임워크로, 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 모두 지원합니..

useNavigation, useLocation, useMatch, URLSearchParams useNavigationuseNavigation 훅은 React Router v6에서 제공되며, 라우팅을 위해 사용됩니다. 이 훅은 네비게이션을 수행하고 쿼리 매개변수 및 라우트 파라미터를 업데이트하는 데 사용될 수 있습니다.예시:import { useNavigation } from 'react-router-dom';function MyComponent() { const navigation = useNavigation(); const handleClick = () => { // 다른 경로로 이동 navigation.navigate('/another-route'); // 경로에 파라미터 전달..

문제점axios interceptors를 사용하면서 발생한 문제. 어떻게 보면 중요할수도 있는 개념..어제에 이어 interceptors를 사용해 에러핸들링 구간을 작성하고있었다. 예를 들어 에러 발생 시 특정 컴포넌트로 리다이렉트 시켜줘야 하는 경우가 있었다. 리다이렉트 시키기 위해 useNavigate() 훅을 사용했고, 아무런 의심없이 당연히 될거라는 생각에 두고있었는데 실제로 해당 에러가 발생했고, 내가 원했던 리다이렉트는 진행되지않았다.내가 대신 얻었던 것은 콘솔 창에 떠있는 Hooks can only be called inside of the body of a function component.리액트 프로젝트 내에서는 당연히 Hook을 사용할수있는게 아닌가? 라는 생각이었던 나는 이해가 할수없..

Recoil - SetterOrUpdater SetterOrUpdater는 Recoil에서 상태를 업데이트하는 함수를 지칭합니다. 이 함수는 두 가지 역할을 수행합니다: Setter와 Updater.Setter 함수: Setter 함수는 이전 상태를 완전히 덮어쓰는 역할을 합니다. 이전 상태를 무시하고 새로운 값을 설정하여 상태를 업데이트합니다. 이전 상태를 고려하지 않고 간단히 새로운 값을 설정하는 데 사용됩니다.Updater 함수: Updater 함수는 이전 상태를 기반으로 새로운 값을 생성하여 상태를 업데이트합니다. 이전 상태와 새로운 값을 조합하여 새로운 상태를 생성하는 함수입니다. 이전 상태를 참조하여 업데이트를 수행하므로 이전 상태의 일부를 유지하면서 상태를 업데이트할 수 있습니다. Recoi..