블로그/티스토리 팁

티스토리 애드센스 자동광고가 나오지 않을 때 해결방법

애드센스 자동 광고 나오지 않을 때 해결하는 법 애드센스 심사를 마치고 자동 광고를 삽입했는데, 간헐적으로 광고가 안 나오는 증상이 발생하기 시작했습니다. PC, Mobile 둘 다 똑같은 증상이 발생 기존에 애드센스 스크립트를 삽입할 때는 아래와 같은 방법으로 넣습니다. HTML 태그 편집기에서 head 태그나 body태그 하단에 애드센스 스크립트를 동적으로 삽입하게끔 코드를 넣죠. 태그 위에 해당 코드를 삽입합니다. 수정 후 디바이스 타입별로 광고가 잘 붙어있는 것을 확인할 수 있습니다. 자 위와 같이 했는대도 정상적으로 광고가 보이지 않는다면 다음 사항들을 확인해보시는 것도 좋을 것 같습니다. 코드를 훼손하지 않고 위치도 올바르게 넣었다면 우리가 잘못한 부분은 없는 것입니다. 원인 분석차 점검 순서..

Computer science/알고리즘

[LeetCode] 204. Count Primes

Count the number of prime numbers less than a non-negative number, n. Example: Input: 10 Output: 4 Explanation: There are 4 prime numbers less than 10, they are 2, 3, 5, 7. 해당 문제를 풀 때, 처음에는 단순하게 접근하여 이중 for문으로 구현하려고 하였으나 Time Limit Exceeded 제약에 걸려버려 통과를 할 수 없는 상황이 발생했습니다. 해당 문제를 고민하다가 분명 시간복잡도를 줄이기 위한 좋은 아이디어가 존재할거라 생각하여 리서치한 결과 에라토스테네스의 체라는 소수 판별 방법이 존재하는 것을 알게 되었습니다. 접근 방법은 아래와 같습니다. 2부터 소수를 구..

개발/CSS3

CSS Normalize & CSS Reset

모든 웹 브라우저는 HTML 엘리먼트들에 자체적으로 설정된 스타일을 반영합니다. 이 말은 브라우저마다 HTML 엘리먼트 스타일에 대한 처리과정이 조금씩 다르다는 것을 의미합니다. 예를 들어, 사파리와 크롬은 동일한 HTML 문서를 다르게 보여줍니다. 이러한 차이점은 내장된 브라우저 스타일링 때문입니다. 브라우저 간 스타일 불일치를 피하기 위해 내장된 브라우저 스타일링을 제거함으로써 브라우저마다의 스타일링 차이점을 없앨 수 있습니다. 이렇게 내장된 브라우저 스타일링을 초기화하기 위해 사용하는 방법이 CSS Reset과 CSS Normalize입니다. CSS Reset CSS Reset 스타일시트는 모든 HTML 요소에 대한 내장 스타일링을 제거합니다. CSS Reset은 보편적으로 Eric Meyer가 제..

개발/React

React-helmet Maximum call stack size exceeded 버그 수정

개인 프로젝트를 진행하는 도중에 maximum-call-stack-size-exceeded 에러를 마주하게 되었는데, 코드를 아무리 분석해봐도 디버깅을 할 수 없었다. 그러던 와중에 deep-equal이라는 부분에서 에러가 남을 뒤늦게 확인하고 디버깅을 시작했는데 아뿔사 component -> actionCreator -> reducer -> component 에서 데이터를 새로 바인딩하는 도중에 에러가 발생한 곳이 hoc로 구현해놓은 react-helmet 부분이었다.. 정말 어이가 없다. 해결 방법은 굉장히 심플하다. Before: test After: children 구문으로 jsx 파싱을 하지 말란다. 아래는 에러가 발생한 구문 소름돋는건 development 모드에서는 재현이 안되고 produc..

개발/Vue

AWS S3에 Vue Application 배포하기

