분류 전체보기 242

배열에서 중복된 값 제외하는 방법

배열에서 중복값을 걸러내야할때가 있음. 근데 이게 중복값이 몇개가 있냐, 배열이 deep한 친구냐(막 배열안에 객체있고 그런), 최신문법을 써도 되냐 등에 따라 써야할 방법이 다름. 그래서 정리함. --- 1. indexOf와 filter를 사용하기 const arr = [1, 2, 1, 3, 4, 3, 5, 1, 1, 3, 3, 1, 5]; // [1, 2, 3, 4, 5] arr.filter(function(item, index) { return arr.indexOf(item) == index; }); 중복값이 있음 = indexOf로 찾았을때 index랑, filter함수 내에 index랑 값이 다름 을 이용한 형식임. 저 두값이 같다는 의미는 중복이 없다는 것이기떄문에 저렇게 써주면 중복없는 친구..

Javascript 2022.09.29

공백/텍스트없는 태그 유니코드로 잡아내기

라든가 같은 안에 텍스트가 없는 부분은 건너뛰려고했는데, length든 뭐든 아무리 정규식으로 공백을 지워봐도 length가 1로 나와버림. 그렇게되면 ㅋ이것도 length가 1이니까 구분이 안되는데.. 하면서 삽질하다가 우연히 알아냄 1. charCodeAt var text = element.charCodeAt(); if (text == 8203 || text == 160 || text == 32) { return; } 8203은 $zero width space 160은 32는 스페이스바 누르면 생기는 공백을 나타냄

Javascript 2022.08.24

font-face 적용이 안될 때, :root 안될 때

