2021. 2. 2. 12:39

 

 

 

 

 

 

 

포스트맨에서 Json를 보내다...

객체로 된 데이터가 있는데....

아래처럼 평소에 raw로 보내는게 안되는거다..

 

아래같은 메시지가 나온다.

 

이게, Json 양식에 맞지 않아서 안가는거라....

객체도 표시를 해줘야한다.

아래처럼..

 

객체도 " 따옴표로 해주고, 키값에도 표시를 하기위해서, 따옴표를 붙여하는데, 객체안 따옴표에는 역슬래시    \" 를 붙여줘야한다.

 

그래야 따옴표로 인식을 한다.

 

----------------------------------------------------------------------------------------------------------------

추가적으로 아래같은 Array도 보면,

Array를 따옴표로 감싸고, 

그 안에 따옴표는 \" 로 해주면 된다.

 

 

 

 

-------------------------------------------------------------------------------------------------------------

여기서 업그레이드 질문, 

Array안에 Array 는?

 

위처럼 Array안에 객체를 만들도 또 Array를 만들때는, "따옴표가 필요없다.

 

 

처음 제일 바깥쪽 Array 만 따옴표 쓰고, 나머지는 값에만 썼다.

그리고, (줄바꿈)엔터치지 마라..... 다 붙여야 된다.

 

Posted by Tyson
2021. 1. 28. 15:45

가끔 이미지 캡쳐해서 티스토리 작성할때 바로 붙여 넣기 하는데...

 

기본제공 이미지 편집에 테두리 넣는게 없다...

 

왜 그런기능을 안넣어놨는지......

 

그래서 항상 

기본모드에서 HTML 로 바꿔서, style를 넣었는데..

이것도 귀찮아서, 그냥 css에 추가함.

 

두가지 방법 다 알려주겠다.

 

1. 글작성하는곳 오른쪽 위를 보면, '기본모드'로 되어있다.

 

여기에서 HTML로 바꾼다.

 

코드에 보면, 이미지 정보 있는 태그가 있을거다.

<p>이미지주소 </p> 안에 있는데...

<div style="border: 1px solid black;"><p>이미지정보</p></div>

바깥쪽에 div 하고 스타일 넣어주는거다. 

 

이렇게 하는 방법이 있고,

-------------------------------------------------

두번째로는 CSS 세팅을 해놓는거다.

 

먼저, 블로그관리 -> 스킨편집 -> HTML 편집 -> CSS 탭 으로 들어간다.

 

그리고 나같은 경우는 아래처럼 추가했다.

그다음에 적용 눌러준다.

 

그리고 다음부터는 HTML 열어서

아래처럼 써준다.


<div class="border_view">이미지 정보</div>

class="border_view" 추가해주면 된다.

 

이름은 본인이 편한거 짧은거 써도 된다.

 

그러면,  앞으로 이미지에 테두리넣을때 저거만 써주면 된다.

Posted by Tyson
2021. 1. 28. 15:16

파베에 테스트로 올린 프로젝트를 잠깐 정지하려는데..

 

사이트 메뉴에 아무리 찾아도 정지 버튼이 없다....

 

터미널에서 직접 disable 해줘야한다.

 

그래서 배포할때 프로젝트폴더로 가서,

 

$ firebase hosting:disable

이렇게 치면 site 프로젝트 명이 맞냐고 물어보고, Y 하면 정지된다.

 

반영되는데, 몇분정도 걸리므로, 좀있다 사이트 접속해보면 없는 페이지라고 뜬다.

 

 

 

Posted by Tyson
2021. 1. 22. 18:53

App Engine을 생성할때 아래와 같이 나올때가 있다.

 

분명히 결제카드도 등록했는데....왜 뜨는지 이해가 안됬다..

 

난 돈도 잘 내고 있었는데...

왜 안되지 하고...보니...

구글에서 제한을 걸어 놓았다.

