환경별 API 설정

API_CONFIG는 개발 환경(development)과 배포 환경(production)에 따라 각각 다른 URL을 참조하도록 설정합니다.

코드:

const API_CONFIG = {
  development: {
    AUTH_API: 'http://localhost:8080/api/auth',
    USER_API: 'http://localhost:8080/api/users',
    ADMIN_API: 'http://localhost:8080/api/admin',
    ADVERTISING_API: 'http://localhost:8080/api/advertising',
    VERIFICATION_API: 'http://localhost:8080/api/verification',
    REFERRAL_API: 'http://localhost:8080/api/referral',
    UNIV_CERT_API: 'https://univcert.com/api/v1',
  },
  production: {
    AUTH_API: process.env.REACT_APP_AUTH_API,
    USER_API: process.env.REACT_APP_USER_API,
    ADMIN_API: process.env.REACT_APP_ADMIN_API,
    ADVERTISING_API: process.env.REACT_APP_ADVERTISING_API,
    VERIFICATION_API: process.env.REACT_APP_VERIFICATION_API,
    REFERRAL_API: process.env.REACT_APP_REFERRAL_API,
    UNIV_CERT_API: process.env.REACT_APP_UNIV_CERT_API,
  },
};

Axios 설정 및 인터셉터

API 호출 전, JWT 토큰을 Authorization 헤더에 추가합니다.

코드:

axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

API 엔드포인트

Auth 관련 엔드포인트

코드:

AUTH: {
  LOGIN: `${API_CONFIG[ENV].AUTH_API}/login`,
  REGISTER: `${API_CONFIG[ENV].AUTH_API}/register`,
  LOGOUT: `${API_CONFIG[ENV].AUTH_API}/logout`,
  DELETE: `${API_CONFIG[ENV].AUTH_API}/delete`,
},

User 관련 엔드포인트

코드:

USER: {
  PROFILE: `${API_CONFIG[ENV].USER_API}/profile`,
  UPDATE: `${API_CONFIG[ENV].USER_API}/update`,
},

Admin 관련 엔드포인트

코드:

ADMIN: {
  DASHBOARD: `${API_CONFIG[ENV].ADMIN_API}/dashboard`,
  LIST: `${API_CONFIG[ENV].ADMIN_API}/list`,
  PATCH_REFED_REWARD: `${API_CONFIG[ENV].ADMIN_API}/patchRefedReward`,
},

API 함수

Auth API 함수

코드:

export const authAPI = {
  login: async (credentials) => {
    const response = await axiosInstance.post(API_ENDPOINTS.AUTH.LOGIN, credentials);
    return response.data;
  },
  register: async (userData) => {
    const response = await axiosInstance.post(API_ENDPOINTS.AUTH.REGISTER, userData);
    return response.data;
  },
  logout: async () => {
    const response = await axiosInstance.post(API_ENDPOINTS.AUTH.LOGOUT);
    return response.data;
  },
  deleteAccount: async () => {
    const response = await axiosInstance.delete(API_ENDPOINTS.AUTH.DELETE);
    return response.data;
  },
};

Advertising API 함수

코드:

export const advertisingAPI = {
  createAd: async (adData) => {
    const response = await axiosInstance.post(API_ENDPOINTS.ADVERTISING.CREATE, adData);
    return response.data;
  },
  getAdList: async () => {
    const response = await axiosInstance.get(API_ENDPOINTS.ADVERTISING.LIST);
    return response.data;
  },
  updateAd: async (adData) => {
    const response = await axiosInstance.patch(API_ENDPOINTS.ADVERTISING.UPDATE, adData);
    return response.data;
  },
  deleteAd: async (adTitleOrIdentifier) => {
    const response = await axiosInstance.delete(API_ENDPOINTS.ADVERTISING.DELETE, {
      data: adTitleOrIdentifier,
    });
    return response.data;
  },
};

Verification API 함수

코드:

export const verificationAPI = {
  upload: async (verifyUploadDTO) => {
    const response = await axiosInstance.post(API_ENDPOINTS.VERIFICATION.UPLOAD, verifyUploadDTO);
    return response.data;
  },
  getStatus: async () => {
    const response = await axiosInstance.get(API_ENDPOINTS.VERIFICATION.STATUS);
    return response.data;
  },
};

Referral API 함수

코드:

