2023/01 9

VUE dotenv // vue에서 환경변수 설정

vue에서 환경변수를 설정해서 사용하려고 한다. open api사용하려는데 키 관리하려고 했다.. 사용법은 간단하다. # .env파일을 만든다. 나는 secret 값을 넣어봤따. VUE_APP_secret = 1234 # app.vue에서 스크립트부분에서 console.log(process.env.VUE_APP_secret) //1234 으로 부르면 값이 제대로 가져와진다. dotenv 모듈을 설치할 필요도 없고 아주 간단하다. 다만 중요한점은 위에서도 secret이라는 변수를 쓰기위해 VUE_APP_을 꼭 앞에 붙여줘야한다는거다. 안붙여주면 못가져온다. 사용자편의를 위해서 이렇게 만들었다고 함. ++ 참고로 .env를 수정했을때 nodemon 켜놨다고 app.vue만 저장하면 리셋되지 않는다. npm ..

javaScript/vueJs 2023.01.16

production// 배포모드

먼저 cross-env모듈을 설치해주자. 따로 모듈을 서버코드에서 가져올 필요는 없다. npm i cross-env 서버 실행 모듈을 대게는 배포모드일때 pm2를 사용하며, 개발모드일때는 nodemon모듈을 사용한다. 이를 적용하려면 package.json을 수정해주어야 한다. "scripts": { "start": "cross-env NODE_ENV=production PORT=3000 pm2 start app.js", "dev": "cross-env NODE_ENV=development nodemon app.js", "test": "echo \"Error: no test specified\" && exit 1" }, # start : npm start를 커맨드에 쳤을때 설정값이다. 위코드를 해석하자면..

javaScript/nodeJs 2023.01.16

우디 // 사진 늘이기. 프리트랜스폼

단축키 cntl + T 위치 edit - free transform # Move Tool 단축키 v 객체 끌당해서 움직일때 씀. 일러스트레이터랑 똑같음 마지막으로 꼭 move tool로 되돌려놓자. # Rectangular Marquee Tool 선택영역 툴 선택하려는 범위를 정할수있음. 단축키는 m # free transform v로 객체 선택후 cntl + T 하면 객체를 늘였다 줄였다 할 수 있음. 샘플 이미지 변경전 여기서 다리를 늘려보겠다. M으로 범위 정하고 cntl + T 눌러서 다리 늘림(쉬프트 누르면 한방향으로만 늘려짐) 끝나고 M다시 누르고 아무데나 클릭하면 범위 없어짐 늘리고나서 엔터누르고 m누르고 아무데나 클릭해도 됨. (이건 마우스 우클릭후 deselect눌러도됨.) 결과물 : #..

우디 // 워크스페이스 설정

# 필요한 탭들. 윈도우 탭에서 Adjustments Character Color History Layers Paragraph 난 property도 추가해줬음.(일러스트레이터에서 자주써서..) # 워크스페이스 저장하는방법 우측상단에 저렇게 생긴거 누르고 new workspace 들어감 이름 정하구 다 체크하고 save # 워크스페이스 불러오는 방법 위에 저버튼 누르고 reset 워크스페이스 이름 하면 불러와짐.

카테고리 없음 2023.01.12

포토샵 시작 // 일러스트레이터와 차이점.

# 포토샵은 픽셀기반, 일러스트레이터는 벡터기반 뭐 이건 이미 알고있던 사실임.. 때문에 일러스트레이터에 사진같은거 넣으면 렉 오지게 걸림. expand같은거.. # 대지 갯수 제한 일러스트레이터에선 대지를 여러개 두고 작업을 했었다. 때문에 export도 손쉽게 됐는데 포토샵은 대지가 무조껀 하나라고 한다. # 클리핑 마스크 순서제한 cntl+7.. 일러스트레이터에선 마스크가 대상 위에 와야했는데 포토샵은 마스크가 대상 뒤에 있어야 한다고 한다.. # 선택방법 일러스트레이터는 오브젝트 선택 포토샵은 범위로 선택을 한단다. # 레이어 일러스트레이터는 레이어안에서 그룹화 가능 포토샵은 하나만가능. ? 뭔말인지 모르겠어! # cntl + z차이 일러스트는 계속 이전으로 가는데 포토샵은 이전다음 반복이된단다...

블로그를 좀 이제 체계적으로 써봐야겠다.

처음엔 좀 제대로 작성하다가.. 점점 귀찮아서 코드만 붙여넣고 ㅋㅋㅋ 이젠 나중엔 다른 블로그 링크만 딱 걸어놓는다 ㅋㅋㅋ 이제 좀 제대로 작성을 해봐야겠다. 사진도 이쁘게넣고 글도 설명 자세하게 쓰고.. 이래야겠다. aws부분이 구글링을해도 너무 개개인의 상황에 맞춘 해결방법만 있고 때문에 이해하지 못하고 그대로 따라하다가 아예 인스턴스 자체가 터져버리고..(이것땜에 고생좀함 ㅠ) 이러기 때문에 블로깅이라도 제대로 해놔야 나중에 문제생겼을때 다시 보고 해결방안을 찾을 수 있을것 같다.

personal/dailyLife 2023.01.12

aws lightsail database // wait_timeout 설정.

lightsail 자체가 너무 간략화와 쉬운 이용방법에 초점을 맞춰서 데이터베이스설정에 어려움을 겪었다. 나는 wait_timeout 값을 변경하고싶었는데 워크벤치에서 쿼리문을 돌리니 1227에러가 떴었다. 때문에 aws lightsail 데이터베이스에 커맨드로 직접 접근하는 방법을 찾았다. https://jacobowl.tistory.com/96 위 링크는 awscli를 설치하여 lightsail 데이터베이스 파라미터에 접근을 하는것까지 썼다. 이후로 파라미터 설정에 parameter name이 wait_timeout인것을 찾아보면 이렇게 기본설정이 되어있다. wait_timeout값을 워크벤치에서 찾아보니 기본값 28800인가 8시간으로 설정이 되어있었는데 이 파라미터 객체에 없어서 조금 헷갈렸다. ..

AWS/etc 2023.01.12

aws awscli 설치 / lightsail db 파라미터 접근

https://lightsail.aws.amazon.com/ls/docs/ko_kr/articles/lightsail-how-to-set-up-and-configure-aws-cli Amazon Lightsail과 함께 사용할 수 있도록 AWS Command Line Interface 구성 | Lightsail 문서 AWS Command Line Interface(AWS CLI)는 고급 사용자와 개발자가 터미널(Linux 및 Unix) 또는 명령 프롬프트(Windows)에 명령을 입력하여 Amazon Lightsail 서비스를 제어할 수 있는 도구입니다. Lightsail 콘솔, 그래픽 lightsail.aws.amazon.com 공식문서 링크. # sudo apt-get -y install awscli..

AWS/etc 2023.01.12