Category – JavaScript
37 posts tagged with "JavaScript" (See all categories)

AApply eslint to a node project

21.01.20192 Min Read — In JavaScript

Install ESLint 프로젝트 디렉토리에서 위와 같이 설치한다. 만약 글로벌로 설치 하고 싶다면 다음과 같이 설치 한다. Init ESLint ESLint를 dev 로 설치 했다면 위와 같은 명령으로 ESLint 를 init 한다. 글로벌로 설치 했다면 위와 같이 실행한다. ESLint config Use a popular style guide…

HHow to not create sourcemap when building from CRA project

09.01.20192 Min Read — In JavaScript

React 프로젝트를 프로덕션에 배포 하기 위해서 build를 하게 되는데 js, css 파일들의 sourcemap 이 같이 생성 된다. sourcemap은 minify 된 파일 디버깅을 편하게 하기 위해서 만드는걸로 알고 있는데 프로덕션 배포시에 이 파일이 딱히 필요없다고 생각한다. 그래서 build 할 때 sourcemap을 생성하지 않고 build…

DDjango webpack loader

22.10.20182 Min Read — In JavaScript

일반적으로 Vue 또는 React를 사용하게 되면 SPA로 작업하겠지만 기존에 Django 프로젝트에 API 가 준비 되어 있지 않다면 바로 SPA로 만들기 힘들다. 우리 회사 프로젝트가 그렇다... Django Template와 Vue를 같이 쓰기 위해 Django webpack loader를 적용해 회사에서 Vue를 사용하기 위한 작업을 했다. Vue…

UUsing scss in a project created with CRA 2.0

18.10.20181 Min Read — In JavaScript

App.css 파일을 App.scss 파일로 변경하고 App.js 에서 import 해보자. 위와 같은 오류 메시지를 볼 수 있다. 오류에 친절하게도 설명이 있다. 프로젝트 디렉토리에서 패키지를 설치 하자. 이제 App.js 파일에서 App.scss 파일을 import 하면 scss 에 선언한 내용이 적용 된다.

VVisibilitychange 이벤트 사용하기

27.08.20181 Min Read — In JavaScript

회사에서 동영상 서비스를 하고 있는데 안드로이드 디바이스 파이어폭스를 사용하는 유저가 브라우저를 내려도 동영상 재생이 계속 되어서 소리가 들리는 문제가 있었다. 간단하게 window blur 이벤트가 발생하거나 window focusout…

VVuex actions 안에서 router 변경하기

20.06.20181 Min Read — In JavaScript

Vuex actions 에서 비동기로 로그인 처리를 하고 promise 를 reture 해주는 방식으로 코드를 작성했었다. 이유는 로그인 처리가 끝나고 페이지를 이동해주기 위해서였다. 또 Vue methods 함수안에서 처리하고 있어서 mapActions를 쓰지 못하는게 싫었고... 코드를 좀 더 보기 좋게 하기 위해서 Vuex actions…

JJest에서 localStorage 사용

19.06.20181 Min Read — In JavaScript

회사 프로젝트 로그인 부분에서 token을 받아와 localStorage에 저장을 하고 있다. Jest를 사용해서 테스트 코드를 작성하다 보니 localStorage 가 없어서 테스트가 정상적으로 동작 하지 않았다. 그래서 좀 찾아보니 다음과 같은 패키지를 설치해서 해결 할 수 있다는걸 알게 되었다. 설치 설정 package.json jest…

BBrowser에서 React 사용하기

09.06.20182 Min Read — In JavaScript

회사 프로젝트 서버는 현재 django를 사용하고 있고 django template 에는 jQuery, vanilla.js 등 섞여 있는 상태이다. webpack을 쓰지 않고 현 상태에서 특정 부분만 react로 변경 가능한지 궁금했고 브라우저에서 react를 바로 사용하려면 어떻게 해야 하는지 궁금해서 테스트를 해보았다. react.js, react…

VVue.js img src 데이터 값 넣기

08.06.20181 Min Read — In JavaScript