결제가능한 프로젝트 수 제한이 있다

 

기본 3개로 되어있고, 추가 신청을 해야한다.

 

이유는 이거란다....

https://support.google.com/cloud/answer/6330231

 

그래서 결국 

 

할당량 증가 요청을 클릭해서 요청하려는데... 쓸게 많다...

 

할당량 증가 요청 양식

이렇게 되어있다.

 

위부터 순서대로, 

 

1. 이름*

2. 회사명 ( 안써도됨)

3. 프로젝트를 만드는데 사용할 이메일주소* (그냥 프로젝트 만들때 쓴 이메일씀)

4. 얼마나 많은 프로젝트가 요청되고 있나?* (숫자선택)

5. 이프로젝트는 어떤 종류의 서비스를 사용합니다? *

       ㅁ. Compute Engine, BigQuery, Cloud SQL, Cloud Storage, MAPs API 등과 같은 유료 서비스

       ㅁ. Google 클라우드 메시징과 같은 무료 서비스

       ㅁ. 둘다

6. 추가 할당량이 필요한 이유? *

  -> 마지막께 좀 귀찮다... 그냥 나는 프로젝트가 많아서 필요하다 씀......

 

그리고 제출하면 된다...

 

그러면, 2틀정도 후에 연락준다고 메일 확인하란다...

Posted by Tyson
2021. 1. 22. 18:26

GCP를 사용하면서 좋은거는 진짜 배포가 너무 편하다.

 

로컬에서 작업하고, GCP들어가서, 프로젝트 생성하고, 

 

빌드한 폴더에가서 app.yaml 파일에 리소스 세팅해주고,

 

그냥 명령어 쳐주면 끝이다.

> gcloud init

# 프로젝트 선택

> gcloud app deploy 

 

사실 1분은 아니고.... 실제 배포 까지는 3-5분정도 걸리는거 같다.

 

근데, 바로바로 반영하기 쉬운게, 

나중에는 gcloud app deploy 만 해주면, 알아서 배포가 되니까....

너무 편하다.

 

그냥 로컬에서 프로젝트 복사해서 수정한 다음에, 

프로젝트 생성하고, 연결만 해주고, 배포 하면, 찍어내듯이 웹사이트를 만들 수 있다.

 

 

먼저, GCP 가입하고, 

결제카드 등록을 해라.

그래야지, 배포가 된다. 처음에는 무료 크레딧 많이 주니까... 

그리고, 그거 없어도...많이 사용하지 않는이상은 거의 과금이 안된다.

 

나 같은 경우는 Angular로 작업한거 배포하는건데, 

Node, PHP, Java 등등 다 지원한다.

 

 

1. 새 프로젝트를 생성

 

프로젝트 이름은 내가 보는거니까 포기 좋게 쓰고,

프로젝트ID는 구분자 같은거다...나중에 삭제할때나, 관리용으로 사용한다.

그냥 랜덤으로 생성해서 사용하면 된다.

그리고 "만들기"

 

2. 어플리케이션 만들기

"App Engine"에 들어가면, 어플리케이션이 없다고 아래처럼 뜰거다

"어플리케이션 만들기" 클릭 하면, 지역선택이 뜬다.

"asia-northeast3"가 서울이다.

한국에서 사용자가 많으니까. 서울로 선택

Angular 프로젝트니까.. Node.js 선택

여기보면, 언어별로 선택하면 된다.

거의다 있다.

생성하고 나면, 아래처럼 나온다.

 

 

3. Cloud SDK 설치

 

오른쪽에 있는 버튼을 눌러서, SDK를 다운 받아서 설치한다.

 

이건 생략~ 인터넷에 많으니까~ 터미널에서 gcloud 쳤을때 명령어 뜨면 설치된거다.

 

 

4. 프로젝트 빌드하기

프로젝트를 빌드한다. 

나같은 경우는 빌드하면,

/dist/app/myproject

