TIL_211221_Frontend

 

어제 해본 socketio로 간단한 채팅창 구현

간단히 복습했다.

* port를 따로 뺀 이유 : 환경 변수

* const ~ require ~ = inport ~ from ~

 

 

I18n

다국어 처리 가능

처음 개발할 때 도입하지 않으면 나중에 절대 못바꾼다.

json으로도 가능

 

 

vueproject

eslint prettier, bootstrap vue, css 설정

페이지 분할 : header, Sidebar, Content 세 부분으로

* Lorem : 의미없는 문구 생성

* router/index.js 파일 설정

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('../views'),
    redirect: '/home', //home으로 리다이렉트
    children: [
      {
        path: '/home',
        component: () => import('../views/Home.vue') //이게 views/index.vue의 <router-view />로 들어감
      }
    ]
  },
  {
    path: '*',
    component: () => import('../components/NotFound.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

<template>
  <div>
    <div class="separate-body"></div>
    <b-container fluid style="padding-left: 0px">
      <b-row>
        <!-- Side bar -->
        <b-col cols="2" style="padding-right: 0px">
          <app-sidebar />
        </b-col>
        <!-- Body contents -->
        <b-col style="padding-left: 0px; padding-right: 0px">
          <div class="content-body">
            <router-view /> //여기로 위에서 들어옴
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import Sidebar from '../components/layout/Sidebar'

export default {
  components: {
    'app-sidebar': Sidebar
  }
}
</script>

<style lang="scss" scoped></style>

* router.push('/blah') => router의 path를 찾아서 날림 => 리로딩이 안되고 렌더링만 바뀜

 

 

Proxy 설정

CORS : 프론트엔드에서 접속하는 도메인이 백엔드의 도메인이랑 안맞을 때 브라우저/백엔드에서 막아버림(원래 백엔드는 default로 막혀있음)

-> 이걸 피하기 위해 proxy를 사용(같은 도메인을 호출한 것처럼 속임)

.env 파일 생성

NODE_ENV=production
VUE_APP_SERVER=http://localhost:3000 //.env파일의 환경설정을 읽기 위해선
//반드시 VUE_APP_ 접두사 사용해야함(process.env.VUE_APP_을 통해 추출 가능)
//VUE_APP_SERVER에는 백엔드 서버의 값 설정

vue.config.js 파일 생성

const { VUE_APP_SERVER } = process.env //process.env로 호출

module.exports = {
  devServer: {
    proxy: {
      '/serverApi': { //이게 들어오면(뒤에 뭐가 붙든 상관 없이) 안의 항목들 실행됨
        target: VUE_APP_SERVER, //= http://localhost:3000(백엔드)로 날리겠다
        changeOrigin: true,
        pathRewrite: { //중요! 
          '^/serverApi': '' //정규표현식 앞에 뭐가 붙든/serverApi로 들어오면 ''로 바꾸겠다
        } // ^=http://localhost:3000
      } // 따라서 http://localhost:3000/serverApi/어쩌구 로 호출되는데
    } // /serverApi가 ''(빈값)이 되면 http://localhost:3000/어쩌구 로 완성됨
  }
}

* vue.config.js 파일의 프록시 처리는 개발pc에서만 동작 실제 도커를 통한 nginx에선 따로 프록시 처리 필요(/etc/nginx/conf.d/default.conf)

axios에서 호출(action)

 

 

CRUD 기능 작성

리스트 화면 제작

1. axios 설치(RestAPI를 호출)

2. apiUtil.js 생성(axios를 사용하기 위한 함수파일)

3. 부서 Store 파일 생성(부서 리스트 부분만 작성)

4. store의 index 파일 수정

5. 리스트 파일에서 store 연동

* mapgetters = $store.getters

 

입력 화면 제작

신규등록 버튼 -> 부서 입력 화면(모달)

<template>
  <div>
    <b-modal id="modal-department-inform" title="부서정보 입력"> //모달의 id값은 유니크하게 생성
      <p>입력 폼 넣기</p>
    </b-modal>
  </div>
</template>

모달 열기: this.$bvModal.show(모달id)
모달 닫기: this.$bvModal.hide(모달id)

 

예시)

onClickAddNew() {
      // 신규등록
      this.$bvModal.show('modal-department-inform') // 모달을 띄운다.

 

부서 정보 입력 화면 완성하기

모달 페이지에 부서정보 입력 화면 완성

입력 폼은 백엔드 시간에 한 테이블 정의서(혹은 API 문서) 참조

!참고 : 입력에 대한 validation체크(가령 '값이 입력되지 않았습니다')는 본 과정에서는 하지 않았다. 별도의 서드파티(vuelidate)를 이용해서 각자 해보도록 한다.

* store 파일 작성

const stateInit = {
  Department: {
    id: null,
    name: null,
    code: null,
    description: null,
    createdAt: null,
    updatedAt: null
  }
}

export default {
  state: {
    DepartmentList: [],
Department: { ...stateInit.Department }, //...:전개연산자(위의 값이 들어옴)
// dept: { ...state} dept에 state의 값만 들어감(나중에 state가 a-> b로 바뀌어도 dept의 값은 a 그대로 유지)

 

리스트 화면에서 토스트 메세지 출력 하기

watch : 변화 감지

//department.js

// 부서 입력
    actDepartmentInsert(context, payload) {
      console.log('actDepartmentInsert', payload)
      // 상태값 초기화
      context.commit('setInsertedResult', null)

      /* 테스트 데이터 세팅 */
      setTimeout(() => {
        const insertedResult = 1
        context.commit('setInsertedResult', insertedResult)
      }, 300) // state값의 변화를 감지하기 위하여 일부러 지연 시켰다.(300ms 후 null -> 1)

//index.vue

computed: {
    departmentList() {
      return this.$store.getters.DepartmentList
    },
    insertedResult() {
      return this.$store.getters.DepartmentInsertedResult //밑의 value에 this~Result까지 들어감
    }
  },
  watch: {
    insertedResult(value) { //위의 insertedResult와 이름이 똑같아야 함
      // 등록 후 처리
      if (value !== null) { //이유 : null일 경우 오류가 날 수도 있어서
        if (value > 0) {
          // 등록이 성공한 경우

          // 1. 메세지 출력
          this.$bvToast.toast('등록 되었습니다.', {
            title: 'SUCCESS',
            variant: 'success',
            solid: true
          })

          // 2. 리스트 재 검색 // 성공하면 재검색(폰에 파일 옮기고 미디어스캔하여 옮긴 파일 확인하는 것처럼)
          this.searchDepartmentList()
        } else {
          // 등록이 실패한 경우
          this.$bvToast.toast('등록이 실패하였습니다.', {
            title: 'ERROR',
            variant: 'danger',
            solid: true
          })
        }
      }
    }
  },

부트스트랩에 toast 항목 있음(근데 이거 말고 딴거 씀)

실제로는 저렇게 쓰기보단 함수로 해서 쓴다.

사람이 봤을 때 버그 / 로직상 버그

사람이 봤을 때 버그 -> 모달에 이미 적은 정보가 지워지지 않음

 

 

 

 

 

 

느낀 점

실행시키면서 코드 짜니까 신기하다!

store 구조는 아직 많이 헷갈린다...

잊지 말아야할 사항을 따로 기록했다.

vscode 열 땐 cmd에서 code .
cmd 종료할 땐 exit 명심
하드코딩 : 유지보수가 어려울 수 있음
복붙 잘하는 개발자도 좋은 개발자다! 맞는 위치에 맞는 요소를!
객체는 보통 대문자로 표시