JIGGAG

12월 한달동안 로그

2020년 12월 27일

12월 마지막주

  • 2020년 마지막 일주일은 그동안 나름 참았던 자유를 즐기며
  • NBA2K와 시간을 보내려고 했다...
  • 그러나 이 또한 계획이 변경되었다 (계획은 항상 변경되는 것 같다)
  • 내가 계획했던 것들이 계획대로 되지 않았을때 스스로에게 돌아오는 충격이 생각보다 컸다
  • 당연히 계획대로 되는 것은 없다고 하지만!
  • 처음 받았던 충격보다는 두번째 받은 충격을 좀 더 수월하게 받아들일 수 있었다
  • 이런 충격이 무뎌지길 바라지는 않는다
  • 다양한 충격과 함께 다음에는 대처할 수 있는 능력을 준비하겠다
  • 놀고 싶었는데... 다음에 놀아야겠다
  • 다음 기회가 있다는 것이 얼마나 중요한지!

12/20 ~ 12/26

전역 상태

  • 평소에 많이 배워가고 있는 블로그에 어느날 올라온 글 하나
  • 현재 참여하고 있는 모든 프로젝트에 상태는 정말 로컬상태를 제외하고 모두 전역으로 관리하는 구조를 갖고 있다
  • 한번 잡힌 구조를 변경하려고 생각한 적은 없었지만
  • 최근 SWR을 알게 된 이후 redux-saga를 거쳐야만 하는 구조를 바꿔볼 생각을 조금.. 했었다가 들어갔다
  • 그러나 이번 글을 계기로 나의 모든 전역상태에 대해 생각을 다시 한번 해보게 되었다
  • 전역 상태 관리에 대한 단상

오픈소스 메인테이너로 성장하기

  • 오픈소스 활동? === 다양한 경험
  • 코드, 테스트 작성, 디자인, 보안, 가이드 문서 작성, 홍보, 번역
  • 스펙을 정하거나 일정 산정, 사용성에 대한 제안, 디자인 개선 등 다양한 의사소통 필요
  • 범용적 기능에 대한 고민: 더 많은 사람들이 더 쉽게 사용할 수 있도록 고민
  • 외부로 노출되는 성과: 오픈된 코드이기에 좀 더 열심히 정리하게 되고 자동 포트폴리오
  • 어떻게 시작할까?
  • 회사 프로젝트 모듈화
  • 이미 존재하는 오픈소스에 참여: 공개된 프로젝트라고 다 참여 가능한 것은 아니라는 것을 깨달았다...
  • good first issue
  • NHN FORWARD 오픈소스 메인테이너

알고리즘

  • 정렬을 해두면 특정 조건에 만족하지 않는 경우 뒤의 항목들은 건너뛰기 가능하다
  • 카데인 알고리즘

네이밍

  • 프로젝트를 진행하다보면 아무런 고심없이 지은 네이밍 i,d, data, val가 생각보다 많이 나온다
  • 지난날 내가 작성한 코드지만 오늘날 나는 알 수 없어 해당 코드를 읽기 위해 시간을 거슬러 올라간다
  • 최근에 클릭 이벤트에 발생되는 함수에 대한 네이밍을 onPress*로 정리하였다
  • 암묵적 룰로 정해졌고 통용적으로 사용중이나 가끔 다르게 사용해볼까 하며 작성했던 것들을 소심하게 다시 정리
  • 반복문이나 일회성 변수에 대한 네이밍을 정리하고 싶은데
  • 너무 방대하여 우선 함수명부터 정리해보려고 한다
  • 무엇을 하려고 하는 것인지 적어두면 그 안에서 사용되고 있는 값이 어떤 값인지 추론이 되지 않을까
  • 코드를 이해할 수 있는 네이밍

pm2

  • 라즈베리파이에 설치해서 사용중인데
  • pm2 list로 바로 접근이 안된다
  • 왜?
  • 이유를 찾는게 귀찮아서 매번 npx pm2 list
  • 그것도 귀찮아서 해결하기로 생각
  • wget -qO- https://getpm2.com/install.sh | bash
  • 코드 푸시하고 젠킨스에서 설치 후 재시작까지 하도록하며 귀찮음 해결

