blackbearwow

Spring Security - jwt 인증

blackbearwow — Thu, 19 Feb 2026 18:38:47 +0900

accessToken, refreshToken, refreshTokenRotation을 활용하는 방법을 사용하겠다. refreshToken은 db에 저장해둔다.

의존성 추가(build.gradle)

dependencies {
	// jwt
	implementation 'io.jsonwebtoken:jjwt-api:0.13.0'
	runtimeOnly 'io.jsonwebtoken:jjwt-impl:0.13.0'
	runtimeOnly 'io.jsonwebtoken:jjwt-jackson:0.13.0'
}

1. SecurityFilterChain 설정

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    private final JWTUtil jwtUtil;
    private final AuthenticationConfiguration authenticationConfiguration;
    private final RefreshTokenRepository refreshTokenRepository;
    @Bean
    public AuthenticationManager authenticationManager(AuthenticationConfiguration configuration) throws Exception {
        return configuration.getAuthenticationManager();
    }
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .formLogin(AbstractHttpConfigurer::disable)
                .httpBasic(AbstractHttpConfigurer::disable)
                .addFilterBefore(new JWTFilter(jwtUtil), LoginFilter.class)
                .addFilterAt(new LoginFilter(authenticationManager(authenticationConfiguration), jwtUtil, refreshTokenRepository), UsernamePasswordAuthenticationFilter.class)
                .sessionManagement(session -> session
                        .sessionCreationPolicy(SessionCreationPolicy.STATELESS));
        return http.build();
    }
}

formLogin과 httpBasic을 disable하고, session을 stateless정책으로 바꿔준다.

UsernamePasswordAuthenticationFilter는 formLogin에 의해 만들어지는 필터인데, 우리는 formLogin을 disable했다. 이 필터 대신 직접 만든 LoginFilter를 넣어준다.

LoginFilter전에 JWTFilter를 넣어준다.

2. JWTUtil 클래스

jwt 생성, 검증하는 클래스이다.

// jwt 생성, 검증 클래스
@Component
public class JWTUtil {
    private final SecretKey secretKey;
    public final Long accessTokenExpiredMs = 1000*60*60L;
    public final Long refreshTokenExpiredMs = 1000*60*60*24L;
    public JWTUtil(@Value("${spring.jwt.secret}")String secret) {
        secretKey = new SecretKeySpec(secret.getBytes(StandardCharsets.UTF_8), Jwts.SIG.HS256.key().build().getAlgorithm());
    }
    public Long getId(String token) {
        return Jwts.parser().verifyWith(secretKey).build().parseSignedClaims(token).getPayload().get("id", Long.class);
    }
    public String getUserId(String token) {
        return Jwts.parser().verifyWith(secretKey).build().parseSignedClaims(token).getPayload().get("userid", String.class);
    }
    public String getRole(String token) {
        return Jwts.parser().verifyWith(secretKey).build().parseSignedClaims(token).getPayload().get("role", String.class);
    }
    // 사실 ExpiredJwtException이 터지므로 사용할 필요 없음
    public Boolean isExpired(String token) {
        return Jwts.parser().verifyWith(secretKey).build().parseSignedClaims(token).getPayload().getExpiration().before(new Date());
    }
    public String createJwtAccessToken(Long id, String userid, MemberRole memberRole) {
        return Jwts.builder()
                .claim("id", id)
                .claim("userid", userid)
                .claim("role", memberRole.name())
                .issuedAt(new Date(System.currentTimeMillis()))
                .expiration(new Date(System.currentTimeMillis() + accessTokenExpiredMs))
                .signWith(secretKey)
                .compact();
    }
    public String createJwtRefreshToken(Long id, String userid, MemberRole memberRole) {
        return Jwts.builder()
                .claim("id", id)
                .claim("userid", userid)
                .claim("role", memberRole.name())
                .issuedAt(new Date(System.currentTimeMillis()))
                .expiration(new Date(System.currentTimeMillis() + refreshTokenExpiredMs))
                .signWith(secretKey)
                .compact();
    }
}

application.properties에 시크릿 키 값을 추가하자

#jwt 시크릿 키
spring.jwt.secret=e43dba462b2ecde9bae1aa4690f1fe8d068f5c88149e21fba092a77a2ecfa7e7

3. LoginFilter 클래스

UsernamePasswordAuthenticationFilter를 상속받아 LoginFilter클래스를 만든다.

LoginFilter클래스의 역할은 아이디비번 맞는지 확인, 맞으면 jwtUtil로 accessToken과 refreshToken을 발급한다

@RequiredArgsConstructor
@Slf4j
public class JWTFilter extends OncePerRequestFilter {
    private final JWTUtil jwtUtil;
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        // 로그인이나 재발급 경로는 토큰 검사를 하지 않고 바로 다음 필터로 넘김
        String requestURI = request.getRequestURI();
        if (requestURI.equals("/api/member/login") || requestURI.equals("/api/reissue")) {
            filterChain.doFilter(request, response);
            return;
        }
        String authorization = request.getHeader("authorization");
        // 헤더 검증. 토큰이 아예 없는 경우 -> 익명 사용자이므로 통과
        if(authorization == null || !authorization.startsWith("Bearer ")) {
            filterChain.doFilter(request, response);
            return;
        }
        String token = authorization.split(" ")[1];
        try {
            // 소멸 시간 검증은 따로 안해도 된다. 예외가 터진다.
            // 토큰에서 값 획득
            Long id = jwtUtil.getId(token);
            String userid = jwtUtil.getUserId(token);
            MemberRole memberRole = MemberRole.valueOf(jwtUtil.getRole(token));

            // 세션에 저장할 정보 만들기
            Member member = new Member();
            member.setForStatelessSession(id, userid, memberRole);
            List<GrantedAuthority> authorities = List.of(new SimpleGrantedAuthority("ROLE_" + member.getRole().toString()));
            MemberContext memberContext = new MemberContext(member, authorities);
            // 스프링 시큐리티 인증 토큰 생성
            Authentication authToken = new UsernamePasswordAuthenticationToken(memberContext, null, memberContext.getAuthorities());
            // 세션에 사용자 등록
            SecurityContextHolder.getContext().setAuthentication(authToken);

            filterChain.doFilter(request, response);
        } catch(ExpiredJwtException e) {
            log.info("jwt 토큰 시간 만료");
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json");
            response.getWriter().write("{\"message\":\"access token expired\"}");
            // 여기서 filterChain.doFilter를 호출하지 않고 끝낸다. 익명 사용자와 jwt토큰 만료 사용자를 구분하기 위해.
        } catch (SignatureException | MalformedJwtException e) {
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json");
            response.getWriter().write("{\"message\":\"유효하지 않은 토큰\"}");
        }
    }
}

4. JWTFilter

OncePerRequestFilter를 상속해 JWTFilter를 만든다. 요청당 한번씩 실행되는 필터다.

JwtFilter이 역할은 jwt 확인과정이다.

헤더에서 jwt토큰이 없으면 익명이니 진행
토큰이 있다면
1. 유효하지 않다면 401
2. expired되었다면 401
3. 유효하다면 요청동안 유지되는 세션 생성 후 진행

