보다 나은 내일, 다이어리

import LogoSrc from './assets/logo.png';

/* ... */

const LogoDiv = styled.div`
  background-image: url(${LogoSrc});
  /* width and height should be set otherwise container will have either have them as 0 or grow depending on its contents */
`;

/* ... */

<LogoDiv />

`../assets/images/lala.jpg `로 했는데도 이상하게 안됐다!

이미지를 import 시켜와서 url에 넣어두고 width와 height을 주면 그제서야 잘 나오는 것 같다!

→ 왜? width와 height 값을 설정해주지 않으면 컨테이너가 0으로 설정되거나 컨테이너의 내용에 따라 변화한다! (auto가 되므로)

styled-components는 이미지를 import 해서 시키는 것을 권장한다! 정석이다!

백엔드 코드를 수정하고 저장하고 다시 시작하면 nodemon stuck restarting… 하면서 오류가 떴다.

`C:\\Windows;` `C:\\Windows\\system32;` `C:\\Windows\\System32\\Wbem`

를 시스템 환경변수에 넣어주면 ,,,!!! 드디어 restarting 에서 stuck되던 게 !!

다시 starting이 된다!!!

https://github.com/remy/nodemon/issues/1956

It was a Windows path thing. Windows was not able to get the path as it had unnecessary special characters like the &  and the whitespaces in the path names. Looks like Node is not able to resolve the paths.

⇒ 윈도우 환경변수의 path에 경로가 존재하지 않아서 노드가 path를 찾을 수가 없어서 starting을 하지 못했던 것이다!

multer, s3

[Node.js] multer-s3를 이용한 AWS s3 파일 업로드

아마존 웹 서비스 IAM 사용자의 액세스 키 발급 및 관리

iam에서 액세스키와 비밀 액세스 키는 한번 생성되면 다시 확인할 수 없으니 .csv로 저장해두거나 잘 메모해놔야 한다.

• multer, multer-s3: 파일 업로드 모듈
• aws-sdk: AWS 서비스 연결 모듈
• s3: s3 객체
• acl: 파일 액세스 권한
  • private : default, 버킷 소유자만 읽기/쓰기 가능
  • public-read: 읽기만 가능, 쓰기(수정) 불가능
  • public-read-writer: 읽기/쓰기 모두 가능
  • bucket: 버킷명
  • key: 파일명

혹시 multerS3에 다른 기능도 넣고 싶다면 공식문서를 참고하자.

multer-s3

• multer
  • single(fieldName): 하나의 파일을 받아서 저장
  • array(fieldName, 최대개수): 하나의 필드명을 가지는 여러개의 파일을 받아서 저장

오류: client.send()is not function

multerS3 와 aws-sdk의 버전이 달라서 생긴 오류였다.

다르니까 @aws-sdk/client와 @aws-sdk/abort-controller 모듈이 필요하다는 에러가 떴고 설치해서 실행하니까 client.send() 함수가 없다는 오류가 뜬 것이다.

버전을 2.~~으로 맞춰서 설치해주니까 두 모듈이 필요하다는 에러메시지가 안뜨고 해결됐다!

(근데 이걸 팀원분이 찾아낸 해결책인데 구글에 어떻게 검색하신 걸까?)

검색어: aws-sdk multer-s3 @aws-sdk/abort-controller

Can the multer-s3 package be used with AWS v3 NodeJS SDK?

→ multer-s3 패키지는 오직 aws-sdk v2 api만 지원한다.

오류: aws s3 access denied

[AWS] AccessDenined: Access Denied

• aws 계정에 대한 액세스
• 퍼블릭 액세스
• IAM 퍼블릭 액세스 차단도 풀어주고
• AmazonBracketFullAccess를 IAM으로 생성한 testUser에게 권한 부여했지만 아직 해결안됨
• accessDenied_solve 라는 커스텀 정책을 만들어서 testUser에게 권한 부여하니 잘 됨!
  AWS S3 Access denied 에러 (+ 버킷 정책 했는데도 안될때)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1405592139000",
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::dev-team8-bucket/*",
                "arn:aws:s3:::dev-team8-bucket"
            ]
        }
    ]
}

개선점:

오피스아워 중 코치님 조언

multer에서 로직처리를 하고 s3에 업로드를 하는 방식이 더 좋지 않을까?!

리뷰, 커뮤니티, 유저프로필 별로 폴더를 만들어서 넣어줌?

[AWS] Node.js Multer로 S3에 이미지 업로드하고 Mysql에 저장하기

aws s3 용량 확인하는 법 찾기

→ 5기가를 넘어서는 과금이 생김