Vercel에서 Git 연동으로 배포 후 데이터베이스 생성 과정부분이다.

문제 상황

Create a Postgres database 을 진행하던 중 이 이미지를 보면 Postgres 데이터베이스를 선택하여 데이터베이스를 만들면 된다. 하지만 이런식으로 옵션이 아예 없었다.

원인

이전에는 Vercel에서 직접 PostgreSQL을 연결할 수 있었지만 2024.11월부터 모든 새로운 PostgreSQL 데이터베이스는 Neon을 통해 생성해야하며, 기존 데이터베이스는 Neon으로 자동 이전된다. 이처럼 서비스가 바뀌었던것...!!!

참고 https://vercel.com/docs/storage/vercel-postgres

해결

Neon를 통해 데이터베이스를 생성하면 문제없이 될 것이다. 👉🏻 Neon을 선택 후 continue 클릭한다.

Region을 보면 Korea가 없을 것이다. 사실 크게 중요한 부분은 아니지만 거리에 따라 속도에 영향을 줄 수 있어서 가까운 지역으로 선택하면 된다. 👉🏻 한국과 가장 가까운 싱가포르를 선택 후 나머지는 그대로 적용하고 continue를 클릭한다. 👉🏻Datebase Name은 원하는 걸로 설정한 후 create 를 클릭하면 데이터베이스 만들기 성공!

추가

그 후 Next.js 튜토리얼 과정을 보면 seed 과정이 있는데 그 코드의 한 부분을 보면

export async function GET() {
  // return Response.json({
  //   message:
  //     'Uncomment this file and remove this line. You can delete this file when you are finished.',
  // });
  try {
    await client.sql`BEGIN`;
    await seedUsers();
    await seedCustomers();
    await seedInvoices();
    await seedRevenue();
    await client.sql`COMMIT`;

    return Response.json({ message: 'Database seeded successfully' });
  } catch (error) {
    await client.sql`ROLLBACK`;
    return Response.json({ error }, { status: 500 });
  }
}

이 코드가 정상작동하는 코드이다. 주석 처리된 부분도 함께 살펴보면 return이 실행되면 함수는 종료하게 된다. 그래서 try 문 안으로 진입하지 못하기 때문에 기존 코드에서 첫번째 return를 주석하거나 삭제해서 seed 할 수 있는 코드로 만들어줘야한다.

참고 https://hyeyeong1011.github.io/2020-03-11-post37/ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return

마무리하며

개발 환경은 언제든지 변경되고 업데이트 된다. 항상 학습하며 배워가는 자세를 유지하도록 노력하자!!는 다짐을 한 번 더 할 수 있는 계기가 되었다.

state는 간단히 말하면 변수이다. 하지만 일반 변수와 다르게 값이 변하면 렌더링이 일어난다. 리액트는 컴포넌트 외부에 마치 선반에 보관하듯 state를 저장한다. 즉 state의 스냅샷을 저장한다고 생각하면 된다. 여기서 중요한 점은 state는 객체라는 것이다!

참고 https://ko.react.dev/learn/state-as-a-snapshot

state setter 함수

state 변수를 업데이트하고 리액트에 컴포넌트를 다시 렌더링하도록 유발하는 함수이다.

setState(useState)를 사용해야하는 이유

컴포넌트는 업데이트가 필요한 경우에만 render 함수를 호출한다. state를 직접 변경하면 리액트가 render 함수를 호출하지않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있기 때문이다.

render 함수가 호출되는 상황은 언제지???? 리액트의 컴포넌트는 생성된 후 마운트 상태에서 한 번 render() 메서드를 실행하고 난 후 업데이트 상태에 진입할때만 다시 호출한다.

그러면 언제 업데이트 상태로 진입하는데..?

• state, props 가 변경되었을때
• Context API를 사용하는 경우 Context값이 변경되었을때
• 부모 컴포넌트가 렌더링 되었을때

❓state가 변경 되었을때 업데이트 상태로 진입한다는데??!

여기에서 다시 살펴봐야할 개념은 state의 저장 방식이 객체라는 것이다. 객체가 변경되었다는 근거는 객체의 메모리 주소로 판단한다. 그래서 객체를 직접 수정하면 메모리 주소가 변하지 않기 때문에 리액트는 변경이 없다고 판단하여 업데이트 상태로 진입하지 않는것!!! 따라서 직접 변경하지 않고 새로운 객체를 만들어서 할당하는 것으로 변경해야하고 그래서 setState(useState)를 사용하는 것이다.

결론

state를 직접 변경하면 객체로 저장되는 state의 메모리 주소가 변경되지않았기때문에 React가 업데이트 상태로 인지하지 못하여 렌더링이 발생하지 않는다. 따라서 setState(useState)를 사용해여 새로운 객체를 만들어 할당해줘야한다.

참고

1. [리액트 공식 문서] https://ko.react.dev/learn/updating-objects-in-state
2. https://velog.io/@codns1223/React-state-%EB%B3%80%EA%B2%BD%EC%8B%9C-setState%EB%A1%9C-%EB%B3%80%EA%B2%BD%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

들어가며

일단 이 단어들은 렌더링에 관련된 단어들이다. 웹 렌더링(Web Rendering)이란? 웹 페이지를 사용자에게 보여주는 과정을 의미한다.

그리고 SPA와 MPA에 대해서도 알고 가면 좋은데

SPA: Single Page Application

하나의 HTML 페이지에서 새로운 페이지를 불러오지않고 필요한 부분만 동적으로 컨텐츠를 바꾸는 애플리케이션을 말한다. (React, Vue, Angular)

MPA: Multiple Page Application

여러 개의 페이지로 이루어져 있으며 사용자가 페이지를 요청할 때마다 서버에서 렌더링된 HTML를 받아와서 컨텐츠를 변경하는 애플리케이션을 말한다.

정리하자면 SPA는 첫 페이지만 서버에서 받아오고 필요한 부분만 동적으로 변경하고 MPA는 페이지가 달라질 때마다 서버에서 렌더링 된 파일들을 받아온다.

이제 이러한 애플리케이션을 구현하기 위해 쓰이는 렌더링 방식이 CSR, SSR ... 이다!

CSR(Client Side Rendering)

클라이언트 사이드 렌더링으로 웹 브라우저에서 JavaScript를 사용하여 웹페이지를 렌더링하는 방식이다. 즉, 사용자의 브라우저가 서버로부터 데이터를 받아와서 웹 페이지를 직접 생성한다. SPA(React, Vue, Angular)가 사용하는 렌더링 방식을 의미한다. 쉽게 말하자면 렌더링이 클라이언트 측에서 일어나는 방식이다.

SSR(Server Side Rending)

서버 사이드 렌더링으로 서버에서 HTML을 완성하여 브라우저로 보내는 방식이다. 즉, 새로운 페이지로 이동할 때마다 서버에서 렌더링을 마친 HTML을 받아와서 렌더링한다. MPA를 구현할 때 사용되며 서버측에서 렌더링을 담당하는 방식이다.

❓궁금한점

Q) 각각 어떤 페이지를 구현할때 좋은가?

A) CSR: 사용자와의 상호작용이 많은 웹사이트나 검색엔진이 중요하지않은 웹사이트 SSR: 동적 콘텐츠가 많은 웹사이트, 콘텐츠가 실시간으로 변경되고 항상 최신 상태의 웹사이트

Q) 내 생각에는 대부분의 웹페이지가 콘텐츠가 실시간으로 바뀌지않나?

A) 내가 콘텐츠가 실시간으로 바뀐다고 생각했던 것은 사실 사용자와의 상호작용이 많은 것과 헷갈렸던 부분이다. 정리하자면 CSR은 소셜 미디어나 주식 차트 등과 같이 사용자의 행동이 즉시 반영되고 실시간 데이터에 따라 변경되어야하는 웹사이트에 적합하고 SSR은 뉴스 웹사이트, 블로그, 전자상거래 상품 페이지 등 동적 콘텐츠가 페이지 요청마다 갱신되어야하는 경우에 적합하다.

따라서 이 두 강점을 모두 활용하기 위해 Next.js 프레임워크를 사용하게 된 것이다~!

SSG(Static Site Generation)

정적 사이트 생성으로 빌드 시에 모든 페이지를 HTML로 미리 생성하는 방식이다. 즉 매 요청마다 HTML을 재사용한다. 따라서 회사, 제품 소개(마케팅 페이지), 블로그 게시물과 같이 요청마다 동일한 정보로 반환하는 경우에 사용된다.

ISR(Incremental Static Regeneration)

증분 정적 재생성으로 빌드 시점에 페이지를 미리 생성하면서도 특정 시간 간격으로 페이지를 재생성하여 업데이트된 데이터를 반영할 수 있게 한다. 즉, 일부페이지는 자주 업데이트되고 다른 일부 페이지는 그렇지 않은 경우에 사용할 수 있다.

마무리하며

