TysonWorld

엥귤러에서  nestjs를 사용중이고, 오라클DB를 연결해서 몽고DB로 마이그레이션을 할려는데...

node 에서 연결하는거는 많이 있는데, nestjs는 별로 없어서....ㅠㅠ

먼저 oracledb 를 설치를 해야한다.

프로젝트 콘솔에서 아래를 실행해서 설치한다.

$ npm install oracledb

 설치하고 안되면, 오라클 클라인언트도 설치해야한다.

https://www.oracle.com/database/technologies/instant-client/macos-intel-x86-downloads.html

여기에서 zip 또는 DMG(맥인 경우)를 받아서 압축을 풀고,

  /opt 폴더내에, oracle폴더를 만들고, 거기에 압축폴더안의 파일들을 넣어준다.

/opt/oracle 

그리고, usr/local/lib 에 링크를 걸어줘야한다.

$ ln -s /opt/oracle /usr/local/lib

위 명령어로 링크를 걸어줌. 

압축폴더안에 ojbdc8.jar 파일이 있으면 된다.

그리고, 이제 소스코드에서 oracledb를 import 시킨다.

import * as oracledb from 'oracledb';

console.log('start connectting ');

async function run(){
    const connection = await oracledb.getConnection({
        user: 'db유저',
        password: 'db암호',
        connectionString : 'IP주소/SID'
    });
    const query = "SELECT CURRENT_TIMESTAMP FROM dual";
    const results = await connection.execute(query);
    
    console.log('result',results);
    console.log('END');

}
run();

connectionString에 DB아이피주소/ sid 등을 적어주면 된다. 

예 ) 192.168.0.111/orcl

혹시 포트번호가 1521이 아닐경우에는 

192.168.0.111:1522/orcl  이렇게 해주면 된다.

DB 통신이랑 Promise 로 해줘야되서.... await async 로 해줬다.

오라클에서 불러온 DB 정보를 객체를 만들어서 몽고디비에 넣는거는 추후 포스팅하겠다.

참고블로그 : 

https://m.blog.naver.com/scw0531/221169287236

엥귤러를 GCP에 배포하고 나서, 

암호가 틀렸을 경우 리다이렉트해 놓은 부분이 있는데,

계속 The requested URL was not found 란 화면이 뜨더라..

이게....없는 페이지 접근일 경우인데, 

404에러인데.... 그 부분이 처리가 안되서 그런거다....

이거는 로컬에서는 괜찮은데, GCP app.yaml에 세팅을 해줘야한다.

아래처럼 전체파일들에 대한 실행 위치를 설정해줘야한다.

- url: /(.*)
  static_files: dist/index.html
  upload: dist/index.html

혹시 index.html위치가 root라면, 

index.html로 바꿔야한다.

그러면, 에러시에 index.html로 이동한다.

ERROR TypeError: moment_1.default is not a function

위 같은 에러가 뜬다.

분명히, 인터넷에 있는 Moment 사용법 똑같이 했는데...

그리고 나는 moment를 사용해서 현재 시간을 가져와야하는데...

대부분 아래처럼 import하고 moment() 하면 현재 시간을 불러온다는데... 

import moment from 'moment';

moment();

위처럼하면... TypeError가 뜬다...

ERROR TypeError: moment_1.default is not a function

아래처럼 moment-timezone를 불러와야 한다.

import * as moment from 'moment-timezone';

위처럼 불러오고, moment() 하면 현재 시간을 불러온다.

ㅠ

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

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

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

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

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

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

아래처럼..

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

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

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

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

Array를 따옴표로 감싸고, 

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

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

여기서 업그레이드 질문, 

Array안에 Array 는?

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

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

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

포스트맨에서 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 해주라는 글도 있는데...

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

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

몽구스를 사용해서 

몽고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

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

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에서 문자열로 인식하는거 같다.

aws s3를 붙였는데...

처음에는 작동하다가, 패키지 업데이트 하고, 갑자기

aws s3 default is not a constructor 에러가 뜨더라....

아....진짜 웃긴건, 이전 소스로 커밋 되돌리기하면 되고....  

원복해서 패키지 업데이트한거 롤백해도..안되고....

그래서 결국 에러를 잡기로함...

