ㄷ.Vue & Spring Boot: 데이터

1.Spring Boot MySQL연동하기
참고 https://memostack.tistory.com/156#toc-application.properties%20%EC%84%A4%EC%A0%95

Spring Boot 와 MySQL 연동하기 (Maven 프로젝트)

 

2.MySql 다운및 실행: 
참고 https://aspdotnet.tistory.com/1848

mac 환경에서 mysql 설치하기

//설치된 mysql의 폴더로 접근
sim-ui-MacBook-Air:~ shimjaewoon$ cd /usr/local/mysql/bin
//mysql 실행후 컴퓨터 비번 넣기
sim-ui-MacBook-Air:~ shimjaewoon$ sudo ./mysql
//패스워드 수정해야됨
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
//비밀번호 변경
sim-ui-MacBook-Air:bin shimjaewoon$ sudo ./mysql -p패스워드
//접속 성공
mysql: [Warning] Using a password on the command line interface can be insecure.
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 196
Server version: 5.7.18

Copyright (c) 2000, 2017, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

3.MySQL삭제하고싶을때:
참고 https://kim-daeyong.github.io/2019-01-15-mysql-%EC%99%84%EC%A0%84%EC%82%AD%EC%A0%9C/

맥에서 mysql 완전 삭제방법

아래 차례대로 입력하면된다

터미널에 입력
<homebrew 로 MySQL을 설치한 경우>
$ sudo rm -rf /usr/local/var/mysql
$ sudo rm -rf /usr/local/bin/mysql*
$ sudo rm -rf /usr/local/Cellar/mysql

<MySQL 공식 홈페이지의 DMG 파일로 설치한 경우>
$ sudo rm -rf /usr/local/mysql*
$ sudo rm -rf /Library/PreferencePanes/My*
$ sudo rm -rf /var/db/receipts/com.mysql.*

4.MySql WorkBench다운로드받기
참고 https://haddoddo.tistory.com/entry/MAC-MAC%EC%97%90%EC%84%9C-MySQLWorkbenchMySQL%EC%9B%8C%ED%81%AC%EB%B2%A4%EC%B9%98-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9%EB%B2%95

[MAC] MAC에서 MySQLWorkbench(MySQL워크벤치) 설치, 사용법

 

복격적으로 시작하기!

 

- 데이타베이스 만들고 member 테이블 생성 준비 완료

mysql> drop database vueSpring
    -> ;
Query OK, 0 rows affected (0.01 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.00 sec)

mysql> create database vueSpring default character set UTF8;
Query OK, 1 row affected, 1 warning (0.00 sec)

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| vueSpring          |
+--------------------+
5 rows in set (0.00 sec)

mysql> use vueSpring
Database changed
mysql> show tables;
Empty set (0.01 sec)

mysql> create user test_user@localhost identified by 'admin';
Query OK, 0 rows affected (0.01 sec)

mysql> show tables;
Empty set (0.00 sec)

mysql> create table if not exists MEMBER (
    -> PID bigint not null AUTO_INCREMENT,
    -> FIRST_NAME Varchar(200),
    -> LAST_NAME varchar(200),
    -> EMAIL varchar(300),
    -> primary key(PID));
Query OK, 0 rows affected (0.03 sec)

mysql> show tables;
+---------------------+
| Tables_in_vuespring |
+---------------------+
| MEMBER              |
+---------------------+
1 row in set (0.00 sec)

mysql>

//참고 https://memostack.tistory.com/155

<pom.xml>

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.5.3</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>VueSpringProject</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>VueSpringProject</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>11</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web-services</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
		  <groupId>org.springframework.boot</groupId>
		  <artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>
        //https://memostack.tistory.com/155
        //java와 mysql커넥터 의존성 추가
		<dependency> 
			<groupId>mysql</groupId> 
			<artifactId>mysql-connector-java</artifactId> 
		</dependency>
        //https://memostack.tistory.com/154#toc-pom.xml%EC%97%90%20%EB%A1%AC%EB%B3%B5%20%EC%B6%94%EA%B0%80
		<dependency>
			<groupId>org.projectlombok</groupId> 
			<artifactId>lombok</artifactId> 
			<scope>provided</scope>
		</dependency>
        //https://memostack.tistory.com/155
		<dependency>
			<groupId>org.springframework.boot</groupId> 
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