이번 정리를 통해 Next.js를 사용하게 된 이유도 알게 되었고 헷갈렸던 개념을 확실히 정리할 수 있었다. 렌더링되는 과정을 이해하는 것이 코드를 구현하는데 더 효율적으로 다가갈 수 있다고 생각하여 중요하게 느껴진다. 렌더링 되는 과정을 생각하며 거기에 맞는 기술을 더 공부하고 사용해봐야겠다.

출처 및 참고 https://yong-nyong.tistory.com/86 https://www.enjoydev.life/blog/frontend/5-csr-ssr https://enjoydev.life/blog/nextjs/1-ssr-ssg-isr

하드 스킬의 발전

1. HTML, CSS

6개월 전 HTML로 간단한 페이지의 틀을 작성하고, CSS로 기본적인 스타일링을 할 수 있는 정도였다. 태그, 마진, 패딩 같은 기초 용어만 이해하고 있었고, 복잡한 구현은 어려웠다. 6개월 후 HTML과 CSS가 프론트엔드 개발의 기본이자 핵심이라는 것을 깨달았다. 특히 폼 태그의 중요성과 다양한 활용법을 익혔으며 CSS 속성을 모두 외우기보다는 적절히 검색하고 활용하는 방법을 배우게 되었다. 이를 통해 React 등 더 복잡한 프레임워크에서도 기본기를 활용할 수 있는 자신감을 갖추게 되었다.

2. JavaScript, TypeScript

6개월 전 JavaScript는 단순히 영상을 보며 따라 해본 정도로 투두리스트를 만들어보았었고 TypeScript는 그런 언어가 있구나만 알고 전혀 알지 못했다. 6개월 후 JavaScript DOM으로 요소를 선택해 동적으로 구현하는 법과 JQuery, Axios를 사용하여 백엔드와 연결하는법, RESTful로 한 프로젝트를 완성할 수 있는 정도까지 발전하였다. 그리고 TypeScript를 사용하는 이유와 타입을 지정하여 오류를 줄이고 안정성을 높일 수 있게 되었다.

3. React, Redux Toolkit

6개월 전 React로 간단한 블로그를 영상을 보며 따라 만들어본 경험이 있었으며 여러 훅 중 useState만 알고 있었다. Redux와 Redux Toolkit은 전혀 알지 못했다. 6개월 후 React를 사용해 하나의 프로젝트를 완성할 수 있게 되었으며 useState는 물론 useEffect, useCallback, useRef와 같은 다양한 훅을 활용할 수 있게 되었다. 또한 React Hook Form과 같은 라이브러리를 사용해 폼 데이터를 효율적으로 관리할 수 있었다. Redux Toolkit을 활용해 전역 상태 관리도 가능해져, 보다 구조적인 애플리케이션 설계 능력을 갖추게 되었다.

4. Node.js, Java, Spring Boot

6개월 전 프론트엔드 개발자로서 백엔드 언어는 중요하지 않다고 생각해 깊이 배우지 않았다. 6개월 후 백엔드와의 원활한 소통이 프로젝트 완성에 필수적이라는 것을 깨달았다. RESTful API 구조를 이해하게 되었으며 엔드포인트와 HTTP 메서드의 역할을 분석해 Axios를 활용한 비동기 통신을 구현할 수 있게 되었다. 이를 통해 백엔드와 협업하며 기능을 통합하는 경험을 쌓았다.

소프트 스킬

1. 의사소통능력

프로젝트 진행 중 역할 분담과 문제 해결을 위해 적극적으로 소통하며 서로 다른 팀원 간의 의견을 조율하는 방법을 익혔다. 대면 의사소통뿐만 아니라 Jira, Slack과 같은 협업 도구를 활용한 비대면 소통 방식도 효과적으로 사용할 수 있게 되었다.

2. 협업능력

팀 프로젝트를 통해 개발자 간의 협업이 얼마나 중요한지 깊이 체감했다. 특히 백엔드와의 협업 과정에서 API 설계와 데이터 흐름을 명확히 이해하고 이를 바탕으로 효율적으로 소통하는 방법을 배웠다.

3. 문제해결능력

개발 과정에서 마주한 크고 작은 문제들을 해결하며 성장할 수 있었다. 공식 문서와 개발자 커뮤니티를 적극적으로 활용해 문제를 해결하는 방법을 익혔고 이를 기록으로 남기는 습관을 들였다. 또한 동료 개발자들과 논의를 통해 함께 해결책을 모색하며 성장의 기회를 만들어냈다.

마무리하며...

6개월 동안 꾸준히 열심히 하다보니 '우수상'이라는 노력의 결과물을 받게 되었다. 교육 과정을 통해 개발이 즐겁게 느껴졌고 이를 계기로 꼭 훌륭한 개발자가 되겠다고 결심했다. 특히 부담없이 질문할 수 있는 동료이자 선배 개발자로 성장하는 것을 큰 목표로 삼고 있다. 이제 취뽀를 위해 화이팅!!!

검색 화면에서 특정 키워드로 검색했을때 동일한 데이터 요청이 두 번 발생하는 문제를 발견하였고 네트워크 탭과 콘솔 로그를 통해 요청 흐름을 추적하였다.

• 검색 버튼을 클릭하면 검색 결과 조회 API 함수가 두 번 호출
• 네트워크 탭에서 동일한 API 호출이 중복으로 발생한 것을 확인

문제 원인 분석

useEffect 의존성 배열 관리

• 페이지(page) 상태 변화에 따라 useEffect가 실행되도록 설정했지만 검색 시 페이지 초기화(setPage(0))하는 로직이 추가 렌더링을 유발
• 페이지가 0으로 변경된 후에도 useEffect가 실행되면서 의도치 않은 중복 API 요청 발생

  // 검색 함수
  const handleSearch = async (
    searchTerm: string,
    searchCategory: string,
    sortBy?: SortType
) => {
    setIsSearching(true);
    setCurrentSearchTerm(searchTerm);
    setSortBy(sortBy);
    setCategory(searchCategory);
    setPage(0); // 검색 시 페이지를 0으로 초기화
    // 이후 useEffect에서 page 변경을 감지하여 추가 렌더링을 유발
    try {
      const reqData: defaultPostReq = {
        category: searchCategory,
        keyword: searchTerm,
        sort: sortBy,
      };
      console.log('reqData>>>', reqData);
      const response = await getSearchPlaceList(reqData);
      console.log('response >>>', response.data.content);
    }};

useEffect(() => {
  if (page === 1) return; // page가 0일 때도 API 호출
  // ... API 호출
}, [page, currentSearchTerm, sortBy, category]);

결론 상태 관리와 데이터 요청 로직이 하나의 컴포넌트에 구현되어있어 상태 변경 시 불필요한 렌더링이 유발되는 것을 확인하였다.

해결 방법

1. 상태 관리와 데이터 요청 로직 분리 상태 변경에 따른 데이터 요청 로직을 별도의 함수(fetchPlaces)로 분리
2. 의존성 최적화

• useCallback 훅을 사용해 fetchPlaces 함수가 의존성 변경 시에만 업데이트되도록 최적화
• 불필요한 상태 의존성을 제거하고 컴포넌트가 필요한 경우에만 재렌더링되도록 함

// 데이터 패칭 로직을 useCallback으로 감싸기
const fetchPlaces = useCallback(
    async (
      searchTerm: string,
      searchCategory: string,
      sortType: SortType,
      pageNum: number,
      isNewSearch: boolean
    ) => {
      try {
        setIsLoading(true);

        if (searchTerm) {
          const reqData: defaultPostReq = {
            keyword: searchTerm,
            category: searchCategory,
            sort: sortType,
          };
          const response = await getSearchPlaceList(reqData);
          const newPlaces = response.data.content;

          setPlaces((prev) =>
            isNewSearch ? newPlaces : [...prev, ...newPlaces]
          );
          setHasMore(newPlaces.length === 6);
        } else {
          const result = await getDefaultPlaceList(pageNum - 1, 6);
          const newPlaces = result.data.content;

          setPlaces((prev) =>
            isNewSearch ? newPlaces : [...prev, ...newPlaces]
          );
          setHasMore(newPlaces.length === 6);
        }
      } catch (error) {
        console.error('데이터 로딩 중 에러:', error);
        if (isNewSearch) setPlaces(dummyPlaceList);
      } finally {
        setIsLoading(false);
      }
    },
    []
  );

=> 데이터가 패칭되는 로직은 자주 호출되기때문에 useCallback를 사용하여 불필요한 재생성을 막아준다.

배운 점

1. useEffect의 의존성 배열에 따라 발생하는 재렌더링의 영향을 명확히 이해하게 되었다.
2. 상태 관리 로직과 데이터 요청 로직이 분리되지 않은 경우 의존성이 복잡해지고 디버깅이 어려워진다는 점을 깨달았다. 특히, 데이터를 비동기로 처리하는 컴포넌트에서는 하나의 책임만을 가지도록 설계하는 것이 중요하다는 점을 배웠다.

참고 https://pinenamu.tistory.com/416

1. 프로젝트 소개

Kinderpia

