마이구미의 HelloWorld 마이구미의 HelloWorld

이 글은 Robots.txt 와 Meta Robots Tag 를 비교한다. 넓은 범위에서 보면 같은 목적으로 생각할 수도 있다. 하지만 정확히 둘 사이의 차이를 알지 못한다면, 예상한 결과를 얻지 못할 수도 있다. Robots.txt - https://developers.google.com/search/docs/advanced/robots/intro?hl=ko Meta Robots Tag - https://developers.google.com/search/docs/advanced/crawling/block-indexing?hl=ko 우선 Robots.txt 를 다시 한번 간단하게 설명한다. (옛날옛적에 작성한 짧은 글) Robots.txt 파일은 검색 엔진 크롤러의 접근을 막기 위해 사용한다. 검색 사..

이 글은 React 에서 전역 모달을 구현하는 방법을 다룬다. 코드 예제는 React + Recoil + Typescript 로 구성되어있다. Recoil 은 단순 모달 on/off 상태 관리 용도로 학습을 거의 요구하지 않는다. (코드는 3줄이다) 참고 글 - https://opensource.com/article/21/5/global-modals-react 코드 예제 - https://codesandbox.io/s/bitter-brook-rep1f?file=/src/recoil/modal.ts:530-621 이 글에서 "전역 모달" 을 의미하는 것은 전역에서 관리되는 상태를 가지는 모달이다. 반대로 지역으로 관리되는 상태를 가지는 모달을 확인해보자. 모달을 import 하고 모달의 on/off 를 관..

이 글은 로컬 스토리지(LocalStorage) 를 타입스크립트 함께 사용하는 방식을 다룬다. 로컬스토리지는 HTML5 에서 제공된 기능으로 브라우저에서 지원하고 있는 저장소이다. 타입스크립트를 활용하여 로컬스토리지를 사용하면서 런타임에 발생할 수 있는 이슈들을 개선해본다. 로컬 스토리지 - https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage 로컬 스토리지는 브라우저에서 제공해주는 key-value 저장소로써, 많은 경우에서 유용하게 사용중이다. 자체적으로 제공해주는 메소드로 '저장', '삭제', '조회', '초기화' 를 쉽게 작성할 수 있다. // Key - "accessToken" | Value - "eyJraWQiOiJVQ2JINXN..

이 글은 타입스크립트 예제 중심으로 다뤄지고 동작 이해를 위해 정리한 글이다. 타입스크립트가 무엇인지? 왜 사용하는지? 에 대한 글은 아니다. "이펙티브 타입스크립트" 를 통해 알게되었거나 스스로 조금 더 다듬어놓기 위한 것들이다. 이펙티브 타입스크립트 - http://www.yes24.com/Product/Goods/102124327 타입스크립트를 사용한 시점부터 깊게 공부하지 않고 기본적인 개념만 가지고 사용했다. 그 이유는 단순 타입 시스템 목적으로 그때그때 습득하면서 사용해도 크게 문제될 것이 없다고 판단했다. 그 과정중 느꼈던 건, 다른 라이브러리들의 코드 분석이 필요할 때, 생각한대로 타입 선언과 추정이 되지 않을 때 조금 난감했다. 그럴 경우에는 any 를 쓰거나 특정 부분은 타입스크립트를 ..

이 글은 "가상 면접 사례로 배우는 대규모 시스템 설계 기초" 라는 책을 리뷰한다. 본인은 백엔드 개발자가 아닌 프론트엔드 개발자이다. 책 링크 - http://www.yes24.com/Product/Goods/102819435 백엔드 개발자가 아니라 시스템 설계에 대한 지식은 많이 부족한 상태이다. 그래도 관심은 항상 많고 학습을 열심히 하고 있다. 그러던 중 이 책은 제목부터 흥미로웠다. 가상 면접 사례로 배우는... 그리고... 페이스북의 뉴스 피드를 설계하시오, 유튜브를 설계하시오, 구글 드라이브를 설계하시오 등과 같은 매혹적인 문장들이 있다. 혹하지 않을 수 없다고 생각한다. 실제로도 제목과 설명은 단순히 어그로가 아니였다. 책의 내용의 흐름은 실제로 면접자과 면접관의 인터뷰 상황속에서 진행된다..

이 글은 자바스크립트 문법 중 Default Parameters 문법에 대해 다룬다. 이름이 생소할 지라도 대부분 사용하고 있는 문법이다. 디폴트 파라미터를 사용할 경우, 정확히 이해하고 있지 않으면 이슈를 맞이할 여지가 있다. MDN - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters 디폴트 파라미터(Default Parameters) 문법은 흔히 사용하고 있다. function multiply(a, b = 1) { return a * b; } 값이 할당되어있지 않으면 기본값을 채워주기 위한 용도로 사용하고 있다. 그리고 함수 파라미터가 아닌 객체에서도 구조 분해 할당 문법과 함께 많이 ..

이 글은 Nuxt.js 에서 Vuetify 에 Custom Icon 을 적용하는 것을 다룬다. Vue 환경에서는 간단하겠지만, Nuxt 환경에서는 조금 손이 가는 작업이 필요할 수 있다. 혹시 Nuxt.js 에서 커스텀 아이콘이 잘 적용되지 않았다면 도움이 될 것이다. 참고 링크 - https://stackoverflow.com/questions/59035257/nuxt-vuetify-module-custom-component-icons-doest-work vuetify 를 사용하면 기본적으로 제공하고 있는 아이콘을 쉽게 사용할 수 있다. 하지만 원하는 모든 걸 제공해주지는 않기에, 커스텀 아이콘에 대한 니즈는 나오기 마련이다. Nuxt.js 환경에서 커스텀 아이콘을 추가하는 방법을 알아본다. 아마 대부..

이 글은 ELK + Kafka + Filebeat 를 통한 로그 시스템을 알아본다. 기본적인 흐름을 구성하고 다룰 것이고, 단계로 보면 입문 정도라고 볼 수 있다. 글의 예제는 Docker 를 기반으로 진행되기에, Docker 의 개념이 필요하다. 예제 - https://github.com/hotehrud/log-system 예제는 github 코드를 clone 하고 docker-compose 를 통해 실행하면 동작된다. 실습을 위한 Github 예제에는 기본적인 명령어 팁들이 있다. (README.md) 혹시 실습이 잘 진행되지않으면, docker logs -f 컨테이너이름 을 통해 에러 여부만 잘 파악하면 큰 어려움이 없을 것이다. 글은 다음과 같은 순서로 진행할 것이다. 각 개념에 대해서는 상세히 ..