반응형

분류 전체보기 57

타입스크립트 인터페이스 선언 머지 (Interface Declaration Merging)

Typescript Interface Declaration Merging 정리 타입스크립트에서 기존 인터페이스를 업데이트해야 하는 경우도 있지만, 그 외의 장소에서의 사용 방법을 변경하는 경우는 할까? 인터페이스 선언 병합 Interface Declaration Merging을 사용하면 동일한 이름의 인터페이스가 두 개 있을 때마다 타입스크립트 컴파일러는 두 인터페이스의 속성을 양쪽이 공유하는 이름의 단일 인터페이스로 병합하려고 한다. 타입스크립트를 사용하면 interfaces, enums, namespaces 등 여러 유형을 병합할 수 있습니다. 한 가지 주목할 만한 예는 클래스를 통합할 수 없다는 것이다. 그러기 위해서는 Mixins을 사용해야 한다. 인터페이스 선언 병합의 예 코드 예제를 사용하여 ..

development 2022.12.01

AWS 이미지를 업로드하는 4가지 방법

AWS에 이미지를 업로드하는 방법 정리 방법 1) 서버에 이미지 저장 기본 이미지 저장 방법이다. 사용자가 이미지를 업로드하고 서버가 로컬로 디스크에 저장한다. 작은 파일 1) 장점 파일 업로드가 적으면 일반적으로 서버에 너무 부담을 주지 않으며 이미지를 저장하는 프로세스가 간단하다. 외부 서비스에 의존하지 않고 이미지 처리와 스토리지를 완전히 관리할 수 있다. 2) 단점 서버 한 대가 이미지를 저장하기 때문에 이미지 제공은 최적이 아니다. 사내 CDN을 사용하지 않은 경우 전송 속도는 서버 대역폭과 위치에 따라 달라진다. 또한 이 접근법은 시스템에 단일 장애점을 발생시키기 때문에 확장 가능한 방법이 아닐 수 있다. 그러나 이 접근법은 규모나 규모가 너무 커지지 않는 것으로 알려진 소규모 프로젝트에 있어..

development 2022.11.30

초보자를 위한 리액트(React) 개발 팁

리액트 초보자를 위한 7가지 팁 정리 1. 컴포넌트 name 설정 버그가 있는 컴포넌트를 파악하려면 항상 컴포넌트에 이름을 지정하는 것이 중요하다. React Router 또는 외부 라이브러리를 사용하기 시작하면 더욱 그렇다. // Avoid thoses notations export default () => {}; export default class extends React.Component {}; default본 export를 사용할지 named export를 사용할지에 대한 논쟁이 있다. default export는 컴포넌트명이 프로젝트에서 일관되도록 보장하지 않는다. 게다가 트리 쉐이킹에 덜 효과적이다. 2. 컴포넌트를 expose하는 방법에 관계없이 이름 설정 컴포넌트를 호스팅 하는 클래스 이..

development 2022.11.30

이란 월드컵 선수들이 위험하다

이란 월드컵 축구팀 가족들이 선수들이 위협을 받고 있다. 21일 영국과의 개막전에서 이란 선수들이 국가 제창을 거부한 데 이어 이란 혁명수비대(IRGC) 대원들과의 회의에 소집됐다고 한다. 이란 선수들이 국가를 부르지 않거나 테헤란 정권에 대한 정치적 항의에 동참하면 가족들이 폭력과 고문에 직면할 것이라는 말을 들었다 한다. 이란 선수들은 2-0으로 승리한 지난 금요일 웨일스와의 두 번째 경기 전에 국가를 불렀다. 소문에 의하면 카를로스 케이로스 이란 대표팀 코치는 이란 선수와 그 가족에 대한 협박에 따라 IRGC 임원들과 개별 면담했다고 한다. 관계자는 그 제기된 대화 내용에 대해서는 언급하지 않았다. 관계자들에 따르면 선수들은 잉글랜드 경기에 앞서 선물과 차를 약속받았으나 팀이 국가를 부르기를 거부한..

정보 2022.11.29

Gatsby 사이트에 애드센스(AdSense) 적용하기

