본문 바로가기

전체 글

[리팩터링] 프로젝트 관리 메인 페이지 api 호출 개수 줄이기 아래 사진은 관리 메인 페이지, 즉, 사용자가 생성한 프로젝트 리스트를 보여주는 페이지이다. 여기서는 전체와 진행 중 버튼이 있는데, 전체 버튼을 누르면 완료된 프로젝트와 진행 중인 프로젝트를 모두 보여주고, 진행 중 버튼을 누르면 진행 중인 프로젝트만 보여준다. 이 기능을 구현하면서 나는 고민이 하나 있었다. 일단, 처음 사용자가 접속했을 때는 진행 중 버튼이 활성화되어 있어서 진행 중인 프로젝트 리스트는 쭉 불러와야 하는 상황이었다. 그런데, 전체 프로젝트 리스트 데이터는 언제 불러와야 하지?라는 의문이 있었다. 선택지는 세 개였다. - 전체 프로젝트 리스트를 prefetch 해놓을까? - 처음 접속했을 때 전체와 진행 중 모두를 불러와서 캐시에 저장해 놓을까? - 전체 버튼을 누른 경우 데이터를 불.. 더보기
[에러 해결] 평가 그래프 상 인원이 너무 많은 문제 해결 관리 페이지에서 평가 탭에서는 중간 / 최종 평가 그래프를 보여준다고 했다. 그래프를 보여주는 기능은 recharts 라이브러리를 사용해서 구현을 했다. 처음에 그래프를 보여주는 기능 자체에는 문제가 없었는데, 인원수가 너무 많아지니까 한 그래프로 전체 인원 평가 그래프를 보여주기에는 무리가 있었다. 그래서, 스크롤하면서 넘겨볼 수 있는 기능이 있으면 좋겠다고 생각해서, recharts 공식 문서도 찾아보고 구글링도 해봤지만, 해결 방법을 찾을 수 없었다. 아마 recharts 측에서 공식적으로 지원하지 않는 기능인 것 같았다. 그러다가, 팀원 중 한 분이 인원 수가 일정 기준을 넘어가면 카드 슬라이드처럼 넘기면서 볼 수 있도록 하는 것은 어떤 지 의견을 내주셨다. 물론, 한 그래프로 전체 인원의 차트 .. 더보기
[에러 해결] 로그인이 필요한 페이지 접근 시 로그인 모달창 띄우기 일단, 우리 사이트에서는 로그인 없이 접근할 수 있는 경우가 있고 로그인 없이 접근할 수 없는 경우가 있다. 그래서 이에 대한 추가적인 처리가 필요하다. 다음은 로그인 없이 접근할 수 있는 경우이다. - 메인 페이지 - 프로젝트 인원 모집 페이지 - 프로젝트 인원 모집 특정 글 먼저, 로그인을 해야 접근할 수 있는 경우를 알아보자. - 프로젝트 관리 페이지 - 프로젝트 인원 모집 글 작성 페이지 - 프로젝트 인원 모집 글에서 지원하기 버튼을 누르는 경우 - 프로젝트 인원 모집 글에서 좋아요 버튼을 누르는 경우 지금은 로그인 없이 모두 접근할 수 있도록 설정해 놨다. 하지만, 이제 로그인 여부에 따라 따로 처리해야 한다. 어떻게 처리해야 할지 먼저 생각해 봤다. 로그인을 해야 접근할 수 있는 경우가 한 가.. 더보기
[기능 구현] 프로젝트 관리 탭을 구현해보자. 아래 사진은 구현된 프로젝트 관리 탭 사진이다. 관리 탭의 경우, 리더에게만 보이게 해서 리더만 접근이 가능하도록 처리해 놨다. 일반 멤버에게는 관리 탭 자체가 보이지 않는다. 프로젝트 관리 탭에서의 기능은 딱 세 가지이다. - 프로젝트 완료 처리 - 프로젝트 삭제 - 프로젝트 정보 수정 이제부터 코드와 함께 조금 더 자세히 살펴보도록 하자. import { useState } from "react"; import { useLocation } from "react-router-dom"; import { getStringDate } from "../../utils/date"; import { getProjectId } from "../../utils/getProjectId"; import projectBu.. 더보기
빈 스코프 스프링 빈은 스프링 컨테이너의 시작과 함께 생성돼서 스프링 컨테이너가 종료될 때까지 유지된다고 학습했다. 이는 스프링 빈이 기본적으로 싱글톤 스코프로 생성되기 때문이다. 스코프는 빈이 존재할 수 있는 범위를 나타낸다. 스프링이 지원하는 스코프는 다음과 같다. 싱글톤: 기본 스코프, 스프링 컨테이너의 시작과 종료까지 유지되는 가장 넓은 범위의 스코프 프로토타입: 스프링 컨테이너는 프로토타입 빈의 생성과 의존관계 주입까지만 관여하고 더는 관리하지 않는 매우 짧은 범위의 스코프 웹 관련 스코프 request: 웹 요청이 들어오고 나갈 때까지 유지되는 스코프 session: 웹 세션이 생성되고 종료될 때까지 유지되는 스코프 application: 웹의 서블릿 컨텍스트와 같은 범위로 유지되는 스코프 컴포넌트 스캔.. 더보기
빈 생명주기 콜백 데이터베이스 커넥션 풀이나 네트워크 소켓처럼 애플리케이션 시작 시점에 필요한 연결을 미리 해두고 애플리케이션 종료 시점에 연결을 모두 종료하는 작업을 진행하려면 객체의 초기화와 종료 작업이 필요하다. 간단하게 외부 네트워크에 미리 연결하는 객체를 하나 생성한다고 가정해보자. 실제로 네트워크에 연결하는 것은 아니고, 단순히 문자만 출력하도록 했다. 이 NetworkClient는 애플리케이션 시작 시점에 connect()를 호출해서 연결을 맺어두어야 하고, 애플리케이션이 종료되면 disconnect()를 호출해서 연결을 끊어야 한다. // NetworkClient.java package ghdtjgus76.core.lifecycle; public class NetworkClient { private Stri.. 더보기
의존 관계 자동 주입 의존 관계 주입 방법 - 생성자 주입 - 수정자 주입 (setter 주입) - 필드 주입 - 일반 메서드 주입 생성자 주입의 경우, 생성자를 통해서 의존 관계를 주입받는 방법이다. 생성자 호출 시 한 번만 호출되는 것이 보장된다. 불변, 필수 의존 관계에 사용한다. // OrderServiceImpl.java package ghdtjgus76.core.order; import ghdtjgus76.core.discount.DiscountPolicy; import ghdtjgus76.core.discount.FixDiscountPolicy; import ghdtjgus76.core.discount.RateDiscountPolicy; import ghdtjgus76.core.member.Member; impo.. 더보기
컴포넌트 스캔 컴포넌트 스캔과 의존 관계 자동 주입 시작하기 스프링은 설정 정보가 없어도 자동으로 스프링 빈을 등록하는 컴포넌트 스캔이라는 기능을 제공한다. 또한, 의존 관계도 자동으로 주입하는 @Autowired라는 기능도 제공한다. 코드로 한 번 알아보자. // AutoAppConfig.java package ghdtjgus76.core; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.FilterType; @Configuration @ComponentScan(exc.. 더보기

티스토리툴바