• (반드시) 한번에 수행되어야 할 명령들의 집합
• 반대 > 물리적인 실행 단위 : update 등
• 논리적 실행단위 : 계좌이체
• 물리적 실행단위 : update 2회
• 하나의 논리적인 실행을 위해 물리적 실행이 2회 일어나야하는데 둘 중 하나라도 처리되지 않을 경우, 트랜잭션이 깨졌다 라고 할 수 있다.
• spring에서는 DAO에서 jdbc 실행시마다 각각 connection이 연결, 해제 되는 작업이 실행된다.
• 이러면 대용량 트래픽이 있는경우 원치 않는 데이터가 수정되거나, 원치 않는 데이터를 참조하게 되는 문제가 발생할 수 있다.(물리적인 실행 도중 에러가 발생 할 수 있음)
• 이를 해결하기위해 하나의 논리적인 실행 단위에서 발생하는 모든 connection을 하나로 묶어서 모두 성공하여 commit 되었을때 connection이 해제되도록(트랜잭션 완료) 하여 트랜잭션을 관리하게 한다.

@Transaction

• service 단에서 논리적인 업무로직(transaction)을 처리하게 된다.
• 위의 예제에서 atom() 업무에 insert가 2번 수행된다. 둘다 성공하지 않는다면 이 트랜잭션은 실패된다.

Propagation

• 트랜잭션 내부에서 또다른 트랜잭션 처리가 필요하다면 propagation을 활용해 처리할 수 있다.
• 나를 호출한 아이가 transaction을 갖고있다면, 그 트랜잭션이 깨지지 않도록 도와줄게! - SUPPORTS
• requires_new : 나를 호출한 아이가 transaction을 갖고있든 없든 새로운 트랜잭션을 만들어서 먼저 처리할거야!
• 등등

Isolation

• read uncommitted
  • dirty reads are allowed
  • 2개 이상의 스레드가 실행되는 환경에서 다른 스레드에서 수정한 데이터를 commit(or rollback)전에 참조가능한 경우(lock이 없음)
  • lock을 걸지 않고 수행 될 수 있게 하기때문에 성능은 좋아짐
  • 중간에 데이터가 변경되도 상관 없는경우에 사용
• read committed
  • non-repeatable reads phenomenon may occur
  • 사용중인 레코드가 중간에 다른 스레드에서 변경하여 commit한 경우 허용. 다시 그 원래 값을 얻을 수 없다는(non-repeatable) 특징
• repeatable_read
  • 사용중인 레코드는 모두 lock 걸어버림(그동안 다른스레드에서 변경 불가)
  • 기본 설정
• serialization
  • 사용중인 테이블 전체를 lock 걸어버림

• 로그인을 위한 컨트롤러

Tiles 설정(view)

• login은 왜 home.*.*인가?
  • root 디렉토리이지만, 이것을 그냥 *.*으로 설정할 경우, 다른 tiles도 모두 호출되어 문제가 발생할 수 있어으므로 루트 디렉토리의 것만 호출한다는 의미로만 home을 붙인다.(의미상으로 추가한것)

spring security 라이브러리 추가

• spring-boot-starter-security

보안이 필요한 페이지 설정

• 누군 되고 누군 안되는지?

  • auth.ldap
    • DC도메인 컨트롤러에서 WebServer에 유저 정보를 전달하는 프로토콜
  • auth.jdbcAuthentication
    • 데이터베이스에서 유저정보 가져다 쓸때
  • auth.inMemoryAuthentication
    • 유저의 폭이 좁을때. 메모리에 추가해서 사용하는 방식
      • password에 {noop}을 붙임으로써 비밀번호 인코딩을 제거