:root은 공통으로 쓰는 요소를 변수마냥 모아놓고 css에서 적용하기 위해 쓰는 요소임. 근데 저게 안된다면 아래와 같은 부분을 확인해야함 1. 제일 상단에 위치했나 확인 css제일 상단에 쓰는게 속편함. 2. :root {}; 이렇게 맨 뒤에 ;붙었나 확인 이것때문에 안된적이 있었음. 세미콜론 없어야함. font-face 폰트 정의해서 쓸수있는 것임. 근데 하루는 웹폰트 다운받아서 폴더에 넣어두고 불러오는게 죽어도 안된적이 있었음. 1. 경로 확인 대부분은 경로를 제대로 안써서 그러함. / ../ ../../ 이런거 말하는거임. 2. (스프링부트를 쓴다면) font넣어둔 폴더를 접근허용했는가 확인 @Override public void configure(WebSecurity web) { web.ign..

html_css 2022.07.15

mongoDB에서 []빈 배열로 나올때, test database가 자동으로 생길때

분명히 예전에 공부할때는 이런 문제가 없었는데, 이상하게 아무리 find를 해도 데이터베이스에 넣어둔 샘플이 조회가 안되었음. 계속 [] 이렇게 빈배열로만 나옴.. 한참 삽질하다가 뒤늦게 몽고db 홈페이지를 가서 보니 원래 만들어둔거 말고 test라는게 새로 생겨있는데다가 왠지 여기를 바라보는거같아서 검색해봄. 알고보니 코드에서 db이름, collection이름을 따로 지정해줘야하더라. 1. url 설정 mongodb+srv://아이디:패스워드@어쩌구저쩌구.mongodb.net/여기?retryWrites=true&w=majority 위와 같은 db url을 쓸텐데 "여기"라고 써진 부분에 본인이 바라볼 db이름을 추가로 넣어주면 됨. 나같은 경우 asm 을 넣어줘야하는것임. 2. schema 설정 mod..

백엔드 2022.06.29

👾한번 해봄 시리즈👾 heroku 가입 및 node.js 프로젝트 배포하기

닷홈이나 일반 웹호스팅 사이트에서는 기본적인 html, css, js 파일 등만 올릴 수 있음. 그러나 node.js로 만든 프로젝트라면? 이거는 좀 다른걸 써야함. node.js 배포를 지원하는 서비스는 여러가지가 있는데 그중 헤로쿠를 통해 내가 만든 프로젝트를 올려보도록 하겠음. 사실 나 이거 굉장히 복잡할줄알고 쫄아있었는데 너무 쉬웠음. ----------------------------------------------------------- 1. 회원가입 https://www.heroku.com/ Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, ru..

javascript 몇몇 문법 속도 벤치마크 정리

js문법 속도 측정 사이트를 알게된 이상 한번 정리하는 겸 테스트해봄. 각 테스트마다 문법이 여러개가 있는것도 있지만 상위 4,5위까지만 가져와봄. 덕분에 잊고있었던 문법공부도 다시 하게댐 후후 테스트 브라우저: 크롬 https://jsben.ch/browse JSBEN.CH Performance Benchmarking Playground for JavaScript jsben.ch ---------------------------------------------- 1. array 복사해서 만들기 json stringify는 자주썼는데 이거 좋은 방법이 아니네 어쩐지 어디서 느리다는걸 본적이 있는데.. 앞으로는 slice나 concat을 써야할듯(참고로 concat은 원본 array와 참조된 링크가 끊겨서..

Javascript 2022.06.28

카드모집인 교육 듣는 방법

1. 회원가입 https://www.cpcrefia.or.kr 카드모집인교육시험센터 www.cpcrefia.or.kr 2. 로그인 로그인을 한다~ 3. 메인페이지로 이동 신규면 신규클릭 경력이면 경력클릭 4. 들어야하는거 교육신청 클릭 유료는 결제페이지로 넘어감 5. 메인페이지 - 나의강의실 클릭 6. 학습하기 클릭 7. 순차대로 클릭해서 듣기 다 듣고 나면 수료증이 생기는데 인쇄해서 쓰면 된다.

기타등등/일상 2022.06.28

event.target에서 element 이름 찾는 방법 & 효율성, matches와 contains 차이

1. nodeName vs matches event.target을 했을때 해당 요소가 어떤 태그인지 알려면 nodeName을 확인하면 됨. 그러나 기본적으로 nodeName은 이렇게 대문자로 나오기때문에 event.target.nodeName.toLowerCase() == 'summary' 이렇게 비교를 해줘야함(아님 걍 대문자로 비교해도 됨). 근데 어느순간 저렇게 하는게 혹시 구린방법(?)이 아닐까라는 생각에 찾아봄. https://stackoverflow.com/questions/44595875/event-target-tostring-or-event-target-nodename-to-check-type-of-element event.target.toString() or event.target.nod..

Javascript 2022.06.27

공통 html을 다른 html파일에서 쓰기, html에 include하는 방법

기본 html로만 작업하다보면 header, footer등과 같이 모든 html에 똑같이 나오는걸 일일히 넣어줘야하나?라는 생각이 들기 시작할것임. 넣는거야 별거아닌데 나중에 한 html파일 20개정도 되는데 header에 뭔가 추가해야한다면 끔_찍... 이에 대한 방법(링크)은 여러가지가 있지만 그나마 뭔가를 안깔고 기본 내에서 할 수 있는거는 이게 제일 유용해서 작성함. 예전에는 php로 했었는뎅 암튼 파일 구조는 다음과 같음. 파일 구조는 뭐든 상관없음. 1. 공통적으로 만들 파일 따로 만들기 나같은 경우 header.html을 생성하여 이하 태그를 넣어뒀고, index.html에는 까지만 써둠. 이제 자바스크립트로 밑에 친구들을 넣을 것임. 2. script에서 불러와줌 const header =..

Javascript 2022.06.22

접근성 관련 정보모음 사이트 제작

한번 정리하는게 좋겠다싶어서 만든 페이지. 센스리더가 각 태그에서 어떻게 읽는지, 태그별 사용가능한 role과 aria는 뭔지 정리해봄. 기왕 만든김에 다른것도 왕창 몰아넣을까 생각중. 아직 완전히 정리된건 아니고 추가적으로 계속 업데이트할 예정 https://peamexx.github.io/test-screen-reader/ Document Testing for Accessibility with the Sense reader 최근 업데이트: 2022-06-22 - img태그 테스트 결과 추가 이곳은 대한민국에서 주로 쓰이는 스크린리더인 센스리더를 이용한 태그별 읽기방법 정리페이지입니다. peamexx.github.io

접근성 2022.06.22