2023년 8월 2주차 회고록

 

 

 

유용한 사이트

자바스크립트 (한글 사이트)

JavaScript | MDN

 

JPA (영문 사이트)

 

Spring Data JPA - Reference Documentation

 

 

 

 

---

 

 

 

 

 

 

자바스크립트 indexOf 대신,  includes() 

indexOf 함수는 매개변수로 받은 내용이 몇번째 인덱스에 발견되었는지, 해당 번호를 숫자로 반환해주는 함수이다.

따라서, 다음과 같이 사용하는 경우가 일반적이었다.

<script>
/*
    str 변수 내용에서  world가 몇번째 인덱스에서 발견되었는지 숫자로 반환 (없으면 -1 반환)
    따라서, 반환된 숫자가  -1 이 맞는지  if - else 를 통해서 분기처리
*/
const str = "hello"
const result = str.indexOf("world")
if ( result === -1) {
    console.log("world 단어를 발견하지 못했습니다")
} else { // 단어가 발견된 index가 존재할때 
    console.log("world 단어가 발견된 인덱스 번호는 " + result + " 입니다")
}
</script>

 

includes()

그런데, includes() 함수를 사용하면 다음과 같이 작성할 수 있었다 .. !

<script>
/*
    str 변수 내용에서  world가 몇번째 인덱스에서 발견되었는지 숫자로 반환 (없으면 -1 반환)
    따라서, 반환된 숫자가  -1 이 맞는지  if - else 를 통해서 분기처리
*/
const str = "hello"
const result = str.includes("world")
if ( result === false ) {
    console.log("world 단어를 발견하지 못했습니다")
} else { // true일때
    console.log("world 단어가 발견된 인덱스 번호는 " + result + " 입니다")
}
</script>

 

 

 

---

 

 

 

 

 

 

 

JSON 형식으로 작성한 key : value 초기화하는 방법

가장 먼저 떠올릴 수 있는 방법으로,  다음과 같이 작성하면 key 에 해당하는 value 값들을 모두 초기화해줄 수 있다.

<template>
    <div>
        
        <!-- 
            form 태그안에 v-model로 searchKeywords.title, searchKeywords.content .. 를 사용 ,
            초기화 버튼 누르면 resetBtnClick 함수가 실행된다 가정
        -->
        
    
    </div>
</template>

<script setup>
import { ref } from 'vue'
const searchKeywords = ref({
    'title' : ''
    , 'content' : ''
    , 'writer' : ''
})

// 초기화 버튼 눌렀을때
const resetBtnClick = () => {
    searchKeywords.value.title = ''
    searchKeywords.value.content = ''
    searchKeywords.value.writer = ''
}
</script>

 

 

 

Object.keys()

하지만, 개발 이후에 key 가 많을경우와 key 이름이 변경될경우 등 ..

추후 확장성을 고려하여  다음과 같이 Object.keys() 함수와 forEach 반복문을 사용해주는 방법이 있다 !

그럼  key 이름이 바뀌거나, key 개수가 늘어나더라도 일일이 하드코딩하지않아도 되서 편해진다 👏👏

 

<template>
    <div>
        
        <!-- 
            form 태그안에 v-model로 searchKeywords.title, searchKeywords.content .. 를 사용 ,
            초기화 버튼 누르면 resetBtnClick 함수가 실행된다 가정
        -->
        
    
    </div>
</template>

<script setup>
import { ref } from 'vue'
const searchKeywords = ref({
    'title' : ''
    , 'content' : ''
    , 'writer' : ''
})

// 초기화 버튼 눌렀을때
const resetBtnClick = () => {
    Object.keys(searchKeywords.value).forEach((key) => { searchKeywords.value[key] = '' });    
    //searchKeywords.value.title = ''
    //searchKeywords.value.content = ''
    //searchKeywords.value.writer = ''
}
</script>

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

페이지 이동 전, 원하는 코드를 실행하는 방법

onBeforeRouteLeave((to, from, next) => {   })

페이지 이동되기 전,  내가 원하는 코드를 실행시킬 수 있다. 

 

<template>
  <div>  
      <button @click="btnEvent">테스트</button>      
  </div>
</template>

<script setup>
// 라우터 준비
import { useRouter, onBeforeRouteLeave } from 'vue-router';
const router = useRouter();

// 버튼 누르면 hello 라는 주소로 이동하기
const btnEvent = () => { router.push('hello') }

// 라우터 훅 걸기 ( hello 주소로 넘어가기 전 )
onBeforeRouteLeave((to, from, next) => {    

    console.log(from.path) // 원래있던 페이지의 경로
    console.log(to.path) // 이동할 페이지의 경로

    next(); // next() 함수를 생략하면 페이지 이동이 안된다.
})
</script>

next() 함수 대신,  return true 및 return false으로 페이지 이동을 제어하는 방법도 있다.

 

 

onBeforeRouteLeave((to, from) => {   })

next() 함수 대신,  boolean 타입 리턴으로 페이지 이동 제어하기 

<template>
  <div>  
      <button @click="btnEvent">테스트</button>      
  </div>
</template>

<script setup>
import { useRouter, onBeforeRouteLeave } from 'vue-router';
const router = useRouter();

const btnEvent = () => { router.push('hello') }
onBeforeRouteLeave ((to, from)  => {  
  if ( confirm(from.path + '에서 ' + to.path + '로  이동할까요?') == true ) {    
    return true // 이동하기 

  } else {
    return false // 현재 페이지에 머물기 
  }
})
</script>

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

NVM (node version manager)

간혹 라이브러리중 특정 Node.js 버전혹은, 그 이상에서만 사용할 수 있는 경우가 있다.

이런 경우에 간편하게 Node.js의 버전을 변경할 수 있는게 NVM (node version manager)이다 .. !

 

 

 

 

NVM 설치는 아래 링크로 이동해서,  Assets 메뉴에 있는 nvm-setup.exe 파일을 다운로드후 실행해주었다.

Releases · coreybutler/nvm-windows

nvm 관련 명령어들 
nvm install 버전 : 원하는 버전의 node.js을 설치할 수 있다 (예시: nvm install 16.17.0)
nvm ls : 내 컴퓨터에 설치된, 사용가능한 node.js 버전들 확인할 수 있다.
nvm use 버전 => 내 컴퓨터에 설치된 node.js 버전중 사용하고 싶은 버전을 입력 (예시 nvm use 16.17.0)

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

Vite

vite는 프랑스어로 빠른이라는 뜻인데,  말 그대로 웹 개발을 빠르고 간결하게 할 수 있도록 도와준다.

자세한 내용은 공식 문서를 참고해보자

Vite

유의사항
Vite는 버전 14.18+ 또는 16+ 의 Node.js를 요구합니다. 다만 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있습니다.