제가 공부한 내용을 정리하는 블로그입니다. 아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁
해당 포스팅은 Bash Shell 정리입니다.
서론
Bash는 유닉스 및 리눅스 환경에서 사용되는 가장 널리 알려진 셸로, 강력한 스크립팅 기능을 제공하여 시스템 관리와 반복 작업 자동화에 매우 유용합니다. Bash Shell 스크립팅은 단순한 명령어 실행을 넘어 변수, 조건문, 반복문, 함수 등을 활용하여 복잡한 작업을 효율적으로 처리할 수 있습니다. 이번 포스팅에서는 Bash Shell 프로그래밍을 초보자도 쉽게 이해하고 활용할 수 문법 정리를 하겠습니다!
본론
1. Bash 스크립트 기본 구조
쉘 스크립트는 첫줄에 어떤 쉘로 스크립트를 실행할지 정의하는 부분이 존재합니다.
Bash 스크립트는 #!/bin/bash라는 셰뱅(Shebang)으로 시작하며, 실행 권한을 부여한 후 실행됩니다.
#!/bin/bash
echo "Hello, World!"
쉘 종류
sh: 초기 유닉스 쉘
bash: sh와 대부분 호환되는 Bash Shell
ksh: 콘 쉘이라고도 불리며 sh를 확장하여 만든 쉘
csh: C언어 기반의 쉘
스크립트 실행
chmod +x script.sh
./script.sh
실행권한을 주어야 스크립트를 실행할 수 있습니다.
2. 변수와 데이터
변수는 프로그래밍 언어들과 같은 제약조건이 존재하며 값을 사용할 때에는 $로 시작하고 변수를 생성할 때에는 대입문자 앞뒤로 공백이 없어야 합니다.
변수 선언
variable="값"
변수호출
echo $variable # {}가 있으나 없으나 $만으로 변수의 값을 넣어줄 수 있으나, 문자열을 붙여서 쓸려면 ${} 를 사용해야 한다.
echo "this product's price is ${variable}"
읽기 전용 변수
readonly variable
사용자 입력 받기
read -p "Enter your name: " name
echo "Hello, $name!"
환경변수
쉘 스크립트에서 변수명 앞에 export를 붙여주면 환경변수로 설정되어 스크립트에서 사용 가능합니다.
중괄호 대신 fi문으로 if문의 종료를 알리며 조건식이 들어가는 대괄호 [] 사이에 공백이 존재해야합니다.
if문 기본 사용법
if [ 조건 ]; then
echo "조건이 참입니다."
else
echo "조건이 거짓입니다."
fi
숫자 비교 연산자
-eq: 같음
-ne: 같지 않음
-lt: 작음
-le: 작거나 같음
-gt: 큼
-ge: 크거나 같음
num=10
if [ $num -gt 5 ]; then
echo "$num은 5보다 큽니다."
fi
4. 반복문
for문
for i in {1..5}; do
echo "숫자: $i"
done
while문
count=1
while [ $count -le 5 ]; do
echo "Count: $count"
count=$((count + 1))
done
5. 함수
함수 정의 및 호출
function greet {
echo "Hello, $1!"
}
greet "Bash"
매개변수
#!/bin/bash
echo "첫 번째 매개변수: $1"
echo "두 번째 매개변수: $2"
echo "모든 매개변수: $@"
echo "매개변수 개수: $#"
# 실행
./script.sh Hello World
# 출력
첫 번째 매개변수: Hello
두 번째 매개변수: World
모든 매개변수: Hello World
매개변수 개수: 2
특수 변수
설명
$0
실행된 스크립트의 이름
$#
매개변수의 갯수
$@
모든 매개변수
$*
모든 매개변수(하나의 문자열로)
$$
현재 스크립트의 PID
$?
이전 명령어의 종료 상태(0: 성공)
$!
마지막으로 실행된 백그라운드 명령어의 PID
6. 파일 처리
파일 존재 여부 확인
if [ -e filename ]; then
echo "파일이 존재합니다."
fi
파일 읽기 예제
while read line; do
echo $line
done < filename.txt
7. 기타 유용한 문법
명령어 실행 결과 저장
result=$(ls -l)
echo "$result"
에러 처리
command || echo "명령어 실패!"
결론
Bash Shell 프로그래밍은 간단한 문법으로 시스템을 제어하고 반복 작업을 자동화하는 데 강력한 도구가 됩니다. 이번 포스팅에서는 변수, 조건문, 반복문, 함수 등 핵심 문법을 정리했으며, 이를 기반으로 더 복잡한 스크립트를 작성할 수 있습니다. 꾸준한 연습과 다양한 예제 실습을 통해 Bash 스크립팅 실력을 쌓아 보세요😁
Spring Boot에서는 별도의 설정 없이도 swagger-ui와 OpenAPI 문서를 사용할 수 있습니다. SpringDoc 라이브러리를 추가하면 /swagger-ui.html 또는 /swagger-ui/index.html 경로에서 Swagger UI에 접근할 수 있습니다.
SwaggerConfig 설정
SwaggerConfig 클래스는 OpenAPI 문서의 기본적인 설정을 커스터마이징할 수 있도록 작성됩니다. Spring Boot와 SpringDoc을 사용하면 Swagger UI와 OpenAPI 문서를 별도의 설정 없이 기본적으로 사용할 수 있지만, 프로젝트 이름, API 설명, 버전 정보 등을 명확히 하기 위해 SwaggerConfig 클래스에서 OpenAPI 객체를 설정할 수 있습니다.
@Configuration
public class SwaggerConfig {
@Bean
public OpenAPI openAPI() {
return new OpenAPI()
.info(new Info().title("Hiro Backend")
.description("Hiro Backend 서버")
.version("v0.0.1"));
}
}
@Bean
public OpenAPI openAPI() {
SecurityScheme securityScheme = new SecurityScheme()
.type(SecurityScheme.Type.HTTP)
.scheme("bearer")
.bearerFormat("JWT")
.in(SecurityScheme.In.HEADER)
.name("Authorization");
SecurityRequirement securityItem = new SecurityRequirement().addList("bearerAuth");
return new OpenAPI()
.openapi("3.0.1") // OpenAPI 버전 명시
.components(new Components().addSecuritySchemes("bearerAuth", securityScheme))
.security(List.of(securityItem))
.info(apiInfo());
}
을 추가해주시면 됩니다.
SecurityScheme 설정 SecurityScheme 객체를 통해 Swagger 문서에 JWT 인증 방식을 정의합니다.
type: 인증 방식의 타입을 설정합니다. 여기서는 HTTP 방식을 사용합니다.
scheme: bearer로 설정하여 JWT 인증임을 명시합니다.
bearerFormat: 토큰의 형식을 "JWT"로 지정합니다.
in: 인증 정보가 포함되는 위치를 지정합니다. JWT 토큰은 보통 HTTP 헤더의 Authorization 필드에 포함됩니다.
name: 헤더의 이름을 Authorization으로 설정합니다.
SecurityRequirement 설정 SecurityRequirement 객체는 Swagger 문서에서 JWT 인증이 필요한 엔드포인트에 보안 요구사항을 추가합니다.
addList("bearerAuth"): 위에서 정의한 SecurityScheme을 엔드포인트에 적용합니다.
Components 설정 OpenAPI의 구성 요소에 SecurityScheme을 추가합니다.
addSecuritySchemes("bearerAuth", securityScheme): bearerAuth라는 이름으로 JWT 인증 스키마를 등록합니다.
security 설정
OpenAPI 문서의 기본 보안 요구사항을 정의합니다. 모든 엔드포인트에 기본적으로 JWT 인증이 필요하도록 설정됩니다.
info() 메서드 API 문서의 제목, 설명, 버전 정보 등을 설정합니다.
API를 기능별로 나누고 싶다면
@Configuration
public class SwaggerConfig {
@Bean
public GroupedOpenApi userApi() {
return GroupedOpenApi.builder()
.group("user-api") // 사용자 관련 API 그룹
.pathsToMatch("/users/**", "/profile/**")
.build();
}
@Bean
public GroupedOpenApi adminApi() {
return GroupedOpenApi.builder()
.group("admin-api") // 관리자 관련 API 그룹
.pathsToMatch("/admin/**", "/management/**")
.build();
}
@Bean
public GroupedOpenApi publicApi() {
return GroupedOpenApi.builder()
.group("public-api") // 공개 API 그룹
.pathsToMatch("/public/**", "/auth/**")
.build();
}
/*
* ...
*/
}
GroupedOpenApi 정의:
group: Swagger UI에서 보여질 그룹 이름입니다.
pathsToMatch: 해당 그룹에 포함될 엔드포인트 경로를 지정합니다. /**와 같은 경로 패턴을 사용할 수 있습니다.
그룹 나누기:
user-api: /users/**, /profile/**로 시작하는 엔드포인트를 포함합니다.
admin-api: /admin/**, /management/**로 시작하는 엔드포인트를 포함합니다.
public-api: /public/**, /auth/**로 시작하는 엔드포인트를 포함합니다.
컨트롤러에 Swagger 어노테이션 추가
컨트롤러에 @Tag, @Operation, @ApiResponse 등 OpenAPI 3 스펙 기반의 애노테이션을 추가하여 API 엔드포인트를 문서화할 수 있습니다.
@RestController
@RequestMapping("/api/users")
@Tag(name = "User API", description = "Operations for managing users")
public class UserController {
@Operation(summary = "Get all users", description = "Retrieve a list of all users.")
@GetMapping
public List<User> getAllUsers() {
return List.of(new User(1L, "John", "john@example.com"));
}
@Operation(summary = "Create a user", description = "Add a new user to the system.")
@ApiResponse(responseCode = "201", description = "User created successfully.")
@PostMapping
public User createUser(@RequestBody User user) {
return user; // For demonstration purposes
}
}
@Tag @Tag는 OpenAPI 스펙에서 API의 그룹화를 위한 어노테이션입니다. 주로 컨트롤러 레벨에서 사용되며, Swagger UI에서 API를 그룹별로 정리해서 보여줍니다.
주요속성
name: 태그의 이름. Swagger UI에서 그룹명으로 표시됩니다.
description: 태그에 대한 설명을 작성합니다.
@Operation @Operation은 API 엔드포인트(메서드) 수준에서 사용됩니다. 해당 메서드에 대한 요약, 설명, 요청/응답에 대한 정보 등을 문서화합니다.
주요속성
summary: API 엔드포인트에 대한 간단한 설명 (Swagger UI에서 메서드 옆에 표시).
description: API 엔드포인트에 대한 상세 설명.
tags: 이 엔드포인트에 추가적으로 적용할 태그 목록. 컨트롤러에 정의된 @Tag와는 별개로 추가 가능.
parameters: 요청에 필요한 매개변수 정의 (필요시 사용).
responses: 응답에 대한 설명을 추가 (일반적으로 @ApiResponse와 함께 사용).
@ApiResponse @ApiResponse는 특정 API 엔드포인트의 응답 정보를 문서화하는 데 사용됩니다. 응답 상태 코드와 메시지, 반환되는 데이터에 대한 설명을 추가할 수 있습니다.
주요속성
responseCode: HTTP 응답 상태 코드 (예: "200", "404", "500").
제가 공부한 내용을 정리하는 블로그입니다. 아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁
스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는 1. 프로젝트 초기화 2. 쿠키를 이용한 로그인 구현 3. 세션을 이용한 로그인 구현 4. JWT 토큰을 활용한 로그인 구현 입니다.
세번째는 세션을 이용한 로그인 구현입니다.
서론
이전 쿠키 포스팅에서 STATELESS한 HTTP 프로토콜에서 STATEFUL한 서비스를 위한 장치로 헤더에 쿠키를 저장하는 로직으로 설계하였습니다.
하지만 해당 방법은 개인 정보들을 브라우저 단에 저장하여 위변조 및 도용이 쉽다는 문제가 있습니다. 보안적인 부분은 클라이언트가 아닌 서버에서 관리하여 외부로 해당 개인정보를 숨겨 보안성을 높여야합니다. 따라서 클라이언트는 키만 가지고 있으며 해당 정보는 서버에서 관리하고 있는 방법을 세션이라고 합니다.
저는 이 포스팅에서 세션을 두가지 방법으로 구현합니다. 첫번째는 쿠키를 이용한 세션과 속성 기반으로 세션을 구현할 예정입니다.
세션
정의
세션(Session)은 서버가 클라이언트의 상태를 유지하기 위해 일정 기간 동안 저장하는 정보를 의미합니다. 클라이언트의 요청마다 동일한 사용자임을 식별할 수 있도록 하는 상태 관리 방식입니다. 보통 서버는 클라이언트가 전달한 세션 ID를 기반으로 특정 사용자와 연결된 정보를 조회합니다.
역할
사용자 식별: 세션 ID를 통해 동일 클라이언트의 요청임을 서버가 식별합니다.
상태 유지: 로그인 상태, 장바구니 정보 등 사용자의 상태 정보를 서버에서 저장 및 관리합니다.
보안 강화: 민감한 정보는 서버에 저장하고, 클라이언트는 세션 ID만 전달하므로 정보 위변조 위험을 줄입니다.
구조
세션 구조
클라이언트 측
브라우저는 서버로부터 세션 ID를 받아 저장(주로 쿠키에 저장)하고, 이후 요청마다 세션 ID를 포함하여 서버에 전달합니다.
서버 측
서버는 세션 저장소(메모리, 데이터베이스 등)에 세션 ID와 상태 정보를 저장하고, 세션 ID를 키로 사용하여 클라이언트 데이터를 관리합니다.
장점
보안성
민감한 데이터가 서버에 저장되므로 클라이언트에서 정보가 노출될 위험이 줄어듭니다.
유연성
상태 정보는 서버에 저장되므로 클라이언트가 브라우저를 닫더라도 세션이 만료되지 않으면 상태를 유지할 수 있습니다.
확장성
서버의 세션 저장소를 확장하여 대량의 사용자 상태를 관리할 수 있습니다.
단점
서버 부담
세션 데이터를 서버에서 관리하므로 사용자 수가 많아질수록 서버 메모리나 저장소 사용량이 증가합니다.
스케일링 문제
서버가 분산 환경일 경우, 세션 데이터를 공유하기 위한 추가 작업(예: 세션 클러스터링)이 필요합니다.
만료 관리
세션 만료 시간 설정이 필요하며, 만료되지 않은 오래된 세션 데이터가 서버의 리소스를 점유할 수 있습니다.
Session-login(쿠키 기반)
Frontend
localhost:3000/login-session에 접근하기 위해 routepath를 지정합니다.
마찬가지로 username과 password를 토대로 member가 존재하면 SessionManager를 통해 쿠키를 생성하여 response에 넣어줍니다.
@Slf4j
@RestController
@RequestMapping("/session")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:3000", allowedHeaders = "*", allowCredentials = "true")
public class SessionController {
private final AuthService authService;
private final SessionManager sessionManager;
@PostMapping("/loginV1")
public ResponseEntity<String> loginV1(@RequestParam String username,
@RequestParam String password,
HttpServletResponse response) {
log.info("session cookie login id: {}, password: {}", username, password);
// Authorization User
Member member = authService.login(username, password);
if (member != null) {
sessionManager.createSession(member, response);
return ResponseEntity.ok("Success session-login");
}
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail login");
}
@PostMapping("/logoutV1")
public ResponseEntity<String> logoutV1(HttpServletRequest request) {
log.info("logout session cookie");
if (sessionManager.expire(request)) {
return ResponseEntity.ok("Success session-logout");
}
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail logout");
}
}
이 프로젝트에서는 sessionManager를 메모리에서 관리합니다. 쿠키 이름을 spring-react-auth의 쿠키로 sessionId를 UUID 값으로 넣어줍니다.
@Component
public class SessionManager {
public static final String SESSION_COOKIE_NAME = "spring-react-auth";
private final Map<String, Object> sessionStore = new ConcurrentHashMap<>();
public void createSession(Object value, HttpServletResponse response) {
// Generate a unique session ID and store the session data.
String sessionId = UUID.randomUUID().toString();
sessionStore.put(sessionId, value);
// Create a session cookie with the generated session ID.
Cookie sessionCookie = new Cookie(SESSION_COOKIE_NAME, sessionId);
sessionCookie.setHttpOnly(true); // Enhance security by restricting client-side access
// sessionCookie.setPath("/"); // Make the cookie accessible across the application
response.addCookie(sessionCookie);
}
public boolean expire(HttpServletRequest request) {
Cookie sessionCookie = findCookie(request, SESSION_COOKIE_NAME);
System.out.println("sessionCookie = " + sessionCookie.getName());
if (sessionCookie != null) {
sessionStore.remove(sessionCookie.getValue());
return true;
}
return false;
}
public Cookie findCookie(HttpServletRequest request, String cookieName) {
if (request.getCookies() == null) {
return null; // No cookies present in the request
}
return Arrays.stream(request.getCookies())
.filter(cookie -> cookie.getName().equals(cookieName))
.findFirst()
.orElse(null);
}
}
.env 파일을 생성한 후 REACT_APP_BASE_URL="http://localhost:8080"을 입력해줍니다.
쿠키를 사용하기 위해 리액트에서 제공하는 npm install react-cookie를 설치한 후 다음과 같은 코드를 작성합니다.
const CookieLogin: React.FC = () => {
const [cookies, setCookie, removeCookie] = useCookies(['auth-token']);
const [username, setUsername] = useState<string>('');
const [password, setPassword] = useState<string>('');
const [error, setError] = useState<string>('');
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
// Check if the user is authenticated based on the "auth-token" cookie
useEffect(() => {
const token = cookies['auth-token'];
setIsAuthenticated(!!token); // Set authentication status based on cookie presence
}, [cookies]);
// Login API
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
const response = await fetch(
`${process.env.REACT_APP_BASE_URL}/cookie/login?username=${username}&password=${password}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
}
);
if (response.ok) {
const token = await response.text(); // Assume the backend returns a token as plain text
setCookie('auth-token', token, { path: '/', maxAge: 3600 }); // Set the token in cookies
setIsAuthenticated(true);
alert('Login successful');
} else {
setError('Invalid username or password');
}
} catch (error) {
setError('An error occurred while logging in');
}
};
// Logout API
const handleLogout = async () => {
try {
const response = await fetch(`${process.env.REACT_APP_BASE_URL}/cookie/logout`, {
method: 'GET',
});
if (response.ok) {
removeCookie('auth-token', { path: '/' }); // Remove the token cookie
setIsAuthenticated(false);
alert('Logout successful');
} else {
console.error('Logout failed');
}
} catch (error) {
console.error('Logout error:', error);
}
};
// Render success page if authenticated
if (isAuthenticated) {
return (
<div>
<SuccessPage />
<button onClick={handleLogout} className="logout-button">
Logout
</button>
</div>
);
}
return (
<div className="login-container">
<div className="login-form">
<h2 className="login-title">Login with Cookie</h2>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="username">Username</label>
<input
type="text"
id="username"
className="input-field"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="password">Password</label>
<input
type="password"
id="password"
className="input-field"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button type="submit" className="login-button">
Login
</button>
</form>
{error && <p className="error-message">{error}</p>}
</div>
</div>
);
};
export default CookieLogin;
쿠키 로그인 화면
Backend
데이터가 없기에 샘플 데이터를 위한 클래스를 하나 만들어줍니다.
@Component
@RequiredArgsConstructor
public class DataInitializer implements CommandLineRunner {
private final MemberRepository repository;
@Override
public void run(String... args) throws Exception {
Member member = new Member("hiro", "qwer1234");
repository.save(member);
System.out.println("데이터 초기화 완료");
}
}
서버 실행 시 로그
Controller
login
기본적으로 보안은 생략하고 진행하겠습니다. username과 password를 받고 해당 유저가 있으면 로그인 가능하도록 로직을 설계하였습니다. h2 데이터베이스에 유저가 있으면 "auth-token"이라는 이름으로 Cookie를 생성하고 해당 value는 멤버의 pk값을 넣어주었습니다.(기본적으로 암호화된 값이나 유니크한 값으로 설정하는 것이 좋습니다.)
@PostMapping("/login")
public ResponseEntity<String> login(@RequestParam String username, @RequestParam String password, HttpServletResponse response) {
log.info("login id: {}, password: {}", username, password);
// Authorization User
Member member = authService.getMemberByUsername(username);
if (member != null) {
// create cookie & config
Cookie idCookie = new Cookie("auth-token", String.valueOf(member.getId()));
response.addCookie(idCookie);
return ResponseEntity.ok("Success login");
}
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail login");
}
사용자로부터 username과 password를 받아 인증 처리합니다.
authService.getMemberByUsername()를 통해 사용자를 데이터베이스에서 조회 후
사용자가 존재하면 auth-token 쿠키를 생성하여 응답에 추가합니다.
사용자 인증 실패 시Unauthorized(401)상태 반환합니다.
logout
로그아웃 시에는 쿠키를 삭제(만료)를 진행해주면 됩니다. 쿠키의 Age를 0으로 설정하면 쿠키가 삭제되는 것입니다.
제가 공부한 내용을 정리하는 블로그입니다. 아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁
스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는 1. 프로젝트 초기화 2. 쿠키를 이용한 로그인 구현 3. 세션을 이용한 로그인 구현 4. JWT 토큰을 활용한 로그인 구현 입니다.
첫번째는 프론트와 백엔드 설정입니다.
서론
로그인은 현대 웹 애플리케이션에서 필수적인 기능으로 자리 잡았습니다. 사용자 인증은 단순히 애플리케이션에 접근하기 위한 절차를 넘어, 보안, 데이터 보호, 그리고 맞춤형 서비스 제공의 핵심 역할을 담당합니다. 따라서 신뢰할 수 있고 효율적인 로그인 시스템을 설계하고 구현하는 것은 개발자의 중요한 과제 중 하나입니다.
이 포스팅에서는 로그인 시스템을 체계적으로 정리하고자 합니다. 이를 통해 로그인 시스템의 기본 원리부터 실제 구현 방법까지 폭넓게 다루고자 합니다.
프론트는 react를 사용하고 백엔드는 Spring Framework를 활용하여 다음과 같은 방식으로 로그인 시스템을 구현할 예정입니다:
쿠키와 세션을 이용한 상태 관리
Spring Security를 활용한 인증 및 권한 부여
OAuth2를 통한 소셜 로그인 연동
Frontend 설정
프론트는 리액트를 활용하고 언어는 TypeScript를 이용할 것입니다. 리액트 프로젝트를 생성하기 위해 npx create-react-frontend를 통해 프로젝트를 생성합니다.
해당 프로젝트에서 TypeScript를 사용하기 위해 tsconfig.json을 설정해줍니다.
App.js 파일에서는 react-router-dom 라이브러리를 사용하여 애플리케이션의 라우팅을 설정합니다. 이 설정은 SPA(Single Page Application) 형태의 웹사이트에서 페이지 간 전환을 빠르고 부드럽게 구현할 수 있도록 해줍니다. BrowserRouter, Routes, Route 등의 컴포넌트를 사용하여 라우트 경로와 해당 경로에 매핑된 컴포넌트를 정의합니다.
npm install react-route-dom을 통해 라이브러리 설치를 진행해줍니다.
App.js
import AppRoutes from "./pages/AppRoutes";
function App() {
return (
<AppRoutes />
);
}
export default App;
AppRoutes.ts
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import { RoutePath } from '../interface/RoutePath';
import HomePage from './home/HomePage';
const AppRoutes = () => {
return (
<Router>
<Routes>
<Route path={RoutePath.HOMEPAGE} element={<HomePage />} />
</Routes>
</Router>
)
}
export default AppRoutes
RoutePath.ts
export enum RoutePath {
HOMEPAGE = "/",
}
HomePage.tsx 파일은 애플리케이션의 메인 페이지 역할을 하는 컴포넌트를 정의합니다.
이 페이지는 사용자가 사이트에 처음 방문했을 때 렌더링되는 기본 화면을 제공합니다. HomePage 컴포넌트는 React를 사용하여 작성되며, 사용자가 볼 수 있는 다양한 콘텐츠와 네비게이션 링크들을 포함할 수 있습니다.
서버가 제대로 띄워졌는지 확인하기 위한 healthCheck를 위한 컨트롤러를 만들어줍니다.
StatusController
@Slf4j
@RestController
@RequestMapping("/status")
@Tags(value = @Tag(name = "StatusController", description = "Retrieve any status"))
public class StatusController {
@GetMapping
public ResponseEntity<?> serverStatusCheck() {
log.info("this server is health");
return ResponseEntity.ok("ok");
}
@GetMapping("/all")
public ResponseEntity<?> anyOneCanAccess() {
log.info("all people can access");
return ResponseEntity.ok("all people can access");
}
}
서버가 제대로 실행되었는지 확인하기 위해 postman을 통해 확인해보면
health-check
다음과 같이 제대로 띄워져 있는 결과를 얻을 수 있습니다.
데이터베이스와의 연동 확인
데이터베이스와의 연동을 확인하기 위해 간단한 create 요청을 만들어 디비에 제대로 적제되었는지 확인해보겠습니다.
AccountDto와 SignUpRequest는 Java의 record를 사용해 생성됩니다. record는 Java 16 이상에서 제공되는 기능으로, 불변 객체를 간결하게 정의할 수 있게 해줍니다. 이를 통해 DTO(Data Transfer Object)와 요청 객체를 더 짧고 명확한 코드로 작성할 수 있습니다.
SignUpRequest
public record AccountDto() {
@Data
@NoArgsConstructor
@AllArgsConstructor
public static final class SignUpRequest {
private String username;
private String password;
}
}
다음은 controller를 생성합니다. @RequestBody를 통해 받은 SignUpRequest를 통해 service의 joinMember를 호출합니다.
@Entity
@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class Member {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String username;
private String password;
public Member(String username, String password) {
this.username = username;
this.password = password;
}
}
TestService는 서비스 계층으로 Repository와의 상호작용을 담당하고 비즈니스 로직을 담당하는 부분입니다.
TestService
@Slf4j
@RequiredArgsConstructor
@Service
public class TestService {
private final MemberRepository memberRepository;
public String joinMember(String username, String password) throws Exception {
log.info("Service: joinMember");
if (memberRepository.existsByUsername(username)) {
throw new RuntimeException("fail join member");
}
Member member = new Member(username, password);
memberRepository.save(member);
return member.getUsername();
}
}
MemberRepository는 Spring Data JPA의 JpaRepository 인터페이스를 확장하여 데이터베이스와 상호작용하는 저장소(Repository)입니다. 이 인터페이스를 구현함으로써, 기본적인 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 자동으로 제공받을 수 있습니다. 이를 통해 개발자는 복잡한 SQL 쿼리 작성 없이 간단한 메서드 호출만으로 데이터베이스 작업을 수행할 수 있습니다.
MemberRepository
@Repository
public interface MemberRepository extends JpaRepository<Member, Long> {
boolean existsById(Long id);
boolean existsByUsername(String username);
Member findByUsername(String username);
}
힙은 트리 중에서 가장 값이 큰 노드를 루트노드로 가지고 있는 트리를 의미합니다. 따라서 루트 노드를 계속해서 탐색하다보면 내림차순 정렬된 결과 값을 얻을 수 있습니다. 이때 데이터를 삭제할 때에는 heapify를 거치게 되며 데이터를 삽입할 때에도 마찬가지로 heapify 과정을 거치게 됩니다.
따라서 최대값을 가지는 연산에는 O(1)의 값을, 삭제 및 삽입에는 O(logN)의 시간복잡도를 가집니다.
이진 탐색 트리는 선형적으로 구성될 때 시간 복잡도가 O(N)으로 커지는 문제점이 있습니다. 선형적으로 구성되지 않고 균형 잡힌 트리로 구성하기 위해 나온 트리로 AVL트리와 레드 블랙 트리가 있습니다.
AVL트리는 스스로 균형을 잡는 이진 탐색 트리입니다. 두 자식 서브 트리의 높이는 항상 최대 1만큼 차이가 나는 특징이 있습니다. 탐색 삽입 삭제 모두 시간 복잡도가 O(logN)이며 삽입 삭제할 때마다 균형을 맞추기 위해 회전을 진행합니다.
레드 블랙 트리는 균형을 유지하기 위해 노드에 색상(빨강 또는 검정)을 부여하고 몇 가지 규칙을 따릅니다. 레드 블랙 트리는 AVL 트리보다 느슨한 균형을 유지하기 때문에 삽입과 삭제 시 회전 연산이 더 적게 발생합니다. 이로 인해 삽입과 삭제의 성능은 더 나은 경우가 많습니다. 레드 블랙 트리는 AVL 트리와 마찬가지로 탐색, 삽입, 삭제의 시간 복잡도는 O(log N)으로 보장되지만, AVL 트리만큼 탐색 속도가 빠르진 않을 수 있습니다.