분류 전체보기

아이템 우측 하단에 원을 클릭 시 해당 원의 크기가 커지며 화면을 덮는 애니메이션을 구현하였습니다.import { motion } from "framer-motion";import React, { useState } from "react";import styled from "styled-components";const Item = () => { // 원 클릭 여부 state const [isClick, setIsClick] = useState(null); return ( // 아이템 {/** * 아이템 우측 하단 원 * 클릭 시 isClick 상태가 변경된다. * animate는 isClick이 true일 경우 애니메이션 객체를 전달하도록 설정..

질문1 js는 단일 스레드라 한번에 하나의 작업만 수행할 수 있다.그렇다면 콜스택에는 절대로 2개 이상의 작업이 쌓이지 않는 것이 아닌가?ex) 콜스택에 쌓기 -> 콜스택 실행 -> 콜스택에 쌓기 -> ...반복 답변JavaScript는 단일 스레드이기 때문에 한 번에 하나의 작업만 실행할 수 있습니다. 하지만 콜 스택에는 여러 작업이 동시에 쌓일 수 있습니다.콜 스택은 현재 실행 중인 함수와 해당 함수에서 호출한 다른 함수들을 추적하는 데 사용됩니다. 아래는 콜 스택이 어떻게 작동하는지 설명하는 예제와 함께 좀 더 자세한 설명입니다. 예제 코드 function first() { console.log('First'); second(); console.log('First End');}function ..

https://velog.io/@chchaeun/%ED%8C%8C%EC%9D%BC-%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%B2%A8%EB%B6%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8 파일 Drag and Drop 기능을 구현하자!사용자 경험 개선을 위한 파일 Drag and Drop 기능 추가velog.io  import React, { useState } from "react";import styled from "styled-components";import dndImage1 from "../assets/DnDBox1.svg";import dndImage2 from "../assets/DnDBox2.svg";import uploadIcon1 from "..

커스텀 훅이란?커스텀 훅(Custom Hooks)은 React의 훅(Hooks) 기능을 사용하여 여러 컴포넌트에서 공통으로 사용되는 로직을 재사용할 수 있도록 해주는 함수입니다.React의 내장 훅(`useState`, `useEffect`, `useContext` 등)을 결합하여 새로운 훅을 만들 수 있습니다.이러한 커스텀 훅은 일반 함수와 비슷하게 동작하지만, React 훅의 규칙을 준수합니다. 커스텀 훅의 목적은 복잡한 로직을 하나의 컴포넌트에 집중시키지 않고, 독립된 함수로 분리함으로써 코드의 가독성과 유지보수성을 높이는 것입니다. 커스텀 훅 사용 이유1. 코드 재사용성 : 여러 컴포넌트에서 공통으로 사용하는 로직을 하나의 커스텀 훅으로 만들면, 중복 코드를 줄이고 재사용성을 높일 수 있습니다. ..

질문REACT_APP_FIREBASE_API_KEY에 API 키 값을 대입하면 별도의 import 과정 없이 process.env.REACT_APP_FIREBASE_API_KEY로 해당 변수를 호출할 수 있다.어떻게 이럴 수 있는지 설명해주고 해당 환경변수가 정확히 컴퓨터 어느 경로에 저장되는 지 알려줘. 답변(GPT-4o)React 애플리케이션에서 환경 변수를 사용하면 `process.env.REACT_APP_*` 형태로 접근할 수 있습니다. 이는 Create React App (CRA)에서 제공하는 환경 변수 관리 방식 덕분입니다. 환경 변수가 작동하는 방식과 저장 위치를 설명하겠습니다. ### 어떻게 `process.env.REACT_APP_*` 형태로 접근할 수 있는가? 1. **Create Re..

기본 개념1. 비동기 함수는 항상 Promise 객체를 반환한다.2. 비동기 함수의 return 문은 해당 Promise 객체가 해결되거나 거부될 때 반환할 값을 결정한다.const fetchData = async () => { const data = await getDocs(collection(db, "users")); return data;};const data = fetchData();console.log(data); // >> 프로미스 객체가 출력된다. 예시 상황FE개발자 A가 Firestore(DB)를 사용하고 있다.A는 DB에서 모든 유저 데이터를 가져와 1차원 배열로 반환하는 커스텀훅(또는 모듈)을 개발한다. const useGetAllUser = async () => { const..

rebase를 활용한 협업 예시1. main에서 프로젝트 세팅을 마치고 브랜치 A, B, C를 생성한다.2. 브랜치 A, B, C가 기능 개발을 시작한다.3. A가 기능1 개발을 완료한다.4. main에서 A를 merge한다.현재 main에는 기능1이 포함되어있다.5. B가 기능2 개발을 완료한다.현재 B의 베이스(base)는 main의 "프로젝트 세팅" 커밋이다.따라서 B브랜치는 기능1을 포함하고 있지 않다.6. B를 기능1을 포함한 상태로 만들기 위해 base를 main브랜치("Merge 기능1")로 리베이스(rebase)한다.현재 B에는 기능1,2 가 포함되어있다.7. main에서 B를 merge한다.현재 main에는 기능1,2가 포함되어있다.8. C가 기능3 개발을 완료한다.현재 C의 베이스(ba..