- Lombok참고 https://memostack.tistory.com/18

Spring Boot 롬복(Lombok) 적용 / Gradle과 IntelliJ 사용

- Spring Boot 파일 셋팅완료

[src/main/java]

<demo: UserController.java>

package com.example.demo;

public class UserController {
  
}

<controller: HelloController.java> 

package com.example.demo.controller;

import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.example.demo.vo.User;

@Controller
public class HelloController {
	@RequestMapping("/")
	@ResponseBody
	public User index() {
		final User user = new User();
		user.setUsername("hong");
		return user;
	} //https://memostack.tistory.com/154#toc-pom.xml%EC%97%90%20%EB%A1%AC%EB%B3%B5%20%EC%B6%94%EA%B0%80
	
	//문자열 데이터 반환
	@RequestMapping("api/welcome")
	@ResponseBody
	public String apiWelcome() {
		return "Welcome";
	}
	
	//JSON형식으 ㅣ데이터 반환
	@RequestMapping("api/json")
	@ResponseBody
	public Map<String, String> apiJson() {
		final Map<String, String> map = new HashMap<>();
		map.put("message", "Welcome");
		return map;
	}
	/** 
	 *객체를 JSON형태로 반환한다. 
	 * @return {"유저이름" : "홍"}
	 */
	@RequestMapping("api/user")
	@ResponseBody
	public User apiUser() {
		final User user = new User();
		user.setUsername("hong");
		return user;
	}
}

<controller: MemberController.java>

package com.example.demo.controller;

import com.example.demo.entity.MemberEntity;
import com.example.repository.MemberRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController // JSON 형태 결과값을 반환해줌 (각 메소드에서 @ResponseBody를 작성할 필요없음)
@RequiredArgsConstructor // final 객체를 Constructor Injection 해줌. (Autowired 역할)
@RequestMapping("/v1") // version1의 API
public class MemberController {
	private final MemberRepository memberRepository;
	
	/** 
	 * 멤버 조회
	 * @return
	 */
	@GetMapping("member")
	public List<MemberEntity> findAllMember() {
		return memberRepository.findAll();
	}
//	/** 
//	 * 회원가입
//	 * @return
//	 */
//	@PostMapping("member")
//	public MemberEntity signUp() {
//		final MemberEntity member = MemberEntity.builder()
//				.username("test_user@gmail.com")
//				.name("test user")
//				.build();
//		return memberRepository.save(member); 
//	}
}
//출처: https://memostack.tistory.com/155#toc-Entity 클래스 생성 [MemoStack]

<entity: MemberEntity.java> 

package com.example.demo.entity;

import lombok.*;
import  javax.persistence.*;

@Getter // getter 메소드 생성
@Builder // 빌더를 사용할 수 있게 함
@AllArgsConstructor
@NoArgsConstructor
@Entity(name = "member") // 테이블 명을 작성 JPA를 사용할 클래스를 명시하며, 테이블과 매핑하는 역할을 한다.
public class MemberEntity {
	
	@Id //기본키(Primary Key)라는 것을 명시하는 역할을 한다.
    // MySQL에서 AUTO_INCREMENT를 사용, GenetationType.IDENTITY를 사용
	@GeneratedValue(strategy = GenerationType.IDENTITY) //키값의 자동생성 전략을 설정할 수 있다. (default: GenerationType.AUTO)
	private long pid;
	
	@Column(nullable = false, unique =  true, length = 30) //컬럼의 속성값을 설정할 수 있다.
	private String username;
	
	@Column(nullable = false, length = 100)
	private String name;
	
	public MemberEntity(String username, String name) {
		this.username = username;
		this.name = name;
	}
}

//출처: https://memostack.tistory.com/155#toc-Entity 클래스 생성 [MemoStack]

<vo: User.java>

package com.example.demo.vo;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class User {
	private String username;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}
}
//https://memostack.tistory.com/154#toc-pom.xml%EC%97%90%20%EB%A1%AC%EB%B3%B5%20%EC%B6%94%EA%B0%80