• 어떤건 되고 어떤건 안되는지

  • http.authorizeRequests()
    • 인증요청을 해야하는 url 매핑 정의
  • antMatchers("url")
    • security를 적용하고자 하는 url
    • 주의사항 : /admin/** >> resouces root 디렉토리까지 모두 탐색함.(그냥 /admin/ 으로 하면 /admin/ 을 포함하는 모든 디렉토리가 해당됨)
  • permitAll()
    • 권한 없어도 모두가 접근가능(anonymous까지)
  • hasAnyRole()
    • 해당 권한을 갖고 있는 사람만 접근 가능
  • anthenticated()
    • 인증이 되어야(로그인) 접근 가능
  • formLogin()
    • loginPage("url") : 인증을 필요로 할때 redirect 할 로그인 페이지 설정
    • loginProcessingUrl("url") : 로그인이 진행중인 URL. 즉, 로그인을 위한 form 데이터를 전송한 url
    • defaultSuccessUrl("url") : 필터에 걸려서 로그인 페이지로 간 것이 아닌, 로그인 페이지로 직접 이동하여 로그인을 한 경우, 로그인 성공시 redirect 되는 기본 url
  • logout()
    • logoutUrl("url") : 로그아웃 요청이 들어간 url
    • logoutSuccessUrl("url") : 로그아웃 성공시 redirect되는 url
    • invalidateHttpSession(true/false) : session 초기화 여부

  

  Cross Site Request Forgery

• get요청을 통해 form을 받고, form 전송을 통해 post요청을 하는데, form을 받아온 사이트와, post요청을 보낼 사이트가 다른경우.

• 해결

  • get요청에대한 응답을 보낼때 key생성 > post요청시 key 검사
  • 또는 csrf().disable();
    • 위의 사진 참고

메인페이지 controller mapping & tiles 정의

• controller mapping

• tiles 정의

로그인 로그아웃 버튼 설정

• spring-security-taglabs 라이브러리 추가

• jsp 태그라이브러리 추가

• spring이 제공하는 expression-based access control 사용하여 ui 조건 검사

  • isAnonymous() : 비인증된 상태인지?
  • isAuthenticated() : 인증된 상태인지?

jdbcAuthentication()

• spring이 지정한 계정정보 : id, password, disabled
• spring이 지정한 권한정보 : id, roleId
  • roleId는 무조건 ROLE_*** 형식으로 DB에서 가져와야함
• 비밀번호가 BCrypt 인코딩 되있다면 검사할때도 같은 인코딩으로 검사 해야함.

@Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        //누군 되고 누군 안되는지?
        auth .jdbcAuthentication()
                .dataSource(dataSource)
                .usersByUsernameQuery("select uid id, pwd password, 1 enabled from Member where uid=?")
                .authoritiesByUsernameQuery("select uid id, 'ROLE_ADMIN' roleId from Member where uid=?")
                .passwordEncoder(new BCryptPasswordEncoder());

    }

• DI 도구
  • dependency(의존성) : 사용하는 부품/모듈/클래스/개체
    • 객체가 다른 객체를 참조하고 있는 경우 의존성을 가짐
• 왜 DI가 필요한가?
  • 인터페이스 : 분리를 위한 도구
    • 간접적으로 사용하게 하는 도구
  • 분리를 통해 인터페이스만 지켜준다면, 원래 본체가 바뀌어도 상관 없음.(두번째 이유)
  • 인터페이스는 병렬적으로 작업이 가능하게끔 해준다.(구현 영역 분리)
  • 인터페이스의 등장으로 병렬작업이 가능한 장점이지만, dependency를 꽂아주기 위해서는 더 상위에서 넣어주는 작업을 해줘야한다.
    • 이를 쉽게 할수 있기 위해서 Spring 이 등장을 했다.

Spring DI 방법

• 지시서 : 객체를 만들어서 컨테이너에 넣어주세요, 그리고 조립도 해주세요
  • xml방식
  • Annotation 방식

현재 Spring

• 엔터프라이즈 애플리케이션을 만들기 위한 플랫폼으로 성장

Today I Learned

• Tiles Preparer
• AuthenticationSuccessHandler

Tiles Preparer

• 레이아웃의 공통된 부분을 준비하는데 사용
• main영역은 컨트롤러를 통해 데이터를 가져오지만, header, aside등과같은 영역은 컨트롤러가 없다.
• 이런 영역에서 필요한 데이터가 있다면?
  • Preparer를 활용

사용자 정보를 사용하는 방법은?

• 세션활용

• 하지만, 기존과 달리 로그인 처리를 우리가 직접 하는 것이 아니라 spring security에서 제공하는 기능을 사용한다

• spring security에 session정보를 넣는 방법이 필요

  • WebSecurityConfigurer에서 successHandler 활용
    • AuthenticationSuccessHandler

• 주의사항

  • successHandler를 통해 로그인시 세션정보 등록을 완료하고, 원래 이동해야할 페이지로 redirect를 꼭 해줘야 한다.
    • 스프링은 returnURL 정보를 세션에 저장해둔다.
      • saved request
    • 세션에서 returnURL정보를 꺼내서 redirect 해주면 됨
  • 로그인 한 사용자의 권한에 따라 페이지 redirect 하기

Today I Learned

• NodeJS 등장
• NodeJS core

NodeJS 등장

• 스크립트가 웹에서만 동작하는 것이 아닌, 외부에서 동작할수 있는 v8 엔진 개발

  • 탈 브라우저

• 브라우저가 아닌 터미널에서 스크립트 인터프리터를 작동 시킬 수 있음

• 이를 이용하여 서버 구현이 가능해짐

• 스크립트는 비동기 형식의 단일 스레드 구조

  • 실행속도가 아주 빠름

• 모듈 단위로 설계

  • 기존 : commonJS module
  • 10버전 이후 : ES module
  • 모듈의 고립성을 유지한 채로, 허가된 것만 가져다 쓸 수 있음

• 파일 시스템(fs)

  • 내장모듈
  • fs.readFile("파일경로","인코딩방식",콜백)

NodeJS core 모듈

• http 모듈 : 웹에서 입출력을 할 수 있음
• fs 모듈 : 파일을 읽어올 수 있음

사용자 입력을 받아 요청을 제공

• request 객체 속성
  • url
  • header 등등
  • 여기서 디렉토리를 읽어서 서버를 구현한다는것은 너무 맨땅에 헤딩
• connect framework(middleware 프레임워크)
  • http갖고있는것 중에서 파일을 읽어서 출력
  • 요청시 파일을 알아서 읽어줌
  • 라우팅도 알아서 해줌
  • 인증, 인코딩 등 수행을 위한 코드 추가/삭제
  • 마치 서블릿에서 필터처럼 사용자에게 view를 제공해주기 전에 보안, 인증 등을 수행하게끔 함
• express(출력)
  • 현재 우리가 사용하고있는 mvc 모델을 그대로 구현해놓은것

Connect 모듈을 이용한 웹 서버 구현

• extensible HTTP server framework for node using plugins

• npm 설치

  • maven같은 아이, 패키지에서 사용하는 모듈들을 관리해주는 역할을 함
  • node package manager
  • 메이븐 저장소에서 dependency들을 다운받듯이 npm 노드 패키지 저장소가 있음. 거기서 모듈을 가져와서 사용
  • $ npm i connect
    • connect 모듈 다운로드
    • connect 모듈이 사용하는 모듈들도 자동으로 설치됨
  • package.json
    • 자동으로 설치되는줄 알았으나, 따로 해줘야함...!! 주의!!
    • 설치한 dependency들의 목록을 관리함.
    • 메이븐처럼 dependency 추가 및 관리 가능

• connect 모듈 사용하기

  • 서버 연결
  • connect().use()를 사용하여 url 매핑
    • req : 응답 정보
    • res : 결과 정보
    • next : 미들웨어 로직 연결해주는 역할(filter chain처럼)

express 모듈을 사용하여 서버 구현

• HTTP
  • networking
  • request, response
  • event
  • listening
• CONNECT
  • middleware
  • static file
  • badyParser
• EXPRESS
  • routing
  • template view engine
  • 웹 개발하는데 사용되는 모든 기능들이 여기에 들어있음(web framework)
    • 파일 업로드
    • 인증
    • 기타 등등
• connect(압축, 인코딩, csrf 공격, static 파일에대한 내용 꽂아넣기) + view 엔진 + routing 기능 포함
• java + tomcat의 관계와 같음
  • 백엔드단(api 제공)
• view 엔진
  • 모델의 데이터를 view에 꽂아주는 역할
• express 모듈 설치
  • $ npm i express
• 서버 실행
• url 매핑
• express 만을 사용하여 서버를 만들 경우, 온전한 http의 기능을 쓰는것이 아닌 express를 통해서 쓰는것이 됨
  • http를 온전히 쓰는것이 아닌 express로 wrapping된 기능만 사용하는 것이 됨
  • 이 경우엔 express를 통해 네트워킹을 하고있음
  • 네트워크 설정을 위해 express와 http를 분리한뒤 나중에 결합해서 사용하는 방식 사용
  • 이 방식을 통해 http의 기능을 맨땅으로 사용 가능하고 + express에 추가된 기능들도 사용할 수 있다.
• routing
  • 스프링에서 컨트롤러가 url매핑과 관련된 작업을 했다면, router를 이용해 url 매핑을 컨트롤러처럼 구현할 수 있다
• express view 엔진
  • ejs : 짜여진 html 코드에 el태그처럼 값을 꽂아넣을 수 있음
  • 다른 view 엔진(jade, pug 등)
    • 기존 html코드에 값을 끼워넣는게 아니고, html코드를 쉽게 generating 해서 값을 꽂아서 사용하는 방식...
    • 대용량 view를 구현하는데 효율적이지 못해보임.
• ejs 설치(view 엔진)
  • $ npm i ejs
• view 렌더링
  • .ejs view 파일 생성
  • expres가 사용할 view 경로 설정
    • express().set()
  • 렌더링
• view 데이터 binding
• 라우터를 활용하여 json 객체를 반환하는 api 만들기

express generator

• nodejs + express를 활용하여 웹 개발을 할때 기본적인 설정을 해둔 상태로 그것을 모듈로 제공한다면? 편리할 것이다.
• http, path, express 등 모듈들의 기본 세팅
• 그것을 제공하는 것이 express generator이다.
• $ npx express-generator [--view=view엔진명] [폴더이름]
  • 현재 디렉토리에 있는 모듈들을 설치해야함
    • $ npm i
• package.json의 scripts에 간편 명령어들을 정의할 수 있다.
  • start : 서버 실행을 위한 명령어
• 주의사항
  • Root 디렉토리(/)의 경우엔 express가 static 문서들을 먼저 참조한다면 index.html을 먼저 찾게됨.
  • 라우터를 먼저 연결해주고 static을 연결 해주면 해결됨

url 매핑 및 view rendering

• controller(router) 만들기
• express가 해당 controller 사용하게 하기(app.js에서)
• controller(router)에서 url 매핑 및 렌더링 설정하기

database 모듈 사용

• 모듈 설치
  • $ npm i mysql
• connection 객체를 통해 query 실행
• view에 값 넣기

데이터베이스 모듈 분리

• 매 라우터마다 데이터베이스 모듈을 사용하는 코드가 있다면 비효율적이다.
• 집중화하여 필요한 곳에 꺼내 쓸 수 있도록 구성한다.

nodeJS와 ReactApp 연동

• Node > ReactApp > Babel > Module(X):WebPack > bundle(배포본) > pure js
• 페이지를 컴포넌트 단위로 쪼개서 갈아끼우는 형식으로 SPA 구현
  • App.js에 각각에 컴포넌트들을 끼워넣고 조립된 것을 리턴
  • index.js에서 그 조립된 App을 사용

페이지 switching

• 컴포넌트를 url에 따라서 switching 해줘야 한다.
• 라우팅 필요
  • $ npm i react-router-dom
• 헤더에 라우팅 링크 설정
• 각 컴포넌트 라우팅(App.js)
• Detail 페이지 설정
  • list 영역과 detail 영역을 switching 하면 됨
• list 영역 데이터 서버에서 불러오기
  • 서버와 클라이언트가 모두 실행중인 상태에서 서버측에 데이터를 요청한다
  • 서버에서 cors 허가가 있어야 서로 다른 도메인에 있는 데이터를 가져올 수 있다.
  • 서버단에 cors 모듈 설치 및 사용(app.js)
    • $ npm i cors
  • 서버단에서 cors를 허용하고싶은 도메인이 따로 있다면 객체 형태로 전송해주면 됨
    • app.use(cors({origin : "도메인주소"});

각 detail 페이지 정보 불러오기

• 서버 api 설정(NoticeController.js)
• detail 페이지를 불러오기위한 Link 설정
• detail api를 통해 데이터를 가져오기
  • Route의 path 정보가 마치 스프링에서 PathVariable처럼 전달된다.
  • props로 전달됨

login

• 입력하는 값 > ref로 current value 가져다 쓰기
• 비밀번호 검증
  • bcrypt로 비밀번호 검증
• 로그인 성공시 페이지 이동

인증이 필요한 url 인터셉터 설정

• AuthorizedRoute 컴포넌트를 구현하여 전역변수에 로그인 정보가 있는지를 검사 한 후 라우트 하게끔

상태정보 유지하기

• state와 같은 전역변수 사용
• Redux 사용

commonJS vs ES6 module

• package.json에서 type 설정
• module.exports vs export & import
• 외부 모듈을 사용할때 왜 ES6 module을 안쓰고 commonJS를 쓰나?
  • 호환성 문제
  • 환경변수(__dirname 등), 등 모듈이 사용하고 있는 기능들이 commonJS를 사용하고 있어서 호환성 문제가 생김

React app 생성

• $ npx create-react-app my-app
• node로 서버 실행 후 react와 연동 가능
• 질문 사항
  • 어떻게 서버가 실행되고 리액트 app과 연동되서 view를 구성하는지?

번외

• 모듈을 설치하기 전, 꼭 package.json 파일 만들어야함
  • $ npm init
  • 만든 다음 모듈 설치하기
• 모듈을 다른곳에서 쓰고싶을때??
  • package.json만 옮겨서 install 해주면 됨

Today I Learned

• 검색 기능
• 페이저 기능

검색기능

• 검색 field와 query 값 설정

  • this.field, query

    • DOM 객체 사용하지 않고, React.createReg() 사용하여 현재 값 가져오기

      constructor(props){
      super(props);
      this.state={
          list:[
              {"id":92032472,"title":"eff","writerId":"newlec","content":"af"}
          ],
          count:0
      };
      
      this.queryInput = React.createRef();
      this.fieldInput = React.createRef();
      
      this.page=1;
      this.field = "title";
      this.query = "";
      

  } ```

• 설정된 field와 query값을 통해 데이터 바인딩

  dataBind(){
      fetch(`/api/notice/list?p=${this.page}&f=${this.field}&q=${this.query}`)
      .then((response)=>{
          return response.json();
      })
      .then((data)=>{
  
          this.setState(data);
      });
  }

• 검색 form

  <form className="table-form">
                                  <fieldset>
                                      <legend className="hidden">공지사항 검색 필드</legend>
                                      <label className="hidden">검색분류</label>
                                      <select ref={this.fieldInput} name="f">
                                          <option  value="title">제목</option>
                                          <option  value="writerId">작성자</option>
                                      </select> 
                                      <label className="hidden">검색어</label>
                                      <input type="text" name="q" ref={this.queryInput}/>
                                      <input className="btn btn-search" type="submit" value="검색" onClick={(e)=>{this.search(e);}}/>
                                  </fieldset>
                              </form>

• onClick 이벤트

search(e){
        e.preventDefault();
        this.query = this.queryInput.current.value;
        this.field = this.fieldInput.current.value;

        this.dataBind();
    }

페이저 기능

• 패이저를 위한 controller 설정

  • list
  • count

• 페이저 start number 설정

  constructor(props){
      super(props);
      this.state={
          list:[
              {"id":92032472,"title":"eff","writerId":"newlec","content":"af"}
          ],
          count:0
      };
  
      this.queryInput = React.createRef();
      this.fieldInput = React.createRef();
  
      this.page=1;
      this.field = "title";
      this.query = "";
      let offset = (this.page -1)%5;
      this.startNum = this.page-offset;
  }

• 페이저 ui

  <ul className="-list- center" onClick={(e)=>{this.pageClickHandler(e);}}>
  {
      [0,1,2,3,4].map((i)=><li key={i+this.startNum}><a className="-text-  " href="?p={i}&f=&q=">{i+this.startNum}</a></li>)
  }
  

• 이전 버튼

  <div>
  {
      this.startNum==1?
      <span className="btn btn-prev" onClick={(e)=>{alert('이전 페이지가 없습니다.')}}>이전</span>
      :<a className="btn btn-prev" href="?p=&f=&q=">이전</a>
  }
  </div>

정리

• react는 2way 바인딩이 없다.
  • 1 way
• component간 데이터 전송
  • props

• view 페이지 delete 버튼과 컨트롤러 매핑

  • 주의사항
    • 삭제버튼 클릭시 바로 삭제요청이 되는것이 아니라 확인창이 뜨게끔 만들어줘야함(script로 구현)

• 서비스, DAO 구현 및 MyBatisMapper 작성

목록 페이지에서 일괄 삭제

• 일괄삭제, 일괄공개 버튼 구별하기

  • submit 버튼에 name값을 주고, value를 서버로 전달시켜서 사용

• 체크박스에 value값을 줘서 삭제하고자 하는 아이템의 id값을 전달

• controller, service, dao 구현

• dao 구현을 위한 MyBatisMapper구현

  • 쿼리의 where 절에 사용할 값으로 배열을 받고있음
    • mybatis가 제공하는 foreach 문을 활용
    • where id in (1,2,3,4,5)와 같은 형태로 만듬

Today I Learned

• React를 활용한 list 페이지 만들기

React를 활용한 list 페이지 만들기

• 기존에 jsp에서 만들던 view에서 react component로 옮길때 jstl, el 태그는 다 지워줘야함

  • jstl , el 모두가 백단에서 jasper가 인식하고 처리하는건데 컴포넌트로 빼서 프론트에서 작업하면 jsx가 jstl, el을 처리할수 없음
  • 서버는 문서를 처리하는 작업을 하지 않음. 그저 js, css 파일만 제공
  • 서버는 데이터를 제공하는 api 만 제공

• 주의사항

  • class > className
  • onclick='string' > onClick={()=>{실행하고자 하는 로직}}
  • input > value 값을 넣을때는 onChange or read-only 필수.

• Ajax로 서버 데이터 가져오기(list)

• state 설정하기

  • 실행순서를 잘 고려해야함
    • constructor > render > DidMount

      constructor(props){
      super(props);
      this.state={
          list:[
              {"id":92032472,"title":"eff","writerId":"newlec","content":"af"}
          ],
          count:0,
          page:1
      };
      }
      

  componentDidMount(){

  fetch(`/api/notice/list?p=${this.state.page}`)
  .then((response)=>{
      return response.json();
  })
  .then((list)=>{
      this.setState({list});
  });

  }

• map()을 활용하여 state값 rendering 하기

  • jsx 코드 안에 스크립트 코드를 넣기 위해 {} 블록을 사용
  • map
    • 값을 순회하면서 지정한 값으로 변경하여 새로운 객체를 생성하여 반환

      {
      this.state.list.map(notice=><tr key={notice.id}>
              <td>{notice.id}</td>
              <td className="title indent text-align-left"><a href={notice.id}>{notice.title}</a>[{notice.cmtCount}]</td>
              <td>{notice.writerId}</td>
              <td>{notice.regdate}</td>
              <td>{notice.hit}</td>
          </tr>)
      }

Today I Learned

• dfdf

덧셈 계산기 만들기 예제

• 만들고자 하는 ui component 단위로 나누기
  • input value = 0으로 초기화

    function app(){
    ReactDOM.render(
        <section>
           <h1>계산기</h1>
           <div>
              <input type="text" dir="rtl" value={0}/>
              <input type="text" dir="rtl" value={0}/>
              <input type="button" value="계산"/>
              <input type="text" dir="rtl" value={0}/>
           </div>
        </section>
      , document.querySelector("#app") 
    );
    }
    app();

• VDOM 부분을 Calc라는 컴포넌트로 분리해서 작성(using function)

  function Calc(){
  return <section>
           <h1>계산기</h1>
           <div>
              <input type="text" dir="rtl" value={0}/>
              <input type="text" dir="rtl" value={0}/>
              <input type="button" value="계산"/>
              <input type="text" dir="rtl" value={0} />
           </div>
        </section>;
  }
  

function app(){ ReactDOM.render( , document.querySelector("#app") ); } app();

  - VDOM 부분을 Calc라는 컴포넌트로 분리해서 작성(using class)

class Calc extends React.Component{ render(){ return

  - state를 이용해서 model값 저장하기
    - 주의사항
      - 닫는 태그 꼭 확인하기
      - 값을 넣을때는 문자열을 빼야함
      - JSX가 지정하는 속성명 사용 (ex. class > className)
      - 1 way 모델링을 준수하기
        - 기존에 mvc 모델에서는 input의 value를 view에서 변경하면 model의 값도 변경이 됬다. 
        - flux(react)는 이런 2 way를 지원하지 않는다. 값이 변경이 되면, 차음으로 다시 돌아와서 model을 변경시켜야 함.
        - 그래서 onChange와 같은 이벤트를 등록해줘야 함

class Calc extends React.Component{ constructor(props){ super(props); this.state = {x:0, y:0,result:0}; }

componentDidMount(){

}

componentWillUnmount(){

}

btnClick(){
    //console.log(this.state.x);
    let {x,y} = this.state;
    this.setState({result:x*1+y*1});
}

render(){
    return <section>
         <h1>계산기</h1>
         <div>
            <input type="text" dir="rtl" value={this.state.x} onChange={(e)=>{this.setState({x:e.target.value})}}/>
            <input type="text" dir="rtl" value={this.state.y} onChange={(e)=>{this.setState({y:e.target.value})}}/>
            <input type="button" value="계산" onClick={this.btnClick.bind(this)}/>
            <input type="text" dir="rtl" value={this.state.result} readOnly/>
         </div>
      </section>; 
}

}

```

React를 활용한 list 페이지 만들기

• 기존에 jsp에서 만들던 view에서 react component로 옮길때 jstl, el 태그는 다 지워줘야함
  • jstl , el 모두가 백단에서 jasper가 인식하고 처리하는건데 컴포넌트로 빼서 프론트에서 작업하면 jsx가 jstl, el을 처리할수 없음
  • 서버는 문서를 처리하는 작업을 하지 않음. 그저 js, css 파일만 제공
  • 서버는 데이터를 제공하는 api 만 제공

Today I Learned

• react 라이브러리
• react state

react 라이브러리 추가하기

• CDN 추가.

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

• Virtual DOM rendering

  • 주의사항 : render안에 들어오는 엘리먼트는 무조건 root 여야함. 2개의 root node가 들어올 수 없음

    function tick(){
    

  ReactDOM.render(

  <section>
      <h1>세계 시간</h1>
      <section>
          <h1>America/Toronto</h1>
          <span>It is {new Date().toLocaleString("en-US",{timeZone:"America/Toronto"})}</span>
      </section>
      <section>
          <h1>Asia/Seoul</h1>
          <span>It is {new Date().toLocaleString("ko-KR",{timeZone:"Asia/Seoul"})}</span>
      </section>
  </section>

  ,document.querySelector('#root')); }

setInterval(tick,1000);

  - 궂이 이걸 쓰는게 무슨 이득이 있나? 
    - 자바스크립트 : 행위만 신경
    - react : ui+행위
    - react는 component 기반으로 이루어져있다.
      - ui별로 component 단위로 나누어서 구현할 수 있다.

function Clock(){ return

function tick(){

ReactDOM.render(
    <section>
        <h1>세계 시간</h1>

        <Clock />
        <Clock />
    </section>

,document.querySelector('#root'));

}

setInterval(tick,1000);

  - 하나의 ui 모양으로 여러개를 만들고자 한다면?
    - 들어가는 내용만 전달해서 바꿔주는 식으로 사용
    - 불러오는 태그에서는 태그스럽게 값을 전달(속성)
    - 그걸 읽어들이는 함수는 함수스럽게 값을 받음
      - 매개변수명은 props로 하는게 좋음.

function Clock(props){ let time = new Date().toLocaleString(props.locale,{timeZone:props.timeZone}); return

function tick(){

ReactDOM.render(
    <section>
        <h1>세계 시간</h1>
        <hr />
        <Clock locale="en-US" timeZone="America/Toronto"/>
        <hr />
        <Clock locale="ko-KR" timeZone="Asia/Seoul"/>
    </section>

,document.querySelector('#root'));

}

setInterval(tick,1000);

  - 조금 더 객체지향스럽게 class로 component 정의하기
    - 생성자 유무에 따른 차이
      - 생성자를 직접 생성 : props를 인자로 받아 직접 사용하므로 this 필요없음
      - 생성자를 사용 X : 해당 클래스로 생성된 객체의 속성을 참조해야하므로 해당 객체라는것을 명확히 짚어줘야함. 그래서 this 꼭 써줘야함

/* class Clock extends React.Component{//객체지향적인 캡슐화 가능 #time; constructor(props){ super(props);//필수 무조건 react.Component에 보내줘야함 this.#time = new Date().toLocaleString(props.locale,{timeZone:props.timeZone}); }

render(){
    return <section>
            <h1>{this.props.timeZone}</h1>
            <span>It is {this.#time}</span>
    </section>;
}

}*/

