개발자로 취업하려고 node 공부중입니다.

DI 의존성 주입 

동일한 기능을 하지만 매번 똑같이 만든다는 비효율적,

클래스를 새로 만든다 -> 강하게 결합이 되었다 ex) const cashService = new CashService() -> 만약 서비스 기획이 변경되어서 서비스를 변경해야 하면 new CashService가 사용되는 부분은 전부 수정을 해야하 한다.

해결 : constructor을 사용한다 -> 의존성을 주입 -> 바깥의 것을 주입. -> 싱글톤 패턴 != 의존성 주입

Front도 공부를 해야겠다.

결국 프로젝트를 발표하는데 프론트를 보여줘야고 한다. 이럴꺼면 프론트를 공부했는데

로컬에서는 잘 작동되는데 배포로 aws에 올리면 상품등록 페이지가 망가지는 문제가 발생했다. localhost:3000으로 요청을 보내는 에러가 있었는데..

Docker

데이터 또는 프로그램을 격리시키는 기능을 제공하는 소프트웨어 -> 다양한 프로그램과 데이터를 각각 독립된 환경에 격리하는 기능

컨테이너 : 조립형 작은 창고 -> 용량이 허락하는한 하나의 Docker에 여러개를 만들 수 있다.

이밎 : 컨테이너의 빵틀 -> 소프트웨어를 담는 것EX) MySQL 컨테이너는 MySQL 이미지가 필요하다.

Docker의 제약사항 : 내부적으로 리눅스가 사용된다. -> 컨테이너에서 동작시킬 프로그램도 리눅스용 프로그램

격리 시키는 이유

대부분의 프로그램은 단독으로 동작하는것이 아니고 소프트웨어는 여러개의 프로그램으로 구성되었다.

-> 프로그램 하나를 업데이트 하면 다른 프로그램에 영향을 미친다. 서버를 구축 할때 신중하게 따져야 한다.

설계에 문제가 없어도 설치에 오류가 생기면 프로그램간의 공유에 원인이 있다.

-> 한 서버에는 한 버전만 설치 가능 -> 버전 연동 실패 -> 디렉터리 공유 -> 설정 파일 섞임 -> 충돌

컨테이너를 사용하면 각 프로그램은 격리가 되어서 실행가능 -> 충돌 없음

서버 : 어떤 서비스를 제공하는것 기능적의미의 서버, 물리적 컴퓨터로서의 서버

무슨무슨 서버 = 무슨무슨 기능을 제공, 물리적 컴퓨터  : 찐 컴퓨터

서버의 기능 = 소프트웨어가 결정

도커는 실행 환경을 독립적으로 격리한 컨테이너

ORM을 사용하는 이유 

MySQL은 관계형DB로 데이터를 다루는 DB이고 서버를 만드는 NestJS는 객체지향으로 프로그래밍하고 있다. 서버는 DB와 서로 데이터를 주고 받고 해야 하는데 관계형과 객체지향형간의 데이터를 바라보는 차이점이 생긴다. ORM은 그 차이점으로 인해 생기는 개발자의 부담을 해결해주기 위해 사용을한다. ORM을 통해서 관계 지향의 데이터를 객체형태로 변경해서 자동으로 SQL문을 작성하면서 맵핑을 해준다.

ORM을 쓰면서 생기는 장점은 ORM이 자동으로 맵핑을 해줌으로 DB와의 통신에 쓰이는 만큼의 노력을 비즈니스로직에 집중을 할 수 있다는 장점이 있다. ORM을 사용하기에 필수적인 것은 SQL문을 사용 할 수 있어야 하는 것이다. 프로젝트가 복잡하게 되면 직접 SQL문을 사용해야 속도나 복잡도등 많은 부분이 ORM보다 효율적이게 된다. 또한 ORM이 뱉는 SQL문법에러를 이해하기 위해서도 SQL문을 사용할 수 있는 능력은 반드시 필요하다

N+1 문제 ORM을 쓰면 생기는 문제

- 추후 정리 필요

Docker를 사용하는 이유

https://leehan098.tistory.com/25 - 3/21 작성

Msa란?

-추후

리팩토링의 기준과 적용 대상