export const referralAPI = {
  validate: async (codeString) => {
    const response = await axiosInstance.post(API_ENDPOINTS.REFERRAL.VALIDATE, codeString);
    return response.data;
  },
  getStats: async () => {
    const response = await axiosInstance.get(API_ENDPOINTS.REFERRAL.STATS);
    return response.data;
  },
};

에러 처리 유틸리티 함수

코드:

export const handleApiError = (error) => {
  if (error.response) {
    const status = error.response.status;
    switch (status) {
      case API_STATUS.UNAUTHORIZED:
        return API_ERROR_MESSAGES.UNAUTHORIZED;
      case API_STATUS.FORBIDDEN:
        return API_ERROR_MESSAGES.FORBIDDEN;
      case API_STATUS.NOT_FOUND:
        return API_ERROR_MESSAGES.NOT_FOUND;
      default:
        return error.response.data.message || API_ERROR_MESSAGES.DEFAULT;
    }
  }
  if (error.request) {
    return API_ERROR_MESSAGES.NETWORK_ERROR;
  }
  return API_ERROR_MESSAGES.DEFAULT;
};

"위치를 알면 주소를 알 수 있다! React와 OpenCage API를 활용한 역지오코딩 기술 구현을 소개함."

프로젝트 개요와 역지오코딩의 필요성

프로젝트 개요 🛠

사이트에서 사용자 현재 위치를 기반으로 지역 정보를 설정하는 기능을 구현. 이를 통해 사용자 경험(UX)을 향상시키는 것이 목표.

역지오코딩의 필요성 🌍

• 위치 기반 서비스(지도, 검색, 날씨 앱 등)에 필수.
• 사용자 위치를 지역 정보로 변환해 맞춤형 서비스를 제공 가능.

역지오코딩의 기본 개념 🌐

지오코딩 vs 역지오코딩

역지오코딩 활용 사례

• 지도 서비스(Google Maps)
• 위치 기반 검색(네이버 플레이스)
• 날씨 정보 제공(AccuWeather)

사용한 기술 스택 💻

• React: 컴포넌트 기반 UI 개발.
• OpenCage Geocoding API: 좌표를 주소로 변환.
• Axios: HTTP 요청 처리.
• React Spinners: 로딩 인디케이터.
• React Router: 클라이언트 사이드 라우팅.

역지오코딩 구현 과정 🔧

1. OpenCage Geocoding API 설정

API 키 발급

1. OpenCage 데이터 계정 생성.
2. API 키 발급 후 프로젝트에 환경 변수로 저장.

API 요청 방식

const fetchRegion = async (latitude, longitude) => {
  try {
    const response = await axios.get('https://api.opencagedata.com/geocode/v1/json', {
      params: {
        key: process.env.REACT_APP_OPENCAGE_API_KEY,
        q: `${latitude}+${longitude}`,
        pretty: 1,
        no_annotations: 1,
        language: 'ko',
      },
    });
    return response.data;
  } catch (error) {
    console.error('API 호출 실패:', error);
  }
};

2. Location.js 컴포넌트 구현

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { ClipLoader } from 'react-spinners';
import { useNavigate } from 'react-router-dom';

const LocationSetter = ({ setRegion }) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const navigate = useNavigate();

  const fetchRegion = async (latitude, longitude) => {
    try {
      const response = await axios.get('https://api.opencagedata.com/geocode/v1/json', {
        params: {
          key: process.env.REACT_APP_OPENCAGE_API_KEY,
          q: `${latitude}+${longitude}`,
          language: 'ko',
        },
      });
      const region = response.data.results[0]?.components.city;
      if (region) {
        setRegion(region);
        localStorage.setItem('userRegion', region);
        navigate(`/?in=${encodeURIComponent(region)}`, { replace: true });
      } else {
        setError(true);
      }
    } catch (err) {
      console.error('역지오코딩 실패:', err);
      setError(true);
    } finally {
      setLoading(false);
    }
  };

  const getLocation = () => {
    if (!navigator.geolocation) {
      setError(true);
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (position) => {
        fetchRegion(position.coords.latitude, position.coords.longitude);
      },
      () => setError(true),
      { enableHighAccuracy: true }
    );
  };

  useEffect(() => {
    getLocation();
  }, []);

  if (loading) return <ClipLoader color="#3b82f6" loading={true} size={50} />;
  if (error) return <p>위치 정보를 가져올 수 없습니다.</p>;
  return null;
};

export default Location;

주요 구현 내용 ✍️

1. Geolocation API 사용:
   • 사용자 위치(위도, 경도) 가져오기.
2. OpenCage API 호출:
   • 좌표를 주소로 변환해 지역 정보 추출.
