상단바를 만들어보자

그 동안 너무 급하게 코드를 작성하기만 하고 Chat gpt에 너무 의존하면 코드를 짰다.
그래서 요번에는 천천히 Chat gpt를 사용하지 않고 간단한 게시판 부터 제대로 만들어 보려고 한다.

일단 상단바를 만들어 보자 !
내가 만들고 싶은 상단바는 바로 배경 위에 투명한 상단바지만 스크롤 하는순간 색이 입혀지는 상단바를 만들고 싶다. 예전 같으면 바로 Chat gpt에 물어봐서 구현하지만 이제 만들기전에 직접 어떻게 만들지 생각해 보고 구현해 보자 일단 간단한 상단바를 만든다.

Tailwind 랑 shadcn/ui를 써서 만들었다.

import {NavLink} from "react-router-dom";
import SheetButton from "./SheetButton.tsx";
const NavBar = () => {
    return (
        <div className={"bg-blue-600 p-4"}>
                <div className={"flex justify-between text-white"}>
                    <div className={"font-semibold text-xl pl-4"}>
                    <NavLink to={"/"}>23.12.11</NavLink>
                    </div>
                    <div className={" gap-10 pr-24 sm:flex hidden"}>
                    <NavLink to={"/"}>Home</NavLink>
                    <NavLink to={"/"}>Photo</NavLink>
                    <NavLink to={"/"}>Diary</NavLink>
                    </div>
                    <div className={"sm:hidden"}>
                        <SheetButton />
                    </div>
                </div>
        </div>
    )
}
export default NavBar

자 여기까지는 간단하게 했다.

이제 배경을 넣어서 배경이 보이게 만들고 스크롤을 내리는 순간 색을 입히게 하자.

여러 시행착오 끝에 구현을 했다.

import React, { useState, useEffect } from 'react';
import {NavLink} from "react-router-dom";
import SheetButton from "./SheetButton.tsx";
const NavBar = () => {
    const [scrolled, setScrolled] = useState(false);

    const handleScroll = () => {
        const offset = window.scrollY;
        if (offset > 0) {
            setScrolled(true);
        } else {
            setScrolled(false);
        }
    };

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        }
    }, []);

    return (
        <div className={`p-4 fixed top-0 left-0 right-0 z-10 ${scrolled ? 'bg-black' : 'bg-transparent'}`}>
            <div className={"flex justify-between text-white"}>
                <div className={"font-semibold text-xl pl-4"}>
                    <NavLink to={"/"}>23.12.11</NavLink>
                    </div>
                    <div className={" gap-10 pr-24 sm:flex hidden"}>
                    <NavLink to={"/"}>Home</NavLink>
                    <NavLink to={"/"}>Photo</NavLink>
                    <NavLink to={"/"}>Diary</NavLink>
                    </div>
                    <div className={"sm:hidden"}>
                        <SheetButton />
                    </div>
                </div>
        </div>
    )
}
export default NavBar

일단 z-10 으로 네브바를 배경 위로 보이게 한 다음 fixed 로 상단에 고정을 시켰다.
그리고 useEffect를 사용해서 컴포넌트가 마운트될 때 window.addEventListener('scroll', handleScroll);라는 코드를 통해 window 객체에 scroll 이벤트 리스너를 추가하고 handleScroll 함수를 스크롤 이벤트가 발생할 때마다 호출하였다. 그리고 언마운트 될 때나 컴포넌트가 다시 마운트 되기전에 window.removeEventListener('scroll', handleScroll);를 통해 이전에 추가된 scroll 이벤트 리스너가 제거 되도록 하였다.

역시 이런 간단한 상단바를 구현하는데도 Chat gpt를 안쓰니까 시간이 꽤나 걸렸다.
벌써 개발자로 일한지 7개월이 됐다. 하지만 실력은 그대로 인 것 같아서 지금까지 코딩 했던 방식들이 후회가 된다.
어디서 본 글이 있는데 머리를 강하게 때린 듯한 충격을 받았다.
글의 내용은 "다들 착각하는게 있는데 취업만 하면 바로 주니어 개발자가 된 줄 알아 신입 개발자야 그 다음이 주니어 개발자야" 이다.

이 글을 보고 너무 뼈저리게 깨달았다.
아.. 가만히 있다고 주니어 개발자가 되는게 아니구나 주니어 개발자도 열심히 해야 될 수가 있구나...

지금부터라도 주니어 개발자가 되기 위해 제대로 된 방식으로 기초부터 열심히 해보려고 한다.