개발/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 안에서 자주 사용되는 테이블 패턴을 이용해 수직 중앙정렬을 하도록 하겠습니다. 이렇게 하려면 일반 블록 레벨 요소가 필요하고, 이 요소들이..

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

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

개발/UI개발

[UI 개발] css3 - overlay side navigation 제작(오버레이 사이드 네비게이션)

Side Navigation(overlay) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내고, 컨텐츠 부분의 배경을 오버레이하는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

개발/UI개발

[UI 개발] css3 - push-content side navigation 제작(사이드 네비게이션)

Side Navigation(push content) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

개발/UI개발

[UI 개발] css3 - full-width side navigation 제작(풀 사이드 네비게이션)

Side Navigation(full-width) 이번에 준비한 사이드 네비게이션은 페이지 전체를 덮는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

개발/UI개발

[UI 개발] css3 - side navigation 제작(사이드 네비게이션)

Side Navigation 안녕하세요. 오늘부터 UI 개발한 코드를 블로그에 공개하려고 이렇게 글을 쓰게 되었습니다. 꾸준히 개발하면서 나온 결과물을 포스팅하겠습니다. ㅎ 혹시 필요한 기능이 있으시다면, 자유롭게 사용하시고, 개선사항이 있으면 알려주시면 고맙겠습니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - animate())

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

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - slideDown() / slideUp() / slideToggle())

이번에 다뤄볼 기능은 jquery - slide() 메소드입니다. jQuery Effects - Sliding slide 메소드는 요소를 위 그리고 아래로 움직이게 도와주는 기능을 가지고 있습니다. slide 메소드는 아래와 같이 3가지 기능을 가지고 있습니다. slideDown()slideUp()slideToggle() jQuery slideDown() Method slideDown() 메소드는 요소를 아래로 내려주는 역할을 합니다. 문법 $(selector).slideDown(speed,callback); 인자는 지금까지 소개했던 메소드와 같이 속도를 제어할 수 있는 인자와 추가적인 기능을 적용시킬 수 있는 callback 함수 인자를 가지고 있습니다. 아래는 slideDown() 메소드의 예시입니다..