|
|
|
|
|
 |
제가 지향하는 프론트 엔드 개발 방식
연합인포맥스프론트 엔드 개발자로서 가장 먼저 파악하고 싶은 사용자 요구는 무엇이며, 이를 어떻게 검증하겠습니까
저는 이 신뢰를 지키는 기술이 프론트 엔드라고 생각합니다.
이 기능이 사용자의 시간을 줄이는가, 오류가 나면 어떻게 보이는가, 느려지면 어디가 병목인가, 유지보수자가 이해하기 쉬운가.
또한 저는 프론트 엔드 개발에서 실패를 전제로 설계합니다.
사용자 경험, 성능, 접근성, 유지보수 성 중 무엇을 우선해야 하는지 기준을 제안하고 합의하는 방식입니다.
첫 3개월 목표는 제품과 사용자를 정확히 이해하는 것입니다.
저는 프론트 엔드 개발자가 사업과 거리를 두면 결국 화면 제작자로 고정된다고 생각합니다.
|
|
|
 |
연합인포맥스프론트 엔드 개발자로서 가장 먼저 파악하고 싶은 사용자 요구는 무엇이며, 이를 어떻게 검증하겠습니까
저는 프론트 엔드 개발을 화면을 예쁘게 만드는 작업으로 시작하지 않았습니다.
저는 이 신뢰를 지키는 기술이 프론트 엔드라고 생각합니다.
제가 이해한 연합인포맥스의 프론트 엔드 과제는 세 가지로 요약됩니다.
저는 이 세 가지를 모두 다루기 위해, 프론트 엔드 개발을 기능 구현에 그치지 않고 성능, 접근성, 테스트, 관측, 협업까지 포 함한일로 정의해왔습니다.
무엇이 성공인지, 무엇이 실패인지, 사용자는 어떤 순간에 만족하고 어떤 순간에 이탈하는지, 그 기준이 명확해야 설계가 흔들리지 않습니다.
UI는 React 중심으로 설계해왔고, 프로젝트 성격에 따라 Nex t.js와 같은 프레임워크를 활용해 초기로딩과 라우팅, 메타데이터 구성까지 고려한 구조를 만들었습니다.
상태 관리는 단일해답이 없다고 생각하여, 전역 상태가 필요한지, 서버 상태가 중심인지, 화면로 컬 상태로 충분한지부터 판단합니다.
서버 상태가 중심이면 데이터 패칭과 캐싱 전략을 명확히 하고, 로컬 상태는 단순하게 유지합니다.
저는 프로젝트를 할 때 결과물만 남기지 않고, 어떤 문제를 어떤 방식으로 해결했는지 기록을 남깁니다.
초기에는 단순히 데이터를 받아 렌더링했는데, 데이터 갱신 주기가 짧아질수록 화면이 버벅이고, 스크롤이 끊기며, 특정 컴포넌트가 과도하게 재렌더 되는 문제가 생겼습니다.
필터 조건이 늘어날수록 상태는 꼬이고, URL과 화면 상태가 불일치 해 공유 링크가 의미를 잃었습니다.
공유 가능한 상태는 라우팅과 동기화해 새로 고침과 공유에서도 동일한 화면이 재현되게 했고, 임시상태는 사용자의 입력 중에는 부드럽게 유지되도록 분리했습니다.
그 결과 사용자는 조건을 바꾸면서도 화면이 안정적으로 유지되었고, 개발 측면에서는 버그 재현이 쉬워졌습니다.
리뷰는 내코드를 평가하는 자리가 아니라, 제품의 품질을 올리는 자리이기 때문입니다.
제가 세우는 목표는 단계적입니다.
6개월 목표는 성능과 안정성을 체계적으로 올리는 것입니다.
1년 목표는 특정 도메인 영역을 책임지는 개발자가 되는 것입니다.
저는 프론트 엔드 개발자가 사업과 거리를 두면 결국 화면 제작자로 고정된다고 생각합니다.
특히 사용자가 빠르게 판단해야 하는 화면은 정보구조와 성능이 최우선이므로, 핵심 사용자 과업을 정의하고 그 과업 성공시간을 줄이는 방향으로 개선 우선순위를 잡겠습니다.
렌더링 측면에서는 재렌더 원인을 측정한 후, 데이터 변화가 잦은 컴포넌트와 그렇지 않은 컴포넌트를 분리하고, 메모이 제이션과 렌더 경계 설정으로 불필요한 업데이트를 줄였습니다.
답변 : 저는 재사용을 목표로 억지로 범용 컴포넌트를 만드는 것을 경계합니다.
표현 컴포넌트는 가능한 순수하게 유지하고, 데이터로딩과 상태전이는 컨테이너 혹은 훅으로 분리합니다.
유지보수성은 변경의 파급을 줄이는 데서 나오므로, 파일 구조와 의존성 방향을 지키고, 상태와 props 흐름을 단순하게 유지하겠습니다.
이렇게 하면서버 변경이 있어도 서비스 안정성을 유지할 수 있습니다.
답변 : 저는 상태를 로컬 상태, 전역 상태, 서버 상태로 구분해 선택합니다.
화면 내부에서만 쓰이는 입력값이나 UI 토글은 로컬 상태로 두고, 여러 화면에서 공유되는 사용자 설정이나 권한 정보는 전역 상태로 두며, 목록과 상세처럼 서버에서 가져오는데이터는 서버 상태로 관리합니다.
저는 공유되어야 하는 상태만 URL과 동기화해 재현 가능하게 만들고, 입력 중 임시상태는 로컬로 유지해 사용자 경험을 부드럽게 했습니다. |
 |
사용자, 상태, 화면, 데이터, 어떻다, 유지, 정보, 컴포넌트, 줄이다, 영역, 로딩, 이다, 프론트, 성능, 빠르다, 엔드, 규칙, 가능하다, 설계, 변경 |
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
| |
|
|
|
2026.02.15
9페이지
