LG CNS 부트캠프 학습일지 30일차

학습 내용

• JPA를 사용해서 블로그 프로젝트 다시 만들기
• JSON Web Token 디버깅

JPA를 사용해서 블로그 프로젝트 다시 만들기

기존 블로그 프로젝트는 MyBatis를 사용해서 만들었다. 이것을 다시 Java Persistence API를 사용해서 만들었다. 실습을 따라가면서 컨트롤러의 엔드포인트가 매번 바뀌는 것이 조금 불편했다. 하지만 디버깅을 하면서 어떤 문제가 있는지 확인하고 그 문제를 해결하기 위해 고민을 하면서 경험치를 쌓는 것이라고 생각한다.

외래키를 사용할 때 JPA가 조금 다른 점이 있었다. 예를 들어 이런 테이블이 있다고 하자. blog_entity 테이블은 user_entity 테이블의 EMAIL 을 외래키로 사용한다.

CREATE TABLE blog_entity (
	BLOG_ID INTEGER,
	TITLE VARCHAR(100),
	CONTENT VARCHAR(500),
	EMAIL VARCHAR(100),
	CONSTRAINT PRIMARY KEY (BLOG_ID),
	CONSTRAINT FOREIGN KEY (EMAIL) REFERENCES user_entity (EMAIL)
);

이런 경우 백엔드에서 BlogEntity 라는 클래스를 만들 때, email 이라는 문자열을 정의해주면 될 것이라고 생각했다. 하지만 JPA는 UserEntity 자체를 BlogEntity 에 바로 참조해버린다.

public class BlogEntity {
	@Id
	private Integer blogId;

	@Column
	private String title;

	@Column
	private String content;

	@ManyToOne(fetch = FetchType.LAZY, optional = false)
	@JoinColumn(name = "email")
	private UserEntity author;
}

JSON Web Token 디버깅

결론적으론 내 실수였다. 프론트엔드와 백엔드 간에 통신이 원하는 대로 안됐고, 인증이 안되서 그런 것이라는 것을 발견했다. JWT가 제대로 전달이 안되고 있었는데, 그 과정에서 알아낸 것을 이야기하려고 한다.

프론트엔드 리엑트 프로젝트에서 로컬 스토리지에 토큰을 저장해뒀었다.

export const SignInPage = () => {
	...

	localStorage.setItem("accessToken", accessToken);
}

웹브라우저 개발자 도구에서 이 엑세스 토큰 값을 확인할 수 있다. 개발자 도구 상단 저장소(Storage) 탭을 누르고 로컬저장소 아래 프론트엔드 서버 주소를 누르면 된다.

프론트엔드 디버깅 방법

백엔드 자바 프로젝트는 Jetbrains Intellij 디버거를 사용하면 된다. 중단점(breakpoint)를 걸고 변수에 예상한 값이 들어가는지 확인하면 된다. 하지만 프론트엔드는 그렇게 할 수 없었다. Jetbrains Webstorm 도 Jetbrains Intellij 와 마찬가지로 디버거가 있는데, 실제로 중단점을 걸로 변수값을 확인하려면 웹브라우저의 개발자 도구를 이용해야 한다. 문제는 개발자 도구가 표시되는 공간이 작아서 불편하다는 것이다. 다른 방법이 없을까?

찾아보니 당연히 있었다. 단지 내가 모르고 있었을 뿐…

Webstorm에서 npm run dev에 대응하는 Configuration을 만들어서 실행하고 있었다. 하지만 이것은 중단점을 설정하는 등의 디버깅을 해줄 수 있게 해주지 않는다. 별도로 Configuration을 만들어 주어야 한다. ChatGPT는 이렇게 설명했다.

Create a JavaScript Debug configuration

In WebStorm:

1. Run → Edit Configurations…
2. Click +
3. Choose JavaScript Debug
4. Set the URL to http://localhost:5173
5. Click OK.

새로 추가한 JavaScript Debug Configuration을 디버거로 실행하면 디버깅을 시작할 수 있다. 코드를 작성할 때는 VSCode도 나쁘지 않지만 근본적으로는 텍스트 에디터라서 일정한 한계가 있다. 옛날에 Atom 텍스트 에디터를 사용하면서 여러 삽질을 했던 것이 기억이 난다. 그 때는 무료로 사용할 수 있는 통합개발환경이 거의 없었기 때문에 어쩔 수 없던 것 같지만 말이다. Visual Studio, Xcode, Eclipse 등이 생각난다. MacOS에서만 사용할 수 있으니 Xcode 는 제외하고, 통합개발환경을 돈 주고 사용하고 싶지 않다면 사실상 선택지는 Eclipse 밖에 없는데, 대략 10년 전에는 얼마나 유용했는지 문득 궁금했다.

레딧을 살펴보니 사람들은 Eclipse 보다는 Intellij를 선호하는 것 같다. Eclipse도 쓸만하지만 Intellij가 많은 부분에서 더 우월하기 때문에 Eclipse를 사용할 이유가 없다고 말한다. 그렇다면 VSCode와 Eclipse 중에서는 어떤 것을 더 선호할까. 레딧 댓글을 읽어보니 사람들의 반응이 제각각이다. 결국 개발자가 어느 것을 선호하는가에 따라 달려있는 것 같다. 내가 둘 중 하나를 선택해야 한다면 Eclipse를 사용할 것 같다. 결국 VSCode는 텍스트 에디터일 뿐이기 때문이다.