3. 상태 관리:
   • React useState로 로딩 및 오류 상태 관리.
4. React Router 연동:
   • 지역 정보를 URL 파라미터로 추가해 상태 공유.

배운 점 📚

1. 비동기 처리: API 호출과 상태 업데이트 간의 흐름을 효율적으로 관리하는 방법.
2. 에러 처리: 사용자에게 명확한 피드백을 제공하는 UI의 중요성.
3. 로컬 스토리지 활용: 지역 정보를 캐싱해 불필요한 API 호출 방지.

구현 결과 🎉

• 사용자 현재 위치 기반 지역 정보 설정.
• 브라우저 권한 설정 안내로 UX 개선.
• 로컬 스토리지를 활용한 성능 최적화.

참고 자료 📖

• OpenCage Geocoding API 공식 문서
• React Geolocation 사용 가이드
• React Router 공식 문서

질문이나 의견은 댓글✌️

"API 요청 로직을 체계적으로 관리하면, 유지보수와 협업이 편해진다! 이 글에서 API 로직 분리의 중요성과 방법을 알아보자."

왜 API 로직을 별도로 관리해야 할까? 🤔

프론트엔드 개발을 진행하다 보면, 컴포넌트 곳곳에 API 호출 로직이 흩어져 있는 경우를 종종 보게 됨. 이런 구조는 프로젝트 규모가 커질수록 다음과 같은 문제를 야기함:

• 유지보수 어려움: API 엔드포인트나 응답 형식이 바뀌면 관련된 모든 코드를 찾아서 수정해야 함.
• 중복 코드 증가: 동일한 API 호출 로직이 여러 컴포넌트에 중복 작성됨.
• 협업 비효율: 코드 구조가 비직관적이라 팀원 간 협업이 어려움.

API 로직을 별도로 분리해 관리하면 이런 문제를 예방하고, 보다 체계적이고 효율적인 코드를 작성할 수 있음.

API 로직 분리가 가져다주는 장점 🌟

1. 코드 구조화 및 가독성 향상

API 요청 로직을 api/ 디렉토리로 모아두면 프로젝트 구조가 깔끔해짐. 예를 들어:

📂 src
 ├── 📂 api
 │    ├── auth.js
 │    ├── user.js
 │    ├── admin.js

• 직관적인 구조: 각 파일에서 어떤 기능을 다루는지 바로 파악 가능.
• 코드 리뷰 및 온보딩 간소화: "인증 관련 API는 auth.js에 있음"처럼 명확한 컨텍스트 제공.

2. 재사용성 극대화

공용으로 사용할 API 함수를 정의해두면 중복 코드를 방지 가능. 예:

// user.js
export const getUserProfile = async () => {
  return axios.get('/api/user/profile');
};

// 컴포넌트에서 호출
import { getUserProfile } from '../api/user';

const UserProfile = () => {
  useEffect(() => {
    getUserProfile().then((data) => {
      console.log(data);
    });
  }, []);
};

• 중복 제거: 동일한 API 호출 로직을 재사용 가능.
• 수정 용이: 한 곳에서 로직을 수정하면 모든 호출부에 적용됨.

3. 유지보수성과 확장성 확보

프로젝트가 커질수록 서버 통신 로직이 복잡해짐. 하지만 API 로직을 중앙 관리하면 다음과 같은 장점이 있음:

• 엔드포인트 변경 대응: 특정 API 엔드포인트가 변경될 때 한 곳만 수정하면 됨.
• 공통 로직 추가: 인증 토큰 추가, 에러 처리 등 공통 로직을 쉽게 적용 가능.

// axiosInstance.js
import axios from 'axios';

const instance = axios.create({
  baseURL: '/api',
});

// 요청에 공통 헤더 추가
instance.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
});

export default instance;

4. 테스트 용이성 향상

API 호출 로직을 분리하면 단위 테스트 작성이 쉬워짐:

// user.test.js
import { getUserProfile } from './user';
import axios from 'axios';

jest.mock('axios');

test('getUserProfile 호출 시 데이터를 반환해야 함', async () => {
  const mockData = { name: 'John Doe' };
  axios.get.mockResolvedValue({ data: mockData });

  const result = await getUserProfile();
  expect(result.data).toEqual(mockData);
});

• 독립적 테스트 가능: 컴포넌트 렌더링과 무관하게 API 로직만 검증 가능.
• 신뢰성 확보: API 변경이나 리팩토링 후에도 동작 보장.

