태태코딩

Mapstate Vuex에서 사용하는 state, getter, action, mutation 을 쉽게사용하기 위해 helper가 제공하는 기능중 하나를 소개하겠다. 기본적으로 state는 state: arr[] return this.$store.state.name 이런식으로 길게 작성해야한다. import {mapState} from 'vuex' computed:{ ...mapState(['state이름', 'state이름2']) } 이렇게 하면 위에서 This.stateName을 통해서 바로 사용할 수있는 간편한 다.

ManyToMany * 실무에서 ManyToMany 관계를 사용하는 경우는 거의없다. * => 아래 이유를 설명하겠다. 일단 N:N관계에 ManyToMany 어너테이션을 사용하게된다.사실 상 DB에서 N:N 관계에 정규화된 테이블에 연관을 맺게되려면, 무조건 가운데 테이블을 하나 생성하고 만들게된다.ex) 그렇다면 JPA 에서 ManyToMany는 무엇인가?ManyToMany를 선언하게 된다면, 그냥 저 가운데 테이블이 메핑이 되는 것이다. ex)public member{ @Id private Long id; @ManyToMany @JoinColumn(name = "MEMBER_ID") private List teams; } public Team{ @Id ..

OneToOne DB에서 1대 1관계라고 생각하면 된다. *JPA에서는 OneToOne 어너테이션을 사용하면 되고, 외래키가 있는 곳을 연관관계의 주인으로 설정하면 된다.*public class Member(){ @Id private Long id; @OneToMany @JoinColumn(name = "STAM_ID") private STAMP stamp;}  public class Stamp(){ @Id private Long id; @OneToMany(mappedBy="stamp") private Member member;}  OneToOne 은 엔티티를 가져올때 LAZY로 처리해도 무조건 즉시 로딩이된다.그 이유는 값이 있는 지 확..

OneToMany JPA강의를 듣다 보니 ManyToOne을 반대쪽으로 설정하면 OneToMany다라고 생각했는데 One인 곳이 연관관계의 주인이 되는 OneToMany가 있다는 것을 인지한 후 글로 정리한다. @Entitypublic class Member{ @ID private Long id } @Entitypublic class Team{ @Id private Long id; } 다음과 같이 엔티티를 보았을 때 Member와 Team은 N:1 관계이다.DB에는 Member에 Team의 외래키가 들어있는 상황. Member를 연관관계의 주인으로 보았을 땐 Member에 JoinColum을 두고 관계를 맺으면 깔끔하다.근데 Member에서는 Team에 대한 데이터를 다루고 싶지 않을 때 우..

VUE *vuex = 복잡한 애플리케이션의 컴포넌트들을 단순하게 관리할 수 있다.* ->  flux 패턴으로 복잡한 애플리케이션의 문제점들을 해결하고 있었다.그렇기 때문에vue의 리엑티비티와 flux를 공존할 수 있게 하는 방법을 만들어냈다. Vuex정의: 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리.React의 Flux 패턴에서 기인함. (앱이 커졌을 때 효과적으로 관리할 수 있는 방법)  Vuex 라이브러리중 state(data),getters(computed),mutations( method ), actions(비동기 method) 를 학습하겠다.Vuex를 더 쉽게 코딩할 수 있는 Helper기능이있다.  FluxMVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발..

REIDSWINDOW VER  보통 redis.conf라는 설정파일을 만든다. vi redis.confex) keyword argument1 argument2#redis.conf bind 127.0.0.1port 6379  아래와 같이 기본 포트와 바인드를 설정해준다. 그후 레디스를 실행해 주면 되는데.$bin/redis-server redis.conf와 같은 방식으로 실행해주면된다. 하지만 이게 에러가 날시wich redis-server를 통해서 redis-server의 위치를 확인하고 $/usr/bin/redis-server redis.conf로 선언해주면된다.  $ export PATH=$PATH:/home/centos/redis/usr/bin로 기본 설정을 해놓으면 서버가 켜져있을 때 redis-..

const & let - 새로운 변수 선언 방식블록 단위로 변수의 범위사 제한 되어있음, { } const -> finallet -> 선언한 값에 대해서 다시 선언할 수 없음 const a =10;a =20; //오류var c = 10;c = 20; //동작let a = 10;let a = 20; //오류a= 30; // 가능하다. ES5의 특징 - 변수의 Scopevar sum = 0;for(var i =1; i for문 안에서 선언했어도 밖에서도 값을 구경할 수 있다. Hoisting -> 끌어올려진다.function willBeOveridden(){ return 10;}willBeOveridden(); //5//함수 선언문function willBeOveridden(){ return 5;}//함수 ..

모달 컴포넌트 slot -> vue의 기능: 특정 컴포넌트의 일부 부분을 재사용하게 해준다.실제 사용 부분에서 오버라이딩 해준다면 , 그 값으로 바뀌게된다.  트렌지션list에 따라서 리스트에 트렌지션 기능을 주는 부분.ES6vue js를 간단하고 편하게 해주는 문법. (시간을 절약할 수 있다.)const & let , Arrow Function, Enhanced Object Literals, Modules를 학습. -> 나머지는 추후에 Vuex를 할때 사용. ECMAScript 2015와 동일한 용어이다. Vue는 ES6를 잘 몰라도 되겠지만, 피해가는 것은 좋은 기술들이 있는데 쓰지않는 것과 같다.(정말 좋은 기술이다.) BabelES6는 모든 브라우저에서 지원되는 것이아니다. -> babel로 tr..

기본 컴포넌트   Todo App을 관리하기 위하여 각각 Input부분과 List부분에 배열을 넣어주어 localStorage에 저장하는 코드로 작성을 해보았다. 문제점이 바로바로 로딩이 안된다는 것이였다. 그렇기 때문에 배열을App.vue에  놓아두고 Input과 List의 기능들이 emit을 통해서 이벤트를 일으키면 그에 맞게 localStorage를 변형시키고 ,App.vue 에 있는 배열을 즉각 갱신하여 이 단점을 보완했다.

싱글톤 패턴싱글톤 패턴이란 클래스의 인스턴스가 딱 1개만 생성되는 것을 보장하는 디자인 패턴이다. public class SingletonService { private static final SingletonService instance = new SingletonService(); public static SingletonService getInstance() { return instance; } private SingletonService() { }} 위의 코드와 같이 인스턴스를 하나 고정해서 생성한 후에 getInstance 메서드를 통해서 인스턴스를 사용한다. 싱글톤의 단점1.  의존성이 높아진다.2.  private 생성자 때문에 상속이 어렵다.3.  테스트하기가 힘들다. 싱글톤..