1/26 - 2/1

Node

• 비밀번호 암호화를 위한 bcrypt
• 서버에서 bcrypt를 이용해 암호화만 사용하며 복호화 x

메모이제이션

• 리액트: 데이터가 변경된 컴포넌트만 다시 렌더링
• 근데 왜 지금 눈 앞에 구현된 코드는 수백개의 컴포넌트가 모두 다함께 다시 그려지고 있는거지?
• 서로 얽혀있는 의존성: useCallback을 사용했지만 항상 변경되는 값을 의존하고 있다
• 깊은 골짜기 props: 상위 컴포넌트에서 저 아래 하위 컴포넌트까지 props 전달로 인한 무한 렌더링
• Memoization을 위한 memo
• 첫번째로 useCallback에서 의존하고 있는 값들을 분리 + 인자로 전달 + redux saga로 이동
• redux를 사용하고 있지만 redux에 들어있는 항상 변경되는 값을 함수 내부로 가져와서 계산할 필요 없으며 saga에서 select를 이용해 해당 redux data를 사용함으로써 useCallback 보완
• 두번째로 계속되는 props 전달과 상위 컴포넌트의 렌더링이 유발하는 하위 컴포넌트의 렌더링을 방지하고자 memo 훅스를 사용하고 두번째 인자인 compare 비교 조건으로 렌더링 방지

GraphQL

• REST API: 하나의 호출에 내려오는 데이터 고정
• GraphQL: 호출하고 싶은 데이터만 커스텀
• 웹브라우저에서 이런 저런 요런 데이터를 화면에 보여줄 수 있지만, 모바일에서는 많은 데이터를 보여줄 수 없음 -> 보여주지 못할 데이터까지 서버에 요청하여 전달받을 필요 없음
• 그럼 웹/모바일 여부에 따라 API를 따로 호출할까? -> GraphQL을 이용하여 가져오고 싶은 데이터만 호출하여 사용
• CRUD에 따른 스키마, 타입 그리고 쿼리문에 해당하는 resolver 선언
• 서버쪽에 resolver에 대응하는 API를 만들어둔다면 클라이언트에서 마음껏 커스텀하여 사용

1/19 - 1/25

클린 아키텍처

• p.209 소리치는 아키텍처: 아키텍처는 프레임워크에 대한 것이 아니다. 아키텍처를 프레임워크로부터 제공받아서는 절대 안 된다. 프레임워크는 사용하는 도구일뿐...
• 내가 설계한 소프트웨어의 아키텍처는 집이야, 도서관이야 소리치고 있을까 스프링이야, 레일스야 라고 소리치고 있을까
• 프레임워크, 웹서버, 데이터베이스 등 도구가 아닌 유스케이스에 중점을 두자

업무

• 수 많은 셀
• 다같이 렌더링
• 그리고 느리다
• 컴포넌트 메모이제이션 필요

Moment

• diff와 isSame
• 타임스탬프 두 값의 날짜 차이를 diff로 구해서 1일 이상인 경우를 체크하고자하였다. 그러나 아무리 해봐도 diff는 0이 반환되었다. 문서를 확인해보니 소수점자리까지 확인해보는 파라미터가 있었고 다시 확인해보자 0.3이라는 값이 나오고 있었다.
• diff는 두 값의 차이를 구하는 함수로 날짜차이는 24시간이 되기 전에는 0.x일이 맞는 것 이였다. diff에 설정값을 추가하기 전에는 integer을 반환하기에 0이 나왔던 것이다.
• 단순하게 날짜가 같은지 확인하기 위해서는 isSame이라는 함수를 사용하자

OMF

• 로그를 디비에 저장하고 있는데 개발로그는 따로 분리하였다. 그리고 난 뒤 로그가 제대로 저장되지 않는 이슈가 있었다.
• 응답 객체를 저장하고 있는데 그 중 한글이 포함된 경우 제대로 저장되지 않는 오류가 있었다. 새로 만든 데이터베이스에 문자셋을 변경해주어 해결하였다

  Error: ER_TRUNCATED_WRONG_VALUE_FOR_FIELD: Incorrect string value: ‘\~~~~...' for column 'response' at row 1
  
  => ALTER TABLE 테이블 convert to charset utf8;
  

• Mysql 테이블마다 charset이 다를수가 있나? 하고 의문이 생겼는데 => 응 다를 수 있네!!??
• 두번째 이슈로는 REST API를 구현하면서 get/post 외에 delete를 써봤는데 아래와 같은 에러가 발생했다.
• 노드 서버에서 MySQL로 전송했고 해당 에러는 테이블 필드 중 API Method를 저장하는 method필드의 길이가 맞지 않아 발생하였고 해당 필드의 길이값을 4로 고정했던것을 6으로 수정하여 해결하였다.

  Error: ER_DATA_TOO_LONG: Data too long for column 'method' at row 1
  

• 그러나 과연 get/post외에 put/delete에 대한 고민이 생겼다. 최근 보안이슈로 get/post로만 개발하자는 이야기를 들었던것 같은데 좀 더 찾아보고 개인프로젝트에도 적용할지 생각해봐야겠다.

Node

• 또 하나의 서비스를 추가하고자(일을 키우는 중)
• 콜백 지옥을 해결하기 위한 async await
• 이번엔 하나의 promise에서 resolve reject의 소용돌이
• 개인 정보 암호화 모듈을 구분하자

함께 자라기