@RequiredArgsConstructor
@Slf4j
public class JWTFilter extends OncePerRequestFilter {
    private final JWTUtil jwtUtil;
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        // 로그인이나 재발급 경로는 토큰 검사를 하지 않고 바로 다음 필터로 넘김
        String requestURI = request.getRequestURI();
        if (requestURI.equals("/api/member/login") || requestURI.equals("/api/reissue")) {
            filterChain.doFilter(request, response);
            return;
        }
        String authorization = request.getHeader("authorization");
        // 헤더 검증. 토큰이 아예 없는 경우 -> 익명 사용자이므로 통과
        if(authorization == null || !authorization.startsWith("Bearer ")) {
            filterChain.doFilter(request, response);
            return;
        }
        String token = authorization.split(" ")[1];
        try {
            // 소멸 시간 검증은 따로 안해도 된다. 예외가 터진다.
            // 토큰에서 값 획득
            Long id = jwtUtil.getId(token);
            String userid = jwtUtil.getUserId(token);
            MemberRole memberRole = MemberRole.valueOf(jwtUtil.getRole(token));

            // 세션에 저장할 정보 만들기
            Member member = new Member();
            member.setForStatelessSession(id, userid, memberRole);
            List<GrantedAuthority> authorities = List.of(new SimpleGrantedAuthority("ROLE_" + member.getRole().toString()));
            MemberContext memberContext = new MemberContext(member, authorities);
            // 스프링 시큐리티 인증 토큰 생성
            Authentication authToken = new UsernamePasswordAuthenticationToken(memberContext, null, memberContext.getAuthorities());
            // 세션에 사용자 등록
            SecurityContextHolder.getContext().setAuthentication(authToken);

            filterChain.doFilter(request, response);
        } catch(ExpiredJwtException e) {
            log.info("jwt 토큰 시간 만료");
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json");
            // 토큰 만료는 다른 401에러와 구분하기 위해 code를 부여한다.
            response.getWriter().write("{\"code\":\"TOKEN_EXPIRED\", \"message\":\"access token expired\"}");
            // 여기서 filterChain.doFilter를 호출하지 않고 끝낸다. 익명 사용자와 jwt토큰 만료 사용자를 구분하기 위해.
        } catch (SignatureException | MalformedJwtException e) {
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            response.setCharacterEncoding("UTF-8");
            response.setContentType("application/json");
            response.getWriter().write("{\"message\":\"유효하지 않은 토큰\"}");
        }
    }
}

5. RefreshToken

RefreshToken 엔티티를 만든다.

@Entity
@NoArgsConstructor
public class RefreshToken {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @OneToOne
    private Member member;
    @Column(nullable = false, length = 500)
    private String tokenValue;
    @NotNull
    private LocalDateTime expirationDate;

    public RefreshToken(Member member, String tokenValue, Long expiredMs) {
        this.member = member;
        this.tokenValue = tokenValue;
        this.expirationDate = LocalDateTime.now().plus(Duration.ofMillis(expiredMs));
    }
    // 토큰 갱신 시 값만 변경하기 위한 메서드
    public void updateToken(String newToken, Long expiredMs) {
        this.tokenValue = newToken;
        this.expirationDate = LocalDateTime.now().plus(Duration.ofMillis(expiredMs));
    }
}

그리고 RefreshTokenRepository도 만든다.

public interface RefreshTokenRepository extends JpaRepository<RefreshToken, Long> {
    Optional<RefreshToken> findByMember(Member member);
    Boolean existsByMember(Member member);
}

6. ReissueController

마지막으로 브라우저에서 401에러를 받았을 때, refresh토큰으로 새 access토큰을 받는 api를 만든다.

ReissueController는 refreshToken을 이용해 accessToken을 재발급받는 신청을 받는다.
refresh토큰을 검사해
1) refresh토큰이 만료되었다면 400
2) 유효하지 않다면 400
3) 유효하다면 accessToken재발급, refresh토큰 교체

@Slf4j
@RestController
@RequiredArgsConstructor
public class ReissueController {
    private final JWTUtil jwtUtil;
    private final RefreshTokenRepository refreshTokenRepository;
    private final MemberRepository memberRepository;

    @PostMapping("/api/reissue")
    public String reissue(HttpServletRequest request, HttpServletResponse response) {

        // 1. Get refresh token from cookies
        String refresh = null;
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if (cookie.getName().equals("refreshToken")) {
                    refresh = cookie.getValue();
                }
            }
        }

        // 2. 검증: 쿠키에 토큰이 없는 경우
        if (refresh == null) {
            throw new BadRequestException("refresh token null");
        }

        try {
            // 4. DB에 저장되어 있는지 확인 (가장 중요한 보안 단계)
            Long member_id = jwtUtil.getId(refresh);
            Member member = memberRepository.findById(member_id).orElseThrow(()->new BadRequestException("멤버를 찾을 수 없음"));
            Boolean isExist = refreshTokenRepository.existsByMember(member);
            if (!isExist) {
                log.info("refresh token이 존재하지 않는다잉 {} {}", isExist, member.getId());
                throw new BadRequestException("해당하는 refresh token이 존재하지 않습니다~!!");
            }

            // 5. 새로운 JWT 발급
            // 실제 운영 시에는 id와 role 정보도 토큰에서 추출하거나 DB에서 조회해야 합니다.
            String newAccess = jwtUtil.createJwt(member.getId(), member.getUserid(), member.getRole(), 60*60*1000L); // 1시간

            // 6. 응답 헤더에 설정
            response.setHeader("authorization", "Bearer " + newAccess);
        } catch (ExpiredJwtException e) {
            // 만료 체크
            throw new BadRequestException("refresh 토큰이 만료되었습니다. 다시 로그인해주세요");
        }
        return "refresh토큰으로 새 accesstoken 발급 완료";
    }
}

7. 클라이언트 요청 부분

import axios from "axios";

const client = axios.create();

// 요청 인터셉터: 모든 요청에 토큰 부착
client.interceptors.request.use((config) => {
  const token = localStorage.getItem("authorization");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
// 응답 인터셉터: 401에러(만료) 발생 시 처리
client.interceptors.response.use(
  (response) => response, // 성공시 그대로 반환
  async (error) => {
    const originalRequest = error.config;
    // 401에러이고, 재시도한 적이 없는 요청일 때
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;

      try {
        // 서버의 재발급 엔드포인트 호출 /api/reissue
        // 이때는 accessToken을 보내면 안된다.
        const res = await axios.post("/api/reissue");
        if (res.status === 200) {
          const newAccessToken = res.headers["authorization"];
          // 새 토큰 저장
          localStorage.setItem(
            "authorization",
            newAccessToken.replace("Bearer ", ""),
          );
          // 2. 실패했던 원래 요청의 헤더를 새 토큰으로 교체
          originalRequest.headers.Authorization = newAccessToken;
          // 3. 원래 요청 다시 보내기
          return client(originalRequest);
        }
      } catch (reissueError) {
        // 리프레시 토큰도 만료되었거나 오류가 난 경우 -> 로그아웃 처리
        localStorage.removeItem("authorization");
        return Promise.reject(reissueError);
      }
    }
    return Promise.reject(error);
  },
);

export default client;

참고: https://www.youtube.com/playlist?list=PLJkjrxxiBSFCcOjy0AAVGNtIa08VLk1EJ

Spring Security - SecurityConfig 클래스

blackbearwow — Thu, 19 Feb 2026 11:00:11 +0900

스프링 시큐리티는 다양한 인증과 보안 기능을 제공하는 도구이다. 단순히 개발자의 코드를 줄여주는 것이 아니다. 보안 취약점이 계속 보완된 검증된 보안, 보안 로직과 비즈니스 로직을 분리해 코드가 깔끔해지고, 간단한 로그인에서 jwt나 oauth등으로의 확장도 편하다.

의존성 추가하기

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-security'
}

