전체 글
-
[vue] 특정영역 제외 버튼 클릭 시 페이지 이동성장과정(dev)/Frontend(feat. Vue, Next.js) 2021. 3. 3. 14:25
vue에서는 라우터를 이용하여 페이지 이동이 일어난다. 1. html 소스 내에서 페이지 이동 소스코드 2. html에서 goDetail을 호출하고, javascript에서 라우터에 파라미터까지 태워서 페이지 이동시키기 ( 리스트에서 상세페이지로 가는 경우 id를 파라미터로 들고가는 경우가 많음 ) export default { name: "SubmissionTable", methods: { goDetail( item ) { // 여기서 name은 라우터에 정의된 라우트명 //내 소스는 멀티페이지라서 페이지 단위가 컴포넌트임 this.$router.push({ name: 'submission-detail', params: {id: item.submission_id, email: item.email}});..
-
[html2pdf] pdf 출력 시 쏠림현상, 한쪽 라인이 흐릿한 현상 해결하기성장과정(dev)/Frontend(feat. Vue, Next.js) 2021. 2. 26. 16:46
html2pdf 구현 중 많은 문제를 직면했다. 그 중 알고는 있지만 외면하고 있던 문제들을 결국 지적받았다 ㅎㅎ ※ 두가지 문제 1. pdf left에 margin이 생김 (사실 편법으로 right에도 margin을 주는 방법으로 처리를 해놨는데 이로 인해 2번 문제가 생김) 2. pdf 왼쪽 라인들이 흐릿하게 보임 ※ 원인 canvas로 변경 시 html의 Xscroll (가로 scoll)까지 인식하여 생기는 문제 ※ 해결 편법인지 모르겠지만 scroll을 hide 처리 한 다음 pdf 다운로드 후 다시 scroll을 보이게 처리 기존 html2pdf 옵션 - scroll로 인해 밀리는만큼 margin을 넣어줘 임의로 처리 let opt = { pagebreak: 'css', margin: [0,0,..
-
javascript object in object to object in array카테고리 없음 2021. 2. 26. 09:38
※ 객체 내에 객체 형태의 데이터를 배열 내 객체 형태로 변환하는 방법 ※ var objectData = { "object1": {"value": "값1", "name": "이름1" }, "object2": {"value": "값2", "name" : "이름2"} }; const arrayOfObj = Object.entries(objectData).map((e) => ( { [e[0]]: e[1] } )); console.log( arrayOfObj ); 출처 : stackoverflow.com/questions/26795643/how-to-convert-object-containing-objects-into-array-of-objects * vue에서 json 파일 불러오기 - 매우 쉬워서 따로 게시..
-
[html to pdf] vue에서 html을 pdf로 다운로드 하기 (심플버전), pdf image not showing 문제해결성장과정(dev)/Frontend(feat. Vue, Next.js) 2021. 2. 23. 19:45
오늘은 목표 html to pdf in vuejs --> pdf 다운로드 버튼 클릭 시 html에 출력되어 있는 내용을 그대로 pdf에서 출력하기 총 3단계의 시행착오를 걸쳐 완성했다. 3단계 전부 있으니 급하다면 마지막코드로.. "vue html to pdf" 라고 구글에 검색하면 가장 먼저 나오고 사용량이 가장 많은 vue-html2pdf plugin을 사용하려다가 몇시간의 시도 끝에 실패했다. demo의 component 구조가 약간 복잡하다. 뭐 쉽다면 쉽지만 단시간에 단순구조로 pdf로 다운로드 할 수 있도록 하는 것이 목표였다. 원래 vue-html2pdf도 html2canvas와 jsPDF 기반으로 만들어져있어 vue-html2pdf 말고 본래의 html2pdf을 사용하기로 결정했다. ※ 참..
-
git 특정버전으로 소스 받기, git pull version성장과정(dev)/Git (feat. github, bitbucket) 2021. 2. 18. 09:28
* git log로 버전명 보기 $ git log --abbrev-commit --pretty=oneline 상황 : git을 사용하는 중에 특정 버전까지만 운영에 반영해야하는 상황이라서 특정 버전까지의 소스를 pull 받았다. 방법 $ git checkout {version} 여기서 version은 commit version이다 최신으로 돌아오기 $ git checkout HEAD 또는 $ git checkout dev (브런치명)
-
vue multipage 개발 시 사용자 분기처리, vue url 설정성장과정(dev)/Frontend(feat. Vue, Next.js) 2021. 2. 17. 10:26
vue-router 기본은 해시모드이다. 그래서 url에 꼭 #이 끼게 된다. ※ 이슈 ※ 문제는 사용자, 관리자 페이지를 나누면서 사용자는 "/", 관리자는 "/console" 로 나뉘게 되는데 http://localhost:8081/console 을 치면 http://localhost:8081/console# 로 접속되면서 해시값 # 뒤부터 경로로 읽어들여 실제 접속페이지는 "/" 이쪽으로 들어가게 된다. 내가 원하는 것은 http://localhost:8081/console 을 쳤을 때 관리자 화면에 접속이 되는 것이다. 이걸 검색을 뭐라고 해야할까 싶어 찾다가 우선 시간이 좀 있어서 포기했었는데 다른 이슈에 대해 검색을 하다가 찾게 되었다. ※ 해결방법 ※ VUE router의 default인 h..
-
intellij git ignore 추가 및 반영성장과정(dev)/Git (feat. github, bitbucket) 2021. 2. 16. 14:11
1. 프로젝트 아래 .gitignore라는 파일에 추가할 ignore 파일을 입력 2. 입력한 ignore 파일 및 폴더를 업데이트 $ git rm -r --cached . $ git add . $ git commit -m "git ignore add" $ git push 참조 : m.blog.naver.com/PostView.nhn?blogId=simpolor&logNo=221065977618&proxyReferer=https:%2F%2Fwww.google.com%2F