Je개발 일지

2주년이 된지 꽤 지났지만, 간만에 설문조사를 진행했다. 이번에는 작년 한 해 동안 L 프로젝트를 만들며 생고생을 했던 팀장님과 사수에게 많은 질문을 쏟아 부으며 내가 지금 잘하고 있는 점과 개선해야할 점에 대해 알아보는 시간을 가졌다. 1. 팀장 팀장님의 경우, 프로젝트 전체를 관리하는 분이셨기에 이번 프로젝트에 있어서 나는 얼마나 이 프로젝트에 기여했는지를 여쭤보고 싶었다. 두 번째로는, 내가 기획과 디자인을 많이 했고 이것을 컨펌해주신 분이 팀장님이었기에 같이 일하면서 어떤 부분이 나에게는 강점이고, 단점인지를 여쭤봤다. 또, 이제 1년이 지났으니 1년 전과 비교했을 때 지금의 나는 어떤 위치에 있고, 팀 내 생활에 있어서 나는 얼마나 잘하고 있는지 평가를 받고 싶었다. (1) L 프로젝트에서 크게..

1. 회고 하나 2. 회고 둘

1. "백엔드도 하고 싶습니다" L 프로젝트를 시작하기 전에도 잠깐 지나치듯이 다른 프로젝트(일명 J 과제)를 할 때 API 개발을 했다. 그렇게 내세울만한 프로젝트는 아니라서 따로 회고는 남기지 않았고, 그때 처음 알았던 거나 공부했던 것들을 블로그에 정리하곤 했다. L 프로젝트 초창기는 처음 만드는 것이다 보니 당장 필요한 기능들을 빨리 구현하고 배포하는 것이 관건인지라 프론트엔드 개발에만 집중했다. 그리고 작년 말부터는 조금 널널해져서 백엔드 개발도 하고 싶다 요청하고 현재 두 페이지는 기획도 하고, 디자인도 하고, FE 개발도 하고, 테이블 설계하고, API 개발도 하고 있다. 백엔드는 실무뿐만 아니라 다른 모든 프로젝트에서도 욕심을 갖고 하고 있었다. 코드 스테이츠에서 프로젝트를 두 개 할 때,..

