Developer_kade

모든 언어에서 무조건 사용이 되는 반복문과 조건문을 코틀린에서는 어떻게 사용하는지, 또 다른 언어와의 차이점이 있는지 확인해보자.

• 반복문
  
  • 특정 로직을 반복적으로 작성해야 할 때 주로 사용된다.
  • 간단한 while문 먼저 살펴보자.

    • var cnt: Int = 0
      while(cnt <= 10) {
      	cnt++
      }
      
      do{
      	cnt++
      } while(cnt <= 20)

    • while과 do-while로 사용할 수 있는데 do-while의 경우 먼저 실행 후 while(조건)을 확인한다는 특징이 있다.
  • 코틀린에서는 for문의 사용방법이 매우 다양하다. 필요에 따라 알맞게 사용하면 될 듯하다.

    • val size: Int = 10
      
      for(i: Int in 1..10)
      for(i: Int in i..size)
      for(i: Int in 1 until size + 1)

      • 위의 for문은 모두 1~10까지 반복하게 된다. (until의 경우 우측의 값 전까지 반복하게 된다.)

    • for(i: Int in 1..10 step(2))

      • step키워드를 통해서 2씩 증가시킬 수 있다.(i 에는 1, 3, 5, 7, 9가 차례대로 할당됨)

    • for(i: Int in 10 downTo 1)
      for(i: Int in 10 downTo 1 step(2))

      • downTo를 사용하면 좌측의 값부터 우측의 값까지 1씩 감소하면서 i에 할당된다.
      • step을 사용할 경우 step의 값만큼 빼면서 할당한다.(10, 8, 6, 4, 2)

    • val array: IntArray = intArraysOf(1, 2, 3, 4, 5)
      
      for(i: Int in array)

      • for문을 제일 많이 사용하는 배열의 경우 in을 통해 넣어주면 하나씩 꺼내서 할당해 준다.
      • 자바의 향상된 for문 혹은 자바스크립트의 for-in을 생각하면 좋다.
  • 파이썬, 자바스크립트와 같은 동적 언어를 많이 다뤄봤다면 매우 익숙한 문법이겠지만 자바와 같은 동적 언어로 프로그래밍에 입문을 했다면 다소 불편할 수도 있지만 적응하면 잘 사용할 수 있다고 생각한다.
• 조건문

  • if(true)
    else if(false)
    else

    • 일반적으로 많이 사용하는 조건문이다. 코틀린에서도 동일하게 사용이 가능하다.

  • val foo: String = when(value) {
    	1..5 -> {"hello"}
        10 -> {"hi"}
        else -> {"bye"}
    }

    • 다른 언어가 가지고 있는 switch case문과 매우 유사하지만 {}를 통해 범위를 제어하기 때문에 break가 필요하지 않다.
    • 또한 결과를 바로 리턴 받아 사용이 가능하다.

코틀린에서는 자바보다는 자바스크립트와 비슷하게 변수를 사용한다.(더 자세하게는 타입 스크립트와 닮은 듯하다)

변수를 선언할 때는 크게 두 가지를 사용할 수 있다.

• val
  • 자바스크립트의 const를 생각하면 이해하기 쉽다.
  • 자바에서는 final. 즉, 상수를 생각하면 된다.
  • 재할당이 불가능하다.
• var
  • 자바스크립트의 let을 생각하면 이해하기 쉽다.
  • 자바에서는 일반 변수를 생각하면 된다.
  • 재할당이 가능하다.

• 사용 방법

  • val a: String = "hello"
    var a: String = "hello"

  • 제일 기본적으로 변수를 선언하는 방법이며 val의 경우 재할당은 불가능하다.
  • 타입은 값을 할당했을 경우에는 생략이 가능하다.

  • val a = "hello"
    var a = "hello"

  • 할당된 값을 코틀린이 확인 후 자동으로 타입을 매치해주기 때문에 위의 경우는 가능하지만 값을 처음에 입력하지 않는 경우에는 불가능하다.

  • var a: String? = null
    a = "hello"

  • null은 다음 포스팅에서 설명...