<domain: > 
<repository: MemberRepository.java>

package com.example.repository;

import com.example.demo.entity.MemberEntity;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface MemberRepository extends JpaRepository<MemberEntity, Long>{

}
//JpaRepository를 extends하여 인터페이스 생성

[src/main/resources]

<application.properties>

#spring.datasource.url=jdbc:mysql://localhost:3306/DB명작성?useSSL=false&characterEncoding=UTF-8&serverTimezone=UTC
#spring.datasource.username=본인 환경의 DB 유저명
#spring.datasource.password=본인 환경의 DB 유저의 비밀번호
#spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#
## mysql 사용
#spring.jpa.database=mysql
## 콘솔에 sql 출력 여부
#spring.jpa.show-sql=true
#spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect
#
#
#출처: https://memostack.tistory.com/156#toc-application.properties 설정 [MemoStack]

#server.address=localhost 
server.port=8080

spring.datasource.url=jdbc:mysql://localhost:3306/vueSpring?useSSL=false&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=HyShim0987!@#
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# mysql 사용
spring.jpa.database=mysql
# 콘솔에 sql 출력 여부
spring.jpa.show-sql=true
spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect
# 로깅 레벨
logging.level.org.hibernate=info

# 하이버네이트가 실행한 모든 SQL문을 콘솔로 출력
spring.jpa.properties.hibernate.show_sql=true
# SQL문을 가독성 있게 표현
spring.jpa.properties.hibernate.format_sql=true
# 디버깅 정보 출력
spring.jpa.properties.hibernate.use_sql_comments=true

#출처: https://memostack.tistory.com/156

<static: app.js>

new Vue({
	el: '#listBox',
	data (){
		return {
			items: []
		}
	},
	mounted () {
		axios
		.post('/list')
		.then(response => {
			this.item = response.data;
		})
	}
})

<templates: hello.html>

//표현할 화면구현해야함

<templates: user.html>

//표현할 화면구현해야함
//vue페이지 연결할곳

 

Spring Boot 셋팅 및 서버 실행하기
참조 https://memostack.tistory.com/154

Spring Boot, Maven 프로젝트에 롬복 적용하기

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.5.3)