1. SecurityFilterChain

스프링 시큐리티는 http요청이 controller에 도달하기 전, 필터들을 거치게 만든다. 이 필터들을 로그인 했는지, 권한은 있는지, 해킹 시도는 아닌지 등을 검사한다.

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .csrf(csrf -> csrf.disable()) // 테스트를 위해 일단 csrf비활성화
                .formLogin(login -> login
                        .loginProcessingUrl("/api/member/login")
                        .usernameParameter("userid")
                        .successHandler(((request, response, authentication) -> {
                            response.setStatus(HttpServletResponse.SC_OK);
                            response.setCharacterEncoding("UTF-8");
                            response.setContentType("application/json");
                            response.getWriter().write("{\"message\":\"로그인 성공\"}");
                        }))
                        .failureHandler(((request, response, exception) -> {
                            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
                            response.setCharacterEncoding("UTF-8");
                            response.setContentType("application/json");
                            response.getWriter().write("{\"message\":\"로그인 실패: "+exception.getMessage()+"\"}");
                        }))
                )
                .logout(logout -> logout
                        .logoutUrl("/api/member/logout")
                        .logoutSuccessHandler(((request, response, authentication) -> {
                            response.setStatus(HttpServletResponse.SC_OK);
                            response.setCharacterEncoding("UTF-8");
                            response.setContentType("application/json");
                            response.getWriter().write("{\"message\":\"로그아웃 성공\"}");
                        }))
                        .deleteCookies("JSESSIONID")
                )
                .authorizeHttpRequests(auth -> auth
                        .requestMatchers(HttpMethod.GET, "/api/member").authenticated()
                        .requestMatchers(HttpMethod.PUT, "/api/member").authenticated()
                        .requestMatchers(HttpMethod.DELETE, "/api/member").authenticated()
                        .requestMatchers(HttpMethod.POST, "/api/category").authenticated()
                        .requestMatchers(HttpMethod.DELETE, "/api/category").authenticated()
                        .anyRequest().permitAll()
                )
                .exceptionHandling(exception -> exception
                        .authenticationEntryPoint(((request, response, authException) -> {
                            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
                            response.setCharacterEncoding("UTF-8");
                            response.setContentType("application/json");
                            response.getWriter().write("{\"message\":\"인증이 필요합니다\"}");
                        }))
                        .accessDeniedHandler(((request, response, accessDeniedException) -> {
                            response.setStatus(HttpServletResponse.SC_FORBIDDEN);
                            response.setCharacterEncoding("UTF-8");
                            response.setContentType("application/json");
                            response.getWriter().write("{\"message\":\"허가되지 않은 권한입니다\"}");
                        }))
                );
        return http.build();
    }
}

1.1. csrf

ssr이면 세션이든 jwt든 설정해줘야 한다. 둘다 쿠키를 이용하기 때문이다.

thymeleaf를 사용하고 th:action속성을 사용한다면 자동으로 hidden필드가 추가되어 검사한다.

csr이면 세션을 사용하면 설정해줘야 한다. 쿠키에 저장하는 것이 아닌 jwt를 사용하면 disable해도 된다. 토큰이 로컬(또는 세션)스토리지에 저장되고, 요청시 직접 헤더를 만들어야 하기 때문이다. 하지만 완벽한 보안은 httpOnly쿠키에 저장하고, csrf를 설정하는것이다.

1.2. formLogin

인증과 관련된 설정이다.

loginPage는 사용자가 로그인이 필요할 때, 어떤 페이지를 보여줄지 지정해주는 것이다. 이 값을 설정하지 않으면 시큐리티가 제공하는 투박한 기본적인 로그인 창이 뜬다.

loginProcessingUrl은 지정된 url로 post요청이 올 때, 컨트롤러로 가지 않고 시큐리티 필터에서 가로채 로그인을 진행시킨다. 이 기능을 사용하려면 유저 서비스에서 UserDetailsService를 구현해 loadUserByUsername메소드를 오버라이드해야한다.

@Service
@RequiredArgsConstructor
public class MemberService implements UserDetailsService {
    private final MemberRepository memberRepository;
    private final PasswordEncoder passwordEncoder;

    public void join(MemberRequestDTO memberRequestDTO) {
        Member member = new Member();
        member.setUsername(memberRequestDTO.getUsername());
        member.setPassword(passwordEncoder.encode(memberRequestDTO.getPassword()));
        member.setRole(UserRole.USER);

        memberRepository.save(member);
    }

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        Member member = memberRepository.findByUsername(username).orElseThrow();
        return User.builder()
                .username(member.getUsername())
                .password(member.getPassword())
                .roles(member.getRole().name())
                .build();
    }
}

세션에 username, password, roles말고도 다른 정보도 저장해놓고 싶다면 커스텀UserDetails를 만들어 사용하면 된다

@Getter
public class MemberContext extends User {
    private final Long id;
    private final MemberRole memberRole;
    private final Member member;
    public MemberContext(Member member, Collection<? extends GrantedAuthority> authorities) {
        super(member.getUserid(), member.getPassword(), authorities);
        this.id = member.getId();
        this.memberRole = member.getRole();
        this.member = member;
    }
}

@Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        log.info("username: {}", username);
        Member member = memberRepository.findByUserid(username).orElseThrow();
        //Role이 있다면 추가
        List<GrantedAuthority> authorities = List.of(new SimpleGrantedAuthority("ROLE_" + member.getRole().toString()));
        return new MemberContext(member, authorities);
    }

이 방법으로 로그인에 성공하면, SecurityContextHolder에 유저 정보가 저장된다. 이 정보를 읽고싶다면 @AuthenticationPrincipal을 사용하면 된다.

@GetMapping
    public MemberResponseDTO getMemberInfo(@AuthenticationPrincipal User user) {
        return new MemberResponseDTO(memberService.getMemberByUser(user));
    }

@AuthenticationPrincipal은 SecurityContextHolder.getContext().getAuthentication().getPrincipal()한 값과 같다.

usernameParameter로 html의 name값을 지정해줄 수 있다. 기본적으로 username이지만 userid등으로 지정 가능하다.

successHandler는 로그인에 성공했을 시 동작을 정의한다. 기본적으로 메인 페이지로 리다이렉트하는데, csr방식이면 커스터마이징이 필요하다.

failureHandler는 로그인이 실패시 동작을 정의한다.

1.3. logout

logoutUrl은 어떤 url로 요청이 들어오면 로그아웃을 할지 지정한다.

logoutSuccessHandler는 로그아웃이 성공했을 때 실행될 핸들러이다. csr방식일 때 사용하면 된다.

logoutSuccessUrl은 로그아웃이 성공했을 때 리다이렉트 할 url이다. ssr방식일 때 사용하면 된다.