class Clock extends React.Component{//객체지향적인 캡슐화 가능 render(){ let time = new Date().toLocaleString(this.props.locale,{timeZone:this.props.timeZone}); return

  - 직접 props를 사용하면 좋은 방법이 아니다.
  - 이를 해결하기 위해 state라는 store(버퍼화된 model)의 개념이 나온다.
    - flux의 순서 : dispatcher > store > view 단방향
  - 변화되는 모든 내용들은 state로 관리
    - state가 처음 생성될 때만 '='연산자로 값을 넣어줄 수 있음.
    - 그 다음부터는 set을 통해서 데이터를 쌓아가야함
      - 개인적인 생각으로는 마운트 될때만 state를 새로 생성 가능하고, 그 뒤에는 set으로 쌓아줘야하는 것 같음.
      - 마운트는 처음 생성할때만 됨.
  - setInterval을 통해 렌더링이 수행될 때, 처음에는 객체를 생성하지만, 그 뒤에 실행될때는 render() 메소드만 계속 실행된다.
  - 초기화 작업
    - 생성자
      - 메모리에 올라갈때 초기화 
    - 마운트
      - onload시에 초기화
  - State를 왜 쓰나??
    - 데이터를 1way로 효율적으로 관리하기 위해?

### state를 활용한 예제

class Clock extends React.Component{//객체지향적인 캡슐화 가능 constructor(props){ super(props);//필수 무조건 react.Component에 보내줘야함

