본문 바로가기
[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 함수 이름 =..
[js] 데이터 타입 확인 (ft. typeof 말고 함수) 자바스크립트에서 데이터 타입을 확인하는 방법입니다. typeof 보통 console.log(typeof 데이터)를 이용하여 콘솔에서 데이터 타입을 확인합니다. 이럴 경우, 문제가 발생합니다. null, 객체, 배열을 모두 object 객체로만 출력하는 것을 알 수 있습니다. 즉, 실무에서 객체와 배열의 타입을 확인해야만 할 경우, typeof로는 확인이 어렵습니다 콘솔창(결과창) 객체와 배열 중 데이터 타입이 무엇인지 구분이 필요할 경우 아래의 함수를 사용하면 특정한 타입을 알아낼 수 있습니다. 특히, object와 array를 구별하기 때문에 실무에서 자주 사용할 수 있습니다. function jsType(data) { return Object.prototype.toString.call(data).sl..
[js] css, js 이용하여 도넛차트 만들기 (ft. 원형차트, conic-gradient) css와 자바스크립트로 도넛 차트를 구현합니다. 구현 내용 - 도넛 차트(도넛처럼 같은데가 파진 원형 차트)를 구현 - 라이브러리가 아닌, 자바스크립트와 css로 적용 - css: conic-gradient() - js: setInterval, clearInterval - js를 이용하여 해당 비율만큼 애니메이션 효과 구현 화면 구현 화면 영상 자바스크립트 도넛차트 구현 라이브러리 없이 css와 js로 도넛 차트 애니메이션 구현 html 80% 50% 30% reset버튼 css .wrap { position: relative; padding: 5%; } .container { display: flex; gap: 15px; margin-bottom: 20px; } .chart { //큰 원 positio..
[js] 페이지 상단으로 자동 스크롤 이동 구현 (ft. gsap scrollTo) 우측 하단의 버튼 클릭시 화면의 상단으로 이동하는 애니메이션 효과를 구현합니다. 구현 내용 - material-icon, css 이용하여 버튼 만들기 - 버튼 클릭 시 화면이 페이지의 최상단으로 애니메이션 효과를 내면서 이동 - 페이지 최상단으로 이동하면서 버튼이 우측으로 사라짐 - 스크롤 내리면 일정 부분부터 버튼이 우측에서 나옴 구현 화면 스크롤 버튼 작동화면은 맨 아래에서 확인해주세요. 스크롤 탑 버튼 구현 material-icon, gsap cdn 설치 구글에서 material icon cdn을 검색 후 페이지로 이동하여 cdn 코드 복사 후 태그 사이에 삽입해주세요. 구글에서 gsap cdn을 검색하여 페이지 이동 후 gsap.min.js와 ScrollToPlugin.min.js 코드를 복사 후..
[js] 떠다니는 이미지 애니메이션 구현(ft. 부유하는 요소, gsap.to) 화면상에서 둥둥 떠다니는 요소를 애니메이션 라이브러리, gsap으로 구현합니다. 구현 화면 세 개의 동그라미 요소가 위아래 반복적으로 움직입니다. (애니메이션 구현 화면은 맨 아래에서 확인) 떠다니는 이미지 애니메이션 구현 방법 gsap cdn 설치 easing 함수 사용하여 gsap.to() 속성 적용 gsap cdn 설치 구글에서 gsap cdn을 검색하여 해당 페이지로 이동하여 cdn 코드를 복사한 후 태그 사이에 삽입합니다. html css .wrap { position: relative; width: 600px; height: 500px; background-color: skyblue; overflow: hidden; margin: 0 auto; } .floating { position: abs..
[js] 자바스크립트스와이퍼 슬라이드 라이브러리, swiper.js 사용법 swiper.js 를 이용하여 사이트에 슬라이드를 적용합니다. 보통 사이트 메인 페이지의 네비게이션 아래 컨텐츠 부분에는 비주얼 슬라이드가 위치합니다. 홈페이지에 처음 들어갔을 때 가장 먼저 눈에 띄는 곳으로 사이트의 첫인상을 좌우하는 가장 중요한 부분입니다. 이 슬라이드는 스와이퍼라는 자바스크립트 라이브러리 사용을 추천합니다. 스와이프 이동, 버튼 이동, 화살표 이동, 자동 플레이, 루프, 반응형의 기능을 캐러셀 슬라이드에 적용이 모두 가능한 라이브러리입니다. swiper.js 사이트 구글에서 swiper js를 검색하여 사이트로 이동합니다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most mode..
[js] 자바스크립트 애니메이션 라이브러리, gsap 사용법 JS 애니메이션 스크립트 라이브러리, gsap의 사용법입니다. 일반적으로 웹에서 애니메이션 효과는 css 또는 제이쿼리를 사용하여 구현합니다. 하지만 최근에는 제이쿼리 보다는 순수 자바스크립트 코드를 사용하는 추세이고, css에서 제공하는 것, 그 이상의 복잡한 애니메이션을 구현해야할 경우가 있습니다. 예를 들어, css의 dispaly 요소에 none과 block을 이용한 효과를 주었을 때, 영역이 나타나고, 사라지는 부분이 부자연스러울 경우, 이를 해결하기 위해 보다 자연스럽게 요소를 제어해주는 자바스크립트 애니메이션 라이브러리를 사용합니다. 라이브러리를 사용하면, 자바스크립트를 통해 html 요소에 간단한 애니메이션을 추가할 수 있습니다. GSAP GSAP는 GreenSock에서 만든 자바스크립트 ..
[js] 글자 타이핑 효과 라이브러리 소개 타이핑 효과를 주는 라이브러리를 소개합니다. 실무에서 텍스트에 타이핑하는 디자인 효과를 주고 싶을 때가 있습니다. 보통 css로 효과를 주기 하는데 부자연스러운 편입니다. css 대신 라이브러리를 이용하면 보다 간편한 소스로 자연스러운 타이핑 효과를 나타낼 수 있습니다. 타이핑 효과 사이트 https://libraries.io/npm/typewriter-effect typewriter-effect on NPM [![CircleCI](https://circleci.com/gh/tameemsafi/typewriterjs.svg?style=svg)](https://circleci.com/gh/tameemsafi/typewriterjs) libraries.io 설치 방법 cdn NPM npm install ty..
[js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치) 리액트 클래스로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. class 방식 사용 방법 · state: 변하는 데이터는 state(변경 전 데이터)로 넣습니다.. · input의 입력될 value는 반드시 onChange 이벤트로 바꿔줍니다. · this.setState 사용방법: this.setState ({ 변경 후의 데이터 }) · html에서 class 속성 대신 className을 사용합니다. · html에서 label 태그의 for 속성 대신 htmlFor을 사용합니다. · setState는 비동기입니다. 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다. 리액트 구구단 게임 구현 html..
[js] 카드 공격 게임 완성 (ft. 자바스크립트로 자스스톤 게임 구현 ver.4) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.4)입니다. - 게임 공격 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현내용 · 상대방의 영웅 또는 쫄병을 한번씩 공격하기 · 내 턴일때 카드 클릭 불가능 -> 클릭 가능하도록 변경 · 공격하여 상대방 카드 공격하여 제거하기 완성 코드 html 초록: 체력, 주황: 공격력, 적 영웅의 체력이 0이되면 영웅을 보호하기 위해 쫄병들을 코스트(우드색)내에서 뽑는다. 코스트:10/10 턴 교체 현재 턴: 나의 턴 코스트:10/10 css #my, #rival { display: inline-block; vertical-align: top; margin-right: 50px; } #my { margin-bott..
[js] 카드세팅 리팩토링 딕셔너리 구조 (ft. 자바스크립트로 자스스톤 게임 구현 ver.3) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.3)입니다. - 카드세팅 리팩토링 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 리팩토링 중복되는 코드는 함수를 만들어 제거합니다. 딕셔너리 구조로 객체화 리팩토링 딕셔너리 구조를 위해서 변수를 상대 쪽 데이터/ 내쪽 데이터로 나눈 후, 객체화합니다. before const 상대영웅 = document.getElementById('rival-hero'); const 상대덱 = document.getElementById('rival-deck'); const 상대필드 = document.getElementById('rival-cards'); const 상대코스트 = document.getElementById('riv..
[js] 생성자, 카드세팅 (ft. 자바스크립트로 자스스톤 게임 구현 ver.2) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.2)입니다. - 카드 세팅, 팩토리, 생성자 패턴 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 클릭한 일반(쫄병) 카드 덱에서 필드로 그대로 옮기기 indexOf(), splice(), 카드돔연결 함수 2 카드를 뽑을 때마다 카드 추가로 생성하기 일반카드 총 5개 유지 3 일반 카드를 뽑을 때마다 코스트 점수(시작:10)에서 차감 Number() 4 턴 넘기기(버튼 클릭 이벤트)와 턴 표시 5 턴 넘길 때마다 코스트 점수 10으로 충전 6 자기 턴에서 상대편 카드 클릭 방지 카드돔연결 함수 이용 7 필드에 올라간 이미 선택한 카드 클릭 방지 구현 화면 script 코드 const 상대영웅 = do..
[js] 팩토리, 생성자 패턴, 카드세팅 (ft. 자바스크립트 자스스톤 게임 구현 ver.1) 자바스크립트를 이용하여 자스스톤 게임을 구현하는 예제(ver.1)입니다. - 카드 세팅, 팩토리, 생성자 패턴, cloneNode() - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 위쪽: 상대편, 아래쪽: 내편 2 상대편과 내편 각각 덱에 일반 카드 5개와 영웅 카드 1개씩 세팅 팩토리 패턴, 생성자 3 카드 속성: 공격력(att)과 체력(hp), 코스트(cost) 4 영웅카드: 공격력 낮고, 체력만 높고, 코스트는 없음 5 중복되는 부분 팩토리 패턴 함수로 처리 리팩토링 구현 화면 html 코드 코스트:10/10 턴 교체 현재 턴: 나의 턴 코스트:10/10 css 코드 #my, #rival { display: inline-block; vertical-al..
[js] 생성자 패턴/인스턴스(ft. this, 팩토리 패턴과의 비교) 생성자 패턴을 팩토리 패턴과 비교하여 알아보겠습니다. 생성자/인스턴스 객체지향 프로그래밍입니다. 객체를 생성하는 함수를 생성자(constructor) 함수라고 부릅니다. 함수 이름 첫 글자를 대문자로 표기하는 것이 규칙입니다. this, new를 사용합니다. new를 이용하여 함수처럼 호출합니다. 생성자 함수가 다른 언어의 class의 역할을 대신합니다. 팩토리 패턴 팩토리 패턴과 Object.create()를 이용하여 프로토 타입을 적용한 패턴 예제 let prototype = { type: 'friend', personality: function() { console.log('nice'); } } function friendMaker(name, age, job, sex) { let friend = O..
[js] 팩토리 패턴(ft. 프로토 타입, Object.create(), 코드 중복 방지 방법) 디자인 패턴 중, 팩토리 패턴에 대하여 알아보겠습니다. 객체에서 중복되는 코드를 팩토리 패턴을 사용하여, 코드를 줄이거나 제거할 수 있습니다. BEFORE let friend1 = { name: '박지수', age: 20, job: 'nurse', sex: 'female', type: 'friend', personality: function() { console.log('nice'); } } let friend2 = { name: '박지석', age: 39, job: 'cops', sex: 'male', type: 'friend', personality: function() { console.log('nice'); } } let friend3 = { name: '강주동', age: 16, job: 'pr..
[js] 자주 쓰이는 정규식(regular expression) 모음 (ft. 정규표현식) 자주 쓰이는 정규식 1. 암호 조건1. 6~20 영문 대소문자, 최소 1개의 숫자 혹은 특수 문자를 포함해야 함 /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{6,20}$/ 조건2. 8 ~ 10자 영문, 숫자 조합 var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/; 조건3. 특수문자 / 문자 / 숫자 포함 형태의 8~15자리 이내의 암호 정규식 var regex = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/; 2. 이메일 /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/ 3. 핸드폰 /^010([0|1|6|7|8|9]?)-?([0-9]..
[js] 자바스크립트로 카드 뒤집기 게임 구현하기(카드 세팅 ver.2) 자바스크립트를 이용하여, 카드 뒤집기 게임을 구현하는 예제(ver.2)입니다. - 기능 구현, 초기화 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 내용 1 카드 2개씩만 오픈하도록 설정 2 카드끼리 색깔이 같은지 다른지 체크 3 같을 경우, 카드 계속 오픈 클릭 방지 4 틀릴 경우, 1초 후 카드 닫기 클릭 방지 5 클릭한 카드의 색깔이 같을 경우, 클릭한 카드를 완성 카드에 넣어줌 6 완성 카드가 모두 오픈 되었을 경우, 성공 메시지 출력 타이머 7 초기화 피츠예이츠 셔플 함수로 설정, 백업변수 구현 화면(성공 후) html 코드 script 전체 코드 const x = 4; const y = 3; //카드 뒤 색깔 7개 2개씩 미리 설정 let backColor..
[js] 자바스크립트 forEach() 사용법 자바스크립트 forEach 메서드의 사용법 입니다. forEach문 배열의 반복문 배열에서만 사용하는 메서드 배열의 처음부터 마지막 요소까지 반복하여 실행 인자로 콜백함수를 받아옴 주어진 콜백함수를 배열 요소 각각에 대해 실행 querySelectorAll() 전체 선택자를 이용하여 주로 사용 arr.forEach(callback(item, index, array) //참고로 마지막 인자, array는 forEach()를 호출한 배열로 거의 사용안함 forEach문 예제 const food = ['🍕', '🥨', '🥪', '🍔']; food.forEach(function(ele, index) { console.log(ele, index); }); //결과 🍕 0 🥨 1 🥪 2 🍔 3 food.forEac..
[js] 피셔 예이츠 셔플, 알고리즘 피셔-예이츠 셔플 알고리즘에 대하여 알아보겠습니다. 피셔 예이츠 셔플(Fisher-Yates Shuffle) 알고리즘 값을 랜덤 하게 섞을 때 사용하는 알고리즘입니다. 로날드 피셔(Ronald Fisher)와 프랭크 예이츠(Frank Yates)가 만들어 피셔-예이츠 셔플이라고 합니다. 제로초님의 자바스크립트를 이용한 게임을 구현하면서 이 셔플을 알게 되었고, 랜덤 정렬이 필요할 경우마다 사용되므로 아주 유용한 알고리즘입니다. 저는 자바스크립트를 이용한 게임 야구, 로또 추첨기, 카드 뒤집기 게임에서 사용하였고, 음악 앱에서 음악 랜덤 플레이를 만들때도 사용한다고 합니다. 피셔 예이츠 셔플 예제 숫자 야구 //숫자뽑기 let candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let..
반응형

티스토리툴바