vue-cli로 구성한 프로젝트를 s3에 배포해서 빠르게 서비스를 구성하는 방법을 공유해드리겠습니다. vue와 s3를 알려드리는 포스팅은 아니기 때문에 해당 지식은 가지고 있다고 가정하고 글을 이어나가겠습니다. vue-cli로 vue 프로젝트 구성 npm install -g @vue/cli # OR yarn global add @vue/cli 정상적으로 설치를 완료했다면, 해당 프로젝트 폴더에서 아래 명령어로 프로젝트를 실행해주세요 npm run serve # OR yarn serve 로컬환경에서 정상적으로 vue 프로젝트를 세팅한 모습 AWS S3에 애플리케이션 배포하기 AWS Console에서 S3 콘솔로 이동합니다. 버킷 생성하기 버튼을 클릭합니다. 고유한 버킷 이름을 적고 생성을 클릭합니다. (하..

개발/Nuxt.js

Nuxt.js x Contentful x Netlify로 static blog 개발하기 3강

이번 포스팅에서는 Nuxt.js와 Contentful로 구축된 static site를 netlify를 통해 배포하는 방법을 살펴보겠습니다. 우선 https://www.netlify.com/ 에서 회원가입을 하고 로그인하도록 하겠습니다. 여러가지 플랫폼으로 가입할 수 있는데, 저는 깃허브로 가입하도록 하겠습니다. 아래 버튼을 눌러서 배포할 프로젝트를 설정하도록 합니다. 프로젝트 저장소는 Github, Gitlab 그리고 Bitbucket으로 지정해서 배포를 할 수 있는데 저희는 익숙한 Github 저장소를 활용해서 배포를 해보도록 할게요. 프로젝트를 저장소에 올리기 위해 https://github.com/에 가입합니다. 깃허브를 가입하면 좌측에 New repository버튼이 있는데 이 버튼을 눌러서 저장..

개발/Nuxt.js

Nuxt.js x Contentful x Netlify로 static blog 개발하기 2강

이번 포스팅에서는 Nuxt.js 프로젝트에 Contentful API를 연결하는 방법을 알려드리도록 하겠습니다. Nuxt 프로젝트에 Contentful 패키지 설치 프로젝트에 Contentful 패키지를 설치합니다. npm install --save contentful @nuxtjs/dotenv or yarn add contentful @nuxtjs/dotenv Nuxt 프로젝트 plugins 폴더에 contentful.js를 추가합니다. // plugins/contentful.js const contentful = require("contentful"); // 방금 전에 설치한 contentful 패키지를 불러옵니다. // contentful의 createClient 메소드를 통해 클라이언트 설정 co..

개발/Nuxt.js

Nuxt.js x Contentful x Netlify로 static blog 개발하기 1강

해당 포스팅은 해당 지식 (nuxt.js, contentful, netlify)이 없어도 쉽게 정적 블로그 사이트를 개발하는데 문제가 없게 작성할 예정입니다. 그래도 기본적으로 html5, css3, javascript의 지식을 가지고 있으면 훨씬 이해하기 쉬울 겁니다. 패키지 매니저에 대한 기본적인 지식은 가지고 있다는 가정하에 포스팅을 진행해 나갈 것 입니다. Nuxt.js? nuxt.js는 일반적인 Vue Application을 개발하는 프레임워크입니다. 기존의 Vue Application에서 좀 더 쉽게 SSR을 적용할 수 있게 도와주는 프레임워크라고 보시면 됩니다. (Server Side Rendering - SSR의 장단점은 구글링하시면, 쉽게 정보를 찾아볼 수 있습니다.) Contentful..

개발/HTML5

Canvas 해상도에 맞게 조정하는 방법