테스트

  • 단위테스트
  • 모듈 단위로 분리된 환경에서의 테스트
  • 그러나 의존성 있는 모듈에 대해 mock을 사용해야하며 상호 의존성 검증이 어렵다
  • 통합테스트
  • 두개 이상의 모듈을 실제 연결하여 테스트
  • 그러나 모듈 내 복잡한 알고리즘이나 분기문이 있는 경우 중복된 테스트 코드가 많아진다
  • E2E테스트
  • 단위, 통합 테스트는 내부 로직을 알고 있는 개발자가 일부 선별하여 테스트
  • E2E는 실제 사용자 관점에서 기능, UI 테스트
  • 브라우저를 제어하여 테스트하며 실제 발생 할 수 있는 에러를 찾을 수 있다 (Cypress)
  • 테스트 러너: 테스트 구동 환경 (Karma, Jest)
  • 실제 브라우저 렌더링, IO 테스트가 빌요한 경우 브라우저 환경인 Karma에서 테스트
  • 테스트 프레임워크: 테스트 코드 작성 (Mocha, Jasmin, Jest)
  • 테스트 더블: 실제 객체 대신 테스트를 위한 모의 객체 (mock, spy)
  • 테스트 명세: 테스트 대상이나 목적에 따라 그룹화
  • 스냅샷 테스트: 모든 기댓값을 작성하지 않아도 직접 파일을 확인할 수 있다
  • TOAST UI 테스트 가이드

12/13 ~ 12/19

디자인 시스템

  • 프로덕트 디자인에 대한 일관성 유지
  • Atom 단위에서 디자인 시스템이 갖추어야 할 컴포넌트
  • 프라이머리 컬러와 스테이터스 컬러: 앱 전반적인 컬러와 경고, 알림을 전달하는 컬러
  • 기능을 수행하는 요소와 단순 콘텐츠 영역에 사용하는 컬러 분리: 브랜드 정체성을 보이는 컬러와 사용자에게 기능을 강조하는 컬러
  • 컴포넌트 네이밍: size_type_button[theme]
  • origin/option 속성값: button padding/button color
  • 디자인 시스템을 도입하면 Zeplin 같은 도구를 통해 요소 사이의 간격이 몇 픽셀인지 확인할 필요가 없습니다. 이미 그런 것은 재사용 할 수 있는 형태로 구현되어 있으니까요.
  • 지난번 스토리북 도입을 시도하다가 잘 되지 않아 실패하고 멀리하고 있었다
  • 다시 판도라를 열어본다
  • 쏘카 디자인 시스템
  • 디자인 시스템?
  • 디자인 시스템 왜 필요한가
  • 리디 컬러
  • 강남언니 디자인 시스템

방향성

SSL

  • http 사이트에 인증서 발급하고자
  • 아직 연결되지 않은 도메인에 대해서는 커넥션 오류 발생
  • EC2를 종료하고 라즈베리로 옮겨오서면 누락된 도메인 레코드 변경해주었다
  • 분명 연결은 됬는데 왜 연결되지 않는거지? nginx access로그에도 찍히지 않는다
  • netstat -nlpt 포트는 열려있는데?
  • 그러다 아차 netstat -anl | grep 443
  • 나는 공유기 포트포워딩해서 서버를 띄우고 있다
  • 그렇다면 외부에서 443으로 들어온 포트는 공유기가 나에게 들여보내주지 않고 있다면?
  • 공유기 포트포워딩 설정에 443을 추가해주었더니 잘 들어온다!
  • Letsencrypt 설정
  • 인증서 자동갱신 설정

될 듯

  • 안되네...
  • 라즈베리에 띄운 스케줄이 이상하다!!!
  • rdate 설치하라는 옛날 블로그를 참고했으나 bora.net은 적용되지 않았다
  • 그러다 더 옛날 블로그를 찾아보다 raspi-config
  • 라즈베리파이 자체 설정하는 방법인 듯
  • 타임존 변경이 간단하게 해결되었다
  • 아마 재부팅하면 타임존 확인을 다시 해봐야겠다
  • 내일은 스케줄 푸시가 제대로 도착하길 바란다

라즈베리

  • EC2 만료가 일주일 남았다
  • 마이그레이션 압박
  • 와이파이 공유기 통해서 도메인 연결하려고 하는데 => 이 부분이 지난 여름부터 잘 되지 않고 있다 (도메인 연결은 했는데 해당 포트로 가질 않는다..)
  • 아무리 포트포워딩 걸어줘도 공유기로 리다이렉트 되고 있었는데 이 또한 어렵게 생각했던게 오래걸렸다
  • 도메인 -> 공유기 IP -> 내부 IP -> 가고자 했던 포트는 여기
  • 공유기 IP에서 내부 IP로 향하는 길을 알려주지 않았기에 기본 공유기 포트로 가고 있었다 => 도메인을 연결해둔 외부포트를 포트포워딩을 통해 내부포트로 연결해주었다
  • EC2에서 MySQL 사용했는데 라즈베리4에 없다 => MariaDB 대체 + 외부접속 허용 설정
  • vcgencmd measure_temp 라즈베리OS 온도 확인 => 혹시 열받아서 녹아버릴까봐...
  • API서버 띄우고 푸시서버 띄우고.. pm2 설정을 젠킨스에서 생각대로 쉽게 되지 않았다
  • 그래도 마이그레이션이 성공적으로 끝나서 뿌듯하다

