본문 바로가기
[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비동기 작업..
[php] form 전송 (GET, POST) php에서 input, form 태그를 활용한 form 전송을 알아보겠습니다. 1. 입력, 출력 화면 다를 시 폼 입력 화면 폼 출력 화면 index.php - 폼 입력 이름 비밀번호 이메일 form-act.php - 폼 출력 2. 같은 화면에서 출력시 출력 화면
[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') } }) 구현 화면
[css] 포스트에서 자주 사용되는 hover시 effect주기 사이트 포스트에서 많이 사용되는 hover시 style 입니다. image background가 들어가고, view more 문구가 나타납니다. HTML XXX CSS .cover-thumbnail-list-1 ul li .thum { position: relative; } .cover-thumbnail-list-1 ul li .thum:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0); transition: background-color .5s; } .cover-thumbnail-list-1 ul li:hover .thum:before { wi..
[vba] VBA selenium 기본 코드 기본 셀레니움 틀 Sub 함수명() Dim driver As New Selenium.ChromeDriver Dim keys As New Selenium.keys driver.Get "웹주소" //작업할 코드 End Sub 셀레니움 기본 코드 driver.FindElementByCss("셀렉터").Clear //지우기 driver.FindElementByCss("셀렉터").text //텍스트 가져오기 Dim keys As New Selenium.keys //셀레니움.keys 삽입 driver.FindElementByCss("셀렉터").SendKeys "키워드" //키워드 텍스트 입력 driver.FindElementByCss("셀렉터").SendKeys keys.Enter //엔터치기 driver.Find..
[vba] 네이버 쇼핑 연관검색어 크롤링 네이버 쇼핑에 검색어를 입력하면 나오는 아래의 쇼핑연관 검색어를 추출합니다. 네이버 쇼핑 연관검색어 크롤링 코드 주소 가져오기 접기 클릭 연관 검색어 FindElementsByCss로 가져와 변수에 담기 for 문으로 엑셀에 츨력하기 Sub 네이버쇼핑가져오기() Dim driver As New Selenium.ChromeDriver driver.Get "https://search.shopping.naver.com/search/all?query=%EC%9B%90%ED%94%BC%EC%8A%A4&cat_id=&frm=NVSHATC" driver.FindElementByCss("#container > div.relatedTags_relation_tag__Ct0q2 > div > button").Click Se..
notepad ++ ftp 플러그인 연결 코드에디터 노트패드++를 이용해 ftp 클라이언트 프로그램 연결을 위해 플러그인 설치 후 연결하는 방법입니다. 노트패드++ 진입 > plugins > plugins admin nppftp 검색 > 선택 > install plugins > nppftp > show nppftp window nppftp 창 > 설정 아이콘 > profile settings profile settings 팝업 > add new > hostname, connect type: SFTP, username, password 입력 ftp창에서 connect 아이콘 선택 후 해당 파일, 폴더가 뜨면 완료
[html] 유튜브 iframe 코드로 변환 ifram 변환 사이트 - 유튜브 태그 생성기 https://remindori.com/tool/youtube Tool • ReminDori remindori.com 유튜브 동영상 퍼가기 유튜브 동영상 하단의 공유 기능에서 퍼가기 메뉴를 이용합니다. 직접 소스 만들기
[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라는 문..
[WEB] 페이지 소스보기 캐시 비활성화 하는법 view source 보는 법 마우스 웹사이트의 오른쪽 마우스 클릭 후 페이지 소스 보기 선택 단축키 윈도우: ctrl + u 맥: command + alt + u 캐시비활성화 하는 법 개발자 도구를 켰을때만 비활성화 됨 개발하면서 코드를 수정하면서 캐시 때문에 반영되지 않는 현상을 해결, 즉시 반영되게 할 수 있음. 개발자 도구로 이동 네트워크 > Disable Cache 체크
[xampp] apache vhost 환경설정 및 windows hosts 설정 [xampp] apache vhost, 윈도우 hosts 설정 아파치의 가상 호스트와 윈도우의 호스트를 이용하여 가상의 도메인을 내 컴퓨터(로컬)의 폴더로 잡아 주어 가상 도메인을 설정합니다. 로컬호스트(127.0.0.1) 위치c:\xampp\htdocs cmd(또는 powershell) > 관리자권한으로 실행 > windows/system32/drivers/etc/hosts 윈도우에서 powershell을 관리자 권한으로 실행하여 windows/system32/drivers/etc/hosts 경로로 들어가 hosts 파일 코드를 오픈합니다. 원래에서 바꿀 도메인으로 변경 xampp control pannel 실행 Apache > Config > [Apache] 선택 conf > extra > httpd..
자주 사용하는 터미널 명령어 자주 사용하는 터미널 명령어 폴더만들기 mkdir 폴더명 폴더삭제 rm -rf 폴더명 폴더안으로 들어가기 cd 폴더명 폴더 뒤로 돌아가기 cd .. 폴더 내부 정보 확인하기 ls -al 폴더 내 파일 생성하기 touch 파일명
[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..
[react] react 구글 태그 매니저 react에서는 react-gtm-module을 설치하여 구글 태그 매니저를 사용합니다. https://www.npmjs.com/package/react-gtm-module react-gtm-module React Google Tag Manager Module. Latest version: 2.0.11, last published: 2 years ago. Start using react-gtm-module in your project by running `npm i react-gtm-module`. There are 222 other projects in the npm registry using react-gtm-module. www.npmjs.com react-gtm-module 설치 npm i rea..
[db] DBeaver 설정법 새로 생성시, 왼쪽 플러그 플러스 아이콘 선택 -> 해당 database 선택 여기서 SSH로 들어감 use ssh tunnel 체크 host: ip 주소 user name: ubuntu private key에 ircc 키 ubuntu 안에서 해당 localhost로 들어감 Main 탭에서 connect by: Host Host: localhost Datebase, Usernmae, Password 입력 서버 정보 입력 후, 아래 Test Connection 으로 테스트
[mysql] sql 기본 문법 (ft. CRUD 쿼리) 테이블 구조 테이블 명: members 컬럼명: name, age, gender INSERT문 / CREATE INSERT INTO 테이블명 VALUES(데이터) INSERT INTO members VALUES( '홍길동', 20, '남'); 특정컬럼에만 값을 넣고싶을 때 INSERT INTO members (name, age) VALUES( '갓디노', 24); MySQL 문법 INSERT INTO members SET name = '홍길동', age = 20, gender = '남'; SELECT문 / READ SELECT * FROM 테이블명 [ WHERE 조건문 ] //예제 SELECT * FROM members; SELECT * FROM members WHERE age = 20; SELECT *..
[html] html5 구문 html5 구문
반응형