deleteCookies는 삭제할 쿠키 이름을 지정한다

1.4. authorizeHttpRequests

.requestMatchers().permitAll() => 매칭되는 것은 허용된다

.requestMatchers().authenticated() => 매칭되는 것은 인증되어야 한다

.anyRequest().authenticated() => 모든 요청은 인증되어야 한다

.anyRequest().permitAll() => 모든 요청은 허용된다

앞에는 .requestMatchers()와 .anyRequest()가 올 수 있다. 각각 매칭되는 것, 모든 요청을 의미한다

뒤에는 .permitAll() .authenticated() .denyAll() .hasRole() .hasAnyRole() .hasAuthority() .hasAnyAuthority()등이 올 수 있다

1.5. exceptionHandling

csr이라면 authorizeHttpRequests에서 거부된 응답을 커스터마이징 해야한다. 기본은 /로 리다이렉션 동작이기 때문.

authenticationEntryPoint는 .authenticated()로 인해 거부된 응답을 커스터마이징한다.

accessDeniedHandler는 .hasRole() .hasAnyRole()로 인해 거부된 응답을 커스터마이징한다.

2. PasswordEncoder - 패스워드 암호화

스프링 Bean 등록하기

@Configuration
@EnableWebSecurity // 스프링 시큐리티 활성화
public class SecurityConfig {

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

BCrypt는 암호화 할 때마다 랜덤으로 salt값을 추가해 암호화 하기 때문에, 같은 암호더라도 다른 결과값이 나오게 된다.

멤버 서비스에서 PasswordEncoder를 주입받아 encode메소드를 사용하면 된다.

@Service
public class MemberService {
    @Autowired
    private PasswordEncoder passwordEncoder;

