플레이데이터 풀스택 백엔드 9기 5월 3주차 회고

플레이데이터 풀스택 백엔드 9기 9주차 주간회고 및 학습기록 (아홉번째 기록)

---

Facts

이번 주에는 두번째 프로젝트를 진행했다. 우리 팀은 리액트를 이용하여 인스타그램을 클론 코딩했다. 성장을 위해 제일 어려워보이는 메인화면을 자진해서 맡았다. 겨우 한 페이지 만들었지만, 절대 쉽지 않았다. 메인화면에서 알림창, DM 페이지, 스토리 창 등등으로 이동이 가능해야 하기 때문에 구현해야 할 기능이 많았다. 물론 익숙치 않아서 더 느리긴 했을 것이다. 

 

월요일에 특히 바빴다. 팀원분들이 만들어오신 컴포넌트와 페이지들을 연결하느라 정신없었는데, 아쉽게도 내가 생각한 만큼은 구현하지 못했다. 이번 주 내로 생각한 데까지 구현할 예정이다. (팀원분께서 피드에 있는 게시물을 클릭하면 모달창으로 뜰 수 있게 컴포넌트를 만들어주셨는데, 메인화면의 게시물에 라우팅 거는 단계에서  막혔다)

 

프로젝트 진행이 예상보다 오래 걸리고 어려웠다. 주말에 좀 덜 한 탓에 프로젝트 마감 직전에 엄청  키보드를 두드렸다. 생각했던 게 잘 안되고 그래서 멘탈 붕괴 직전까지 갔다. 지금 생각해보면 이게 뭐라고 멘탈이 그렇게 흔들렸는지 모르겠다. 다들 고생했는데 생각한 데까지 제대로 연결하지 못해서 죄송스런 마음 때문에 그랬던 거 같다,,, 평정심을 유지하는 연습을 해야겠다. 

 

2차 프로젝트에서 구현한 인스타킬로그램 메인화면

---

Feelings

프론트엔드 분야는 코드 작성 시 결과물이 바로 보이기 때문에 재밌을 거라고 생각했다. 그러나 생각보다 백엔드보다 덜 재밌게 느껴졌다. 작업물이 인스타그램과 거의 비슷하게 구현되는 건 진짜 신기하고 재밌었지만, 모든 요소 하나하나를 태그로 감싸고 padding이나 margin을 주면서 위치를 정확하게 지정한 다음에, 다시 하나하나 css를 걸어주는 과정이 그렇게 즐겁지는 않았던 거 같다. 게다가 예술과는 정말 거리가 먼 내가 직접 디자인을 해야 한다면 그건 더욱 고역이 될 거 같다는 생각이 들었다. 그보다는 데이터의 이동을 관찰하고 관리하는 게 더 재밌다. 1차 프로젝트 때 (물론 더 가벼운 프로젝트였지만) 꽤나 즐거웠던 것을 생각해보면 확실히 난 백엔드랑 더 잘 맞는 듯하다.

 

어찌되었든 최종 결과물 (아직 수정할 것이 남아있지만)이 어느정도 굴러가는 걸 보니 만족스러웠다. 그리고 웹사이트에서 버튼 하나하나, 애니메이션 하나하나의 소중함(?)을 느낄 수 있었다. 특히 잘 만들어진 웹사이트 (인스타그램 등등)는 뭐 하나 대충 만들어진 게 없다고 느꼈다. 역시 잘 되는 데는 이유가 있는 건가 싶다.

---

Findings

1. svg 파일을 이용하여 인스타그램 아이콘 이용하기

클론 코딩 프로젝트를 진행하다가 알게 된 방법이다. (chat GPT의 도움이 필요함)

인스타그램과 똑같이 만들다보면 여러 아이콘들이 필요하다. 물론 캡처나 다른 비슷한 아이콘을 구해서 쓸 수도 있겠지만 아예 같은 아이콘을 사용하고 싶어서 이 방법을 택했다.

인스타그램 네비게이션 바의 일부(좌) / 클론 코딩한 인스타킬로그램 네비게이션바의 일부(우)

