1. 취직 후 회고

• 나는 내가 취직할줄 몰랐다. 그리고 경쟁률이 이렇게 높은곳에 갈지는 더 몰랐다.
  • 아마 여기는 연봉도 괜찮고 회사가 안정되어있고 워라밸이 좋아서 경쟁률이 이렇게 높은것같다. 요즘은 큰곳 작은곳 가리지않고 경쟁률이 이러니 참.. 생각이 복잡해지긴한다.
• 입사하고나니 연봉도 좋고 복지도 있고 워라밸..일단 이건 다음줄에 쓰기로하고 배울 수 있는 사수분도 여러명 계시고 좋다. 출근시간도 8시~10시 사이에 하면되는데 늦게 출근한만큼 늦게 퇴근하면된다.
• 난 한평생 react, next만 조져왔는데 여기는 vue쓴다고해서 인프런 회사계정으로 vue강의를 일주일동안보고 간단한 프로젝트 만들어서 발표했다. 내가봐도 발표는 참 못한다.
• 회사의 팀원분들도 내가 열심히하는만큼 잘대해주셔서 좋다.
• 대구서 온걸 다들 알고계시니 뭔가 더 챙겨주시는거같기도하고?

2. 입사 후 이주차 프로젝트

• 그리고 이주차부터 회사의 플랫폼을 간단하게 유지보수하는 작업을 받았다.
• 간단하게 설명하면 몇몇 특정한 변수를 가지고 값을 계산하는 textarea로 되어있던 부분이 가독성이 떨어지고 방금말한 특정한 변수를 서비스 사용자가 기억하고 사용해야하는 불편함이 있었다. 따라서 해당페이지의 컴포넌트를 textarea에서 codemirror를 사용하여 에디터로 교체하고 자동완성 기능을 넣자. 아래 사진은 어느정도 완성한 사진이다.
  
  
• 얼추 겉보기엔 된거같지만 이렇게 하기까지 많은 시행착오가 있었고 아직 해결되지 않은 문제도 있다.

  이슈폭탄 뉴우스~

  1. console 창에 의문의 merge 에러 등 수십줄의 에러
     • vue-codemirror 도려내고 순수 codemirror 사용하여 충돌해결 . import 할때 merge랑 props에 넘겨주던 merge가 역할이 다른데 이름이 같아서 충돌한듯. 그리 고 나머지 에러도 codemirror에 직접접근하지않고 div에 ref로 연결해서 인스턴스만드는식으로 하니 자동해결
  2. 드롭다운 메뉴가 컨트롤 스페이스눌러야만 작동
     • 다른 이벤트 리스너를 등록하여 자동으로 렌더링 되게 해결(순수라이브러리를 쓰냐 혹은 프레임워크에 맞게 래핑된것을 쓰냐에 따라 받을 수 있는 이벤트 리스너가 다른듯 ㅅㅂ)
  3. 오또콤풀릿 사용 시 일부 입력한 텍스트에 덮어쓰기가 되지않음
     • codemirror의 replaceRange 옵션을 사용하여 절반해결. codemirror의 자바스크립트 모드에선 내가 입력한 코드와 자동완성메뉴 안의 내용이 타입이 달라서인 지 다르게 인식하여 덮어쓰기가 일부만 안되는듯함(startsWith,includes메서드로 증명, 그리고 색깔 하이라이팅되는거 봐도 좀 다른듯)
     • 이거는 보완할것이 좀 많음. 오또콤풀릿을 사용해서 text를 수정할때 어디부터 수정할지 내가 직접구현해야할듯함.
  4. 관제점 추천식이 아닌 실제 계산식 컴포넌트에서 데이터 계산 속도의 차이로 인해 컴포넌트가 렌더링되지않음
     • v-if="activeTab.id == 'logic' && isLogicReady" 이런식으로 계산이 되었을때만 렌더링되도록 추가
  5. codemirror 컴포넌트는 해당 페이지내에서 재사용성이 높고, 많은 스크립트 코드와 이슈해결을 위해선 관심사 분리를 위해 컴포넌트 단위로 분리하는게 좋아보임
  6. 기존 코드는 PROPS에 :readonly="!isVariable" @input="regularCheckWithPoint" 라는 코드가 있었는데 어떻게 적용시킬지?
  7. 기존에 자동완성 메뉴가 하나면 그냥 드롭다운 메뉴표시안하고 그냥 자동완성해버리던 이슈
     • 옵션에 그거 그렇게 할지 드롭다운메뉴표시할지 정하는 옵션이 있었음
  8. 관제점 공식 계산식페이지 마운트 시 자동으로 드롭다운메뉴를 렌더링하던 이슈
     • 아마 라이프사이클과 관련있을듯 싶으나. 입력이 실제 사용자의 입력인지를 판별할 수 있는 정규식코드 작성으로 해결
  9. 자동완성과 관련없는 계산식을 입력하여도 자동완성 드롭다운 메뉴가 렌더링되던이슈
     • filter메서드의 결과배열의 길이에따라 return null;을 통해 해결
  10. 중국인이 만든듯한 vue-codemirror에서는 우째된게 컴포넌트 아래가 비어보였는데 지금은 다른 이슈로 인해서 vue-codemirror를 도려내고 순수 codemirror를 적용시켰더니 컴포넌트의 위아래 다 막혀있어서 디자인이 더 깔끔함(원래는 컴포넌트의 하단부분에 경계선이 없어서 뭔가 만들다 만듯한 느낌이었음)
      • 항상 느끼지만 원래 있던 라이브러리를 래핑해서 만든 라이브러리중에 쓸만한건 찾기 힘든거같다. 예전에 react-quill쓸때도 툴바 두번렌더링되던거 순수 quill적용시키니 바로해결된거같이... 앞으로도 웬만하면 순수 라이브러리를 써야겠다.

코너속의 코너. 메모리해제 코드 작성유무에 따른 성능비교

• beforedestroy 메서드안에 codemirror인스턴스 제거코드 작성유무에따라 크롬탭의 성능측정기능을 활용하여 같은 동작을하며 비교해봄
  

그래도 이벤트리스너가 메모리를 해제했을땐 줄어드는것으로 보인다. 앞으로도 이벤트리스너를 연결하거나 인스턴스를 생성하는 기능을 제작한다면 unmount 시 해제하는 코드를 작성하자 근데 이렇게 측정하는게 맞나?

3. 앞으로의 계획?

• 일단은 한두달동안은 회사에 적응하는데에 최선을 다하자. 지금은 입사하고 삼주차정도 되는듯한데 대구의 본가를 갔던 이틀빼곤 저녁, 주말에도 일하고있다. 워라밸은 개나줘 돈많이주자나.
• 근데 시간날때마다 코테문제는 좀 풀고싶긴하다.
• 한창 간절할때 입사된것인만큼 회사에 기여하고 싶기도하다. 자기개발도 꾸준히하며 회사일에 최선을 다하자
• 꾸준히 다양한 연차를 가진 선배개발자들과 개발과 관련된 이야기를 하며 어떻게하면 빠르게 발전할 수 있을지 배워야겠다
• 조금 여유가 난다면 외주도 좀 하고싶네