setupCanvas(canvas) { const ctx = canvas.getContext("2d"); if (window.devicePixelRatio) { const { width: hidefCanvasWidth, height: hidefCanvasHeight } = canvas.getBoundingClientRect(); const hidefCanvasCssWidth = hidefCanvasWidth; const hidefCanvasCssHeight = hidefCanvasHeight; canvas.setAttribute( "width", hidefCanvasWidth * window.devicePixelRatio ); canvas.setAttribute( "height", hidefCanvasH..

개발/Vue

Vue CLI 3에서 custom dotenv 활용하는 방법

Vue CLI에서 커스텀 dotenv는 변수명 앞에 VUE_APP_ 접두사를 추가해야 사용이 가능합니다. ex) process.env.NODE_ENV // ex) process.env.NODE_ENV localhost | dev 서버에는 dev rest를 반영하고, release 서버에는 prod rest를 반영하는 조금 신박한 방법 (기존방식 process.env.NODE_ENV === 'development' 로 체크하면 dev서버에 올릴 때 release API URL로 정의되어 올라감) package.json 스크립트에서 dev, prod env를 생성하고 각 env파일에 VUE_APP_API_BASE_URL 변수에 url 추가 // .env.dev VUE_APP_API_BASE_URL=https..

개발/Vue

vue.js Event Bus를 통해 컴포넌트간 통신하기 (Event Bus in Vue.js)

✨ 들어가며 vue.js에서는 일반적으로 부모/자식간의 이벤트 통신하는 방식을 사용합니다. 하지만, 경우에 따라서는 서로 관련없는 독립적인 컴포넌트끼리 이벤트를 통신해야할 때가 생깁니다. 이 경우를 좀 더 편하게 도와주는 vuex라는 state 관리 라이브러리도 있지만 규모가 작을 경우에는 단순히 EventBus를 활용해서 간단하게 처리할 수 있습니다. ✍️ 사용방법 이벤트버스 초기화 이벤트버스를 구현하는 것은 매우 쉽습니다. 단지 아래와 같이 하나의 vue 인스턴스만 생성해주면 됩니다. 이 인스턴스를 독립적인 각 컴포넌트끼리 통신할 때 중간지로 활용합니다. vue component -> EventBus -> vue component // event-bus.js import Vue from "vue"; ..

개발/기타

[MAC] 사용중인 포트 찾아서 Kill 하기

포트 찾기 lsof 는 list open files 의 약자로 시스템에서 열린 파일 목록을 알려주고 사용하는 프로세스, 디바이스 정보, 파일의 종류등 상세한 정보를 출력해 준다. lsof -i :포트번호 ex. lsof -i :8000 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME node 1234 shaking 15u IPv4 0x1f23462a48d69d65 0t0 TCP localhost:cslistener (LISTEN) Kill 하기 kill -9 ex. kill -9 1234

개발/jQuery

jQuery contains() 메서드를 활용한 검색기능 구현

서론 안녕하세요. 정말 오랜만에 포스팅을 남기네요 ㅎㅎ 겨울방학이 시작하고 1월중말까지 정말 많은 일들이 있었네요.ㅎㅎ 사실 이 일들때문에 글을 작성하지 못했다는 것은 핑계인 것 같고, 앞으로 꾸준히 기술 포스팅을 하도록 하겠습니다. 그래도 좋은 소식이 있다면, 2월 1일부터 프론트엔드 개발자로서 첫 출근을 시작한다는 점입니다. 그래도 학부시절에 나름대로 이쪽 분야로 가고싶어서 독학을 하며 실력을 키워나갔는데, 첫 직장을 제가 가고싶은 분야로 나아갈 수 있게 되어서 정말 만족스럽습니다.ㅎㅎ 이제 앞으로 역량을 많이 쌓아나가면서 정말 전문가다운 포스팅을 많이 남기도록 하겠습니다! ㅎㅎ 오늘 제가 포스팅할 주제는 jQuery의 contains() 메서드를 활용한 간단한 검색기능 구현입니다. contains(..

개발/UI개발

[UI 개발] responsive image gallery(반응형 이미지갤러리)

오늘 예제는 반응형 이미지갤러리입니다.자바스크립트나 jQuery를 활용하지 않고, 순수 HTML, CSS 코딩을 통해 반응형 이미지갤러리를 구현하는 것이 포스팅의 목표입니다. 바로 예제를 보면서 시작해보겠습니다. HTML 시맨틱마크업 CSS3 이미지는 각자 파일의 경로에 맞춰서 작성해주시기 바랍니다. 위의 코드는 브라우저나 디바이스의 크기에 따라 유동적으로 변하게 만들어 줍니다. 맨 위의 @media all and (min-width: 960px)는 960px 이상 사이즈부터는 #gallery_layout을 가로, 세로 가운데 정렬을 시켜주기 위해 사용했습니다. 테스트는 하단의 URL에서 확인하실 수 있습니다. http://mismaven.kr/test/responsive_gallery/index.htm..

개발/CSS3

[CSS3] css3 가운데(중앙) 정렬

css를 활용해 가로 및 세로로 중앙정렬하는 방법에는 정말 많은 방식들이 있습니다. 각 중앙정렬 방법은 모두 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 중앙정렬 기법을 만들어낼 수 있습니다. 블록 만들기 반응형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의 .container 요소를 만듭니다. 컨테이너 요소가 적절히 늘려질 수 있도록 html, body { width: 100%; height: 100%; }로 지정합니다. 테이블로 바꾸기 이제 .container 안에서 자주 사용되는 테이블 패턴을 이용해 수직 중앙정렬을 하도록 하겠습니다. 이렇게 하려면 일반 블록 레벨 요소가 필요하고, 이 요소들이..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] List Filtering

In this kata you will create a function that takes a list of non-negative integers and strings and returns a new list with the strings filtered out. Example filter_list([1,2,'a','b']) == [1,2] filter_list([1,'a','b',0,15]) == [1,0,15] filter_list([1,2,'aasf','1','123',123]) == [1,2,123] 필자답안 map을 사용하긴 했지만, 뭔가 2%부족한 답안입니다. 제가 원했던건 map을 사용해서 type이 number라면 그 값만 나오게 하는 것이었는데 number가 아닌 값들은 모두 undef..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - addClass() / hasClass() / removeClass() / toggleClass())

예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 addClass() / hasClass() / removeClass() / toggleClass() 메소드입니다. jQuery addClass() .addClass() 메소드는 특정한 클래스를 요소에 추가할 수 있습니다. 문법.addClass( className )className ( 지정한 클래스 이름을 추가) 데이터타입 : 문자열(String) 1개 또는 2개 이상의 클래스들을 속성에 추가합니다. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String 함수에서 반환된 클래스를 속성에 추가합니다.여기서 함수는 인자(매개변수) 값으로 in..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Sum of the first nth term of Series

Description: Task: Your task is to write a function which returns the sum of following series upto nth term(parameter). Series: 1 + 1/4 + 1/7 + 1/10 + 1/13 + 1/16 +... Rules:· You need to round the answer upto 2 decimal places and return it as String.· If the given value is 0 then it should return 0.00· You will only be given Natural Numbers as arguments. Examples: SeriesSum(1) => 1 = "1" Series..

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Two to One

Description:Take 2 strings s1 and s2 including only letters from ato z. Return a new sorted string, the longest possible, containing distinct letters, - each taken only once - coming from s1 or s2.Examples:a = "xyaabbbccccdefww"b = "xxxxyyyyabklmopq"longest(a, b) -> "abcdefklmopqwxy" a = "abcdefghijklmnopqrstuvwxyz"longest(a, a) -> "abcdefghijklmnopqrstuvwxyz" 필자답안 처음에 split() 메소드를 활용해서 문자열 데이터타..

개발/UI개발

[UI 개발] css3 - tab menu 제작(간단한 탭메뉴 제작)

🖐 들어가기 전에 이번에는 간단한 탭메뉴를 자바스크립트를 통해 구현한 코드를 공유하도록 하겠습니다. 아래에 예시처럼 동작하는 UI를 개발하는 것이 이번 포스팅의 목표입니다. 💻 HTML 시멘틱마크업 How to develop a tab menu with jQuery 제작자 : 박경두 고려대학교 경영정보학과 멋쟁이 사자처럼 4기 About Portfolio Contact Travel About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer ..