나에게 남기는 지식

Nuxt 3는 현재 시점에서 프로덕트 수준으로 사용할만 할까?

작은 거인 — Fri, 9 Dec 2022 12:14:34 +0900

최근 Nuxt 3가 정식 버전이 공개됐다. rc7쯤부터인가, 개인 영문 블로그를 만들려고 계속 테스트해오고 있었는데, 여전히 불안정한 부분이 있는것 같다. 그래서 결론부터 먼저 말하자면, 현 시점에 프로덕트 수준으로 사용하는 것은 No다. 필자는 지금 개인 영문 블로그를 Nuxt3로 운영중이기 때문에 불가능하다는 이야기는 아니다.

개인적으로 생각하는 이유는 많지만, 너무 주관적이라는 생각이 들어서 딱 하나만 짚어보려고 한다. Vue3 생테계 자체가 불안정하다는 점이다. 2020년 9월 19일, 원피스라는 이름으로 Vue3가 공개된 뒤 장기간에 걸쳐 Vue2에서 Vue3로 생태계가 바뀌어 왔음에도, 정식 버전으로 Vue3가 채택되기 전까지 이를 지원하지 않는 라이브러리가 꽤 많았다. 지원했더라도, 발생한 이슈를 적극적으로 대처하는 라이브러리가 많지 않았다.

왜 그랬을까 뇌피셜을 굴려보자면, 프론트엔드 개발 기조가 SPA에서 SSR 지원으로 옮겨가면서 Next, Nuxt, Svelte kit등 SSR 프레임워크로 개발하는 사람들이 많아지다보니, Nuxt가 Vue3를 지원하지 않는 시점에 굳이 일을 만들어서 할필요가 없던 것이 아닐까 생각해본다. 현재로 넘어와서, Vue3가 이전부터 갖고 있던 이슈가, 활발히 사용되기 시작하는 지금에 와서야 알려지다보니 생테계가 전반적으로 불안정하다.

한가지 예로, Nuxt3로 onMouted()에서 Dom에 접근하는데, nextTick()이 작동을 안해서 undefined가 반환됐다. API가 Vue3에서 바뀌었나 싶어서 찾아보니 Nuxt3가 아닌 upstream 이슈로, Vue3에서 Suspend+Transition을 사용하면 문제가 생기는 것이었다. 지금도 해당 이슈로 인해, nextTick()을 사용하는 부분에는 setTimeout()을 사용해서 트랜지션을 사용 유무에 따라 여유 시간을 줘야한다.

Nuxt2에서 사용하던 공식 라이브러리들도 아직 열심히 개발 단계이거나, 이슈를 묵혀둔채 Nuxt3쪽으로 인력이 몰려있는 것으로 보인다. 덕분에 블로그 개발하다가 몇번을 '그냥 만들어진 플랫폼 써야겠다'라고 생각하며 도망갔는지 기억이 나지 않는다.

주요 라이브러리 로드맵

물론 필자와 달리, 이슈 자체에 대해 내성이 강한 개발자들은 본인이 직접 개발해서 대처할 수 있으니 크게 관련없는 이야기일 수 있다. 필자는 휘몰아치는 프론트엔드 기술 폭풍속에서 '이게 Vite 문제인지, Nuxt3 문제인지, Vue3문제인지' 파악하는 과정이 너무도 고통스럽기 때문에, 공감하는 개발자가 있다면 당분간은 Nuxt2 기반으로 프로젝트를 진행하되, Nuxt3 변경점은 계속 주시하라고 권하고 싶다.

사례가 많지는 않은데, Svelte로 넘어가는 사례가 보여서 이를 공부하고 정리해보고자 한다.

스프링 네이티브 이미지를 사용해봤다.

작은 거인 — Fri, 9 Dec 2022 11:04:39 +0900

최근, 스프링 부트 3 버전이 출시됐다. 메이저 버전이 바뀐 만큼 다양한 변화가 있겠지만 그 중에서도 AOT 엔진을 사용한 스프링 네이티브 이미지가 가장 많이 언급되는 것 같다. 공식 문서에 따르면, 네이티브 이미지를 사용하는 것은 빠른 시작, 준수한 성능, 그리고 메모리 사용량 감소와 같은 장점을 제공한다.

새 프로젝트에 적용이 가능할 정도인가 싶어, 바로 테스트를 해봤다.
내 환경은 아래와 같다.

M1 Mac
Graalvm CE 19
Gradle

어떤 방법으로 네이티브 이미지를 빌드할까?

스프링 네이티브 이미지를 빌드하는 방법에는 두 가지가 있다. 하나는 도커 이미지를 사용하는 것, 다른 하나는 Graalvm을 통해 바이너리 파일을 직접 빌드하는 것이다.