1. Store Reset 1-1) Pinia 사용 Vue3 프레임워크를 사용할 때 사용하는 중앙 상태 관리 라이브러리는 Pinia 다. Pinia 는 두 가지 방식으로 코드를 작성할 수 있다. 첫 번째는, Optional API 처럼(혹은 이전 중앙 상태 관리 라이브러리였던 Vuex 처럼) 사용하는 방법과 Composition API 처럼 사용하는 방법이다. 아래의 코드가 Optional API(혹은 Vuex) 처럼 사용하는 방법이다. import { defineStore } from 'pinia' export const useStore = defineStore('storeId', { // arrow function recommended for full type inference state: () =>..

1. 배경 L 프로젝트는 Vue3 프레임워크를 기반으로 만들었다. 해당 도메인은 굉장히 방대한 양의 데이터(10초마다 데이터를 수집 후 저장)를 활용해 정보를 제공한다. 이는 화면에서 그려야할 게 많다는 것을 의미하기도 한다. 예를 들어, 우리 도메인 중에는 10초 단위의 데이터를 하루치 보여준다거나, 1분 단위의 데이터를 한 달 ~ 두 달의 기간으로 보여주기도 한다. 이게 단순히 tick 을 계산하면 10 * 6 * 1440 개, 1440 * 30 개 정도의 데이터지만, 이는 단순히 Tick 일뿐, 그려야 하는 범례나 데이터의 depth 도 존재해서 우리가 Max Range 를 걸어주지 않으면, 데이터를 받아와서 그리다가 브라우저가 다운되는 경우가 있었다. 부문장님은 "컨텐츠가 좋으면 느리게 렌더링되더..

1. 페이지 루프 기능에 대한 요구사항 이번 프로젝트를 진행하면서 UI/UX 에 대한 고민을 굉장히 많이 했다. 부문장님이 우리 프론트엔드 개발자들에게 기대하셨던 건 "데이터를 어떻게 보여줄 것인가" 였고, 또 회사에는 디자이너가 없어 내가 맡은 페이지는 내가 디자인해야 했기에 UI/UX 에 대한 고민을 많이 할 수밖에 없었다. 그래서 나는 UI/UX 관련 서적 총 4권과 웹 자료 1개를 읽으며 UI/UX 에 대한 지식을 넓혔다. 팀에 UI/UX 공부한 것을 바탕으로 발표하는 시간을 가졌었는데, 그때 부문장님, 팀장님을 비롯해서 가장 호응을 많이 얻은 것이 "페이지 루프" 기능이었다. "페이지 루프" 기능이란 사용자가 A 라는 페이지에서 b 라는 정보가 궁금해졌다면, b 의 정보를 자세하게 다루는 B 페..

1. 배경 내가 맡은 페이지의 대다수는 DB 에 데이터를 등록하고, 수정하고, 삭제하는 기능을 지닌다. 때문에 DB 가 바뀌거나, 정책이 바뀌거나 하면 내 페이지는 거의 필수적으로 수정을 해야 한다. 심지어 이 프로젝트는 어떻게 보면 처음 만드는 거고, 고객들의 요구사항을 많이 받지 못해 우리끼리 스스로 정책을 읽고 스스로 요구 사항을 만들어 내며 기획을 했기에 덜 전문적이었다. 그렇게 개발된 페이지들이다 보니 실제 서비스를 운영하면서 기획을 수정해야 하거나 고쳐야할 것들이 많았다. 그중에 몇 가지 정말 강렬한 인상을 남긴 페이지들이 있다. 2. DB 구조가 자주 바뀌는 경험 2-1) 상황 내가 기획하고, 디자인하고, 개발하는데 가장 힘들었던 페이지 중 하나가 바로 발전소를 등록, 수정, 삭제하는 페이지..

1. 당혹스러운 일감들 기획과 디자인을 내가 해야 한다고 처음 들었을 때 굉장히 당황했다. 그도 그럴게, 나는 기획과 디자인을 할 수 있는 전문적 지식이 없었다. 특히 기획의 경우, 내가 담당하는 도메인은 태양광 발전을 주로 타겟을 하고 있다 보니 우리 회사에 오기 전까지 한 번도 접해본 적 없는 분야였다. 인버터니, 환경 센서니, 계전기니, RTU 를 통한 데이터 수집 등등... 지금이라면 알지만, 당시에는 잘 몰랐으니 많이 막막했다. 특히, 나는 저번에 H/F 프로젝트를 진행하며 그 데이터들을 이해하는 것도 벅찬데 이제 새로운 데이터를 다시 공부해야 하다 보니 더 어려웠다. 심지어 이번에는 남이 기획해주는 것을 파악하는 것이 아니라 기획을 하고 디자인을 해야 하는 단계. 그래도 다행히 팀장님께서 많은..

1. L 프로젝트란? 우리 회사에서 기존에 사용하던 도메인의 컨텐츠를 완전히 새롭게 만드는 프로젝트로 2023년 1월 16일부터 시작해서 현재까지 이어지고 있다. DB 구조나 API 도 새롭게 만들었고, 프론트엔드도 repo 를 새롭게 만들어 개발했기 때문에 그냥 새로운 도메인이라 봐도 될 것 같다. 1년이 넘은 지금까지도 개발 중이며 B2B 시장에서 판매하고 있다. 현재 시점 기술 스택으로는 대표적으로 (1) Vue3(Composition API 활용) (2) Pinia, (3) Highchart (4) Ag-grid (5) Tanstack-query 를 활용한다. 도메인 특성상 대한민국 "정책" 에 큰 영향을 받으며, 따라서 이 도메인을 기획하고 개발하는데 "정책" 과 운영 전문 등을 읽으며 팔로우업..

1. 원대한 계획은 이뤄지지 못했다 (1-1) CI / CD 구축 조금 더 많이 할 수 있었는데 하지 못했다. 더 다양한 것들을 공부하고 도입해볼 수 있었는데 그러질 못했다. Jenkins 를 활용한 CI/CD 구축, Slack 과 Jenkins 연동 등 Devops 부분을 좀더 다뤄보고 싶었지만 그러질 못했다. Nginx 까지는 공부해서 어떻게 만져 보기는 했지만... 내가 원했던 부분들은 하지 못했다. 이건 나의 게으름과 나태함에서 비롯된 것일 수 있다. (1-2) 코드 리뷰 이 사이드 프로젝트를 준비할 때 가장 하고 싶었던 것은 코드 리뷰였는데, 어쩌다보니 개발하는 것에만 급급해진 나머지 팀원들끼리 제대로 코드 리뷰하는 시간을 갖지 못했다. 사실, 나는 다른 사람의 코드를 다 보긴 봤다. 개인적으로..