728x90
반응형
 포스팅 썸네일 이미지

개발/Javascript

디자인 패턴:: Simple Factory - Factory Pattern 1

팩토리 패턴은 추상화된 부모 클래스를 활용해서 다양한 파생 클래스들을 공장처럼 찍어내듯 만들어내는 것을 말합니다. real world 예시로는 자동차, 커피, 피자 등 특정 제품을 만들 때 공통된 부분을 추상화된 부모 클래스로 생성하고 제품들 마다 커스텀하게 만들어야 하는 부분들은 하위 클래스에서 지정해주는 것을 들 수 있습니다. 팩토리 패턴은 크게 3종류로 분류해볼 수 있습니다. Simple Factory Factory Method Abstract Factory 이번 포스팅에서는 Simple Factory를 다뤄보도록 하겠습니다. Simple Factory Simple Factory는 객체들의 생성을 책임지고 관리하는 팩토리를 만들어서 확장 및 관리를 용이하게 해주는 방식입니다. Simple Facto..

2020.02.12 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트 call, apply, bind 차이점

자바스크립트 함수를 다루다 보면 this 키워드를 다뤄야 할 경우가 많이 생기게 됩니다. 이 this 키워드를 정확하게 이해하려면 함수와 메서드의 차이부터 제대로 짚고 넘어가야 됩니다. Function vs Method 함수와 메서드는 둘 다 동일한 함수이지만 존재하는 위치에 따라서 함수가 될 수 있고, 메서드가 될 수 있습니다. // 함수 const greeting = () => { console.log(this); } const module = { greeting() { console.log(this); } } greeting(); // window object module.greeting(); // module object차이점이 보이나요? greeting 변수에 할당된 함수에서의 this와 mod..

2020.02.12 게시됨

 포스팅 썸네일 이미지

블로그/티스토리 팁

티스토리에 highlight.js를 활용하여 코드 하이라이트 추가하는 방법

highlight.js Highlight.js는 자바스크립트로 쓰인 코드 구문 강조를 위한 라이브러리이다. 어떠한 프레임워크에도 의존하지 않고, 거의 모든 마크업에서 작동하며 언어 감지 기능을 가지고 있다. 다양한 언어와 여러가지 스타일을 제공합니다. 자동으로 사용된 코드 구문을 찾아 알맞은 스타일로 표현할 수 있습니다. 여러가지 혼합된 코드에 대한 구문 강조가 가능합니다. node.js에서 사용 가능합니다. 어떠한 마크업과도 작동합니다. 어떠한 자바스크립트 프레임워크와도 호환됩니다. 모던 브라우저들, IE9 이상을 지원합니다. 자세한 사용 설명법은 highlight.js 문서에서 확인할 수 있습니다. CDN 이용하기 highlight.js CDN은 cdnjs와 jsdelivr을 지원하고 있습니다. cd..

2020.02.12 게시됨

 포스팅 썸네일 이미지

개발/Vue

Nuxt 301 Redirect 처리하는 방법 (Handling Redirects in Nuxt.js)

301 Redirect 처리를 위해서 Nuxt redirect-module을 설치합니다. 설치 npm install @nuxtjs/redirect-module // or yarn add @nuxtjs/redirect-module nuxt.config.js 설정 { modules: [ ['@nuxtjs/redirect-module', { // Redirect option here }] ] } 최상위에서도 사용 가능합니다. { modules: [ '@nuxtjs/redirect-module' ], redirect: [ // Redirect options here ] } 사용방법 redirect: [ { from: '/test1', to: '/test2' } ] from이 현재 url 그리고 to가 보낼 ur..

2020.02.11 게시됨

 포스팅 썸네일 이미지

블로그/티스토리 팁

티스토리 검색엔진 최적화(SEO) 시키는 방법

SEO란? SEO는 Search Engine Optimization의 약자로 말 그대로 검색엔진이 좋아하는 웹사이트의 조건을 갖추는 것을 의미합니다. SEO작업을 진행하기 위해서는 Sitemap과 RSS 작업을 해야합니다. Sitemap이란? Sitemap은 웹마스터가 크롤링에 사용할 수 있는 사이트의 페이지에 대한 정보를 검색 엔진에 알리는 손쉬운 방법입니다. Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, 변경 빈도, 사이트의 다른 URL에 상대적인 중요도)와 함께 사이트에 대한 URL을 나열하는 XML 파일입니다. 웹크롤러는 보통 해당 사이트 및 기타 사이트의 링크에서 페이지를 검색합니다. Si..