JavaScript 코드 HTML 코드 위와 같이 해줬는데 description은 나오는데 thumbnail이 나오지 않는다 어떻게 해야 하는건가 하고 찾아봤다. 위와 같이 하면 된다고 해서 코드를 수정해봤다. 정상적으로 이미지가 나오는걸 확인했다. 참조 img src data binding? · Issue #202 · vuejs/Discussion…

JJest matchers 알아보기 - 1

08.02.20181 Min Read — In JavaScript

toBe 기대치 값이 원하는 값인지 비교할 때 사용한다. toBe 앞에 not 을 붙여주면 값이 같지 않음을 비교한다. 테스트 코드 실행 toEqual 두 객체의 값을 비교할 때 사용한다. toEqual 앞에 not 을 붙여주면 같지 않음을 비교한다. 테스트 코드 아래와 같이 객체가 같을 때와 같지 않을때 비교를 할 수 있다. 실행

JJest 시작하기

08.02.20182 Min Read — In JavaScript

설치 npm 또는 yarn 으로 개발 환경에서 쓰는 모듈이기 때문에 개발 옵션을 주고 아래와 같이 설치한다. 코드 작성 파일을 만들고 아래와 같이 코드를 작성한다. 테스트 코드 작성 테스트용 파일을 만들고 아래와 같이 코드를 작성한다. 기본적으로 * .test.js…

NNumber.isNaN 함수

31.01.20181 Min Read — In JavaScript

알고리즘 문제를 풀다가 해당값에 문자열이 포함되어 있는지 숫자만 있는지 구분을 하는 문제가 있어서 parseInt 를 써서 NaN 이면 숫자가 아니라고 판단하려고 했다. 하지만 아래와 같은 결과가 나왔다... 그럼 NaN 인지 판단은 어떻게 할 수 있단말인가... 검색 해보니 isNaN() 이라는게 있다는걸 알게 되었다. 예제는 다음과 같다.

NNode.js readline 사용하기

30.01.20181 Min Read — In JavaScript

요즘은 기술면접 전에 알고리즘 코딩 테스트를 하는게 일반적인 면접 과정인거 같다. 그래서 Baekjoon Online Judge 에서 알고리즘 공부를 꾸준히 해볼까 한다. 첫번째 문제 “Hello World…

WWebpack 개념 정리

29.01.20183 Min Read — In JavaScript

요즘은 라이브러리들이 init cli 를 지원해서 webpack 를 직접 설정 할 일이 별로 없어진거 같긴 하다. 그래도 면접에서 webpack 에 대해서 물어본다면 기본은 알아야 하지 않을까 싶어서 개념에 대해서 정리해 보려고 한다. webpack 의 핵심 개념은 4 가지(Entry, Output, Loaders, Plugins)라고 한다. Entry…

JJavaScript Array 변경 함수

24.01.20182 Min Read — In JavaScript

이직을 준비하면서 알고리즘을 공부하면서 느낀거지만 가 중요한 부분을 차지하고 있는거 같다. 그래서 Array 객체의 method 중에서 Array 를 변경할 수 있는 method 를 정리해볼까 한다. Array.prototype.push() 설명 예제 하나의 요소를 추가하는 경우 하나 이상의 요소를 추가하는 경우 Array.prototype.pop…

ccreate-react-app에서 Mobx decorators 사용하기

09.01.20181 Min Read — In JavaScript

Mobx 를 공부해보려고 create-react-app 으로 프로젝트를 생성했다. 예제에 있는 코드를 입력하고 build 가 되길 기다렸는데 다음과 같은 에러가 발생했다. decorator 가 정상적으로 동작하지 않는것이다. decorator 는 es7 에 포함되는걸로 알고 있는데 create-react-app 기본 babel 설정에 es…

cclassnames 라이브러리 제거

04.01.20181 Min Read — In JavaScript

3 년만에 react-bingo 프로젝트를 다시 시작 하면서 코드를 보니 예전에 props 의 값에 따라서 class 를 추가 하고 빼주기 위해서 classnames 를 사용했던 코드들이 있었다. 요즘은 classnames 라이브러리 없이 여러개의 class 를 props, 특정값에 따라서 넣고 뺄 수 있는지 찾아보니 ES…