• 탄생 배경
  • 2011년 7월 Intellij를 만든 JetBrains사에서 JVM위에서 작동하는 크로스 플랫폼 오픈소스 프로그래밍 언어를 공개했다.
  • 파일의 확장자는. kt 혹은. kts를 사용한다.
  • 스칼라를 제외한 대부분의 언어들에는 몇몇 기능이 없었고, 스칼라에는 느린 컴파일 시간이 단점으로 있었다.
  • 코틀린의 이름은 러시아의 섬 중 하나인 코틀린 섬에서 따왔다.
• 장점
  • 자바와 같은 환경에서 개발이 가능하다.
  • 객체지향이면서 동시에 함수형 프로그래밍이 가능하다.
  • 널처리가 안정적이다.
  • 동시성 프로그래밍
• 단점
  • 자바에비해 컴파일 속도가 상대적으로 느리다.
  • 학습 생태계가 작다.(정보를 얻을 수 있는 커뮤니티 등이 부족하다.)
  • 자바의 기존 라이브러리 활용이 어려울 수 있다.

-- data를 delete했을때 복구시켜야 할 경우
FLASHBACK TABLE [table name] TO timestamp sysdate - 10/24/60;

-- flashback이 버전이 낮아서 사용이 불가능 할 경우
SELECT * FROM [table name] AS OF timestamp(systimestamp - INTERVAL '10' minute);

• localStorage에 저장

  • // 로컬스토리지에 토큰 저장
    localStorage.setItem("itemName", token)
    
    // 로컬스토리지에 토큰 가져오기
    const token = localStorage.getItem("itemName")
    
    // 로컬스토리지에 토큰 삭제
    localStorage.removeItem('itemName')

• 새로고침시에 토큰 검사

  • beforeCreate() {
    	this.$store.dispatch("토큰 검사")
    }