5. 협업 효율성 극대화

API 로직을 모듈화하면 팀원 간 협업이 쉬워짐:

• 명확한 역할 분담: "인증 API 추가는 auth.js 수정"처럼 작업 영역 구분 가능.
• 수정사항 반영 용이: 백엔드 API 변경사항을 한 곳에서 관리 가능.

구현 예시: 모듈화된 API 로직 📂

디렉토리 구조

📂 src
 ├── 📂 api
 │    ├── auth.js
 │    ├── user.js
 ├── 📂 components
 │    ├── UserProfile.js
 ├── 📂 utils
 │    ├── axiosInstance.js

auth.js

import axiosInstance from '../utils/axiosInstance';

export const login = async (credentials) => {
  return axiosInstance.post('/auth/login', credentials);
};

export const logout = async () => {
  return axiosInstance.post('/auth/logout');
};

user.js

import axiosInstance from '../utils/axiosInstance';

export const getUserProfile = async () => {
  return axiosInstance.get('/user/profile');
};

axiosInstance.js

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: '/api',
});

axiosInstance.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default axiosInstance;

정리 ✨

API 호출 로직을 별도로 분리해 관리하면 다음과 같은 이점이 있음:

1. 코드 가독성과 구조화가 개선됨.
2. 중복된 로직을 줄이고 재사용성을 높일 수 있음.
3. 유지보수와 확장성이 향상됨.
4. 테스트 작성이 쉬워지고 품질 보장이 가능함.
5. 협업 효율성이 극대화됨.

프로젝트 초기부터 API 로직을 모듈화하면 향후 발생할 여러 문제를 예방하고, 개발 생산성을 크게 높일 수 있음. 이제부터는 API 로직 관리에 신경 써보자! 🙌

"슬라이더 하나로 멋진 인터랙션을 구현하고 싶다면? Swiper.js와 React로 해결 가능! 내가 삽질하며 배운 것들, 여기 다 정리해봄."

문제 상황 🤯

홈페이지 배너 슬라이더를 만들다가 이런 문제들이 터짐:

1. 텍스트 애니메이션 동기화:

   • 슬라이드 전환 시 텍스트가 자연스럽게 이동하며 페이드 인/아웃되는 애니메이션을 구현하고 싶었음.
   • Swiper.js의 이벤트를 어떻게 활용해야 할지 막막했음.

2. 배경색 전환:

   • 슬라이드가 변경될 때마다 좌우 배경색을 슬라이드의 색상에 맞게 변경하고 싶었음.

3. 반응형 디자인:

   • 다양한 디바이스에서 슬라이더가 깨지지 않고 잘 동작해야 했음.

해결 과정 🔧

1. 텍스트 애니메이션 동기화

슬라이드 전환 시점에 맞춰 텍스트 애니메이션을 적용하려면 Swiper.js 이벤트를 잘 써야 함.

const handleTransitionStart = () => {
  setTextClass('animate-slide-text-out'); // 텍스트가 사라지는 애니메이션 실행
};

const handleTransitionEnd = () => {
  setTextClass('animate-slide-text-in'); // 텍스트가 나타나는 애니메이션 실행

  // 0.5초 후 초기화
  setTimeout(() => {
    setTextClass('');
  }, 500);
};

• Swiper.js의 onTransitionStart, onTransitionEnd 이벤트 활용.
• React useState로 동적 클래스 관리.

2. 배경색 동적 변경

슬라이드 변경 시 배경색을 동적으로 업데이트하려면 Swiper.js의 realIndex를 사용.

const handleSlideChange = (swiper) => {
  const activeIndex = swiper.realIndex;
  setBgColor(slidesData[activeIndex].backgroundColor); // 현재 슬라이드 색상 반영
};

• slidesData로 슬라이드 정보 관리.
• Tailwind CSS transition-colors로 부드럽게 배경색 전환.

3. 반응형 디자인

Tailwind CSS로 화면 크기에 맞는 슬라이더 레이아웃 구현.

<div className="w-full md:w-3/4 lg:w-7/10">
  <Swiper ... />
</div>

• Tailwind 유틸리티 클래스 w-full, md:w-3/4, lg:w-7/10 사용.
• 커스텀 클래스는 tailwind.config.js에서 추가 가능.

주요 코드 ✍️

Swiper.js 설정