위 에러를 찾아보니, app에서 여러군데에서 써서 그런거라고, 로컬변수를 글로벌 변수로 바꾸라는거다.

그래서  constructor(___) 안에 있는 private변수를 class로 올리고, public으로 바꾸니까 에러는 안뜨는데...

undefined 에러가 뜨더라.(ERROR TypeError: this.awsService is undefined) 

awsService를 만들어서, 불러와서 써는데, 거기에서 config 세팅하는 부분이 불러올때마다 setting이 되서,

벌써 aws가 세팅이 되어 있는데, 중복으로 하는거 같더라...

처음에 constructor 안에 S3세팅을 했는데,  아에 void클래스를 따로 만들어서, constructor에서는 

불러왔다.

    constructor() {
        this.setS3();
    }

    private setS3():void{
        const config = {
            bucketName: env.aws.bucketName,
            region: env.aws.region,
            accessKeyId: env.aws.accessKeyId,
            secretAccessKey: env.aws.secretAccessKey,
        };
        this.S3Client = new S3(config);
    }

이런식으로 했더니, 에러도 안뜨고, 잘 올라간다.

테이블에서 값이 길어져서, 너무 길면, 값뒤에  "..." 으로 표시하고 싶을때..

나 같은 경우는 이메일 주소를 보여주는데, 너무 길면, 표가 길어져서...잘라서 보여주려고 한다.

위처럼 이메일은 @ 다음을 ... 으로 표시하고, @ 없을때는 다 보여주려고 한다.

아래처럼 하면 된다.

                <ng-container matColumnDef="createdBy">
                    <th class="text-sm" mat-header-cell *matHeaderCellDef>createdBy</th>
                    <td class="text-sm" mat-cell *matCellDef="let data"> {{ (data.createdBy.length>10)?(data.createdBy|slice:0:data.createdBy.indexOf('@')+1)+'...':data.createdBy}}</td>
                </ng-container>

값을 불러오는 부분에서

{{ (data.createdBy.length>10)?(data.createdBy|slice:0:data.createdBy.indexOf('@')+1)+'...':data.createdBy}}

       값 길이가 10보다 클때, (data.createdBy|slice:0:data.createdBy.indexOf('@')+1)+'...'

        아닐때는          data.createdBy 

이렇게 했다.

10보다 클때는

(data.createdBy | slice:0:data.createdBy.indexOf('@')+1)+'...'

0부터 @이를 찾아서, @까지 보여주고, 뒤에 '...'를 추가하겠끔 했다.

slice는 값을 자르는 거고, 

slice 앞에는 파이프라인이다 '|'

indexOf는 문자열 찾는 거다.

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

여기에 툴팁을 추가하고 싶으면, 

                <ng-container matColumnDef="createdBy">
                    <th class="text-sm" mat-header-cell *matHeaderCellDef>createdBy</th>
                    <td class="text-sm" mat-cell *matCellDef="let data"  [matTooltip]=data.createdBy> {{ (data.createdBy.length>10)?(data.createdBy|slice:0:data.createdBy.indexOf('@')+1)+'...':data.createdBy}}</td>
                </ng-container>

[matTooltip]=data.createdBy

이거를 추가하면 된다.

[] 괄호가 없으면, data.createdBy를 출력하니까..

데이터 값을 보여줄때는 [] 괄호를 꼭 쓰자.

angular Date값이 UTC값으로 등록되어 있는데, 

Front단에서 보여줄때는 YYYY-MM-DD로 보여주고 싶을때,

                <ng-container matColumnDef="createdDate">
                    <th class="text-sm" mat-header-cell *matHeaderCellDef>createdDate</th>
                    <td class="text-sm" mat-cell *matCellDef="let data"> {{ data.createdDate | date:'yyyy-MM-dd' }} </td>
                </ng-container>

createdDate값이 

2001-10-31T15:00:00.000Z 

로 되어 있는것을 프론트에서 보여주는 방법은,

{{ data.createdDate}}

위 부분을 아래처럼 바꿔주면 된다.

{{ data.createdDate | date:'yyyy-MM-dd' }}

원하는 포멧으로  yyyy년도, MM월, dd 일 이렇게 표시하면 된다.