진행기간: 2024.10.21 ~ 11.08 팀 구성: 백엔드 (4명), 프론트엔드 (4명) 주제: 부모와 아이가 함께하는 문화생활 플랫폼 -> 아이들과 함께 갈만한 문화공간의 정보를 제공하고 같은 관심사를 가진 가족들이 모임을 만들 수 있도록 제공하는 사이트 기술 스택:

• TypeScript: 정적 타입 검사로 타입의 안정성을 확보
• React: 컴포넌트 기반 구조로 재사용성 향상
• Sass: 효율적인 스타일 관리
• Spring Boot: 빠른 개발과 설정을 최소화하고 유연한 아키텍처를 제공
• JAP: 객체 지향적 데이터 접근 방식으로 효율적인 데이터 관리
• JWT: 정보를 저장할 필요없이 인증에 사용할 수 있음

  2. 내가 맡은 역할

  포지션: 프론트엔드 구현 기능:

1. 장소 검색 기능

2. 리뷰 작성, 삭제, 신고

   3. 회고

   Liked

   • 백엔드와 원활한 소통 개발 도중 발생한 이슈들을 즉각 공유하고 서로 필요한 데이터를 명확히 전달하면서 효율적인 협업을 진행하였다. 경험을 통해 백엔드와 소통하는 방법을 깨달았다.
   • 협력의 가치 실천 지난 팀 프로젝트가 끝난 후 혼자 해결하려는 부담에서 벗어나 각자의 역할에 최선을 다하고 필요할 때 도움을 주고받는 협력의 가치를 깨달았고 이번 프로젝트에서 이를 잘 반영하여 함께하는 과정에서 느낄 수 있는 성취감을 느꼈다.

Lacked

• 데이터 전달의 아쉬움 각 페이지에서 필요한 데이터를 미리 고려하지 않아 전역 상태 관리를 효과적으로 활용하지 못했다. 실제로 장소상세페이지에서 장소정보, 리뷰 등 여러 컴포넌트로 분리하면서 상태를 props로 전달하는 과정에서 복잡함에 어려움을 있었다.

Learned

• 브라우저 간의 스타일 차이 최소화 CSS reset 파일을 사용함으로써 일관된 다자인과 스타일을 더 깔끔하게 적용할 수 있는 방법을 알게 되었다.
• 리더십의 중요성 다인원 팀으로 진행하면서 확실한 리더십의 중요성을 깨달았다. 많은 사람이 있는 만큼 다양한 의견이 있었고 이를 정리하고 중재하며 결단을 내리는 역할이 필요하다는 것을 절실히 느꼈다.

Longed for

• 성능 최적화 이제는 단순히 기능을 구현하는 데 그치지 않고 성능을 고려하여 최적화된 코드와 효율적인 작업 방식을 적용하고 싶다. 그로 인해 사용자의 경험을 더 향상시킬 수 있도록 노력할 것이다.
• 테스트 코드 작성 한 기능을 구현하기 전에 테스트 코드 작성을 통해 버그를 줄이는 방식을 실천해 팀원들과 코드 리뷰를 적극적으로 진행하여 더 나은 결과물을 만들것이다.

Layered Architecture

그 전에 Layered Architecture 구조에 대해 살짝 정리해보자. 애플리케이션을 몇 가지 계층으로 나누어 만드는 아키텍처로 각 계층은 특정 기능에 집중하여 상위 계층은 하위 계층의 구체적인 구현을 알 필요가 없다. 또한 계층 간의 의존성을 최소화하여 유지보수와 확정성을 향상 시킨다. 각 계층의 특징을 간단히 알아보자면!

1. Presentation Layer

• 스프링 부트의 controller 패키지에 해당
• HTTP 요청을 처리하고 응답을 반환 -> 클라이언트 요청 수신 및 파라미터 추출

2. Business Layer

• 스프링부트의 service 패키지에 해당
• 복잡한 비즈니스 로직 구현
• DTO, Domain 객체간 변환 로직 구현

3. Persistence Layer

• 스프링부트의 repository 패키지 해당(인터페이스)
• 데이터베이스와의 상호작용 및 데이터 접근 로직 구현 -> CRUD 연산 수행

4. Database Layer

• 실제 데이터베이스 시스템

DTO와 Domain의 차이

DTO란?

• Data Transfer Object로 계층 간의 데이터 교환을 위한 자바 객체.(= Java Beans)
• DB에서 데이터를 얻어 service나 controller로 보낼 때 사용하는 객체. -> 계층 간의 데이터 교환을 위해 사용 ex) View <- DTO -> Controller <- DTO -> Service
• View와 통신하기 위한 클래스.
• 비동기 처리를 위해 사용

Domain이란?(= Entity)

• DB 테이블에 존재하는 Column들을 필드로 가지는 객체. -> DB 테이블과 1대 1 대응
• 테이블과 링크될 클래스.

DTO와 Domain를 분리하는 이유

• Domain은 테이블 매핑 클래스로 변경 사항이 생기면 다른 여러 클래스에 영향을 주기 때문
• DTO은 request/reponse 에 대한 부분이나 View 관련 Presentation Logic을 가지는 자주 변경되는 클래스이다.
• 즉, DTO는 Domain 을 복사해와서 Presentation Logic을 추가하거나 DTO 상에서만 필요한 필드를 추가, 삭제한 클래스 구조이다.

결론

Layed Architecture는 각 계층 간 책임이 명확히 분리되어있다. 이 특징으로 클라이언트와의 통신이나 서비스 간 데이터 전송을 담당하는 DTO, 데이터베이스와 매핑되는 Domain(Entity)을 분리하여 사용!!!

마무리하며

두 객체가 비슷해보여 분리해서 사용해야하나? 싶었는데 각 계층의 책임을 분리하기 위하여 사용해야한다는 것을 깨달았다. Domain의 변경이 외부에 영향을 미치지 않고 DTO는 필요에 따라 유연하게 수정할 수 있다는 역할도 확실히 정리하게 되었다. 끝-- (자바 개념 참 어렵다...)

참고 및 출처

1. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
2. https://youwjune.tistory.com/39
3. https://velog.io/@linger0310/DDD
4. https://silverline.tistory.com/134

Java와 데이터베이스 연동하는 방식

1. SQL Mapper, ORM 다른 라이브러리와 스프링을 통합하여 사용하는 방식
2. 스프링 데이터 (Spring Data) 객체 기반의 추상화된 데이터 연동 방식
3. 스프링 JDBC SQL 중심의 데이터베이스 연동 방식으로 순수 JDBC를 조금 더 편리하게 사용할 수 있도록 도와주는 도구

여기서 잠깐 JDBC란?

• 자바언어와 데이터베이스를 연결해주는 통로
• 자바에서 데이터베이스에 접근할 수 있도록 해주는 자바 API
• 단점: 반복적이고 지루한 코드 작성이 필요하며 SQL 예외 처리, 리소스관리 등의 복잡한 작업을 직접 처리해야함.

Spring JDBC, SQL Mapper, ORM 차이

1. Spring JDBC JDBC의 복잡성을 줄이기 위한 스프링 프레임워크의 일부 직접 SQL 쿼리를 작성하고 실행, 저수준의 데이터베이스 연동 방식

2. SQL Mapper MyBatis가 속한다. (가장 널리 알려짐) SQL 쿼리와 자바 객체를 매핑하는 방식으로 SQL을 직접 작성하지만 객체와의 매핑을 자동으로 처리한다. 따라서 데이터베이스 중심의 개발!!

3. ORM Hibernate가 속한다. (가장 널리 알려짐) 자바 객체와 데이터베이스 테이블 간의 관계 매핑 방식으로 자바 객체(Entity)가 데이터베이스의 테이블과 어떻게 매핑 될지를 정의한다. 따라서 객체 중심의 개발!!

마무리하며

Spring JDBC, SQL Mapper, MyBatis .... 등등 어떤게 어디에 속하고 어떤게 무슨 역할을 하고 헷갈렸는데 정리가 싹 됐다. 이제서야 각각의 연동하는 방식을 이해할 수 있게 되었다. 끝-

참고 및 출처

1. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
2. https://ittrue.tistory.com/250
3. https://mysterlee.tistory.com/49

아파치 (Apache)

아파치는 아파치 소프트웨어 재단에서 만든 웹서버(web server)로 정적 리소스를 응답한다. (80포트)

Web Server? http 프로토콜 기반으로 브라우저로부터의 요청을 서비스하는 기능을 담당하는 프로그램으로 정적인 데이터에 대한 처리를 담당한다.

톰캣 (Tomcat)

웹 서버와 웹 컨테이너의 결합으로 WAS(웹 애플리케이션 서버)이다. 동적인 데이터를 처리한다. (8080포트) JSP와 서블릿을 처리한다.

WAS? (Web Application Server) 여러 웹 클라이언트의 요구를 웹서버가 감당할 수 없는 기능을 구조적으로 웹서버와 분리하기 위해 만들어진것이다. 동적인 데이터 처리를 담당한다.

