08/11

1. TIL

1. 프론트 로그인 처리에 관한 글

• https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

  : 리프레시 토큰 & 토큰

2. JS Form data에 관한 글

: FormData는 form의 내용들을 키/값의 집합으로 컴파일 해주는 것 => 이를 이용해서 XMLHttpRequest 요청을 보낼 수 있다.

• https://javascript.info/formdata

• MDN : https://developer.mozilla.org/ko/docs/Web/API/FormData

• multipart form data : https://velog.io/@bclef25/multipart-form-data-upload

• http://hacks.mozilla.or.kr/2010/05/firefox-4-formdata%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-js%EB%A1%9C-%EB%B3%B4%EB%8B%A4-%EC%89%BD%EA%B2%8C-%ED%8F%BC-%EB%8B%A4%EB%A3%A8%EA%B8%B0/

3. Axios 가이드

: https://yamoo9.github.io/axios/guide/api.html#%EA%B5%AC%EC%84%B1-%EC%98%B5%EC%85%98

---

2. 게시판 리팩토링

1. fontawesome 아이콘 추가

1.1 모듈 설치 및 사용

• 사용법 : https://www.npmjs.com/package/@fortawesome/vue-fontawesome#usage

• 필요한 모듈을 설치한다.

$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
$ npm i --save @fortawesome/pro-duotone-svg-icons

• 모듈 로드 및 컴포넌트 등록 (main.js)

import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
library.add(faUserSecret)
 
Vue.component('font-awesome-icon', FontAwesomeIcon)

1. 사용법에 따라서 필요한 모듈을 로드한다.
2. Vue 전역 컴포넌트 ('font-awesome-icon')을 생성한다.

• 실제 사용

1. 실제 사용할 아이콘을 모듈 형식으로 로드한다.

// import icons
import { faLock } from "@fortawesome/free-solid-svg-icons"

2. fas-로 시작하는 아이콘은 solid, far-로 시작하는 아이콘은 regular로 부터 로드한다.
3. data(){}에 등록후

icons : {
	lock : faLock
}

4. 생성한 컴포넌트의 :icon의 value에 data에 등록한 값을 넣어서 사용한다.

<font-awesome-icon :icon="icons.lock" />

1.2 플러그인 만들기

• 모든 Vue 컴포넌트마다 모듈을 로드 하고, 아이콘들을 선언해서 사용하는 것이 비효율적, 플러그인 또는 컴포넌트를 만들수 있는지?

  • 플러그인을 만드는 것보다 icon들을 선언해놓은 js파일을 만드는 것이 더 효율적이라고 생각, 플러그인은 안만듬

• 방법 :

  • https://blog.naver.com/PostView.nhn?blogId=pjok1122&logNo=221648913591

2. 새로고침 시 마지막으로 방문했던 게시판 id값 유지하기

2.1 로컬 스토리지/세션 스토리지

• 로컬 스토리지 : 영구적으로 데이터가 보전
• 세션 스토리지 : 브라우저가 닫히면(세션이 종료되면) 삭제

2.2 세션 스토리지 사용

• 공식 문서 : https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage

• Idea

  • 게시판 페이지에 접속할 때 해당 bid값을 session Storage에 저장한다.
  • 그후 router에서 board 컴포넌트에 접속하기 전에 기존에 접속했던 게시판이 있는지 확인
  • 없으면, Home으로 있으면 해당 게시판으로 이동.
  • AddPost 컴포넌트도 마찬가지로 처리

• 추가 구현

  • 게시판에 해당하는 Page값도 저장하기
  • 게시판 idx와 page값 모두 저장
  • watch를 통해서 page값이 변할때 스토리지에 저장하기

	history : {
    	bid : '',
        page : '',
    }

3. 대댓글 접힘/펼침 구현

1. 텍스트객체의 값 또는 객체 변경 시 뷰의 감지 및 재 렌더링

• data(){}안에 선언된 객체의 값을 변경하면 감지를 못한다. 값을 변경한 새로운 객체를 재할당 해줘야한다?!
  => immutable?? 객체의 Key에 해당하는 Value를 변경했을 경우에는 Vue가 재 렌더링을 하지 않았다.
  => 하지만 객체를 복사해서 새로운 객체를 다시 할당했을 경우, 재 렌더링이 일어났다.

• 해당 key값을 제외한 나머지 객체안의 데이터들 복사하기

  객체 값 갱신 : https://velog.io/@gtah2yk/JS-Study-ES6-1%EC%A3%BC%EC%B0%A8%ED%8E%BC%EC%B9%A8-%EC%97%B0%EC%82%B0%EC%9E%90
  공식 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
  키워드 : Object Spread Operator => 객체를 얕은 복사할 경우 Object.assign() 보다 쉽게 이용

• 코드 :

//script
toggleRecomment(idx) {
      const opened = this.openedRecomments

      // 현재 펼침/접힘 여부
      // currentValue가 true면 그대로 true, 값이 없거나 false면 false
      const currentValue = opened[idx] ? opened[idx] : false

	  //객체 Spread Operator를 이용해서 객체 얕은 복사
      const newOpened = {
        ...opened,
        //idx : !currentValue //이렇게 넣을 경우, idx가 String형태로 그자체로 객체에 들어감.
      }
      newOpened[idx] = !currentValue

	  //데이터에 새로운 값 할당, 재 렌더링이 일어남
      this.openedRecomments = newOpened
    },
    
 //DOM
  <ul class="reComment__list"
      v-if="openedRecomments[comment.IDX]"
  >

---

3. 읽어보기

1. 쉽게 풀어가는 개발

: https://velog.io/@melangyun/%EA%B0%9C%EB%B0%9C%EB%8F%84-%EC%89%BD%EA%B2%8C-%ED%92%80%EC%96%B4%EA%B0%80%EC%95%BC-%ED%95%A9%EB%8B%88%EB%8B%A4

2. Vue.js에서 font Awesome 사용

: https://soraji.github.io/front/2019/11/10/vueawesomefont/