도커를 사용하면 간단하겠지만, 신기술의 경우 내가 개발하는 환경에서는 작동하지 않는 경우가 생각보다 많아서 도커 없이도 쉽게 사용가능한지 직접 바이너리 파일을 빌드해서 테스트해봤다.

GraalVM 설치

IntelliJ에서 Graalvm 다운로드를 제공하기에 다른 특별한 설정없이 다운로드 받기만 했다.

프로젝트 생성하고 빌드하기

IntelliJ를 통해 Spring boot 3 간단한 프로젝트를 생성했다.

달리 설정할 것이 없이, 바로 빌드해봤다. 바이너리 파일로 빌드하려면 gradle에서 nativeCompile task를 실행하면 된다. 비교를 위해 executable jar도 빌드했다.

역시 한번에 빌드가 되지는 않는다.

nativeCompile 테스크에서 Graalvm을 찾지 못하고, Cannot query the value of property 'javaLauncher' because it has no value available.
에러가 발생했다. 이 Github Issue를 보니 JAVA_HOME이 설정되지 않아서 발생한 문제로 보여서, Run/Debug Configuration에서 설정한 뒤에는 빌드가 잘 됐다.

빌드하는데만 약 3분 17초 정도 소요됐다.

환경변수 말고 다른 방법이 없을까?

Run/Debug Configuration에서 환경변수를 설정하게 되면, 테스트를 돌려야해서 실행 환경을 바꾸게 되면 또 다시 설정해줘야 하고 사소한 일로도 해당 설정이 지워질수 있다. 또한 같은 프로젝트를 공유하는 사람들에게 같은 실수를 방지하기 위해서 이 이슈가 있음을 반드시 공유해야 하는 점이 불편하다.

Gradle로 처리할 수 있는 방법이 있나 찾아보니, Native build plugin 문서에서 설명하는 toolchain 설정하니, 환경변수 없이도 작동했다.

테스트 결과

Jar 패키지 실행 결과

네이티브 이미지 실행 결과

빌드 결과물 사이즈

Startup time은 약 5.5배 감소했고 메모리 사용량은 약 4배 감소했으며, 용량의 경우 약 3.6배 증가했다. 여러 블로그를 보면 이미지 사이즈가 감소한다고 하던데, 도커 이미지 이야기인건지 아니면 내가 뭘 잘못한지 모르겠다. 생각해보면 native 빌드할때 byte code metadata나, JVM 없이 자체 실행이 가능하게 하는 유틸리티 등이 포함됨을 고려하면 용량이 커지는게 이상하진 않은 것 같다.

정리

다음 프로젝트부터 적용해볼 예정인데 한가지, Golang처럼 환경변수로 크로스 플랫폼 빌드를 할 수 없는게 솔직히 많이 아쉽다. 그러나 도커로 대체할 수 있고, 바이너리 빌드시에는 Github action에서 OS를 선택해서 빌드하면 배포 OS에도 맞출 수 있으니 사용하는데는 무리가 없을 것 같다.

nuxt.js: vue packages version mismatch

작은 거인 — Thu, 13 Feb 2020 13:44:17 +0900

배경

git에서 샘플 프로젝트를 복사해서 인스톨 했는데, 완료는 됐으나 오류가 검출되 audit fix로 수정.

이후 프로젝트를 실행했더니, 아래와 같이 버전이 일치하지 않는 오류가 발생.

  - vue@2.6.10
  - vue-server-renderer@2.6.11

해결

아래 커맨드로 패키지 관련 파일 삭제 후 다시 인스톨.

rm -rf node_modules/ package-lock.json
npm i

Spring Boot Test 에서 yml 읽어오기

작은 거인 — Fri, 3 Jan 2020 15:41:18 +0900

@SpringBootTest(properties = {"spring.config.location=classpath:application-test.yml"})

내가 사용하는 live template

작은 거인 — Wed, 1 Jan 2020 20:45:40 +0900