//File Download
	// import org.springframework.http.MediaType
	// import org.springframework.core.io.Resource;
	// import org.springframework.http.HttpHeaders;
	// APPLICATION_OCTET_STREAM_VALUE => download할 수 있는 mime type
	// User-Agent : HTTP Header Message 중 디바이스의 정보를 제공
	//				(웹 브라우저의 종류, 모바일, 데스크탑)
	//				IE에서 처리시 따로 처리가 필요함
	@GetMapping(value = "/download", 
				produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
	public ResponseEntity<Resource> downloadFile(@RequestHeader("User-Agent") String userAgent,
			String fileName) {
		// file 위치
		String path = "/Users/andaegeun/Desktop/dditSpring/springProj/src/main/webapp/resources/upload/";
		
		logger.info("download file : " + fileName);
		
		Resource resource = new FileSystemResource(path + fileName);
		
		// 파일이 없을때
		if(!resource.exists()) {
			//jsp에서 에러페이지로 넘기기
			return new ResponseEntity<Resource>(HttpStatus.NOT_FOUND);
		}
		
		logger.info("resource : " + resource);
		
		//file명 가져오기
		String resourceName = resource.getFilename();
		//file명이 한글이면	
		HttpHeaders headers = new HttpHeaders();
		
		try {
			String downloadName = null;
			
			
			if(userAgent.contains("Trident")) {// Trident : IE version 11
				logger.info("IE browser");
				downloadName = URLEncoder.encode(resourceName, "utf-8").replaceAll("\\+", " ");
			} else if(userAgent.contains("Edge")) {// Edge
				logger.info("Edge browser");
				downloadName = URLEncoder.encode(resourceName, "utf-8");
			} else {
				logger.info("Chrome browser");
				downloadName = new String(resourceName.getBytes("utf-8"), "ISO-8859-1");
			}
			
			// 첫번째 파라미터 Content-disposition : 다운로드 시 저장되는 이름
			// 두번째 파라미터 attachment;filename= : 한글일 경우 utf-8로 인코딩 해주기 위해서 잡아줌
			headers.add("Content-disposition", "attachment;filename=" + downloadName);
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		
		// ressource : 첨부파일 객체
		// headers : 파일명 처리 정보
		return new ResponseEntity<Resource>(resource, headers, HttpStatus.OK);
	}

• mitt
  • npm install mitt

  • import {createApp} from 'vue'
    import App from './App.vue'
    import mitt from 'mitt'
    
    const emitter = mitt()
    const app = createApp(App)
    app.config.globalProperties.emitter = emitter
    
    app.mount('#app')

  • main.js파일에 mitt을 import해준 후 globalProperties.emitter에 mitt을 넣어줍니다.
  • 사용법
    • 데이터 전송

      • this.emitter.emit('이벤트 명', data)

    • 데이터 수신

      • this.emitter.on('이벤트 명', data => {
        	// data안에 수신한 데이터가 들어있음
        })

• vuex
  • https://next.vuex.vuejs.org/ 참고
  • npm install vues@next --save
  • store.js파일 생성

    • import {createStore} from 'vuex'
      
      const store = createStore({
      	state() {
          	return {
              	name : 'kade'
              }
          }
      })
      
      export default store

    • state() == data() 이렇게 생각하면 됩니다.
    • 사용법

      • <template>
        
        	<h1>{{$store.state.name}}</h1>
            <!-- kade출력 -->
        
        </template>​

  • main.js에 store.js등록

    • import store from './store.js'
      
      app.use(store).mount('#app')

  • store에 있는 state는 외부에서 변경이 가능하지만 그렇게 변경을 하게되면 어디에서 변경이 일어났는지 추적이 어려움
  • 유지보수 혹은 디버깅등을 위해 데이터 수정을 위한 함수를 정의하면 된다
    • mutations

      • const store = createStore({
        	state() {
            	return {
                	isClick : false
                }
            },
            mutations : {
            	clickFunc(state, data) {
                	//data에는 전송받은 데이터가 들어있음
                	state.isClick = !state.isClick
                }
            }
        })

    • 사용법

      • <template>
        
        	<h1>{{$store.state.isClick}}</h1>
        	<button @click="$store.commit('clickFunc', '전송할 데이터가 있으면 넣어줌')">click</button>
            
        </template>

  • ajax, axios등 서버로부터 데이터를 요청해야 할 경우 actions에 함수를 만들어주면 된다

    • const store = createStore({
      	state() {
          	return {
              	name : 'kade'
                  age : 0
              }
          },
          mutations : {
          	nameChange(state, changedName) {
              	state.name = changedName
              },
              ageChange(state, changedAge) {
              	state.name = changedAge
              }
          },
          actions : {
          	getAgeFromServer(context) {
              	axios.get('URL')
                  	.then(data => {
                      	context.commit('nameChange', data.age)
                      })
              }
          }
      })

    • 컴포넌트에서 actions안에 함수 호출 방법
      • $store.dispatch('함수 명')
• mapState, computed, composition, pwa등 추가 기능도 있다...

• ajax라이브러리
  • 비동기통신시에 사용할수 있는 라이브러리
  • npm install axios : 설치 필요

  • import axios from 'axios'
    
    axios.get('데이터 요청 할 url')
    	.then(res => {
        	// 요청 성공시 실행할 코드
            // res 서버에서 보내준 데이터가 담겨있음
        })
        .catch(e => {
        	// 요청 실패시 실행할 코드
            // error코드가 담겨있음
        })

  • api통신시에 get, post, put, delete를 사용한다
    • get : 데이터 요청(DB에서 select)
    • post : 데이터 입력 요청(DB에서 insert)
    • put : 데이터 수정 요청(DB에서 update)
    • delete : 데이터 삭제 요청(DB에서 delete)
    • 서버에 요청을 하면서 데이터를 보낼때

      • axios.post('url', data)
        	.then()
            ...

      • data부분에 서버에 요청과함께 데이터를 보낼 수 있다.