Dseok의 코딩스터디

어느날, 갑자기 비밀번호 보이게하기, 숨기기 기능 구현 하는 방법이 궁금해졌다.그래서 따로 심심해서 만들어보았다.이걸로 나중에 이 기능을 구현할 일이 있으면 복사붙혀넣기하려고 한다.순수자바스크립트로 구현하였다.어려운 내장함수는 없으므로 바로 가져다 쓰면 좋을 듯 싶다. 비밀번호 보기 비밀번호 숨기기.wrap{display:flex;aling-items:center;justify-content: center; gap:10px;padding-top:10%;}.btn,.btn2{display:none;}.on{display:block;} 아래는 정리 되지 않은 javascript 코드이다.const inputType = document.querySelector(".toggleInput");const ..

검색기능을 만들 수 있는 방법은 다양합니다.이번에 코딩테스트에서 틀렸지만 사용해봤던 includes()메서드로 검색 필터 기능을 만들어보고자 합니다.기본 HTML 구성은 아래와 같습니다. 위에 은 그냥 가운데에 놓기 위해서 적은 코드입니다.가운데에 놓는 역할 말고는 다른 역할이 일절 없습니다. 다음은 그냥 넣기 너무 지져분하니 정말정말 간단한 스타일링을 해줬습니다.@charset "utf-8";.wrap{ width: 1010px; margin: 0 auto; padding: 50px 0;}.todo-list { margin-top: 20px;}.todo-item { margin: 5px 0;}뭐 이것도 아무렇게나 가져다 쓰시면 됩니다. 다음은 자바스크립트 코드입니다.핵심적인..

내용 스포가 있습니다. 초보자 및 코딩테스트를 해보고 싶으신 분은 고민을 충분히 하고 열어보시기 바랍니다.경고 했습니다. 추후 원망하시는 일 없기를 바랍니다... javascript에서 공식문서 찾기 힘든 메서드와 뜻밖에 기호를 알아서 소개하고자 합니다. 프로그래머스에서 기초버전 문제 "접사인지 확인하기"문제입니다. 문제.어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, "banana"의 모든 접미사는 "banana", "anana", "nana", "ana", "na", "a"입니다.문자열 my_string과 is_suffix가 주어질 때, is_suffix가 my_string의 접미사라면 1을, 아니면 0을 return 하는 solution 함수를 작성해 주세요..

React-Router-dom 학습(ver.16.*에서만) 1. npm i react-router-dom 실행.2. main.jsx에 import { BrowserRouter } from 'react-router-dom';을 실행.3. main.jsx에 을 로 감싼다. (아래와 같이 실행)        4. App.jsx에 import { Routes, Route } from "react-router-dom";을 실행.5. 안에 를 넣는다. 단, 안에는 만 넣을 수 있다.6. 의 속성으로는 path와 element가 있는데, path는 말 그대로 경로를 설정해주는 놈이다. element는 path의 경로로 들어갔을 때 보여줘야할 컴포넌트를 넣는다. (아래의 예시)  path='/' element={} /..

내가 사용하고 있는 에디터에서 좋은 플러그인을 한번 추천 해보고자 한다.나는 vscode를 쓰고 있다.1. Highlight Matching Taghtml 코드가 아주아주 길때 시작 태그와 닫는 태그에 밑줄이 그어진다.위 이미지와 같이 그어진다. 2. Blockman - Highlight Nested Code Blocks이거 진짜 간지 난다. 이 플러그인도 위와 비슷한 플러그인이다.javascript, html, css 기타 등등 많은 언어에서 사용이 가능하다.이게 진짜 강력한게 함수가 어디에 쓰여 있는지 다 보인다.비슷한 역할을 하는 함수를 조금 변형해서 쓸 때 changOverlap02()이런식으로 숫자만 바꿔서 쓰는데이건 진짜 좋은 플러그인 같다.참고로 회사에 대리님께서 추천해주신 플러그인이다.감사..

Array.prototype.join()에 대해서 알아보자.우선 MDN의 설명이다.join()메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.join()메소드는 설명이 쉽게 되어있는 듯 하여 추가적인 설명은 하지 않겠다. 먼저 join()의 문법을 알아보자.arr.join([separator])join()메서드는 인자로 문자열을 받는다.이 문자열은 배열의 각 원소 사이에 반복적으로 반영된다.예를 들면 띄어쓰기라던지, 하이픈( - )이라던지 이런 것들을 넣을 수 있다. 바로 예시를 알아보자.const elements = ['Fire', 'Air', 'Water'];console.log(elements.join());// Expected output: "Fire,Air,Water"console...

findIndex()에 대해서 알아보자.findIndex()는 find(), indexOf()에서 진화한 버전이다.인수에 함수를 받을 수 있다. 우선 MDN의 설명을 보자. findIndex()메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.하위에 더 복잡한 설명이 있는데 제외 하겠다.오히려 더 헷갈릴 듯 하다. 내가 이해한 findIndex()메소드.조건에 맞는 놈 찾아 다니다가 처음으로 조건에 맞는 놈 위치 값 알려주고, 조건에 맞는 놈이 없으면 -1로 없다고 알려준다. findIndex()의 기본 문법을 보자.arr.findIndex(callbackFn, thisArg)callbackFn: findIndex()메소드는 ..

오늘은 Array에 있는 indexOf() 메소드에 대해서 알아보자.indexOf()메소드는 String, 문자열에서도 사용을 할 수 있는 메소드이다.(MDN참고) 하지만 지금은 Array에 있는 indexOf()를 알아보자.MDN 설명이다.indexOf()메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.indexOf()는 엄격한 동등성 (=== 또는 triple-equals 연산자에서 사용하는 것과 같은 메서드)을 사용하여 검색 요소를 Array의 요소와 비교합니다.쉽게 말하면내가 검색해야할 배열(데이터)에 내가 원하는 원소(자료)가 있으면 그 원소(자료)가 처음 보여지는 순서를 값으로 내놓고, 없으면 -1을 내놓는다. indexOf()의 문법..

오늘은 includes() 메소드에 대해 알아보려고 한다.나중에 정리하려고 한 녀석인데 앞 포스팅에 간간히 등장하는 녀석이라 먼저 정리 해보고자 한다. MDN의 설명은 이러하다.includes()메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.오늘은 비교적 설명이 간단하다. 내가 이해한대로 설명을 조금 바꾸자면,어떤 배열에서 내가 원하는 원소가 있는지 확인시켜준다.이 문장으로 정리를 할 수 있어 보인다.현재 고객(실사용자)들이 사용하기에는 브라우저 호환의 문제는 크게 있어보이진 않지만,망할놈의 인터넷 익스플로러(IE)에서는 11버전까지 호환이 안되는 문제가 있다. IE가 없어지기는 했지만...그래도 어디선가 살아 있을 IE를 위해 MDN에 있는 폴리필 코드를 이용하면 좋을 것 같다.인터넷은 모든 ..

오늘은 filter() 메소드에 대해 알아보자.우선 filter()는 배열의 메소드이다.MDN의 설명은 이러하다.filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다; 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다. callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다.callback은 다음 세 인수와 함께 호출됩니다:요소값요소 인덱스순회(traverse)되는 배열 객체thisArg 매개변수가 filter에 제공된 경우, 호출될 때 그 값..