첫 프로젝트 참가한 뒷 이야기
드디어 첫 경험을 마치다.
드디어 React의 첫 프로젝트를 경험하게 되었다. 바라마지 않던 프로젝트를 우연한 기회에 참가하게 된 것이 블로그가 뜸해진 이유인데 결론부터 말하자면 프런트앤드는 언감생심. 마크업 엔지니어로 개발자들이 필요로 하는 기본 페이지 작업을 담당했었다. 리액트를 3월에 시작해서 5월에 프로젝트에 참가, 9월까지 하나의 프로젝트를 경험했으니 나쁘지 않은 것 같다.
프로젝트 참가 전, Udemy와 Inflearn을 통해 React의 기본적인 사용법등을 알고 있었기에 다행이었다. 기초가 되는 제반지식도 없었다면 힘들었을지 모른다. 운이 좋게도 같이 지원했던 다른 분들은 React의 경험이 전무하거나 인터뷰 담당자와 대화가 되지 않아서 내가 당첨되었던 것. 운이 좋았다.
공부와 실전은 다르다.
마크업 엔지니어(퍼블리셔) 입장에서만 생각해 보겠다. 혹시 누군가에게는 약간의 도움이 될지도?
어디서나 그렇지만, 학생 때 아무리 뛰어나도 실전에서 제대로 활용되는 지식, 기술은 그리 많지 않다. 이번에도 그동안 혼자 공부하며 익히던 내용과 개발자들과 함께 작업하며 작업하는 것에는 차이가 있었다. 초기에는 프런트 앤드를 경험할 수 있을까 싶어 약간 욕심을 내보려 했지만, Redux에 대한 이해가 부족하다는 것을 깨우치곤 포기할 수밖에 없었다. 내가 붙잡고 있으면 진행될 일도 진행되지 않을 것 같아 보였기 때문이다. (만들어 놓은 걸 사용해서 원하는 작업의 일부는 가능했지만, 나보고 구축하라면 못할 일이다..)
useState, useEffect, useRef, useCallback 등등의 Hook에 대한 이해가 없이는 프로젝트를 진행할 수 없다는 게 개인적인 생각이다. 개발자처럼 데이터 바인딩을 할 수 있는 수준은 아니더라도 정적 페이지 수준으로 더미 데이터를 생성하여 jsx 파일로 컴포넌트를 생성하여 관리할 수 있다면 일단 프로젝트에서 허드렛일은 가능하다.
옛날 옛적에는~
예전에는 html을 작업해 개발에 넘기면 개발자들이 다시 php, jsp등으로 재작 업해서 페이지를 만들어 냈었다. 개발자들의 업무량은 증가하고 디자인의 잦은 변경은 html을 다시 만져야 하고 다시 개발자는 소스를 업데이트해야 하는 악순환이 발생된다. 결국 이 과정은 좋은 사람도 뒤로 갈수록 짜증을 내게 만들고 언성을 높이게 만드는 원인이 되곤 했기에 차세대로 넘어오기 전에는 한번 개발이 붙은 소스는 html을 다루는 쪽에서 직접 php등을 수정했었다. 이건 구축보다는 운영에서 자주 진행하는 방식이다.
MVC, MVVM 방식의 작업 환경을 추구하는 차세대는 백과 프런트를 구분하여 상호 간섭을 줄이는 방식의 작업을 위주로 한다. 즉, View(UI) 영역을 따로 관리하는 작업이 진행되어야 한다. 이제는 html이 아니라 각각의 언어로 샘플 페이지를 만들어 줘야 하는데 이 파일이 결국 프로젝트에 직접 사용되는 관계상, 예전 같은 검수과정을 위한 많게는 100여 개를 우습게 넘기는 파일목록을 정리하며 만드는 작업이 무의미하다는 걸 뜻한다.
최소한의 확인을 위한 UI 컴포넌트용 페이지는 필요하겠지만, 점점 Storybook과 같은 컴포넌트를 관리, 생성하는 프로그램도 익혀야 하는 상황이 다가오고 있다. 디자이너들도 마크업 엔지니어나 개발자들이 가지고 있는 컴포넌트에 대한 이해도를 가지고 작업을 하지 않으면 점점 힘들어질 수 있겠다. 다행히 최근에는 Figma가 대세라서 컴포넌트 관리가 수월해지고 있어서 다행이라면 다행이랄까.
최소한의 기능에 대한 이해는 당연히 필요하다.
개인적인 생각이지만, 다음 조건만 성립되면 프로젝트에서 기초 작업에 보탬이 가능하리라 본다. 여타 기초적인 샘플들도 대체로 1, 2번 항목의 범위에 대한 이해를 위한 코드가 주류를 이루고 있었다.
jsx와mustache대한 이해가 있어야 한다. ES6의const,let,map도 알고 있으면 좋다. (더 이상var를 사용하지 않는다.)- 컴포넌트 작업 및 관리를 위해
include개념이 잡혀 있으면 쉽다. 당연하게도 같은 개념이니까. 컴포넌트 간의 데이터 전달을 위해Hook에 대한 이해가 있어야 하지만, 마크업 단계에서는 제일 먼저state,props를 이해하자. 이것만 이해해도 더미 데이터를 생성해서 페이지를 확인하는 부분까지 작업이 가능하다. useState이외에useEffect,useRef,useCallback를 자유롭게 사용은 못해도 이해하고 있다면 개발자들의 소스를 보는게 한 결 수월해 진다.Redux를 알고 있다면router,dispatch,screen을 사용하여 페이지간 이동을 좀 더 수월하게 지원할 수 있는데 페이지간 이동은 물론이고SPA라고 해도CRUD형식이라면 각 스텝간의 페이지 이동까지도 작업이 가능하다.Mui등의 프레임워크나CSS를 다루기 위한 방법은 부차적인 문제다. 당연하게도 우선은 React를 아는 게 먼저.
갈길이 멀다는 것을 체감했다.
일단 기본적인 업무, 마크업 엔지니어로서의 업무는 충실하게 대응이 가능하다는 것을 알 수 있었다. 물론, 프로젝트에 따라 다를 수 있겠고, 알고 있는 지식이 많아질수록 더 많은 일이 가능하겠지만… 일반적인 SI 프로젝트에서 마크업 작업자에게 원하는 수준의 업무와 비교한 경우의 이야기다.
프런트앤드를 목표로 하고 있다면 현재 수준으로는 힘들 것 같다는 것을 체감했다. 좀 더 파고들어야 하는데 그게 어렵다.
record 11
시작이 반의 반이다.
이제 시작한 첫걸음에 많은 것을 바랄 만큼 바보는 아니다. 해야 할 과제는 분명한데 일이 끝남과 동시에 일 외적인 것이 되어버려서 파고드는 것이 어렵다. 결국 나 자신과의 싸움이다. 그래도 시작은 했으니 반의 반은 온 것 아닐까?