<Swiper
  modules={[EffectFade, Navigation, Pagination, Autoplay]}
  effect="fade"
  fadeEffect={{ crossFade: true }}
  navigation
  pagination={{ clickable: true }}
  autoplay={{ delay: 5000, disableOnInteraction: false }}
  loop
  speed={600}
  onSlideChange={handleSlideChange}
  onTransitionStart={handleTransitionStart}
  onTransitionEnd={handleTransitionEnd}
>
  {slidesData.map((slide, index) => (
    <SwiperSlide key={index}>
      <div className="relative w-full h-96 flex items-center justify-center">
        <div className="overlay-text absolute inset-0 flex flex-col items-center justify-center text-center">
          <h2 className="text-4xl font-bold mb-4">{slide.title}</h2>
          <p className="text-xl">{slide.subtitle}</p>
        </div>
      </div>
    </SwiperSlide>
  ))}
</Swiper>

CSS 애니메이션

@keyframes slide-text-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-text-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

.animate-slide-text-in {
  animation: slide-text-in 0.3s ease-out forwards;
}

.animate-slide-text-out {
  animation: slide-text-out 0.3s ease-in forwards;
}

어려웠던 점 😅

• Swiper.js의 다양한 이벤트 중 적합한 타이밍을 찾는 데 시간이 걸림.
• React 상태 관리와 CSS 애니메이션 타이밍을 맞추는 것이 까다로웠음.
• 반응형 디자인에서 커스텀 클래스 추가 작업이 필요했음.

배운 점 📚

1. 상태 관리: React useState를 활용하면 UI 상태 관리가 쉬워짐.
2. CSS 애니메이션: Tailwind CSS와 @keyframes로 간단한 애니메이션 구현 가능.
3. Tailwind CSS 커스터마이징: 설정 파일을 활용해 프로젝트에 맞는 유틸리티 클래스를 만들 수 있음.

구현 결과 🎉

• 텍스트가 자연스럽게 슬라이드 인/아웃.
• 슬라이드 전환 시 배경색 변경.
• 모든 디바이스에서 반응형으로 동작.

참고 자료 📖

• Swiper.js 공식 문서
• Tailwind CSS 공식 문서

질문 있으면 댓글✌️

"복잡한 건 뒤로 하고, 핵심만 딱딱 찍어서 알려줌. 코드로 직접 해보면 아! 하게 될 거임."

🔥 1단계: 자바스크립트 기본 중의 기본

변수 선언

자바스크립트에서는 변수를 var, let, const로 선언할 수 있음. 근데 요즘은 거의 let이랑 const만 씀.

let age = 25; // 바뀔 수 있는 값
const name = 'JavaScript'; // 절대 안 바뀜

변수 선언 비교표

🎯 2단계: 조건문과 반복문

조건문

조건에 따라 다른 행동을 해야 한다면?

if (age > 18) {
  console.log('성인임');
} else {
  console.log('미성년자임');
}

반복문

같은 일을 여러 번 해야 한다면?

for (let i = 0; i < 5; i++) {
  console.log(`숫자: ${i}`);
}

반복문 흐름 다이어그램

시작 → 조건 확인 → 실행 → 증감 → 조건 확인 → 종료

🚀 3단계: 함수 만들기

함수는 재사용 가능한 코드 조각임.

function greet(name) {
  return `안녕, ${name}!`;
}
console.log(greet('JavaScript'));

함수 호출 흐름

함수 호출 → 매개변수 전달 → 내부 코드 실행 → 값 반환

💡 4단계: 배열과 객체

배열

여러 개의 값을 한 곳에 저장하고 싶을 때.

const fruits = ['사과', '바나나', '체리'];
console.log(fruits[1]); // 바나나 출력

객체

값들을 키-값 쌍으로 저장할 때.

const person = {
  name: 'John',
  age: 30,
};
console.log(person.name); // John 출력

배열과 객체 비교표

🏁 마무리: 이걸로 뭘 할 수 있냐고?

• DOM 조작: HTML 요소를 컨트롤.
• 비동기 작업: 서버에서 데이터 가져오기.
• 게임 만들기? 가능함.

DOM 조작 예제

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('버튼 클릭됨!');
});

이거 직접 따라하면서 코딩하면 자바스크립트 기본은 문제없을 거임. 혹시 이해 안 되는 부분 있으면 댓글 🙌

문제 상황

React로 웹 앱 만들던 중에 이런 요구사항이 나옴:

1. 네비게이션 탭 클릭하면 해당 섹션으로 부드럽게 이동해야 함.
2. 현재 보이는 섹션에 따라 네비게이션 탭 상태가 동적으로 변경되어야 함.
3. 고정 헤더 때문에 섹션이 헤더에 가려지지 않아야 함.

