본문 바로가기

개발/Javascript & jQuery

(37)
숫자 천 단위 마다 콤마 찍어주세요 (1,000) 소수점 숫자도 나와야해요. RegExr, toLocaleString (정규 표현식_Lookahead/Lookbehind_사파리 lookbehind 오류에 대해서..) 기존 작업자가 작업해 둔 코드가 있었고, 요구 조건에 따라 이슈가 전달되어왔다. 기존 코드 function addComma(value) { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } 요구 조건은 아래와 같았고.. 1. 숫자 천 단위마다 콤마 추가 2. 소수점에서는 콤마 추가하지 않아야 함 기존 코드에서는 소수점에서도 콤마가 추가되고 있었다. function addComma(value) { return value.toString().replace(/\B(? 잘되는 듯 했지만, 크로스브라우징 이슈가 있었다. safari에서 흰페이지로 뜨는 것이었다. 두둥.. 그리고 SyntaxError: Invalid regular expression..
(lodash) 값 타입에 따라 isUndefined, isEmpty 뭐를 써야할까? isUndefined와 isEmpty 비교 console.log('빈 배열', `isUndefined: ${isUndefined([])} / isEmpty: ${isEmpty([])}`); console.log('빈 오브젝트', `isUndefined: ${isUndefined({})} / isEmpty: ${isEmpty({})}`); console.log('빈 문자열', `isUndefined: ${isUndefined('')} / isEmpty: ${isEmpty('')}`); console.log('null', `isUndefined: ${isUndefined(null)} / isEmpty: ${isEmpty(null)}`); console.log('undefined', `isUndefined: ..
CORS 에러를 해결하자, 어떻게? JSONP로! 서론 프로젝트에서 openAPI를 호출해서 사용하는 부분이 있었는데, 아니나 다를까 교차 출처 리소스 공유(CORS, Cross-origin resource sharing) 에러가 발생하였습니다. (당연한거슬..) 자 그래서 이 문제를 천천히 해결해보았는데요.. 일단 CORS 에러가 발생하는 이유는 브라우저는 서로 다른 도메인에 대한 요청을 보안상 제한하기 때문입니다. 즉, 내 사이트 (http://okayoon.com)에서 openAPI (https://api.ipify.org)로 요청을 하게 되는 경우 다른 도메인이기 때문에 CORS 에러가 발생합니다. 그 다음 왜???? 제한하는지 간단히 이해하고 넘어가겠습니다. JSON은 단순 데이터만이 아닌 Javascript 자체도 전달할 수 있는데, 이럴 경..
마우스로 창을 움직여보자! 폴더창이나 인터넷 창 등..... 보통 상단부 부분을 마우스로 꾹!누르고 움직이면 창을 이동시킬수 있잖아요? 이렇게요 ↓↓↓ 오늘은 이 기능을 만들어 보도록 하겠습니다.! ^^ 먼저 움직일 객체를 만들기위한 작업을 합니다. HTML 이곳을 드래그 하세요. 대충 모양을 꾸며줄게요. CSS .wrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); overflow: hidden; } .header{ padding: ..
Javascript의 reduce 메서드를 알아보자. 몇일 전에 크레인인형뽑기 문제를 풀고 난 후에 다른 사람의 코드에서 reduce 메서드를 사용하는 것을 확인했고 궁금해져서 메서드에 대해 공부해봤습니다. reduce reduce 구문 arr.reduce(callback(acc, cur, curIndex, arr), initVal]); reduce 인자 누적 값(acc) 현재 값(cur) 현재 인덱스 (curIndex) 원본 배열(arr) 그리고 initialValue라는 callback의 최초 acc에 제공하는 누적 값의 초기 값. 만약 초기 값이 없다면 자동으로 누적 값은 원본배열(arr)의 0번째 인덱스 값으로 지정됩니다. 간단한 예제를 보겠습니다. // 초기 값이 없을때 [1,2,3,4,5].reduce((acc, cur, curIndex, arr..
require와 import require const React = require('react'); const Example; = () => {}; module.export = Example; import import React from'react'; const Example; = () => {}; export default Example; require는 노드 문법이고 import는 ES6문법이다. 두개를 섞어쓰면 당연히 에러가난다.
JSDoc를 사용해서 Javasript 문서화해보자! 들어가기전에... 신규프로젝트가 있어서 산출물 작업때 JSDoc을 사용하려고 생각했는데, 프로젝트에서 JSDoc을 사용하지 않게되어 ㅎㅎ 개인적으로 정리하여 작성합니다. 그냥 이런저런 주석이 있구나 생각을 정리하는 유익한 시간이었습니다. *프로젝트에서 사용할만하거나 많이 사용되는 주석 위주로 작성하였으며 출처는 jsdoc문서입니다. 전체 주석에 대하여 궁금하면 https://jsdoc.app/ jsdoc 문서를 참고해주세요. JSDoc란 Javasript 소스코드 파일에 주석을 달기위해 사용되는 마크업언어입니다. JSDoc에 포함하는 주석을 사용하여 코드를 작성하고 인터페이스를 설명하는 문서를 생성할 수 있습니다. JSDoc 설치 / 사용법 0. 프로젝트 설정 JSDoc을 설정하려는 프로젝트 폴더에서 진..
Express, Socket.io를 사용하여 채팅구현하기 - (4) 채팅 구현 채팅 기능 구현 기본 동작은 이해했으니 진도를 쭉 나가겠습니다. 구현해야하는 기본 기능을 먼저 확인해보겠습니다. > 추가할 기능 TODO - 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. - 메세지를 전송하고 받아야한다. - 스타일을 입힌다. > 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. 입장할 때 작성했던 connection이 기억나는가요? 퇴장할 때 이벤트도 같은 곳에 추가합니다. 사용자가 입장 시(소켓연결) 발생하는 이벤트 호출에 대한 바인딩 작업은 app.js의 connect 콜백함수 내부에서 작성되었습니다. // app.js io.sockets.on('connection', function(socket){ socket.on('newUser..