본문 바로가기

회고

스타트업 신입 개발자의 회고 - 2021 . 5 ~ 6월 일일회고

작성일 작성자 오늘 잘했거나, 기억하고 싶거나, 동료와 공유하고 싶은 내용이 있으면 적어주세요. 오늘 잘 안되었던 일은 무엇인가요? 더 나은 앞으로를 위해 무엇을 해야 하나요? 아직도 해결이 안되었거나 불편한 것은 무엇인가요?
2021. 5. 28 조나단TL TF 회고를 하며 허심탄회하게 스프린트 기간동안 힘든점, 부족한점들을 공유하였고 그 결과 각 팀원분들의 고충과 개선방안의 인사이트를 얻을 수 있었다. 회고 자리에서의 커뮤니케이션 남에게 나의 생각과 사고를 공유, 전달하는건 무척이나 어렵고 힘든일이다. 생각 차분하기 정리, css 레이아웃, 반응형 웹 공부, recoil 문서 읽기 데이터테이블 따로 컴포넌트로 분리하는것 다시 진행해보기
2021. 5. 31 조나단TL 폰트 적용을 위해서 오류 메세지를 해석하고 웹팩을 설정해서 적용 가능하도록 하였다. 항상 차근차근 생각해야한다.

나 자신을 의심하고 코드를 천천히 한번 더 뜯어보며 함수명을 더 직관적이게 리팩토링하였다. 저 사람은 코드를 왜 이런식으로 작성 하였을까? 나는 코드를 왜 이렇게 작성 하였는가? 더 좋은 방법은 없었을까? 이게 최선인가? 늘 생각하고 자문 하면서 코드를 작성해야겠다.
개발서버 배포후 문제가 없으면 운영 서버도 배포를 할 계획 이었지만 이슈를 발견해서 운영서버 배포를 하지 못했다. css 공부가 필요하다. 그리고 늘 사이드 프로젝트를 하는걸 목표로 해야겠다. 엑셀 업로드쪽 이슈가 있다.
2021. 6. 1 조나단TL 스프린트 계획 수립 미팅을 통해서 우선순위에 따라 해야 할 일을 리스트업하고 스프린트 기간 전에 어떠한 일을 어떻게 작업을 해놓으면 좋을지 고민, 공유하는 시간을 가졌다. 위에 언급한 일 때문에 영차영차 관리자 웹 코드를 많이 못본것같다. 신기하고 효율적인 방법들의 코드가 많아서 신기했다. (CSS value Prop으로 넘겨줘서 재사용하는 컴포넌트, UI 상태 리덕스에 저장, React.lazy 코드 스플리팅, 리덕스 devTools 설치를 안하고 적용) css em rem vv vh등 개념 수립과 실습 리액트의 가장 큰 장점은 관심사의 분리와 추상화라고 생각하는데 영차영차 관리자웹 프로젝트의 각 컴포넌트는 한 파일에 모든 비즈니스, UI, 비동기 로직이 섞여있고 덩치가 너무 커서 같은 일을 하는 로직들을 하나로 분리해주는식으로 리팩토링을 진행해야겠다.
2021. 6. 2 조나단TL 영차영차 운송사웹 테이블 라이브러리를 정말 꼼꼼히 뜯어보았다. 오늘 느낀건데 나는 코드를 뜯어보는게 재미있는것 같다.
내 역량이 증가한다면 리액트 소스코드도 뜯어보고싶다.

원배님의 프론트엔드 코드 리뷰 자리에서 혼자 했던 고민과 재하님과 함께했던 고민들이 중복되어 많이 나와서 한가지씩 개선이 된다면 더욱 좋은 퍼포먼스를 낼 수 있을것 같다.
테이블 라이브러리 소스 분석에 애먹은 부분이 있었다. 리액트의 기본기가 부족하다고 느꼇다. 타입스크립트 공부!! 새로 작성하는 코드에 한가지 기능씩 점진적으로 도입하기로 하였다!!! 팀프플러스 운송사웹 테이블라이브러리 교체하는 이유와 근거 생각하기, 기술 검증, 다른 테이블 라이브러리도 알아보기
2021. 6. 3 조나단TL 영차영차 관리자 웹 코드를 정말 꼼꼼히 분석해서 세부적인 로직, 부트스트랩 테이블 라이브러리 로직의 동작 방식을 더 디테일하게 알게 되었다.