폴더로 파일이 생성되게 해 놓았다.

 

 

5. yaml 파일 생성

app.yaml 파일이 있어야 한다.

배포시 프로젝트 설정을 해놓는건데,

인스턴스는 몇개, cpu는 몇개 메모리는 몇개 이런거 세팅하는거다.

app.yaml 파일내용

runtime: nodejs12
env: standard
service: default

instance_class: F1
automatic_scaling:
  target_cpu_utilization: 0.8       # default value 0.6
  min_instances: 1
  max_instances: 1
  min_pending_latency: 30ms         # default value 30ms
  max_pending_latency: automatic    # default value 30ms
  max_concurrent_requests: 10

env_variables:
  NODE_ENV: development
  PORT: 8080

handlers:
  - url: /
    static_files: index.html
    require_matching_file: false
    upload: index.html
  - url: /(.*)
    static_files: \1
    require_matching_file: false
    upload: .*
  - url: .*
    script: auto
    

자세한 설명은 아래 링크에서

cloud.google.com/appengine/docs/standard/nodejs/config/appref

 

여기서 중요한게..node 버젼이랑

handlers 부분이다.

나 같은 경우는 빌드를 하고, 

빌드된 폴더에 app.yaml파일을 복사하고, 

거기에서 gcloud 를 통해서 배포를 한다.

 

위 프로세스를 나중에 쉘 스크립트로 만들어 놓으면 편하다.

 

빌드 -> app.yaml파일 복사(빌드된폴더(/dist/app/project)) -> 폴더로 이동(cd /dist/app/project) -> 배포(gcloud app deploy)

  

내가 몇시간동안 뻘짓한게... handlers에 index.html 를 절대경로 없이 index.html로만 했었다. 

\1 같은 경우가 . 를 말하는거고. 

.* 같이 root 경로로 한다고 해줘야 한다....

 

현재 위치 표시로 ./ 이렇게도 해보고 다 해봤는데....

결국 이거다....

 

---------------

위 처럼 해도 되고, 매번 yaml 파일 복사하는게 불편하면, 편법으로

빌드 위치를 /dist/deploy/myproject 폴더에 빌드된 파일을 넣고,

deploy  폴더에 app.yaml를 만들어서. 

handlers 부분을 아래처럼 지정해줬다.

static_dir 부분에 ./  .  등등 별거를 다 넣어보았는데.... 안먹는다..

그래서 그냥 하위 폴더 만들어서, static_dir에도 하위 폴더를 넣어주었더니....된다...

    
handlers:
  - url: /
    static_files: dist/deploy/myproject/index.html
    upload: dist/deploy/myproject/index.html

  - url: /
    static_dir: dist/deploy/myproject

 

6. 초기화하기

나처럼 app.yaml복사 안하고 위처럼 할려면 dist/deploy 폴더로 이동하고,

> cd dist/deploy

/deploy/

   --app.yaml

   -- myproject/

이렇게 파일을 넣고, 

 > gcloud init 하면 된다.

 

그전에 로그인은 꼭 하기

> gcloud login

$ gcloud init
Welcome! This command will take you through the configuration of gcloud.

Settings from your current configuration [default] are:
core:
  account: 내이메일주소@gmail.com
  disable_usage_reporting: 'True'
  project: my-project

Pick configuration to use:
 [1] Re-initialize this configuration [default] with new settings 
 [2] Create a new configuration
Please enter your numeric choice:  1

Your current configuration has been set to: [default]

You can skip diagnostics next time by using the following flag:
  gcloud init --skip-diagnostics

Network diagnostic detects and fixes local network connection issues.
Checking network connection...done.                                                                                                                                                                                                    
Reachability Check passed.
Network diagnostic passed (1/1 checks passed).

 

나같은 경우는 이전에 했던게 있어서, 1번선택, 새로하는사람은 2번선택한다.

 

 

그 다음에, 계정선택

