오늘은 next.js 에서 koa를 사용하여 custom server를 셋팅하는 방법에 대해서 공부하고 지금 프로젝트에 적용된 server 가 어떻게 돌아가는지에 대해서 파악했다. 아직 완전히 이해는 안가지만 대충 어덯게 돌아가는지 정도는 알게 되었다. 직접 만들어 보면 좀 더 이해가 될거 같다. 비타민 검사 서비스에서 지난번 발생한 IE에서만 질문이 넘어가지 않는 버그가 이번엔 사파리에서도 발견이 되었다. 저번에도 그냥 두니 갑자기 실해이 되었는데 이번에도 한창 해결하려고 보는중에 갑자기해결이 되었다. 사수 말로는 useRef의 문제 같다고 하여 그 부분을 살펴 보았는데 별 다른 이상은 발견하지 못하였다.

i18n 을 적용하기 위해 next.js 에 대해서 공부를 하다가 webpack에 대해서 간략하게 공부를 하게 되었다. 웹팩이란 모듈 번들러로 아래의 그림과 같이 다양한 자원들을 조합해서 하나의 결과물을 만드는 도구이며 모듈 번들링이란 많은 자원들을 하나의 파일로 병합,압축 해주는 동작을 말한다고 한다.

속이 찬 버튼, 보더라인이 있는 버튼, 텍스트 버튼, 아이콘을 가지는 버튼, 원형 버튼을 전부 만들었고 만든 버튼들을 다시 한번 확인하고 수정하는 작업을 진행하였다. 그리고 기존의 버튼들을 이 버튼들로 바꿔주는 작업을 진행 하였다.

서비스를 유지 보수 중 인풋탕의 자동완성을 이용하면 border 가 사라지고 배경색이 변하는 버그를발견했다. 검색을 해보니 크롬에서 자동완성을 이용하면 글자색과 배경색이 변하도록 설정이 되어있다고 한다. 그것을 막으려면 아래와 같이 설정을하면 된다고 한다. input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px..

오늘도 유지 보수 작업을 진행하였다. 어제에 이어서 버튼과 헤더 작업을 진행 하였고 거의 마무리를 하였다. 내일 테스트를 해보고 버튼 헤더 작업은 우선 끝낼 생각이다. 회원 탈퇴 부분에서 소셜 로그인 탈퇴가 구현돼 있지 않아 소셜 로그인인 경우 회원 탈퇴버튼을 보이지 않도록 만들어주어야 했다. 해당 부분이 Redux를 사용하고 있어서 간단하게 Redux에 대해서 공부를 해보았다. Redux 리덕스는 state 상태 관리 라이브러리이다. 글로벌한 state를 사용하여 보다 쉽게 state 관리가 가능하도록 만들어 준다. 1.Action state의 값에 변화를 줄때 액션을 사용한다. 하나의 객체로 표현이 된다. { type: Action, name: ockkk, learning: redux } tpye은 ..

앞으로는 한 동안 기존 서비스의 유지 보수 작업을 진행 한다. 레거시 코드들을 제거하고 기존에 변경해둔 TS 버전의 버튼들로 대응을 해주고 헤더를 통합하는 작업을 진행하였다.