프로젝트 환경구성 과정

[Hello-LSY]

커스텀 로그인 페이지 오류

오류 상황

• url 필터처리 성공 → 커스텀 로그인 페이지 이동 → 알맞은 id,pw 기입 → 오류
• SecurityConfig 설정에서 AuthenticationManager를 빈등록하니까 발생
• AuthenticationManager는 spring security 최신버전 기준 디폴트로 작동함

AuthenticationManager관련 500 에러

    @Bean
    public AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {
        return authenticationConfiguration.getAuthenticationManager();
    

해결

@Configuration
@EnableWebSecurity
@ComponentScan(basePackages = "org.project.backend")
public class SecurityConfig {

    private final MemberDetailsService memberDetailsService;
    private final Logger logger = LoggerFactory.getLogger(SecurityConfig.class);

    public SecurityConfig(MemberDetailsService memberDetailsService) {
        this.memberDetailsService = memberDetailsService;
    }

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                .csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
                .and()
                .authorizeRequests()
                .antMatchers("/register", "/login", "/public/**", "/api/members/**").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/login")
                .loginProcessingUrl("/perform_login")
                .defaultSuccessUrl("/", true)
                .successHandler(new CustomAuthenticationSuccessHandler())
                .failureHandler(new CustomAuthenticationFailureHandler());

        return http.build();
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        String idForEncode = "bcrypt";
        Map<String, PasswordEncoder> encoders = new HashMap<>();
        encoders.put("bcrypt", new BCryptPasswordEncoder());
        encoders.put("pbkdf2", new Pbkdf2PasswordEncoder());

        return new DelegatingPasswordEncoder(idForEncode, encoders);
    }

    @Bean
    public UserDetailsService userDetailsService() {
        return memberDetailsService;
    }

    @Bean
    public AuthenticationFailureHandler customAuthenticationFailureHandler() {
        return (request, response, exception) -> {
            logger.error("로그인 실패: {}", exception.getMessage());
            response.sendRedirect("/login?error=true&message=" + exception.getMessage());
        };
    }
}

• userDetailsService를 자동적으로 처리하는데 userDetailsService 부분을 빈등록해서 명시적으로 처리하게 하려는 의도였지만 순환참조된다는것.
• userDetailsService을 지워서 해결

401(Unauthorized)

반대로 빼는 경우

• 해당 리소스에 유효한 인증 자격 증명이 없기 때문에 요청이 적용되지 않았음을 나타냄
• 사용자가 로그인 없이 리소스를 요청한 경우

405

@Override
protected Filter[] getServletFilters() {
     return new Filter[]{new DelegatingFilterProxy("springSecurityFilterChain")};
}

• 필터를 주석하면 이렇게나옴 = 얜 무조건 있어야함

[Hello-LSY]

swagger 환경 구성

의존성 추가

implementation 'io.springfox:springfox-swagger2:2.9.2'
implementation 'io.springfox:springfox-swagger-ui:2.9.2'

config 정의

@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2) // Swagger 2.0 사용
                .select()
                .apis(RequestHandlerSelectors.basePackage("org.project.backend.controller")) // API 문서를 생성할 패키지 지정
                .paths(PathSelectors.any())
                .build()
                .apiInfo(apiInfo())
                .useDefaultResponseMessages(false); // 기본 응답 메시지 사용 여부
    }
    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("Baenang API Documentation")
                .description("Baenang 프로젝트의 API 문서")
                .version("2.0") // API 버전 설정
                .contact(new Contact("Baenang Team", "http://example.com", "support@example.com")) // 연락처 정보 추가
                .build();
    }
}

@RestController
@RequestMapping("/api/members")
@RequiredArgsConstructor
@Api(tags = "Member API", description = "회원 관리 API") // Swagger 컨트롤러 설명
public class MemberController {

    private final MemberServiceImpl memberServiceImpl;

    @ApiOperation(value = "모든 회원 정보 조회", notes = "모든 회원의 정보를 조회합니다.")
    @GetMapping(produces = "application/json")
    public ResponseEntity<List<MemberDTO>> getAllMembers() {
        List<MemberDTO> members = memberServiceImpl.getAllMembers();
        return ResponseEntity.ok(members);  // 성공적으로 조회된 데이터를 반환
    }

controller에 명세 어노테이션 추가하기

[Hello-LSY]

스프링 프로젝트 설정

• 최대한 팀원들에게 번거로운 작업을 없애기 위해 어노테이션 위주로 진행
• 특히 mybatis는 프로젝트 볼륨이 늘어날수록 번거로움이 커지기에 jpa를 선택
• 그만큼 프로젝트를 설명하는 초기 환경과 설명주석이 중요하다고 판단

/**
 * Web 애플리케이션의 초기 설정을 담당하는 클래스.
 * DispatcherServlet과 RootContext 설정을 구성하고, 필요한 필터를 설정한다.
 */
public class AppInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {

    /**
     * Root 애플리케이션 컨텍스트 설정 클래스를 반환.
     * 주로 보안 설정(SecurityConfig)과 DB 설정(DBConfig)을 포함.
     *
     * @return Root 애플리케이션 컨텍스트에 로드할 설정 클래스 배열
     */
    @Override
    protected Class<?>[] getRootConfigClasses() {
        return new Class<?>[]{DBConfig.class, SecurityConfig.class};
    }

    /**
     * 서블릿 애플리케이션 컨텍스트 설정 클래스를 반환.
     * WebMvcConfig와 같은 웹 관련 설정을 포함.
     *
     * @return 서블릿 애플리케이션 컨텍스트에 로드할 설정 클래스 배열
     */
    @Override
    protected Class<?>[] getServletConfigClasses() {
        return new Class<?>[]{WebMvcConfig.class};
    }

    /**
     * DispatcherServlet이 매핑될 URL 패턴을 지정.
     * 여기서는 모든 요청을 DispatcherServlet으로 매핑.
     *
     * @return 서블릿 매핑을 위한 URL 패턴 배열
     */
    @Override
    protected String[] getServletMappings() {
        return new String[]{"/"};
    }

    /**
     * 서블릿 필터를 설정.
     * springSecurityFilterChain을 통해 보안 관련 필터링을 처리.
     *
     * @return 필터 배열
     */
    @Override
    protected Filter[] getServletFilters() {
        return new Filter[]{new DelegatingFilterProxy("springSecurityFilterChain")};
    }
}

필터설정 config

/**
 * 데이터베이스 설정을 관리하는 클래스.
 * JPA, 트랜잭션 관리, 데이터 소스 설정을 포함한다.
 */
@Configuration
@EnableTransactionManagement
@EnableJpaRepositories(basePackages = "org.project.backend.repository")
@PropertySource("classpath:application.properties")
public class DBConfig {

    /**
     * 엔티티 매니저 팩토리를 설정하고 Hibernate 관련 속성을 추가한다.
     *
     * @param dataSource 데이터 소스 (HikariCP)
     * @param ddlAuto hibernate.ddl-auto 설정 값 (application.properties에서 읽어옴)
     * @param dialect hibernate.dialect 설정 값 (application.properties에서 읽어옴)
     * @return LocalContainerEntityManagerFactoryBean 객체
     */
    @Bean
    public LocalContainerEntityManagerFactoryBean entityManagerFactory(DataSource dataSource,
                                                                       @Value("${spring.jpa.hibernate.ddl-auto}") String ddlAuto,
                                                                       @Value("${spring.jpa.properties.hibernate.dialect}") String dialect) {
        LocalContainerEntityManagerFactoryBean em = new LocalContainerEntityManagerFactoryBean();
        em.setDataSource(dataSource);
        em.setPackagesToScan("org.project.backend.model"); // 엔티티가 위치한 패키지
        em.setJpaVendorAdapter(new HibernateJpaVendorAdapter());

        // Hibernate 설정 추가
        Properties properties = new Properties();
        properties.setProperty("hibernate.hbm2ddl.auto", ddlAuto);
        properties.setProperty("hibernate.dialect", dialect);
        em.setJpaProperties(properties);

        return em;
    }

    /**


     * HikariCP를 이용한 데이터 소스를 설정한다.
     * MySQL 데이터베이스에 연결되며, 연결 풀의 최대 크기는 10으로 설정된다.
     * HikariCP를 쓰는 이유 : https://github.com/brettwooldridge/HikariCP-benchmark
     *
     * @return DataSource 객체 (HikariDataSource)
     */
    @Bean
    public DataSource dataSource(
            @Value("${spring.datasource.url}") String url,
            @Value("${spring.datasource.username}") String username,
            @Value("${spring.datasource.password}") String password,
            @Value("${spring.datasource.driver-class-name}") String driverClassName,
            @Value("${spring.datasource.hikari.maximum-pool-size}") int maxPoolSize) {

        HikariConfig config = new HikariConfig();
        config.setDriverClassName(driverClassName);
        config.setJdbcUrl(url);
        config.setUsername(username);
        config.setPassword(password);
        config.setMaximumPoolSize(maxPoolSize);
        return new HikariDataSource(config);
    }


