uni's code uni's code

next.js에서 seo를 위해 meta 적용하는 방법은 크게 2가지가 있다. 1) _document.tsx 와 next/head를 이용하여 meta tag를 삽입 2) next-seo 패키지를 통해 더 쉽게 meta tag 설정 여기서는 next-seo 패키지를 통해 meta tag를 설정해보겠다. [Next.js에서 next-seo를 통해 Meta tag 손쉽게 적용하기] 1. next-seo 설치하기 npm install next-seo https://github.com/garmeeh/next-seo GitHub - garmeeh/next-seo: Next SEO is a plug in that makes managing your SEO easier in Next.js projects. Next S..

안녕하세요. 오늘은 SEO 작업 중 필수적인 Meta tag에 대한 정보를 알아보겠습니다. 먼저 SEO(Search Engine Optimization) 작업은 기본적으로 검색엔진에서 로봇이 잘 ‘탐색’하고 ‘저장’해서 ‘노출’할 수 있도록 하는 것으로, 자신의 서비스가 페이지 상단에 노출하고자 한다면, 필수적으로 해야하는 작업입니다. 제목에서 말한 "Meta tag"만 하면 뚝딱 상위권에 올라온다면, 정말 행복하겠지만(ㅠㅠ) 실제로는 Meta tag 이외에 여러 작업 혹은 마케팅 기술들이 들어갑니다. Meta tag는 기초 중의 기초 작업! 보통 어떻게 SEO를 처리하는지 알아보고, Meta tag 중점으로 설명하겠습니다. 1. SEO 하는 여러 방법 1. 테크리컬 seo(접근성): 소비자가 이용하기 ..

안녕하세요. 오늘은 AWS SES를 통해 보낸 이메일에 대해 유저가 열기, 클릭의 액션에 대한 모니터링 하는 법을 알아보겠습니다. 1. 목적 1) 수신자가 이메일을 여는 횟수 파악 2) 수신자가 이메일에 있는 링크를 클릭하는 횟수 파악 3) 이메일이 반송되는 횟수 파악 2. 사용하는 aws 기능 1) AWS SES(Amazon Simple Email Service) - 대량으로 이메일을 전송할 수 있는 클라우드 이메일 서비스 공급자 2) AWS SNS(Amazone simple notification service) - 수신자가 이메일을 열거나, 링크 클릭, 반송될 때마다 알림 전송 3) AWS amazone cloudwatch - 수신자가 이메일을 열거나 링크 클릭, 반송되는 횟수 파악 SES로 이메일..

aws Route53에 대해 다루다보면, 아래처럼 "유형" 행을 확인하실 수 있습니다. 각 유형마다 넣어야하는 값이 달라지기 때문에, route53(DNS)을 다루는 일이 있다면 기본적인 유형에 대해 알고 있어야 합니다. 그래서 dns에서 사용하는 유형의 종류와 의미에 대해 정리해보겠습니다. 1. A 도메인 주소와 서버의 Ip 주소를 직접 매핑합니다. ex) ip - 1.111.11.11 과 example.com 을 직접 연결한다. 2. CNAME CNAME 레코드는 캐노니컬 네임 레코드(Canonical Name Record)의 약자로 , 줄여서 CNAME 레코드라고 합니다. cname 도메인 주소를 또 다른 도메인 주소로 매핑시키는 형태. 즉, 기존의 도메인을 이용해서 새로운 도메인에 별칭을 부여합니..

안녕하세요. 이 글은 이전 글과 이어진 글입니다. https://uni-s-code.tistory.com/43 [Next] i18n 자동화 프로세스 도입 - (1) : i18next-scanner를 통해 코드에서 key 값 추출하기 이 글은 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성한 글입니다. 국제화(i18n) 자동화 가이드 : NHN Cloud Meetup 프런트엔드 개발을 하다 보면 국제화와 번역을 수작업과 uni-s-code.tistory.com 이전 글을 읽지 않으신 분들은, 이전 글을 참고해주시길 바랍니다. 이 글은 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성한 글입니다...

autocomplete를 적용하지 않고 싶은 상황에서, 일반적으로 input 박스에 autocomplete="off"를 설정하면, autocomplete이 적용이 되지 않는다. 1. 문제 원인 하지만, 사파리 브라우저에서 이를 적용하더라도 작동이 잘 안되는 경우가 있다. 이유는 label이나 id에 email, name, password가 들어가면 autofill이 적용되도록 설정되어, 첫번째 input에 자동으로 발생한다. 2. 해결방안 그래서 fake name, password를 추가하여, 실제로 동작하는 input에는 나오지 않도록 한다.

development 환경에서 console.log는 버그를 잡는데 유용하게 쓰이거나, 중간 중간 상태 값들을 확인하는데 필요합니다. 하지만, production 환경(배포된 라이브서버)에서 console.log를 무자비하게 유저에게 보여진다면, 자칫 중요 정보를 보이게 할 수 있고, 지저분해 보일 수 있습니다. 프로젝트 내 console.log를 다 지우는 방법도 있겠지만, 놓칠 수 도 있으며 귀찮은 일입니다. 또한, dev 환경에서 버그 테스트를 하기 위해 일부러 console.log를 남기는 경우도 있을 것입니다. 그래서 prod환경에서는 console.log를 아예 노출이 되지 않도록 설정을 하고자 합니다. 크게 방법은 2가지 입니다. 1. babel plugin 설치 1) babel-plugin..

안녕하세요. 이 글은 이전 글과 이어진 글입니다. https://uni-s-code.tistory.com/42 [Next] i18n 자동화 프로세스 도입 - (1) : i18next-scanner를 통해 코드에서 key 값 추출하기 이 글은 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성한 글입니다. 국제화(i18n) 자동화 가이드 : NHN Cloud Meetup 프런트엔드 개발을 하다 보면 국제화와 번역을 수작업과 uni-s-code.tistory.com 이전 글을 읽지 않으신 분들은, 이전 글을 참고해주시길 바랍니다. 이전 글과 마찬가지로 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성..