웹을 만들던 사람에서, 흐름을 이해하는 개발자로
안녕하세요. 웹퍼블리셔에서 프론트엔드 개발자로 한 걸음씩 넘어가고 있는 해비입니다.
저는 아직 모든 답을 알고 있는 개발자는 아닙니다. 새로운 기술 앞에서 막막해지기도 하고, 한참 동안 오류의 원인을 찾지 못할 때도 있습니다. BlogFlow는 그런 순간들을 그냥 지나치지 않고, 다음에는 조금 더 잘 이해하기 위해 남기는 성장 기록입니다.
웹퍼블리싱 실무에서 시작했습니다
처음에는 HTML과 CSS로 디자인을 화면에 구현하고, 다양한 기기에서 자연스럽게 보이도록 반응형 페이지를 만드는 일을 했습니다. 이미 운영 중인 사이트를 수정하고, 예상하지 못한 브라우저 차이와 유지보수 문제를 해결하는 것도 익숙한 일상이었습니다.
화면이 의도한 모습으로 완성될 때마다 보람을 느꼈지만, 작업을 이어갈수록 화면 너머의 흐름이 궁금해졌습니다.
“이 데이터는 어디에서 오는 걸까?”
“사용자의 행동에 따라 화면은 어떻게 바뀌는 걸까?”
“여러 페이지에서 함께 사용하는 상태는 어떻게 관리해야 할까?”
그 질문들이 프론트엔드 개발을 공부하게 된 출발점이 되었습니다.
화면을 만드는 것에서 원리를 이해하는 것으로
JavaScript를 다시 공부하고 React, Next.js, TypeScript를 프로젝트에 적용하기 시작했습니다. Firebase, Zustand, TanStack Query처럼 처음에는 이름조차 낯설었던 기술도 하나씩 직접 사용해 보았습니다.
공부는 언제나 계획대로 흘러가지는 않았습니다. 공식 문서를 읽어도 이해되지 않는 날이 있었고, 간단해 보이는 오류 하나를 해결하는 데 몇 시간을 쓰기도 했습니다. 예제에서는 잘 작동하던 코드가 실제 프로젝트에서는 예상과 다르게 움직이는 경우도 많았습니다.
하지만 그 과정에서 한 가지를 배웠습니다. 오류를 빠르게 없애는 것보다, 왜 문제가 생겼는지 이해하는 경험이 더 오래 남는다는 점입니다.
막혔던 순간을 기록합니다
BlogFlow는 정답만 모아놓은 공간이라기보다, 제가 직접 부딪히며 배운 과정을 정리하는 기술 노트에 가깝습니다.
처음에는 같은 오류를 다시 만났을 때 해결 방법을 잊지 않으려고 글을 쓰기 시작했습니다. 하지만 기록이 쌓이면서 단순히 해결 코드를 남기는 것만으로는 부족하다는 것을 알게 되었습니다.
그래서 글을 작성할 때는 다음 내용을 함께 확인하려고 합니다.
- 문제가 발생한 이유
- 개념을 이해하기 위한 기본 원리
- 실제 프로젝트에 적용할 수 있는 코드
- 적용할 때 놓치기 쉬운 조건과 예외
- 직접 확인한 결과와 추가로 검토할 부분
React와 Next.js, JavaScript와 TypeScript뿐 아니라 웹퍼블리싱 실무에서 경험한 HTML·CSS·반응형 작업도 함께 기록합니다. 최근에는 AI 코딩 도구를 개발 과정에 활용하면서, 생성된 결과를 어디까지 신뢰할 수 있고 개발자가 무엇을 직접 확인해야 하는지도 살펴보고 있습니다.
완벽한 답을 보여주기보다, 같은 문제 앞에서 막막했던 사람이 원인을 좁히고 다음 단계로 나아갈 수 있는 글을 쓰고 싶습니다.
계속 성장하는 사람으로 남겠습니다
웹퍼블리셔에서 프론트엔드 개발자로 넘어가는 과정은 한 번의 선택으로 끝나지 않았습니다. 새로운 기술을 배우고, 프로젝트에 적용하고, 부족했던 부분을 다시 공부하는 일이 계속 반복되고 있습니다.
때로는 성장 속도가 느리게 느껴지지만, 이전에는 이해하지 못했던 코드를 읽게 되고 혼자 해결할 수 있는 문제가 하나씩 늘어나는 순간을 믿고 있습니다.
앞으로도 BlogFlow에는 완성된 결과만이 아니라 그 결과에 도달하기까지의 고민과 시행착오를 함께 남기겠습니다. 기존 글도 계속 다듬고, 개인 프로젝트와 실무 경험을 통해 새롭게 알게 된 기준을 보강하겠습니다.
비슷한 길을 걷고 있다면
웹퍼블리싱을 하며 프론트엔드 개발을 고민하고 있거나, 새로운 기술을 공부하면서 자주 막히고 있다면 저와 비슷한 길을 걷고 있을지도 모릅니다.
빠르지는 않더라도 직접 이해하고 적용한 경험은 분명히 남는다고 생각합니다. BlogFlow의 기록이 저의 성장을 보여주는 동시에, 같은 방향으로 걷는 분에게 작은 단서와 용기가 되었으면 좋겠습니다.