+ AP 서버(애플리케이션 서버) 자바 웹 애플리케이션을 구동하기 위해 필요한 프로그램으로 Tomcat이 이에 해당한다.

JSP (Java Server Pages)

HTML 코드에 Java 코드를 넣어 동적 웹 페이지를 생성하는 웹 애플리케이션 도구로 서블릿을 작성하지 않고도 간편하게 웹프로그래밍을 구현하게 만든 기술이다. Java소스를 사용하여 웹페이지에 접근하고 페이지 전환을 통하여 웹브라우저에 전달한다.

Servlet 서블릿

요청을 수신하고 응답을 반환하는 프로그램을 만들기 위한 자바 표준 기술이다. 즉 동적 웹페이지를 만들때 사용한다.

<특징>

• Servlet 클래스를 AP 서버(애플리케이션 서버-톰캣)에 등록하면 HTTP 요청에 대응하여 AP서버가 Servlet 객체의 메서드를 호출
• MVC 패턴에서 컨트롤러로 이용
• 웹 컨테이너에서 실행

<동작과정>

1. 클라이언트 요청
2. 서블릿 객체 생성
3. 어느 서블릿에 대해 요청한 것인지 탐색 후 호출
4. 동적 페이지 생성 후 응답 전송

JSP VS. Servlet JSP: HTML 페이지 내에서 자바 코드를 삽입 (뷰 생성) Servlet: HTML을 자바 코드 내에서 출력 (비즈니스 로직 처리)

결론!! 스프링부트는 아파치톰캣이 내장되어있어 따로 설치가 불필요하다!~!

마무리하며

이정도 개념으로 이해하고 넘어가도 될 것같다. 결론만 기억하면 된다. 스프링부트는 애플리케이션 서버가 내장되어있어 따로 설치 및 설정을 안해도 쉽게 서버를 실행하고 배포할 수 있다는 것이다.

출처 및 참고

1. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
2. https://inpa.tistory.com/entry/TOMCAT-%E2%9A%99%EF%B8%8F-%EC%84%A4%EC%B9%98-%EC%84%A4%EC%A0%95-%EC%A0%95%EB%A6%AC
3. https://velog.io/@falling_star3/Tomcat-%EC%84%9C%EB%B8%94%EB%A6%BFServlet%EC%9D%B4%EB%9E%80
4. https://velog.io/@remon/%EA%B0%9C%EB%B0%9C-%EA%B8%B0%EB%B3%B8-%EC%A7%80%EC%8B%9D-WEB%EC%95%84%ED%8C%8C%EC%B9%98%EA%B3%BC-WAS%ED%86%B0%EC%BA%A3-%EC%B0%A8%EC%9D%B4

main 메소드란?

가장 먼저 실행되는 메소드로 자바 프로그램의 "시작점"이다.

자바 프로그램이 시작될 때 JVM은 메인 클래스를 먼저 찾고 그 클래스의 main 메소드를 실행한다.

그렇다면 main 메소드의 코드를 분석해보자!

public class Main {
    // main 메소드
    public static void main(String[] args) {

    }
}

main 메소드 코드 분석

다음과 같이 5가지로 나눠볼 수 있다.

출처) https://velog.io/@gyoung9707/Java-main-%EB%A9%94%EC%84%9C%EB%93%9C

접근제어자 - public

• 외부에서 접근할 수 있는 일종의 제약의 역할
• 여기에서 public은 모든 클래스에서 접근이 가능하다는것을 의미
• public을 사용한 이유: 모든 실행 프로그램의 기본이 되는 함수로 어디에서나 접근이 가능해야하기 때문이다.

• JVM이 접근!

정적 함수 - static

• 클래스가 생성되는 순간에 메모리를 할당 받음
• 즉, 객체를 생성하지 않아도 static 멤버에 접근이 가능
• static를 사용한 이유: 객체가 생성되지 않은 상태에서도 메소드를 호출할 수 있어야하기 때문이다.

리턴타입 - void

• 메소드가 끝날 때 리턴값이 없음을 의미
• main 메소드는 프로그램의 실행을 시작하고 모든 동작을 마친 후 JVM으로 돌아가는데 이때 실행 후 반환해야 할 값이 없음.
• void를 사용한 이유: JVM이 프로그램을 시작하고 끝낼 때 별도의 값을 기대하지않기 때문

메소드명 - main

• 변경 불가능!
• JVM가 진입점으로 인식하지 못해 오류 발생

매개변수 - String[] args

• args 문자열을 배열로 사용하겠다는 의미
• 프로그램을 실행할 때 특정한 정보를 입력 받아 그에 맞게 동작하게 하며 그것을 받는 공간
• 즉, 커맨드 라인 인자를 받기 위한 배열 참고) https://lordofkangs.tistory.com/12

마무리하며

main 메소드를 정리하며 접근제어자와 static 그리고 리턴타입에 대해서도 정리하게 되어 자바 수업을 더 이해할 수 있게 된 거같아 정리하길 잘했다라는 생각이 든다. 자바 수업도 열심히 들어서 백엔드와 소통이 더 잘 되는 프론트엔드가 되자!

출처 및 참고

1. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
2. https://devparker.tistory.com/10
3. https://velog.io/@gyoung9707/Java-main-%EB%A9%94%EC%84%9C%EB%93%9C

• Liked : 좋았던 점은 무엇인가?
• Lacked : 아쉬웠던 점, 부족한 점은 무엇인가?
• Learned : 배운 점은 무엇인가?
• Longed for : 앞으로 바라는 것은 무엇인가?

1. 프로젝트 소개

Smile Hub

• 주제: 새상품 정보를 알 수 있는 중고거래 사이트
• 주제 선정 이유: 중고상품 구매 시 새상품 가격 비교를 위한 다른 사이트 방문의 번거러움을 줄이고자 함.

진행기간 2024.08.26 ~ 09.13 (3주)

팀 구성 백엔드: 2명 / 프론트엔드: 2명

기술스택

• 백엔드: node.js, express, npm, sequelize, multer, mysql
• 프론트엔드: JavaScript, React, Redux-Toolkit, JWT, Axios, Tailwind-css
• 서버: AWS, Nginx, EC2, RDS, S3
• 소통: Git, GitHubm Pigma

2. 내가 맡은 역할

포지션 프론트엔드

구현 기능

1. 로그인 / 회원가입 (카카오 주소 API)
2. 마이페이지 (프로필 업로드, 찜/구매/판매 내역, 배송현황)

3. 회고

Liked

• 책임감 이번 프로젝트에서는 새벽까지 작업을 해야 하는 날이 많았다. 팀 내 문제로 인해 시간이 부족해졌고 원래 맡았던 것보다 많은 부분을 해결해야했다. 그럼에도 시간을 더 투자하여 끝까지 해냈다. 만약이 책임감이 없었더라면 완성하지 못했을 것이다.
• AI의 도움을 최대한 안 받을려고 한 노력 지난 교육 중간평가에서 검색을 통해 구현하는 능력이 많이 부족하다는 걸 느꼈다. 그 후로 학습 과정에서 최대한 AI의 도움없이 문제를 해결하려고 노력했다. 이번 2차 프로젝트에서도 그런 노력 자체를 했다는 점에서 잘했다고 말하고싶다.

Lacked

• 많은 기능을 보여줄려고 했던 욕심 기업에 팀의 결과물로 많은 기능을 구현했다는 점을 어필해야 한다는 압박을 느꼈던 것 같다. 설계 단계에서 너무 많은 기능을 기획한 점이 아쉬웠고 부족한 점이다.
• 팀원끼리의 소통 백엔드와 프론트엔드의 소통, 프론트엔드끼리의 소통 모두 아쉬웠다.
  1. 백엔드와 프론트엔드 API 명세서를 먼저 정리하지 않은 탓에 연결 과정이 오래 걸렸다.
  2. 프론트엔드 남은 작업량에 대해 제대로 공유하지 않고, '잘하고 있겠지'라는 생각에 소통이 부족했다. 이 경험을 통해 객관적으로 일정을 공유하고 공용 문서를 정리하는 도구들의 필요성을 느꼈다. 앞으로는 이러한 도구들을 적극 활용해야겠다.

Learned

• 덜어낼 줄 알아야한다 많은 기능을 보여줘야 한다는 욕심과 압박때문에 기능을 덜어낼 적절한 타이밍을 놓쳤다. 이번 2차 프로젝트를 통해 어필할 기능과 포기할 기능을 구분하는 법을 배웠다.
• React의 확장성 수업때 배운 개념으로말고도 프로젝트를 진행하면서 React의 다양한 확장성을 알게 되었다. 앞으로 다양한 프로젝트를 통해 계속 배워나가야겠다는 것을 깨달았다.

Longed for

• 다양한 사이트를 많이 보는것 1차 프로젝트때도 느꼈지만좋은 사이트뿐만 아니라 안 좋은 사이트도 많이 보며 디자인과 개발 감각을 익히는 것이 중요하다는 것을 깨달았다. 앞으로 이런 부분을 더 열심히 노력해야겠다고 생각했다.

