본문 바로가기

study

(80)
vue - 조건에 따른 style class 주기 프로젝트를 진행중 데이터에 따라 스타일을 다르게 줘야할 경우가 있었다. 나중에도 참고하기 위하여 기록을한다. 예를들어 아래 이미지와 같은 경우이다. 두 리스트는 같은 컴포넌트이며, 데이터가 방문알림 or 입찰알림에 따라 텍스트 색이 달라야했다. 이를 구현하는 방법은 검색결과 생각보다 간단하였다. 아래와같이 class에 조건을 주면 간단히 구현되었다. noticeName이라는 변수의 값에 따라 다른 스타일을 적용하는 것이다.
Js - var, let, const의 차이점 1. var - var는 변수 선언에 있어 큰 단점을 가지고 있다. var name = 'sik' console.log(name) // sik var name = 'ms' console.log(name) // ms 위 코드는 같은 name이라는 변수 명을 가지고 한번 더 선언을 하였음에도 각자 다른값이 출력된다. 간단한 코드에서는 유연한 변수 선언을 통하여 편리할 수 있으나, 코드가 복잡해 진다면 변수를 파악하기 힘들것이다. 이를 보완하기 위해 변수를 선언하는 방식이 let과 const이다. 2. let - let을 통하여 변수를 선언시 이미 선언되 있는 변수가 있으면 이미 선언되있다는 오류메세지가 출력된다.(재선언 불가) let name = 'sik' console.log(name) // sik let..
Vue - 컴포넌트($emit 자식 -> 부모로 데이터 전달하기) Vue.js를 공부하면서 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야할 경우가 생겼다. $emit을 통하여 해결하였으며 이를 기록하고자 한다. 1. 자식 컴포넌트 - $emit을 사용하여 부모컴포넌트에게 값을 전달한다. - $emit의 파라미터로는 (어떤이름으로 부모에게 보내줄지, 보내줄 값) 이다. methods: { // 버튼 클릭시 부모 컴포넌트에게 false를 전달하는 함수이다. DialogNoBtn () { // 파라미턴는 (부모에게 보내줄 이름, 보내줄 값) this.$emit('dialog-no-btn', false) }, }, 2. 부모 컴포넌트 - 자식 컴포넌트에서 보내준 이름을 가져온다. - 받아올 method => dialogNoBtn methods: { // 다이얼로그에서 아..
Vue - Vuex(state, mutations, action) Vuex에는 state, mutations, action, getters 등이 있다. 이에대해 공부한 내용을 적어보려고 한다. 1. state - Vuex에서 state는 데이터를 저장시키는 역할을 한다. - 데이터를 state안에 선언하여 저장할 수 있지만, mutation, action등을 통하여 state에 저장시킬 수 도 있다. 2. state안에 데이터 선언 export default { // 네임스페이스 트루를 넣어야함 namespaced: true, // 데이터가 들어가는곳 state: { // 회원가입시 저장할 데이터 signUpData: { // 회원가입시 선택한 회원 유형 selectType : "개인회원" }, }, } 3. mutations를 통한 state에 데이터 선언 - mut..
Vue - 환경변수 파일을 이용한 옵션 설정 env 파일 .env 라는 환경변수 파일로 옵션을 바꿀 수 있다. 1. .env.development 파일 - root 디렉토리에 환경변수를 설정할 파일을 만든다. - 사용할 변수를 작성 후 package.json에 추가 // env 파일 VUE_APP_API="http://jsonplaceholder.typicode.com/" // package.json 파일 "scripts": { "serve": "vue-cli-service serve --mode local", // 작성한 .env 파일을 사용하도록 --mode development 추가 "dev": "vue-cli-service serve --mode development", "build": "vue-cli-service build", "lint..
Vue - Vuex 모듈 파일구조 vuex를 보다 간편하게 사용하기 위해서 파일구조를 만들었다. store 하위에 modules라는 폴더를 만들어 Vuex파일을 관리하며 index.js파일에서 Vuex파일에 접근을 가능하게 해준다. 1. index.js - store -> modules에 있는 Vuex파일에 접근이 가능하도록 설정해준다. import Vue from 'vue' import Vuex from 'vuex' // 테스트 소스 import SampleUsers from './modules/SampleUsers' import Auth from './modules/Auth' Vue.use(Vuex) const store = new Vuex.Store({ modules: { SampleUsers: SampleUsers, Auth: A..
Vue - axios모듈 사용 저번 글에서 axios를 활용하기 위해 작성한 모듈을 사용해 보겠습니다. 1. Vuex action에서 axios를 호출하여 state에 데이터 저장 - vue 파일에서 Vuex action을 호출한다. - create시에 Vuex action을 호출한다. // test sorce // 비동기처리 -> DB작업을 할 때 created()사용한다. 페이지에 처음들어와 데이터를 로드할 때 사용하면 될듯 created() { // console.log(this.users), // getUsers methods 호출 this.getUsers(); }, methods: { // test sorce // vuex SampleUsers파일에 setUsers action을 호출한다. getUsers() { this.$..
Vue - axios 통신을 위한 파일 구조화 axios 통신을하며 공통적으로 사용할 소스를 모듈화 시켯다. 1. Http.js axios를 create하는 파일이며 auth가 필요한 경우와 필요하지 않은 경우로 구분하여 작성하였다. - auth가 필요하지 않은경우 instance를 export 시킴 - auth가 필요한 경우 setInterceptors라는 함수에 instance를 리턴하며 instancewithAuth를 export 시킨다. - baseURL : axios요청을 보낼 도메인 주소이다. baseURL에 대한 설명은 아래링크 클릭!! https://sikk.tistory.com/manage/posts/ // axios를 사용하는데 공통으로 쓸 것들을 모아논 파일 // HTTP Request & Response와 관련된 기본 설정 im..