본문 바로가기

web59

Nuxt 로 Vue 환경세팅 Spring Boot 로 RESTful API 서버는 간단히 구축을 했으니, Front단 구성은 Nuxt 를 이용하여 구현하겠다. React(Next.js) 도 있는데 왜 Vue 를 쓰냐고? 그야 간단하다. 걍 React 보다 쉬워서 ㅋㅋㅋㅋ ES6 문법이 능숙하지 않은 나는 Vue 가 러닝커브가 훨씬 낮았고, .ts(typescript) 같은 경우도 Vue3 가 나오면서 호환성이 훨씬 좋아졌다. 꾸준히 업데이트도 되고있고 랜더링도 빠르다. 그러니 안쓸 이유가 없지! ✔ MAC OS 기준 ✔ Tool : VsCode Vue.js는 프로젝트를 생성하고 관리하는 과정에서 npm(Node Package Manager)을 사용하여 의존성 패키지를 설치하고 관리하기 때문에 Node.js 설치는 필수다. 1. No.. 2023. 8. 31.
Nuxt 란 Nuxt.js는 Vue.js 기반의 프레임워크로서, 웹 애플리케이션을 개발하기 위한 도구다. Nuxt.js는 서버 사이드 렌더링(SSR) 및 유니버설 앱(Universal App)을 지원하며, Vue.js의 기능을 보완하여 더 나은 SEO 및 사용자 경험을 제공하도록 설계되었다. Universal Mode 유니버설모드가 등장한 이유는 서버사이드 렌더링(SSR)이 가지고 있는 단점 때문인데, 가장 큰 단점은 아무래도 서버에서 렌더링을 하다 보니 발생하는 "화면의 깜빡임"이라고 할 수 있다. 하지만 이런 단점을 가지고도 SSR만의 장점을 포기할 수 없었는데, 그래서 나온 게 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 선택하여 새롭게 만들어낸 모드가 유니버설 모드이다. Nuxt 앱을 첫 방문할 때는.. 2023. 8. 31.
DataJpaTest 중 삽질해결 기록.... JPA 로 회원등록 테스트를 하는 도중 자꾸 이 에러가 미친듯이 뜨는게 아닌가 ㅠ @DataJpaTest public class JPATest { @Autowired UserRepository userRepository; @Test @DisplayName("회원가입 테스트") void regUserInfo(){ UserEntity userEntity = UserEntity.builder().id("test") .name("테스트") .password("1234") .birth("601122") .gender("M") .role("ADMIN") .address("서울시") .phone("01077778888") .email("test@test.com") .build(); UserEntity result =.. 2023. 8. 31.
Spring Boot 3.1.x 으로 RestFul API 서버 만들기(3) 저번시간에 이어 JWT를 이용하여 로그인 API를 만들어보고자 한다. 우선 내가 생각한 인증 프로세스는 대략 이렇다. 최초 로그인시에는 사용자의 아이디와 패스워드를 받은 후 검증을 통해 JWT 객체를 반환하고, 이후 또 다른 API 요청시 발급받은 JWT를 함께 보낸다. 1. 먼저 POST /login 을 생성한다. /** * 로그인수행 * @return */ @PostMapping("/login") public ResponseEntity loginSuccess(@RequestBody AuthDto authDto) { TokenDto token = userService.loginProcess(authDto.getLoginId(), authDto.getPassword()); return ResponseEn.. 2023. 8. 31.