영차영차 관리자 웹 + 팀프플러스 관리자 웹을 병합할때
영차영차 관리자 웹의 테이블 라이브러리 기술 스택인 부스트스트랩 테이블에 팀프플러스 관리자 웹 코드를 어떻게 적용할수 있을지 고민을 해보았고 서버와 통신하는 prop들을 비교해보았다 문제는 없다!
중간중간 집중력이 흐려져서 당과 커피를 보충하며 흐름이 깨지지 않으려고 했다! 더 좋은 방법이 필요하다 팀프플러스 운송사 웹 테이블 라이브러리 교체를 고려중이라서
테이블 기술 스택을 부트스트랩 테이블로 통일할지 리액트 테이블을 도입할지 더 알아보고 검증해보아야겠다
테이블 라이브러리 관련 더 알아보기
2021. 6. 4 조나단TL 이번주 스프린트 일정인 코드 분석과 리팩토링 계획에서 오늘 하루 남은 기간 각 페이지의 컴포넌트들을 일관성있게 모두 리팩토링 하는것이 무리가있고, 다음 스프린트 일정을 고려하였을때 우선순위가 높지 않다고 판단하여 재하님과 의논후에 팀프플러스 관리자 웹 테이블 라이브러리 데이터테이블을 영차영차 관리자 웹에서 사용중인 부트스트랩 테이블로 바꾸어보는 작업을 진행해보기로 하였다.

서버와 통신하는 데이터 형식이 달라서 현재로서는 시간이 많이걸리지 않는다면 백엔드와 데이터 형식을 다시 맞추어보고 통신 or 정적인 mock 데이터로 문법과 연동만 해보는 작업을 해볼지 고민을 더 해보아야겠다
에러 메시지도 나오지 않고 웹페이지가 빈 화면이 나오는 원인을 알 수 없는 오류와 개발 서버 배포 실패로 정말 답답하고 시간낭비를 한것같고 내 자신이 한심해지는 하루였다 ㅠㅠ 뭐가 문제인걸까.. . . .. . .. . . 깃 공부, 세심하고 꼼꼼한 코드 작성, CICD 지식 습득 개발 서버 배포 실패 ㅜㅜ 흑흑
2021. 6. 7 조나단TL 팀프플러스 관리자 웹 테이블을 mock 데이터를 적용해서 부트스트랩 테이블로 변경해보았다. 개인적으로 PaginationProvider > ToolkitProvider > BootstrapTable 순서로 props를 내려주는 방식이라서 코드가 길어지고, 많은 props에 가독성이 떨어진다고 느꼇다. npm trends에서 보니 table 라이브러리는 react-table 다운로드수가 압도적으로 많고 리액트와 궁합이 잘 맞는것 같아서
react-table로 변경과 테스트를 해보고 도입을 고민해보아야겠다.

저번주 테스트 서버 배포 이슈가 있어서 서버 로그를 꼼꼼히 읽고 주석을 달았다. 문제 해결의 인사이트를 얻었고 헌섭님이 뚝딱 해결 해주셨다. 멋지다..
부트스트랩 테이블 셀렉트 박스가 의도한대로 동작하지 않는다. 이런 경우에 트래킹이 정말 힘든데 내일 꼼꼼히 뜯어보아야겠다 후., 그냥 올바른 방향으로 코딩하는 시간을 늘려야한다. 틈틈히 부족한것을 공부! (css, ts, 리액트 고급 항목 문서 읽기) 부트스트랩 테이블 셀렉트 박스 오류
2021. 6. 8 조나단TL 팀프플러스 관리자 웹을 mock 데이터를 가지고 리액트 테이블 라이브러리로 변경해보았다. 페이지네이션, row 셀렉트박스 2가지 기능을 구현 해보았는데 정말 코드가 간결하고 직관적이다!

테이블 마크업을 하고 API 함수들을 붙이는 방식인데 개인적으로 훨씬 사용하기 편리하고 해석도 쉽고 트래킹도 용이할것 같다. 역시 사람들이 많이 사용하는 라이브러리는 이유가 있다.

리액트에서 사용하는 테이블을 위한 종합 패키지 같은 느낌이라서 감탄하면서 구현했다. 나도 라이브러리를 만들어보고싶다.
부트스트랩 테이블 selectBox가 의도와 다르게 동작한다.
원인을 정말 모르겠다.
역시 공식 문서가 최고인것 같다. 공식 문서를 꼼꼼히 보는 습관을 더 가져야겠다. 부트스트랩 테이블 문제 으...
2021. 6. 9 조나단TL 리액트 테이블 필터링에 대해서 자세하게 알아보았다.
컬럼 단위로 필터링 함수가 적용된 text type Input을 리턴하는 useFilters API가 매우 인상적이었다.