예를 들어 '홈' 아이콘을 얻고 싶다고 가정하자. 그러면 홈 아이콘에 마우스 우클릭을 한 후 '검사'를 클릭한다.

그러면 이런 svg 태그를 찾을 수 있다.

인스타그램 '홈' 아이콘의 svg 태그

이 태그를 복사해서 chatGPT에게 svg 파일로 만들어달라고 요청한다.

chatGPT가 준 svg 파일 코드

images 디렉토리에 텍스트파일을 생성한 후, chatGPT가 주는 코드를 붙여넣는다.

이후 텍스트 파일의 확장자를 svg로 바꾸고 인코딩 utf-8로 저장하면 인스타그램의 홈 아이콘 svg 파일이 생성된다.

이 방법을 이용하여 인스타그램 네비게이션바를 구현하였다.

이런 방식으로 네비게이션 바의 선택 전/후 아이콘을 지정했다.

---

2. 인스타그램 네비게이션 바 구현 - 아이콘 클릭 시 전환

인스타그램 네비게이션 바에 있는 홈, 검색, 탐색 탭, 릴스, 메시지, 알림, 만들기, 프로필, Threads, 더 보기 창을 클릭하여 페이지를 전환하거나 왼쪽에서 슬라이드 형태로 컴포넌트가 나올 때 각각의 아이콘이 전환되는 것을 구현하였다. 클릭 시 다른 메뉴는 비활성화되고, 해당 버튼만 활성화되도록 처리한 것이다.

"use client";
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";

const navItems = [
  { label: "홈", icon: "main2_3.svg", selectedIcon: "main1_3.svg" },
  { label: "검색", icon: "main1_8.svg", selectedIcon: "main2_8.svg" },
  { label: "메시지", icon: "main1_4.svg", selectedIcon: "main2_4.svg" },
  { label: "알림", icon: "main1_6.svg", selectedIcon: "main2_6.svg" },
  { label: "Threads", icon: "main1_10.svg", selectedIcon: "main1_10.svg" },
  { label: "더 보기", icon: "main1_9.svg", selectedIcon: "main2_9.svg" },
  ...
  ];
  
  const Navbar = () => {
  const [active, setActive] = useState("홈");

  const router = useRouter();

  const NavButton = ({ item }) => {
    const isActive = active === item.label;

    const handleClick = () => {
      setActive(item.label);
      if (item.label === "홈") router.push("/main/pages");
      if (item.label === "메시지") router.push("../../messages");
      if (item.label === "프로필") router.push("/profile");
      ...
    };

    return (
      <button onClick={handleClick} style={{ /* ...스타일 생략 */ }}>
        <img
          src={`/images/main/${isActive ? item.selectedIcon : item.icon}`}
          width={24}
          height={24}
          style={item.isProfile ? { borderRadius: "50%" } : {}}
        />
        {item.label}
      </button>
    );
  };

  return (
    <nav>
      {navItems.map((item, idx) => (
        <NavButton key={idx} item={item} />
      ))}
    </nav>
  );
};

 

- navItems 배열을 선언하여 각 버튼 별 활성화 버튼과 비활성화 버튼을 관리하였음

- useState를 사용하여 현재 선택된 메뉴 상태 (state)를 저장하였음

- 각 버튼을 클릭 시 setActive()를 호출하여 상태를 업데이트 하였음

- 상태 업데이트 시 아이콘이 전환됨 (isActive ? selectedIcon : icon)

- const handleClick = () => {}을 활용하여 각 버튼을 클릭하면 각 페이지로 이동하도록 라우팅을 걸어놓았음

---

Future

1. 이번 주 내로 클론 코딩을 완성해야겠다. 특히 피드 게시물을 누르면 모달 컴포넌트가 뜨는 걸 꼭 제대로 구현할 것이다.

2. 이제 다시 공부 시작이다. 자바스크립트랑 리액트 공부가 제일 안되어 있다. 

3. 정처기, sqld 같은 시험은 부트캠프가 끝나면 해야겠다. 도저히 다른 공부할 시간이 안 난다. 이 과정을 최대한 흡수하는 게 먼저인 거 같다. 은은한 장작불처럼,,,