-추후

  async prDetail(productId: number) {
    const detail = await this.productRepository
      .createQueryBuilder('products')
      .leftJoinAndSelect('products.category', 'category')
      .leftJoinAndSelect('products.images', 'images')
      .where(`products.id = :id`, { id: productId })
      // .andWhere(`status = :status`, { status: 'sale' })
      .getMany();

    return detail;
  }

Join을 하는데 쿼리가 드러운것도 있고 앞으로 쿼리빌더로 바꾸고 싶은 부분도 있어서 새로 제작해야 하는 api에 쿼리 빌더를 써봤는데...

생각보다 좋은것 같다. 조인할 것 붙이고 where로 제한주고 andWhere로 추가 조건 주고 다를 것이 없네!!

const fileStream = fs.createReadStream(tmpImagePath);
    const writeStream = fs.createWriteStream(finalImagePath);
    fileStream.pipe(writeStream);
    await fs.promises.unlink(imagePath);

    // ProductImagesEntity 인스턴스 생성
    const productImage = new ProductImagesEntity();
    productImage.productId = productId;
    productImage.imagePath = imageFilename;

    // ProductImagesEntity 인스턴스 저장
    await this.productImagesRepository.save(productImage);

팀원이 쓴 이미지 업로드 api에 들어가는 부분인데.... 

tmpImagePath는 이미지 경로? finalImagePath는 최종 경로라고 한다.

fs.createReadStream을 통해 이미지를 읽고 writeStream으로 최종 경로에 저장을 하는것 같은데.... 좀 더 봐야겠다.

function productSearch() {
  const search = document.getElementById('search').value;
  console.log(search);

  axios
    .get(`http://localhost:3000/orders/productSearch?search=${search}`)
    .then((res) => {
      let data = res.data.data;
      let temp = '';
      for (let i = 0; i < data.length; i++) {
        const timeAgo = getTimeAgo(data[i].createdAt);

        // 검색어 배경색 적용
        const title = data[i].title.replace(
          new RegExp(`(${search})`, 'gi'),
          '<span style="background-color: yellow">$1</span>',
        );

        temp += `
         <div class="container-fluid" onclick="alert('상품디테일 연결예정')" style="border-bottom: 3px dotted #5cd7f2; margin-top: 20px; padding-bottom: 10px">
                     <div class="row">
                      <div class="col-md-3" style=" padding: 0">
                        <img src="https://news.koreadaily.com/data/photo/2023/03/10/202303040941779270_6404a4b927e18.jpg" alt="spcFuck" 
                        style="width: 100%; height: 100%; margin: 0" />
                       </div>
              <div class="col-md-9">
                <h3>${title}</h3></br>
                <h4>${data[i].price}원</h4>  
                <h6>${timeAgo}</h6>
                <span>조회: ${data[i].viewCount}회</span>
                <span style="float: right;">🎯 ${data[i].dealCount} ❤${data[i].likes}</span>
              </div>
            </div>
          </div>`;
      }
      document.getElementById('bb').innerHTML = temp;
    })
    .catch((error) => {
      alert(error.response.data.message);
      window.location.reload();
    });
}

검색하는 기능을 하는 함수인데 다른 팀원이 만든 코드이다. -> 쿼리스트링을 이용해서 검색창에 쓴 search를  api로 날려서 find로 찾는 과정을 담고있따.

지금은 Sevice에서 Exception을 사용해서 서비스에서 status 코드하고 에러를 보내주는데.... 

일단은 여기서 보내도 프론트에서 401,403,404에러를 잘 받아준다.... 

튜터님의 이야기에 따르면 실무에서 Service에서 보내는 사람이 반 정도 된다고 한다.....

나중에 controller에서 보내는 방법을 해야 겠다.

axios로 서버에서 보내는 데이터를 받아서 innerHTML로 데이터를 넣는 것을 하고 있는데 가격이 제대로 나오지 않는다.....

콘솔에는 정상으로 찍히지만 왜그런지 내일 확인해봐야겠따.

오늘 쓰기 싫은 날 

프론트는 힘들다.

맞는지는 모르지만 @Cookies 데코레이터가 @UseGurads를 함깨 작동하는 것 같다...