Choose the account you would like to use to perform operations for 
this configuration:
 [1] 내이메일@gmail.com
 [2] Log in with a new account
Please enter your numeric choice:  1

You are logged in as: [내이메일@gmail.com].

 

위처럼 로그인된 계정을 쓸지, 새로운 계정으로 할지 물어본다.

당연히 1번

 

 

그다음에, 프로젝트 선택

Pick cloud project to use: 
 [1] my-project1
 [2] my-project2
 [3] my-project3
 [4] my-project4
 [5] Create a new project
Please enter numeric choice or text value (must exactly match list 
item):  1

Your current project has been set to: [my-project1].

GCP에 생성된 프로젝트 목록이 뜨고, 어떤 프로젝트를 선택할지 고르라고 한다.

 

여기서 아까 만들어 놓은 프로젝트 번호를 선택하면, 아래같은 설명이 나오고 끝난다.

Not setting default zone/region (this feature makes it easier to use
[gcloud compute] by setting an appropriate default value for the
--zone and --region flag).
See https://cloud.google.com/compute/docs/gcloud-compute section on how to set
default compute region and zone manually. If you would like [gcloud init] to be
able to do this for you the next time you run it, make sure the
Compute Engine API is enabled for your project on the
https://console.developers.google.com/apis page.

Your Google Cloud SDK is configured and ready to use!

* Commands that require authentication will use m20korea@gmail.com by default
* Commands will reference project `m20-center` by default
Run `gcloud help config` to learn how to change individual settings

This gcloud configuration is called [default]. You can create additional configurations if you work with multiple accounts and/or projects.
Run `gcloud topic configurations` to learn more.

Some things to try next:

* Run `gcloud --help` to see the Cloud Platform services you can interact with. And run `gcloud help COMMAND` to get help on any gcloud command.
* Run `gcloud topic --help` to learn about advanced features of the SDK like arg files and output formatting


Updates are available for some Cloud SDK components.  To install them,
please run:
  $ gcloud components update

 

 

7. 배포하기

이제 마지막이다. 배포하기다.

> gcloud app deploy 

만 치면, 바로 배포하지만, 나같은 경우는 yaml파일도 프로젝트별로 있어서, 명령어에 직접 다 써준다.

> gcloud app deploy app.yaml --project=project1

                                  yaml파일명  프로젝트명

이렇게 하면 굳이 app.yaml파일로 안하고, 내가 원하는 파일명으로 만들어 놓아도 되고, 프로젝트도 선택해서 배포하게 된다.

 

$ gcloud app deploy
Services to deploy:

