수업 & 공부 (65) 썸네일형 리스트형 (Vue.js환경 만들기 3) Springboot + Vue create Springboot는 이때까지 작업한 MySpringbootApi 를 사용해볼것 (안되면 새로 만들어야함..) vue cli로 src 디렉토리 아래에 vue.js 프로젝트를 하나 만들어 볼것이다 1. Vue create vue create 기능은 CLI 3.xx 버전부터 지원한다고 한다.. 바로 이전에 2.xx버전을 다운받았지만 참고하는 글과 같은 환경을 만들기 위해서 npm을 uninstall하고 다시 install 한다 (여기선 Vue3버전을 사용했지만 Vue 2버전을 설치하자..) 다시 Springboot 프로젝트의 src아래에 vue create frontend를 생성하자 -> default로 시작하면 새로운 프로젝트가 시작된다 만약 intellij Terminal에서 vue 버전을 확인할때 오류.. (Vue.js환경 만들기 2) Vue -cli 설치 및 프로젝트 생성 Vue -cli 여기서 CLI 란 ? 명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. Vue project 실행을 보면 더 쉽게 이해될것 그렇다면 vue-cli 는 기본 vue 개발 환경을 설정해주는 도구라고 볼 수 있다. 1. vue-cli 설치 Node.js 환경변수 설정까지 마치고 이제 vue -cli를 설치한다 vue는 현재 2가지 버전에 대한 설치를 제공한다. 2.x와 3.x 버전이 있는데 2.x 버전이 안정화 되어있고 많이 사용한다고 한다. 따라서 2.x 버전 설치! ver 2.x : npm install vue-cli -global ver 3.x : npm install @v.. (Vue.js환경 만들기 1) Node.js -npm 설치 1. Node.js 설치하기 Vue.js 를 사용하기 위해서 Node.js(npm) 를 설치해줘야한다. npm은 Node.js - Package - Manager 즉 Node.js 로 만들어진 프로그램을 쉽게 설치 등을 도와주는 것이다 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 원하는 버전을 선택하여 다운로드 신뢰도가 높은 LTS 버전을 다운로드 했다 2. node.js & npm 버전확인 cmd창에서 설치된 폴더로 이동하여 다음 명령어를 입력 아직 환경변수를 설정하지 않아서 설치된 폴더로 이동하여 version을 확인. node -v npm .. 57 : @Transactional @Transactional 이란? 스프링에서는 트랜잭션 처리를 지원하는데 그중 어노테이션 방식으로 @Transactional을 선언하여 사용하는 방법이 일반적이며, 선언적 트랜잭션이라 부른다 @RequiredArgsConstructor @Service @Slf4j public class CommentJpaService { public final CommentRepository commentRepository; public final BoardRepository boardRepository; @Transactional public CommentDTO postComment(CommentDTO commentDTO) { @Transactional 의 역할은? 데이터베이스의 상태를 변경하는 작업 또는 한번에 수행.. 54 : [Java] Optional 이란? (추가예정) 1. Optional이란? Optional 클래스를 사용해 NPE를 방지할 수 있도록 도와준다. Optional는 null이 올 수 있는 값을 감싸는 Wrapper 클래스로, 참조하더라도 NPE가 발생하지 않도록 도와준다. 클래스이기 때문에 각종 메소드를 제공해준다 null인지 아닌지 체크하는 분기문이 없어서 가독성이 좋다 명시적으로 해당 변수가 null일 수도 있다는 가능성을 표현할 수 있다 NPE : 많이 발생되는 예외 중 하나 NullPointerException 메서드가 반환할 결과값이 ‘없음’을 명백하게 표현할 필요가 있고, null을 반환하면 에러를 유발할 가능성이 높은 상황에서 메서드의 반환 타입으로 Optional을 사용하자는 것이 Optional을 만든 주된 목적이다 1. isPresen.. 52 : @Entity, @Builder, @GeneratedValue @Entity @Entity가 붙은 클래스는 JPA가 관리하는 클래스로, 해당 클래스를 엔티티라고 한다 JPA를 사용해서 테이블과 매핑할 클래스는 반드시 @Entity 를 붙여야 한다 [주의사항] 기본 생성자 필수이다. 파라미터가 없는 public 또는 protected 생성자가 필요하다. final 클래스, enum, interface, inner 클래스는 엔티티로 사용할 수 없다. DB에 저장하고 싶은 필드에는 final을 사용할 수 없다. (출처 : https://gmlwjd9405.github.io/2019/08/11/entity-mapping.html) @Table @Table은 엔티티와 매핑할 테이블을 지정하는 것이다. @Table 속성 @Table(name = "Board") 매핑할 테이블 .. 48 : REST API (2) 39 : Springboot (Rest API - @PathVariable ) @PathVariable URL 경로에 변수를 넣어주는 어노테이션이다. 항상 Rest API는 httpMethod를 기준으로 URL 분류 > URL 분류를 간략화 해준다. 여기서 Rest API? (분명 들었는데 기억이 나지 않는다...) “Represe.. dwc04112.tistory.com 이어서... REST API를 쓰는이유 클라이언트 쪽에 JSON방식으로 데이터를 주기 위함이다 (서버에서 클라이언트 에게 JSON방식으로 데이터를 주려면 @ResponseBody 어노테이션을 사용) JspMVC에서는 web browser - server 만 생각했었다. android app OR ios app 등에서 사용할 데이터를 S.. 47 : Springboot(token로그인 환경 만들기) 추가된 파일 member member memberRepository Role security - controller JwtAuthenticationController MemberController - service JwtUserDetailsService SpringbootApiApplication passwordEncorder 추가 pom & ddl파일 추가 POSTMAN IMPORT 1. File > Invalidate Caches 실행하기 2. collections > import 받은 collection과 Environment 적용하기 적용한 파일명 SpringbootApi.postman_collection.json SpringbootApi[local].postman_environment.json .. 이전 1 2 3 4 5 6 ··· 9 다음