Redux 상태가 새로고침시 초기화 되는 이유

리덕스는 메모리 내에서 상태를 관리하게 된다. 그래서 새로고침을 하면 브라우저의 메모리가 초기화되기 때문에 리덕스 스토어의 상태도 사라지는 것이다. 따라서 리덕스 미들웨어를 사용하거나 Redux Persist 라이브러리를 활용할 수 있다. 이번에는 Redux Persist을 사용해보았다.

Redux Persist

리덕스 상태를 지속적으로 저장하고 복원하기 위한 라이브러리이다. 로컬 스토리지나 세션 스토리지에 저장하여 페이지가 새로고침 되어도 상태를 유지할 수 있게 해준다.

설치

npm install redux-persist

개념

1. persistReducer: 상태를 로컬 스토리지에 저장할 수 있도록 rootReducer를 감싸는 역할
2. persistStore: 상태를 로컬 스토리지에서 불러오고 저장소를 생성
3. persistGate: 상태를 복원할 때까지 대기하는 동안 로딩 컴포넌트를 표시

// 기본 설정
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 기본 로컬 스토리지 사용
import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

// 스토어 사용
import { PersistGate } from 'redux-persist/integration/react';

function App() {
  return (
    <PersistGate loading={null} persistor={persistor}>
      <YourComponent />
    </PersistGate>
  );
}

문제 상황 1

로그인할 때 상태를 로컬 스토리지에 저장하였다. 근데 이메일, 비밀번호를 잘못 입력시에 보여주는 에러메시지는 새로고침하면 사라져야한다. (에러메시지도 기본 상태에서 관리되는 필드 - error)

해결

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['error'], // 'error' 상태를 persist하지 않도록 설정
};

• blacklist: 특정 리덕스 스토어의 상태를 로컬 스토리지에 저장하지 않도록 설정하는 기능. 즉, 새로고침 시 저장되지않고 항상 초기 상태로 돌아간다.
• 활용 사례: 사용자 입력을 받는 폼의 상태처럼 임시로 필요한 데이터는 저장할 필요가 없을 때, 특정 상태가 항상 초기 상태로 시작해야하는 경우 따라서 error 상태는 이메일이나 비밀번호가 틀렸을 경우에만 보여줘야하므로 저장할 필요가 없어서 blacklist 기능을 사용하였다.

문제 상황2

로컬 스토리지에 저장된 isAuthentication(권한의 유뮤를 boolean 값으로 표현)가 중복되어 출력하는 문제 즉, boolean 값이 로컬 스토리지에 문자열로 저장되는 문제이다. 정리하자면,

1. 로컬 스토리지의 저장 방식: 로컬 스토리지는 모든 데이터를 문자열로 저장
2. 상태 복원 방법: Redux Persist는 상태를 복원할 때 문자열로 저장된 그대로 사용하게 되어 타입이 일치하지 않는 문제가 발생하여 중복 출력이 발생할 수 있다.

해결

stateReconciler를 사용하여 inboundState에서 복원된 상태를 처리하고 isAuthenticated의 값을 boolean 타입으로 변환한다.

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['error'], // 'error' 상태를 persist하지 않도록 설정

  // 사용자 데이터를 다시 불러올 때 boolean으로 변환
  stateReconciler: (inboundState, originalState, reducedState) => {
    // inboundState: 로컬 스토리지에서 복원된 상태
    // originalState: Redux스토어의 현재 상태
    // reducedState: 리듀서에서 반환된 상태

    if (inboundState && inboundState.currentUser) {
      // isAuthenticated 값이 string이면 boolean으로 변환
      inboundState.currentUser.isAuthenticated = 
        inboundState.currentUser.isAuthenticated === 'true' ? true : false;
    }
    return reducedState;
  },
};

마무리하며

Redux의 사용법에 대해 한가지 더 알게 되었다. 전역으로 상태를 관리하지만 메모리에 저장되어 새로고침시 그 상태가 초기화된다. 이 상태를 로컬 스토리지나 세션 스토리지에 저장해야지만 그 상태값을 사용할 수 있다. 이번에는 Redux Pesiste 방법을 사용해봤지만 더 공부해서 다음에는 다른 방법도 적용해보아야겠다.

출처 및 참고

1. https://www.npmjs.com/package/redux-persist
2. https://velog.io/@bcl0206/%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8-%ED%9B%84%EC%97%90%EB%8F%84-store-state-%EC%9C%A0%EC%A7%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-Redux-persist

여기서 잠깐! React Hook Form이 뭘까?

React Hook Form은 React 애플리케이션에서 폼을 간단하고 효율적으로 관리할 수 있도록 돕는 라이브러리이다.

• 가볍고 빠른 성능: 불필요한 리렌더링을 줄여 성능을 최적화한다.
• 편리한 검증 기능: 내장된 유효성 검사를 통해 간편하게 검증 기능을 사용할 수 있다.

문제 상황

React 프로젝트에서 회원가입 폼의 입력 항목을 React Hook Form을 사용하여 관리하였다. 그 중에서 주소 입력은 Kakao 주소 API를 통해 사용자로부터 값을 받아와 Redux Toolkit으로 상태를 관리하였다.

문제 상황

• Input 필드로 입력한 값은 Redux 상태에 정상적으로 업데이트
• Kakao 주소 API에서 받은 값은 onSubmit 함수에서 제출된 data 객체에 반영되지 않음 즉, 카카오 API 로 입력된 값이 폼 데이터로 저장되지 않고 제출 시 빈 값으로 전달

문제 원인

문제를 분석한 결과, React Hook Form의 setValue 메서드를 사용하지 않은 점이 원인이었다.

1. Kakao 주소 API에서 반환된 데이터를 React Hook Form과 연동하지 않았음
2. React Hook Form은 해당 필드의 값이 업데이트되었다는 정보를 알지 못해 상태 관리에 문제가 발생

문제 해결 방법

1. Redux 상태 로직 검증

Redux의 상태가 업데이트 되지않아 가장 먼저 Redux 상태 관리 로직을 살펴보았다. Redux의 reducer가 해당 데이터를 업데이트하는 로직이 제대로 동작하는지 확인하였다.