    let time = new Date().toLocaleString(this.props.locale,{timeZone:this.props.timeZone});
    let timeZone = props.timeZone;

    this.state = {time,timeZone};

}

tick(){
    let time = new Date().toLocaleString(this.props.locale,{timeZone:this.props.timeZone});
    let timeZone = this.props.timeZone;

    this.setState({time,timeZone});
}

componentDidMount(){//mount 된 후
/*
    setInterval(function tick(){
        let time = new Date().toLocaleString(this.props.locale,{timeZone:this.props.timeZone});
        let timeZone = this.props.timeZone;

        this.setState({time,timeZone});
    }.bind(this),1000);
*/
    setInterval(()=>{this.tick();},1000);
}

componentWillUnmount(){//mount 해제 전
    console.log("will unmount");
}

render(){
    return <section>
            <h1>{this.state.timeZone}</h1>
            <span>It is {this.state.time}</span>
    </section>;
}

}

function tick(){

ReactDOM.render(
    <section>
        <h1>세계 시간</h1>
        <hr />
        <Clock locale="en-US" timeZone="America/Toronto"/>
        <hr />
        <Clock locale="ko-KR" timeZone="Asia/Seoul"/>
    </section>

,document.querySelector('#root'));

} tick();

```

• 코드 분석
  • ReactDOM.render()를 통해 컴포넌트 렌더링
  • 렌더링시 props로 전달한 값을 통해 생성자에서 state 설정.
  • 설정된 state객체 정보를 이용하여 값을 삽입하고 컴포넌트 랜더링
  • componentDidMount : 컴포넌트가 마운트 된 뒤에 실행되는 메소드 --> 컴포넌트 마운트 후에 state의 변화가 필요할 경우 이 메소드에서 로직을 구현한다.
  • state의 변화는 setState 메소드를 통해 수행
  • setState 메소드는 해당 컴포넌트의 re-rendering을 발생시킴
• 주의사항
  • 예제와 같이 setInterval에서 setState를 실행시키기 위해서는 해당 컴포넌트의 this를 통해서 실행해야함.
  • 하지만 일반 function으로는 bind 해주지 않으면 해당 컴포넌트 this에 접근이 안됨.
  • 이를 해결하기 위해서는 bind를 해주거나, ES6 Arrow function을 사용해야함.
    • arrow function은 함수가 실행될 때 this를 새로 정의하지 않음. 바깥 함수 또는 클래스의 this 값을 사용함.
• component, state, attribute

Today I Learned

• Web Socket

Web Socket

• Web Socket URL mapping을 위한 config 클래스 생성

• mapping된 소켓을 다루기 위한 Handler 클래스 생성

• 간단한 ui 구현

• 소켓 연결 설정

• 텍스트만 처리하기 위한 WebSocketHandler 클래스 정의

  • 인터페이스를 구현하여 사용하는 것이 아닌 텍스트만을 처리 하기 위한 어댑터를 상속받아 사용함

• 접속 인원이 여러명일때?

  • 각 세션을 모두 가지고 있는 상태로 메시지를 다루어야한다.
  • thread에 안전하고, thread lock기능을 내포하고 있는 arraylist 사용
    • CopyOnWriteArrayList()

• json형식으로 메시지 데이터 전송

  • 서버에서 json파일을 처리 또는 미러링

Today I Learned

• Front-end Framework 필요성
• MVC <> FLUX
• Vue
• React

Front-end Framework 필요성

• promise를 활용한 Ajax 통신

  • 결과로 promise 객체를 반환함. => then()을 활용하여 데이터 조작 가능

• json 데이터 뽑아내기

• Ajax를 통한 페이지 전환

• 중복이 너무 많다... 해결할 방법은?

  • AngularJS(MISKO)
  • ajax를 통해 가져온 데이터를 DOM 조작할 때 많은 코드라인이 중복이 됨. 이를 해결하기위해 등장
  • MVW(Whatever) 라고 불리움
  • 노드를 조작하는 코드를 제거할 수 있다.

• 프론트 영역에서 MVC 패턴으로 구현하자!

MVC <> FLUX

• mvc : 양방향
  • 개발자는 모델까지만 신경쓰고 작업하면 됨.
  • 사용자가 view에 변화를 주면 그 view의 변화가 model의 변화를 가져오고, controller는 model의 변화를 인지할 수 있다.
  • angular,vue
• flux : 단방향
  • action -> dispatcher -> store -> view
  • view의 변화가 stort을 직접 변경시키지 않음
  • view의 변화는 새로운 action을 낳음(throw)
  • store의 저장소가 다 소진되면 다음 store가 진행되는 방식으로 충돌이 생기지 않음.
  • react

Vue

• mvc 패턴 구현
• DOM 조작을 직접 할 필요 없음.

React

• Flux

• Virtual DOM : render

  • render로 삽입할때, html 태그 사용하기
    • babelJS 사용

Today I Learned

• detail page

detail 페이지 controller

• 상세 페이지에 사용할 모델 저장하기

  • get()
    • 상세 페이지에 표현할 아이템
  • getPrev()
    • 이전글 정보
  • getNext()
    • 다음글 정보

• 쿼리문 작성(mapper)

  • get, getPrev, getNext
    • getPrev : 이전글. 즉, 현재 날짜보다 이전에 적혀진 글 중에서 최 상단에 있는 글을 뽑으면 됨
    • getNext : 다음글. 즉, 현재 날짜보다 다음에 적혀진 글 중에서 최 하단에 있는 글을 뽑으면 됨
      • 최하단의 글을 뽑는 방법 : 정렬을 뒤집어서 최상단을 뽑으면 됨

  

Today I Learned

• Modal

Modal

• alert, confirm과 같은 창을 window가 아닌 새롭게 디자인한 modal 페이지로 만들고자 한다.
• 한번 만들어두면 재사용하기 쉽게 만들 예정

클래스 객체 생성을 통한 modal box 생성

• modal box 생성을 위한 클래스 정의

  

• 정의된 클래스로 객체 생성 후 modal box 생성

  

클래스의 전역함수를 통한 modal box 생성

• constructor와 클래스 내부의 공통분모들을 제거하고, 필요한 기능만을 제공

• 클래스 정의

  

  • 클래스의 static 메소드 호출을 통한 modal box 생성

  

modal box 확인/취소 버튼 기능

• modal box가 열리자마자 값을 리턴하게 하면 안됨

• 그렇다고 결과를 받기까지 메인 스레드를 멈출 수도 없음

• 버튼을 누른 뒤에 결과를 활용하기 위해 callback함수를 전달하고, 완료 후에 전송된 callback을 실행하는 방법을 사용한다.

  • promise를 활용하자!

  

Modal box 등장 effect 부여

• 뒷배경이 서서히 어두워지게 하기

  • 자바스크립트는 실행시 동일 속성들을 모두 모아서 뒤에 적용된 아이만을 실행하는 특성이 있다.
  • 예를들어 같은 함수를 호출하는 경우 내용이 같은건 덮어 씌우기 해서 한번에 실행해버림.
    • setTimeout에 시간을 설정하지 않으면 비동기적으로 연결을 끊어서 서로 다르게 작동하게 만들 수 있음
    • 이 경우에 먼저 위의 set 함수를 실행하고, opacity가 transition을 가지고 변경된다.

• 뒷배경이 어두워진 뒤에 modal box 나타나게 하기

  • 배경의 transition이 종료된 후에 나타나게 만들기

    • addEvent : transitionend

    

Today I Learned

• Drag and Drop
• Upload를 위한 Drag Drop 박스

Drag and Drop

• 드래그 드랍을 위한 박스 2개 만들고, 마우스가 큰 박스 안에서 움직일때 작은박스가 커서와 함께 움직이도록 이벤트 달아주기

  

• 클릭시에만 작은 상자가 커서를 따라다니도록 설정

  

• 상자에서 클릭한 위치 유지한채 드래그 하게 설정하기

  • offset활용(이벤트 객체)

  

• 스크롤바 내릴 시, 스크롤바 만큼 위치가 달라지는 문제 해결 방법

  • 큰 컨테이너 안에서 상대위치 사용하기
  • 천테이너의 offset 위치를 얻어서 box위치를 추가 보정하는 방법
  • 첫번째 방식으로 해결해보자.

  

• 컨테이너가 2개 이상일 때 박스 선택에 따른 드래그 설정

  

재사용가능한 캡슐화

• 주의사항

  • 외부에서 내부 this값을 사용하려 할때는 this를 전달해줘야함.
  • 현재 예시에서는 mouseHandler()가 호출될때 this가 무엇인지를 모름. 그래서 그걸 알려줘야함
    • bind(this)

  

Upload를 위한 Drag Drop 박스

• HTML 드래그 앤 드롭 API

• 사용자로부터 입력을 받기 위한 행위이다.

  

• 드래그 해오는 파일의 정보

  • e.dataTransfer
  • 이 정보를 통해 드래그 파일이 적합한지 유무 검사 가능

  

• 파일 전송을 위한 ajax

  • form태그에서 사용하던 multipart로 파일 전송하기

    • 직접적으로 form태그를 사용하는것이아니기 때문에 api사용
      • FormData API

  • 서버단에서 전송한 formData 처리하기

    • MultipartFile객체를 통해 FormData로 전송한 파일들을 읽어오기

  • 전송 진척도 출력하는 코드 작성하기

    • request.upload.addEventListener("progress")

  • 전송파일 최대 크기 설정방법

    • 개별 최대 크기, 전체 최대 크기 설정
    • resources/application.properties

  • 전송정보 출력하기

    • status

  • 서버로 전송된 파일 저장

    • 파일 전송 경로 설정
    • 전송 경로의 realPath 설정
    • 해당 경로의 존재 유무 파악
      • 존재하지 않을 시 생성
    • 업로드 될 파일위치 설정
    • 업로드 될 파일 위치 설정 후 해당 경로로 File객체 생성
    • 클라이언트로부터 전송된 파일을 uploadedFile로 저장

Today I Learned

• 검색기능 + 페이저

검색기능

• queryString과 기본값을 통한 검색
  • 기본값 설정을 통해 값이 전달되지 않아도 정상적인 쿼리를 실행할 수 있도록 세팅

• 기본값을 사용하지 않고, MyBatis가 제공하는 조건절을 사용하여 쿼리 수행하기
  • 전달된 값이 없는데도 궂이 기본값을 통해서 조회하는 일을 방지
  • Dynamic Query( 동적 쿼리 )
  • 이럴경우 requestParam으로 값을 받는것이 required=false가 되야한다. (default가 true라서 필수)

• 검색카테고리가 많은 경우 <where>를 사용하여 발생될 수 있는 문제들을 해결할 수 있다
  • where만 남겨지는 문제
  • where and 와 같은 쿼리가 되는 문제

페이저

• 전체 페이지 수 불러오기
• Math.ceil(count/size);

• 검색어 유지하면서 페이지 이동

• 다음, 이전페이지

• 페이저 갯수 max 페이지까지만 출력하게 하기

Today I Learned

• xml방식의 MyBatis rowMapping

xml방식의 MyBatis rowMapping

• 2가지 방법
  • select문에서 별칭사용하기
  • resultMap 사용하기(resultMap 정의하고 resultType대신 사용)

날짜 포맷

View 만들기

• view entity와 데이터베이스 컬럼을 mapping시켜서 세팅해주면 됨

• MyBatis는 오버로드를 지원하지 않음
  • 인자가 가장 많은 메소드를 구현하고, 나머지는 구현된 메소드를 기본값으로 채워서 사용하는 방식으로 활용

• 그렇다면 전달된 인자는 어떻게 MyBatis에서 읽어들이는것인가?

  • RTTI Reflection

    • 객체의 메모리(class)를 통해 객체의 상태(정보)를 얻어오는 것
      • .class 또는 getClass()

  • 파라미터 이름 > getter

    • 객체로 파라미터가 전달 될 때에는 getter를 통해 인식하게 된다.
    • 전달되는 이름은 AA, BB이지만 이는 사실 getAA, getBB로 인식

  

  • 하지만 우리는 이것을 약속처럼 param1,2,...으로 사용할 수 있다.

  

QueryString을 이용한 페이저 만들기

• queryString을 이용한 파라미터 전달 및 컨트롤러 적용
  • @RequestParam(name="전달된 변수명", defaultValue="초기값") Integer 사용할변수명
  • Request로 전달된 파라미터를 꺼내는 방법이다.

Today I Learned

• async, await
• promise - then, catch
• ES Module

async, await

• 비동기로 수행되는 함수를 호출하면서 동기적으로 일을 수행하고 싶을때(얼마 안걸릴거같으니 비동기 끝나면 다음거 수행하자) await 키워드를 통해 기다리게 할 수 있다.
• 이 await를 사용하기 위해서는, 해당 비동기 함수를 호출하는 함수가 비동기형이라는것을 명시해줘야한다(async)

promise-then

• then(func1,func2)를 통해 각각 resolve와 reject 결과로 실행 되게끔 해주면 된다.
• 성공과 실패시 각각 인자로 전달된 함수가 실행된다.

• 꼬리에 꼬리를 무는 then
  • then을 활용하여 변환코드, 분쇄코드, 인코딩 코드 등을 수행하고, 그 결과를 출력하는 로직을 만들 수 있다.
  • then을 통해 수행된 결과를 다음 then에게 return으로 넘겨주게 되면, 그 결과를 then으로 호출되는 함수의 인자로 전달한다.
  • 만일 리턴값이 또다른 비동기함수를 호출할 경우, 또다시 promise를 통해 성공 또는 실패에 따라 해당 함수가 실행된다.
  • 에러(예외)를 반환할 경우, 그 다음 then은 reject가 실행되며, catch가 있다면 catch가 실행된다.

• then이 리턴이 없다면
  • undefined value를 가지고 then을 resolve

promise all

• 여러개의 비동기 처리를 한번에 수행하고 싶을때 사용
  • 모두 성공해야 then(resolve) 실행
  • 하나라도 reject 되면 then(reject)실행

ES Module

• 부품 + isolation(고립성)
  • 다른 부품에 영향을 미쳐선 안됨.
  • 자바스크립트는 어디서든 사용 가능했었음...
• 모듈을 동적으로 로드하는 방법이 없다.
  • load 기능이 생기고, 각 모듈별 충돌을 제어할 수 있는 방법이 생김
  • 그게 바로 ES 모듈
• 과거버전 모듈 불러오기
  • 함수이름이 충돌되면 뒤에 불려온 모듈의 함수로 적용됨

• import
  • 함수가 한두개도 아니고, 그 함수가 리턴하는것이 다양함.
    • 단순히 import만을 가지고 함부로 가져다 쓸수 없음(고립화)
  • 허가를 위해서 가져오고자 하는 모듈이 export 설정을 해줘야 함.
  • import하는 모듈이 html에서 호출될때 type을 모듈이라고 설정해줘야함.
  • 또한 import하고자 하는 모듈의 경로를 절대 또는 상대경로로 꼭 지정해줘야함

• 그렇다면 모듈이 변경되거나, 모듈 내의 다른 함수를 import해오고 싶을 때는 어떻게 해야하나?
  • export default, export
    • import t1,{test2,test1} from './module1.js';
    • module1.js에서 export default 된 메소드를 t1이라는 이름으로 import.(이름 임의 변경 가능)
    • module1.js에서 test2,test1이름의 export 함수를 가져옴(이름 임의 변경 불가)
      • 이름 변경을 위해 as로 명명 해줘야함
      • import {test as m2test} from './module2.js';

• 클래스 export & import
  • 클래스답게 new 생성자를 통해 생성하고 사용할 수 있음

• 객체 자체를 노출
  • 전역객체화

• 고립화가 아닌 공개scope에 두고 원할때 꺼내 쓸수 있게 끔 하려면
  • import는 로드시 무조건 가져오게 되는 것
  • 원할때 특정 모듈을 가져오려면?
    • import("./json.js") 함수
    • 서버상에 동적으로 데이터를 요청할 수 있음 (ajax없이)
      • import(./api/notice/list)
  • import() 메소드로 호출된 것은 모두 scope에 들어가게 됨.
    • 고립화가 존재하지 않음.
    • 그저 가져와서 실행하는 것 뿐

• 그렇다면 원하는 함수만 원하는 시점에 가져와서 쓰고싶을 때는 어떻게하나?
  • await import();(with async())
  • 기본적으로 import 함수는 비동기형이다.(메인함수를 잠식시킨채로 다른 함수를 가져와서 실행할 수 없으므로)

await와 then

• 기본적으로 await와 then을 활용하기 위해서는 함수가 promise객체를 반환해야한다.
• async/await를 사용할 경우
  • promise가 await에게 넘겨지면 await은 promise가 fulfill되기를 기다렸다가 해당 값(resolve될 값)을 리턴한다.
  • 만약 promise가 reject되면, reject된 값이 throw됨.

• await는 비동기함수가 실행을 마칠때까지 기다리는 동기화 작업을 한다.
• promise가 await에 넘겨지게 되면, resolve또는 rejecte될 값을 반환(또는 throw)하게 된다
• 이렇게 반환된 값을 then, catch 할 수도 있다.

• 결론
  • await는 비동기함수가 실행을 마칠때까지 기다린다.
  • await를 통해 resolve될 값(객체 등)을 반환 받을 수 있다.
  • then은 promise를 통해서 비동기적으로 값을 반환 받고 그 반환된 값을 이용하고자 할 때 사용한다.
  • 비동기함수의 결과를 사용하기 위해 기존에는 함수를 인자로서 전달하여 위임하는 방식으로 비동기 결과를 통해 얻은 것을 비동기 함수 내에서 사용하곤 했다.
  • 위임을 하는것이 아닌 그 비동기 결과가 나온 뒤에 그 값을 이용하여 어떤 함수를 처리하고자 할때, Promise/then을 사용하는 것이다.
  • 결국, then과, await 모두 비동기 함수 실행결과를 return 받는것은 동일하나, await은 값의 형태로 전달 받고, then은 resolve(또는 reject) 함수의 인자로 전달 받는 차이가 있다.

Today I Learned

• PathVariable
• MyBatis - xml 활용
• 의존성 주입(DI) 3가지 방법

PathVariable

• queryString을 사용하지 않고, 값으로 경로를 바로 지정할 수 있다.
• 매핑은 @RequestMapping("{id}") 과같은 방식으로 설정한다
  • 함수내에서는 id라는 이름으로 전달된 pathvariable 값을 사용하기 위해 이름을 일치시켜야한다
  • @PathVariable("id") Integer id

MyBatis - xml 활용

• 인터페이스에 어노테이션을 덕지덕지 붙여서 구현하는것이 간편하고 좋지만, 만약 MyBatis가 아닌 JDBC를 함께 이용할 경우 해당 인터페이스를 따로 구현해야하고, @Mapper 어노테이션과 같은 MyBatis설정을 다 제거해줘야한다.
• 또한, 인터페이스 함수가 많고, select구문이 복잡해질 경우 코드가 난잡해진다.
• 그래서 인터페이스를 분리 시켜서 구현하는 방법을 쓰기도 한다.
  • xml에 sql과 인터페이스 함수를 매핑 하는 정보를 저장하는 방식
• xml 설정 방법
  • namespace : 구현할 인터페이스 경로 지정
  • resultMap : 컬럼과 엔티티의 속성 매핑 정보 저장
  • select id : 구현하고자 하는 인터페이스 함수명
• xml 장점
  • 쿼리 수정이 쉬움
  • 쿼리가 아무리 길어도 텍스트형식으로 작성되므로 쉬움
  • 인터페이스를 따로 분리시켜둘수 있어서 본래의 취지에 맞음
• xml 단점
  • 인터페이스 함수명, 리턴타입 등 수정이 생기면 바꿔야 할 것이 많아짐
• @mapper, XML 어떤 방식을 이용하든 MyBatis는 인터페이스 구현체를 저장하고 있는 저장공간을 갖고있음
  • 저장소 : factory
  • factory에서 구현체를 가져다 쓸수 있는 도구 : SqlSession
    • '나 지금 뭐 필요해' 하면 전달해줌
    • getMapper("") 매퍼를 꺼내서 반환
    • IoC에 담겨져 있음(MyBatis가 담아둠)

• Dao 인터페이스 구현체에서는 매퍼를 통해 구현한 구현체를 session을 통해 반환 받아서 구현해주면 된다.

의존성 주입(DI) 3가지 방법

• Field DI
  • 멤버변수에서 바로 의존성 주입

• Setter DI
  • setter 메소드에서 의존성 주입

• Constructor DI
  • 생성자에서 의존성 주입

• Autowired는 의존성 주입을 위한 Spring이 제공하는 기능이다.
• 의존성 주입을 위해 IoC에서 해당 객체를 알아서 탐색하고 의존성 주입을 하게된다.
• 이때, spring은 mybatis가 IoC에 넣어둔 SqlSession 객체를 찾아서 DI를 해준다.

Today I Learned

• Symbol
• Promise

Symbol

• 내장 객체 클래스
• 고유한 값을 생성
• 왜 만들었나?
  • 다형성 : 자바스크립트는 태생이 다형성을 갖고있어서 인터페이스를 구현하지 않음
  • 자바스크립트는 함수로 어디든 꽂아서 쓸 수 있음
  • 약속된 '로직을 꽂아서' 사용하기 위해 만듬(인터페이스를 구현하는 목적 처럼)
• 약속된 로직으로서 인터페이스와 같은 역할을 할 수 있게끔 하기 위해 만듬

• Symbol 정리
  • 자바스크립트 내에서 마치 라이브러리를 만드는 것 처럼
  • 약속된 함수를 구현해야만 사용할 수 있는 기능이 있다면?
  • 그 약속을 정의하는 것이 Symbol

Promise

• 자바스크립트는 비동기 작업을 함수의 중첩으로 해결한다.
• 이것을 콜백 지옥이라고 하는데 이로부터 해방될 방법이 없을까?
• 이것이 Promise가 등장한 이유이다.
• 먼저 기존 중첩형식을 보자.

• 마치 DB에서 데이터를 가져오는데 오랜 시간이 걸리는 것 처럼 예제를 만들어주기 위해 비동기 함수인 setTimeout을 사용하였다.
  • 결과 : "get요청 이루어짐" > "메인 스레드~" > (10초뒤)"공지사항 1" 순서로 실행됨
• 10초뒤에 콜백함수가 실행되게 하기 위하여 함수 전체를 인자로 전달하고, 함수의 중첩으로 이를 실행하고 있는 모습을 볼 수 있다.
• 우리는 이를 통해, 인자로 함수를 전달하는 것과, 함수의 중첩을 제거하고 싶은 욕심이 생긴다.

• Promise는 비동기작업의 완료(실패)의 결과를 알려주는 객체이다.
  • 위임함수(인자로 함수가 전달되는것)를 제거 할 수 있다.
• 비동기 작업 처리 완료시 resolve, 실패시 reject 메소드를 실행하게 되는데, 이는 각각 then,catch로 전달된 함수가 실행된다.
• then과 catch를 활용하여 비동기함수들을 연결하여 실행할 수 도 있다.
  • then의 결과로 다음 비동기 함수를 return하는 경우, 실행 결과에 따라 그 다음에 위치한 then 또는 catch가 실행된다.