Nuxt Corporate Website LS엠트론
LS Mtron
Vue 3·Nuxt 3 기업 웹사이트 구축
제품과 기술 정보를 담은 반응형 기업 웹사이트입니다.
- 기간
- 2023.03–2023.05
- 역할
- Frontend Developer · 신규 구축
LS MtronNuxt Corporate Website
At a glance
프로젝트 요약
제품과 기술 정보를 보여 주는 페이지를 맡았습니다. 공통 화면을 컴포넌트로 만들고 페이지별 데이터를 연결했습니다.
- 클라이언트
- LS엠트론
- 기간
- 2023.03–2023.05
- 담당
- Frontend Developer · 신규 구축
- 기술
- Vue 3, Nuxt 3, TypeScript, Vite, REST API
Problem
필요했던 작업
제품·기술 페이지를 새로 만들고 데스크톱과 모바일에서 볼 수 있도록 구성해야 했습니다.
Ownership
맡은 일
Vue 3·Nuxt 3·TypeScript·Vite로 제품·기술 페이지를 만들었습니다. 공통 컴포넌트를 구현하고 백엔드 REST API를 연결했습니다.
Decision
구현 방법
여러 페이지에서 쓰는 화면 요소를 공통 컴포넌트로 묶었습니다. 페이지마다 달라지는 내용은 데이터와 props로 전달했습니다.
Outcome
작업 결과
제품·기술 페이지를 구축하고 데스크톱·태블릿·모바일에서 화면과 동작을 확인했습니다.
01 · Problem
프로젝트 배경
LS엠트론의 제품과 기술 정보를 전달하는 반응형 기업 웹사이트를 구축했습니다.
Vue 3·Nuxt 3·TypeScript·Vite로 제품·기술 페이지를 만들었습니다. 여러 페이지에서 쓸 컴포넌트를 만들고 백엔드 REST API를 연결했습니다.
02 · Ownership
맡은 역할
Frontend Developer · 신규 구축
- Vue 3·Nuxt 3로 페이지와 기능 개발
- TypeScript로 컴포넌트와 데이터 타입 작성
- 반복되는 UI를 공통 컴포넌트로 분리
- 백엔드 REST API 연동과 응답 데이터 표시
- 데스크톱·태블릿·모바일 화면 개발과 동작 확인
03 · Decisions
구현 방식
공통 화면은 컴포넌트로 분리
제품·기술 페이지에서 반복되는 화면 요소를 공통 컴포넌트로 만들었습니다. 페이지마다 다른 내용은 데이터와 props로 전달했습니다.
화면 크기별 레이아웃 확인
데스크톱·태블릿·모바일 크기에서 콘텐츠 배치와 화면 동작을 직접 확인했습니다.
04 · Evidence
작업 내역
이 프로젝트에서 수정하거나 새로 만든 기능입니다.
주요 작업
- 제품·기술 소개 페이지 개발
- 공통 컴포넌트와 페이지 전용 UI 분리
- TypeScript로 화면 데이터와 props 타입 작성
- 백엔드 REST API 응답 데이터를 화면에 표시
- 화면 크기에 따라 레이아웃이 바뀌는 반응형 UI 개발
- 브라우저별 화면과 동작 확인
05 · Outcome
작업 결과
- Vue 3·Nuxt 3·TypeScript·Vite로 제품·기술 페이지 구축
- 공통 컴포넌트에 페이지별 데이터와 props를 전달하도록 구현
- 백엔드 REST API 연동과 화면 크기별 동작 확인
06 · Screens
주요 화면
화면을 누르면 크게 볼 수 있습니다.
07 · Workflow
작업 순서
보통 다음 순서로 작업합니다.
요청 내용 확인
기획서와 디자인을 읽고 바꿀 내용을 확인합니다. 운영 중인 서비스는 기존 코드도 함께 살펴봅니다.
화면과 데이터 확인
여러 화면에서 쓸 컴포넌트와 페이지별 상태를 구분합니다. 필요한 API와 예외 처리도 이때 확인합니다.
기능 개발
프로젝트의 코드 작성 방식과 API 규격에 맞춰 화면과 기능을 만듭니다.
동작 확인
화면 크기와 입력 상태를 바꾸며 동작을 확인합니다. QA에서 발견한 문제와 운영 중 받은 피드백을 반영합니다.