setUserField: (state, action) => {
      const { field, value } = action.payload;
      console.log('field >>', field);
      console.log('value >>', value);

      // 'address.'로 시작하는 필드인지 확인
      if (field.startsWith('address.')) {
        // 구조 분해 할당을 사용하여 addressField 추출
        const [, addressField] = field.split('.');
        console.log('addressField', addressField);

        // 구조 분해 할당을 사용하여 address 필드 업데이트
        state.currentUser.address = {
          ...state.currentUser.address,
          [addressField]: value,
        };

정상적으로 업데이트되는 것을 확인하여 원인이 Redux 로직이 아니라 React Hook Form과의 연동 문제을 파악하였다.

2. Kakao 주소 API 데이터 흐름 분석

Kakao 주소 API에서 반환된 데이터가 Redux 상태에 전달되지 않는 이유를 찾기 위해 데이터 흐름을 추적하였다. 카카오 주소 api에 나와있는 반환값처럼 출력되고있다.

https://postcode.map.daum.net/guide

즉, 주소 데이터 자체를 제대로 전달되고 있었다.

3. Redux DevTools로 상태 확인

Redux 상태 자체에는 문제가 없고 React Hook Form과 Redux 상태 간 동기화 문제인것을 알게 되었다.

4. React Hook Form의 데이터 관리 방식 조사

React Hook Form 공식 문서와 검색을 통해 확인한 결과,

• React Hook Form은 기본적으로 입력 필드 값만 내부적으로 관리한다.
• 외부 데이터를 React Hook Form의 필드 값으로 설정하려면 setVaule 메서드를 사용해야 한다는 것을 발견하였다.

// useForm 설정
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
    reset, // 폼 리셋을 위한 기능 추가
    setValue,
  } = useForm({
    mode: 'onChange',
    defaultValues: {
      gender: 'default',
    },
  });

    // react-hook-form 상태 업데이트
    setValue('address.postcode', data.zonecode);
    setValue('address.address', addr);
    setValue('address.extraAddress', extraAddr);

setValue 속성이 뭐지? 등록된 필드 의 값을 동적으로 설정 하고 폼 상태를 검증하고 업데이트할 수 있는 옵션

https://react-hook-form.com/docs/useform/setvalue

해결 후 배운점

1. React Hook Form 과 외부 데이터 연동 방법 React Hook Form에서 외부 데이터를 폼 필드에 반영하려면 setValue 메서드가 필요하다는 점을 배웠다. 사용할 기술이나 라이브러리 등의 문서를 참고하며 개발해야겠다고 생각하였다. 2. 디버깅 도구의 활용 Redux DevTools를 사용해 Redux 상태를 확인하며 문제를 단계적으로 좁혀가는 디버깅의 중요성을 깨달았다.

문제 상황

Redux와 useSelector Hook을 사용하여 상태를 가져오려고 하였으나 다음과 같이 undefined라는 에러가 발생하였다.

문제 원인

Redux Store의 설정 과정에서 reducer를 중접한 구조로 설정했기 때문이다. configureStore에서 reducer라는 키 값에 이미 rootReducer를 할당했음에도 이를 다시 중첩된 reducer 키로 정의했기 때문에 최종 상태 구조가 불필요하게 깊어졌다.

잘못된 Store 설정 코드:

// store 설정
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const rootStore = configureStore({
  reducer: {
    reducer: rootReducer, // 'reducer' 키에 다시 reducer를 중첩함
  },
});

export default rootStore;

이로 인해 useSelector로 상태를 가져오려고 할때 중첩된 상태 구조로 인해 올바른 경로를 찾지 못하고 undefined를 반환하여 에러를 발생시켰다.

문제 해결

1. Store 설정 수정 configureStore 의 reducer 키에 rootReducer 를 직접 할당하도록 수정하여 중첩 구조를 제거

// store 설정
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const rootStore = configureStore({
  reducer: rootReducer,
});

export default rootStore;

2. 상태 접근 방식 확인 수정 후 로그로 상태 구조를 확인한 결과 올바르게 변경되었음을 확인

배운점 및 느낀점

Key는 중복되어서는 안된다. configureStore 에서 reducer 속성을 지정할 때, reducer라는 이름으로 중복된 키를 사용하면 Redux에서 이를 처리하는 데 혼란을 줄 수 있다. Redux는 각 리듀서를 고유한 키로 식별하기 때문이다. 만약 다중 리듀서를 사용해야할 경우

const rootStore = configureStore({
  reducer: {
    user: userReducer,
    posts: postsReducer,
  },
});

이처럼 user, posts라는 key의 이름을 다르게 지정하면 된다.

이 경험을 통해 상태 관리의 한 가지 개념을 배우게 되었고 구현할 때 구조를 명확히 하고 코드의 흐름을 항상 점검하면서 개발을 해야겠다고 생각하는 계기되었다.

Redux 용어 정리

• Store: 상태를 저장하는 오직 하나의 공간으로 Store 안에는 현재 애플리케이션 상태와 리듀서가 들어있다. 이 리듀서를 이용하여 데이터를 조작한다.
• Selector: 사용할 상태를 선택
• Action: 어떠한 상태의 변화를 일으키는 사건으로 컴포넌트에서 Store로 운반할 데이터이다. (객체 형태)
• Dispatch: Action을 Store랑 연결해주는 역할로 액션을 Store에 보내는 행위를 의미한다. 객체를 파라미터로 넣어서 호출.
• Reducer: 새로운 상태를 반환하는 함수로 type에 따라 변화를 일으킨다. 👉 Action -> Store -> Reducer -> 새로운 상태 생성 의 흐름으로 이해하면 된다.

📌 시각적으로 이해하기

여기서 Redux Toolkit을 알아야 Redux를 더 편리하게 사용할 수 있는데 Redux Toolkit에 대해서도 간단히 정리해보자.

Redux Toolkit(RTK)

일반적인 작업들을 단순화해주는 유틸리티가 포함되어있어 코드를 더 간결하게 작성할 수 있다.

• configureStore(): Redux store를 생성하기 위한 함수, 여러 미들웨어와 Reducer를 쉽게 통합할 수 있다.
• createSlice(): Reducer와 Acion을 함께 생성하는 함수, 슬라이스라는 개념을 사용하여 액션 타입, 액션 생성 함수, 리듀서를 한 번에 정의한다.

useReducer hook를 사용한 코드

(Bank.js)

import React, { useReducer, useState } from "react";

// 초기값 설정
const initalState = { value: 0 };

// reducer 함수(type 정의)
const bankReducer = (state, action) => {

  switch (action.type) {
    case "plus": {
      return { value: state.value + action.value };
    }
    case "minus": {
      return { value: state.value - action.value };
    }
    default: {
      return { state };
    }
  }
};

function Bank() {
  // hook 사용
  const [money, setMoney] = useState("");
  const [state, dispatch] = useReducer(bankReducer, initalState);

  // 이벤트 핸들러 정의
  const onPlus = (e) => {
    dispatch({ type: "plus", value: money });
    setMoney("");
  };
  const onMinus = (e) => {
    dispatch({ type: "minus", value: money });
    setMoney("");
  };
  return (
    <div>
      <h2>짱구 은행</h2>
      <div>잔고: {state.value}</div>
      <input
        type="number"
        value={money}
        onChange={(e) => setMoney(parseInt(e.target.value))}
      />
      <button onClick={onPlus}>입금</button>
      <button onClick={onMinus}>출금</button>
    </div>
  );
}

export default Bank;

Redux로 리팩토링

1. store/bankSlice.js : createSlice함수를 사용하여 Reducer와 Action 생성자 정의

import { createSlice } from "@reduxjs/toolkit";

// 1. 슬라이스 객체 정의
const bankSlice = createSlice({
  name: "bank",
  initialState: { number: 0 },
  reducers: {
    bankPlus: (state, action) => {
      state.number += action.payload;
    },
    bankMinus: (state, action) => {
      state.number -= action.payload;
    },
  },
});

export const { bankPlus, bankMinus } = bankSlice.actions;
export default bankSlice.reducer;

2. Bank.js useSelector을 이용해 Store의 상태를 선택하고 useDispatch를 이용해 Action을 Store로 보냄.

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { bankPlus, bankMinus } from "../store/bankSlice";

export default function BankContainer() {
  // 사용할 상태 선택
  const bank = useSelector((state) => state.bank.number);

  const dispatch = useDispatch();

  const [money, setMoney] = useState("");

  // 이벤트 핸들러
  const onClickPlus = () => {
    dispatch(bankPlus(money));
    setMoney("");
  };

  const onClickMinus = () => {
    dispatch(bankMinus(money));
    setMoney("");
  };

  const onchangeMoney = (e) => {
    setMoney(Number(e.target.value));
  };

  return (
    <div>
      <h3>usereducer를 redux로 리팩토링</h3>
      <h2>짱구 은행</h2>
      <h3>잔고: {bank}</h3>
      <input type="text" value={money} onChange={onchangeMoney} />
      <button onClick={onClickPlus}>입금</button>
      <button onClick={onClickMinus}>출금</button>
    </div>
  );
}

3. store/index.js configureStore 함수를 사용하여 Store 생성

// 2. store 생성
import { configureStore } from "@reduxjs/toolkit";
import bankReducer from "./bankSlice";

const store = configureStore({
  reducer: {
    bank: bankReducer,
  },
});

export default store;

4. index.js redux를 사용하기 위해 provider를 사용하여 store 데이터를 전달

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./store";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    {/* 3. store 연결 */}
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

마무리하며

위에 코드양으로만 보면 Redux가 복잡해보여 왜 사용하나할 수 있지만 컴포넌트가 많아지면 관리할 상태도 많아져 상태를 전역으로 관리할 수 있는 Redux가 효율적이다. 곧 있을 프로젝트에서 사용해야하는데 더 예시를 찾아보고 연습해야겠다.

출처 및 참고

1. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
2. https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts

CORS(Cross-Origin Resource Sharing)

한글로 번역하면 '교차 출처 리소스 공유' 이다. 여기서 출처가 교차한다? 이건 무슨 뜻일까..? 결론부터 말하자면 리소스를 주고받으려는 두 출처가 서로 다르다 라는 뜻으로 CORS를 설정한다는건 '출처가 다른 서버 간의 리소스 공유' 를 허용한다는 것! 여기에서 의문은 출처 이다. 출처는 Origin을 번역한 것인데 이걸 알기전에 복습이 필요하다.

URL과 도메인(Domain)

• URL : Uniform Resource Locatior로 웹 주소이며 웹에서 리소스(HTML 페이지, CSS, 이미지 등)가 어디 있는지 알려주기 위한 주소.
• 도메인 : URL의 일부로 사람이 기억하기 어려운 IP 주소를 변환시켜주는 네임 서버. (이미지에는 hostname을 뜻함.)

결론

React(Frontend Server)는 포트 번호가 3000으로 요청하는데 node.js(Backend Server)는 포트 번호 8080을 사용중이므로 거절된다. 이 과정을 해결해주는 것이 CORS이다. 즉, 서로 다른 Origin이라도 리소스 요청, 응답을 허락해주는 웹 보안 방침이다.

마무리하며

드디어 서버와 클라이언트를 연결하는 방법을 배우게 되었다. 혼자서 애플리케이션 하나를 만들 수 있는 개념을 배운거같아 즐거웠다. 더 공부해서 개발자가 되기까지 화이팅하자! 더 깊숙하게 알고 싶다면 아래에 링크를 참고하면 좋을거같다.

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

참고 및 출처

1. https://docs.tosspayments.com/resources/glossary/cors
2. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안

map 함수는 무엇인가

일단 map 함수에 대해 알아야 왜 이런 에러가 발생하는지 알 수 있다. map 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환하기 위한 함수 즉!!! map 함수는 배열로 데이터를 가져오고 배열로 반환한다!!!

에러 원인 파악

console.log(res.data)를 통해 응답 데이터의 로그를 찍어봤는데 응답이 오지 않고 있었다. 그래서 DB와의 연결이 제대로 되고있지않다고 판단.! user의 권한 정보를 확인해보았다. 모든 권한이 Y 즉, 모든 권한을 사용할 수 있어야한다. 하지만? user에 권한이 없어 데이터를 응답할 수 없었던 것이다.

에러 해결

user에게 모든 권한 주기!

-- 현재 유저 확인
SELECT * FROM mysql.user;

-- 유저 생성
CREATE USER '유저 이름'@'%' IDENTIFIED BY '비밀번호';

-- 생성한 유저에게 모든 권한 부여
GRANT ALL PRIVILEGES ON *.* TO '유저 이름'@'%' WITH GRANT OPTION;

-- 캐시 지움
FLUSH PRIVILEGES;
-- 현재 사용중인 MySql의 캐시를 지우고
-- 새로운 설정을 적용하기 위해서 사용되는 명령어
-- 사용자 권한 등을 변경하였을 때, MySQL에 변경사항을 적용하기 위해서 사용

다음과 같이 유저에 권한을 부여하면 DB가 데이터를 제대로 보낸다.

깨달은점

에러가 났을땐 에러 메세지를 유심히 살펴보자. 분명히 해결할 힌트가 있을것! 그리고 가장 중요한 포인트는 console.log(res.data)와 같이 에러난 코드의 데이터 값을 로그로 찍어보기!

이번 에러를 정리하자면

1. map 함수가 함수가 아니라는 에러
2. map 함수의 특징을 생각 -> 배열로 데이터를 받아옴.
3. 로그를 찍어 더욱 자세한 에러 메세지 찾기

끝으로 에러를 두려워하지말자! 😅

출처 및 참고

1. https://ygdev84.tistory.com/9
2. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안

useRef란?

렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook이다. 따라서 용도는 1. 정보 저장 2. DOM 조작 이다.

구현할 기능

• input에 값이 입력되지 않으면 input창에 focus주기
• input/textarea에서 조건에 충족하지 못하면 alert 띄우는 것은 UX 측면에서 좋지않다.
• 트렌디한 사이트는 alert을 사용하지않고 input에 focus 주는 방식을 사용
• input창 3개에 적용할 것.

useRef 각각 사용하기

1. useRef 생성

   const inputWriterRef = useRef();
   const inputTitleRef = useRef();
   const inputSearchRef = useRef();

2. 직접 접근하고 싶은 DOM 요소에 ref props 설정

   <input ref = {inputWriterRef}/>;
   <input ref = {inputTitleRef}/>;
   <input ref = {inputSearchRef}/>;

3. useRef()를 이용해서 만든 객체의 current값에 focus() DOM API 사용

   inputWriterRef.current.focus();
   inputTitleRef.current.focus();
   inputSearchRef.current.focus();

📌 useRef가 너무 많아지면 어떻게 사용하지?

방법이 2가지가 있다.

1. 객체 사용 : 명확한 이름으로 참조를 관리해야 하거나, 각 참조가 특정한 의미를 갖는 경우 유리
2. 배열 사용 : 동일한 유형의 여러 참조를 관리하거나, 참조가 순차적으로 추가되는 경우 유리(반복적인 UI 요소)

이번 상황에서는 명확한 이름으로 관리하는게 적절하다 생각되어 객체를 사용하였다.

1. useRef 객체 생성

   const refs = useRef({
    writer: null,
    title: null,
    searchText: null,
   });

2. 직접 접근하고 싶은 DOM 요소에 ref props 설정

   ref={(el) => (refs.current.writer = el)}

• ref에 전달되는 콜백함수이다.
• input 요소에 대한 DOM을 참조
• refs.current.writer.focus()를 호출하여 포커스을 줌.

3. useRef()를 이용해서 만든 객체의 current 값에 focus() DOM API 사용

   if (writer.trim().length === 0) {
      refs.current.writer.focus();
      return;
    }

전체 코드

import React, { useRef, useState } from "react";

function Practice() {
  const [text, setText] = useState([]);
  const [writer, setWriter] = useState("");
  const [title, setTitle] = useState("");
  const [searchOption, setSearchOption] = useState("writer");
  const [searchText, setSearchText] = useState("");
  const [filteredText, setFilteredText] = useState([]);

  // 객체를 사용하여 useRef 생성
  const refs = useRef({
    writer: null,
    title: null,
    searchText: null,
  });

  // 데이터 추가
  const addText = (e) => {
    e.preventDefault();
    const newText = text.concat({
      id: text.length + 1,
      writer: writer,
      title: title,
    });
    if (writer.trim().length === 0) {
      refs.current.writer.focus();
      return;
    }
    if (title.trim().length === 0) {
      refs.current.title.focus();
      return;
    }
    setText(newText);
    setWriter("");
    setTitle("");
  };

  // 검색 기능
  const handleSearch = () => {
    if (searchText.trim().length === 0) {
      //   setFilteredText([]);
      refs.current.searchText.focus();
      return;
    }

    const filtered = text.filter((info) => {
      if (searchOption === "writer") {
        return info.writer.includes(searchText);
      } else if (searchOption === "title") {
        return info.title.includes(searchText);
      }
      return false;
    });
    setFilteredText(filtered);
    setSearchText("");
  };

  // 전체 검색
  const handleSearchAll = () => {
    setFilteredText(text);
  };

  // 키보드 이벤트
  const handleKeyDown = (e, action) => {
    if (e.keyCode === 13) {
      action(e);
    }
  };

  return (
    <>
      <form style={{ margin: "10px" }}>
        작성자:
        <input
          type="text"
          placeholder="작성자"
          value={writer}
          onChange={(e) => setWriter(e.target.value)}
          ref={(el) => (refs.current.writer = el)}
        />
        제목:
        <input
          type="text"
          placeholder="제목"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          onKeyDown={(e) => handleKeyDown(e, addText)}
          ref={(el) => (refs.current.title = el)}
        />
        <button onClick={addText}>작성</button> <br />
      </form>
      <div style={{ margin: "10px" }}>
        <select
          value={searchOption}
          onChange={(e) => setSearchOption(e.target.value)}
        >
          <option value="writer">작성자</option>
          <option value="title">제목</option>
        </select>
        <input
          type="text"
          placeholder="검색어를 입력하세요."
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
          onKeyDown={(e) => handleKeyDown(e, handleSearch)}
          ref={(el) => (refs.current.searchText = el)}
        />
        <button onClick={handleSearch}>검색</button>
        <button onClick={handleSearchAll}>전체</button>
      </div>
      <table
        border="1"
        cellPadding="10"
        cellSpacing="1"
        style={{ margin: "10px" }}
      >
        <thead>
          <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
          </tr>
        </thead>
        <tbody>
          {text.map((value) => (
            <tr key={value.id}>
              <td>{value.id}</td>
              <td>{value.title}</td>
              <td>{value.writer}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {filteredText.length > 0 ? (
        <p>검색 결과</p>
      ) : (
        <p>검색 결과가 없습니다.</p>
      )}
      {filteredText.length > 0 && (
        <table
          border="1"
          cellPadding="10"
          cellSpacing="1"
          style={{ margin: "10px" }}
        >
          <thead>
            <tr>
              <th>번호</th>
              <th>제목</th>
              <th>작성자</th>
            </tr>
          </thead>
          <tbody>
            {filteredText.map((value) => (
              <tr key={value.id}>
                <td>{value.id}</td>
                <td>{value.title}</td>
                <td>{value.writer}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </>
  );
}

export default Practice;

마무리하며..

리액트의 useRef hook에 대해 학습하였다. 용도를 알게 되었고 어떻게 하면 더 효율적으로 쓸 수 있을까 고민하는 시간이 되었다. 리액트에는 많은 hook이 존재한다고 하는데 차근히 배워보고 익혀야겠다.

출처 및 참고

1. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
2. https://ko.react.dev/reference/react/useRef
3. https://velog.io/@minho100227/useRef%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-focus%EA%B8%B0%EB%8A%A5

그 중에서 props.children에 대해 알아보자🔥

props

properties 의 줄임말로 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용! 자바스크립트 메소드에서 파라미터같은 개념이라고 생각하면 된다. 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터로 전달받으며, JSX 내부에서 { } 중괄호로 감싸서 사용.

부모 컴포넌트 (App.js) - name props 전달

<FuncComponent name="짱구"></FuncComponent name>

자식 컴포넌트 (FuncComponent.js) - name props 받음

const FuncComponent = (props) => {
      console.log(props) // {name : "짱구"}
    return (
        <>
        <div> 안녕? {props.name} </div>
        </>
    );
}

console.log(props)를 해보면 {name : "짱구"}과 같은 결과가 나옴!

props.children

부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성한 문자열로 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 된다.

부모 컴포넌트

function App() {
  return (
        <>
            <Button link="https://www.google.com">Google</Button>
        </>
  );
}

자식 컴포넌트

const Button = (props) => {
  console.log("Button props >>> ", props);
  // {link: 'https://www.google.com', children: 'Google'}
  return (
    <>
      <a href={props.link}>
        <button className="Button">{props.children}</button>
      </a>
    </>
  );
};

console.log(props)의 결과값은 {link: 'https://www.google.com', children: 'Google'} 이다.

📌 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props라고 생각하면 이해하기 쉬울것 같다! 그래도 살짝 헷갈린다 한 가지 예시를 더 보자!!!

부모 컴포넌트

const App = () => (
  <Category>
    <li>First item.</li>
    <li>Second item.</li>
    <li>Another item.</li>
  </Category>
);

자식 컴포넌트 - 부모 컴포넌트로부터 전달받은 데이터를 사용

const Category = (props) => {
  console.log("Category props >>>", props);
  // {children: Array(3)}
  // children: Array(3)
  // 0: {$$typeof: Symbol(react.element), type: 'li', key: null, ref: null, props: {…}, …}
  // 1: {$$typeof: Symbol(react.element), type: 'li', key: null, ref: null, props: {…}, …}
  // 2: {$$typeof: Symbol(react.element), type: 'li', key: null, ref: null, props: {…}, …}
  return <ul>{props.children}</ul>;
};

이처럼 부모 컴포넌트의 태그와 태그 사이의 모든 내용을 표시하기 위해 사용하는것이 props.childred 이다.

마무리하며...

props.childen 개념이 헷갈렸는데 찾아보면서 정리해보니 이해가 되었다. 이제 리액트 시작이다. 복습 열심히 해서 리액트 마스터 하자!! 💪🏻

출처 및 참고

1. [새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
2. 벨로퍼트와 함께하는 모던 리액트 https://react.vlpt.us/
3. https://developer-talk.tistory.com/226
4. https://yooneeee.tistory.com/49

1. 프로젝트 소개

blomit

• 주제: 개발자를 위한 블로그
• 주제 선정 이유: 'velog'를 사용하면서 느낀 좋았던 점과 개선해볼점을 구현하고싶어 선택
• 'velog' 장점 전반적으로 깔끔한 인터페이스로 사용하기 편리. 전체 게시물 목록을 카드 형식으로 노출시켜 글이 돋보이는 효과. 개발자들에게 익숙한 마크다운을 사용. 헤더에 프로필과 닉네임을 노출시켜 로그인 상태를 확실히 보여줌.
• 개선해볼점 Github의 잔디처럼 내가 쓴 게시물의 수를 시각적으로 보여준다면 더 효과적으로 블로그를 쓸 수 있을 것이라고 생각.

진행기간

2024.07.10 ~ 2024.07.24 (+ 07.04부터 설계 시작)

팀 구성

백엔드: 3명 / 프론트엔드: 2명

기술 스택

• 백엔드 node.js, express, mysql, sequelize
• 프론트엔드
• javascript, ejs, axios, tailwind-css*
• 협력 git, github, slack, notion, pigma
• 기타 postman, chart.js, toast UI

구현 기능

1. 회원 관리
   • 회원가입
   • 로그인/로그아웃
   • 회원정보 확인/수정
2. 게시물 관리
   • 전체 게시물 목록 조회
   • 내 게시물 목록 조회
   • 게시물 검색
   • 게시물 등록/수정/삭제
   • 월별 업로드 수 차트
3. 댓글 관리
   • 댓글 등록/수정/삭제
   • 대댓글 등록/수정/삭제
   • 댓글, 대댓글 목록 확인

2. 내가 맡은 역할

포지션

프론트엔드

구현 기능

1. 페이지네이션 컴포넌트

   • 백에서 보낸 데이터(총 게시물 수, 총 페이지 수 , 현재 페이지)를 가공하여 페이지네이션의 그룹을 지정하고 계산하여 화면 구성
   • 반복되는 구성으로 컴포넌트로 분리하여 유지보수 효율을 증가

2. 전체 게시물 목록

   • forEach문을 사용하여 구현
   • 전체적인 카드형식 디자인 틀 구현
   • 게시물 클릭시 상세페이지로 이동하는 API
   3. 게시물 조회, 내 게시물 삭제
      • 상세페이지 UI
      • 모든 게시물과 내가 작성한 게시물인지 확인 후 수정/삭제 버튼 보여주기(백에서 보내준 sessionUserId로 확인)
      • 게시물 삭제 API

3. 댓글 등록/수정/삭제/조회

   • 댓글, 대댓글 UI
   • 댓글 등록/수정/삭제 동적 구현
   • 댓글 작성과 등록 메소드 분리(댓글 작성 axios에서 댓글 등록 메소드 실행)
   • 댓글 등록: addEventListener 사용, 댓글 등록 API
   • 댓글 수정: onclick 속성 사용, 입력폼으로 바뀌고 버튼도 바뀌게 구현, 댓글 수정 API
   • 댓글 삭제: onclick 속성 사용, 댓글 삭제 API

4. 헤더 컴포넌트

   • header UI
   • 로그인 전과 후를 if문을 이용하여 구분(백에서 보내는 sessionUser를 이용하여 조건 설정)
   • 로그인 전: 로그인 버튼
   • 로그인 후: 사용자 닉네임과 프로필(sessionUser에 담긴 데이터 이용, ), 프로필 클릭시 드롭다운으로 메뉴창 구현(a태그 사용하여 경로 이동)

3. 트러블 슈팅

' ~ is not defined' 에러!!! 이번 프로젝트를 하면서 수도없이 본 에러이다. 특히 axios 작성 초반에 가장 많이 봤다. 왜!? 정의가 되어있지않다고할까... 이번 프로젝트에서 힘들었던 점 중 하나였다.

시도한 방법 오타인지 확인하기 axios 문법 확인하기

해결 방법

1. 백에서 보내는 데이터 확인하기(백코드에서 console.log 이용)
2. 프론트에서 백이 보낸 데이터(res)가 오는지 확인하기(프론트 코드에서 console.log 이용)

알게된 점

1. 백에서 보내는 데이터가 무엇인지 확인하는 과정이 정말! 중요하니 꼭! 확인하기 이 과정 때문에 프론트개발자이더라도 백엔드 코드를 읽고 이해할 줄 알아야한다는것을 다시 한 번 느꼈다.
2. 넘어온 데이터를 프론트가 가공하기 전에 응답(res)값이 왔는지 확인하기! res의 값을 이용하여 화면에 보여주는 코드를 작성하기 전에 내가 요청한 데이터가 왔는지 확인하는 과정 또한 꼭! 필요하다.

4. 회고

4L 회고

• Liked : 좋았던 점은 무엇인가?
• Lacked : 아쉬웠던 점, 부족한 점은 무엇인가?
• Learned : 배운 점은 무엇인가?
• Longed for : 앞으로 바라는 것은 무엇인가?

  Liked

• 욕심부리지않은것! 초반에 내가 맡은 분량을 기간 내에 모두 끝낼 수 없을 거같아 팀원들과 나눠가지게 되었다. 내가 모두 구현해보고싶었지만 완성하는 것이 더 중요하기에 욕심부리지않고 팀원의 도움을 받았다.
• 포기하지않은것! 욕심을 부리진않았지만 열정과 책임감은 놓치않았다. 포기하지않고 시간을 들인다면 해낼 수 있는 부분은 꼭! 구현해내겠다고 이야기하였다. 만약 그 때 내가 해낼 수 없다고 생각하고 손을 놓았더라면 난 성장하지 못하였을것이다.

  Lacked

• 의견을 적극적으로 내지않은것 첫 프로젝트라 더욱 소심했고 겁이 났었던 거같다. 아이디어가 좋은 팀원들 덕분에 만족스러운 결과물이지만 나의 의견을 제시해야 생각도 깊어지는 것 같다고 느꼈다.

  Learned

• 소통 소통에도 적정선이 있다는 것을 느끼게 되었다. 또한 깃 관리에 대해서 알게 된 점이 많다. 팀으로 깃을 사용한 건 처음이었는데 소통이 되어야 코드가 변경되거나 없어지는일이 일어나지않을 수 있다는 것을 알게 되었다.
• 백과 프론트의 연결 수업이나 과제를 할 때는 백과 프론트 코드를 내가 혼자 구현하기 때문에 백과 프론트를 연결하는 과정에서 어려운 점이 없다고 생각했다. 이번 프로젝트에서 그 역할이 분명히 나눠지다보니 연결하는 과정이 어려웠다. 데이터를 확인하는 과정을 배울 수 있었다.
• 요청 경로 app.use()로 정의한 기본 경로를 잘 확인해야한다. 라우터에서는 생략되어있지만 프론트에서 axios로 요청할 때는 모든 경로를 써줘야하기 때문이다.

  Longed for

• 백엔드 로직을 더욱 공부하여 이해력을 높여야겠다.
• 다양한 디자인을 찾아보고 다음 프로젝트 때 구현해봐야겠다.