abbreviation	Template text
assertthat	org.assertj.core.api.Assertions.assertThat($END$);
assertthrows	org.junit.jupiter.api.Assertions.assertThrows($EXCEPTION$.class, () -> $END$);
tdd	@org.junit.jupiter.api.Test public void $methodName$() throws Exception { //given $END$ //when //then }
todo	// TODO $DATE$ $END$ $USER$ DATE와 USER 변수는 Edit variables에서 각각 expression을 date()와 user()로 한다.
when	org.mockito.Mockito.when($WHEN$).thenReturn($RETURN$);

등록 순서

1. abbreviation 입력(실제 템플릿을 불러올 명령어)

2. Template text에 입력될 내용 작성

3. application context Define 눌러서 해당 템플릿을 사용 가능한 app 환경 설정.

4. use static import of possible 체크. (2번에서 패키지명을 풀로 입력하면 알아서 import 시켜줌)

생성자 주입 사용시 순환 참조가 발생할 때

작은 거인 — Sat, 28 Dec 2019 23:03:37 +0900

배경

스프링 커뮤니티에서 필드 주입보다는 생성자 주입을 권장하기 때문에 생성자 주입을 아무런 생각없이 쓰고 있었다. 그런데 오늘 jwt 토이 프로젝트를 하다가 순환 참조가 발생해서 해당 내용을 기록한다.

문제

   jwtRequestFilter defined in file [xx\IdeaProjects\study\simple_shopping_mall\out\production\classes\com\ssmallgiant\simple_shopping_mall\filter\JwtRequestFilter.class]
┌─────┐
|  memberService defined in file [xx\IdeaProjects\study\simple_shopping_mall\out\production\classes\com\ssmallgiant\simple_shopping_mall\service\MemberService.class]
↑     ↓
|  securityConfig defined in file [xx\IdeaProjects\study\simple_shopping_mall\out\production\classes\com\ssmallgiant\simple_shopping_mall\config\SecurityConfig.class]
└─────┘

위와 같은 순환참조 에러가 발생해서 코드를 다시 보니, jwtRequestFilter와 securityConfig 에서 memberService를 사용하는데, memberService에서는 또 securityConfig에 정의한 passwordEncoder를 사용해서 생성자 주입이 순환참조가 되고 있었다.

해결

jwtRequestFilter와 securityConfig의 생성자에서 memberService 파라미터 앞에 @Lazy를 붙여 해결했다. 이 어노테이션은 빈 초기화 시점에는 프록시를 주입하고, 처음 실행될 때 진짜 객체를 주입한다고 한다.

ps. memberService에 어노테이션을 붙인 이유는, 이 클래스가 온전히 빈이 된 시점에서 다른 곳에 주입이 되야 한다고 생각해 가장 사이드 이펙트가 적을 것으로 예상되는 빈에 작업한 것.

SpringBoot2 + jdk 11 + gradle. NoClassDefFoundError 뜰 때

작은 거인 — Thu, 21 Nov 2019 11:27:01 +0900

implementation 'javax.xml.bind:jaxb-api'
implementation 'org.glassfish.jaxb:jaxb-runtime'
implementation 'javax.activation:activation:1.1.1'

위 의존성을 추가하면 기능함.

Putty 자동 로그인

작은 거인 — Fri, 8 Nov 2019 10:27:44 +0900

Putty 자동 로그인

인증키 생성
```
ssh-keygen -t rsa
```
접속한 계정의 홈 경로의 .ssh 에 생성됨.

생성할때 passpharse를 입력하면 자동 로그인이 안됨!!!

ex) /home/me/.ssh/

공개키의 이름을 authorized_keys로 바꿔줌. (백업 목적으로 복사를 추천)
```
cp id_rsa.pub authorized_keys
```
로컬에 개인키를 복사, puttygen으로 load.
Save private key를 누르면, 아래와 같은 비번이 없는데 괜찮냐는 경고 메시지 뜨고 예를 눌러 ppk 파일을 저장하고 완료.

Are you sure you want ot save this key without a passpharse protect it?
putty에서 Connection>Data 에서 Auto-login username에 유저명 입력
Connection>SSH>Auth에서 private key file for authertication 항목에 아까 저장한 ppk 파일을 지정.
제일 중요한 저장!
끝

classpath 접두사에 관한 간단한 정리

작은 거인 — Wed, 6 Nov 2019 09:28:49 +0900

배경

스프링 프레임워크 기준으로 resources 경로에 있는 파일들에 접근할 때 classpath라는 키워드를 사용하곤 하는데, 전부터 이게 뭔지 궁금했다. 우연히 해당 내용에 대해 정리되있는 블로그를 알게되 해당 내용과 실제 프로젝트를 빌드해서 비교해봤다.

본문

classpath가 가리키는 경로부터 말하자면 빌드된 classes 경로를 가리킨다. 그렇다면, classes 경로를 가리키는데 어떻게 개발시 resources 밑에 있던 파일들이 불러와 질까?

war나 jar로 빌드되면 resources 경로 하위에 있던 파일들이 WEB-INF\classes 밑으로 이동하게 된다.

bootJar나 bootWar를 이용하면 비슷하지만 BOOT-INF\classes 밑으로 이동한 것으로 확인된다.

https 사용시 ajax 처리할 때 http로 요청하면 문제점.

작은 거인 — Tue, 9 Jul 2019 21:47:29 +0900

환경

모든 http 8080 요청을 https 8443으로 리다이렉트

문제 상황

기존 뷰 템블릿 코드를 수정하기 귀찮아서 기존과 똑같이 http 8080 포트로 ajax 요청을 하고 있었다. 당연히 8443으로 리다이렉트 될 줄 알았는데, 이상하게 계속 오류가 발생.

해결

ajax 요청을 8443으로 해봤더니 정상 작동.