( •̀ ω •́ )✧

인증 및 권한 부여에 대한 구성, 사용자 정의 인증 프로세스, 보안 필터 등을 설정 JWT 토큰을 사용하여 인증을 처리할 것이므로, JWT 관련 설정도 추가해야 함 @Configuration @RequiredArgsConstructor @EnableWebSecurity //활성화. 스프링 시큐리티 필터가 스프링 필터체인에 등록됨 public class SecurityConfig extends WebSecurityConfigurerAdapter { private final JwtProvider jwtProvider; private final RedisService redisService; /* * HTTP 보안 구성을 설정 * */ @Override // 부모 클래스인 WebSecurityConfigure..

RedisConfig를 구성하여 Redis 데이터베이스에 대한 연결 및 RedisTemplate 설정을 수행합니다.이 단계에서는 Redis 서버와의 연결을 설정하는 데 집중합니다. 프로퍼티 파일에서 Redis 호스트, 포트, 비밀번호 값을 주입 @Value("${redis_host}") private String redisHost; @Value("${redis_port}") private int redisPort; @Value("${redis_password}") private String password; RedisConnectionFactory 생성 (단일 Redis 인스턴스에 대한 호스트, 포트, 비밀번호 설정) @Bean public RedisConnectionFactory redisConnect..

✅ 로딩 화면 빅데이터 프로젝트다보니 메인 - 상세 페이지로 넘어가는 시점에서 받아오는 데이터가 많아서 로딩 화면을 만들었다. 긴 로딩 시간 문제를 해결하기 위해 기능적으로 속도를 줄이는 방법도 있지만 디자인적(UX)으로도 해당 문제를 개선할 수 있다. 로딩 스피너 혹은 프로그레스 바로 간단하게 구현할 수도 있고, 대기 시간이 더 길다면 간단한 읽을 거리를 제공한다거나 사이트와 관련된 애니메이션을 가볍게 넣어보는 것도 좋을 것 같다. 나는 우리 사이트와 관련있는 지구와 비행기 (세계여행) 애니메이션과 사이트 이름을 넣어서 로딩 화면을 만들었다.! 추가로 첫 화면에도 로고 + 지구 확대되며 나타나는 효과를,,!

✅ 스크롤 값에 따라 컴포넌트 렌더링 구현 이번 프로젝트는 페이지 수가 많지 않아서 사용하기에 자연스럽고 부드러워 보이기 위해 여러 가지로 시도하고 있다. 그래서 오늘은 일정 스크롤 위치에서 컴포넌트가 나타나는 애니메이션 효과를 구현했다. !! ✅ useMemo & useCallback useMemo랑 useCallback에 대해 잘 몰랐는데 스크롤 이벤트를 구현하면서 (결국 쓰지는 않았지만..) 공부했다. 주말에 포스팅해야지

✅ React 반응형 웹 디자인 반응형 웹을 구현할 때는 디바이스의 종류와 사용자 그룹을 고려하여 적절한 미디어 쿼리를 적용하는 것이 중요하다. 여행에 관련된 정보를 얻는 것이 목적인 우리 프로젝트에서는 여행 중 간편한 사용성을 위해 데스크탑 버전을 기본으로 한 사이트에 모바일 버전까지 2가지를 제공하기로 했다. 세부 컴포넌트 내부에서 미디어 쿼리를 정의하고 처리하기 위해 `react-responsive` 모듈을 사용했다. 기본 설정했던 코드는 아래 링크 참고https://heyitzme.tistory.com/9 React 반응형 웹 디자인(react-responsive) 프로젝트 중 데스크탑과 모바일의 2가지 버전을 768px 기준으로 분기하고 세부 컴포넌트에서 자유롭게 사용하기 위해 `react-re..