초보 개발자

아래와 같은 코드가 있다고 가정해보자. v-if가 처음 false라서 보이지 않을 것이다. 그리고 mount된 후 load의 값을 true로 변경하여 그 보여질 것이다. 그리고 ref값이 target인 DOM에 접근하려고 했으나 과연 값은 어떨까? 처음에 생각했을 때 당연히 dom이 출력될 것이라고 생각하였지만 실제로는 undefined가 출력이 되었다. 이 이유는 Vue가 DOM업데이트를 비동기로 하기 때문이라고 한다. 따라서 저 값을 제대로 얻으려면 어떻게 해야할까? 이때 사용하는 것이 바로 nextTick이다. Vue가 데이터를 변경한 뒤 DOM업데이트를 마칠 때 까지 기다리려면 데이터가 변경된 직후에 nextTicㅏ을 사용하면 된다. 이건 DOM이 업데이트 된 후에 호출이 된다. 콜백함수의 형태를..

나는 하나의 인스턴스안에 node express로 api 서버를 돌리면서 동시에 서버역할도 하도록 하였다. vue 프로젝트를 build하고 그 build된 폴더를 인스턴스로 옮긴 뒤 서버에서 그 걸 바라보도록 express.static('dist') 이렇게 설정해주었다. 그리고 나서 실행을 시켜본 결과, 내가 설정한 라우터대로 잘 이동을 하였지만, reload되는 구간이라던지, 아니면 내가 직접 라우트를 치고 들어간 경우에는 vue가 인식을 못하였다. 생각해보니 vue는 자체 서버로 돌리는 것이 아닌 현재 js 파일로 모두 변환되었기 때문에 왠진 모르겠지만 그렇게 될 수 있다는 생각이 들었다. 따라서 구글링을 해본 결과 connect-history-api-fallback이 모듈을 사용하면 된다고 한다. ..

서브 도메인을 추가하기 위해서 가비아에 있는 회사의 기존 도메인에 A 레코드를 추가하고.. 이것저것 다해봤는데 연결이 안되었다. 심지어 @ 로도 연결된 주소가 없어서 뭔가 이상하다는 생각이 들었다... 그러다 문득 AWS에 Route53과 뭔가 연관이 있진 않을까? 라는 생각에 들어가 보았더니 여기서 잔뜩 설정이 되어 있었다. 가비아에서 도메인을 사고 그 도메인을 AWS에서 사용한 것인가..? 근데 그게 가능한가? 아무튼 여기서 레코드를 추가해주었더니 바로 해결 되었다. 먼저 호스팅 영역 클릭 > 도메인 클릭 > 레코드 생성 을 누른 뒤 아래와 같이 해주면 접속이 가능하다!!!! 근데 이건 http://로 연결이 되어있어 찜찜하다.. 사내용으로 사용할 것이지만 그래도 뭔가 찜찜하다.. 그래서 https로..

vuex-persistedstate 라는 npm 이고 vuex에 저장되는 값들을 사용하는 웹브라우저의 localstorage에 저장하며, 새로고침시 그 값이 있다면 localstorage의 값을 가져와 사용하는 방식이다.. localstorage에 올리면 누구나 다 볼 수 있으니 vuex-persistedstate 에서는 js-cookie, secure-ls를 이용하여 localstorage말고, cookie에 저장하는 방식과 암호화된 방식으로 데이터를 저장하는 방법을 알려주고 있다. 먼저 아래의 모듈을 설치해주자 npm install vuex-persistedstate 그리고 아래처럼 플러그 store의 플러그인을 만들어서 거기에 적어준다. import Vue from vue; import Vuex f..

vuex란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux패턴에서 기인한다. vuex가 오 ㅐ필요할까?? 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다, 이 때 컴포넌트 간 데이터 전달을 명시하고, 여러개의 컴포넌트에서 같은 데이터를 업데이트할 때 동기화 문제를 해결할 수 있다. state : 컴포넌트 간에 공유하는 데이터이다. data() 이라고 생각하면 된다. view : 데이터를 표시하는 화면 template와 같은 거라고 생각하자 action : 자용자의 입력에 따라 데이터를 변경하는 methods view에서 클릭을 하면 action이 실행되고 action이 state를 변경한다. vuex구조 컴포넌트..

removeTodo라는 함수를 만들었다. 그리고 우리는 localstorage에 정보를 담아두었기 때문에 localstorage에서 값을 지워주어야 한다. 처음에 나는 단순히 todo의 값만 가져와서 localstorage.removeItem(todo)만 해주려고 했는데 이렇게 하면 vue에서는 그 데이터가 아직 남아있다. 따라서 인덱스도 가져와서 splice를 통해서 그 배열을 지워주는 기능을 추가해주었다. 여기서 나는 인덱스를 사용해서 지우게되면.. 앞에 위치한 배열을 지우면 번호가 하나씩 앞당겨지게된다고 생각했지만 data에 정의 했으므로 splice를 하면 하나가 줄어들게 되고 다시 업데이트가되면서 새롭게 화면이 렌더된다. 따라서 새로운 인덱스 값을 가지고 있기 때문에 잘 지워지는 것을 확인할 수..

v-chip-group v-chip-group은 아래와 같이 여러개의 메뉴 버튼 들을 보여주는 것이다 각 하나하나는 v-chip이다. 여기서 v-chip-group에 옵션을 줄 수 있다. 기본적으로 제일 오른쪽 것을 누르면 전체적으로 왼쪽으로 위치해야하는데 , center-active옵션을 주어야지 이렇게 된다. multiple옵션을 주면 여러개를 선택할 수 있다. mandatory옵션을 주면 무조건 하나는 선택해야한다. 기본적으로 맨 앞에 위치한 것이 디폴트값이다. active-class는 눌렸을 때 바뀌는 옵션이다. primary--text라고 하면 글자색이 프라이머리 색으로 바뀜 v-chip v-chip-group안에 v-chip 반복문을 사용해서 여러개를 생성해준다. v-bottom-navigat..