    /**
     * 트랜잭션 매니저를 설정한다.
     * EntityManagerFactory를 통해 JPA 트랜잭션을 관리한다.
     *
     * @param entityManagerFactory 엔티티 매니저 팩토리
     * @return PlatformTransactionManager 객체
     */
    @Bean
    public PlatformTransactionManager transactionManager(EntityManagerFactory entityManagerFactory) {
        JpaTransactionManager transactionManager = new JpaTransactionManager();
        transactionManager.setEntityManagerFactory(entityManagerFactory);
        return transactionManager;
    }
}

db설정(jpa)

/**
 * Spring MVC 설정 클래스.
 * View Resolver, CORS 설정, 정적 자원 핸들링 등을 관리.
 */
@Configuration
@EnableWebMvc  // Spring MVC 설정을 활성화
@ComponentScan(basePackages = "org.project.backend")
@PropertySource("classpath:application.properties")
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * JSP 파일을 위한 뷰 리졸버 설정.
     * JSP 파일 경로와 확장자를 설정하며, 우선순위를 명시.
     *
     * @return InternalResourceViewResolver JSP 뷰 리졸버
     */
    @Bean
    public InternalResourceViewResolver viewResolver() {
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setPrefix("/WEB-INF/views/");  // JSP 파일 경로 설정
        resolver.setSuffix(".jsp");  // JSP 파일 확장자 설정
        resolver.setOrder(1);  // 우선순위 설정
        return resolver;
    }

    /**
     * CORS(Cross-Origin Resource Sharing) 설정을 정의.
     * 초기 설정 : 특정 도메인 및 메소드, 헤더에 대해 CORS를 허용하며, 자격 증명도 허용.
     *
     * @return CorsConfigurationSource CORS 설정 객체
     */
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();

