분류 전체보기 81

[vue: worklist 제작] 2. 변환된 json으로 1Depth 단위로 테이블 그리기(3)

랜딩 App.vue 에서 다음과 같이 데이터를 받아왔다 Group.vue script props:{ isModify : Boolean, iaList : Object, idx: Number }, data (){ return { iaGroup : Object.values(this.iaList)[0], iaKeys: this.$store.state.iaKeys, } }, template {{Object.keys(iaList)[0]}} 상태 path 비고 {{ iaKey }} {{iaVal}} 1. h2에 this.groups에 저장된 {groupTitle : arr} 의 key값을 넣어준다 id에 tab 컴포넌트에서 약속한 id값을 넣어준다. https://shubamba.tistory.com/109 [vue..

STUDY/vuejs 2022.10.04

[vue: worklist 제작] 2. 변환된 json으로 1Depth 단위로 테이블 그리기(2)

1. 동일한 1depth별로 table을 나눠서 랜딩 2. 1depth별 tab button 생성하여 클릭시 해당 테이블로 스크롤 이동 data(){ return{ iaList : this.$store.state.iaData, groupTarget:'1depth', groupTitles: [], groups : [], } }, groupTitles : 그룹별 테이블로 이동할 버튼들 groups : 1depth별 table로 나뉘어질 배열 [{'1depth title' : [],[],[]}, {} , ..] groupTarget : 그룹을 나뉠 기준 methods : { setGroupTitles(){ // tab category let tabList = []; this.iaList.filter((item..

STUDY/vuejs 2022.09.28

[vue: worklist 제작] 2. 변환된 json으로 1Depth 단위로 테이블 그리기(1)

store.js import Vuex from 'vuex'; import IA from './assets/ia-json.json'; const store = new Vuex.Store({ state: { iaKeys : [], iaData : [] }, mutations: { SET_IA(state,lists){ state.iaData = lists; }, SET_KEYS(state,keys){ state.iaKeys = keys; }, MODI_IA(state,{newIA,id}){ const list = state.iaData.filter ((ia)=>{ if(ia[id] == newIA[id]) { ia = newIA } }) state.iaData = list; } }, actions: { FET..

STUDY/vuejs 2022.09.23

[vue: worklist 제작] - 계획

1. csv파일을 json으로 변환하기 2. 변환된 json으로 1Depth 단위로 테이블 그리기 2-1. 전체 테이블 제어할수 있도록 class명 통일화 2-2. 진행상태 select (대기:기본, 진행중, 완료, 제외..) 2-3. 작업물 경로 링크 2-3-1. 마우스오버시 미리보기 제공 2-3-2. 경로 수정버튼 2-4. 메모 2-4-1. 메모수정 가능하도록 textarea 3. 탭으로 1depth 인덱싱 4. 진행상황 4-1. 완료, 제외, total count 4-2. 완료, 제외, total 클릭시 해당 리스트만 보여짐 4-3. progress bar

STUDY/vuejs 2022.09.14

vue에서 sass 파일로 사용하기

> npm init pacage.json 파일 생성 > npm i -g vue > npm i -g @vue/cli npm을 통해 vue와 vue cli 를 global로(-g) 설치(i) > vue create 프로젝트_생성할_폴더명 > npm i -D node-sass sass-loader node-sass와 sass-loader를 devDependencies로(-D) 설치(i) 컴포넌트에서 인터널로 sass사용 가능 sass폴더, 파일로 사용하기 src 하위에 sass폴더 생성, style.scss 파일 생성 vue config에서 sass파일 경로 알려주기 vue.config.js css: { loaderOptions: { sass: { additionalData: ` @import "@/sass/..

STUDY/vuejs 2022.09.14

ios 키보드 올라왔을때 보고있던 화면 고정

fixed로 화면 하단에 따라다니는 input창이 있는 UI ios특성상 하단에 input이 있으면 focus 했을 때 키보드가 올라가면서 화면을 보고 있던 디바이스 너머로 밀어 올려 보낸다 이슈 - 간헐적으로 키보드가 인풋 창을 덮어서 보이지 않는 현상 - 내가 보고 있던 화면을 위로 올려버려서 시선을 잃는 현상 ios의 키보드를 올렸을때 화면 처리방식이 너무나 까다로워 검색하던중 '채널톡'이라는 서비스의 ios대응기 게시글을 참고했다. https://channel.io/ko/blog/cross_browsing_ios15 다만 내가 표현하고 싶은 부분과 다른점은 채널톡은 최신대화가 하단에 보여지기 때문에 최하단 화면으로 갱신해주면 되지만 나의경우 보고있던 화면을 이동시키지 않는것이 큰 차이점이였다. 아..

STUDY/javascript 2022.08.23

[프로그래머스] 코딩테스트 문제풀이 (신고 결과 받기)

https://school.programmers.co.kr/learn/courses/30/lessons/92334 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. k번 이상 신고된 user는 아이디가 정지된다 2. 리스트는 [이용자ID 신고당한ID]로 ID사이 공백이 있다(예를 들어 "muzi frodo"의 경우 "muzi"가 "frodo"를 신고했다는 의미입니다.) 이용자의 ID가 담긴 문자열 배열 id_list, 각 이용자가 신고한 이용자의 ID 정보가 담긴 문자열 배열 report, 정지 기준이 되는 신고 횟수 k가 매개변수로 주어질 때, 각 유..