분류 전체보기
-
[vue-router] 없는 url 접근 방지, 빈 화면[프로그래밍 | 개발]/[vue] 2021. 8. 26. 16:18
vue 3 vue-router 4 기본적으로 많이들 쓰는 방법이 route 만들 때 { path: '/:catchAll(.*)', name: 'notFound', component: ErrorPage } 이와 같은 방법을 많이 쓰는데, 이렇게 하면 { path: '/snack', component: LayoutComponent, children: [ { path: 'eat', name: 'eatSnack', component: EatSnack } ] } 이런 식으로 칠드런 패스가 정의 되어 있을 때 'www.mainDmain.com/snack' 이런 식으로 children은 있지만 하위'/' 에 대한 컴포넌트가 정의되지 않은 url 은 빈 화면이 뜬다 이 때 router의 beforeEach를 써서 해결..
-
[html to pdf] html 소스 pdf로 변환하기[프로그래밍 | 개발]/[java script or ts] 2021. 8. 26. 10:19
html2canvas, jsPDF 사용 const htmlToPdf = async() => { const printEl:any = document.getElementById('printEl'); await html2canvas(printEl) .then(canvas => { const imgData = canvas.toDataURL('image/jpeg'); // 확장자 변경가능 const imgWidth = 190; // A4 width 210에서 패딩 10, 10을 뺀 값 // 꼭 190 안맞춰도 되고 A4 비율에 따라 조정 const pageHeight = 190*1.414; const imgHeight = canvas.height * imgWidth/canvas.width; let position..
-
[gitlab ssh key 설정하기][프로그래밍 | 개발]/[환경설정 등] 2021. 8. 23. 10:49
https://foodchain.tistory.com/139 gitlab(깃랩) ssh key 등록 방법 SSH Git은 분산 버전 컨트롤 시스템입니다. 즉, 로컬에서 작업 할 수 있다는 의미입니다. 또한 변경 사항을 다른 서버에 "share" 하거나 "push" 할 수도 있습니다. 그러나 GitLab 서버에 변경 사항을 적용 foodchain.tistory.com 이 타래는 위 링크의 방법을 사용한 기록임 윈도우 환경 / 1. ssh 키 생성 깃배쉬 열어서(위치 상관없음) ssh-keygen -t rsa -C "깃랩에 등록된 이메일@example.com" -b 4096 위 명령어로 ssh key를 생성한다. email은 깃랩 preference > profile에서 확인한다. 차례대로 - 저장할 위치(..
-
yarn 설치(window)[프로그래밍 | 개발]/[환경설정 등] 2021. 8. 17. 22:01
https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 위 링크에 들어가면 다운받을 수 있다고 했는데, 없다. 최신문서는 https://yarnpkg.com/getting-started/migration#why-should-you-migrate Migration A step-by-step and in-depth migration guide from Yarn 1 (Classic) to Yarn 2 (Berry). yarnpkg.com 여기로 가라고 적혀있어서 들어와봤다 기본 설치는 별 차이 없는 듯. npm 대신 쓰려고 했는..
-
[ssl 설정하기] 3. 인증서 갱신설정(크론 예약)[프로그래밍 | 개발]/[환경설정 등] 2021. 8. 11. 00:26
letsencrypt 인증서는 3개월마다 갱신해야 하기 때문에, 미리 크론으로 예약을 걸어놓는다 우선 갱신이 잘 될지 갱신 테스트를 해본다 갱신테스트 1. nginx stop 시키기 2. certbot renew --dry-run 성공했으면 nginx start 해놓기 특히 80 서버 프로세스가 계속 돌고있거나 할 때 오류가 많이 나는데, 확실하게 죽이면 된다.(kill.... - 그냥 킬은 또 안돼서 여러 방법으로 했음) 갱신테스트가 성공적으로 완료되면 크론탭을 이용한다. sudo crontab -e (크론탭 편집) 이 때 크론탭 아예 처음 쓰면 편집기 뭐 쓸 건지 선택해야 하는데, nano vi vim 등 편한 것을 선택한다 이미 선택했어도 바꿀 수 있는 방법은 많으니 겁먹지말고 번호를 누른다. 관련..
-
[ssl 설정하기] 2. nginx 설정하기[프로그래밍 | 개발]/[환경설정 등] 2021. 8. 11. 00:17
nginx 전체 설정은 기본으로 /etc/nginx/nginx.conf 에 되어있지만, 개발자 및 회사마다 다른 위치에 있을 수 있으므로 확인하고 설정 파일을 찾는다 nginx 설정은 https://techzoo.tistory.com/entry/NGINX-%EB%A9%80%ED%8B%B0%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%85%8B%ED%8C%85 이 사이트 참고 NGINX 멀티도메인 셋팅 의도 - zoo.com (www.zoo.com -> zoo.com redirect) - sub1.zoo.com * 두개의 웹서비스를 하나의 VM에 호스팅하려고한다. 1. DNS 세팅 DNS 서버에서 A record와 cname 설정. (생략) 2. LetsEncrypt 설정 sudo.. techz..
-
[ssl 설정하기] 1. letsencrypt 설치[프로그래밍 | 개발]/[환경설정 등] 2021. 8. 10. 23:45
이 글은 이미 도메인이 구매되어 있고, 백앤드 및 프론트가 구현되어있는 상태에서 ssl을 설정하는 타래이다 // 웹서버는 nginx를 사용 // 운영체제 우분투 20^ test.com(꼭 .com 아니어도 됨) 에 대한 도메인을 구매했다고 가정 test.com www.test.com one.test.com two.test.com 총 네 개의 url에 대한 ssl 설정을 한다. 설정 할 때 아래 내용에 대한 개념을 알고 있는 게 좋다(DNS, A record, cname) https://dev.plusblog.co.kr/30 참고 letsencrypt 인증서를 사용할 것이다 letsencrypt는 무료인증기관 중 하나로, https://letsencrypt.org/ 에서 문서를 미리 확인한다. letsen..
-
vue title 새로고침시 변경될 때, 시간차[프로그래밍 | 개발]/[vue] 2021. 8. 6. 11:20
vue 초기셋팅 시 index.html에서 title은 이렇게 웹팩에서 설정하도록 되어있음 내부 코드에서 따로 document.title 로 타이틀을 지정해주지 않거나 웹팩 설정을 하지 않았을 경우에는 package.json의 프로젝트 이름으로 뜸 문제는 타이틀의 default가 package.json의 name으로 설정되어 있어서, 새로고침 시 js 파일들 불러오는 로딩시간차가 생길 때, 처음에는 프로젝트 이름으로 타이틀이 뜨고, 이후에 document.title로 설정된 타이틀로 바뀜. 이런 현상 해결을 위해서 index.html의 title에 내가 원하는 타이틀 이런 식으로 하드하게 박아서 해결함