Obsidian theme custom 후기​

최근 판교뚜벅초님 영상을 보고 옵시디언에 꽂혔다.

올려보자 나의 생산성... 제발!!!

그러면서 옵시디언 사용법 + 제텔카스텐에 대한 글을 하나 써보려 했는데...

obsidian 기본 테마도 나름 괜찮지만 새로운 테마를 적용하고, 커스텀한 후기를 먼저 작성하려고 한다.

이거는 지금 안쓰면 잊어먹는다...

obsidianate theme​

open settings -> appearance -> theme 보면 사람들이 올려 놓은 테마를 볼 수 있다.

본인의 눈에는 그 중에서 obsidianate가 젤 이뻐서 다운 받았다.

warp 와 느낌이 유사한게 아주 마음에 들었다.

막상 사용해보니 아쉬운 점이 보이더라

• [] 가 보이지가 않는다(link 작성할 때 불편)
• 에디터 모드의 [] 안에 붉은 색 라인이 별로다.
• strong 그라디언트가 내눈에 별로다.
• 그외...

그러니까 이 글은 obsidianate 커스텀 글이다.

필자는 옵시디언을 안지도 1주일이 안됐고, css는 어제 오늘 합쳐 이틀 커스텀 했다. 고로 초급자용 글이다.

css 파일 등록​

.obsidian/snippets경로에 css파일 생성 open settings -> appearance -> css snippet 옵션에서 플러그인 처럼 css로 켜주어야 한다.

켜줘야 하는 걸 간과해서, 안되는 줄 알고 리로딩 엄청 했었다... 삽질 😵

본인이 작성한 css파일이든, $theme.css 파일이든 수정하면 바로 적용 된다.

어떻게 바꿀 것인가​

1. 설치한 theme의 깃허브를 체크해라

   • 어떻게 변경 하라는 건지에 대한 내용이 있으면, Thanks
   • .obsidian/themes 폴더안에 $theme.css 가 아마 있을 것이다.
   • $theme.css 파일을 분석하다보면 느낌온다.
   • obsidianate github

2. obsidian에 어떻게 custom css를 적용하는지 체크해라

   • obsidian css

위 사항은 공통이고 아래는 본인이 작업한 방식이다.

3. colorhunt에서 원하는 색조합을 찾았다.
   • https://colorhunt.co/palette/f0eabe21e1e13b9ae13120e0
   • obsidianate와 유사한 색조합이면서 좀더 강렬?함
4. 변수 세팅하고 노가다 시작...!

옵시디언은 오픈 소스가 아니다.​

그러므로 내가 잘못 안것이 아니면 위의 1,2번 을 보고 뭐랄까 장님 코끼리만지듯 진행해야 한다.

1. .workspace

2. .side-dock-ribbon

3. workspace-leaf

   • .workspace-leaf-content[data-type="search"] 이런 식으로 개별 leaf를 선택할 수 있지만 명칭을 알 수가 없다 ㅋㅋ;
   • .workspace-leaf.mod-active 로 클릭 상태 시 css 처리

4. nav folder ~~~

알아내고 변경했던 섹션 클래스들은 위처럼 되어 있고, 개별 part들은 obsidian css 여기서 찾으면 쉽게 변경 할 수 있다.

이글을 작성하는 현재 상태 너무 빤딱빤딱한가..?

obsidian-template​

작성한 커스텀 css 및 shortcut을 나름 vscode 처럼 맞춘 obsidian-template repo를 참고해주시라!!!

Nextjs Error Boundary 적용기​

신생 프로젝트를 작업하면 이것저것 할게 많다. 그래서 많이 배운다.

ErrorBoundary 적용해야 한다고 생각 했지만, 더 시급한 업무 때문에 우선 순위에서 약간 밀려있었다.

그러다 테스트 환경에서 사파리로 특정 페이지 접속 시 에러가 뜬다는 소식을 들었다.

결론부터 말하자면 원인은 Array.prototype.at() 때문이었다.

최신 문법이라서 브라우저 호환성을 체크 했어야 했는데...! 😵

그래서 관련 부분 수정을 하고, 이참에 아래의 방식으로 ErrorBoundary를 작업 했다.

1. 공식문서 체크
   내용중에서 이러한 부분이 있다.
   To use Error Boundaries for your Next.js application, you must create a class component ErrorBoundary
   클래스 컴포넌트 써본 지 1년은 넘은 것 같은데 + 예시코드가 jsx밖에 없네...