2020.02.11 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트 비동기 프로그래밍 - 콜백함수(callback function)

콜백함수(Callback Function)? 콜백함수를 간단하게 정의하면 어떤 특정 함수가 실행을 마친 후에 실행되는 함수를 콜백함수라고 합니다. 조금 더 세부적으로 설명드리면, 자바스크립트에서 함수는 객체입니다. 이러한 특징덕분에 함수는 인자로써 함수를 받을 수 있고, 다른 함수를 리턴할 수 있습니다. 이러한 특징을 가지는 함수를 고차함수(higher-order functions)라고 부릅니다. 인자로 전달된 함수를 콜백함수(callback function)이라고 부르는 거구요. 고차함수(higher-order functions) 조건 함수를 파라미터로 전달받는 함수 함수를 리턴하는 함수 콜백함수가 필요한 이유 콜백 함수를 사용하는 가장 큰 이유 중 하나는 비동기 데이터를 처리하기 위함입니다. 아래의 ..

2020.02.11 게시됨

 포스팅 썸네일 이미지

일상/컴퓨터 관련 팁

리눅스에서 깔끔하게 폴더 통째로 복사하는 방법(쉬움주의)

원본폴더를 통째로(즉 하위폴더 및 파일들을 포함하여) 목적지폴더로 복사할 수 있습니다. 상황에 따라 하위로 복사되거나, 폴더명이 바뀌며 복사됩니다. 목적지폴더가 원본폴더의 상위폴더가 될 것인지, 아니면 원본폴더의 다른이름이 될 것인지는 상황에 따라 다르므로 주의가 필요합니다. 맨뒤에 '/'를 붙이든 말든 결과에는 상관이 없습니다. cp 원본폴더 목적지폴더 cp 명령어를 입력할 때, cp: omitting directory 'directory name' 라는 에러를 발견할 때가 옵니다. cp -r 원본폴더 목적지폴더 그럴 때는 -r를 넣어주면 해결할 수 있습니다.

2020.02.11 게시됨

 포스팅 썸네일 이미지

개발/Google Cloud Platform

구글 클라우드 스토리지 CORS 세팅방법 (set up CORS for Google Cloud Storage Bucket)

gsutil cors set cors-json-file.json gs://example-bucket google cloud shell에서 touch cors-setting.json 을 생성해줍니다. [ { "origin": [ "*" ], "responseHeader": [ "Content-Type" ], "method": [ "GET", "HEAD", "DELETE" ], "maxAgeSeconds": 3600 } ] cors-json-file.json의 내용을 위와 같이 작성해줍니다. 핵심은 origin입니다. 원하는 도메인을 지정하거나 전체 access를 허용한다면 *을 origin에 추가하면 됩니다. CORS 설정파일을 추가했다면, 이제 cors를 제어할 버킷에게 해당 설정을 반영해주면 됩니다. ..

2020.02.08 게시됨

 포스팅 썸네일 이미지

블로그/티스토리 팁

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

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

2020.02.08 게시됨

 포스팅 썸네일 이미지

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부터 소수를 구..

2019.08.07 게시됨

 포스팅 썸네일 이미지

개발/CSS3

CSS Normalize & CSS Reset

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

2019.08.01 게시됨

 포스팅 썸네일 이미지

개발/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..

2019.07.31 게시됨

 포스팅 썸네일 이미지

개발/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 콘솔로 이동합니다. 버킷 생성하기 버튼을 클릭합니다. 고유한 버킷 이름을 적고 생성을 클릭합니다. (하..

2019.07.30 게시됨

 포스팅 썸네일 이미지

개발/Vue

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버튼이 있는데 이 버튼을 눌러서 저장..

2019.07.29 게시됨

 포스팅 썸네일 이미지

개발/Vue

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..

2019.07.28 게시됨

 포스팅 썸네일 이미지

개발/Vue

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..

2019.07.27 게시됨

 포스팅 썸네일 이미지

개발/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..

2019.07.26 게시됨

 포스팅 썸네일 이미지

개발/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"; ..

2019.07.26 게시됨

728x90
반응형