성장과정(dev)
-
[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
-
b-table list 화면에서 상세화면 넘어가기 (parameter 넘기기)성장과정(dev)/Frontend(feat. Vue, Next.js) 2021. 2. 16. 13:28
column에 goDetail을추가 list.vue detail.vue async mounted() { //this.$route.params $route를 이용해서 데이터를 뽑아냄 let params = "?id=" + this.$route.params.id + "&email=" + this.$route.params.email; .... } router.js ... { path: '/raw/detail', name: 'submission-detail', component: SubmissionDetail, props: true }, ... *** row 클릭 시 넘어가게 적용하기 *** 1. 클릭 시 발생하는 이벤트 추가 (html) 2. b-table 옵션에 row-clicked 이벤트 걸어주기(scri..
-
vue에서 image load 정상여부 체크하기성장과정(dev)/Frontend(feat. Vue, Next.js) 2021. 2. 10. 09:57
image를 가져오는데 성공하면 화면에 form이 보여지고, 실패하면 화면에 form이 가려지도록 하는 요청사항이 있다. 다음과 같이 @error 로 호출함수를 정의하면 이미지 로드 실패 시 함수가 호출된다. 해당 함수 내에서, 실패 시 보여주지 않아야할 요소에 대해서 flag처리를 해주면 된다 imageLoadError() { this.isShowResidentialAddress = false; },
-
[vue 배포] vue cli build하여 lightsail에 nginx 연동해서 운영에 배포하기성장과정(dev)/Frontend(feat. Vue, Next.js) 2021. 2. 5. 01:20
* 목표, nginx 적용 이유 lightsail 인스턴스에 vue cli로 build된 프로젝트 올리기 처음에 배포 자동화가 목적이었지만 우선 개념이 안잡혀있기 때문에 그나마 쉬운 방법으로 가려고 한다.. local에서도 그랬듯이 lightsail 서버에서 npm run serve로 build하면 바로 http://{해당ip}:{실행port} 로 접속되는 거 아닌가 하고 똑같이 실행시켜보았다. 하지만 build하던 도중 outof memory가 발생한다.. 이유는 모르겠다. build 하는데 RAM 용량을 그렇게 크게쓰나? 인스턴스 설정에서 용량을 늘릴 바에 다른 반영방법을 찾던 도중 nginx와 연동해서 올리는 방법을 찾았다. ------------------------시작 및 단계----------..
-
git 자주쓰는 명령어, git cli성장과정(dev)/Git (feat. github, bitbucket) 2021. 2. 3. 17:46
* CLI란? Command Line Interface ( 텍스트 터미널을 통해 사용자와 컴퓨터가 상호작용하는 방식 ) * VCS란? Version Control System (intellij에서 VCS를 이용하여 git연결, 하지만 기능에 따라서 cli로 진행해야하는 경우가 있다. * git 명령어 $git remote remove origin > git 연결 끊기 $ git init > To initialize Git in a repository (repo), you just need to type the following command. If you don’t initialize Git, you cannot run any other Git commands within that repo. (git을 ..