Enjoy Programming

지금 다니는 회사는 물류데이터 기반 해당 데이터들을 시각화해서 보여주고 있다. 처음 시작시에는 필자는 APEX charts를 선택해서 사용했었고 recharts 와 vis 를 사용해보기도 했다.. 근데 뭔가 다 부족 했다. 커스터마이징의 한계가 있었고 결국 D3로 가려고 준비중이다. 하 근데 요새 너무 바쁘다 ㅠㅠ 라카이브는 운영 돌아가고 신입분이랑 둘이서 리뉴얼 기능 업데이트 이슈 해결하고 있고.... 커스트피아는 아직 혼자 개발중이다.. 거기에 D3까지 공부해서 적용을 해야 한다.. 아무튼 열심히 해보자 D3는 뭔가 군침이 생기는 라이브러리다 자 다음 포스팅부터 제대로 포스팅하고 지금은 잠시 기록용 d3.select -> selector string에 해당하는 첫번째 element 선택 없으면 emp..

그동안 코드 스플릿 스플릿 듣기만 했다. 그리고 react에 lazy loading 있다는 것도 알았다. 몇번 써본거 같긴하다. 하지만 제대로 알지 못하고 썼었다. 그러다보니 의미도 없었다... 오늘 이사님과 이야기하던중 오랜만에 접속시 chunk에러가 나는 것을 확인했다고 하신다. 오늘 할 일을 대부분 마치고 chunk에 관해 알아보았다. 우선 간단히 chunk는 react 파일이 빌드 배포될때 모든 코드가 하나의 번들로 묶이게 된다. 번들링은 가져온 파일을 하나의 파일 즉 번뜰로 병합하는 프로세스이다. 이 번들js는 웹페이지에 포함되어 한번에 전체 앱을 로드 할 수 있다. 근데 이게 앱이 커짐에 따라 번들도 커지게 되는데 로드가 오래 걸릴 수 있다. 그래서 code split을 하게 되는데 여러 방법..

자 요새 노마드 코더 강의를 보는데 severless 어쩌고 하면서 prisma라는걸 오늘 알았다. https://www.prisma.io/ Prisma - Next-generation Node.js and TypeScript ORM for Databases Prisma is a Node.js and TypeScript ORM that can be used to build GraphQL servers, REST APIs, microservices & more. www.prisma.io prisma 사이트를 가면 떡하니 첫 문장으로 Node.js와 typescript orm 의 다음세대란다. 그리고 그 밑에 프리스마는 앱개발자들의 빌드를 빠르게 해주고 에러를 덜어준단다 open source database..

이번에 회사에서 새롭게 들어가는 커스터피아 웹페이지 프로젝트에서는 기존에 사용했던 css in js인 styled component 를 최대한 배제 하고 utility first인 tailwind css frame work을 사용하기로 결정 되었다. (새로 사용할 stack은 nextjs & reacQuery & tailwindcss & recoil 등등이다) 뭐 순전 내가 제안한 스택들이지만 tailwindf를 사용한 계기는 이렇다. 기존 styled-component는 아주 좋았다. 솔직히 그냥 써도 무방하다. 근데 한가지 단점을 느낀게 간단한 태그 하나 추가해서 box를 잠깐 조정 해줘야 한다거나 할때 마다 css 컴포넌트를 만들어줘야 하는 단점이 있었다. 뭐 그냥 css in html로 tag하나..

다시 오랜만에 블로그를 쓴다.. 이제 진짜 일주일에 하나는 쓰도록 하자 ㅠㅠ 최근 회사 사이트 툴을 개발하면서 한가지 문제가 생겼다.. 관세청 open api를 이용해서 만드는 기능 이었는데... 하... 이놈의 CORS에러를 또 맞딱드렸다.. 사이트 백엔드 cors는 백엔드에서 설정을 바꿔주면 되는 편안함이 있지만.. third part api를 이용할 때는 이야기가 달라진다. 왜냐 해당 api를 가진 서버에서 Access-Control-Allow-ORigin을 허용해주지 않으면 답이 없기 때문이다. 공공기관에서 해줄리가 만무 하지 않은가... 여기서 잠깐 CORS란 무엇인가. https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS..

역시 오랜만에 글을 올린다. 런칭전 너무 많은 변화가 생겼고 거의 리뉴얼 수준으로 작업이 이루어졌다... 거의 끝났다. 작업을 진행하며 한가지 문제가 된 부분이 있는데 브라우저에서 로그인시 해당 상태가 다른 탭에 공유 되지 않는 현상이었다. 물론 새탭으로 열면 app의 상태는 공유 되어 있다. 하지만 로그아웃시? 또는 두개의 탭이 열린 상태에서 로그인시? apollo의 loggedinVar가 지속적으로 읽혀지고 있어서 새로고침으로 앱을 다시 시작하지 않으면 해당 상태는 역시 공유 되지 않았다. 우선 급한데로 apollo authLink에서 로그인 상태를 token의 유무에 따라 조정을 해줬다.. 이 경우 session의 상태에 따라 api호출시 로그인 상태가 결정되므로 즉각 반응은 아니지만 api호출 이..