본문 바로가기
[js] 이미지 특정 위치 클릭시 이벤트 처리 (ft. 특정 좌표 area, map) 이미지에서 특정 좌표 클릭시 이벤트 구현입니다. 태그는 이미지맵을 만드는 태그입니다. jpg, png, svg 와 같은 이미지에 링크를 걸어주어 화면 이동을 가능하게 합니다. 많이 사용할 일은 없지만 복잡한 지도같은 이미지에 주요 사용됩니다. 과 태그를 이용하여 특정 좌표에 영역을 지정하고 클릭 이벤트를 걸 수 있습니다. image map 태그 예제 image 태그의 usemap 의 이름과 map 태그의 name을 동일 map은 area 요소를 포함 area에서 shape(영역 모양)을 정의(rect(사각형), circle(원형), poly(다각형), default(기본값으로 전체 영역)의 속성 값) coords 좌표 위치 지정(x1, y1, x2, y 2가 속성 값으로 사각형의 왼쪽 위 모서리와 오른쪽..
[js] 자바스크립트 import , export 개념 import, exprot의 가져오기, 내보내기 개념입니다. 자바스크립트의 import, export라는 키워드를 통해서 가져오기, 내보내기를 실행합니다. import 사용 예제 1 npm install로 node module 설치 후 node_modules 폴더 안의 lodash 패키지를 _라는 이름으로 가지고 와서 main.js에서 활용을 하겠다는 선언입니다. main.js import _ from 'lodash' //node_modules 폴더에서 가져오기 import 사용 예제 2 - 상대 경로로 import 상대 경로를 통해서 외부에서 특정한 자바스크립트 파일(getToday.js)의 getToday 함수를 가져옵니다. main.js import getToday from './getToday' ..
[js] object의 key name을 함수 parameter로 받아 바꾸는 방법 함수 argument로 부터 값을 받아 객체 key 이름을 지정하는 방법입니다. 적용 전 예시 fnName = (type) => { return { type: { fill: 'gray' } } } 적용 후 사용 후 key를 대가로로 묶어주시면 됩니다. fnName = (type) => { return { [type]: { fill: 'gray' } } }
[js] default parameter 디폴트 매개변수 (ft. es6) 자바스크립트 es6 default parameter 입니다. 매개변수 = 'x'로 default 값을 지정합니다. 매개변수가 없을 경우, undefined 일 경우 default 값을 사용합니다. function multiply(a, b = 1) { //디폴트 매개변수 사용 return a * b; } //위와 아래가 동일합니다. function multiply(a, b) { //디폴트 매개변수 사용안했을때 b = b || 1 return a * b; } default parameter 사용 예시 const multyply = (a, b=1) => a * b; multyply(5) //5 multyply(2,3) //6
[js] 배열인지 아닌지 확인하기 (ft. Array.isArray() ) 변수가 배열인지 아닌지를 확인하는 방법입니다. Array.isArray() 메서드는 가로 안의 인자가 array 인지를 판별합니다. array이면 true를 반환하고, 아니면 false를 반환합니다. Array.isArray() 예제 Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false Array.isArray('foobar'); // false Array.isArray(undefined); // false 실무에서 실제 사용했던 코드 입니다. result에 데이터가 들어왔을 때만 실행하는 코드를 만들었습니다. result라는 변수가 초기값이 null이고 데이터가 채워지면 객체의 형태인데, 무슨 이유인지 어쩔때는 초기값이 null이 ..
[js] 비밀번호 영문 숫자 조합 8자리 이상, 영문 숫자 특수기호 조합 8자리 이상 체크 (ft. 정규식) 비밀번호 유효성 검사에 사용되는 정규식입니다. 비밀번호 영문 숫자 조합 8자리 이상 (정규식) let regPass = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,25}$/; if (!regPass.test(password)) alert("영문, 숫자 조합으로 8-20자리 입력해주세요.") 영문 숫자 특수기호 조합 8자리 이상 (정규식) let regPass = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/; if (!regPass.test(password)) alert("영문, 숫자, 특수기호 조합으로 8-20자리 이상 입력해주세요.") 영문, 숫자 포함 6자리 이상 let regPass1 = /^(?=.*[a-zA-Z])(?=.*[0-..
[js] 룰렛 라이브러리 (ft. 돌림판, roulette) 룰렛 라이브러러리 winwheel.js를 소개합니다. 게임 프로젝트에서 사용할 자바스크립트 룰렛 라이브러리를 찾다가 다양한 기능과 뷰를 적용할 수 있는 룰렛 라이브러리, winwheel.js를 소개합니다. http://dougtesting.net/home Home Welcome to the home of Winwheel.js! Winwheel.js is a feature packed JavaScript library that allows you to easily create spinning Prize Wheels on HTML5 canvas using highly configurable JavaScript classes. dougtesting.net
[js] 자바스크립트로 하이픈 제거하기 (ft. 생년월일, 전화번호) 생년월일 또는 전화번호, 날짜에 들어가는 하이픈을 자바스크립트로 제거하는 방법입니다. 자바스크립트로 하이픈 제거 str.replace(/-/g, "") 예제 const birth="1991-12-22" const newBirth = birth.replace(/-/g, "") //결과: 19911222
[js] 공튀기기 자바스크립트 구현 (ft. react) 캔버스를 이용하여 자바스크립트 또는 리액트로 공튀기기를 구현합니다. 구현 영상 react 코드 (자바스크립트 코드 삽입) import React, { useEffect } from 'react'; const Balls = () => { const onStart = () =>{ // 스크립트 로딩이 완료된 후부터 내용을 시작 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; class Ball{ constructor(x,y){ // ball의 기본 속성들을 정의 this.x = ..
[js] 자바스크립트 버튼 클릭 후 disabled 처리 (ft. react, css) 자바스크립트, 리액트를 이용해 button 클릭 후 disabled 처리 방법입니다. 자바스크립트 버튼 클릭 후 disabled 처리 html 버튼 javascript let btn = document.querySelector('.btn') btn.addEventListener('click', () => { btn.disabled = true btn.style.background = '#666' btn.style.color = '#fff' }) 화면보기 (result 클릭) react에서 버튼 클릭 후 disabled 처리 import React from 'react' const button = () => { const onDisabled = (e) => { //클릭시 버튼 disabled 처리 e.pr..
[js] TypeError: Cannot read property 'x' of undefined (ft. javascript, react) TypeError: Cannot read property 'x' of undefined 오류 해결입니다. 자바스크립트 또는 리액트에서 정말 자주 보게되는 오류 입니다. 어느 사이트에 의하면, Cannot read property 'x' of undefined, Cannot read property 'x' of null 이 자바스크립트의 오류 1위의 오류 문구 였습니다. 오류 메시지 Cannot read property 'x' of undefined api 비동기 처리로 데이터를 출력하면서 렌더링을 하는데 문제는 컴포넌트가 데이터가 나오기 전에 렌더링 되거나, value 자체가 없는 문제입니다. 오류 해결 문제가 되는 부분에 ?. 연산자를 이용하여 코드를 수정하면, 에러가 사라집니다. {!resultDat..
[js] alert, console.log 출력시 [object Object] 오류 해결 방법 alert 출력시 [object Object] 오류 해결 방법입니다. alert, console.log 출력시 [object Object] 오류 자바스크립트에서 json 형태의 data를 alert(data) 또는 console.log(data)로 출력시 [object Object] 라고 나오게 됩니다. alert, console.log 출력시 [object Object] 해결 방법 오류는 아니지는 이를 우리가 읽을 수 있는 형태로 출력하려면 json 형태에서 json.stringify() 메소드를 이용하여 객체를 json화 시켜야 합니다. alert(JSON.stringify(data)); console.log(JSON.stringify(data)); json.stringify() 자바스크립트 파일 내..
[js] 자바스크립트로 시간차 지연 출력 (ft. for문, setTimeout, react) 자바스크립트에서 시간차, 지연을 위한 구현 방법입니다. 자바스크립트를 이용하여 시간차를 두고 출력하는 방법은 setTimeout와 async를 이용한 방법이 있습니다. 여기서 데이터의 양이 많을 경우, for문과 map을 이용해 setTimeout 을 사용하는 방법이 좋습니다. for문, setTimeout 예제 1초 마다 0부터 4까지 시간차로 출력됩니다. const data = [1, 2, 3, 4, 5] for (let i = 0; i { console.log(i) }, i * 1000) } //결과 //0 //1 //2 //3 //4 map, for문, setTimeout 예제 데이터의 양이 많을 경우 map과 함께 이용하여 데..
[ts] Could not find a declaration file for module 'react' react에서 typescript를 설치하고 app.tsx 에서 router를 설치하는데 이런 오류가 나왔습니다. 오류 메시지 Could not find a declaration file for module 'react'. '/Users/inkijo/Documents/react-test/my-books/node_modules/react/index.js' implicitly has an 'any' type. If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react..
[js] 만 나이 계산하기 자바스크립트로 만나이를 계산합니다. 만 나이 계산하는 함수 (파라미터로 생년월일 넘겨줄때) export const gettingOriginalAge = (birth) => { //birth가 1990-03-05, string 형식 const today = new Date(); //현재 날짜 let age = today.getFullYear() - Number(birth.slice(0, 4)); let mon = (today.getMonth()+1) - Number(birth.slice(5, 7));//getMonth()는 0-11로 출력되므로 +1 if (mon < 0 || (mon === 0 && today.getDate() < Number(birth.slice(8, 10)))) { return age..
[js] day.js 사용법 (ft. 날짜, 시간 라이브러리, moment.js) 자바스크립트를 통해 날짜와 시간을 출력하는 라이브러리, day.js 입니다. 자바스크립트로 날짜와 시간을 출력할 경우, 직접 코드를 작성할 경우도 있지만, 라이브러리를 통해 직접 함수를 만드는 번거로움을 피할 수 있습니다. 과거에는 Moment.js을 많이 사용하였지만, 용량이 너무 많이 차지하여, 최근에는 Moment.js의 경량 버전인 day.js를 많이 사용하고 있습니다. day.js moment.js의 API 형식은 그대로 유지하면서 용량은 33배 가볍습니다. 사용법이 moment.js와 거의 같다고 보면 되기에 편하게 day.js로 갈아탈 수 있습니다. day.js 사이트 https://www.npmjs.com/package/dayjs dayjs 2KB immutable date time lib..
[js] 스크롤 이동, 스크롤 현재 위치 (ft. scrollTop, scrollIntoView) web 스크롤 API, window.scrollTo() 입니다. 모바일 웹뷰에서 페이지를 이동하거나, 컴포넌트를 교체할때마다 이전 페이지나 컴포넌트의 스크롤 위치가 유지될때 스크롤을 강제로 상위로 이동시킬때 사용합니다. clientHeight, scrollHeight, offsetHeight 차이 clientHeight: 요소의 내부 높이, 패딩 값은 포함, 스크롤바, 테두리, 마진은 제외 scrollHeight: 요소에 들어있는 컨텐츠의 전체 높이(스크롤 끝까지 내렸을때), 패딩과 테두리가 포함, 마진은 제외 offsetHeight: 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함, 마진은 제외 scrollHeight > offsetHeight > clientHeight 스크롤 최상..
[js] set 객체 사용법 (ft. new Set 중복값 제거) Set 객체 es6 최신 문법의 중복을 제거한 값들의 집합입니다. 특정 요소 추가: add 특정 요소가 있는지 확인: has (boolean 값으로 반환) 특정 요소 제거: delete 모든 요소 제거: clear 요소의 개수 반환: size (배열의 length) set 객체 선언 let mySet = new Set(); set 객체 사용법 (MDN 문서 참조) let mySet = new Set(); mySet.add(1); // Set { 1 } mySet.add(3); // Set { 1, 3 } mySet.add(3); // Set { 1, 3 } mySet.add('text'); // Set { 1, 5, 'text' } let i = {a: 1, b: 2}; mySet.add(i); //결과..
[js] null 병합 연산자 '??' (ft. 기본값 매개변수, or 연산자 '||') es6 최신 문법, null 병합 연산자에 대해 알아봅니다. null 병합 연산자 '??' (nullish coalescing operator) es6에서 새로 나온 문법 null 병합 연산자를 이용하여 매우 짧은 문법으로 코드를 심플하게 작성할 수 있습니다. 사용 방법 a ?? b //a가 null 또는 undefined 일때 b 해석: 변수 a의 값이 null도 아니고, undefined가 아니면 a, 그 외에는 b 왼쪽 코드(a)가 null 또는 undefined일 경우, 오른쪽 코드(b)가 실행 a ? "a" : "b"와 같은 형식의 삼항 연산자와 비슷한 문법 x = a ?? b와 동일한 코드를 삼항 연산자로 나타내면, x = (a !== null && a !== undefined) ? a : b..
[ts] Property 'x' does not exist on type '{}'.ts react에서 typescript 로 프로젝트를 진행할 때 이 오류를 많이 보게됩니다. 분명히 변수가 obejct 이고, 변수.속성 또는 변수[속성]을 { } 안에서 사용하는 것이 가능한데 타입스크립트의 오류가 납니다. 오류 메시지 Property 'doctorName' does not exist on type '{}'.ts 또는 Property 'doctorName' does not exist on type object.ts 오류 해결 1. any {}로 가상 변수 설정 후 얕은 복사 Object.assign({}, 기존 변수)얕은 복사를 하기 전에 let 변수 : any = {};로 변수 설정을 하여서 얕은 복사를 하여 출력하니, 에러가 제거됩니다. let ojtCopy: any = {}; ojtCo..
[js] 현재 날짜, 시간 가져오기(ft. 월, 일, 요일, 시간) 자바스크립트를 이용한 날짜 출력 방법입니다. 현재 날짜, 시간 구하기 let now = new Date(); // 현재 날짜 및 시간 연도 구하기 let year = now.getFullYear(); 월 구하기 let todayMonth = now.getMonth() + 1; 일 구하기 let todayDate = now.getDate(); 요일 구하기 getDay()는 숫자로 출력됩니다. 화요일의 경우, 2로 나오기 때문에, 숫자를 이용하여, 요일을 출력해야 합니다. const week = ['일', '월', '화', '수', '목', '금', '토']; let dayOfWeek = week[now.getDay()]; 시간 구하기 let hours = now.getHours(); 분 구하기 let mi..
[js] Redux 리덕스의 기본 원리(ft. 바닐라 자바스크립트 예제) Redux의 기본 원리와 순수 자바스크립트를 이용한 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. Redux 기본 컨셉 바닐라 자바스크립트(순수 자바스크립트) 리덕스 기본 예제 redux-vanila 폴더 생성 & 리덕스 설치 npm init -y //package.json 기본 설정 npm install redux //리덕스 설치 store.js 파일 생성 const redux = require('redux'); console.log(redux); //redux 잘 불러왔는지 확인 터미널에서 node store.js 입력하면 아래와 같이 터미널에 함수(function)들이 들어있는 object가 반환됩니다. action action 코드 작성(type을 가진..
[js] local storage 사용 방법 (ft. JSON 데이터, stringify, parse) JSON 데이터와 브라우저 저장소, local storage 사용방법 입니다. JSON 제이슨, JavaScript Object Notation 자바스크립트의 객체 표기법 문자 데이터 JSON 데이터 사용 방법 json 확장자를 가진 파일은 문자(string) 데이터입니다. json의 문자 데이터를 가지고 오면, 자동으로 변환돼서 실제 객체 데이터처럼 출력이 됩니다. user.json user = { 'name': 'goddino', 'city': 'seoul', 'job': 'developer', 'hobby': 'blogging' } main.js import user from './user.json' console.log(user); //결과 {name: "goddino", city: "seoul"..
[js] lodash 사용법, 자주 쓰는 메소드 자바스크립트 라이브러리, lodash 사용법입니다. lodash란 Lodash는 자바스크립트 라이브러리로서, 객체, 배열 등의 데이터의 구조를 쉽게 변환하여 사용하게끔 도와줍니다. 실무에서 데이터를 handling 할때 복잡한 자바스크립트 코드를 lodash를 사용함으로 인하여 보다 빠른 작업과 간결한 코드를 사용할 수 있게 됩니다. _ 라는 기호를 사용하여 명칭이 lodash 입니다. 배열에서 중복값을 제거할때, uniqBy, unionBy 메소드를 사용합니다. 배열에서 원하는 객체 데이터를 추출할 때, find 메소드를 사용하고, 제거할 때는 remove 메소드를 사용합니다. 깊은 복사를 사용할 경우, cloneDeep 메소드를 이용합니다. lodash 설치 lodash 홈페이지 installatio..
[js] 자바스크립트로 선택영역 프린트하기(ft. window.print) 자바스크립트로 dom을 제어하여 선택한 부분을 프린트 합니다. 구현 내용 버튼 클릭시 프린트 기능 연결 선택 영역을 설정하여 그 부분만 프린트하도록 설정 선택 영역 프린트 하기 window.print() 메소드는 보이는 화면을 그대로 프린트 하게 합니다. 여기서 선택 영역(printSection)만 태그 요소를 새로 생성하며 그 안에 넣어주고, 이 부분만 window.print() 를 설정합니다. 화면은 display none 과 block 을 이용하며 출력합니다. const onPrintFn = () => { const html = document.querySelector('html'); const printSection = document.querySelector('.main-contents').in..
[js] spread 연산자 (ft. 전개 연산자, 불변성, 얕은 복사) 자바스크립트 es6, 스프레드 연산자 입니다. spread 연산자 불변성 얕은 복사 spread 연산자 하나의 배열 데이터를 spread 연산자를 이용해 출력하면, 문자 데이터 형태로 출력됩니다. spread 연산자 예제 const fruits = ['apple', 'banana', 'orange']; console.log(...fruits); //결과 apple banana orange ------------------------------ console.log('apple', 'banana', 'orange'); 와 같은 결과 즉, 쉼표로 구분되면서 각각의 아이템으로 전개되어 들어가집니다. spead 연산자를 이용한 객체 데이터 생성 예제 1 일일이 배열 데이터 안의 요소를 나열할 필요 없이 spre..
[js] 객체를 배열로 바꾸는 법, 배열을 객체로 바꾸는 법 자바스크립트 데이터에서 객체를 배열로, 배열을 객체로 바꾸는 방법입니다. 실무에서는 화면에서 게시판, 테이블과 같은 형태의 출력을 위해, 또는 서버 전송을 위해 자주 객체를 배열로 변환하게 됩니다. 객체를 배열로 변환하는 방법을 알아보겠습니다. 객체를 배열로 바꾸는 법 Object.entries() 객체를 배열로 바꾸는 예제 let fruit = { color: "yellow", name: "banana", taste: 'good', location: 3 } console.log(Object.entries(fruit)) //결과 - 2차원 배열이 리턴됨 (4)[Array(2), Array(2), Array(2), Array(2)] 0: (2)["color", "yellow"] 1: (2)["name", ..
[js] return 값에 두개 이상의 명령문 코드를 넣어야 할 때 방법 함수에서 return 키워드를 사용하는 것은 return 키워드 뒤에 있는 내용이 함수 밖으로 반환된다 라는 것을 의미하지만, return 키워드가 사용된 부분에서 함수가 종료된다는 것도 의미합니다. 즉, return 키워드 때문에 함수가 종료되면 그 이후에 있는 코드는 실행되지 않습니다. 실무에서 긴 코드를 작성할때, return 값 자리에 여러가지 내용의 코드를 입력해야할 경우가 많습니다. 예시 const add = (a, b) => { return a + b; //이부분까지 실행 console.log('더하기'); //여기부터 실행안됨 } console.log(add(1, 3)); //결과: 4 return 값에 두개 이상의 명령문 코드를 넣어야 할 때 방법 if문 분기처리 const 함수 이름 =..
반응형

티스토리툴바