brunch

You can make anything
by writing

C.S.Lewis

by 진영최 Jun 04. 2023

주간 업무 - 2023.22w

주간 정리

간단한 일정리뷰로 시작한 22w였는데 과장님이 힘을 주시는 말을 많이 해주셔서 힘나게 시작할 수 있었다.




이름을 당당히 말할 수 있게

일정 리뷰를 시작하면서 현재 개발 상태와 앞으로 개발 일정에 관해 리뷰하게 되었다. 과장님과 나와 백엔드 개발자 대리님이 참여해서 진행한 리뷰였는데 현재 연구실 핵심 멤버이다보니 개발 상황이나 앞으로의 일정등의 관리는 문제가 없었다.


문제는 없었지만 나와 과장님이 다르게 생각한 한 부분이 있었는데 사용자 음성 녹음 및 후처리 프로세스 부분이었다. 해당 프로세스는 우리 앱의 개발 부분 중 난이도가 가장 높은 부분이다. 나는 당연히 어려운 부분이니 과장님이 진행하실거라 생각했지만 과장님은 달랐다.


진영씨 이제 이런 것도 할 줄 알아야지
나중에 이 앱은 진영씨가 만들었다고
떳떳하게 말할 수 있도록 하려면


참 감동적인 부분이었다. 어느 순간부터 내 한계까지만 퍼포먼스를 가두어두니 좋은 기회를 날릴 법 했는데 과장님이 그래도 기회를 만들려고 해주셔서 이에 부응해야겠다는 생각이 들었다.


한계에 부딪힐 땐 한계를 돌파하는 애니메이션이 최고


한계에 몰려도 도망치지 않고 끝까지 짜내어 돌파하자!




누가 봐도 편히 읽히게

신규 프로젝트를 진행하며 페이지 개발 타이핑에 들어갔는데 어떻게하면 다른 사람도 직관적으로 이해할 수 있는 코드를 짤까 고민하다 코드를 다 엎고 새로 짜버렸다.


발단은 이렇다.


왼쪽부터 문제풀이(quiz), 피드백(feedback), 요약(summary). 직접 영역을 잡아 캡쳐한거라 삐뚤빼뚤합니다. 미안합니다.


페이지 내 3가지 화면을 노출해야되는데 처음 설계한 방식은

<!-- 헤더 -->
<header>
    <template v-if="quiz"></template>
    <template v-else-if="feedback"></template>
    <template v-else-if="summary"></template>
</header>
<!-- //헤더 -->

<!-- 본문 -->
<section>
    <template v-if="quiz"></template>
    <template v-else-if="feedback"></template>
    <template v-else-if="summary"></template>
</section>
<!-- //본문 -->

처럼 header(헤더), section(본문) 태그 내에서 데이터에 따라 노출 화면을 다르게 표출해주려 했다.


근데 이렇게 될 경우 1개의 페이지라고 보기 어렵다 판단했다. 헤더와 본문은 따로 나뉘어져 있는 상태에서 데이터로만 표출을 바꿔줄 경우 내부 표출요소만 바뀌는거지 전체 페이지라는 뉘앙스가 약했다.


때문에 아래와 같이 수정했다.

<!-- 문제풀이(quiz) -->
<template v-if="quiz">
    <!-- 헤더 -->
    <header> 
    </header>
    <!-- //헤더 -->

    <!-- 본문 -->
    <section>
    </section>
    <!-- //본문 -->
</template>
<!-- //문제풀이(quiz) -->

<!-- 피드백(feedback) -->
<template v-else-if="feedback">
    <!-- 헤더 -->
    <header> 
    </header>
    <!-- //헤더 -->

    <!-- 본문 -->
    <section>
    </section>
    <!-- //본문 -->
</template>
<!-- //피드백(feedback) -->

<!-- 요약(summary) -->
<template v-else-if="summary">
    <!-- 헤더 -->
    <header> 
    </header>
    <!-- //헤더 -->

    <!-- 본문 -->
    <section>
    </section>
    <!-- //본문 -->
</template>
<!-- //요약(summary) -->

현재 상태에 맞는 데이터로 페이지 렌더링을 결정해 준 후 각 template마다 header와 section을 나누니 좀 더 한 페이지에 맞는 직관적인 코드 구성이 가능했다.


추후 다른 프론트 개발자와도 논의해보고 수정할 점이 있으면 더 수정하겠지만 현재는 다른 사람도 이해하는데 큰 어려움이 없을 것 같다고 판단된다.

작가의 이전글 주간 업무 - 2023.21w
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari