코딩뚠뚠

AWS 의 Route53 으로 등록한 내 도메인의 검색 실적을 알고싶다면 어떻게 해야될까? 또는 내 블로그의 유입경로를 알고싶다면?? 네이버 애널리틱스와 구글 서치콘솔 과 같은 도구들이 존재한다. 그 중 구글 서치콘솔에 등록하는 과정을 포스팅하려 한다. Google Search Console Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다. search.google.com 1. 어떤 정보들을 얻을 수 있나? - 총 노출 수 대비 클릭수 - 평균 CTR 및 게재순위 - 국가별 접근, 기기별 접근 등 사이트 유입 관리에 필요한 많은 정보들을 제공받을 수 있다. 2. 내 도메인을 구글 서..

재벌집 막내아들이 16부작을 마지막으로 마무리됐다.결말이 시원하진 않았지만 최고시청률 30%로 화제가 됐었다.이에, 드라마와 MBTI테스트를 합한 서비스를 빠르게 런칭하고자 했고,약 1주일간의 작업 끝에 서비스를 런칭할 수 있었다.아래 내용들을 정리해보고자 한다. 테스트 링크 재벌집 막내 테스트 advancer-rrs.click  기획항상 핫한 MBTI 테스트와 요즘 핫한 재벌집막내아들 드라마를 합하면 꽤나 트래픽이 나올것이라고 생각했다.어렵지 않은 주제로 테스트를 만들고 재밌는 문제와, 정확한 결과를 낸다면 공유가 잘 될것으로 생각.이에 광고를 통한 수익성 창출을 기획했다. 개발최우선 목표는 빠른 개발 및 검증 후 출시.MBTI 테스트의 폼은 널려있기에 Github 의 힘을 빌렸다. 기존 폼 + 컨텐츠..

서비스 배포는 이미 완료했으며 개발간 자잘한 팁들을 포스팅한다. 카톡분석 서비스 주소 https://www.advancer-katalk.click 카톡분석 왕 테스트 www.advancer-katalk.click 개요 카톡으로 링크를 공유받았을때 그 링크는 카톡의 인앱 브라우저로 열리게 된다. 인앱브라우저의 경우 대부분 구동 간 제약이 존재한다 - 글자깨짐, 간격 등의 UI 이슈 - 여러 탭이 열리지 않는 이슈 등 이런 제약들을 우회하고자 페이지를 열었을 때 인앱브라우저이면 -> 크롬, 사파리로 브라우저를 자동전환하는 방법을 알아보고자 한다. 코드로 설명 - index.html 카카오톡이 아니더라도 인스타그램, 페이스북도 인앱 브라우저가 존재한다. 따라서 위 코드에서는 인스타인앱까지 탈출시켜봤다 끝

서비스 배포는 이미 완료했으며 개발간 자잘한 팁들을 포스팅한다. 카톡분석 서비스 주소 https://www.advancer-katalk.click 카톡분석 왕 테스트 www.advancer-katalk.click 아래와 같이 카톡으로 웹페이지를 공유하는 방법을 알아보자 1. 카카오 개발자 사이트에서 웹을 등록 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 API를 사용하는 것이기 때문에 위 작업이 필요하다. 가입후 플랫폼 탭에서 아래와 같이 내 사이트를 적어넣어주자 (localhost는 개발용) 2. 코드내에 Kakao init 해주기 ..

서비스 배포는 이미 완료했으며 개발간 자잘한 팁들을 포스팅한다. 카톡분석 서비스 주소 카톡분석 왕 테스트 www.advancer-katalk.click 프런트엔드를 개발하면서 기본 폰트를 그대로 사용하는 경우는 없을것이다. 폰트를 적용하는 방법을 알아보자. 1. 폰트 다운로드 폰트는 많은 사이트에서 가져올 수 있겠지만 아래 링크에서 가져왔다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 눈누 상업용 무료한글폰트 사이트 noonnu.cc 원하는 폰트를 클릭한 뒤 Download 버튼을 눌러 다운받아준다. 2. 폰트 변환 다운로드한 ttf 파일들은 모든 브라우저에서 동작하지..

서비스 배포는 이미 완료했으며 개발간 자잘한 팁들을 포스팅한다. 카톡분석 서비스 주소 카톡분석 왕 테스트 www.advancer-katalk.click 프런트작업을 처음 해봤기때문에 처음 배경을 설정하는데 굉장히 애먹었던 기억이 있다 개발 초기 배경 화면 : 배포 시 배경 화면 : 어떻게 백그라운드를 완성할 수 있었는지 배경 속성을 정리해보도록 하자. 1. background-color 위 프로젝트처럼 background image 를 쓰면 관계없지만 color 속성을 통해 배경색상을 정할 수 있다. div{ background-color : black; } 2. background-image 배경을 이미지로 지정할때 사용하는 속성값이다. div{ background-image:url("https://~..

서비스 배포는 이미 했지만 그동안 못한 포스팅을 이제야 쓴다. 카톡분석 서비스 주소 카톡분석 왕 테스트 www.advancer-katalk.click 카톡분석 서비스는 기본적으로 카카오톡 파일을 업로드 해야 분석을 시작할 수 있다. (파일은 저장하지 않는다) 그런데 저장후 불러오는 과정이 까다로워 이미지 슬라이드로 설명이 필요한 상황! 아래와 같은 슬라이드 구현이 필요했다. React-slick 과 Carousel React-slick 과 Carousel(캐러셀) 을 이용해 슬라이드를 구현해보자. 1. 설치 npm install react-slick --save npm install slick-carousel --save 2. import import "slick-carousel/slick/slick.c..

드디어 프로젝트 마무리 포스팅이다 개인 프로젝트는 아니였기에 모든 과정을 포스팅에 담을 수는 없었다. 지금은 프로젝트가 마무리되어 정리 포스팅을 작성하지만 놓친 과정,팁들을 이후에도 계속 작성해나갈 예정이다.    결과 페이지 배포한번 테스트를 해본 후 포스팅을 읽는다면 더 이해가 잘 갈 수도..?(Android, Mac, Windows 지원합니다)  카톡분석 왕 테스트 www.advancer-katalk.click실행 흐름도실행 이미지    프로젝트 정리 개발목표카톡을 분석해서 "나는 단톡방에서 어떤'왕' 인가" 를 보여주고, 개인별 선물도 추천해주자 차별점- 카톡분석은 대부분 앱으로 개발되어있으나 공유가 편한 웹으로 제공- 개개인별 선물을 추천  팀원 구성- 인원 : 3명 (임베디드개발자, UX개발자..