_(3)_(1)_(2).gif)
🔊 간단한 소개를 해주세요.
웹 프론트엔드 개발자로서 Vue와 Nuxt를 중심으로 경험을 쌓아왔습니다. 이와 더불어 사이드 프로젝트를 통해 Next.js와 TypeScript를 활용하며 기술 역량을 확장해 왔습니다. 특히 Nuxt2에서 Nuxt3로의 마이그레이션 프로젝트를 주도하면서 기술 스택 전환에 대한 실질적인 경험을 얻었고, 이 과정에서 새로운 기술을 신속하게 습득하고 적용하는 능력을 향상시켰습니다.
사용자 중심의 UI/UX 설계에 강점이 있으며, 웹 표준과 접근성을 고려한 개발을 항상 염두에 두고 있습니다. 성능 최적화와 코드 품질 향상에 깊은 관심을 가지고 있으며, 지속적인 학습을 통해 최신 프론트엔드 트렌드를 꾸준히 따라가고 있습니다.
다양한 직군과의 협업 경험을 통해 효과적인 의사소통 능력을 갖추었습니다. 팀 내 지식 공유와 문제 해결에 적극적으로 참여하는 것을 중요하게 여깁니다. 궁극적으로는 사용자에게 실질적인 가치를 제공하는 서비스를 만들고, 기술을 통해 긍정적인 변화를 이끌어내는 데 기여하고 싶습니다.
더보기 ⬇)2025년 1월 기준
2021.09~2024.04 놀공 / 개발팀
캠페인 홈페이지 및 캠페인 게임 웹 프론트엔드 개발
Nuxt.js 프로젝트에서 여러 페이지에 걸쳐 반복적으로 사용되는 서브 리스트 관리에 있어 코드 중복이 심각한 문제로 인식되었습니다.
28개의 페이지에서 유사한 리스트 구성과 동작 로직이 반복되면서 개발 및 유지보수 과정에서 비효율적인 작업량이 증가했습니다.
이는 프로젝트의 확장성과 유연성을 저해하는 주요 요인으로 인식하게 되었습니다.
이 문제를 해결하기 위해 Vue.js Mixins을 생성하여 공통 리스트 로직을 중앙에서 관리할 수 있도록 했습니다. 이 mixins은 다음과 같은 주요 기능을 포함합니다.
Nuxt.js에서 구현 및 활용 방법
import Vue from 'vue'
import subListMixin from '~/static/js/sub-list-mixin.js'
Vue.mixin(subListMixin)
// nuxt.config.js
export default {
// 중략
plugins: [
{ src: '~/plugins/sub-list-mixins.js', mode: 'client' },
],
<script>
import subListMixin from '~/plugins/sub-list-mixin.js';
export default {
mixins: [subListMixin],
data() {
return {
subTitle: '게시판',
isAdmin: true
};
},
mounted() {
console.log(this.computedSubList()); // 현재 활성화된 서브 리스트를 확인
}
}
</script>
도입 후, 프로젝트의 코드 중복 문제가 현저히 감소했습니다.
개발 시간이 절감되었으며, 프로젝트 전반의 코드 품질과 유지 관리성이 향상되었습니다.
이 경험을 통해, 중복 코드의 문제점과 그 해결의 중요성을 몸소 체험할 수 있었습니다.
Mixins을 사용하여 반복되는 로직을 효과적으로 관리하는 방법을 배우며, Vue.js의 강력한 기능 중 하나인 재사용 가능한 코드 구조의 이점을 깊이 이해하게 되었습니다.
게시판에서 페이지가 로드될 때 데이터를 이미 가져왔음에도 불구하고, 초기에는 데이터가 없다고 표시된 후 데이터가 표시되는 문제가 발생했습니다.
이전 프로젝트에서는 Vue.js를 사용했으나, 이번 프로젝트에서 Nuxt.js를 처음 접하며 기존처럼 mounted 메서드를 사용해 API를 호출했습니다. 하지만 mounted 메서드는 클라이언트 사이드에서만 실행되므로, 서버 사이드에서 데이터를 미리 가져올 수 없었습니다.
Nuxt.js의 서버 사이드 렌더링(SSR) 특성상, 초기 페이지 로드 시 서버에서 데이터를 미리 렌더링해야 하지만, mounted 메서드는 이 요구를 충족하지 못해 "데이터 없음" 상태가 잠시 표시되는 문제가 발생했습니다.
이 문제를 해결하기 위해 Nuxt.js의 Fetch hook을 사용하기로 결정했습니다. Fetch hook은 컴포넌트 인스턴스에 접근할 수 있어 this를 통해 컴포넌트의 데이터와 메서드에 접근할 수 있는 장점이 있습니다.
코드 리팩토링
기존의 mounted 메서드에서 API 호출 코드를 fetch로 옮기는 리팩토링을 진행했습니다. 이를 통해 서버 사이드 렌더링 시에도 데이터를 사전에 가져와 초기 페이지 로드 시 화면에 즉시 표시할 수 있게 되었습니다.
녹화_2024_04_25_22_09_33_556.mp4
리팩토링 후, 초기 페이지 로드 시에도 서버 사이드에서 데이터를 사전에 가져와 화면에 즉시 표시할 수 있게 되었습니다. 이를 통해 사용자 경험(UX)을 개선했으며, 페이지 로딩 시 데이터를 기다리지 않아도 되어 SEO에도 긍정적인 영향을 미쳤습니다.
Nuxt.js에서 Fetch hook을 활용한 비동기 데이터 처리는 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 지원하는 강력한 기능임을 다시금 확인했습니다.
이번 리팩토링을 통해 비동기 데이터 관리와 Nuxt.js의 SSR 특성에 대한 이해를 심화할 수 있었습니다. 더불어 프로젝트의 성능과 사용자 경험을 효과적으로 개선할 수 있다는 점에서 큰 보람을 느꼈습니다.
관리자 페이지에서 사용자가 데이터를 필터링한 상태로 페이지를 이동할 경우, 문제가 발생했습니다.
특히, 상세 정보를 조회한 후 뒤로가기를 통해 리스트로 돌아왔을 때, 이전 필터링 상태가 초기화가 되어 사용자가 필터 옵션을 다시 설정해야 하는 번거로움이 있었습니다.
이로 인해 데이터 관리 효율성이 떨어지고 사용자 경험(UX)에 부정적인 영향을 미쳤습니다.
데이터 전달과 저장
사용자가 선택한 학교와 역할 유형 정보를 URL의 query string에 포함하여 페이지 간 쉽게 전달할 수 있도록 구현했습니다.
this.$router.push(`/my-page/office-program-management/?schoolId=${schoolId}&roleType=${roleType.category}`);
선택된 정보와 관련 데이터를 LocalStorage에 저장하여, 사용자가 세션 종료 후 다시 웹사이트를 방문할 때도 이전 상태를 유지할 수 있도록 했습니다.
const storedData = {
schoolInfoList: this.schoolInfoList,
selectedRegion,
selectedSchool,
selectedRoleType,
};
localStorage.setItem('officeProgramData', JSON.stringify(storedData));
데이터 불러오기
웹 페이지가 로드될 때 LocalStorage에서 저장된 데이터를 읽어와 필터링 상태를 자동으로 복원하도록 설정했습니다.
이를 통해 페이지 이동이나 재방문 시에도 이전에 설정한 필터 옵션이 유지됩니다.
녹화_2024_04_08_19_45_19_636.mp4
필터 상태 유지 구현으로 사용자가 뒤로가기 버튼이나 세션 재개 시에도 설정한 필터 옵션이 유지되어 데이터 관리 효율성과 사용자 경험이 크게 향상되었습니다.
처음에는 필터링 상태 유지의 중요성에 대한 의문이 있었습니다. 그러나 문제 해결 과정에서 사용자의 입장에서 웹사이트를 사용하는 경험을 더 깊이 이해하게 되었습니다.
필터 상태 유지 기능은 단순한 편의성을 넘어, 사용자가 데이터를 효율적으로 관리하고 본래 작업에 집중할 수 있게 도와주는 핵심 기능임을 깨달았습니다. 이 경험은 사용자 중심의 문제 해결이 얼마나 중요한지를 다시 한번 배우는 계기가 되었습니다.
2020.12~2021.06 엑스바이블루 / 개발팀 / 매니저