하지만 검색할 컬럼을 선택하고 동적으로 각 컬럼 필터링이 되는 기능은 없어서 따로 구현해보았지만 이 부분은 정말 비효율적이라고 느껴졌다.

팀프플러스 운송사 웹 테이블 라이브러리 교체시 컴포넌트 설계를 해보았다. 테이블 분리를 한다면 관심사가 확실히 분리될것같아서 내일 기술검증 후에 똑딱뚝딱 잘 만들어 봐야겠다!
리액트테이블 컬럼별 검색 기능을 내가 의도한 방향대로 사용하기 위한 로직 만들기 이 부분은 리액트 테이블 라이브러리를 만든 개발자가 개선해주면 정말 좋겠다. 깃 저장소에 건의 해봐야하나 흠 예외케이스를 고려해서 꼼꼼히 설계후에 코딩! 데이터테이블에서 사용되었던 기능이 리액트 테이블에도 구현이 가능한지 기술검증 ( 컬럼 데이터 가공후 렌더링, 렌더링된 데이터에 이벤트 넣기 )
2021. 6. 10 조나단TL 팀프플러스 운송사 웹 매니저인포 메뉴 테이블을 리액트 테이블 라이브러리로 변경하였다. 코드가 훨씬 간결하고 깔끔하고 테이블 컴포넌트를 재사용할 수 있을것 같아서 생산성도 증가할것 같다!

강력한 헬퍼 함수들을 제공으로 기능 구현이 수월하고, UI단과 느슨한 결합으로 에러 트래킹이 용이한게 가장 큰 장점인것같다

새로운 기술을 익히고 코드를 분석하고 적용하는 과정이 재미있어서 시간 가는줄 모르고 즐겁게 작업하였다!
산책을 못해서 아쉽당 꼼꼼하게 문서를 읽는것 ! 정보를 모르면 문제 해결에 애먹지만 알고있으면 적용할 수 있다! 테이블 UI 적용, 페이지네이션 디테일하게 구현, 인터페이스 로직도 분리 고려
2021. 6. 11 조나단TL 리액트 테이블 UI를 적용하고 테이블 라이브러리 3개 비교 문서를 작성 하였다. 그리고 매니저 인포 컴포넌트의 유저 인터페이스단 UI 로직을 따로 컴포넌트 분리를 하였다. 결과적으로 비즈니스, UI 로직의 분리가 잘 되어서 아주 만족스럽다 ! 리액트 테이블 각 컬럼 크기 조절
v7 에서 많이 바뀌었는데 공식 문서에서 선언만 언급되고 레이아웃에 적용하는건 설명되어있지 않아서 구글링으로 해결했다.
친절하게 공식문서에서도 설명해주면 좋겠다.
이번주는 피곤함을 핑계로 퇴근후에 공부를 못했다..
css 반응형과 타입스크립트 공부를 다음주 평일부터는 꼭 꾸준히 해야겠다.
테이블 예제 코드를 보니 스크롤을 많이 내려도 헤더 컬럼이 고정되는걸 보았는데 사용자 입장에서 편리할것같다. 구현 해봐야겠다 !
2021. 6. 14 조나단TL 영차영차 관리자 웹 팝업 컴포넌트 파일, 인풋 상태관리 로직을 만들고 테이블, 모달들을 컴포넌트로 분리할 수 있는 컴포넌트 구조를 설계했다.

다음에 비슷한 페이지와 기능을 만들때 참고할 수 있도록 관심사가 잘 분리되고 가독성이 좋은 코드 패턴을 잘 만들어놓아야겠다.
mockup 데이터로 부트스트랩 테이블을 적용하고 컴포넌트 분리를 하는 과정이 순탄치 않았다.

컴포넌트를 설계하는 생각을 조금 덜하고 코드를 작성한 느낌이 있어서 내일 아침에 더 생각해보아야겠다.
조금 더 차분하게 생각하고 꼼꼼하게 예외 케이스를 고려하고 부트스트랩 테이블 공식문서를 천천히 읽어보며 작업 해야겠다. 부트스트랩테이블 컴포넌트 분리
2021. 6. 15 조나단TL 오전에 기획 요구사항 분석, 테스크를 정하고 오후에 브랜치, api 통신, 기획 변경사항 등 이벤트를 겪다보니 개발이 많이 되지 않아서 퇴근 전 2시간 동안 빠르게 집중하여 한 컴포넌트 초안을 만들었다. 역시 개발은 짧고 굵게 명확하게 집중해서 해야한다.

기존의 레거시 코드를 조금씩 분리하여 코드 정리를 하면서 새로운 기능들을 개발하고 코드를 작성할때 "이 부분은 이런식으로 하면 좋을것 같다" 라는 생각이 들지만 FIXME 주석으로 메모하고 먼저 빠르게 개발을 하고 코드를 부지런히 해나가는 방법과 루틴을 시도해보고 있다. 개발 속도를 조금 올려봐야겠다
api 통신 지금 동작하지 않는게 내가 놓치는 부분이 있는건지, 백엔드단의 오류인지 경험과 실력이 부족해서 빠르게 판단하지 못했다. 체크 리스트를 만들고 해당 사항들을 모두 확인 하였는데도 동작하지 않으면 빠르게 도움을 구해야겠다. 타입스크립트 공부와 도입, 개발 속도 올리기 테이블 라이브러리 비교 문서를 작성 하였는데 장단점은 대략적으로 알 수 있지만 코드를 보며 구체적으로 어떤 문제를 해결하고 어떻게 생산성이 올라가고 편리함이 있는지는 전달하지 못한것같다. 코드를 함께 첨부한 문서 작성의 필요성을 느꼇다.
2021. 6. 17 조나단TL 부트스트랩 테이블 셀렉트 관련 오류가 있어서 원인 파악이 안되었는데 차분히 생각후에 원인 파악 후 해결했다! 페이지네이션 옵션 필드키 값이 렌더링할 데이터 프랍에 존재하는 고유한 키값이어야 정상적으로 row단위 셀렉트를 할 수 있었다!! 이러한 사소한것에 많은 시간이 허비되는데 잘 해결되서 기쁘당 ㅎㅎ 상세보기에서 수정하기로 넘어갈때 detail 상태 값 핸들링 조금 더 생각해보고 설계를 진행해야겠다 개발속도 촘촘하고 효율적으로 짜는것도 즁요하지만 개발 속도도 염두에 두어야겠다 할게 많다! 얼른 공지사항 / 이벤트 페이지를 끝내고 팝업 페이지 작업을 해야한다 !
2021. 6. 18 조나단TL 많은것을 얻고 많은것을 잃은 하루였다.
useRef 이슈로 정말 많은 시간을 허비했다. 결론적으로 렌더링 이후 바로 useRef로 돔 노드를 타겟팅할 수 없다. 그래서 useStateRef hook을 별도로 만들어서 값 유무를 판별 후 로직을 실행하는것으로 해결하였다. 리렌더링 문제로 최적화 할 수 있는 방법도 있는것같은데 더 살펴보아야겠다.
useRef의 굴레... 코딩 교육자 제로초님 왈 본인이 쓰는 라이브러리 공식 문서는 모두 읽어봐야한다는것이 떠올랏다. 틈틈히 리액트 공식문서를 모두 읽자 ㅠㅠ 이벤트 수정 api 테스트후 빨리 공지사항페이지 작업!
2021. 6. 21 조나단TL 현재 팀프플러스 운송사웹에서 했던 비슷한 작업을 진행중인데 작업을 하면서 "이 부분은 이렇게 하는게 훨씬 효율적인데.." 라는 생각을 정말 많이 하게 되었다. 다시 팀프플러스 운송사웹 코드를 보면 부끄러울것 같다,

스프린트 기간까지 주어진 업무를 다 할 수 있을지 걱정이 되었는데 다행히 오늘은 기존에 작성한 코드를 비슷하게 적용하면서 빠르게 개발을 진행해서 모든 기능 개발과 테스트를 진행하였다. 재하님이 팝업 페이지 작업을 도와주셔서 내일부터 해당 코드베이스 위에 빠르게 작업을 진행해야겠다!!
useMemo 페이지 옵션 객체에 적용하면 잘 동작하지 않았는데 내일 다시 보아야겠다. 생각하고 또 생각하기, 2,3번 검토할것을 한번으로 줄이고 빠르게 작업 진행 팝업 페이지 설계. 대충 어떤식으로 해야할지는 머릿속에 그려지는데 예외케이스가 조금 존재할것같다 꼼꼼히 설계후에 코드를 작성 해야겠다 !
2021. 6. 22 조나단TL 오전에 마스터 hotFix 브랜치를 머지하고 로그인쪽 에러가 발생하였다.
결론적으로 생각해보면 vs코드 충돌 병합시에 문법 오류들이 있어서 괄호
한개를 지웠는데 그게 원인인것같다. 헌섭님이 에러 트래킹을 도와주셔서 에러를 이잡듯이 뒤져서 찾아내었다. 찾는데 애를 먹었지만 원인은 바로 나에게 있었다...