        configuration.addAllowedOriginPattern("*"); // 모든 출처 허용 (필요시 나중에 특정 도메인만 허용)
        configuration.addAllowedMethod("*"); // 모든 HTTP 메소드 허용
        configuration.addAllowedHeader("*"); // 모든 헤더 허용
        configuration.setAllowCredentials(true);  // 자격 증명 허용 (토큰, 쿠키 등)

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);  // 모든 경로에 대해 CORS 설정 적용
        return source;
    }


    /**
     * MVC 핸들러 매핑을 검사하기 위한 Introspector를 제공.
     *
     * @return HandlerMappingIntrospector 핸들러 매핑 검사기
     */
    @Bean
    public HandlerMappingIntrospector mvcHandlerMappingIntrospector() {
        return new HandlerMappingIntrospector();
    }

    /**
     * 정적 자원에 대한 핸들러를 등록.
     * /resources/** 경로와 /static/** 경로에 있는 정적 자원을 제공하며, 캐시 기간을 설정.
     *
     * @param registry ResourceHandlerRegistry 리소스 핸들러 레지스트리
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**")
                .addResourceLocations("/resources/")
                .setCachePeriod(3600);

        registry.addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/");


        registry.addResourceHandler("/uploads/**")
                .addResourceLocations("file:///C:/uploads/")
                .setCachePeriod(3600);

        // 추가: Swagger 리소스 경로 추가
        registry.addResourceHandler("/swagger-ui.html")
                .addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**")
                .addResourceLocations("classpath:/META-INF/resources/webjars/");
    }

    @Bean
    public MultipartResolver multipartResolver() {
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
        multipartResolver.setMaxUploadSize(5242880); // 최대 업로드 파일 크기 설정 (5MB)
        return multipartResolver;
    }



}

웹 관련 설정(현재진행중)

[Hello-LSY]

프론트엔드 redux 가이드

1. 새로운 Redux Slice 생성

1. Slice 파일 생성: redux 디렉터리 안에 새로운 slice 파일을 생성합니다. 예: redux/profileSlice.js.

2. Slice 구성: 아래의 기본 구조를 사용해 새로운 slice를 구성합니다.

   // redux/profileSlice.js
   import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
   import { getApiClient } from './apiClient';
   
   // 예시 비동기 작업 (프로필 데이터 가져오기)
   export const fetchProfile = createAsyncThunk(
     'profile/fetchProfile',
     async (memberId, { getState, rejectWithValue }) => {
       const token = getState().auth.token;
       try {
         const apiClient = getApiClient(token);
         const response = await apiClient.get(`/api/profiles/${memberId}`);
         return response.data;
       } catch (error) {
         return rejectWithValue(error.response ? error.response.data : 'Network error');
       }
     }
   );
   
   const profileSlice = createSlice({
     name: 'profile',
     initialState: {
       profileData: null,
       loading: false,
       error: null,
     },
     reducers: {
       clearProfile: (state) => {
         state.profileData = null;
         state.error = null;
       },
     },
     extraReducers: (builder) => {
       builder
         .addCase(fetchProfile.pending, (state) => {
           state.loading = true;
           state.error = null;
         })
         .addCase(fetchProfile.fulfilled, (state, action) => {
           state.loading = false;
           state.profileData = action.payload;
         })
         .addCase(fetchProfile.rejected, (state, action) => {
           state.loading = false;
           state.error = action.payload || 'Failed to fetch profile data';
         });
     },
   });
   
   export const { clearProfile } = profileSlice.actions;
   export default profileSlice.reducer;

3. storeConfig.js에 리듀서 추가:

   redux/storeConfig.js 파일에 새로 생성한 slice 리듀서를 추가합니다.

   import { configureStore } from '@reduxjs/toolkit';
   import authReducer from './authSlice';
   import businessCardReducer from './businessCardSlice';
   import profileReducer from './profileSlice'; // 새 slice 추가
   
   const storeConfig = configureStore({
     reducer: {
       auth: authReducer,
       businessCard: businessCardReducer,
       profile: profileReducer, // 새 리듀서 등록
     },
   });
   
   export default storeConfig;

2. 사용자 정의 Hook 생성

1. Custom Hook 파일 생성: redux 디렉터리 안에 Custom Hook 파일을 생성합니다. 예: redux/profileState.js.

2. Hook 구성:

   // redux/profileState.js
   import { useSelector, useDispatch } from 'react-redux';
   import { fetchProfile, clearProfile } from './profileSlice';
   
   export const useProfile = () => {
     const profile = useSelector((state) => state.profile);
     const dispatch = useDispatch();
   
     const fetchUserProfile = (memberId) => {
       return dispatch(fetchProfile(memberId)); // return 추가
     };
   
     const clearUserProfile = () => {
       dispatch(clearProfile());
     };
   
     return {
       profile,
       fetchUserProfile,
       clearUserProfile,
     };
   };

3. 컴포넌트에서 Custom Hook 사용:

   컴포넌트에서 Custom Hook을 사용하여 상태를 관리합니다.

   // components/ProfileComponent.js
   import React, { useEffect } from 'react';
   import { View, Text, ActivityIndicator } from 'react-native';
   import { useProfile } from '../redux/profileState';
   
   const ProfileComponent = ({ memberId }) => {
     const { profile, fetchUserProfile } = useProfile();
   
     useEffect(() => {
       fetchUserProfile(memberId);
     }, [memberId]);
   
     if (profile.loading) {
       return <ActivityIndicator size="large" color="#0000ff" />;
     }
   
     if (profile.error) {
       return <Text>Error: {profile.error}</Text>;
     }
   
     return (
       <View>
         {profile.profileData ? (
           <Text>Profile Name: {profile.profileData.name}</Text>
         ) : (
           <Text>No Profile Data</Text>
         )}
       </View>
     );
   };
   
   export default ProfileComponent;

3. API 클라이언트 설정 (옵션)

API 요청이 필요한 경우, redux/apiClient.js 파일에 API 클라이언트를 추가하고 사용합니다.

// redux/apiClient.js
import axios from 'axios';

const API_BASE_URL = '<http://10.0.2.2:8080>'; // API URL 설정

export const getApiClient = (token = '') => {
  const headers = {
    'Content-Type': 'application/json',
  };
  if (token) {
    headers.Authorization = `Bearer ${token}`;
  }

  const instance = axios.create({
    baseURL: API_BASE_URL,
    headers,
    timeout: 5000,
  });

  instance.interceptors.request.use(
    (config) => {
      console.log('Request Config:', config);
      return config;
    },
    (error) => {
      console.error('Request Error:', error);
      return Promise.reject(error);
    }
  );

  instance.interceptors.response.use(
    (response) => {
      console.log('Response Data:', response.data);
      return response;
    },
    (error) => {
      if (error.response) {
        console.error('Server Error:', error.response.data);
      } else if (error.request) {
        console.error('No Response from Server:', error.request);
      } else {
        console.error('Request Setup Error:', error.message);
      }
      return Promise.reject(error);
    }
  );

  return instance;
};

새로운 기능 추가 시 체크리스트:

• 새로운 slice를 생성하고 필요한 비동기 작업(createAsyncThunk)을 정의했는가?
• slice 파일에서 초기 상태와 리듀서, extraReducers를 정의했는가?
• 새로 생성한 slice를 storeConfig.js에 추가했는가?
• 필요한 경우 Custom Hook 파일을 생성하고, 해당 Hook에서 상태를 반환하도록 설정했는가?
• 컴포넌트에서 Custom Hook을 사용하여 상태를 관리했는가?
• API 요청 시 올바른 엔드포인트와 헤더 설정을 확인했는가?