[ KB IT's Your Life 7기 ] 서버사이드 컴포넌트 백엔드 개발 후기 | 게시판 수정과 인증 가드

안녕하세요!
KB IT's Your Life 7기 기자단 입니다
이제 정규 수업은 끝이나고 파이널 프로젝트에
들어가는 시기네요!!!
벌써 시간이 이렇게나 지났다니....시간이 빠르면 열심히 살고있다는 증거라고 생각하고 더더욱 열심히 개발하겠습니다><

이번 시간에는 게시판 수정 페이지를 마무리하고 인증 가드까지 붙이는 작업을 했어요!!!
기능 하나씩 붙여나가다 보니까 이제 진짜 서비스 같아 보이기 시작했습니다.

게시판 수정 페이지 마무리

수정 페이지에서 기본적으로 필요한 것들부터 준비했어요.

반응형 데이터를 위한 ref, reactive, 현재 글 번호를 알기 위한 useRoute, 수정 완료 후 이동을 위한 useRouter — 거의 항상 이 두 개가 세트로 따라다닙니다.

const route = useRoute()
const router = useRouter()
const articleNo = route.params.articleNo

상세 보기, 수정, 삭제 페이지에서는 항상 이 라인이 필요하다고 강조하셨어요.

---

첨부파일 삭제 — findIndex + splice

기존 첨부파일을 삭제할 때 배열 중간 요소를 제거해야 하는데, 이때 findIndex로 위치를 찾고 splice로 삭제하는 패턴을 배웠어요.

const idx = attachments.value.findIndex(f => f.no === fileNo)
attachments.value.splice(idx, 1)

서버에서 먼저 삭제하고, 그다음 클라이언트 배열에서도 제거하는 순서가 중요합니다.

---

이벤트 핸들러에 매개변수 넘기기

클릭 이벤트 핸들러를 연결할 때 평소에는 함수명만 적으면 이벤트 객체가 자동으로 전달돼요.
근데 이번에는 파일 번호 같은 커스텀 매개변수를 넘겨야 했는데, 그럴 때는 호출문 형태로 써야 합니다.

<!-- 매개변수 없을 때 -->
@click="handleSubmit"

<!-- 매개변수 있을 때 -->
@click="removeFile(file.no, file.name)"

이벤트 객체도 같이 넘기고 싶다면 $event를 명시적으로 추가하면 돼요.

---

SPA에서 파일 다운로드 — 동적 a태그

SPA 환경에서는 <a> 태그를 직접 HTML에 두는 걸 권장하지 않아요. 잘못 다루면 앱이 리셋될 수 있거든요.

그래서 자바스크립트로 동적으로 만들었다 제거하는 방식을 씁니다.

const a = document.createElement('a')
a.href = downloadUrl
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

화면에 보이지 않게 추가했다가 클릭을 강제로 발생시키고 바로 제거하는 거예요.

---

인증 가드 — beforeEnter

로그인 안 한 상태에서 글쓰기 페이지에 바로 접근할 수 있는 문제가 있었어요.
이걸 막아주는 게 인증 가드입니다.

util/guards.js 파일을 만들고 isAuthenticated 함수를 정의했어요.

export function isAuthenticated(to, from) {
  const authStore = useAuthStore()
  if (authStore.isAuthenticated) return

  return {
    name: 'login',
    query: { next: to.name }
  }
}

로그인이 되어 있으면 그냥 통과, 안 되어 있으면 로그인 페이지로 보내면서 next 쿼리에 원래 목적지를 담아요.

---

로그인 성공 후 원래 페이지로 이동

가드만 만들면 끝이 아니에요. 로그인 성공 후에 원래 가려던 페이지로 돌아가는 처리도 직접 해줘야 합니다.

const next = route.query.next
if (next) {
  router.push({ name: next })
} else {
  router.push({ name: 'home' })
}

next 쿼리가 있으면 거기로, 없으면 홈으로 가는 구조예요.
가드는 체크만 해줄 뿐, 로그인 이후 흐름은 개발자가 직접 구성해야 한다는 점이 인상적이었습니다.

---

이번 주는 수정 기능부터 인증 처리까지, 실제 서비스에서 당연하게 쓰이는 기능들을 직접 만들어봤어요.
당연하게 쓰던 게 이렇게 만들어지는 거였구나 싶었습니다.

다음 글 부터는 프로젝트 후기를 쓸건데요!
벌써부터 너무 설레고 떨립니다!ㅎㅎㅎ 다음 글도 많이 기대해주세요
읽어주셔서 감사합니다 💛