VVisual Studio Code에서 Prettier 설정하기

29.12.20171 Min Read — In JavaScript

Prettier 를 cli 로 사용할 수 있지만 Visual Studio Code 에서 편하게 쓰고 싶어서설정하는 방법을 알아봤다. 설치 CMD + Shift + P 단축키를 입력해서 Command Palette 를 열고 다음을 입력해서 Prettier - Code formatter 를 설치한다. Prettier - Code formatter…

AAnt Design 설정하기

11.12.20173 Min Read — In JavaScript

예전에 다른분이 추천을 하는 링크를 봐서 기억하고 있었는데 회사에서도 프론트 개발자분들이 주로 사용하는거 같아서 설정 방법을 알아봤다. create-react-app 으로 주로 사용하고 있어서 설정하는 방법을 정리 해볼까 한다. 프로젝트 생성 으로 프로젝트를 생성한다. 프로젝트 구조 생성된 프로젝트의 구조는 다음과 같다. antd 설치 css…

RReact 개발환경 설정

13.04.20151 Min Read — In JavaScript

요즘 React 에 흥미를 느끼면서 이거저거 해보고 공부를 하고 있다. 이전에는 프론트엔드 개발을 하면서 build 만 watch 같은 것들을 따로 설정하지 않고 작업을 했었는데 React 를 공부하는 김에 겸사 겸사 공부를 하게 되었다. 기본 디렉토리 구조 디렉토리 구조는 아래와 같다. src 에는 개발단계에서 파일들을 쪼개서 개발을 하고 webpack…

rreact-native 시작하기

03.04.20151 Min Read — In JavaScript

설치 프로젝트 생성 프로젝트 실행 위와 같이 명령어를 치면 xcode 에서 testProject 가 열립니다. run 을 실행하면 build 가 되고 터미널 창이 하나 열리면서 서버가 실행이 된다. 그리고 iOS Simulator 이 실행되고 다음과 같은 화면을 확인 할 수 있다. 만약 xcode 에서 run…

NNode.js로 html파일 indent 적용해서 파일 생성하기

04.03.20141 Min Read — In JavaScript

간단하게 파일을 쓰려고 할때 다음과 같이 사용하면 된다. 근데 html 파일을 작성할때 내용을 자동으로 indent 해주는 모듈은 없을라나... 했는데 htmltidy 요런게 있구나~ 요렇게 해주면 index.html 파일에 이쁘게 indent 가 적용되서 저장된다~ 좋은데?!

NNode.js로 크롤링해서 메일로 보내주기

02.03.20142 Min Read — In JavaScript

우리 회사는 교육 부분에 많은 서비스 하고 있다. Google Play 교육 카테고리 최고 매출 순위를 보는 회사분들이 있는거 같다. 그래서 크롤링해서 메일로 보내주는 스크립트를 node.js 로 한번 만들어 봤다. 크롤링은 jsdom 모듈을 사용하고, jsdom 메일 보내기는 nodemailer 를 사용하였다. nodemailer…

nnode-webkit 사용해보기

18.10.20132 Min Read — In JavaScript

갑자기 만들어 보고 싶은게 생겼는데 node-webkit 으로 만들면 괜찮을꺼 같아서 사용해 볼까 한다. 일단 난 mac 를 사용하니까 mac 에서 실행하는 방법을 알아보자. Downloads Linux: 32bit / 64bit Windows: win32 Mac: 32bit, 10.…

FFRENDS Hackathon 2012 늦은 후기

20.04.20121 Min Read — In JavaScript

지난달 3 월 30 일 저녁 10 시부터 3 월 31 일 저녁 10 시까지 FRENDS Hackathon 2012 을 했다. 예전 한글과 컴퓨터에 포함되었던 산성비 게임을 웹으로 만들어 보면 재미있지 않을까해서 주제를 산성비 게임으로 정하고 만들어 보았다. 사실 3 월에는 둘째 출산으로 인해서 힘든 상태에 여러 귀차니즘이 발동을 해서 Hackathon…