    public void join(Member member) {
        // 비밀번호를 암호화해서 저장!
        String encodedPw = passwordEncoder.encode(member.getPassword());
        member.setPassword(encodedPw);
        memberRepository.save(member);
    }
}

로그인 할 때는 matches메소드를 사용하면 편하다.

public boolean login(String rawPassword, String encodedPassword) {
    // 입력한 비번과 DB의 암호화된 비번이 맞는지 확인
    return passwordEncoder.matches(rawPassword, encodedPassword);
}

그러나 formLogin의 loginProcessingUrl필터를 사용하면 matches를 사용할 일이 없다. 회원가입할 때만 encode하면 된다.

Q. 그런데 솔트값을 매번 랜덤으로 주면 회원가입 할 때와 로그인 할 때 인코드 된 값이 달라지는 거 아닌가?

A. 회원가입 할 때 인코드 된 결과값의 일부가 솔트값이 들어가있다. 이 솔트값으로 로그인 할 때 비밀번호를 인코드하는 것이다.

postgreSQL 설치 & 설정

blackbearwow — Wed, 11 Feb 2026 15:45:47 +0900

1. Windows 환경

1.1. 설치

https://www.enterprisedb.com/downloads/postgres-postgresql-downloads 에 접속 후 원하는 플랫폼 선택해 다운로드.

설치파일 실행 후 과정

설치 위치 - 기본으로 설정하자.

컴포넌트 선택 - 모두 선택해도 상관없다.

데이터 디렉토리 - 기본값으로 설정

패스워드 설정 - supersuer인 'postgres'의 비밀번호이다. 꼭 기억해야 한다.

포트번호 - 기본 5432를 사용하자.

locale - 기본으로 사용하자.

설치가 끝나면 Stack Builder 어쩌고 선택이 나오는데, 해제 후 Finish하면 된다.

GUI기반 postgresql 관리 도구는 pgAdmin을 설치하면 된다.

pgAdmin 4를 사용해 지지고 볶으면 된다.

paAdmin자동완성 키기: File - Preferences - Query Tool - Auto completion - Autocomplete on keypress를 키고 저장하면 된다.

1.2. 설정

새로운 계정 생성

CREATE USER tungtungtung WITH PASSWORD 'sahur';

해당 데이터베이스에 대한 모든 권한 부여

GRANT ALL PRIVILEGES ON DATABASE tunginside TO tungtungtung;

스키마 권한 부여

GRANT ALL ON SCHEMA public TO tungtungtung;

DB생성

CREATE DATABASE tunginside;

postgresql은 기본적으로 UTF8을 사용하기 때문에 한글 깨짐 걱정이 없다.

select datname from pg_database;

로 잘 생성 되었는지 확인 가능

2. Ubuntu 환경

DBMS, BAAS

blackbearwow — Tue, 10 Feb 2026 17:32:07 +0900

대학교를 다닐 때는 MySql만 사용했다. 그런데 실제로 사용되는 거는 많은 DBMS들이 사용된다. 대표적인 DBMS들을 알아보자.

1. rdbms와 nosql dbms

1.1. rdbms (relational dbms)

rdbms는 관계형 dbms로 데이터를 행(row)과 열(column)이 있는 테이블에 저장하며, 테이블 간의 '관계'를 맺어 데이터를 관리한다.

데이터 무결성, 신뢰성, sql활용이 장점이다. 대신 데이터 구조가 미리 정해져야하고 변경이 어렵다.

대표적으로 MySQL, Oracle Database, PostgreSQL, Microsoft SQL Server등이 있다.

1.2. nosql

정해진 트리 업이 데이터의 형태에 맞게 저장하는 방식이다. 대규모 분산 처리에 최적화되어있다.

유연성, 확장성, 속도가 장점이다. 대신 데이터 중복문제와 일관성 문제가 있다.

대표적으로 MongoDB, Redis등이 있다.

1.3. 각 dbms의 특징

- Oracle Database

기업용 시장 점유율 1위의 유료 DB다. 대용량 데이터 처리 성능이 압도적이며, 보안과 장애 복구 기능이 매우 강력하다. 대기업 메인 시스템, 금융권, 공공기관 등 안정성이 최우선이 곳에서 사용한다.

- MySQL

전 세계에서 가장 많이 사용되는 오픈 소스 DB이다. 설치가 쉽고 사용법이 간단하며, 정보를 찾기 쉽다. 대부분의 웹 서비스 표준에서 사용 가능하다.

- PostgreSQL

오픈 소스임에도 Oracle에 버금가는 기능을 제공한다. 복잡한 쿼리 처리 능력이 뛰어나고, GIS(지리정보)나 JSON 데이터 처리 등 확장 기능이 강력하다.

- Microsoft SQL Server

마이크로코스프에서 개발한 DB로, windows 환경에 최적화되어있다. 윈도우 기반 기업용 솔루션, 중대형 내부 업무 시스템에 사용된다.

- MongoDB

가장 대표적인 문서 지향 DB이다. 데이터를 JSON과 거의 똑같은 형식(BSON)으로 저장한다. 스키마가 없어서 데이터 구조를 언제든 바꿀 수 있고, 개발 속도가 매우 빠르다. SNS 서비스, 비정형 데이터 저장, 실시간 이벤트 로그 처리에 사용된다.

- Redis

데이터를 hdd가 아닌 ram에 저장하는 in-memory DB이다. 읽기/쓰기가 굉장히 빠르다. 다만 메모리 기반이라 전원이 꺼지면 데이터가 사라질 위험이 있어 보조DB로 사용된다. 실시간 랭킹 시스템, 로그인 세션 유지, 캐시 서버, 짧은 시간 내 대량의 데이터 처리에 사용된다.

2. BaaS (Backend as a Service)

그러면 firebase나 supabase는 뭐라할까? firebase는 내부에서 Cloud Firestore이라는 NoSQL을 사용하고 supabase는 PostgreSQL이라는 rdbms를 사용한다. 그러나 dbms역할 말고도 사용자 인증, 파일 스토리지, API생성, 클라우스 함수 등의 기능을 제공하기 때문에 이 도구들을 묶어 baas라고 한다.

참고: https://namu.wiki/w/DBMS

tailwind css

blackbearwow — Thu, 5 Feb 2026 16:52:45 +0900

- react에 tailwindcss적용하기

1. 프로젝트 생성

2. tailwindcss vite버전 설치

npm install tailwindcss @tailwindcss/vite

3. vite.config.ts에 플러그인 추가

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

4. css파일(index.css나 App.css) 에 tailwindcss 가져오기

@import "tailwindcss";

5. cdn이나 빌드된 css파일 html로 첨부하기

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

6. 자동완성기능은 vscode에 Tailwind CSS IntelliSense를 설치한다.

참고: https://tailwindcss.com/docs/installation/using-vite

모든 기능을 알아보는게 아닌 핵심 기능만을 정리할 것이다.

- max-w-{...xs|lg|xl|2xl|3xl...}

최상위 요소에 넣어야 하는 클래스이다. 최대 가로 길이를 제한한다. 텍스트나 이미지가 화면 끝에서 끝까지 늘어지면 가독성이 매우 떨어지기 때문에 넣는다. mx-auto를 함께 넣어 가운데 정렬을 한다. 안넣는다면 화면 왼쪽에 사이트가 붙는다.

- Grid (2차원 레이아웃)

핵심 클래스

부모 요소 클래스	설명
grid	컨테이너를 grid 환경으로 설정한다
gap-{n}	아이템 사이의 간격을 정한다
grid-cols-{n}	열의 개수를 정한다 (1~12개)
justify-items-end	(좌우정렬) 아이템들을 칸의 끝에 놓는다
justify-items-center	(좌우정렬) 아이템들을 칸의 가운데에 놓는다
justify-items-stretch	(좌우정렬) 아이템들을 칸에 꽉차게 놓는다
content-center	(상하정렬) 아이템들을 칸의 가운데에 놓는다
content-end	(상하정렬) 아이템들을 칸의 끝에 놓는다
content-between	(상하정렬) 아이템들을 최대한 떨어뜨려놓는다
content-stretch	(상하정렬) 아이템들을 칸에 꽉차게 놓는다
place-content-start	아이템들을 왼쪽 위에 놓는다
place-content-end	아이템들을 오른쪽 아래 놓는다
place-content-between	아이템들을 최대한 떨어뜨려놓는다
place-content-stretch	아이템들을 꽉차게 놓는다
place-items-end	아이템을 칸 오른쪽 아래 놓는다
place-items-center	아이템을 칸 가운데 놓는다
place-items-stretch	아이템을 칸에 꽉차게 놓는다

자식 요소 클래스	설명
col-span-{n}	여러 칸을 차지하게 한다
col-start-{n}	n번째 칸에서 시작하게 한다
col-end-{n}	n-1번째 칸을 마지막으로 한다
justify-self-start	(좌우정렬) 칸 시작에 놓인다. 부모의 justify-items-{}를 무시한다
justify-self-center	(좌우정렬) 칸 가운데에 놓인다. 부모의 justify-items-{}를 무시한다
justify-self-end	(좌우정렬) 칸 끝에 놓인다. 부모의 justify-items-{}를 무시한다
justify-self-stretch	(좌우정렬) 칸에 꽉차게 놓인다. 부모의 justify-items-{}를 무시한다
place-self-start place-self-center place-self-end place-self-stretch	아이템을 칸에 (왼쪽위\|가운데\|오른쪽아래\|꽉차게) 놓는다. 부모의 place-items-{}를 무시한다.

- flex (1차원 레이아웃)

핵심 클래스

부모 요소 클래스	설명
flex	컨테이너를 flex 환경으로 설정한다.
gap-{n}	아이템 사이의 간격을 정한다
flex-col	자식 요소들이 세로 방향으로 나란히 배치된다.
flex-row	자식 요소들이 가로 방향으로 나란히 배치된다. 기본 상태이다.
flex-wrap	자식 요소들이 가로 방향으로 나란히 배치된다. 가로 길이가 부족하면 자동으로 줄바꿈이 된다.
justify-center	(좌우정렬) 자식 요소들을 가운데에 모은다
justify-end	(좌우정렬) 자식 요소들을 끝에 모은다
justify-between	(좌우정렬) 자식 요소들을 최대한 떨어뜨려놓는다
justify-around	(좌우정렬) 자식 요소들을 적당히 떨어뜨려놓는다
items-start	(상하정렬) 아이템들을 위에 놓는다.
items-center	(상하정렬) 아이템들을 가운데 놓는다.
items-end	(상하정렬) 아이템들을 아래에 놓는다.

자식 요소 클래스	설명
flex-1	필요한만큼 요소가 늘어나거나 줄어든다. grow와 shrink를 둘다 적용한 것이다. 이 요소들이 여러개라면 모두 같은 높이와 길이를 가진다.
flex-auto	공간이 남는다면 요소가 늘어난다. 기본크기보다 작아지지 않는다.
grow	공간이 남는다면 요소가 늘어난다. 기본크기보다 작아지지 않는다.
shrink-0	공간이 부족해도 요소가 줄어들지 않는다. grow옆에 줄어들지 말아야 할 요소가 있다면 사용
self-start	(상하정렬) 위에 놓인다. 부모의 items-{}를 무시한다
self-center	(상하정렬) 가운데 놓인다. 부모의 items-{}를 무시한다
self-end	(상하정렬) 아래에 놓인다. 부모의 items-{}를 무시한다
self-stretch	(상하정렬) 꽉차게 놓인다. 부모의 items-{}를 무시한다

grid를 사용할지 flex를 사용할지는 어떻게 정하는가?

화면이 커짐에 따라 칸의 개수가 변한다면 grid를 써야한다.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>카드 1</div>
  <div>카드 2</div>
  <div>카드 3</div>
  <div>카드 4</div>
</div>

콘텐츠 크기가 유연하다면 flex를 쓰는 것이 좋다.

<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[200px]">유연한 박스 1</div>
  <div class="flex-1 min-w-[200px]">유연한 박스 2</div>
</div>

- spacing (padding, margin)

p-{n}으로 패딩을 준다. 상하만 패딩을 주고 싶다면 py-{n}, 좌우만 패딩을 주고 싶다면 px-{n}을 주면 된다.

상하좌우 따로 패딩을 주고 싶다면 pt-{n}, pb-{n}, pl-{n}, pr-{n}으로 주면 된다.

margin도 패딩과 같은 패턴이다. m-{n}, my-{n}, mx-{n}, mt-{n}, mb-{n}, ml-{n}, mr-{n}으로 주면 된다.

- typography

text-{xs|sm|base|lg|xl|2xl|...|8xl|9xl} 로 텍스트 크기를 조절한다.

text-{color}-{n}으로 텍스트 색깔을 조절한다.

text-{left|center|right}으로 텍스트를 정렬한다.

font-{thin|extralight|light|normal|medium|semibold|bold|extrabold|black}로 폰트 굵기를 조절한다.

tracking-{tighter|tight|normal|wide|wider|widest}로 글자 사이 간격을 조절한다.

line-clamp-{n}으로 글이n줄까지만 보이게 한다.

underline|overline|line-through|no-underline으로 텍스트를 장식한다.

- whitespace

div나 p태그 내부에 띄어쓰기, 탭, 엔터 같은 것들이 어떻게 화면에 표현될지 정하는 것.

클래스	설명
whitespace-normal	모든 whitespace를 띄어쓰기 한칸로 표현된다. 디폴트
whitespace-nowrap	한줄로 모든게 표현된다.
whitespace-pre	모든 whitespace가 표현된다. 한줄이 길다면 줄바꿈을 하지 않는다.
whitespace-pre-line	엔터는 표현되지만 띄어쓰기들은 한칸으로 표현된다. 자동 줄바꿈.
whitespace-pre-wrap	모든 whitespace가 표현된다. 자동 줄바꿈. 줄이 바뀌면 whitespace가 없어짐.
whitespace-break-spaces	모든 whitespace가 표현된다. 자동 줄바꿈. 줄이 바뀌어도 whitespace가 표현.

- variants

앞에 붙여서 특정 상황일 때 클래스를 적용할 수 있다.

가로길이에 따른 variants - sm: md: lg: xl: 2xl:

테마에 따른 variants - dark:

참고: https://v3.tailwindcss.com/docs/flex

CSS 웹 디자인 접근, 업그레이드 방법

blackbearwow — Thu, 5 Feb 2026 12:17:43 +0900

고민

css는 자유도가 너무 높다. 내가 원하는 대로 디자인이 가능한 것이다. 하지만 내가 디자인을 정하고 css코드를 치려고 하면 굉장히 어렵다. 내가 디자인을 정하는 것 부터가 문제이다.

어떻게 디자인을 해야 접근성이 좋을지, 글자가 너무 크지도 않고 작지도 않을지, 모바일에서와 pc에서 사용경험이 다를지, 사용자 경험이 직관적일지, 일관성 있는 색상 요소들... 너무나 많은 생각을 해 시작부터 난관에 빠지는 것이다. 게다가 내가 생각한 디자인을 css코드로 만들 수 있는 디자인인지조차 생각해보면서 하면, 디자인을 하려고 시작할 때부터 스트레스를 엄청 받는 것이다.

아무 것도 모를 때 알면 좋은 것들

디자인 도구 활용(Figma 등): css코드로 구현할 수 있을지는 생각하지 말고 일단 시각화에만 집중하는 단계가 필요하다. 피그마에서 만드는 레이아웃은 tailwind css같은 유명 프레임워크로 거의 100% 구현 가능하기 때문에 css코드로 구현할 수 있을지 고민하지 않아도 된다. 일관성 있는 색상 요소들인지도 눈으로 볼 수 있으니 해결 가능한 고민이다.

모바일 우선주의: 모바일에서와 pc에서 사용경험이 다른것은 당연하다. pc기준으로 만든 레이아웃이면 모바일에서는 컴포넌트들이 작고, 모바일 기준으로 만든 레이아웃이면 컴포넌트들이 큰 것이다. 하지만 다른점은 pc기준으로 만든 레이아웃을 모바일에 맞추기는 어려우나 모바일기준으로 만든 레이아웃을 pc기준으로 바꾸기는 훨씬 쉽다는 것이다. 모바일에서 없는 부분을 확장하면 되기 때문이다.

css 프레임워크(tailwind, bootstrap 등) 활용: 사용할 수 있는 색상과 글자 크기가 몇개 정해져있다. 이중에서 골라서 사용하면 되는것이다.

css 프레임워크 존재 이유와 공부법

생 css의 복잡함을 어떻게 하면 질서있게 관리할까? 라는 질문은 나만 한 것이 아니다. 모든 css프레임워크들이 css를 질서있게 관리하기 위해 만들어졌다.

대부분의 css프레임워크들이 공유하는 핵심 공통 개념이 있다. 핵심 공통 개념들만 알아놓으면 css프레임워크들이 어떤건지 하는지 금방 이해할 수 있다.

- 유틸리티 퍼스트 또는 클래스 조합: Bootstrap은 .btn-primary tailwind는 flex pt-4 text-center처럼 클래스들을 조립해서 사용한다. 이미 준비된 클래스 이름을 HTML에 갖다 붙인다는 공통점이 있다.

- 반응형 디자인 접두사 (Breakpoints): 화면 크기에 따라 스타일을 바꾸는 기능을 '접두사'로 해결한다. sm:, md:, lg:, xl:등.

- 디자인 토큰 (Design Tokens): 미리 약속된 수치가 있다. p-1, blue-500처럼 숫자를 붙여 정해진 단위를 사용한다.

- 그리드 시스템 (Grid & Container): 모든 프레임워크는 화면을 나누는 '틀'을 가지고 있다.

- 박스 모델의 시각화 (Flex & Grid 제어): 프레임워크들은 Flexbox속성을 짧은 클래스로 배치할 수 있다. items-center, justify-between등

그리고 프레임워크의 공식문서를 모두 읽으면 시간이 너무 많이 걸린다.

1. Layout: 화면 전체 틀을 어떻게 잡는지 (Container, Grid)

2. Flexbox: 요소를 가로/세로로 어떻게 세우는지

3. Spacing: 안쪽/바깥쪽 여백은 어떻게 주는지 (padding, margin)

4. Typhgraphy: 글자 크기와 굵기는 어떻게 바꾸는지

이렇게 4가지만 훑어보면 대부분 ui를 바로 코딩 가능하다. 나머지는 필요할 때 검색해보면 된다.

그러면 어떤 순서로 디자인과 코딩을 진행해야 하는가?

top-down으로 계획하고, bottom-up으로 구현하는것이다.

피그마나 메모장에 큼직하게 사각형을 그려 헤더, 콘텐츠, 푸터 등등 구역을 나눈다. 이때 세부 디자인은 하지 않는다.

전체를 한번에 그리려고 하지 말고, 작은 컴포넌트부터 만들고 작은 컴포넌트들을 조립해 중간 컴포넌트를 만들고.. 를 반복해 조립하여 전체를 만드는 bottom-up방식이 개발자에게 좋은 방법이다.

디자인 업그레이드 방법

색상과 대비

여러가지 색깔을 사용하여 웹페이지 요소들을 배치하면, 시선이 분산되고 난잡하다.

브랜드 컬러를 하나 정하자. 그리고 나머지는 무채색(흰색, 회색, 검정색)위주로 사용하는 것이다. 다른 사이트들을 봐라. 페이지 대부분이 무채색일 것이다.

React

blackbearwow — Mon, 2 Feb 2026 18:34:07 +0900

- 사용 이유와 장점

대규모 프로젝트에서 사용할 때 좋다. 대규모 프로젝트에서의 장점은 수만줄의 코드를 수십명의 개발자가 함께 관리할 수 있는 구조이다. ui를 컴포넌트 단위로 개발해서 재사용성이 좋고 작업 영역이 분리되어 유지보수하기 쉽다. 규모가 커질수록 상태가 복잡해져 코드가 꼬이기 쉬운데, 상태에 따른 결과만 정의한다.

단순히 정보를 보여주는 페이지를 만드는데는 react가 불필요하다. 유지보수와 확장성을 생각한다면 괜찮은 선택이다.

- 설치, 빌드

nodejs가 설치되어있지 않다면 설치한다.

- webpack버전 (React 18이하 버전 방식)

npx create-react-app {app 이름}

를 입력하면 app이름으로 폴더가 만들어진다.

vscode - 폴더열기로 app이름 폴더를 열고 터미널에 npm start를 하면 앱을 편집하면서 저장만 하면 브라우저에서 바로 변경본이 적용된다.

npm run build를 하면 build에 제품이 build되고, serve -s build를 하면 build된 제품을 로컬호스트에 띄워준다.

- vite버전(React 18버전이상부터 추천되는 방식)

npm create vite@latest

를 입력하고 프로젝트 이름을 정하고 react를 선택하면 된다.

미리보기는 npm run dev를 하면 된다.
npm run build를 하면 dist에 제품이 build되고, npm run preview하여 배포될 앱의 최종점검을 하면 된다.

- JSX와 데이터바인딩

react에서는 jsx문법을 사용해 javascript코드 내에서 html과 비슷한 마크업을 작성할 수 있게 해준다. 변수, 함수, 제어문 등을 이용해 동적 html생성이 쉬운 것이다.
또한 {}문법을 사용하면 데이터 바인딩이 가능한데, 데이터를 html에 쉽게 삽입할 수 있다. 그리고 state 데이터를 바인딩하면 html이 알아서 업데이트된다.

- useEffect

컴포넌트가 로딩될 때, 변수값이 바뀔 때 특정 작업을 지시할 수 있는 함수다.

useEffect(() => {
    if (categories.length === 0) {
      fetchCategories();
    }
  }, []);

useEffect(() => {
    localStorage.setItem('like_cut', likeCut);
    localStorage.setItem('size', size);
    localStorage.setItem('orderby', orderBy);

    async function getPosts() {
      setIsLoading(true);
      try {
        // 글목록 가져오기
        const response = await axios.get(
          "/api/post",
          {
            params: {
              page, abbr, like_cut: likeCut, size, orderby: orderBy, search
            }
          }
        );
        if (response.status === 200 || response.status === 201) {
          setPosts(response.data.posts);
          console.log(response.data);
        }
      } catch (error) {
        console.error('글목록 가져오기 에러', error);
        alert(JSON.stringify(error.response.data));
      } finally {
        setIsLoading(false);
      }
    }
    getPosts();
  }, [abbr, page, likeCut, size, orderBy, search]);

- state(상태)

상태에 따른 ui 구조를 정의해놓으면, ui를 우리가 직접 바꾸지 않아도 상태만 바뀌면 react가 상태의 변경을 감지해 알아서 ui를 바꿔준다.

const [isLoggedIn, setIsLoggedIn] = useState(false);

useState(초기값)을 사용하면 [읽기전용변수, 값바꾸기함수]를 반환해준다. jsx에 읽기전용변수를 데이터 바인딩하여 화면에 나타내면 된다. 그리고 값바꾸기함수를 사용해 상태를 바꾸면 된다.

지역 상태가 아닌 전역 상태를 써야 하는 상황이라면 zustand같은 라이브러리를 사용하면 된다.

import { create } from 'zustand'

const useBear = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}))