오전의 소중한 내 시간과 헌섭님의 시간이 날아가버렸다.
꼼꼼하지 못한 나의 똥멍청이 같은 실수였다 ㅜㅜ.. 죄송합니다 헌섭님

재하님이 도와준 팝업 폼, 중앙 타입 미리보기 코드들을 바탕으로 잘 설계하고 재사용하기 쉽고 가독성이 좋은 간결한 코드를 작성해보아야겠다
재하님 덕분에 약 6시간은 작업 시간을 줄일 수 있을것같다.
감사합니다 재하님 !
머지후 로그인 에러 발생 꼼꼼하게 코드를 해석하지 않은 무지한 실수였다. 머지후 충돌 코드들을 한줄한줄 꼼꼼하게 해석하고 넘어가자 팝업 폼 컴포넌트에서 인풋 값들에 동적으로 미리보기를 그려야한다.
예외케이스를 고려해서 잘 설계하자 !
2021. 6. 24 조나단TL 팝업페이지 개발시 테스크를 촘촘히 계획하고 개발은 계획한대로 해당 부분만 집중적으로 진행해서 능률이 오른것같다. 역시 업무를 잘게 쪼개고 해당 업무만 집중해서 진행하는 습관은 정말 중요하다 !

컴포넌트 구조를 관심사대로 잘 분리하고 팝업 미리보기 컴포넌트를 재사용 가능하도록 설계해서 코드가 깔끔한것같다 뿌듯하다.

설계시에 폼과 디테일 컴포넌트를 하나의 컴포넌트로 만드는 방향, 테이블 목록 상태가 바뀔때마다 서버에 요청해서 리렌더하는 방식이 아닌 현재 가지고있는 목록 데이터에 추가, 수정후 렌더링으로 비용을 줄이는 방법 등 다양한 고민을 하였는데 다음에 비슷한 작업을 하게되면 위 2가지 방식을 더 고려해보아야겠다.
date 객체를 string 폼으로 바꾸는 작업에 많은 시간을 쓴것
toLocalString 후 가공 -> 라이브러리 사용 -> date 객체에서 시,분,초 등 각 필요한 데이터 가져와서 가공 등 시도와 실험을 거듭하다보니 시간이 걸렸다. 다음엔 빠르게 판단후에 로직을 생각하고 바로 구현하고 넘어가야겠다. 경험상 년월일시분초 이정도 포맷 스트링으로 만드는건 로직으로 구현하는게 빠르다
이게 최선인지 항상 의심하고 생각하기 내일 팝업페이지 수정, 삭제 마무리 삭제 select state 관리 문제가 조금 있다.
2021. 6. 25 조나단TL 부트스트랩테이블 라이브러리 셀렉트 상태관리를 직접 해야한다. set을 사용해서 효과적으로 구현하였다! 개인적으로 정말 불편한 라이브러리다.

팝업 페이지 기능 구현과 기능 테스트를 잘 끝낸것 같다! 월요일에 배포하고 얼른 정부과제를 해야겠다
지하철에서 맥북으로 직무분석 작성 마이크로소프트 엑셀 웹에서 작업했는데 원하는대로 화면 조절이 안되서 정말 그 작은 글씨 보느라 눈 빠질뻔했다. 타입스크립트 공부 게으름에서 벗어나자! ts 공부하는 분들이 많은것같은데 스터디를해도 좋을것같다! 정부과제 !
2021. 6. 28 조나단TL 팝업 폼 날짜 예외케이스 처리가 정말 오래걸리고 힘들었다. 로직을 잘 못짜는 나를 보고 아직 멀었구나 생각을 참 많이했다.

해당 시간대에 알림 성격의 기능이다보니 테스트에 꽤나 애를 먹었다.
조금 더 테스크를 잘 짜고 생각을 차분하게해서 진행했다면 더 빠르고
효율적으로 했을수 있을텐데 라는 아쉬움이 많은 하루였다
예외케이스에 따른 로직짜기 배포후에 깔끔하고 가독성좋은 코드로 리팩토링 해보자! 차분하게 생각후 테스크를 나누고 집중해서 실행 테스트! 내일 운영서버에 무사히 배포했으면 좋겠다

'회고' 카테고리의 다른 글

스타트업 신입 개발자의 회고 - 2021 . 7월 일일회고  (0) 2021.07.31