[TIL] 20240531 75일차

Auth React 튜터님 피드백 + Auth 최종 정리

[메모 / 생각 정리]

 

튜터님께서는 Auth와 관련해서 우리 프로젝트에 알맞은 기술적 조언을 해주시진 못했다.

기본적으로 React 트랙에서는 OAuth로 Auth 기능을 수행하기 때문이다.

따라서 우리 프로젝트에서 Auth와 관련된 고민을 설명하고 같이 아이디어를 공유하는 시간을 가지게 되었고, 튜터님 피드백으로 결론을 내진 못했다.

하지만 지금까지의 팀 내에서 합의를 한 내용과 튜터님들의 피드백을 종합한 결과

우리 프로젝트에서 Auth 기능은 아래와 같이 수행하기로 했다.

• 인증 방식: JWT (Access token, Refresh token)
• 토큰 유효성 검사: api 호출 ( accounts/api/verify/ )
• 유저 정보를 가져오는 방식: api 호출 ( /users/api/<int:user_pk>/ )
• 전체적인 flow
  1. 로그인 → access token, refresh token을 클라이언트의 LocalStorage에 저장
  2. base.html을 상속받는 각 template에서 isLogin() 함수를 이용해 현재 로그인한 유저 정보를 가져올 수 있다.
  3. isLogin() 함수에서는 access token의 존재 여부를 확인
     1. 만약 있다면 access token의 유효성 검사
        1. 유효하다면 token을 decode 한 후 user_pk 값에 접근할 수 있다. 해당 user_pk 값을 이용해 /users/api/<int:user_pk>/ api를 호출하여 유저 정보를 얻고 이를 리턴한다.
        2. 유효하지 않다면 tokenRefresh 함수를 실행. refresh token이 유효하다면 새로운 access token과 refresh token을 발급받을 수 있다. refresh token 마저 유효하지 않다면 로그인 페이지로 이동한다.
     2. 만약 없다면 null을 리턴한다.

 

콘텐츠 영역 - 캐러샐

[기능 구현]

 

1. 논리적 흐름을 먼저 잡았다.

# bootstrap의 캐러샐을 사용한 것이고
# 태그의 특정 속성에 index 값을 사용해야 하는 부분이 있어서 변수를 두었음.
content_idx = 0

if youtube_url:
    해당 유튜브 영상의 썸네일이 src로 들어가는 캐러샐 버튼을 먼저 생성
    해당 유튜브 영상의 iframe도 생성
    캐러샐 div에 append
    content_idx += 1
for item in screenshot:
    item의 이미지 링크가 src로 들어가는 캐러샐 버튼을 생성
    # 만약 유튜브 링크가 없었어서 처음으로 캐러샐 div에 append 하는 버튼 태그라면
    if content_idx == 0:
	      캐러샐 버튼의 'class' 속성을 'active' 로 설정
        캐러샐 버튼의 'aria-current' 속성을 'true' 로 설정
    item이 src로 되어있는 img 태그도 생성
    캐러샐 div에 append

 

2. 논리적 흐름에 따라 코드를 작성

 

 

3. 작성하고 나서 한 번 더 살펴본 부분

 

ⓐ 부트스트랩 캐러샐 동작에 맞도록 태그의 속성을 설정해주는 부분 (캐러샐에서 첫번째 요소인 경우 class=”active” 와 aria-current=”true” 속성을 넣어줘야 함)

 

 

ⓑ youtube url의 콘텐츠 ID를 파싱하는 부분

# 썸네일 이미지 src 값 형식
<https://img.youtube.com/vi/>/0.jpg

# 유튜브 iframe 태그의 src 속성에 들어갈 값 형식
<https://www.youtube.com/embed/>

 

 

const youtube_id = youtube_url.split('/')[3].replace('watch?v=','').split('?')[0].split('&')[0]

 

① .split(’/’)[3] : https://www.youtube.com/watch?v=Ncl9VfjRyZg 에서 3번째 요소는 watch?v=Ncl9VfjRyZg 에 해당한다.

② .replace(’watch?v=’, ‘’) : ’watch?v=’ 을 제거한다. Ncl9VfjRyZg 만 남게 된다.

③ .split(’?’)[0] : 링크에 추가로 쿼리스트링이 붙은 경우 쿼리스트링을 제외한 텍스트만 가져온다. 0번째 인덱스 값만 가져옴

④ .split(’&’)[0]: 마찬가지로 링크에 추가로 쿼리스트링 조건이 붙은 경우 쿼리스트링을 제외한 텍스트만 가져온다. 0번째 인덱스 값만 가져옴

① ~ ④ 과정을 거쳐서 youtube 콘텐츠 ID를 가져올 수 있다.

그리고 가져온 youtube 콘텐츠 ID로 썸네일 이미지 src 와 유튜브 iframe 태그의 src 속성에 들어갈 값 형식에 맞춰 src들을 작성할 수 있다.

 

 

ⓒ 디자인적 요소(css)

 

.scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    height: 170px;
  }
  
.scroll-container button {
  display: inline-flex;  /* inline-flex로 변경하여 버튼을 인라인 요소로 유지하면서 flexbox 사용 */
  align-items: center;  /* 수직 방향 중앙 정렬 */
  justify-content: center;  /* 수평 방향 중앙 정렬 */
  width: 300px;
  height: 150px;
  padding: 0;  /* 패딩을 0으로 설정하여 버튼 내부 여백 제거 */
  border: none;  /* 버튼 테두리 제거 */
  background-color: transparent;  /* 버튼 배경을 투명하게 설정 */
  outline: none;  /* 포커스 시 생기는 외곽선 제거 */
}
  
.scroll-container img {
  max-width: 100%;  /* 이미지가 버튼 크기를 넘지 않도록 설정 */
  max-height: 100%;  /* 이미지가 버튼 크기를 넘지 않도록 설정 */
  object-fit: cover;  /* 이미지가 버튼에 꽉 차도록 설정 */
}

JS로 생성한 캐러샐의 button 요소와 콘텐츠 요소들에 대해서 스타일을 지정해줬고 버튼의 횡스크롤(가로 스크롤)과 버튼에 이미지가 꽉 차도록 보이기, 버튼을 선택했을 때 해당 버튼에 맞는 이미지나 유튜브 영상을 보여주는 기능을 수행할 수 있었음.