주니어 개발자의 우당탕탕 개발새발 스토리 (로직 설계)

오늘은 어떠한 문법이나 라이브러리가 아닌 안 풀리던 문제가

갑자기 팟!!! 하고 풀리는 

개발스토리(부제: 로직설계) 간단하게 풀어보려고한다!

 

1. 기(起)

 

나는 현재 진행 중인 프로젝트에서
대부분의 개발자들이 그렇겠지만 막 다른 길에 갇혀버린 생각이
들 때가 있다.
근데 나는 개인프로젝트라 자문을 구할 사람도 없어서,
할 수 있는 건 레퍼런스와 채찍피티선생님에게 찾아갈 뿐이다.

그런데도 해결이 안 될 때가 있다. 특정 문법이나, 구문이 문제가 아니면
각자 개발하고 구현하는 게 다 다르고
오류가 발생하는 것이 아닌 로직을 설계하는 단계부터 막혀버리면
참고할 레퍼런스도 없다.

 

 

 

 

근데 여태까지 그렇게 막힐 때마다 경험하는 것은
1~2일, 길게는 일주일 동안 매달려서 머리를 꽁꽁 싸매도 해결이 안 되던 것이
잠깐 딴짓하거나 다른 것을 하고 있을 때 팟!!!! 하면서
뭔가가 떠오른다는 것이다
(이것은 마치.. LIKE A 유레카!!!!!!!!!!!!!)

 

 

 

 

지금까지 5번 정도의 막혔던 적이 있었는데,
모두 이렇게 갑자기 불현듯 해결법이 생각나거나
톡톡 튀는 기발한 아이디어가 떠올라서 해결되었던 것 같다.

나는 그중에 가장 최근 해결되었던 문제를 공유해보고자 한다.

 

 

 

2. 승(承)

 

나는 메인페이지를 
Intersection Observer구문과

저번에 포스트 했던 GSAP를 사용하여

2024.10.02 - [Devlog] - GSAP란 무엇인가? -녹색 양말 만화 이음마당

GSAP란 무엇인가? -녹색 양말 만화 이음마당

 

 

 

4단 SECTION으로 나누어 
SECTION 간 이동 스크롤을 구현하였다.

(말 그대로 마우스휠 한 번이면

한 SECTION씩 스크롤되어
보이는 기능)

 

 

 

이 기능을 구현하기 위한 과정도 순탄치 않았다.,,,

 

 

원래는 react-fullpage라는 라이브러리를 사용하여 구현할 계획이었다.
하지만 라이브러리 업데이트가 예전에 머물러있어
현재 최신 react버전과 호환이 안되었고
기능은 동작하지만, 콘솔창엔 오류가 나타나고 있었다.
react최신버전에서는 호환하지 않는다며..
그 과정에서 gsap기능도 포기하고 section슬라이드 기능을 구현하기 위해

 

CRA > VITE로 마이그레이션도 진행하고

2024.09.24 - [Devlog] - React] CRA에서 Vite로 마이그레이션 진행하기

React] CRA에서 Vite로 마이그레이션 진행하기

많은 레퍼런스들을 봐도 해결 못하다가 번뜩하면서 떠올라
Intersection Observer기능을 사용하여 해결했고, gsap도 뚝딱 넣어버렸다.

 

무튼 본론으로 돌아와
현재 PageLayOut.jsx컴포넌트에 
 header, outlet, footer를 넣어 전체 페이지에 적용시키고 있었는데,

 여기서 문제가 생겼다 메인페이지에 section이 4개가 있었는데,

footer가 메인페이지 자체에 적용되고 있기 때문에

상단의 section1,2,3에도 footer가 출력되는 문제였다.

정말 오랜 시간 여러 가지 해결 방법을 생각해 봤다.

 1. PageLayout.jsx에서 footer를 빼고 개별로 footer를 적용시킨다

(section1,2,3 빼고 개별적으로 footer를 적용)

 

▶

▶

하지만,

이 방법은 최적화의 반대방향으로 가는 방법인 거 같아서 포기

 

 

 

 2. PageLayout.jsx는 그대로 가되, 적용되는 범위에서

Mainpage를 빼서 footer를 개별로 적용하는 방법

 

▶

▶

 

-하지만,

이 방법도 최적화의 반대방향으로 가는 방법인 거 같아서 포기

(router 다시 설정+ footer는 빼지만 header와 outlet을 따로 적용시켜야 한다는 번거로움)

 

 

3. section4 컴포넌트 자체에 footer를 적용시킨 뒤 메인페이지에 불러오는 방법

 

▶

▶

 

시도는 해봤지만 위와 같은 PageLayout.jsx 및 최적화문제에 빠짐

 

3. 전(轉)

 

이 문제도 결국 며칠 동안 해결 못하다 거의 반포기 상태로

내려놓은 뒤, 뜬금없이 메일을 정리하다가

머릿속에 번개가 치듯

해결할만한 로직이 떠올랐다!!!
(승을 뒤집어버렸다!)

 

바로 PageLayout.jsx에서

useLocation을 써서 footer문에 조건을 달아주는 것이었다!!!!!!!!!!!!!!!!

 

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

  // 메인 페이지 경로를 지정 ("/"가 메인 페이지 라우터경로)
  const isMainPage = location.pathname === "/";

  return (
    <>
      <Header />
      <Outlet />
      {/* 메인 페이지가 아닌 경우에만 Footer 출력 */}
      {!isMainPage && <Footer />}
    </>
  );
};

export default PageLayout;

 

 

 

생각이 떠오른 뒤 다시 돌아보면 쉬운 문법일수 있는데,
생각이 안 날 당시에는 정말로 죽어도 생각이 안 난다.

 

(마치 퀴즈게임에서 친구들 모두가 쉽게 풀어버리고,
나만 남았을 때 아무리 생각해도 혼자 안 풀리는 그럴 때처럼)

 

 

4. 결(結)

 

결국엔 권선징악!!!
(여기서 악은 해결되지 않는 골칫거리들이다!)

 

결론 : 어떤 문제가 해결이 안 될 땐 의외로

한 걸음 물러나서 본다면(포기한다면)
어떠한 수가 떠오를 때도 있다!

 

 

결론이 이상하지만 어쨌든 그러하다..

 

(괜스레 개발을 처음 시작하면서 며칠 동안 구현되지 않던 기능이
갑자기 빠빠밧 작동되었을 때의 희열이 떠올랐다...)

 

 

++++추가

 

기능은 정상적으로 원하는 대로 작동했지만
자꾸 마지막 section4에서 footer밑으로 스크롤이 아주쪼금 더 내리면
또 하나의 footer윗부분이 출력되었다.

그 당시엔 footer문제를 해결한 직후라

"괜히 다른 걸 건드려서 
또 오류가 날꺼같아!!"

하며 못 본척하고 넘어갔다

(언젠가는 해결할 거지만 지금은 아니다!!

라는 생각이 지배적)

근데 이 부분도 어이없게 갑자기 생각이 나버렸다. 

 

 

3. section4 컴포넌트 자체에 footer를 적용시킨 뒤

메인페이지에 불러오는 방법

를 시도하다가 그 코드 그대로 그 컴포넌트에 두고 왔단 사실이 떠올라,

바로 코드를 지워줬더니 해결되었다 ^_^!!

 

(이 글은 초보 개발자의 의식의 흐름대로 작성되었음을 알립니다.)