2021-08-12 16:40:43.932  INFO 1968 --- [           main] c.e.demo.VueSpringProjectApplication     : Starting VueSpringProjectApplication using Java 16.0.1 on EveningBreadui-MacBookPro.local with PID 1968 (/Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject/target/classes started by shy in /Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject)
2021-08-12 16:40:43.934  INFO 1968 --- [           main] c.e.demo.VueSpringProjectApplication     : No active profile set, falling back to default profiles: default
2021-08-12 16:40:44.348  INFO 1968 --- [           main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode.
2021-08-12 16:40:44.358  INFO 1968 --- [           main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 4 ms. Found 0 JPA repository interfaces.
2021-08-12 16:40:44.531  INFO 1968 --- [           main] trationDelegate$BeanPostProcessorChecker : Bean 'org.springframework.ws.config.annotation.DelegatingWsConfiguration' of type [org.springframework.ws.config.annotation.DelegatingWsConfiguration$$EnhancerBySpringCGLIB$$1d44356c] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
2021-08-12 16:40:44.574  INFO 1968 --- [           main] .w.s.a.s.AnnotationActionEndpointMapping : Supporting [WS-Addressing August 2004, WS-Addressing 1.0]
2021-08-12 16:40:44.650  WARN 1968 --- [           main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'tomcatServletWebServerFactory' defined in class path resource [org/springframework/boot/autoconfigure/web/servlet/ServletWebServerFactoryConfiguration$EmbeddedTomcat.class]: Initialization of bean failed; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'servletWebServerFactoryCustomizer' defined in class path resource [org/springframework/boot/autoconfigure/web/servlet/ServletWebServerFactoryAutoConfiguration.class]: Unsatisfied dependency expressed through method 'servletWebServerFactoryCustomizer' parameter 0; nested exception is org.springframework.boot.context.properties.ConfigurationPropertiesBindException: Error creating bean with name 'server-org.springframework.boot.autoconfigure.web.ServerProperties': Could not bind properties to 'ServerProperties' : prefix=server, ignoreInvalidFields=false, ignoreUnknownFields=true; nested exception is org.springframework.boot.context.properties.bind.BindException: Failed to bind properties under 'server.address' to java.net.InetAddress
2021-08-12 16:40:44.658  INFO 1968 --- [           main] ConditionEvaluationReportLoggingListener : 

Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.
2021-08-12 16:40:44.670 ERROR 1968 --- [           main] o.s.b.d.LoggingFailureAnalysisReporter   : 

***************************
APPLICATION FAILED TO START
***************************

Description:

Failed to bind properties under 'server.address' to java.net.InetAddress:

    Property: server.address
    Value: localhost 
    Origin: class path resource [application.properties] - 15:16
    Reason: failed to convert java.lang.String to java.net.InetAddress (caused by java.net.UnknownHostException: localhost : nodename nor servname provided, or not known)

Action:

Update your application's configuration

> 위의 블로그를 통해서 Spring Boot에서 프로젝트 구축하고 우선 실행해보는것을 해보았다. 그러나 아래처럼 자꾸 에러가 발생이 되어 server.address=localhost를 삭제해보니 실행이된다 ...

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.5.3)

2021-08-12 16:38:19.594  INFO 1941 --- [           main] c.e.demo.VueSpringProjectApplication     : Starting VueSpringProjectApplication using Java 16.0.1 on EveningBreadui-MacBookPro.local with PID 1941 (/Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject/target/classes started by shy in /Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject)
2021-08-12 16:38:19.596  INFO 1941 --- [           main] c.e.demo.VueSpringProjectApplication     : No active profile set, falling back to default profiles: default
2021-08-12 16:38:19.957  INFO 1941 --- [           main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode.
2021-08-12 16:38:19.965  INFO 1941 --- [           main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 3 ms. Found 0 JPA repository interfaces.
2021-08-12 16:38:20.111  INFO 1941 --- [           main] trationDelegate$BeanPostProcessorChecker : Bean 'org.springframework.ws.config.annotation.DelegatingWsConfiguration' of type [org.springframework.ws.config.annotation.DelegatingWsConfiguration$$EnhancerBySpringCGLIB$$a664502] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying)
2021-08-12 16:38:20.148  INFO 1941 --- [           main] .w.s.a.s.AnnotationActionEndpointMapping : Supporting [WS-Addressing August 2004, WS-Addressing 1.0]
2021-08-12 16:38:20.318  INFO 1941 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2021-08-12 16:38:20.325  INFO 1941 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2021-08-12 16:38:20.325  INFO 1941 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.50]
2021-08-12 16:38:20.396  INFO 1941 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2021-08-12 16:38:20.396  INFO 1941 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 767 ms
2021-08-12 16:38:20.523  INFO 1941 --- [           main] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Starting...
2021-08-12 16:38:20.672  INFO 1941 --- [           main] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Start completed.
2021-08-12 16:38:20.711  INFO 1941 --- [           main] o.hibernate.jpa.internal.util.LogHelper  : HHH000204: Processing PersistenceUnitInfo [name: default]
2021-08-12 16:38:20.747  INFO 1941 --- [           main] org.hibernate.Version                    : HHH000412: Hibernate ORM core version 5.4.32.Final
2021-08-12 16:38:20.869  INFO 1941 --- [           main] o.hibernate.annotations.common.Version   : HCANN000001: Hibernate Commons Annotations {5.1.2.Final}
2021-08-12 16:38:20.944  INFO 1941 --- [           main] org.hibernate.dialect.Dialect            : HHH000400: Using dialect: org.hibernate.dialect.MySQL5InnoDBDialect
2021-08-12 16:38:21.184  INFO 1941 --- [           main] org.hibernate.tuple.PojoInstantiator     : HHH000182: No default (no-argument) constructor for class: com.example.demo.entity.MemberEntity (class must be instantiated by Interceptor)
2021-08-12 16:38:21.376  INFO 1941 --- [           main] o.h.e.t.j.p.i.JtaPlatformInitiator       : HHH000490: Using JtaPlatform implementation: [org.hibernate.engine.transaction.jta.platform.internal.NoJtaPlatform]
2021-08-12 16:38:21.382  INFO 1941 --- [           main] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default'
2021-08-12 16:38:21.410  WARN 1941 --- [           main] JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning
2021-08-12 16:38:21.583  INFO 1941 --- [           main] o.s.b.a.w.s.WelcomePageHandlerMapping    : Adding welcome page: class path resource [static/index.html]
2021-08-12 16:38:21.726  INFO 1941 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2021-08-12 16:38:21.735  INFO 1941 --- [           main] c.e.demo.VueSpringProjectApplication     : Started VueSpringProjectApplication in 2.351 seconds (JVM running for 7.827)
2021-08-12 16:38:31.791  INFO 1941 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
2021-08-12 16:38:31.791  INFO 1941 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
2021-08-12 16:38:31.793  INFO 1941 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 2 ms

> 실행성공
참고 https://memostack.tistory.com/155#toc-Entity%20%ED%81%B4%EB%9E%98%EC%8A%A4%20%EC%83%9D%EC%84%B1

Spring Boot 에서 JPA 사용하기 (MySQL 사용)

 

> HelloController.java에서 주소 맵핑 결과들

 

 

 

<Spring에서 vue 설치하기>
스프칭안에 뷰를 설치도 가능 : 참고만하기

workspace-spring-tool-suite-4-4.11.0.RELEASE % cd VueSpringProject VueSpringProject % vue create vue --no-git
on ttys001
% ls eclipse-workspace hysim5683 hysim5683.pub nanssam-admin nanussam nanussam-web nanussam-workplace spring - workSpace user
workspace
무제 폴더
% cd documents
? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint) Manually select features
? Please pick a preset: Default ([Vue 2] babel, eslint)
Vue CLI v4.5.13
✨ Creating project in /Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject/vue. ⚙ Installing CLI plugins. This might take a while...

> terminal을 켜서 vue create vue --no-git 를하면 VS Code처럼 설치 같은 방법으로 할수있다.
> npm run serve할때 역시 에러가뜬다 아래처럼 에러가뜨면 해당 실행 페이지로 이도하지 않은것이니 참고하기

shy@EveningBreadui-MacBookPro VueSpringProject % npm run serve
npm ERR! npm ERR! npm ERR! npm ERR! npm ERR! npm ERR! npm ERR!
code ENOENT
syscall open
path /Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject/package.json
errno -2
enoent ENOENT: no such file or directory, open '/Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject/package.json' enoent This is related to npm not being able to find a file.
enoent
npm ERR!
npm ERR!
shy@EveningBreadui-MacBookPro VueSpringProject % npm run serve npm ERR! code ENOENT
A complete log of this run can be found in: /Users/shy/.npm/_logs/2021-08-10T05_33_06_910Z-debug.log
npm ERR! npm ERR! npm ERR! npm ERR! npm ERR! npm ERR!
syscall open
path /Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject/package.json
errno -2
enoent ENOENT: no such file or directory, open '/Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject/package.json' enoent This is related to npm not being able to find a file.
enoent
npm ERR!
npm ERR!
shy@EveningBreadui-MacBookPro VueSpringProject % npm run serve
A complete log of this run can be found in: /Users/shy/.npm/_logs/2021-08-10T05_33_47_726Z-debug.log
> vue-board@0.1.0 serve /Users/shy/Documents/workspace-spring-tool-suite-4-4.11.0.RELEASE/VueSpringProject > vue-cli-service serve
sh: vue-cli-service: command not found
code ELIFECYCLE
syscall spawn
file sh
errno ENOENT
vue-board@0.1.0 serve: `vue-cli-service serve` spawn ENOENT
Failed at the vue-board@0.1.0 serve script.
This is probably not a problem with npm. There is likely additional logging output above. Local package.json exists, but node_modules missing, did you mean to install?

 

일기:
검색이 잘되지않는점이있다. 구글검색방법에대해서 알아보고 제대로 다시 검색하는 능력을 기르자.
시간활용을 조금 더 잘하자 
너무 많은 자료를 모으력한다. 관련없거나 필요없는 자료는 바로 버리도록하자.

 

 

저녁: 

JS날짜포맷 다루기
타이머 / 달력
어레이 / 시간함수