전체 글

커스텀 훅이란?커스텀 훅(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..

질문git에 대해 질문할게.git revert가 해당 커밋의 변경내용을 삭제 후 새로운 커밋을 만드는 과정으로 이해했어 맞지?그렇다면 main 브랜치에 커밋 a,b,c,d가 있고(시간순) 현재 head가 d에 위치한 상태에서 커밋 b로 돌아가 어떠한 내용을 추가 후 해당 버전을 e로 커밋하고 싶다면 아래 방법 중 어느것을 선택해야해?추가로 왜 해당 방법을 선택해야 하고 두 방법의 차이점이 무엇인지 설명해줘.1. git revert d, c => 내용 추가 => e 커밋2. git checkout b => 내용 추가 => e 커밋답변(GPT-3.5o)두 방법의 차이점과 각각의 장단점을 이해하면 어떤 방법을 선택할지 결정할 수 있습니다.방법 1: 커밋 d와 c를 revert > 내용 추가 > 커밋 e 생성1..

Create커밋 생성커밋 생성은 3단계 과정으로 진행된다.변경 - 선택 - 커밋각 단계별로 파일이 위치하는 장소를 아래와 같이 명명한다.변경된 파일은 워킹트리에 위치한다.add된 파일(버전관리할 파일)은 스테이지 에 위치한다.커밋한 파일은 레포지토리에 위치한다.// 변경된 모든 파일을 스테이지에 위치시킨다.git add -A // 스테이지의 파일을 레포지토리로 커밋한다.git commit -m "test commit" 브랜치 생성// 브랜치 생성 기본git branch new-branch// 브랜치 생성 후 해당 브랜치로 이동git switch -c new-branch  Read커밋 읽기(커밋으로 이동하기)// 해당 해쉬코드(abjirm0478)의 커밋으로 이동git checkout abjirm0478 ..

명령어// 브랜치 모두 보기git branch// 브랜치 생성(현재 커밋에서 해당 브랜치명의 브랜치 생성)git branch // 브랜치 삭제(해당 브랜치명의 브랜치 삭제)git branch -D // 브랜치 이동(해당 브랜치로 이동)git switch // 브랜치 생성 및 이동(해당 브랜치명의 브랜치를 생성하고 생성된 브랜치로 이동)git switch -c // 커밋 이동(해당 커밋으로 이동)git checkout  활용// A브랜치의 특정 커밋(ex) 해시코드 : ahbg1958)에서 B브랜치 생성git switch Agit checkout ahbg1958git branch B

GitKraken 소개GitKraken은 Git을 시각적으로 관리할 수 있는 GUI(Graphical User Interface) 도구입니다. GitKraken은 Git을 보다 직관적이고 사용하기 쉽게 만들어, 특히 복잡한 브랜치 구조와 병합, 충돌 해결 등의 작업을 보다 편리하게 수행할 수 있게 합니다. GitKraken의 주요 기능과 장점을 살펴보겠습니다. 주요 기능 1. **시각적 인터페이스**: GitKraken은 브랜치, 커밋, 머지 상태 등을 시각적으로 보여주어 Git의 상태를 한눈에 파악할 수 있게 합니다. 2. **브랜치 및 병합 관리**: 브랜치 생성, 병합, 삭제 등을 간편하게 수행할 수 있으며, 병합 충돌 해결도 시각적으로 지원합니다. 3. **커밋 히스토리**: 커밋 히스토리를 그래..