본문 바로가기
[js] Set, Map의 비교, 예제 Set중복되지 않은 값(value) 들을 저장하는 컬렉션요소는 고유해야 하며, 중복된 값은 저장되지 않습니다.값을 빠르게 추가, 삭제, 탐색Map키(key)와 값(value) 쌍으로 이루어진 데이터 구조각 키는 고유해야 하지만, 값은 중복될 수 있습니다.키를 기준으로 값을 빠르게 검색, 추가, 삭제Set과 Map 비교특징SetMap저장 방식 중복되지 않은 값만 저장키-값 쌍으로 저장중복 허용 여부중복된 값 저장 불가키는 중복될 수 없으나 값은 중복 가능값 접근 방법인덱스가 없고, 값을 직접 확인키를 통해 값을 검색순서 보장 여부삽입된 순서 유지삽입된 순서 유지메소드add(), has(), delete()set(), get(), has(), delete()Set 예제1. 중복 제거배열에서 중복된 값을 제거..
[js] 수학 공식을 활용한 코딩테스트 예제 1부터 n까지의 합 (등차수열 합 공식)function sumOfN(n) { return (n * (n + 1)) / 2;}1부터 n까지의 짝수 합function sumOfEven(n) { var half = Math.floor(n / 2); return half * (half + 1);}1부터 n까지의 홀수 합function sumOfOdd(n) { var half = Math.floor((n + 1) / 2); return half * half;}n! (팩토리얼) 팩토리얼(Factorial)은 수학에서 자주 등장하는 개념으로, 주어진 자연수 n에 대해 1부터 n까지의 모든 자연수를 곱한 값을 의미합니다. 팩토리얼은 n!으로 표현됩니다.팩토리얼 예시:0! = 1 (0 팩토리얼..
[js] reduce 함수 사용법 Reduce 메소드reduce는 배열의 각 요소를 순차적으로 처리하며, 누적된 결과(acc)를 반환하는 고차 함수입니다. 1. 배열의 모든 요소 합 구하기const sum = (array) => array.reduce((acc, curr) => acc + curr, 0);console.log(sum([1, 2, 3, 4])); // 출력: 102. 배열의 최대값 찾기const max = (array) => array.reduce((acc, curr) => (acc > curr ? acc : curr), -Infinity);console.log(max([1, 5, 3, 9, 2])); // 출력: 93. 배열의 중복된 요소 제거 (유일한 값만 반환)const unique = (array) => arra..
[코딩테스트] 최빈값, 빈도수 구하기주사위 빈도 계산*프로그래머스 발췌*최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다.문제 풀이1 - Map과 배열 function solution(array) { let map = new Map(); for (let one of array) map.set(one, map.get(one)? map.get(one)+1 : 1); map = [...map].sort((a, b) => b[1]-a[1]); return map.length === 1 || map[0][1] > map[1][1] ? map[0][0] : -1;}문..
[코딩테스트] 주사위 게임 문제 풀이 (빈도 계산) 주사위 게임 문제*프로그래머스 발췌*1부터 6까지 숫자가 적힌 주사위가 네 개 있습니다. 네 주사위를 굴렸을 때 나온 숫자에 따라 다음과 같은 점수를 얻습니다. • 네 주사위에서 나온 숫자가 모두 p로 같다면 1111 × p점을 얻습니다. • 세 주사위에서 나온 숫자가 p로 같고 나머지 다른 주사위에서 나온 숫자가 q(p ≠ q)라면 (10 × p + q)2 점을 얻습니다. • 주사위가 두 개씩 같은 값이 나오고, 나온 숫자를 각각 p, q(p ≠ q)라고 한다면 (p + q) × |p - q|점을 얻습니다. • 어느 두 주사위에서 나온 숫자가 p로 같고 나머지 두 주사위에서 나온 숫자가 각각 p와 다른 q, r(q ≠ r)이라면 q × r점을 얻습니다. • 네 주사위에 적힌 숫자가 모두 다르다면 나온 ..
배열, 문자열의 접두사, 접미사 비교 접두사와 접미사접두사는 문자열이나 배열의 시작부터 특정 길이까지의 부분접미사는 문자열이나 배열의 끝에서부터 특정 길이까지의 부분startsWith 메서드는 문자열이 특정 문자 또는 문자열로 시작하는지 확인endsWith 메서드는 문자열이 특정 문자 또는 문자열로 끝나는지 확인문자열의 접두사와 접미사 (문자열: "abcdef")접두사 (prefix)"a": 첫 번째 문자부터 시작하는 1글자 접두사"ab": 첫 번째 문자부터 시작하는 2글자 접두사"abc": 첫 번째 문자부터 시작하는 3글자 접두사"abcd": 첫 번째 문자부터 시작하는 4글자 접두사"abcde": 첫 번째 문자부터 시작하는 5글자 접두사"abcdef": 문자열 전체가 접두사접미사 (suffix):"f": 마지막 문자부터 시작하는 1글자 접..
[js] Slice, Splice의 비교 💡부분 추출시에는 sliceslice(start, end+1) //배열, 문자열의 start 인덱스부터 end 인덱스까지 추출배열 변경(삭제, 추가)시에는 Splicesplice(start, delete갯수, 추가할 요소)둘다 2번째 없을시 start부터 끝까지 추출/제거splice 두번째 인자 0, 세번째 요쇼 있을 때는 제거 없이 start 다음에 세번째 요소 추가 Slice와 Splice의 비교SliceSplice원본 배열이나 문자열을 변경하지 않음.새로운 배열이나 문자열을 반환.부분을 추출(복사)하는 데 사용.원본 배열을 변경.삭제 및 추가 작업을 수행.요소를 제거하거나 특정 위치에 새로운 요소를 삽입하는 데 사용.  Slice원본 배열이나 문자열을 변경하지 않음. 즉 원본 데이터를 변경하지 않..
[프론트엔드 예상 면접] 호이스팅, 스코프 💡스코프 정리전역 스코프: 전역 범위에서 선언된 변수들은 어디에서나 접근 가능합니다. 함수 스코프: 함수 내부에서 선언된 변수들은 해당 함수 내에서만 접근 가능합니다. 블록 스코프: {}로 감싸진 블록 내부에서 선언된 변수들은 그 블록 내에서만 접근 가능하며, let과 const 키워드로 선언된 변수들이 블록 스코프를 따릅니다. 호이스팅자바스크립트에서 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 현상입니다. 그러나 변수의 경우 선언만 호이스팅되고, **초기화(값의 할당)**는 호이스팅되지 않습니다.console.log(hoistedVar); // undefinedvar hoistedVar = 'This is hoisted!';console.log(hoistedFunc()); // ..
[프론트엔드 예상 면접] 실행 컨텍스트, this 컨텍스트자바스크립트에서 컨텍스트(context)는 특정 코드가 실행될 때의 환경으로 컨텍스트는 코드가 어떻게 해석되고 실행되는지를 결정하는 중요한 개념주로 실행 컨텍스트와 this 컨텍스트라는 2가지 측면에서 다뤄짐 실행 컨텍스트자바스크립트 코드가 실행되는 환경으로 아래 세가지 주요 요소 포함변수 객체: 함수 내에서 선언된 변수, 함수 선언문 등을 저장스코프 체인: 현재 실행 컨텍스트와 부모 컨텍스트의 변수 객체를 참조하는 체인으로 변수 접근을 제어this 바인딩: this가 어떤 객체를 참조할지 결정실행 컨텍스트는 크게 전역 컨텍스트와 함수 컨텍스트로 나뉨전역 컨텍스트: 스크립트 처음 실행될 때 생성, 전역 변수 관리, 브라우저 환경에서는 window 객체가 전역 컨텍스트의 this함수 컨텍스트: 함수..
[프론트엔드 예상 면접] Promise와 Async/await 차이점 💡둘 다 자바스크립트에서 비동기작업을 위한 것Promise는 작업실행 후 revolve, reject를 성공, 실패로 반환하여 이를 then, catch로 받아 완료 후의 동작을 정의Async/await는 Promise의 완료를 기다리기 위한 문법으로 더 간단하게 만듦Async가 함수 앞에 붙으면 promise를 반환하고, 이 promise 앞에 await가 붙어 있으면 해당 promise가 완료될 때까지 코드 실행이 일시 중지가 되어 동기처럼 쓸 수 있음간단한 비동기 처리 또는 여러 작업을 병렬로 실행해야 하는 경우 Promise.all() 메서드 사용하는 경우, Promise를 사용복잡한 비동기 흐름으로 직관적이고 가독성 높은 코드가 필요한 경우 async/await을 사용 Promise비동기 작업..
[jQuery] css 가져오기 변경하기 css 가져오기 $("div").css("스타일 속성"); //$("div").css("width"); css 변경하기 $("div").css("스타일 속성". "변경할 값"); //$("div").css("width", "200px"); 예시코드 사이드바의 버튼 클릭시 토글과 같이 나왔다 사라졌다는 하는 기능입니다. $('.btn').click(function() { if ($('aside').css('left') == '0px') { $('aside').css('left', '-200px') } else { $('aside').css('left', '0') } }) 구현 화면
[jQuery] 페이지마다 해당 메뉴명 스타일 주기 페이지 접근시 해당 메뉴명에 컬러를 주려고 하였으나, 페이지가 이동할 때마다 새로고침을 하여 onclick 이벤트로 불가하여 다른 방법으로 기능 구현을 하였습니다. document.location.pathname으로 링크 주소를 가져와서, 변수에 담음 a[href*='"+link+"']: a href='xxx' xxx 에 link 의 문자열이 포함되었는지 찾기 포함되었을 경우, 클래스를 추가하여 style 적용 jQuery: $(".menu ul li a[href*='"+link+"']") javascript: document.querySelectAll(".menu ul li a[href*='"+link+"']") [attr*=value] attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문..
[js] 브라우저 종류 확인 (navigator.userAgent) 브라우저 종류 확인 (navigator.userAgent) const mobileTypeFn = () => { const uagent = navigator.userAgent.toLowerCase() const android_agent = uagent.search("android") const iphone = uagent.search("iphone") const ipad = uagent.search("ipad") if (android_agent > -1) { //안드로이드 return 'android' } else if (iphone > -1 || ipad > -1) { //아이폰 return 'iphone' } else return 'pc' }
[js] 자주 쓰는 정규식 함수 만들기 휴대폰 번호 정규식 함수 export const regMobile = (value) => { let mobile = /^010([0|1|6|7|8|9]?)-?([0-9]{4})-?([0-9]{4})$/; if (mobile.test(value)) { return true } else { return false } } 비밀번호 정규식 export const regPass = (value) => { //영문, 숫자만 포함 6자리-20자리 let regPass1 = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,20}$/; //영문, 숫자 포함 6자리 이상 let regPass2 = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/g; //특수 문자 체크 if (..
[js] 페이지 리다이렉트 (location.href vs location.replace) 페이지 리다이렉트 하는 두가지 방법에 대해 알아보겠습니다. window.location.href 새로운 페이지로 이동 속성 내부 히스토리에 주소 기록 저장 setTimeout(function(){ window.location.href="move.html" }, 100); window.location.replace() 기존 페이지를 새로운 페이지로 변경 메서드(함수 호출) 내부 히스토리에 주소 기록이 안됨 setTimeout(function(){ window.location.replace('move.html')}, 100); window.location.replace() 예시 window.location.replace('이동할 주소', '_blank') setTimeout(() => {window.clos..
[js] 숫자가 정수인지 소수점인지 체크 (ft. inInteger(), parseInt()) 숫자가 정수인지 소수점인지 체크하기 Number.inInteger() 예제 Number.isInteger(3) //true Number.isInteger(0.8) //false 문자열 숫자로 반환하기, 소수점 정수로 변환하기 parseInt(value) 예제 parseInt('11') //문자열 > 숫자 11 parseInt(5.333) //소수점 > 정수 5 parseInt('-5') //문자열 -> 숫자 -5 parseInt(' ') //숫자가 안들어간 문자열, 공백의 경우, NaN 반환 NaN
[js] input 이벤트 (ft. input 박스) input박스가 이벤트 onchange focus 발생 전 후 비교하여 변화가 일어났을때 발생하는 이벤트 ... } /> onfocus focus 되었을때 발생하는 이벤트 ... } /> onblur focus가 해제 되었을때 발생하는 이벤트 ... } /> onkeypress 문자 값을 생성하는 키보드의 키를 눌렀을때 발생하는 이벤트 ... } /> 모바일웹앱(안드로이드)의 키패드에서 이동을 눌렀을 경우 if (e.key === 'Enter' || e.keyCode === 13) { //함수 코드 }} /> onkeydown 키보드의 키를 눌렀을때 발생하는 이벤트 ... } /> onkeyup 키보드의 키를 눌렀다가 떼었을때 발생하는 이벤트 ... } />
[js] 숫자 여부 확인 isNaN() is not a number의 약자 true 일 경우 숫자가 아니고, false일 경우 숫자 isNaN(value) isNaN() 예제 isNaN(50) //number //false isNaN('goddino') //string //true
[jquery] 아코디언 기능 구현 쇼핑몰에서 상품 목록 상세내역에 많이 사용되는 아코디언을 제이쿼리로 구현하였습니다. 구현 화면 구현 영상 제이쿼리 스크립트 및 css 아코디언 jQuery 코드 html 구조 title ... subtitle1 .../ subtitle2 .../ subtitle3 .../
[js] 자바스크립트 null 이지만 0은 아닐 때 자바스크립트에서 변수가 null 이지만 0은 아닐 때를 찾는 방법입니다. 자바스크립트 null 이지만 0은 아닐 때 null이지만 0을 걸러낼 경우 if (!foo && foo !== 0)
[js] 서버 없이 form에서 데이터 전송 기능 구현 (ft. Google Apps Mail) 웹사이트에서 서버 없이 프론트에서 contact 기능을 구현 합니다. 웹사이트에서 본인의 이름, 연락처, 메일, 메시지를 보내는 컨택트 기능을 사용할 때, 보통 백엔드를 이용해 서버에 데이터를 저장합니다. 하지만 서버가 없는 간단한 랜딩페이지로 구성된 사이트의 경우. 서버 없이 프론트에서 바로 데이터를 전송하고, 저장하는 방법이 있습니다. 참고 사이트: https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#how GitHub - dwyl/learn-to-send-email-via-google-script-html-no-server: An Example of using an HTML form (e.g: "Contact Us..
[js] 배열과 배열의 비교 (compare arrays in javascript) 배열과 배열이 같은지 여부를 확인하는 방법입니다. 배열과 배열을 === 로 비교하였을 때 값은 false 입니다. let arr1 = [1,2,3]; let arr2 = [1,2,3]; console.log(arr1===arr2); //false 배열과 배열의 비교 두 배열의 길이가 같은지 비교 한 배열의 각 요소가 다른 비교 대상의 배열에도 존재하는지 여부 let arr1 = [1,2,3]; let arr2 = [1,3,2]; const result = arr1.length === arr2.length && arr1.every((value, idx) => value === arr2[idx]); console.log(result) //false
[js] 디데이 카운더 기능 라이브러리 웹 디데이 카운터 표시할때 유용한 라이브러리 입니다. Time and Date https://www.timeanddate.com/ timeanddate.com 5 Planets queue up along with the Moon, a Super Strawberry Moon shines in the night sky, and the June solstice marks the beginning of summer in the Northern Hemisphere. www.timeanddate.com 먼저 구글에서 time and dat를 검색하거나 위의 링크를 눌러 사이트로 이동하세요. 메인 화면에서 오른쪽 상단 메뉴에서 Free Fun > Free Countdown For Your Site 선택. 여기서 카운..
[js] 팝업창 오픈 후 배경 스크롤 방지 자바스크립트에서 팝업창 오픈 후 뒤의 배경의 스크롤 막는법입니다. 팝업창 오픈 후 배경 스크롤 방지 const body = document.querySelector('body') const onOpenGuide = () => { //팝업창 오픈시 body.style.overflow = 'hidden' body.style.width = '100%' } const onCloseGuide = () => { //팝업창 닫을때 body.style.removeProperty('overflow') body.style.removeProperty('width') }
[js] 천자리 콤마 적용 (천자리 점찍기) 자바스크립트를 이용하여 숫자에 천자리 콤마 찍는 방법입니다. toLocaleString() 추천하는 방법입니다. toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 세팅해줍니다. 파라미터가 빈 값이면 사용자 로컬 환경의 locale을 default로 사용합니다. Number(no)?.toLocaleString('en') 정규식 사파리 환경 지원을 하지 않아 아이폰 개발을 원한다면 사용하면 안됩니다. num.toString().replace(/\B(?
[js] 페이지내 특정 위치로 스크롤 이동하기 제이쿼리를 이용해 버튼 클릭시 특정위치로 스크롤 이동하는 방법입니다. 주로 랜딩페이지 상단 메뉴바에 많이 사용되는 기능합니다. 버튼 클릭시 페이지내 특정 위치로 스크롤 이동합니다. 아래의 코드를 사용하기 전에 jquery.min 스크립트 파일 태그 내에 삽입합니다. easing 효과를 위해 jquery.easing 스크립트 파일을 태그 내에 삽입합니다. easing 효과를 원치 않으면 easeInOutExpo 부분만 삭제하면 됩니다. html 버튼 script //네이게이션 menu click시 easing기능으로 부드럽게 이동 $(".btn").click(function(event){ event.preventDefault(); //이전의 이벤트를 기본값 x = $(this).attr("href"); /..
[js] 문자열 특정 문자 추출하기 substring을 사용하여 특정문자열만 추출합니다. url path에서 특정 구간만 추출하여야 할 경우, substring을 이용해 특정문자열만 추출할 수 있습니다. 원본 코드: 아래 코드에서 EncodeData= 뒤에 복호화된 코드만 추출할 경우입니다. http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL... 애프터 코드: AgAFQlg5MTRIeXp/kL 문자열 특정 문자 추출하기 let url = http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL let data = url.substring(url.indexOf('=') + 1) // = 다음 문자열부터 끝까지 추출 console.log..
[js] 배열 map으로 object에 key 추가하기, value 추가 map으로 object에 key 추가하는 방법입니다. before //datas 0: {day: '2022-05-10'} 1: {day: '2022-05-11'} 2: {day: '2022-05-12'} 3: {day: '2022-05-13'} 4: {day: '2022-05-14'} 5: {day: '2022-05-15'} 6: {day: '2022-05-16'} 가공 후 after 0: {day: '2022-05-10', data: ''} 1: {day: '2022-05-11', data: ''} 2: {day: '2022-05-12', data: ''} 3: {day: '2022-05-13', data: ''} 4: {day: '2022-05-14', data: ''} 5: {day: '2022-0..
반응형