이거 구현하다 보니까 다음 같은 문제들이 터짐:

• React Router랑 scroll 충돌: 특정 경로로 이동하면 스크롤링 기능이 제대로 안 됨.
• 탭 동기화 문제: 보이는 섹션이랑 탭 상태가 어긋남.
• 헤더 오프셋 문제: 고정 헤더 때문에 섹션 일부가 잘림.

해결 과정

1. 라이브러리 설정

일단 react-router-dom이랑 react-scroll 설치함. 각각 라우팅이랑 스크롤 애니메이션 기능 제공해줌.

npm install react-router-dom react-scroll

2. 스크롤링 기능 구현

react-scroll의 scroller 사용해서 특정 섹션으로 부드럽게 이동하도록 구현함.

import { scroller } from 'react-scroll';

const handleScrollTo = (sectionId) => {
  scroller.scrollTo(sectionId, {
    duration: 800,
    delay: 0,
    smooth: 'easeInOutQuart',
    offset: -80, // 고정 헤더 높이만큼 오프셋
  });
};

3. React Router랑 통합

SPA 특성상 다른 페이지에서 네비게이션 클릭하면 메인 페이지로 돌아가 특정 섹션으로 스크롤해야 했음. React Router의 navigate를 써서 상태 전달함.

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const handleNavigation = (sectionId) => {
  navigate('/', { state: { scrollTo: sectionId } });
};

메인 페이지에서는 useEffect로 상태 기반 스크롤 처리했음.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { scroller } from 'react-scroll';

const MainPage = () => {
  const location = useLocation();

  useEffect(() => {
    if (location.state?.scrollTo) {
      scroller.scrollTo(location.state.scrollTo, {
        duration: 800,
        delay: 0,
        smooth: 'easeInOutQuart',
        offset: -80,
      });
    }
  }, [location]);

  return (
    <div>
      {/* 섹션들 */}
      <section id="section1">...</section>
      <section id="section2">...</section>
      <section id="section3">...</section>
    </div>
  );
};

4. 현재 섹션이랑 탭 동기화

IntersectionObserver 써서 현재 보이는 섹션 감지하고, 해당 섹션에 맞는 탭을 활성화함.

import { useEffect, useState } from 'react';

const useActiveSection = (sections) => {
  const [activeSection, setActiveSection] = useState(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setActiveSection(entry.target.id);
        }
      });
    }, { threshold: 0.6 });

    sections.forEach((id) => {
      const element = document.getElementById(id);
      if (element) observer.observe(element);
    });

    return () => {
      sections.forEach((id) => {
        const element = document.getElementById(id);
        if (element) observer.unobserve(element);
      });
    };
  }, [sections]);

  return activeSection;
};

useActiveSection 훅으로 활성화된 섹션 감지해서 탭 상태 업데이트함.

최종 코드 구조

MainPage.js

const MainPage = () => {
  const activeSection = useActiveSection(['section1', 'section2', 'section3']);

  return (
    <div>
      <header>
        <Tabs activeTab={activeSection} />
      </header>
      <section id="section1">섹션 1</section>
      <section id="section2">섹션 2</section>
      <section id="section3">섹션 3</section>
    </div>
  );
};

Tabs.js

const Tabs = ({ activeTab }) => (
  <nav>
    <button onClick={() => handleScrollTo('section1')} className={activeTab === 'section1' ? 'active' : ''}>
      섹션 1
    </button>
    <button onClick={() => handleScrollTo('section2')} className={activeTab === 'section2' ? 'active' : ''}>
      섹션 2
    </button>
    <button onClick={() => handleScrollTo('section3')} className={activeTab === 'section3' ? 'active' : ''}>
      섹션 3
    </button>
  </nav>
);

배운 점

이 작업 하면서 몇 가지 깨달은 점:

1. React에서 상태 관리랑 DOM 조작의 균형: useEffect랑 라이브러리 조합으로 문제 해결 가능.
2. IntersectionObserver 활용: 사용자 인터랙션 없이도 뷰포트 기반 상태 동기화 가능.
3. 라이브러리 통합: react-scroll이랑 React Router 조합으로 UX 크게 개선 가능.

이렇게 부드러운 스크롤링 네비게이션 구현하는 과정을 정리해봤음. 혹시 질문이나 피드백 있으면 댓글로 남겨주셈! 😊