function BearCounter() {
  const bears = useBear((state) => state.bears)
  return <h1>{bears} bears around here...</h1>
}

function Controls() {
  const increasePopulation = useBear((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

로컬스토리지에 전역 상태를 저장해야된다면 persist 미들웨어를 사용하면 된다. 상태변화를 감지해 알아서 저장과 불러오기를 해준다. 내부적으로 JSON.stringify와 JSON.parse를 해준다.

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useThemeStore = create(
  persist(
    (set) => ({
      isDark: false,
      toggleTheme: () => set((state) => ({ isDark: !state.isDark })),
    }),
    { name: 'theme-storage' } // 로컬 스토리지에 저장될 이름
  )
);

- react-router-dom

npm install react-router-dom

상태만을 사용해 ui를 변경시킨다면, 앞으로가기 뒤로가기 같은 브라우저 기능을 사용할 수 없게된다. 웹브라우저는 url이 변경되는것을 감지해 이동시키기 때문이다. 이때 react-router-dom라이브러리를 사용하면 된다.

최상위에 <BrowserRouter> 또는 <HashRouter>를 둔다.

<BrowserRouter>
      <div className="App w-full bg-orange-200 min-h-screen flex flex-col">
        <Header></Header>
        <Routes>
          <Route path='/signup' element={<Signup></Signup>}></Route>
          <Route path='/login' element={<Login></Login>}></Route>
          <Route path='/logout' element={<Login></Login>}></Route>
          <Route path='/myinfo' element={<Myinfo></Myinfo>}></Route>
          <Route path='/myinfoedit' element={<MyinfoEdit></MyinfoEdit>}></Route>
          <Route path='/category/:abbr' element={
            <>
              <Category></Category>
              <PostList></PostList>
            </>
          }></Route>
          <Route path='/' element={
            <>
              <CategoryList></CategoryList>
              <PostList></PostList>
            </>
          }></Route>
        </Routes>
      </div>
    </BrowserRouter>

예전에는 <Switch>를 썼지만 현재 <Routes>를 사용한다. 이 안에 <Route path=''>를 사용하면 된다.

<Link to={'/category/' + abbr}>{currentCategory.name}</Link>

<Link to=''>를 사용해 url을 바꿀 수 있다. <a href>는 새로 서버에 요청하는 반면, 이건 요청이 아니라 url만 바꾸는 기능이다.

const navigate = useNavigate();
navigate('/login');

javascript로 url을 변경하고싶다면 navigate를 사용하면 된다.

const { abbr } = useParams();
  const [searchParams] = useSearchParams();
  const page = searchParams.get('page') || '1';
  const search = searchParams.get('search');

url의 변수가 변함에 따라 자동으로 ui가 업데이트되는 기능을 사용하려면 useParams()와 useSearchParams()를 사용하면 된다. document.URL같은 걸 사용하면 ui자동 업데이트가 되지 않는다. /category/:abbr 같은 url은 useParams()로, /?page=2&search=0206 같은거는 useSearchParams()를 사용하면 된다.

- 디자인

tailwind를 사용하는게 대표적이다.

많은 사람들이 사용하지만 클래스가 너무 많아 가독성이 떨어지고 겹치는 코드가 많아지는데, 이때 컴포넌트 추출 방식(자주 사용되는 디자인 패턴을 별도의 리액트 컴포넌트로 분할하는 방식)을 사용하면 된다.

// components/common/Button.jsx
export default function Button({children, onClick, type="button", className=""}) {
    return (
        <button type={type} onClick={onClick} 
        className={`rounded-md bg-indigo-600 px-2 py-1 text-sm text-white shadow-xs gap-1 ${className}`}>
            {children}
        </button>
    )
}

<div className='flex justify-end py-1 gap-1'>
  <Button>등록</Button>
</div>

PyQt5 라이브러리

blackbearwow — Mon, 8 Dec 2025 15:14:55 +0900

PyQt5 라이브러리는 많은 것을 지원하지만, 다른 라이브러리보다 뛰어난 기능은 GUI기능이다. 운영체제에 상관없이 코드 호환성이 거의 100%이다.

기본적인 창 띄우기:

import sys
from PyQt5.QtWidgets import QApplication, QWidget

class MyApp(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setWindowTitle("내가 만든 창")
        self.move(500, 100)
        self.resize(400, 200)
        self.show()

if __name__ == "__main__":
    app = QApplication(sys.argv)
    ex = MyApp()
    app.exec_()

그리드 레이아웃으로 적절한 레이아웃 만들기:

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import QIcon

class MyApp(QMainWindow):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        centralWidget = QWidget()
        self.setCentralWidget(centralWidget)

        mainGrid = QGridLayout()
        centralWidget.setLayout(mainGrid)

        leftGrid = QGridLayout()

        leftGrid.addWidget(QLabel('title'), 0, 0)
        leftGrid.addWidget(QLabel('author'), 1, 0)
        leftGrid.addWidget(QLabel('review'), 2, 0)

        leftGrid.addWidget(QLineEdit(), 0, 1)
        leftGrid.addWidget(QLineEdit(), 1, 1)
        leftGrid.addWidget(QTextEdit(), 2, 1)

        rightGrid = QGridLayout()

        btn = QPushButton('버튼', self)
        btn.clicked.connect(self.buttonF)
        rightGrid.addWidget(btn, 3, 0)

        mainGrid.addLayout(leftGrid, 0, 0)
        mainGrid.addLayout(rightGrid, 0, 1)

        self.setWindowTitle("내가 만든 창")
        self.move(500, 100)
        self.statusBar().showMessage('statusbar')
        self.show()

    def buttonF(self):
        print("버튼 클릭됨")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    ex = MyApp()
    app.exec_()

여러 위젯과 시그널:

https://wikidocs.net/21933에 보면 여러 위젯과 해당 위젯의 시그널을 설명해주고 있다.

버튼, 체크박스, 콤보박스, 텍스트 브라우저 등 다양한 위젯을 볼 수 있다.

시그널 메소드.connect를 하면 해당 시그널이 일어났을 때 실행해야할 함수를 지정할 수 있다. 예를들어 버튼 클릭이 일어났을 때, btn.clicked.connect(funcA) 를 하면 btn이 클릭되었을 때 funcA가 실행된다.

참고: https://pypi.org/project/PyQt5/

https://wikidocs.net/book/2165

https://wikidocs.net/book/2944

파이썬 소켓 통신

blackbearwow — Wed, 3 Dec 2025 17:54:34 +0900

기본 예시)

서버

import socket

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

server_address = ('localhost', 61001)

s.bind(server_address)

s.listen()

client_s, client_addr = s.accept()
for i in range(10):
    data = client_s.recv(1024)
    data = data.decode()
    print(data)
    
client_s.close()
print('종료')

클라이언트

import socket

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server_address = ('localhost', 61001)

s.connect(server_address)

while True:

    data = input('')
    if data == 'q':
        break
    data = data.encode()
    s.send(data)

s.close()

서로 채팅 주고받기 - 보내고 받는 스레드를 만들면 동시에 실행이 가능하다.

예시)

서버

import socket
import threading

def Send(sock):
    while True:
        rawdata = input('')
        data = rawdata.encode()
        sock.send(data)
        if rawdata == 'q':
            break
    sock.close()

def Recv(sock):
    while True:
        data = sock.recv(1024)
        if not data:
            break
        data = data.decode()
        print("Client:", data)
        if(data == 'q'):
            break
    sock.close()

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server_address = ('localhost', 61001)

s.bind(server_address)

s.listen()

client_socket, client_addr = s.accept()

recvThread = threading.Thread(target=Recv, args=(client_socket,))
sendThread = threading.Thread(target=Send, args=(client_socket,))
recvThread.start()
sendThread.start()
recvThread.join()
sendThread.join()

클라이언트

import socket
import threading

def Send(sock):
    while True:
        rawdata = input('')
        data = rawdata.encode()
        sock.send(data)
        if rawdata == 'q':
            break
    sock.close()

def Recv(sock):
    while True:
        data = sock.recv(1024)
        if not data:
            break
        data = data.decode()
        print("Server:", data)
        if(data == 'q'):
            break
    sock.close()

server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server_address = ('localhost', 61001)

server_socket.connect(server_address)

recvThread = threading.Thread(target=Recv, args=(server_socket,))
sendThread = threading.Thread(target=Send, args=(server_socket,))
recvThread.start()
sendThread.start()
recvThread.join()
sendThread.join()

논 블로킹 소켓

def Recv(sock):
    sock.setblocking(False)
    while True:
        time.sleep(1)
        try:
            data = sock.recv(1024)
            if not data:
                break
            data = data.decode()
            print("Server:", data)
            if(data == 'q'):
                break
        except BlockingIOError:
            print("아무것도 일어나지 않았다")
    sock.close()

논 블로킹 소켓을 사용하려면 socket.setblocking(False)를 하면 된다.

아무것도 받지 않으면 BlockingIOError를 일으키므로 try except가 필요하다.

참고: https://docs.python.org/ko/3.15/howto/sockets.html#non-blocking-sockets

asyncio 라이브러리

blackbearwow — Sat, 23 Aug 2025 20:02:03 +0900

python 도 js처럼 async await 문법을 사용해 비동기 처리를 할 수 있다.

1. import

import asyncio

파이썬은 js와 다르게 asyncio라는 라이브러리를 import해야 한다.

2. 함수 정의 & 실행

async def sleep(n):
    await asyncio.sleep(n)
    print(f'{n}초 sleep 완료')

async def main():
    await sleep(3)

asyncio.run(main())

async def로 비동기 함수를 정의할 수 있다.

비동기 함수는 비동기 함수 내부에서 await가 붙여져 실행되거나 asyncio.run()으로 실행된다.

3. asyncio 메소드

3.1. asyncio.sleep(delay, result=None)

delay초 동안 sleep한다. 이 메소드는 time.sleep과 다르게 cpu를 다른 작업에 넘긴다.

**3.2. asyncio.gather(*aws, return_exceptions=False)**

aws시퀀스에 있는 어웨이터블 객체를 동시에 실행한다.

async def sleep(n):
    await asyncio.sleep(n)
    print(f'{n}초 sleep 완료')

async def main():
    await asyncio.gather(
        sleep(3), sleep(2), sleep(1)
    )

asyncio.run(main())

3.3. asyncio.run()

비동기 작업을 시작한다. 보통 메인 진입점으로 사용된다.

3.4. asyncio.create_task()

비동기 작업을 시작한다. 다른 비동기 작업과 같이 실행된다.

js에서는 일반적인 비동기 함수를 실행시키려면 그냥 호출하면 되지만 python에서는 이 함수를 실행시켜야 한다.

참고: https://www.youtube.com/watch?v=yYD_brv9R0o

https://wikidocs.net/125092

https://docs.python.org/ko/3.13/library/asyncio-task.html