개발/Javascript

자바스크립트 동등연산자(==)와 일치연산자(===) 차이

자바스크립트에는 추상적 같음 비교(이중 등호, 동등 연산자)와 엄격한 같음 비교(삼중 등호, 일치 연산자)가 있다. 가장 큰 차이점은 이중 등호는 두 값을 비교할 때 자동으로 형변환하여 같음을 비교하지만, 삼중 등호는 형변환을 수행하지 않고 비교한다. 이중 등호 연산자의 예시를 보자. 0 == false //true "" == false //true "" == 0 //true "0" == 0 //true [1,2] == "1,2" //true new String('hello') == 'hello' //true null == undefined //true이중 등호 연산자는 자동으로 형변환을 하고 비교하므로 위 예시는 모두 true를 return한다. 하지만, 삼중 등호 연산자일..

개발/Javascript

Web Storage API(localStorage, sessionStorage)그리고 Cookie

웹 스토리지 API (Web Storage API) 웹 스토리지 API(Web Storage API)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능입니다. 웹 스토리지 API와 쿠키의 기능 자체는 같지만(데이터 저장), 쿠키는 약 4KB(4096bytes)까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있습니다. 웹 스토리지 API 최신 스펙 확인 Web Storage (Second Edition) This specification defines an API for persistent data storage of key-value pair data in Web clients. This section describ..

개발/Javascript

자바스크립트 호이스팅 (Javascript hoisting)

자바스크립트를 공부하는 사람들은 호이스팅이라는 용어를 접해본 경험이 있을 것이다. 정의를 내려보기 전에, 아래의 예제를 한번 살펴보도록 하자. function greeting() { console.log('hello'); } greeting();greeting 함수를 호출 할 때, 예상대로 hello 문자열이 console에 기록이 될 것이다. 하지만 함수를 선언하기 전에 실행하면 어떻게 될까? greeting(); function greeting() { console.log('hello'); }위 예시는 신기하게도 처음 예시와 동일하게 hello 문자열을 콘솔창에 기록한다. 이것이 바로 호이스팅이 동작하는 방식이다. 대부분 이 호이스팅 동작 방식을 설명할 때, 선언한 변수와..

개발/Javascript

자바스크립트에서 undefined를 체크하는 가장 좋은 방법

x === undefined변수가 선언되어 있지 않으면, 동작하지 않는다. ReferenceError: x is not defined변수가 선언되었지만, 정의가 되어있지 않을 때만 true를 return 해준다. typeof x === 'undefined'를 사용하는 편이 더 낫다.

개발/Javascript

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

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

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

블로그/티스토리 팁

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

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

Computer science/알고리즘

자바스크립트로 소수 구하는 알고리즘 구현(prime number in javascript)

소수란? 1과 자신을 제외한 어떠한 정수로도 나누어지지 않는 수가 소수이다. 1 ~ 1000 사이의 숫자 중에 소수만을 구하는 알고리즘을 구현해보자. 자바스크립트로 구현 function getPrimeNumber() { let results = []; // 1과 1000사이의 숫자 중에 소수를 구하기 위한 반복문 for (let i = 1; i

개발/Javascript

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

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

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

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

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

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