2. TS 예시코드 체크
   서치를 해보니 해당 링크에 원하는 예시 코드가 있었다.

그런데 바로 설득 당했다.

Option 1: Using react-error-boundary React-error-boundary - is a lightweight package ready to use for this scenario with TS support built-in. This approach also lets you avoid class components that are not that popular anymore.

이렇게 react-error-boundary를 적용했다.

딱히 설명 할 것도 없이 보고 하면 된다.

8월 1주차 회고(Weekly Retrospective)​

사내 프로젝트의 2주 스프린트를 마무리했고, 무중단배포 기능과 상품 상세 페이지를 배포 했다.

개인적으로 아쉬운 것은 기존에 넣기로 했던 상품관련 차트를 넣지 못한 것이다.

특정 차트를 D3로 구현하라는 요구사항이었는데, 여기서 나의 실수는 D3 라이브러리에 대해 잘 모르면서 알겠다고 동의를 한 부분이다.

기존에 거래소일때 trading-view 라이브러리, chartjs등을 사용해봤고, 간단한 차트는 캔버스로 그려도 봤으니 사실 쉽게 생각했었다.

그런데 라이브러리를 설치해서 사용해보고, 알아볼수록 러닝커브가 생각보다 훨씬 높았다. 예전 취준 할 때 찍먹해본 threejs수준이 아닌가 😵 !

안그래도 메인프로젝트 + 어드민 + 기타 업무량이 많았는데, D3의 최소 1 ~ 2주를 요구하는 러닝커브에 굴복해서 결국 그 부분은 다르게 대체를 했다.

일은 일대로 열심히 했는데, 그렇게 마무리하니까 좀 찝찝한 마음이 남았다. 앞으로는 이러한 부분에서 더욱 확인을 하고 진행을 해야지.

일일커밋을 하겠다고는 생각 안했지만, 퇴근하고 뭔가 새로운 걸 학습 및 구현해보는 참 개발자가 되고싶은데 현실은 퇴근을 못하고 있다;;

기존에 둘이서 할 때도 그랬지만 지금은 혼자서 프론트단을 맡아서 하고 있다보니, 뭐랄까 내 개인 프로젝트가 아님에도 내 개인 프로젝트 같다.

회사 일은 업무시간 내에 처리하고 싶은데, 참 그게 쉽지 않은 것 같다. 그래서 개인 시간이 정말 팍팍하지만, 주 회고는 꾸준히 써야지!

docker-compose volume​

docker에서 volumes으로 연결할 때는 꼭 경로를 폴더로 잡아줘야 한다.

경로를 파일로 잡아주면 파일 자체는 컨테이너에서 찾을 수 있지만, 컨테이너 외부에서 파일 내용을 변경해도 변경사항 전달이 안된다.

폴더로 잡아주면, 파일의 변경사항이 공유 된다.

첫 외주? 경험​

오늘 아침에 일어나서 기묘한 이야기 시즌4 7화를 보다, 리액트 단톡방을 잠깐 보는데 아래의 메세지를 보았습니다.

**카카오맵 API관련 페이지 작업 해주실 분 구합니다 보수는 다음날 오전에 12만원 드립니다.**

뭔가 쉽고 재밌을 것 같아서 한다고 했습니다.

요청자는 졸업작품 작업 중인 대학생이셨습니다.
요청사항은 카카오맵 api로 검색해서 결과값들을 불러 놓는 것까지는 구현했는데, 그 값들의 버튼을 클릭했을 때, 다른 컴포넌트에 이동시키는 것이었습니다.

솔직히 듣자마자 전역 상태 관리 쓰면 바로 해결 될 것 같아서, 요청자와 협의 후 코드를 받아 작업 시작했습니다.

솔직히 놀랐습니다.

• git 을 사용하지 않아 압축파일로 파일을 전달 받은 것
• css 관리를 모듈조차 쓰지 않은 점
• 전역 상태관리를 모르는 상태에서 데아터를 여기저기 옮기려 시도했어서 인지, 컴포넌트 구조가 엉망
• 기타...

잘 모르는 상태에서 결과물을 내기위해 여기저기서 코드를 많이 가져오신 것 같았습니다.