WWeb Editor beforeunload event 적용하기

05.04.20121 Min Read — In JavaScript

현재 개발 하고 있는 사이트에서는 Tinymce Editor 를 사용하고 있는데 plugin 으로 Editor 을 사용중에 back space 를 누르거나 다른 페이지로 이동으로 하려고 할때 다음과 같은 modal…

EEvent Capturing Bubbling

03.04.20122 Min Read — In JavaScript

스터디를 진행하면서 다시 한번 알게 된것이 있어서 정리를 해볼까 한다. 보통 JavaScript 에서 click, over 등등... 이벤트가 발생하게 되면 target(예를들어 click 한 element) 에서만 이벤트가 실행 된다고 생각하고 있을것이다. 하지만 실질적으로 브라우저에서는 이벤트가 발생하게 되면 capturing 과 bubbling…

WWYSIWYG Editor 만들기

02.12.20111 Min Read — In JavaScript

회사에서 작업하다가 bold, italic, underline 기능만 필요한 WYSIWYG 가 필요해서 어떻게 해야 할지 앞이 캄캄해서 그냥 오픈 소스를 써야 하나 했는데 역시 구글신이 간단한 방법을 알려줬다. contenteditable 사용해서 엘리먼트에 바로 편집이 가능하게 된다. 요것은 HTML…

NNode.js 이용해서 chat을 만들어보자[3]

29.11.20112 Min Read — In JavaScript

오늘은 닉네임 입력을 하고 로그인을 하고 페이지를 빠져나오게 되면 로그아웃이 되는걸 구현해 볼까 한다. 소스는 다음과 같이 수정을 하면 된다. server.js 소스에 보면 on Method 와 emit Method 가 있는데 간단하게 생각하면 된다 on Method 는 받는거고 emit Method 는 보내는 거다 라고 생각하면 된다. index.html…

NNode.js 이용해서 chat을 만들어보자[2]

21.11.20112 Min Read — In JavaScript

오늘은 socket.io 를 사용해서 서버와 통신(connection, disconnection)이 어떻게 가능한지 확인해볼까 한다. 먼저 서버와의 통신을 확인하기 위해서 다음과 같이 server.js 와 index.html 소스를 수정한다. Server, Client 소스에 socket…

NNode.js 이용해서 chat을 만들어보자[1]

14.11.20112 Min Read — In JavaScript

그동안 Node.js 에 대해서 맨날 보기만 하다가 H3 채팅을 보고 직접 만들어 보고 싶다는 생각이 들었다. 그래서 간단한 채팅을 만들어 볼려고 한다. 오늘은 기본적인 web server 구동을 시작해보겠다. 아래 소스는 github Repositorie 에 올리면서 진행하려고 한다. nodester 에서 호스팅을 받아서 nodester…

JJavaScript this란 무엇인가?

24.10.20113 Min Read — In JavaScript

JavaScript 를 개발할때 사용하거나 공부를 할때 해깔리고 어려운 부분중에 하나인 this 에 대해서 내가 아는 부분을 정리해 볼까 한다. 나 또한 this 에 대해서 많은 부분 해깔려 하던중 FRENDS 의 AJ( @andrwj )의 강의를 듣고 확실한 개념을 잡을 수 있었다. AJ( @andrwj )가 말하는 this…

JJavaScript Global 객체

07.10.20111 Min Read — In JavaScript

Global Object JavaScript 에는 Global Object 가 있다. 쉽게 말하면 JavaScript 에서 기본적으로 제공되는 전역객체 이다. 어떤것들이 있는지 알아보자. Array Boolean Date Function Number Object RegExp String JavaScript Core…

JJavaScript Console 사용하기

07.10.20114 Min Read — In JavaScript

Chrome, Firefox 에서 JavaScript 개발을 하더라도 console 창에서 log(), dir() 만 사용했었다. 위 동영상을 보고 console 에서 또 다른 기능 들에 대해서 알게되어 활용 할 수 있다면 JavaScript…