묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
소셜 accessToken 검증
현재 일반 로그인과 소셜 로그인(구글, 네이버)을 구현하려고 하는데 일반 로그인 부분은 해결했지만 막힌 부분이 소셜 로그인을 했을 때 제가 알기로는 프론트에서 받아서 헤더에 담아서 서버(스프링부트)에 보내주면 그거를 검증하고 인증받아야 SecurityContextHoder에 넣으면 컨트롤러에서 정보를 가지고 올 수 있는 것으로 알고 있습니다. 구현하려는 방식(프론트) 소셜 로그인 → (프론트) 헤더에 소셜 accessToken을 서버로 보내준다. → (백엔드) 받고 검증해준다. → (백엔드) 통과 시 SecurityContextHolder.getContext().setAuthentication()에 넣어준다. → 컨트롤러에서 정보를 빼와서 JWT를 만들어서 프론트한테 반환 → 프론트가 뭔가 처리할 때 헤더에 별도로 만든 accessToken 보내준다. 코드SpringSecurity http // JWT를 위한 Filter를 아래에서 만들어 줄건데 // 이 Filter를 어느위치에서 사용하겠다고 등록을 해주어야 Filter가 작동이 됩니다. // JWT를 검증하기 위한 JwtSecurityConfig를 적용하고 // jwtProvider를 사용하여 JWT 검증을 수행합니다. .apply(new JwtSecurityConfig( jwtProvider, googleOAuth2UserService, clientRegistration(), naverOAuth2UserService)); // OAuth2 http // oauth2Login() 메서드는 OAuth 2.0 프로토콜을 사용하여 소셜 로그인을 처리하는 기능을 제공합니다. .oauth2Login() .clientRegistrationRepository(clientRegistrationRepository()) // OAuth2 로그인 성공 이후 사용자 정보를 가져올 때 설정 담당 .userInfoEndpoint() // OAuth2 로그인 성공 시, 후작업을 진행할 서비스 .userService(principalOauth2UserService);JwtSecurityConfig일반 로그인 시 발급받은 JWT를 검증하는 곳과 소셜 로그인 accessToken을 검증하는 곳을 나눠서 실행public class JwtSecurityConfig extends SecurityConfigurerAdapter<DefaultSecurityFilterChain, HttpSecurity> { private final JwtProvider jwtProvider; private final GoogleOAuth2UserService googleOAuth2UserService; // OAuth2 클라이언트 등록 정보가 포함된 객체 private final ClientRegistration clientRegistration; private final NaverOAuth2UserService naverOAuth2UserService; public JwtSecurityConfig(JwtProvider jwtProvider, GoogleOAuth2UserService googleOAuth2UserService, ClientRegistration clientRegistration, NaverOAuth2UserService naverOAuth2UserService) { this.jwtProvider = jwtProvider; this.googleOAuth2UserService = googleOAuth2UserService; this.clientRegistration = clientRegistration; this.naverOAuth2UserService = naverOAuth2UserService; } @Override public void configure(HttpSecurity builder) throws Exception { // JwtAuthenticationFilter가 일반 로그인에 대한 토큰 검증을 처리 // JwtAuthenticationFilter는 Jwt 토큰을 사용하여 사용자의 인증을 처리하는 필터 // 이 필터는 일반 로그인 요청에서 Jwt 토큰을 검증하고 사용자를 인증합니다. // 이 필터를 UsernamePasswordAuthenticationFilter 앞에 추가하여 Jwt 토큰 검증을 먼저 수행하도록 합니다. JwtAuthenticationFilter customFilter = new JwtAuthenticationFilter(jwtProvider); builder.addFilterBefore(customFilter, UsernamePasswordAuthenticationFilter.class); // OAuth2 프로바이더(Google 또는 Naver)로부터 제공된 OAuth2 토큰을 사용하여 사용자를 인증하는 역할을 합니다. // 이 필터를 JwtAuthenticationFilter 앞에 추가하여 Jwt 토큰 검증 후 OAuth2 토큰 인증을 수행하도록 합니다. builder.addFilterBefore( new OAuth2TokenAuthentication( googleOAuth2UserService, clientRegistration, naverOAuth2UserService), JwtAuthenticationFilter.class); } }JwtAuthenticationFilter@Log4j2 @RequiredArgsConstructor public class JwtAuthenticationFilter extends OncePerRequestFilter { public static final String HEADER_AUTHORIZATION = "Authorization"; private final JwtProvider jwtProvider; // doFilter는 토큰을 검증하고 // 토큰의 인증정보를 SecurityContext에 담아주는 역할을 한다. @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { HttpServletRequest httpServletRequest = (HttpServletRequest) request; // request header에서 JWT를 추출 // 요청 헤더에서 JWT 토큰을 추출하는 역할 String jwt = resovleToken(httpServletRequest); log.info("jwt in JwtAuthenticationFilter : " + jwt); // 어떤 경로로 요청을 했는지 보여줌 String requestURI = httpServletRequest.getRequestURI(); log.info("uri JwtAuthenticationFilter : " + requestURI); if (StringUtils.hasText(jwt) && jwtProvider.validateToken(jwt)) { try { Authentication authentication = jwtProvider.getAuthentication(jwt); log.info("authentication in JwtAuthenticationFilter : " + authentication); // Spring Security의 SecurityContextHolder를 사용하여 현재 인증 정보를 설정합니다. // 이를 통해 현재 사용자가 인증된 상태로 처리됩니다. // 위에서 jwtProvider.getAuthentication(jwt)가 반환이 UsernamePasswordAuthenticationToken로 // SecurityContext에 저장이 되는데 SecurityContextHolder.getContext().setAuthentication(authentication); // 처리를 하는 이유는 다음과 같다. /* * 1. 인증 정보 검증: JWT 토큰이나 다른 인증 정보를 사용하여 사용자를 식별하고 * 권한을 확인하기 위해서는 토큰을 해독하여 사용자 정보와 권한 정보를 추출해야 합니다. * 이 역할은 jwtProvider.getAuthentication(jwt)에서 수행됩니다. * 이 메서드는 JWT 토큰을 분석하여 사용자 정보와 권한 정보를 추출하고, 해당 정보로 인증 객체를 생성합니다. * * 2. 인증 정보 저장: * 검증된 인증 객체를 SecurityContextHolder.getContext().setAuthentication(authentication);를 * 사용하여 SecurityContext에 저장하는 이유는, Spring Security에서 현재 사용자의 인증 정보를 * 전역적으로 사용할 수 있도록 하기 위함입니다. 이렇게 하면 다른 부분에서도 현재 사용자의 인증 정보를 사용할 수 있게 되며, * Spring Security가 제공하는 @AuthenticationPrincipal 어노테이션을 통해 현재 사용자 정보를 편리하게 가져올 수 있습니다. * */ SecurityContextHolder.getContext().setAuthentication(authentication); } catch (Exception e) { throw new RuntimeException("잘못된 형식의 JWT입니다."); } } filterChain.doFilter(request, response); } // 토큰을 가져오기 위한 메소드 // Authorization로 정의된 헤더 이름을 사용하여 토큰을 찾고 // 토큰이 "Bearer "로 시작하거나 "Bearer "로 안온 것도 토큰 반환 private String resovleToken(HttpServletRequest httpServletRequest) { String token = httpServletRequest.getHeader(HEADER_AUTHORIZATION); log.info("token : " + token); if (StringUtils.hasText(token) && token.startsWith("Bearer ")) { return token.substring(7); } else if (StringUtils.hasText(token)) { return token; } else { return null; } }OAuth2TokenAuthenticationpackage com.example.social.config.oauth2; import com.example.social.config.oauth2.verifirer.GoogleOAuth2UserService; import com.example.social.config.oauth2.verifirer.NaverOAuth2UserService; import io.jsonwebtoken.Claims; import io.jsonwebtoken.JwtParser; import io.jsonwebtoken.Jwts; import lombok.RequiredArgsConstructor; import lombok.extern.log4j.Log4j2; import org.springframework.security.core.Authentication; import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.security.oauth2.client.authentication.OAuth2AuthenticationToken; import org.springframework.security.oauth2.client.registration.ClientRegistration; import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest; import org.springframework.security.oauth2.core.OAuth2AccessToken; import org.springframework.security.oauth2.core.user.OAuth2User; import org.springframework.util.StringUtils; import org.springframework.web.filter.OncePerRequestFilter; import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Log4j2 @RequiredArgsConstructor public class OAuth2TokenAuthentication extends OncePerRequestFilter { public static final String HEADER_AUTHORIZATION = "Authorization"; private final GoogleOAuth2UserService googleOAuth2UserService; private final ClientRegistration clientRegistration; private final NaverOAuth2UserService naverOAuth2UserService; @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { HttpServletRequest httpServletRequest = (HttpServletRequest) request; String jwt = resovleToken(httpServletRequest); String getIssuer = checkToken(jwt); if ("https://accounts.google.com".equals(getIssuer)) { // Google에서 발급한 토큰을 기반으로 OAuth2AccessToken 객체를 생성합니다. // 이 객체는 토큰의 타입, 값, 발급 시간 및 만료 시간과 같은 정보를 포함합니다. OAuth2AccessToken accessToken = new OAuth2AccessToken( // 토큰 타입 OAuth2AccessToken.TokenType.BEARER, // 토큰 값 jwt, // 발급 시간 null, // 만료 시간 null); // OAuth2UserRequest 생성 // 이 객체는 클라이언트 등록 정보와 OAuth2AccessToken 객체를 포함하여 // OAuth 2.0 사용자 정보 요청에 필요한 정보를 제공합니다. OAuth2UserRequest userRequest = new OAuth2UserRequest( // ClientRegistration 객체 clientRegistration, // OAuth2AccessToken 객체 accessToken); // googleOAuth2UserService를 사용하여 사용자 정보를 검증하고 OAuth2User 객체를 얻어옵니다. OAuth2User oAuth2User = googleOAuth2UserService.loadUser(userRequest); // SecurityContextHolder에 인증 정보 설정 // 검증된 사용자 정보를 기반으로 OAuth2AuthenticationToken을 생성합니다. // 이 토큰은 Spring Security에서 사용되며, 사용자 정보와 사용자의 권한을 포함합니다. Authentication authentication = new OAuth2AuthenticationToken( oAuth2User, oAuth2User.getAuthorities(), // registrationId "google"); // SecurityContextHolder에 인증 정보 설정 SecurityContextHolder.getContext().setAuthentication(authentication); } if ("https://api.naver.com".equals(getIssuer)) { // 다른 발급자 (Google이 아닌) 경우 // 네이버로부터 받은 토큰을 OAuth2AccessToken 객체로 생성합니다. // 이 객체는 토큰의 타입, 값, 발급 시간 및 만료 시간 등을 포함합니다. // 이 정보는 OAuth2 인증을 수행하는 데 사용됩니다. OAuth2AccessToken naverAccessToken = new OAuth2AccessToken( OAuth2AccessToken.TokenType.BEARER, jwt, null, null); // 네이버 OAuth2 클라이언트 등록 정보와 받은 토큰을 사용하여 OAuth2 사용자 정보 요청을 만듭니다. // 이 요청은 네이버로부터 사용자 정보를 가져오는 데 사용됩니다. OAuth2UserRequest naverUserRequest = new OAuth2UserRequest( clientRegistration, naverAccessToken); // 네아로 API를 사용하여 사용자 정보 가져오기 // 이것은 네이버 API를 호출하고 사용자 정보를 가져오는 로직이 포함된 서비스입니다. OAuth2User naverUser = naverOAuth2UserService.loadUser(naverUserRequest); // 네이버에서 가져온 사용자 정보를 기반으로 Authentication 객체 생성 // 네이버로부터 가져온 사용자 정보를 기반으로 OAuth2 인증 토큰을 생성합니다. // 이 토큰은 Spring Security에서 사용되며 사용자 정보와 사용자의 권한을 포함합니다. // 여기서 "naver"는 등록 ID로 지정되며, 네이버와 관련된 토큰임을 나타냅니다. Authentication naverAuthentication = new OAuth2AuthenticationToken( naverUser, naverUser.getAuthorities(), // registrationId "naver"); // 네이버 Authentication 객체를 SecurityContext에 저장 SecurityContextHolder.getContext().setAuthentication(naverAuthentication); } } // 토큰을 가져오기 위한 메소드 // Authorization로 정의된 헤더 이름을 사용하여 토큰을 찾고 // 토큰이 "Bearer "로 시작하거나 "Bearer "로 안온 것도 토큰 반환 private String resovleToken(HttpServletRequest httpServletRequest) { String token = httpServletRequest.getHeader(HEADER_AUTHORIZATION); log.info("token : " + token); if (StringUtils.hasText(token) && token.startsWith("Bearer ")) { return token.substring(7); } else if (StringUtils.hasText(token)) { return token; } else { return null; } } private String checkToken(String token) { try { JwtParser parser = Jwts.parserBuilder().build(); // 주어진 토큰을 디코딩하여 JWT 클레임을 추출합니다. // 이 클레임에는 토큰에 대한 정보가 포함되어 있으며, // 이 코드에서는 클레임에서 발급자(issuer) 정보를 확인하기 위해 사용합니다. Claims claims = parser.parseClaimsJws(token).getBody(); // iss 클레임을 확인하여 Google 발급 토큰 여부를 판별 String issuer = (String) claims.get("iss"); log.info("issuer : " + issuer); return issuer; } catch (Exception e) { // 예외 처리: JWT 디코딩 실패 시 처리할 내용을 여기에 추가 log.error("JWT 디코딩 실패: " + e.getMessage(), e); throw new RuntimeException("JWT 디코딩 실패: " + e.getMessage(), e); } } }GoogleOAuth2UserServicepackage com.example.social.config.oauth2.verifirer; import com.google.api.client.googleapis.auth.oauth2.GoogleIdToken; import com.google.api.client.googleapis.auth.oauth2.GoogleIdToken.Payload; import com.google.api.client.googleapis.auth.oauth2.GoogleIdTokenVerifier; import com.google.api.client.http.HttpTransport; import com.google.api.client.http.javanet.NetHttpTransport; import com.google.api.client.json.JsonFactory; import com.google.api.client.json.jackson2.JacksonFactory; import org.springframework.beans.factory.annotation.Value; import org.springframework.security.core.authority.SimpleGrantedAuthority; import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest; import org.springframework.security.oauth2.client.userinfo.OAuth2UserService; import org.springframework.security.oauth2.core.OAuth2AuthenticationException; import org.springframework.security.oauth2.core.user.DefaultOAuth2User; import org.springframework.security.oauth2.core.user.OAuth2User; import org.springframework.security.oauth2.core.user.OAuth2UserAuthority; import org.springframework.stereotype.Service; import java.io.IOException; import java.security.GeneralSecurityException; import java.util.Collections; import java.util.HashMap; import java.util.Map; @Service public class GoogleOAuth2UserService implements OAuth2UserService<OAuth2UserRequest, OAuth2User> { @Value("${spring.security.oauth2.client.registration.google.client-id}") private String googleClientId; private final HttpTransport httpTransport = new NetHttpTransport(); private final JsonFactory jsonFactory = new JacksonFactory(); @Override public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException { String accessToken = userRequest.getAccessToken().getTokenValue(); // Google API 클라이언트 라이브러리를 사용하여 accessToken을 검증 // GoogleIdTokenVerifier는 Google API의 ID 토큰을 검증하기 위한 도구입니다. // Google의 OAuth 2.0 서비스를 통해 발급된 ID 토큰의 유효성을 확인하고, // 해당 토큰이 애플리케이션의 클라이언트 ID에 대한 것인지 확인하는 역할을 합니다. // httpTransport: HTTP 통신을 처리하는 라이브러리를 지정하는 부분입니다. // Google API와 통신하기 위해 사용하는 HTTP 트랜스포트 라이브러리를 설정합니다. // jsonFactory: JSON 데이터를 파싱하고 생성하는 데 사용되는 라이브러리를 지정하는 부분입니다. // Google API와 통신할 때 JSON 형식의 데이터를 처리하는 데 사용됩니다. GoogleIdTokenVerifier verifier = new GoogleIdTokenVerifier.Builder(httpTransport, jsonFactory) // 이 부분에서는 검증할 ID 토큰의 대상(audience)을 설정합니다. // 여기서는 Google API 클라이언트 ID를 대상으로 설정하고 있으며, // 이것은 해당 ID 토큰이 특정 클라이언트(여기서는 구글 클라이언트)에 대한 것임을 나타냅니다. .setAudience(Collections.singletonList(googleClientId)) .build(); GoogleIdToken idToken; try { // Google의 ID 토큰 검증기(GoogleIdTokenVerifier)를 사용하여 // 주어진 액세스 토큰(accessToken)을 검증하는 작업을 수행합니다. idToken = verifier.verify(accessToken); } catch (GeneralSecurityException e) { throw new RuntimeException(e); } catch (IOException e) { throw new RuntimeException(e); } if(idToken != null) { // Google ID 토큰(idToken)에서 클레임(claims)을 추출하기 위해 // idToken 객체에서 Payload를 얻어옵니다. 토큰의 페이로드는 토큰에 포함된 클레임 정보를 담고 있습니다. Payload payload = idToken.getPayload(); // 사용자 정보를 저장할 attributes 맵을 생성합니다. // 이 맵에는 사용자의 이름, 이메일, 서브젝트(sub), 그리고 권한 정보가 포함될 것입니다. Map<String, Object> attributes = new HashMap<>(); // 사용자 정보를 추출하고 OAuth2User 객체로 변환 // 페이로드에서 이름(사용자의 실제 이름)을 추출 attributes.put("name", payload.get("name")); // 페이로드에서 이메일을 추출 attributes.put("email", payload.getEmail()); // 페이로드에서 서브젝트(sub) 정보를 추출 attributes.put("sub", payload.getSubject()); // 사용자에게 ROLE_USER 권한을 부여하기 위해 attributes 맵에 권한 정보를 추가합니다. attributes.put("auth", new SimpleGrantedAuthority("ROLE_USER")); // DefaultOAuth2User는 Spring Security에서 OAuth 2.0 사용자를 나타내는 구현 클래스입니다. // 이 객체는 사용자의 인증 정보와 권한 정보를 가지고 있습니다. return new DefaultOAuth2User( Collections.singleton(new OAuth2UserAuthority(attributes)), attributes, "sub" ); } else { throw new OAuth2AuthenticationException("Google AccessToken verification failed"); } } }NaverOAuth2UserServicepackage com.example.social.config.oauth2.verifirer; import org.springframework.context.annotation.Lazy; import org.springframework.http.HttpHeaders; import org.springframework.http.MediaType; import org.springframework.security.core.authority.SimpleGrantedAuthority; import org.springframework.security.oauth2.client.registration.ClientRegistration; import org.springframework.security.oauth2.client.registration.ClientRegistrationRepository; import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest; import org.springframework.security.oauth2.core.OAuth2AuthenticationException; import org.springframework.security.oauth2.core.user.DefaultOAuth2User; import org.springframework.security.oauth2.core.user.OAuth2User; import org.springframework.stereotype.Service; import org.springframework.util.LinkedMultiValueMap; import org.springframework.util.MultiValueMap; import org.springframework.web.client.RestTemplate; import java.util.Collections; import java.util.Map; @Service public class NaverOAuth2UserService { public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException { String accessToken = userRequest.getAccessToken().getTokenValue(); // 네이버 API 엔드포인트 URL String naverApiUrl = "https://openapi.naver.com/v1/nid/me"; // 네이버 API 호출을 위한 HTTP 헤더 설정 HttpHeaders headers = new HttpHeaders(); // headers 객체의 setContentType 메서드를 사용하여 요청의 Content-Type 헤더를 설정합니다. // MediaType.APPLICATION_FORM_URLENCODED는 HTTP 요청 본문이 폼 데이터로 인코딩되어 있다는 것을 나타냅니다. // 이러한 형태의 요청은 주로 HTML 폼 데이터를 서버로 제출할 때 사용됩니다. headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED); // Authorization 헤더를 설정합니다. 이 헤더는 HTTP 요청에 인증 정보를 포함하는 데 사용됩니다. // 여기서 "Bearer " + accessToken는 OAuth 2.0 인증 프로토콜을 사용하여 // 보호된 리소스에 액세스하기 위한 액세스 토큰을 Bearer 스타일로 설정하는 것을 나타냅니다. // Bearer는 토큰의 타입을 나타내며, 액세스 토큰의 실제 값을 나타냅니다. // 이렇게 설정된 Authorization 헤더를 통해 서버는 요청이 인증되었음을 확인하고, // 해당 액세스 토큰의 유효성을 검증할 수 있습니다. headers.set("Authorization", "Bearer " + accessToken); // 네이버 API 호출을 위한 요청 파라미터 설정 // MultiValueMap은 HTTP 요청 본문의 데이터를 표현하기 위한 자료 구조입니다. // 네이버 API 호출 시 요청 본문에 보낼 데이터를 설정하기 위해 body라는 MultiValueMap 객체를 생성합니다. // 이 데이터는 폼 데이터 형식으로 API 서버로 전송될 것입니다. MultiValueMap<String, String> body = new LinkedMultiValueMap<>(); // 네이버 API 호출 // RestTemplate은 Spring Framework에서 제공하는 // HTTP 요청을 보내고 응답을 받는 데 사용되는 클라이언트 라이브러리입니다. RestTemplate restTemplate = new RestTemplate(); // RestTemplate을 사용하여 네이버 API를 호출하고 응답을 받습니다. // naverApiUrl: 네이버 API의 엔드포인트 URL을 나타냅니다. // 이 URL은 네이버 API의 특정 엔드포인트에 요청을 보내기 위해 사용됩니다. // body 객체가 요청 본문에 담길 것입니다. // API 응답을 받을 데이터 유형을 지정합니다. // 여기서는 API 응답을 Map 형태로 받을 것이며, 이 Map에는 API 응답의 JSON 데이터가 매핑됩니다. Map<String, Object> naverApiResult = restTemplate.patchForObject(naverApiUrl, body, Map.class); // 네이버 API 응답을 파싱하여 사용자 정보 추출 // naverApiResult라는 Map에서 "id" 키에 해당하는 값을 추출합니다. // 이 값은 네이버 사용자의 고유 식별자인 사용자 ID를 나타냅니다. String naverUserId = (String) naverApiResult.get("id"); String naverUserEmail = (String) naverApiResult.get("email"); String naverUserName = (String) naverApiResult.get("name"); // 추출한 사용자 정보로 OAuth2User 객체 생성 // 이객체는 Spring Security OAuth2에서 사용자 정보를 나타내는 데 사용됩니다. OAuth2User naverUser = new DefaultOAuth2User( // 사용자에게 부여할 권한을 설정합니다. Collections.singleton(new SimpleGrantedAuthority("ROLE_USER")), // 사용자의 고유 식별자인 네이버 사용자 ID를 "naverUserId"라는 키와 함께 맵 형태로 저장합니다. Collections.singletonMap("naverUserId", naverUserId), // OAuth2User의 이름을 지정합니다. 이것은 OAuth2User 객체 내에서 사용됩니다. "naverUserId" ); // 이메일 정보 추가 // 생성한 OAuth2User 객체에서 추가 정보를 설정합니다. // 이 경우, "naverUserEmail" 키를 사용하여 네이버 사용자의 이메일 정보를 맵에 추가합니다. ((DefaultOAuth2User) naverUser).getAttributes().put("naverUserEmail", naverUserEmail); // 이렇게 생성된 naverUser 객체에는 사용자의 권한과 사용자 ID, 그리고 이메일 정보가 포함되어 있습니다. // 이 객체는 사용자 인증 후에 Spring Security의 SecurityContextHolder에 // 저장되어 사용자 정보를 유지하고 제공합니다. return naverUser; } }controller@GetMapping("/success-oauth") public ResponseEntity<?> oauth2Token(@AuthenticationPrincipal OAuth2User oAuth2User) { log.info("oAuth2User : " + oAuth2User); String name = oAuth2User.getName(); log.info("name :" + name); ResponseEntity<?> tokenForOAuth2 = memberService.createTokenForOAuth2(name); return ResponseEntity.ok().body(tokenForOAuth2); }PrincipalOauth2UserService소셜 로그인 버튼을 누르고 성공하면 바로 소셜 로그인 유저 정보와 바로 가입할 수 있도록 구현package com.example.social.config.oauth2; import com.example.social.config.auth.PrincipalDetails; import com.example.social.config.oauth2.provider.GoogleUserInfo; import com.example.social.config.oauth2.provider.NaverUserInfo; import com.example.social.config.oauth2.provider.OAuth2UserInfo; import com.example.social.domain.Role; import com.example.social.entity.MemberEntity; import com.example.social.repository.MemberRepository; import lombok.RequiredArgsConstructor; import lombok.extern.log4j.Log4j2; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; import org.springframework.security.oauth2.client.userinfo.DefaultOAuth2UserService; import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest; import org.springframework.security.oauth2.core.OAuth2AuthenticationException; import org.springframework.security.oauth2.core.user.OAuth2User; import org.springframework.stereotype.Service; import java.util.Map; // 소셜 로그인하면 사용자 정보를 가지고 온다. // 가져온 정보와 PrincipalDetails 객체를 생성합니다. @Service @Log4j2 @RequiredArgsConstructor public class PrincipalOauth2UserService extends DefaultOAuth2UserService { private final MemberRepository memberRepository; private final BCryptPasswordEncoder bCryptPasswordEncoder; @Override // loadUser 함수 : userRequest 정보로 loadUser 함수를 이용하여 회원 프로필을 받는다. public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException { // registrationId로 어떤 OAuth로 로그인 했는지 확인가능 log.info("clientRegistration in PrincipalOauth2UserService : " + userRequest.getClientRegistration()); log.info("accessToken in PrincipalOauth2UserService : " + userRequest.getAccessToken().getTokenValue()); // OAuth2 유저 정보를 가져옵니다. OAuth2User oAuth2User = super.loadUser(userRequest); // 구글 로그인 버튼 클릭 →구글 로그인 창 → 로그인 완료 → code 를 리턴(OAuth-Client 라이브러리) → AccessToken 요청 // userRequest 정보 → 회원 프로필 받아야함(loadUser 함수 호출) → 구글로부터 회원 프로필을 받아준다. log.info("getAttributes in PrincipalOauth2UserService : " + oAuth2User.getAttributes()); // 회원가입 강제 진행 OAuth2UserInfo oAuth2UserInfo = null; // 소셜 정보를 가지고 옵니다. // OAuth2 서비스 아이디 if(userRequest.getClientRegistration().getRegistrationId().equals("google")) { log.info("구글 로그인 요청"); oAuth2UserInfo = new GoogleUserInfo(oAuth2User.getAttributes()); } else if(userRequest.getClientRegistration().getRegistrationId().equals("naver")) { log.info("네이버 로그인 요청"); // 네이버는 response를 json으로 리턴을 해주는데 아래의 코드가 받아오는 코드다. // response={id=5SN-ML41CuX_iAUFH6-KWbuei8kRV9aTHdXOOXgL2K0, email=zxzz8014@naver.com, name=전혜영} // 위의 정보를 NaverUserInfo에 넘기면 oAuth2UserInfo = new NaverUserInfo((Map) oAuth2User.getAttributes().get("response")); }else { log.info("지원하지 않는 소셜 로그인입니다."); } // 사용자가 로그인한 소셜 서비스를 가지고 옵니다. // 예시) google or naver 같은 값을 가질 수 있다. String provider = oAuth2UserInfo.getProvider(); // 사용자의 소셜 서비스(provider)에서 발급된 고유한 식별자를 가져옵니다. // 이 값은 해당 소셜 서비스에서 유니크한 사용자를 식별하는 용도로 사용됩니다. String providerId = oAuth2UserInfo.getProviderId(); String name = oAuth2UserInfo.getName(); String password = bCryptPasswordEncoder.encode("get"); // 사용자의 이메일 주소를 가지고 옵니다. // 소셜 서비스에서 제공하는 이메일 정보를 사용합니다. String email = oAuth2UserInfo.getEmail(); // 사용자의 권한 정보를 설정합니다. // 소셜 로그인으로 접속하면 무조건 USER로 등록되게 설정 Role role = Role.USER; // UUID를 사용하여 랜덤한 문자열 생성 // 닉네임을 랜덤으로 설정할거면 이 코드 적용 // UUID uuid = UUID.randomUUID(); // // External User 줄임말 : EU // String randomNickName = // "EU" + uuid.toString().replace("-", "").substring(0, 9); // 닉네임을 소셜 아이디 이름을 가지고 적용한다. String nickName = oAuth2UserInfo.getName(); // 이메일 주소를 사용하여 이미 해당 이메일로 가입된 사용자가 있는지 데이터베이스에서 조회합니다. MemberEntity member = memberRepository.findByUserEmail(email); if(member == null) { log.info("OAuth 로그인이 최초입니다."); log.info("OAuth 자동 회원가입을 진행합니다."); member = MemberEntity.builder() .userEmail(email) .role(role) .userName(name) .provider(provider) .providerId(providerId) .userPw(password) .nickName(nickName) .build(); log.info("member : " + member); memberRepository.save(member); }else { log.info("로그인을 이미 한적이 있습니다. 당신은 자동회원가입이 되어 있습니다."); // 이미 존재하는 회원이면 업데이트를 해줍니다. member = MemberEntity.builder() .userId(member.getUserId()) .userEmail(email) .role(role) .userName(name) .provider(provider) .providerId(providerId) .userPw(password) .nickName(nickName) .build(); memberRepository.save(member); } // attributes가 있는 생성자를 사용하여 PrincipalDetails 객체 생성 // 소셜 로그인인 경우에는 attributes도 함께 가지고 있는 PrincipalDetails 객체를 생성하게 됩니다. PrincipalDetails principalDetails = new PrincipalDetails(member, oAuth2User.getAttributes()); log.info("principalDetails in PrincipalOauth2UserService : " + principalDetails); return principalDetails; } }PrincipalDetailspackage com.example.social.config.auth; import com.example.social.entity.MemberEntity; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.Setter; import lombok.ToString; import lombok.extern.log4j.Log4j2; import org.springframework.security.core.GrantedAuthority; import org.springframework.security.core.authority.SimpleGrantedAuthority; import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.oauth2.core.user.OAuth2User; import org.springframework.stereotype.Component; import java.util.ArrayList; import java.util.Collection; import java.util.Map; // PrincipalDetails 클래스는 UserDetails 인터페이스를 구현하여 사용자의 정보와 권한을 저장하는 역할을 하고 있습니다. // 여기서 JwtProvider 에 정보를 줘서 토큰을 생성하게 한다. // UserDetails → 일반 로그인 // OAuth2User → 소셜 로그인 @Setter @Getter @ToString @Log4j2 @NoArgsConstructor @Component public class PrincipalDetails implements UserDetails, OAuth2User { // 일반 로그인 정보를 저장하기 위한 필드 private MemberEntity member; // OAuth2 로그인 정보를 저장하기 위한 필드 // attributes는 Spring Security에서 OAuth2 인증을 수행한 후에 // 사용자에 대한 추가 정보를 저장하는 데 사용되는 맵(Map)입니다. // OAuth2 인증은 사용자 인증 후에 액세스 토큰(Access Token)을 발급받게 되는데, // 이 토큰을 사용하여 OAuth2 서비스(provider)로부터 사용자의 프로필 정보를 요청할 수 있습니다. // 예를 들어, 소셜 로그인을 사용한 경우에는 attributes에는 사용자의 소셜 서비스(provider)에서 제공하는 프로필 정보가 담겨 있습니다. // 소셜 로그인 서비스(provider)마다 제공하는 프로필 정보가 다를 수 있습니다. // 일반적으로 attributes에는 사용자의 아이디(ID), 이름, 이메일 주소, 프로필 사진 URL 등의 정보가 포함됩니다. /* * 구글의 경우 * { "sub": "100882758450498962866", // 구글에서 발급하는 고유 사용자 ID "name": "John Doe", // 사용자 이름 "given_name": "John", // 이름(이름 부분) "family_name": "Doe", // 성(성(성) 부분) "picture": "https://lh3.googleusercontent.com/a/AAcHTtdzQomNwZCruCcM0Eurcf8hAgBHcgwvbXEBQdw3olPkSg=s96-c", // 프로필 사진 URL "email": "johndoe@example.com", // 이메일 주소 "email_verified": true, // 이메일 주소 인증 여부 "locale": "en" // 지역 설정 } * */ private Map<String, Object> attributes; // 일반 로그인 // 여기서는 Oauth2를 사용하지 않고 JWT와 security만 사용할 거임 public PrincipalDetails(MemberEntity member) { this.member = member; } // OAuth2 로그인 public PrincipalDetails(MemberEntity member, Map<String, Object> attributes) { this.member = member; this.attributes = attributes; } // 해당 유저의 권한을 권한을 리턴 @Override public Collection<? extends GrantedAuthority> getAuthorities() { Collection<GrantedAuthority> collection = new ArrayList<>(); collection.add(new SimpleGrantedAuthority("ROLE_" + member.getRole().toString())); return collection; } // 사용자 패스워드를 반환 @Override public String getPassword() { return member.getUserPw(); } // 사용자 이름 반환 @Override public String getUsername() { return member.getUserEmail(); } // 계정 만료 여부 반환 @Override public boolean isAccountNonExpired() { // 만료되었는지 확인하는 로직 // true = 만료되지 않음 return true; } // 계정 잠금 여부 반환 @Override public boolean isAccountNonLocked() { // true = 잠금되지 않음 return true; } // 패스워드의 만료 여부 반환 @Override public boolean isCredentialsNonExpired() { // 패스워드가 만료되었는지 확인하는 로직 // true = 만료되지 않음 return true; } // 계정 사용 가능 여부 반환 @Override public boolean isEnabled() { // 계정이 사용 가능한지 확인하는 로직 // true = 사용 가능 return true; } @Override public Map<String, Object> getAttributes() { log.info("attributes : " + attributes); return attributes; } @Override // OAuth2 인증에서는 사용되지 않는 메서드이므로 null 반환 public String getName() { return null; } } JWT 구현 로직 생략 문제점(백엔드) 받고 검증해준다. ↑ 이 부분에서 막혔습니다. private String checkToken(String token) { try { JwtParser parser = Jwts.parserBuilder().build(); // 주어진 토큰을 디코딩하여 JWT 클레임을 추출합니다. // 이 클레임에는 토큰에 대한 정보가 포함되어 있으며, // 이 코드에서는 클레임에서 발급자(issuer) 정보를 확인하기 위해 사용합니다. Claims claims = parser.parseClaimsJws(token).getBody(); // iss 클레임을 확인하여 Google 발급 토큰 여부를 판별 String issuer = (String) claims.get("iss"); log.info("issuer : " + issuer); return issuer; } catch (Exception e) { // 예외 처리: JWT 디코딩 실패 시 처리할 내용을 여기에 추가 log.error("JWT 디코딩 실패: " + e.getMessage(), e); throw new RuntimeException("JWT 디코딩 실패: " + e.getMessage(), e); } }여기서 issuer을 가져와서 구글인지 네이버인지 확인하려고 하는 과정에서 JWT는 .이 2개인데 구글이나 네이버 같은 경우는 .이 1개라 오류가 발생하는 거 같습니다... 구글, 네이버 검증해서 JWT를 반환하려고 하는데 계속 실패하니 막막하네요... 질문소셜 로그인같이 .이 1개일 때는 어떻게 거기서 정보를 빼올 수 있나요? 보통 강의에서 보면 소셜 accessToken을 받고 검증해서 거기서 정보를 빼는게 아니라 그냥 로직을 구현하면 정보를 가져오던데 저는 JWT 검증 로직에서 계속 소셜로그인 accessToken이 잘못되었다고 떠서 소셜 로그인 accessToken을 검증하는 로직을 구현했는데 이렇게 하는게 맞나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
강좌 끝나고 댓글 수정 기능 만들어 보고 있습니다
{commentFormOpened && ( <div> {commentEditMode ? <CommentContent post={post} commentEditMode={commentEditMode} onClickUpdateComment={onClickUpdateComment} onCancelUpdateComment={onCancelUpdateComment} /> : ( <> <CommentForm post={post} /> <CommentContent post={post} commentEditMode={commentEditMode} onClickUpdateComment={onClickUpdateComment} onCancelUpdateComment={onCancelUpdateComment} /> </> ) } </div> )} //PostCard.js import React, { useCallback, useEffect, useState } from 'react'; import { Avatar, Comment, List, Input, Button, Popover } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import Link from 'next/link'; import PropTypes from 'prop-types'; import { EllipsisOutlined } from '@ant-design/icons'; import { UPDATE_COMMENT_REQUEST } from '../reducers/post'; const {TextArea} = Input; const CommentContent = ({ post, onCancelUpdateComment, commentEditMode, onClickUpdateComment }) => { const dispatch = useDispatch(); const id = useSelector((state) => state.user?.me.id); const { updateCommentLoading, updateCommentDone } = useSelector((state) => state.post); const [editText, setEditText] = useState(post.Comments.content); useEffect(() => { if (updateCommentDone) { onCancelUpdateComment(); } }, [updateCommentDone]); const onChangeCommentText = useCallback((e) => { setEditText(e.target.value); }, []); const onChangeComment = useCallback(() => { dispatch({ type: UPDATE_COMMENT_REQUEST, data: { PostId: post.id, CommentId: post.Comments.id, UserId: id, content: editText, }, }); }, [post, id, editText, post.Comments.id]); return ( <div> {commentEditMode ? ( <> <TextArea value={editText} onChange={onChangeCommentText} /> <Button.Group> <Button loading={updateCommentLoading} onClick={onChangeComment}>수정</Button> <Button type="danger" onClick={onCancelUpdateComment}>수정 취소</Button> </Button.Group> </> ) : <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( <li> <Comment actions={[<Popover key="more" content={ <Button.Group> {id && item.User.id === id ? ( <> <Button onClick={onClickUpdateComment}>수정</Button> <Button type="danger"> 삭제 </Button> </> ) : ( <Button>신고</Button> )} </Button.Group> } > <EllipsisOutlined /> </Popover>,]} author={item.User.nickname} avatar={ <Link href={`/user/${item.User.id}`}> <a><Avatar>{item.User.nickname[0]}</Avatar></a> </Link> } content={item.content} /> </li> )} /> } </div> ) } CommentContent.propTypes = { post: PropTypes.shape({ id: PropTypes.number.isRequired, Comments: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, })) }), onCancelUpdateComment: PropTypes.func.isRequired, onClickUpdateComment: PropTypes.func.isRequired, commentEditMode: PropTypes.bool }; CommentContent.defaultsProps = { commentEditMode: false, } export default CommentContent; //CommentContent.js case UPDATE_COMMENT_REQUEST: draft.updateCommentLoading = true; draft.updateCommentDone = false; draft.updateCommentError = null; break; case UPDATE_COMMENT_SUCCESS: draft.updateCommentLoading = false; draft.updateCommentDone = true; const post = draft.mainPosts.find((v) => v.id === action.data.PostId); post.Comments = post.Comments.find((v) => v.id === action.data.CommentId); post.Comments = post.Comments.find((v) => v.id === action.data.UserId); post.Comments.content = action.data.content; break; case UPDATE_COMMENT_FAILURE: draft.updateCommentLoading = false; draft.updateCommentError = action.error; break; //reducers/post.js function updateCommentAPI(data) { return axios.patch(`/post/${data.PostId}/comment`, data); } function* updateComment(action) { try { const result = yield call(updateCommentAPI, action.data); yield put({ type: UPDATE_COMMENT_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: UPDATE_COMMENT_FAILURE, error: err.response.data, }); } } // sagas/post.js router.patch('/:postId/comment', isLoggedIn, async (req, res, next) => { // PATCH post/2/comment try { await Comment.update({ content: req.body.content, }, { where: { PostId: req.params.postId, UserId: req.user.id, }, }); res.status(200).json({ PostId: parseInt(req.params.postId, 10), UserId: req.user.id, content: req.body.content, }); } catch (error) { console.error(error); next(error); } }); //routes/post.js이렇게 PostId, UserId, content가 보내지고, 실패가 뜨면서 새로고침을 하면 해당 글에 달았던 댓글들이 모두 다 "zzz"로 변경되어 있습니다. 그래서 CommentId를 보내줘야 될 거 같은데 여기서 막혀서 감이 도무지 잡히질 않습니다.
-
미해결
pandas-profiling 사용 문제
--------------------------------------------------------------------------- PydanticImportError Traceback (most recent call last) Cell In[207], line 8 6 from sklearn.metrics import mean_absolute_error, mean_squared_error, r2_score 7 from sklearn.linear_model import LinearRegression ----> 8 from pandas_profiling import ProfileReport File ~\anaconda3\Lib\site-packages\pandas_profiling\__init__.py:6 1 """Main module of pandas-profiling. 2 3 .. include:: ../../README.md 4 """ ----> 6 from pandas_profiling.controller import pandas_decorator 7 from pandas_profiling.profile_report import ProfileReport 8 from pandas_profiling.version import __version__ File ~\anaconda3\Lib\site-packages\pandas_profiling\controller\pandas_decorator.py:4 1 """This file add the decorator on the DataFrame object.""" 2 from pandas import DataFrame ----> 4 from pandas_profiling.profile_report import ProfileReport 7 def profile_report(df: DataFrame, **kwargs) -> ProfileReport: 8 """Profile a DataFrame. 9 10 Args: (...) 15 A ProfileReport of the DataFrame. 16 """ File ~\anaconda3\Lib\site-packages\pandas_profiling\profile_report.py:13 10 from tqdm.auto import tqdm 11 from visions import VisionsTypeset ---> 13 from pandas_profiling.config import Config, Settings 14 from pandas_profiling.expectations_report import ExpectationsReport 15 from pandas_profiling.model.alerts import AlertType File ~\anaconda3\Lib\site-packages\pandas_profiling\config.py:5 2 from enum import Enum 3 from typing import Any, Dict, List, Optional ----> 5 from pydantic import BaseModel, BaseSettings, Field 8 def _merge_dictionaries(dict1: dict, dict2: dict) -> dict: 9 """ 10 Recursive merge dictionaries. 11 (...) 14 :return: Merged dictionary 15 """ File ~\anaconda3\Lib\site-packages\pydantic\__init__.py:210, in __getattr__(attr_name) 208 dynamic_attr = _dynamic_imports.get(attr_name) 209 if dynamic_attr is None: --> 210 return _getattr_migration(attr_name) 212 from importlib import import_module 214 module = import_module(_dynamic_imports[attr_name], package=__package__) File ~\anaconda3\Lib\site-packages\pydantic\_migration.py:289, in getattr_migration.<locals>.wrapper(name) 287 return import_string(REDIRECT_TO_V1[import_path]) 288 if import_path == 'pydantic:BaseSettings': --> 289 raise PydanticImportError( 290 '`BaseSettings` has been moved to the `pydantic-settings` package. ' 291 f'See https://docs.pydantic.dev/{version_short()}/migration/#basesettings-has-moved-to-pydantic-settings ' 292 'for more details.' 293 ) 294 if import_path in REMOVED_IN_V2: 295 raise PydanticImportError(f'`{import_path}` has been removed in V2.') PydanticImportError: `BaseSettings` has been moved to the `pydantic-settings` package. See https://docs.pydantic.dev/2.3/migration/#basesettings-has-moved-to-pydantic-settings for more details. For further information visit https://errors.pydantic.dev/2.3/u/import-error뭐가 문제일까요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
-
미해결스프링 시큐리티
다중 필터 구현 시, antMatchers 사용
예제에서는 antMatcher('/admin/**') 이런식으로특정 url 하나만 지정을 했는데혹시 '/user/**' 도 같이 Match 시키고 싶은데antMatcher 는 1개만 처리해주는 것 같습니다.꼭 새로운 FilterChain 을 생성해서 설정해야하나요?
-
미해결타입스크립트의 모든 것
색션 2, 데코레이터 개념이 아예 이해가 안됩니다.
안녕하세요. 타입스크립트 강좌 수강생 어민규입니다. 데코레이터를 이해하기 위해 필요한 기초지식들을 공부하기 위해 질문을 드립니다.JS가 코딩 입문언어로 그 외 언어들은 알지 못합니다. 그래서 데코레이터가 더 이해가 잘 안되는데요. 참고할만한 블로그나 기초 개념들을 알려주시면 감사하겠습니다.또한 데코레이터 -2 강의를 기반으로 한 프로그램에서 아래의 오류가 떠서 뭐가 문제인지 잘 모르겠습니다.// 데코레이터 - 2 // 팩토리 // : 데코레이터 함수를 리턴하면서 감싸고 있는 녀석 // f(g(x)) ----> f () { return g () }, g: 데코레이터 함수 // g ----> f(g(x)), f: 데코레이터 팩토리 (목적: 인자전달, param 전달) // 1. 데코레이터는 함수다 function Controller(constructor: any): any { console.log("Controller : ", constructor) return (target: any) => { console.log(target) } } function Get(params: any): any { // console.log("[GET] ", params) } function Post(params: any): any { // console.log("[GET] deco start") } function Column(params: any): any { // console.log("Column!!", params) } function UseGuard(): any { // console.log('UseGuard deco start') } // 2. 데코레이터는 무조건 class만 같이 쓴다. (내부 외부, 맴버 변수, 메소드, 파라미터...) // 데코레이터는 이렇게 쓴다. @Controller('/api/v1') class ExampleController { @Column('email') private _email: string; constructor(email: string) { this._email = email; // _email 변수를 생성자에서 초기화합니다. } @Get('/user') getReq() {} @Post('/board') postReq() {} } // 데코레이터 - 2 var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) { function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; } var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value"; var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null; var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {}); var _, done = false; for (var i = decorators.length - 1; i >= 0; i--) { var context = {}; for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p]; for (var p in contextIn.access) context.access[p] = contextIn.access[p]; context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); }; var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context); if (kind === "accessor") { if (result === void 0) continue; if (result === null || typeof result !== "object") throw new TypeError("Object expected"); if (_ = accept(result.get)) descriptor.get = _; if (_ = accept(result.set)) descriptor.set = _; if (_ = accept(result.init)) initializers.unshift(_); } else if (_ = accept(result)) { if (kind === "field") initializers.unshift(_); else descriptor[key] = _; } } if (target) Object.defineProperty(target, contextIn.name, descriptor); done = true; }; var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) { var useValue = arguments.length > 2; for (var i = 0; i < initializers.length; i++) { value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg); } return useValue ? value : void 0; }; var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) { if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : ""; return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name }); }; // 팩토리 // : 데코레이터 함수를 리턴하면서 감싸고 있는 녀석 // f(g(x)) ----> f () { return g () }, g: 데코레이터 함수 // g ----> f(g(x)), f: 데코레이터 팩토리 (목적: 인자전달, param 전달) // 1. 데코레이터는 함수다 function Controller(constructor) { console.log("Controller : ", constructor); return function (target) { console.log(target); }; } function Get(params) { // console.log("[GET] ", params) } function Post(params) { // console.log("[GET] deco start") } function Column(params) { // console.log("Column!!", params) } function UseGuard() { // console.log('UseGuard deco start') } // 2. 데코레이터는 무조건 class만 같이 쓴다. (내부 외부, 맴버 변수, 메소드, 파라미터...) // 데코레이터는 이렇게 쓴다. var ExampleController = function () { var _classDecorators = [Controller('/api/v1')]; var _classDescriptor; var _classExtraInitializers = []; var _classThis; var _instanceExtraInitializers = []; var __email_decorators; var __email_initializers = []; var _getReq_decorators; var _postReq_decorators; var ExampleController = _classThis = /** @class */ (function () { function ExampleController_1(email) { this._email = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, __email_initializers, void 0)); this._email = email; // _email 변수를 생성자에서 초기화합니다. } ExampleController_1.prototype.getReq = function () { }; ExampleController_1.prototype.postReq = function () { }; return ExampleController_1; }()); __setFunctionName(_classThis, "ExampleController"); (function () { var _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0; __email_decorators = [Column('email')]; _getReq_decorators = [Get('/user')]; _postReq_decorators = [Post('/board')]; __esDecorate(_classThis, null, _getReq_decorators, { kind: "method", name: "getReq", static: false, private: false, access: { has: function (obj) { return "getReq" in obj; }, get: function (obj) { return obj.getReq; } }, metadata: _metadata }, null, _instanceExtraInitializers); __esDecorate(_classThis, null, _postReq_decorators, { kind: "method", name: "postReq", static: false, private: false, access: { has: function (obj) { return "postReq" in obj; }, get: function (obj) { return obj.postReq; } }, metadata: _metadata }, null, _instanceExtraInitializers); __esDecorate(null, null, __email_decorators, { kind: "field", name: "_email", static: false, private: false, access: { has: function (obj) { return "_email" in obj; }, get: function (obj) { return obj._email; }, set: function (obj, value) { obj._email = value; } }, metadata: _metadata }, __email_initializers, _instanceExtraInitializers); __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers); ExampleController = _classThis = _classDescriptor.value; if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata }); __runInitializers(_classThis, _classExtraInitializers); })(); return ExampleController = _classThis; }(); 오류 메시지eominkyu@pisimingyuui-MacBookAir typeScript % tsc deco && node decoController : /api/v1/Users/eominkyu/Desktop/typeScript/deco.js:13 var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context); ^TypeError: (0 , decorators[i]) is not a function at __esDecorate (/Users/eominkyu/Desktop/typeScript/deco.js:13:40) at /Users/eominkyu/Desktop/typeScript/deco.js:90:9 at /Users/eominkyu/Desktop/typeScript/deco.js:97:7 at Object.<anonymous> (/Users/eominkyu/Desktop/typeScript/deco.js:99:2) at Module._compile (node:internal/modules/cjs/loader:1254:14) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) at Module.load (node:internal/modules/cjs/loader:1117:32) at Module._load (node:internal/modules/cjs/loader:958:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:23:47Node.js v18.16.0
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
강의에서 나온 이미지 색상보다 더 밝게 나와요
위의 사진처럼 강의보다 훨씬 밝게 나오는데 문제가 무엇일까요..? import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; // ----- 주제: 여러 이미지 텍스쳐가 적용된 큐브 export default function example() { // 로딩 매니저 const loadingManager = new THREE.LoadingManager(); loadingManager.onStart = () => { console.log("시작"); }; loadingManager.onLoad = () => { console.log("로드 완료"); }; loadingManager.onProgress = (img) => { console.log(img + "로드 중"); }; loadingManager.onError = () => { console.log("로드 에러"); }; // 텍스쳐 이미지 로드 const textureLoader = new THREE.TextureLoader(loadingManager); const rightTex = textureLoader.load("/textures/mcstyle/right.png"); const leftTex = textureLoader.load("/textures/mcstyle/left.png"); const topTex = textureLoader.load("/textures/mcstyle/top.png"); const bottomTex = textureLoader.load("/textures/mcstyle/bottom.png"); const frontTex = textureLoader.load("/textures/mcstyle/front.png"); const backTex = textureLoader.load("/textures/mcstyle/back.png"); const materials = [ new THREE.MeshBasicMaterial({ map: rightTex }), new THREE.MeshBasicMaterial({ map: leftTex }), new THREE.MeshBasicMaterial({ map: topTex }), new THREE.MeshBasicMaterial({ map: bottomTex }), new THREE.MeshBasicMaterial({ map: frontTex }), new THREE.MeshBasicMaterial({ map: backTex }), ]; // 픽셀화 rightTex.magFilter = THREE.NearestFilter; leftTex.magFilter = THREE.NearestFilter; topTex.magFilter = THREE.NearestFilter; bottomTex.magFilter = THREE.NearestFilter; frontTex.magFilter = THREE.NearestFilter; backTex.magFilter = THREE.NearestFilter; // Renderer const canvas = document.querySelector("#three-canvas"); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); // Scene const scene = new THREE.Scene(); scene.background = new THREE.Color("white"); // Camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.y = 1.5; camera.position.z = 4; scene.add(camera); // Light const ambientLight = new THREE.AmbientLight("white", 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight("white", 1); directionalLight.position.set(1, 1, 2); scene.add(directionalLight); // Controls const controls = new OrbitControls(camera, renderer.domElement); // Mesh const geometry = new THREE.BoxGeometry(2, 2, 2); const mesh = new THREE.Mesh(geometry, materials); scene.add(mesh); // 그리기 const clock = new THREE.Clock(); function draw() { const delta = clock.getDelta(); renderer.render(scene, camera); renderer.setAnimationLoop(draw); } function setSize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); } // 이벤트 window.addEventListener("resize", setSize); draw(); }
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
안녕하세요 호돌맨님 예외처리2 에서 질문이 있습니다.
좋은 강의 정말 감사드립니다.호돌맨님 강의덕분에 기존에 공부했던 지식들 정리도 하고 더 좋은 설계가 어떤건지 잘 배우고 있습니다.제가 예외처리2 강의를 보고 컨트롤러 테스트를 하다가 게시글 작성 실패케이스에서 오류가 생겨서 질문드립니다. PostControllerPostCreatePostControllerTest글 작성 요청 시 제목, 내용 모두 null 인 케이스 테스트입니다.이 테스트에서 실패합니다.로그는 아래와 같습니다.응답 바디에도 아무것도 오지 않습니다.로그를 쫓아서 ErrorResponse 에 브레이크 포인트를 찍어봤습니다. ErrorResponse여기서 validation 이 null로 잡힙니다.PostControllerAdvice이쪽 ExceptionHandler 작성할 시점에 생성자에 validation 을 매개변수로 받지 않았을땐 오류가 발생하지 않았는데 validation 을 매개변수로 받고 나서 오류가 생기는거면 @Builder 가 ErrorResponse 의 validation 초기화를 무시하고 null 값으로 생기는 현상 같습니다.그래서 따로 빌더 안붙인 validation 을 받지 않는 생성자를 만드니 잘 돌아갑니다.그런데 강의 마지막에 전체 테스트 한번 돌리고 마무리 하신것 같은데 호돌맨님은 어떻게 테스트 실패가 안뜬건지 궁금합니다. 그리고 혹시 더 좋은 방법이 있는지 방향을 알려주시면 감사하겠습니다.
-
해결됨실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
Lazy 로딩 , FetchJoin 그리고 @BatchSize
=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]공부를 하면서 제가 생각하는 부분이 맞는지 확인차 질문 드립니다. 모든 XToOne 은 fetch:Lazy로 되어있다는 가정Member와 Order는 양방향 참조Member를 사용할 때 Order는 가끔 사용되는경우Lazy 로 하고 Order를 사용할 때 마다 쿼리 나감자주 사용되는 경우패치조인을 사용해서 한번에 같이 불러온다.컬렉션인 경우XToOne은 패치 조인 하고 @BatchSize를 사용해서 페이징 및 최적화 까지 챙긴다 제 생각으론 동작방법만 제대로 알고 있으면 실무에서는default_batch_fetch_size 는 계속 등록해서 글로벌로 사용하면 좋아보이는데 그게 맞나요 ?
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part3: 유니티 엔진
섹션 13에서 Bakec를 해도 벽을 타고 올라갑니다.
벽에는 파란색이 없는데도 왜 Player가 벽을 타고 다닐까요?
-
미해결[왕초보편] 앱 8개를 만들면서 배우는 안드로이드 코틀린(Android Kotlin)
BTS 앱 이후 트와이스 앱을 실행 문의
트와이스 앱을 수정 실행 하면 왜 BTS의 매인 activity가 먼저 보여주고 트아와이스가 실행 되는지요?강사님 강의에서도 그렇게 되는데 궁급합니다분명 소스는 따로 존재하고 실행도 따로 하는데 앱이 하나 같이 보입니다.
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part3: 유니티 엔진
섹션 13 진행하다 보면 나오는 UnityChan 옆에 빨간 공이 뭘까요?
언젠가부터 씬에서 UnityChan 옆에 빨간 공들이 보입니다.이건 뭘까요?
-
해결됨스트림릿(Streamlit)을 활용한 파이썬 웹앱 제작하기
'기업의 평균 월급여, 연봉 추정하기 (국민연금 데이터 활용)' 강의 자료 요
'기업의 평균 월급여, 연봉 추정하기 (국민연금 데이터 활용)' 강의에서 소개된 kreditjob.com은 인터넷 검색을 해도 찾을 수가 없고, 주소창에 kreditjob.com을 입력했더니 'wanted insight'라는 회사명이 나옵니다. 해당 웹사이트를 뒤져봤지만, 강의 동영상에 노출된 것과 동일한 페이지는 찾을 수 없습니다.그리고, 강의 동영상에서 설명하신 '11-national-pension' 주피터 노트북 파일을 제공해 주실 수 있을까요?공공데이터 포털에서 다운받는 '국민연금공단_국민연금 가입 사업장 내역' 파일도 거의 100M에 육박하여 직접 포털에서 다운 받는 것 보다는 강의자료로 제공해 주시는 편이 좋을 것 같습니다.
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
dio HTTP 요청 결과 처리
안녕하세요! dio 활용한 http 요청 처리에 대해 질문이 있습니다. 해당 프로젝트의 경우 http 요청의 response body에 맞는 model을 jsonSerializable로 생성하고, 해당 model을 return type으로 갖는 함수를 repository에 선언하여 response body를 model.fromJson 형태로 가져오는 걸로 이해했습니다. 하지만 이 경우 response body가 기존에 선언한 model의 형태와 동일한 경우에만 fromJson으로 받아올 수 있고, 다른 에러 코드 등(400 BAD_REQUEST)에 의해 response body가 다른 형태로 오게 된다면 처리가 불가능 할 것 같습니다. 이런 경우 프론트엔드에서 요청 처리를 어떻게 진행해야 하나요? repository의 함수에서 response.data 만 return 해주는 경우 해당 함수를 호출하는 다른 provider에서는 예외 처리가 어려울 것 같아서 질문드립니다!
-
미해결스프링 시큐리티
커스텀 필터 등록 시, ApplicationFilterChain 에 등록
안녕하세요 강의 잘 듣고 있습니다! SecurityConfig에서 커스텀 필터 등록 시 @Bean 형식으로 필터객체를 생성하여 등록하면 ApplicationFilterChain에 등록되는게 맞는걸까요? Bean 만 선언한다면 ApplicationFilterChain 에 등록되고addFilter(customFilter) 를 추가해주면 ApplicationFilterChain 리스트에도 등록되고SecurityFilterChain 에도 등록이 됩니다.문제는 제가 만든 커스텀 필터는, 특정 URL 에서는 동작 안하게끔 구현하고 싶은데@Bean으로 등록했기 때문에 ApplicationFilterChain에 등록되어 어떤 요청이 들어오든 동작하는 게 문제입니다. @Bean 방식이 아닌addFilter(New CustomFilter()) 로 하면 SecurityFilterChain에만 등록되긴 하는데 CustomFilter 는 스프링 컨테이너에 등록이 안되기 때문에 다른 Resource 객체들을 주입받지 못하는 상황입니다.결론은 ApplicationFilterChain에는 추가 안하고 SecurityFilterChain에만 커스텀 필터를 추가하고 싶은데 New 방식 말고는 없는 것인지가 궁금합니다!
-
미해결[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
캘린더 예제에서 한글 입력이 이상합니다.
캘린더 예제를 다 완성해서 돌려보고 있는데요.잘 돌아가는 거 같은데SW 키보드를 통한 입력도 그렇고HW 키보드를 통한 입력도 한글이 완성 조합이 안됩니다.정상) 테스트비정상) ㅌ ㅔ ㅅ ㅡ ㅌ ㅡ뭐가 문제일까요?
-
해결됨[왕초보편] 앱 8개를 만들면서 배우는 안드로이드 코틀린(Android Kotlin)
로그 관련 질문입니다!
안녕하세요?선생님 강의와 똑같이 기입한 것 같은데선생님 화면에는 간단하게 "여기는 테스트 값입니다"가 나오지만 저는 저렇게 장황하게 나옵니다.혹시 이유를 알려 주실 수 있을까요?감사합니다.
-
미해결AWS Certified Solutions Architect - Associate 자격증 준비하기
수강신청 연장 요청 드립니다.
안녕하세요.좋은 강의 감사드립니다.시험일정을 차일피일 미루다 이제야 신청하게 되어, 수강시간 연장 요청 드립니다.확인 부탁드립니다.
-
미해결실무자를 위한 구글애널리틱스(GA4+GTM) 활용법(25년 Update)
트래픽 획득에서 세션 및 세션소스/매체와 관련하여
안녕하세요.애널리틱스에서 이렇게 소스/매체가 표시되고 있는데 이부분은 어떻게 삭제 및 변경을 할수 있는걸까요? 이렇게 utm을 심은 광고가 없는데 이렇게 나오고 있습니다.
-
해결됨[입문자를 위한 UE5] Part3. 언리얼 엔진 3D 게임 개발 입문
unreal C++
안녕하세요 강사님 너무 명 강의라서 unreal c++도 빨리 보고 싶은데 혹시 강의가 언제 올라오는지 알 수 있을까요? 그리고 만약 unreal 5.0 c++ 말고 이미 올려두신 unreal 4.0 c++을 본다면 5.0과 크게 차이가나서 학습의 효과가 떨어질까요?
-
해결됨[게임 프로그래머 도약반] DirectX11 입문
DirectX 3D에 대해 질문이 있습니다
DX 3D를 배우면서 원초적으로 궁금한점이 생겼는데 저희는 지금 Vertex를 표현할때 x, y, z좌표를 사용해 도형을 표현해주는데 x, y 좌표는 모니터의 x, y 픽셀과 대응되기 때문에 자연스럽게 렌더링 시킬수 있다고하지만 z좌표는 도대체 어떻게 렌더링이 되는 건가요? 이건 DX 파이프라인에서 알아서 설정해주는 건가요?입력되는 데이터에 z좌표 하나를 추가로 넣어주는것 외에는 아무것도 하지 않았는데 어떻게 도형이 3D처럼 렝더링시킬 수 있는건가요?