20230823(수)_ 최종프로젝트 진행

금일 달성 항목

1) user- mypage css 완성
2) S3 백엔드 연결 완료

3) front 이미지 등록 기능 구현 중

---

문제 해결 과정 1 - 모달창 중복 이슈

[문제]

수정 버튼을 누르면 모든 화면이 소개 수정화면 팝업으로 똑같이 나오는 이슈가 있었습니다.

 

 

[시도 및 해결]

 data-bs-target="#" 이라는 부분이 있는데 그 부분과 모달이 띄어지는 부분을 같게 설정하니 중복되는 오류가 사라졌습니다

 

 

mypage-user.js

<!-- 모달 -->
          <button
            type="button"
            class="btn btn-primary fa-solid fa-pen"
            data-bs-toggle="modal"
            data-bs-target="#user"
          >
            수정
          </button>
          <%- include('includes/user') %>
          <!-- 모달 -->
          <!-- 개인정보 -->

user.ejs

<!-- Modal -->
<div
  class="modal fade"
  id="user"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">개인정보 수정</h1>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body text-start">
        <!-- 이름 -->
        <div class="modal-body">
          <div class="mb-3 row">
            <label class="col-sm-3 col-form-label">이름</label>
            <div class="col-sm-9">
              <input class="form-control" />
            </div>
          </div>
          <!-- 이름 -->
          <!-- 이메일 -->
          <div class="mb-3 row">
            <label class="col-sm-3 col-form-label">이메일</label>
            <div class="col-sm-9">
              <input class="form-control" />
            </div>
          </div>
          <!-- 이메일 -->
          <!-- 전화번호 -->
          <div class="mb-3 row">
            <label class="col-sm-3 col-form-label">전화번호</label>
            <div class="col-sm-9">
              <input class="form-control" />
            </div>
          </div>
          <!-- 전화번호 -->
          <!-- 성별 -->
          <div class="mb-3 row">
            <label class="col-sm-3 col-form-label">성별</label>
            <div class="col-sm-9">
              <input class="form-control" />
            </div>
          </div>
          <!-- 성별 -->
          <!-- 주소 -->
          <div class="mb-3 row">
            <label class="col-sm-3 col-form-label">주소</label>
            <div class="col-sm-9">
              <input class="form-control" />
            </div>
          </div>
          <!-- 주소 -->
          <!-- 생년월일 -->
          <div class="mb-2 row">
            <label class="col-sm-3 col-form-label">생년월일</label>
            <div class="col-sm-9">
              <input class="form-control" />
            </div>
          </div>
          <!-- 생년월일 -->
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary">삭제</button>

        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          취소
        </button>
        <button type="button" class="btn btn-primary">저장</button>
      </div>
    </div>
  </div>
</div>

 

[알게된 점]

단순한건데 막상 구글링하려면 잘 못찾아서 너무 답답합니당..

---

문제 해결 과정 2 - S3 access defind 이슈

[문제]

S3를 모두 구현했는데 Access Defind 라는 오류가 계속 띄워지는 상황이었습니다.
aws에서 생기는 오류 처럼 보여 확인이 필요했습니다.

 

 

[시도 및 해결]

1. 미국 유튜브를 그대로 따라해서 위치가 미국 북부로 지역이 설정되어있었습니다.
저는 제가 생성한 서울 아시아 기준으로 수정해주었어야 했는데 이것이 문제였습니다.

AWS_S3_REGION='ap-northeast-2'

2. s3권한 설정에 대한 이슈였습니다.

엑세스를 퍼블릭으로 설정을 하고 버킷정책을 추가해주었습니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::버킷이름",
                "arn:aws:s3:::버킷이름/*"
            ]
        }
    ]
}

 

 

[알게된 점]

aws는 복잡합니다.

---

문제 해결 과정 3 - Git rebase 복구 이슈

[문제]

동료가 git rebase를 하고 

 

[시도 및 해결]
aws에서 생기는 오류 처럼 보여 확인이 필요했습니다.

[TIL #51] git rebase를 잘못한 경우 되돌아가기

 

[알게된 점]

구글링을 잘하면 좋겠습니다.