52. 심화 프로젝트 - 병합, UI

Mission: 심화 프로젝트에서 맡은 기능(Header, Footer, main UI)을 하며 발생한 오류 및 개념 정리

에러

1. git push가 실패하고 "non-fast-forward" 에러

원인:
로컬 브랜치와 원격 저장소의 브랜치가 일치하지 않을 때 발생한다.

해결방안:
1. git pull origin dev를 사용하여 원격 브랜치를 로컬 브랜치로 병합한다.
2. 병합 충돌이 발생하면 충돌을 해결하고 커밋을 생성한 후 git push를 다시 시도한다.

git pull origin dev
# 충돌 해결 후
git add .
git commit -m "Merge remote-tracking branch 'origin/dev'"
git push origin dev

2. "Need to specify how to reconcile divergent branches" 에러

원인:
두 브랜치가 서로 다르게 변경되어 병합할 때, 병합 방법을 지정하지 않아 발생한다.

해결방안:
1. git pull 명령을 사용할 때 --rebase나 --no-rebase 옵션을 지정하여 병합 방법을 선택한다.
2. git config pull.rebase false 명령을 사용하여 병합을 선택하거나, git config pull.ff only 명령으로 fast-forward만 허용하도록 설정한다.

git pull --rebase origin dev
# 또는
git pull --no-rebase origin dev
# 또는
git config pull.rebase false

개념

1. React에서 헤더 고정하기

헤더를 상단에 고정하려면 useEffect와 useState 훅을 사용하여 스크롤 이벤트를 감지하고, 스크롤 위치에 따라 헤더 스타일을 변경해야 한다.

import React, { useEffect, useState } from "react";
import styled from "styled-components";
const Header = styled.header`
  position: ${({ fixed }) => (fixed ? "fixed" : "static")};
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
`;
function App() {
  const [isHeaderFixed, setIsHeaderFixed] = useState(false);
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 0) {
        setIsHeaderFixed(true);
      } else {
        setIsHeaderFixed(false);
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  return (
    <div>
      <Header fixed={isHeaderFixed}>
        {/* Header content */}
      </Header>
      {/* Other content */}
    </div>
  );
}
export default App;

2. useState와 상태 관리

useState는 React에서 상태(state)를 관리하기 위한 Hook이다. 함수형 컴포넌트에서도 상태를 사용할 수 있도록 해주며, 컴포넌트가 렌더링될 때 상태 값을 변경하고 이를 화면에 반영할 수 있게 한다.

import React, { useState } from 'react';
function Counter() {
  // useState를 사용하여 count 상태와 setCount 함수를 생성
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1); // count 값을 1 증가시킴
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

3. React Router의 useNavigate와 라우팅

useNavigate는 React Router에서 제공하는 Hook으로, 프로그래밍적으로 라우터를 조작하는 데 사용된다. 특정 경로로 이동하거나 라우팅 파라미터를 전달하거나, 뒤로가기 등의 라우터 동작을 프로그래밍 방식으로 수행할 수 있다.

import { useNavigate } from 'react-router-dom';
function NavigationExample() {
  const navigate = useNavigate();
  const goToPage = () => {
    navigate('/new-page'); // /new-page 경로로 이동
  };
  return (
    <div>
      <button onClick={goToPage}>Go to New Page</button>
    </div>
  );
}