-
Github Action 알아보기 (1) :: 마이구미GitHub 2021. 11. 15. 22:25
이 글은 Github Action 을 활용한 예제를 다뤄본다. 예제는 Github Action 을 활용한 CI/CD 를 구축해본다. 예제 코드 - https://github.com/hotehrud/github-action-test Github action - https://github.com/features/actions Github Action 은 Github 에서 공식적으로 지원하는 소프트웨어 개발의 워크플로우를 자동화해주는 도구이다. 기존에는 CI/CD 를 위해서 Jenkins, Amplify, CircleCi, TravisCi 등을 사용하고 있었다. CI/CD 를 위한 별도 서버가 필요하거나 도구를 위한 비용을 지불할 수도 있다. 비용이 무료이거나 별도 서버 구축까지 필요없더라도 대부분 저장소와는..
-
Robots.txt vs Meta Robots Tag :: 마이구미웹 관련 2021. 11. 6. 15:40
이 글은 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 2021. 11. 3. 22:00
이 글은 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 + Typescript :: 마이구미Typescript 2021. 10. 30. 21:17
이 글은 로컬 스토리지(LocalStorage) 를 타입스크립트 함께 사용하는 방식을 다룬다. 로컬스토리지는 HTML5 에서 제공된 기능으로 브라우저에서 지원하고 있는 저장소이다. 타입스크립트를 활용하여 로컬스토리지를 사용하면서 런타임에 발생할 수 있는 이슈들을 개선해본다. 로컬 스토리지 - https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage 로컬 스토리지는 브라우저에서 제공해주는 key-value 저장소로써, 많은 경우에서 유용하게 사용중이다. 자체적으로 제공해주는 메소드로 '저장', '삭제', '조회', '초기화' 를 쉽게 작성할 수 있다. // Key - "accessToken" | Value - "eyJraWQiOiJVQ2JINXN..
-
타입스크립트 몰랐던 것 (1) :: 마이구미책 리뷰 2021. 10. 4. 18:26
이 글은 타입스크립트 예제 중심으로 다뤄지고 동작 이해를 위해 정리한 글이다. 타입스크립트가 무엇인지? 왜 사용하는지? 에 대한 글은 아니다. "이펙티브 타입스크립트" 를 통해 알게되었거나 스스로 조금 더 다듬어놓기 위한 것들이다. 이펙티브 타입스크립트 - http://www.yes24.com/Product/Goods/102124327 타입스크립트를 사용한 시점부터 깊게 공부하지 않고 기본적인 개념만 가지고 사용했다. 그 이유는 단순 타입 시스템 목적으로 그때그때 습득하면서 사용해도 크게 문제될 것이 없다고 판단했다. 그 과정중 느꼈던 건, 다른 라이브러리들의 코드 분석이 필요할 때, 생각한대로 타입 선언과 추정이 되지 않을 때 조금 난감했다. 그럴 경우에는 any 를 쓰거나 특정 부분은 타입스크립트를 ..
-
가상 면접 사례로 배우는 대규모 시스템 설계 기초 리뷰 :: 마이구미책 리뷰 2021. 9. 16. 22:05
이 글은 "가상 면접 사례로 배우는 대규모 시스템 설계 기초" 라는 책을 리뷰한다. 본인은 백엔드 개발자가 아닌 프론트엔드 개발자이다. 책 링크 - http://www.yes24.com/Product/Goods/102819435 백엔드 개발자가 아니라 시스템 설계에 대한 지식은 많이 부족한 상태이다. 그래도 관심은 항상 많고 학습을 열심히 하고 있다. 그러던 중 이 책은 제목부터 흥미로웠다. 가상 면접 사례로 배우는... 그리고... 페이스북의 뉴스 피드를 설계하시오, 유튜브를 설계하시오, 구글 드라이브를 설계하시오 등과 같은 매혹적인 문장들이 있다. 혹하지 않을 수 없다고 생각한다. 실제로도 제목과 설명은 단순히 어그로가 아니였다. 책의 내용의 흐름은 실제로 면접자과 면접관의 인터뷰 상황속에서 진행된다..
-
Default Parameters 문법 :: 마이구미Javascript 2021. 8. 28. 22:50
이 글은 자바스크립트 문법 중 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.js 2021. 8. 28. 22:50
이 글은 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 환경에서 커스텀 아이콘을 추가하는 방법을 알아본다. 아마 대부..