검색어 입력시 카카오맵 API로 결과값들을 가져오는 부분은 잘 동작 했기 때문에, 그부분은 그냥 두고 상태관리 툴로 zustand 사용해 요구사항을 구현하고, 컴포넌트를 정리 하고, 불필요한 로직을 삭제 했습니다. css도 좀 정리하고 나니 2시간 정도 걸렸습니다.

그분도 처음이라 하셨는데, 저도 처음이어서 그런지 2시간 일하고 10만원 받는게 과한 것 같았습니다(사기?). 그래서 상대도 학생이고 8만원을 받겠다고 했는데, 요청자분이 페이지네이션기능도 요청 하시더군요. 그래서 페이지네이션, 결과 값 특정 컴포넌트에 추가,제거 , 추가 시 스크롤 이동 이것저것 기능을 넣다 보니 3시간 정도 추가로 작업 했습니다. 페이지네이션 컴포넌트를 예전에 만들어 놨던 걸 붙였는데, 카카오맵 API의 페이지네이션과 맞지 않아 거기서 시간을 좀 썼네요.

5시간에 10만원이면 시급 2만원, 회사에서 받는 돈이랑 같은 수준이지만 우연히 이런 경험도 해보고 회사 밖의 일로 돈을 벌었다는 것에 나름 신기 했습니다. 😎

요청사항보다 더 열심히 작업 해드렸는데 그분이 입소문 내줬으면 좋겠습니다. 😄

1주년 회고​

생각해보면 정말 많은 일이 있었습니다.

2020년 6월부터 개발 공부를 시작해서 1년 간 정말 열심히 공부했고, 운이 좋아서 2021년 코인 거래소 관련 스타트업에 FE 개발자로 취업 했습니다.

• 이벤트페이지의 일부를 작업해서 처음으로 배포되는 서비스에 기여
• 수익률 html 캡쳐 기능(clipboardAPI)
• 트레이딩 뷰 차트의 스크롤 로딩 구현
  • 그 당시, 한번만 요청하고 추가적인 요청을 넣지 않았음
• 거래화면 UI 개편
• 인증 관련 토큰 리프레쉬 로직 수정
  • 기존의 로직은 토큰을 리프레쉬하기 힘들었음
  • 사용자가 특정 시간이 지난 후, 유효한 토큰(access)을 사용하고 있을 때, 토큰을 리프레쉬해서 최소 사용시간을 보장
  • 차후, 401시 refresh 토큰으로 refresh 요청하고 api 재요청 하는 방식으로 변경
• 특정 라이브러리(axios, dayjs...)들을 그냥 import 하는 방식에서 특정파일에서 import해서 관련 함수들을 만들고 관련 함수들을 사용해서 사용하도록 변경
• 메인화면 UI 개편
• redux 관련 코드개선
  • connect 함수 제거
  • 리렌더링을 최소화(useSelector 잘게 쓰기, 자주 변하는 데이터와 변하지 않는 데이터 따로 묶기)
• react-router v5 -> v6 버전 업
• 번역팩 자동화 기능
• 거래 관련 로직 수정
• 기타...

개발자로 첫 직장생활이라서 열정도 있었고, 거래소 관련 비즈니스에서 일하고 싶었었기에 1년동안 정말 즐겁게 회사를 다녔습니다. 유능한 개발자들도 많아서 비즈니스만 잘 되었으면 참 좋았을 텐데, Lxnacoin이 사망하게 되면서 이러저러한 이유로 거래소 프로젝트를 종료하게 되었습니다.

회사는 다른 비즈니스로 방향을 틀었지만 규모가 크지 않은 프로젝트였고, 이러저러한 이유로 많은 분들이 아쉽게 퇴사를 하셨습니다.

다행인 것은 최근에 한번 모임을 가졌는데, 나가신 분들이 다들 짧은 기간임에도 불구하고 좋은 회사들과 계약을 마치거나, 협상 중이라는 소식이었습니다.

저의 시선에서 유능한 사람들이 시장에서도 좋은 평가를 받는 것 같아서 기분이 좋으면서도, 내가 시장에 나가면 어떻게 될까에 대해 고민하게 되었습니다.

결론은 기존에 가지고 있던 나만 열심히 하면 되겠지라는 생각에서 노력한 증거를 남기고 공개하자는 것입니다.

앞으로

1. WIL - weekly i learned
2. 일일 커밋(에 준하는 꾸준한 커밋)

를 실천 할 예정입니다.