• 신입 팀원
• 업무 마감을 위해 분업을 어디까지 해야할까
• 너무 과한 부담을 주고 싶지는 않은데
• 그렇다고 혼자 할 수 있는 건 아닌데
• 우연하게 이 글을 보고 - 함께 자라기, 애자일로 가는 길
• 주어진 업무과 소화할 수 있는 업무 사이의 격차를 줄이는 방법
  • 새로운/더 나아질 수 있는 것을 추가하여 주어진 업무의 레벨을 높이거나
  • 간단한/작은 업무부터 실행하여 해야할 업무의 레벨을 낮추거나
• 이러한 방법을 통해 동료와의 협업을 이룰 수 있다면 당장 해볼 가치 있는 일

1/12 - 1/18

Node

• 스케줄러
  • node-schedule을 이용해 크롤링 구현 예정
  • 스프링에서는 Quartz 이용했었지
• 암호화
  • 클라이언트에는 암호화 키
  • 서버에는 복호화 키

OMF

• 왜 마켓에서 받은 앱은 카카오 로그인이 안되지?
• 같은 APK인데, 마켓을 통해 받은 경우 카카오 로그인이 안되는 현상을 이제야 발견했다.
• 오류 수정을 위해 찾다보니 발견한 가이드

• 만약 구글 플레이 개발자 콘솔에서 Google play app signing 기능을 활성화시키셨다면 구글 플레이에 앱이 릴리즈되기 전에 개발자의 로컬 개발 환경에서 릴리즈 키스토어의 시그너쳐가 삭제되고 구글 서버에 저장되어 있는 사이닝키의 시그너쳐로 교체됩니다. 그렇기 때문에 이 사이닝키로 생성한 키해시 또한 등록해줘야 합니다.
  

• 구글 콘솔에 업로드하면 기존의 APK에 다시 앱 서명이 되면서 키해시가 변경 => 카카오에 등록한 나의 키해시는 꽝 => 카카오 로그인이 안됨
• 그렇다면 콘솔에서 업로드 할때 서명이 되는 저 키해시를 어떻게 구하느냐가 관건
• 콘솔에 등록되어있는 앱 서명 인증서 => 키해시 추출
• 구글 플레이의 앱 서명 키 해시 구하기

React

• 리액트에서 보여지는 화면의 데이터 값들의 상태를 어떻게 관리하느냐에 따라 성능을 높일 수 있다
• 이때 이 상태를 관리하는 라이브러리 중 하나가 Redux
• 한 화면에서 하나의 동작에 발생하는 여러 비동기적인 이벤트를 관리하면서 리덕스 상태를 관리할 수 있도록 도와주는 미들웨어, 라이브러리 Redux Saga

1/5 - 1/11

업무

• 극한의 최대치를 끌어올려라
• 이런 상황에서 얻는게 있어야만한다 -> 내 시간을 투자한 것 이니깐

Node

• JWT 유저 토큰 헤더로 전달
• Json Web Token

AWS

• 1개의 EC2에 Node + DB 서버를 구축하였다
• 보안그룹 인바운드 설정으로 해당 서버들의 포트를 열어주었다
• 그럼에도 내부적으로 Node에서 DB를 호출하는게 막혀있는 문제가 있었다
• 해결방법을 찾지 못하여 모든 트래픽을 오픈해두고 사용중
• 외부IP가 아니라 로컬IP일까? 하는 의문점
• Env에 선언한 DB Host를 public IP가 아닌 127.0.0.1로 변경해주었더니 해결되었다

12/29 - 1/4

AWS

• 갑자기 12월 결제가 됬다
• 1년 인스턴스를 구입했는데?
• 얼릉 인보이스를 들어가보니 EBS에서 매일 추가요금이 발생하고 있었다
• 나는 단순히 서버를 산것이고 그 서버에서 이용하는 볼륨은 추가 결제 될 예정인가보다...

Node

• 서버를 하나 띄웠다
• 근데 쓰고 싶은 서비스는 많다
• 노드 서버는 하나밖에 못 쓴다
• 그럼 하나뿐인 서버를 나눈다!
• msa 아닌 msa
• controller, service, mapper, db 서비스별로 분리
• process.env가 대체 왜 안읽히는거야 -> export로 설정하고 해당 프로세스에서 forever 돌렸더니 이제된다`

테스트 코드

• 많지 않은 정보
• 의존성이 낮은 함수부터 시작
• 직접 테스트 경험을 쌓으며 습득
• API를 호출한 결과를 json으로 받아서 화면에 렌더링하는 과정을 테스트코드로 확인
• 상위에서 하위 함수를 호출하는데 어느 정도까지 테스트를 해야할까
• 상위에서는 하위 함수을 호출했는지 여부 확인 + 호출된 결과값까지 테스트
• 하위에서는 좀 더 세부적인 내용 테스트
• FE Conf 2018

업무

• 마감일...
• 까도까도 나오는 양파 같은 오류
• 과연 내 코드는 안전할까
• 재사용? 새로 작성? 어떤게 더 효율적일까
• 사용 환경이 달라졌으니 새로 작성하는게 나을 것 같다
• 코드는 계속 변경되고 사용되지 않는 코드가 있을텐데 자동으로 걸러주는 설정이 있지 않을까

Git 서브모듈

• 여러 서비스에서 공통으로 사용
• 각각 만들어주는 것보다 서브모듈 사용
• 나는 하나의 서버를 여러 서비스에서 연결하여 사용하고자 -> 서버를 서브모듈화