Template Library 시리즈의 세 번째 글은 Next.js 12 적용에 대한 이야기입니다. Next.js 12 업데이트 소식 나온 지 거의 두 달이 지나가고 있네요. Template Library에서 먼저 적용하여 테스트해보고 실무에도 적용한 지도 한 달이란 시간이 넘게 지나가고 있습니다. 사실 이 글은 Template Library를 적용하고 바로 작성하고자 했지만, 정작 적용 후 개인적으로 너무 바쁜 시간을 보내어 지금에서야 작성하게 되었습니다. Rust Compiler: 3x faster Fast Refresh an
대략 34분기 동안 진행된 스터디에서 리액트 네이티브에 대한 주제로 선정한 책이다. 책 선정 기준은 비교적 자주 업데이트되는 최신 라이브러리다 보니 최신에 작성된 책이고 전자책으로 구매가 가능한 책으로 선정하였다. 필자의 경우는 이미 스터디를 진행하기 전에도 리액트 네이티브를 사용해본 적이 있고, 진행하는 중간에 POC 프로젝트를 위해 간단하게 실무에서도 사용했기에 예제 코드 부분을 실제로 작성해가며 보지는 않았다. 오히려 필자 기준의 예제로 구성하며 진행하였으며 따로 작성할 내용이 없지만, 같이 스터디를 진행한 분들의 말씀을 빌어
동기 Next.js에서 Tailwind CSS, Cypress 사용기라는 글을 작성하며 Tailwind CSS로 블로그 개편을 진행하였습니다. 기존에는 Bulma라는 CSS Framework를 사용하고 있었는데, 입맛에 맞는 스타일을 적용하는 부분이 불편하다고 느끼고 있어서 이번 기회를 통해 전환하고자 했습니다. 추가로 사용이 애매한 메인의 페이지 및 공유 버튼들은 제거하고 다크 테마를 적용하고자 했습니다. Tailwind CSS 설정 Tailwind CSS는 공식 문서에서 환경별 설정 방법을 자세하게 제공하고 있습니다. Inst
Template Library 시리즈의 두 번째 글을 작성하고자 합니다. 이번에 시도한 내용은 계속 사용해오던 Next.js입니다. Next.js 및 이 글에서 사용한 라이브러리들이 무엇인지는 이미 많은 글이 함께하고 있으니 간략하게만 이야기하고 넘어가고자 합니다. 필자는 근 몇 년간 React와 Next.js를 실무에서 많이 사용하고 있습니다. 여기에 Ant Design까지 덧붙여서 세트로 사용하고 있습니다. 필자가 작성하고 있는 대부분의 프로젝트는 이 세트를 베이스로 다른 라이브러리들을 선택하여 시작합니다. 그래서 Templat
예전에 회사 분의 소개로 Separating Axis Theorem(SAT)에 대해 알게 되어, 이를 스터디해서 Playground라는 개인용 공간에 SAT라는 예제로 만들었습니다. 이때 나름 정리를 해두었다고 생각했는데, 이제 와서 보니 한 줄로만 정리해두어 다시 보니 전혀 도움이 되지 않아, 이 예제를 Labs로 옮기면서 간단하게나마 기억해두고 싶은 부분을 정리해두고자 합니다. SAT란? SAT는 볼록한(Convex) 물체가 충돌하는지 판단하고, 충돌에서 벗어나기 위해 사용할 수 있는 벡터(Minimum Translation
turf.js의 distance에서는 Haversine formula를 사용하고 있고 이를 이해하기 위해 이것저것 찾아보던 중 지구에서 두 점 사이의 거리 구하기라는 글과 이 글의 원문인 Calculate distance, bearing and more between Latitude/Longitude points을 보았습니다. 이 글에서 Haversine formula를 사용하는 방법 외에도 다양한 두 점 사이의 거리를 구하는 방법을 소개하고 있어서 한번 살펴보고자 합니다. Haversine formula 먼저 살펴볼 방법은 H
이번에 스터디에서 사용할 React Native 설정을 진행하면서 만나게 된 문제를 해결하기 위해서 찾아본 것들에 대해서 나중에 다시 참고하기 위해 간단하게나마 정리해보고자 합니다. 기본 설정 기본적인 설정은 React Native의 공식 문서인 Setting up the development environment를 참조해서 진행하였습니다. 해당 가이드를 따라가면서 정리할 만한 내용은 다음과 같습니다. Expo CLI vs React Native CLI 환경에 구애받지 않고 간단하게 개발을 시작하기에는 Expo가 매력적이겠지만,
스터디에서 사용할 React Native 환경을 설정하기 위해 오랜만에 현재 PC들에 설정하고 있었습니다. 늘 그래왔듯 한 번에 되지는 않았고 여러 문제와 함께하고 있습니다. 처음에는 맥의 M1 환경에서 진행을 시작하였지만, 이것이 M1으로 인한 문제인지 판단을 할 수 없어 기존 환경으로 돌아와서 설정을 진행하였습니다. Lerna을 이용한 설정 및 해결 가능한 문제들을 제거하고 나니 npm run ios을 실행할 경우는 아래의 오류가 발생했지만 npx reactnative runios을 실행할 때는 정상적으로 동작하는 문제에 봉착하
Template Library라는 이름으로 새로운 시리즈의 글들을 작성하고자 합니다. 우선 Template Library가 무엇인지 말씀드리고자 합니다. 개인적 또는 업무적으로 크고 작은 프로젝트를 진행하다 보니 일부 기술 세트에 대해서는 기본이 되는 부분을 공통화해서 정리해두면 좋을 것 같다는 생각이 들었습니다. 이렇게 잘 정리해두면 이를 참고하여 새로운 프로젝트를 시작할 때 기준으로 사용할 수도 있겠다 싶었습니다. 이를 위한 방법으로 막연하게 시간이 나면 Todo List를 구현해서 정리하자고 생각만 하고 있을 때쯤 Todo l
약 2년 만에 다시 스터디를 진행하게 되었는데, 가볍게 시작하고자 이번에는 책을 하나 정해서 시작하고 했다. 이번에 선정한 책은 프레임워크 없는 프론트엔드 개발로 Facebook에서 지인들이 소개하는 것에 관심이 생겨 구매해두었지만 방치하고 있던 것을 이번 기회로 한번 읽고 싶어 제안했다. 총 270페이지 정도의 두껍지 않고 내용이 어렵지 않아 4주간 진행되었다. 이 책은 프레임워크 없는 운동을 지지하는 저자가 프레임워크에 대한 정의부터 많이 사용하는 프레임워크의 필수 기능들에 대하여 모던 브라우저의 기본 API 및 가벼운 라이브러
Next.js를 사용 중에 일부 nodemodules 들에 대해 Transpile 해야될 필요가 있어서 nexttranspilemodules을 사용하고 있었습니다. 별도로 정리할 내용도 없을 정도로 간단한 설정으로 사용할 수 있는 모듈이어서 별도로 정리하거나 하지 않았습니다. 다만 근래에 코드를 정리하다보니 해당 모듈을 사용하고 있다는 존재 자체를 잊어버리고 있어서 간단하게 나마 정리해보고자 합니다. 모듈의 설치는 무척이나 간단합니다. nexttranspilemodules을 설치해 주시고 next.config.js에 하단과 같이 사
주로 Line 위에 방향을 표시할 때 많이 사용했고 Along 내부에서 사용하는 Bearing에 대해 살펴보고자 합니다. Greatcircle distance Bearing도 Distance와 유사하게 Haversine formula와 Greatcircle distance와 관련이 있습니다. 다음과 같이 두 점사의 각도를 살펴보면 Greatcircle distance에 의해 다음과 같이 두 점 사이의 각도를 구할 수 있습니다. 이때 두 점에 대해서 $\varphi1$, $\varphi2$는 경도(latitude)를 $\lambda
개인적으로는 distance를 직접적으로 사용하는 경우는 많지 않았지만, 자주 사용하는 다른 함수 내부에서 사용하는 경우가 많아 먼저 살펴보고자 합니다. Haversine formula distance 함수의 주석을 보면 Haversine formula를 사용했다고 적혀있습니다. Haversine formula는 링크한 위키백과를 보시면 상세하게 설명되어 있습니다. 이 공식이 어떻게 도출되는지 찾아보고 이해해보려고 했지만 아직은 능력 밖의 일인지 여간 쉽지 않아서 주어진 공식으로 함수만 이해해 보려고 합니다. Greatcircle
평소 자주 사용하는 turf.js를 분석해보는 것을 연초 목표로 잡아 여유가 있을 때 마다 진행하고자 합니다. 우선 자주 사용했던 기능 중에 다른 기능들에 사용되는 기능을 먼저 보고자 합니다. 가장 먼저 선택한 함수는 turfhelpers에 포함된 radiansToLength와 lengthToRadians입니다. Factors 언급된 두 기능을 살펴보기 전에 우선 두 요소에서 공통으로 사용하는 요소를 하나 보고자 합니다. 두 함수 모두 지구의 구형(타원체가 아닌) 반경을 사용하는 측정 요소를 단위에 맞춘 값을 사용합니다. 해당
2020년은 코로나19와 바쁜 업무로 인해 연초에 잡았던 목표들을 거의 달성하지 못한 아쉬웠던 한해였다. (작년에도 거의 달성하지 못한 것 같았지만 말이다.) MKPI 개발 Mission GIS에 대한 역량 강화 FrontEnd에 대한 역량 강화 Graphics에 대한 역량 강화 Architecture에 대한 역량 강화 KPI GIS GIS 지리정보학 읽기 : 0% 월에 한번 내용 정리 : 0% Mapbox 분석 : 0% Map Server 환경 설정 및 사용 : 100% Sof