descriptor:      [/Users/Documents/GitHub/workspace/project1/dist/apps/project1/app.yaml]
source:          [/Users/Documents/GitHub/workspace/project1/dist/apps/project1]
target project:  [project1]
target service:  [default]
target version:  [20210125t152323]
target url:      [http://project1.du.r.appspot.com]


Do you want to continue (Y/n)?  Y

Beginning deployment of service [default]...
Created .gcloudignore file. See `gcloud topic gcloudignore` for details.
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 166 files to Google Cloud Storage              ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.                                                                                                  
Setting traffic split for service [default]...done.                                                                                                                     
Deployed service [default] to [http://project1.du.r.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s default

To view your application in the web browser run:
  $ gcloud app browse

 

머...대충 경로들 나오고, 배포시 url 정보 나오고, 배포가 끝나면,  아래 설명 나오고 끝난다.

대부분, 프로젝트명.알파벳.알파벳.appspot.com 이렇게 만들어진다.

근데, 만약 프로젝트명이 중복이 없으면, 프로젝트명.appspot.com 으로 도 만들어진다.

 

 

으아...진짜 이거 쓰다가..... app.yaml 설정때문에 몇일만에 다쓴다...

api빌드해서 배포할때랑, web 배포하는게 좀 틀려서...좀 해맸다.

 

Api같은 경우는 package.json에 node main.js 써주고, main.js로 실행하니까, yaml에 따로 세팅할게 없었는데...

 

Web배포같은 경우는 빌드한거를 올리니....Yaml에 index.html 위치를 써줘야한다.

 

그리고 로그보는 명령어는 

> gcloud app logs tail -s default 하면 된다.

 

 

배포시 위방법 말고, 버킷에 올리고, 배포하는 방법도 있는데...

그거는 아래 링크 참고하길.

www.cs.virginia.edu/~up3f/cs4640/supplement/angular-deployment.html

 

 

먼저 이거 설명 올리신 분이 있는데.. 이분도 설명 잘 해놓으셨으니, 참고 하길 몽고디비 세팅부분까지 설명 있음.

online.codingapple.com/unit/nodejs-deployment-googlecloud/?id=1826

이 분은 GCP 기본 8080이기 때문에 server.js에 listen 8080 세팅을 해주셨는데... 

나는 그냥 handlers에서 index.html불러오는걸로 끝냈다.

 

 

파이어베이스는 배포하기 더 쉽다.

그건 다음에 포스팅하겠다.

 

Posted by Tyson
2021. 1. 22. 16:39

 

포스트맨에서 json으로 post 날리는데....자꾸 아래 이미지처럼 에러가 뜨더라

 

 

localhost에서 테스트 중이라..

https 가 아니라 그런가 해서...

세팅에 들어가서 

ssl 관련된거 다 disable 시켜도 안되더라...

 

그러다 찾은거는 

Header의 Content-Type를 바꿔줘야 한다.

 

 

헤더탭으로 들어가서, 사람눈에 "8 hidden"이 있다. 이거를 클릭하면, 기본 Header값이 보인다.

 

 

처음에는 Postman-Token인줄 알고, 설정가서, off하고 했는데... 다 아니고,

Centent-Type에 application/json 를 써주면 된다.

그리고, Content-Length도 꼭 포함시켜줘야한다.

저거 체크 안했다가...계속 안되서.... 보니까.

기본있던 체크는 다시 체크하고, 

Content-Type만 application/json 으로 수정해주니까 된다.

 

Accept도 application/json 해주라는 글도 있는데...

나는 그냥 */*로 모두로 바꿔놓았다. 혹시 */*로 안되어 있거나 다른거 써있으면, 바꿔야된다.

 

 

아...이것때문에 세팅을 몇번을 바꿨네...ㅠㅠ

 

Posted by Tyson
2021. 1. 20. 17:38

몽구스를 사용해서 

몽고DB 사용하는데...

 

var user = mongoose.model('user', dataSchema);

이런식으로 쓰면....

 

DB에 저장될때, users 컬렉션으로 저장된다.

 

모델명에 s를 붙이는게 규칙이다.

 

컬렉션명을 지정안해주면, 복수형으로 s가 붙어서 저장된다.

 

Mongoose 5.x 부터는 이거를 끌수도 있다.

mongoose.pluralize(null);

 

 

스키마 만들때, 내가 원하는 컬렉션명을 쓰고 싶을때는 아래처럼 옵션을 넣어서 표기해 줘야한다.

const UserSchema = new mongooseSchema( {

userName: mongoose.Schema.Types.String,
},

{

collection: 'customer'

});

 

 

 

참고 : 

stackoverflow.com/questions/10547118/why-does-mongoose-always-add-an-s-to-the-end-of-my-collection-name

Posted by Tyson
2020. 12. 16. 13:21

GAE(Google App Engine)에 node 올려서 사용중인데...자꾸 서버가 재시작하고,

 

재시작하면서 연결이 끊기더라....ㅠㅠ

 

처음에는 아래 같은 문구가 나오고, 재시작이 자꾸 되길래...

 

먼가 오류가 있어서 그런줄 알았는데.... 

 

인스턴스를 늘려야하는 문제였다.

 

내 최대 인스턴스를 1로 해놓았는데...

 

최대 인스턴스를 1로 하는것은 오류가 밠생하기 쉽기 때문에 않좋다더라.

 

gae.yaml 파일에서

automatic_scaling 의

max_instances를 1 말고, 2-3정도로 올려주니까...

재부팅 현상이 없어졌다.

 

 

참고,

stackoverflow.com/questions/61323488/google-app-engine-restarting-automatically-randomly

 

Posted by Tyson
2020. 10. 28. 13:27

위시에서 직구하다보면, 중간에 한국 도착해서.....

 

더이상 업데이트가 안될때가 있다.

 

분명히, 21일날 한국 도착해다던데... 다시 CHN에 도착이라고 뜨더라..

이게 한국어 번역이 잘못된거 같은데..... 여튼....

그래서 한국 세관에서 반송 시켰나?? 하는 얼토당토않는 생각을 하게됨...

 

 

그리고, 저렇게 26일 운송사에 전달 뜨고나서는 17track에서도 조회가 안된다..

그래서 제일 확실한거는 세관에 직접 확인해 보는거다..

 

아래 사이트 

https://unipass.customs.go.kr/csp/index.do

 

국가관세종합정보망 서비스

환율정보 국가별 수출, 수입 환율정보 테이블

unipass.customs.go.kr

에 접속해서,

 

 

화물진행정보 -> M B/L - H B/L  선택 ->  두번째칸에. 위시에 있는 송장번호를 복사해서 붙여넣기하고, 조회한다.

 

그러면 아래같이 통관심사 결과가 뜬다.

 

 

내꺼 같은 경우는 승인되고, 세관에서 나간거다.

 

직구할때 한국에서 택배는 메이저가 대부분 아니라서.... 국내 조회는 잘 안되지만...

 

세관 통과했으면, 몇일안에 택배회사에서 전화온다

 

그리고 중간에 통관번호 입력하라고, 문자오면, 꼭 통관번호  입력하길...

Posted by Tyson
2020. 9. 24. 19:03

앵귤러로 비디오 재생을 해야하는데...

mat-video를 사용하려는데...아래처럼...계속, 무한로딩이 걸리더라..

 

분명히 소스를 봐도, 링크도 제대로 불러오는데...

www.npmjs.com/package/mat-video

사이트에서 봐도 

설치하고 ,하면 된다는데...

사용할때, src에 난 바인딩한 값을 넣어야한다.

<mat-video [src]='videoDoc.videoUrl' ></mat-video>

이렇게 했는데도 계속 무한로딩이고...소스를 봐도, URL 제대로 입력되는데..안된다..

 

데이터 불러오는게 아니고, 아래처럼 아에 url를 넣으면 잘 불러와진다...

<mat-video src="https://youtube.com/fffff/ffff.mp4" ></mat-video>

에러도 안뜨고....

이미지 띄우는것처럼 아래 방법들을 다 써봤다...

<!-- HTMLImageElement의 width 프로퍼티에 연산 결과 바인딩 -->
<img [src]='/some/image.jpg' [width]='10 * 20'>

<!-- HTMLImageElement의 src 프로퍼티에 컴포넌트의 someImgUrl 바인딩, 단, 그대로 사용 -->
<img [src]='someImgUrl' width='128'>

<!-- 삽입식이며, 동일한 결과, 단, 문자열로 치환 -->
<img src="{{someImageUrl}}" width="128">

그래도 안된다...

 

그러다. 혹시나 해서.... String 문자열로 치환했다.

component쪽에 바인딩값을 스트링으로 치환했다...

this.videoDoc.videoUrl = String(this.videoDoc.videoUrl);

갑자기 잘뜬다.

 

src에 바인딩한값을 바로쓰면, 문자열로 인식을 못하는거 같다.

 

그래서 string으로 치환해줘야  src에서 문자열로 인식하는거 같다.

Posted by Tyson