12/6 ~ 12/12

알고리즘

  • 쉬운 문제를 어렵게 생각하다 뒤늦게 깨닫고 풀기
  • 단순히 정답만 맞았을뿐 퍼포먼스는 꽝

헨젤과 그레델

그래프

  • 할 수 있다
  • 갑자기 바쁜데 꼭 이럴때 몰려온다
  • 애자일, 우선순위를 정해야하고
  • 나를 위해 시험 준비는 해야한다

테스트 시나리오

  • 테스트 통과했다는 것이 주는 안정감
  • 모든 시나리오를 작성해보고자 시작
  • 그런데 너무 많다?!
  • 1000줄을 넘어 5000줄을 바라보고 있으니 코드를 수정하는데 로딩이 걸린다
  • 과연 이런 코드가 의미가 있을까?
  • 오히려 과한게 아닐까
  • 혼자 고민하다가 질문해보았다
  • 테스트 코드도 리팩터링 하면 된다. 테스트 코드를 작성하는건 의미 있는 일이다.
  • 테스트 시나리오를 작성하면서 중복되는 부분이 많이 보였다
  • 그리고 리팩터링을 진행했더니 2000줄이 넘던 코드는 800줄로 줄어들었다!

12/1 ~ 12/5

Tailwindcss

  • 웹 프로젝트를 진행하려는데 스타일 언제 다 넣지?
  • 막막했던 순간 우연하게 알게된 tailwindcss
  • RN 개발 시 자주 사용했던 react-native-ui-lib와 비슷하게 class로 css 지정
  • 마치 부트스트랩
  • tailwindcss 문서

TDD

  • 이번 스프린트를 준비하면서 자바스크립트를 타입스크립트로 변경하였고
  • 유틸리티 파일 + 로직의 중요도가 높은 화면에 대한 테스트 코드를 작성하였다
  • 아직 테스트 커버리지는 10프로 => 점차 높여가며 안정감을 가져갈 예정이다
  • 그리고 시작된 스프린트
  • 기존 로직을 전부 뒤엎는 정도의 사이즈가 되었다
  • 그러나 사용자에게는 이전과 달라진 정도가 느껴질 필요는 없는 상황
  • 기존 로직에 대한 테스트 코드가 작성되어있고 이에 리팩터링 하면서 점차 신규 로직으로 변경하였다
  • 실제 앱을 켜본건 모든 시나리오에 대해 테스트를 한 이후 였다
  • 테스트 코드 작성을 통해 확인한 시나리오 => 안정감 + 신뢰도
  • 새로 변경되는 로직에 대한 테스트를 하다보니 기존에 숨겨져있던 오류를 찾아내는 신박한 선물까지 받았다
  • 지난번 feconf 컨퍼런스에서 TDD에 대해 할 수 있겠다고 생각이 들었고 작지만 시작해보았다
  • 그리고 좋은 결과와 경험을 하였으며 선순환을 통해 앱 전체에 대한 안정성을 높이고 싶다

스프린트

  • 2020년 마지막 12월을 맞이하며 2020 계획을 적어둔 노트를 보다가
  • 애자일, 스크럼, 스프린트를 개발 뿐만 아니라 일상에도 적용 가능하지 않을까?
  • 연초에 세운 계획은 1년이 지나면 회고를 한다
  • 이 회고를 1년, 1개월, 1주, 1일마다 짧은 주기로 한다면?
  • 1월을 제외하고 비어있는 다이어리가 대중화 될 일이 없지 않을까

EO

  • 나는 경쟁력 있는게 어디 있을까
  • 이것저것 다양한 경험을 해보고 나니 내가 이 부분에서 경쟁력이 있구나
  • 내가 좋아하는 것, 잘하는 것, 나만의 색깔을 찾는 것
  • 모두 같은곳에서 시작하며 경험을 하는지에 따라 발전
  • 나를 위한, 나에 대한
©Jiggag, Built with Gatsby