Gatsby로 만든 사이트에 애드센스(AdSense)를 적용하는 방법 - 원글 : https://qiita.com/bob_yama/items/2b24fca112587a1bf8e8 Gatsby의 SSR에 대응하는 방법이나 표시되는 화면의 크기에 따라 광고의 표시 숨기기를 전환하는 방법 등의 내용이다. 애드센스에 자신의 사이트를 등록하는 방법등은 검색하면 여러가지 사이트에서 소개되고 있다고 생각하므로 이번은 생략한다. Google 애드센스를 사이트에 적용하려면 적절한 스크립트 태그를 헤더에 추가해야 한다. 그것을 해주는 것이 gatsby-plugin-google-adsense | GatsbyJS 라는 플러그인이다. npm 또는 yarn으로 설치하고 gatsby-config.js에 다음 설정을 추가한다. pl..

development 2022.11.29

Phaser 개발환경 세팅

Parcel을 이용하여 Phaser 개발환경 세팅하는 방법 node가 설치되어 있어야함 1) node, npm 설치 확인 node --version npm --version 2) parcel-bundler 설치 npm install -g parcel-bundler 3) 템플릿 클론 https://github.com/ourcade/phaser3-parcel-template.git 4) 설치 및 실행 npm install --save npm run start 5) http://localhost:8000으로 접속해서 확인 - 참고 : https://blog.ourcade.co/posts/2019/get-started-phaser3-fast-painless/

development 2022.10.04

리액트에 구글 애드센스 다는 방법

React와 같은 SPA의 경우 Google 애드센스(Adsense)는 기존 요청마다 HTML을 반환하는 SSR을 전제로 하므로 배포를 위해 궁리가 필요하다. 공식 문서에 SPA에 대응하는 가이드가 없기 때문에, 어떻게 도입하는지 글로 작성했다. 애드센스 광고 유형은 반응형이 가능하며 권장되는 디스플레이 광고를 사용한다. (설정 필요 없음) 이 글에서는 별도의 패키지를 사용하지 않는다. 패키지를 도입하지 않는 이유 패키지를 도입할지의 판단 기준으로서, 독자적인 개발 공수와 번들 사이즈 증가를 대비했을 때, 도입하는 편이 메리트가 큰지 어떤지로 보고 있다. 이번 경우 애초에 광고가 단순화된 것으로 패키지로 처리해야 할 처리가 없다고 판단했다. 또 패키지 도입 시의 단점으로서 갱신 빈도가 낮으면 트렌드로부터..

development 2022.09.26

SPA도 애드센스(adsense) 통과 가능하다

react, vue 같은 SPA 서비스도 애드센스 통과가 가능할까? 결론은 가능하다. * 원글 : https://qiita.com/boneskeleton/items/ea86d129fe9231f0b8d9 "SPA는 SEO의 관점에서 불리하다.", "광고를 올리도록 애드센스가 심사 통과시켜 주지 않는다."라는 이야기도 있고 한편으로는 "구글 검색봇은 자바스크립트를 읽을 수 있기 때문에 SPA에서도 괜찮다."라는 이야기도 있다. 사실은 어떨까? 2022년 2월 시점으로 SPA 웹앱 애드센스를 통과했다. 1. 검색엔진 반영 SPA 웹앱은 검색 엔진에 제대로 인덱스 되는 것인가? 1) Google 옛날에는 크롤러가 자바스크립트를 지원하지 않았기 때문에 SPA는 색인에 등록되지 않았다고 알려져 왔다. 그러나 현재(..

development 2022.09.25

자바스크립트 localStorage Expiry(만료시간) 설정

브라우저 로컬스토리지(localStorage) 만료시간 설정하기 localStorage에서는 만료 시간을 제공하지 않는다. 하지만 자바스크립트를 사용하여 TTL(Time to Live)을 추가하여 특정 기간이 경과한 후 localStorage의 항목을 무효화할 수 있다. 아래 처럼 만료시간을 설정하면 된다. 저장될 원본 정보와 함께 예상 만료 시간을 저장 데이터 조회 시, 현재 시간과 저장된 만료 시간을 비교 현재 시간이 저장된 만료 시간보다 크면 null을 반환 후 저장소에서 제거하고, 그렇지 않으면 원래 정보를 반환 만료 시간이 있는 항목 저장 localStorage에 키를 설정하고 만료 시간을 함께 저장할 수 있는 함수 function setWithExpiry(key, value, ttl) { co..

development 2022.09.23
반응형