🖥 dev-ruby

이번에 우테캠 5기 2차 과제테스트를 준비하기 위해 프로그래머스에 고양이 사진첩 애플리케이션 이라는 과제테스트를 풀어보았다. 지난번에 고양이 사진 검색하기를 했었는데 그때 바닐라JS가 처음이라 진짜 아무것도 모르고 이것저것 뒤지면서 구현했더니 머리에 남아있는게 없다.. 바닐라 JS자체가 너무 재미없어서 꾸역꾸역 해서 그런것도 있는 것 같다 ㅎ 뭐 쨋든 서론은 이만하고, 이번 포스팅에서는 과제테스트를 딱 열었을 때 아무것도 없는 생 파일에 어떻게 구조를 구성해나가면 될 지 알아볼 것이다. 먼저 처음엔 index.html이 있을 것이다. 자바스크립트를 구현하면서 해당 파일안에 요소가 계속 추가 될 것이다. html파일에서 할 일은 js파일을 연결해주면 된다. 고양이 사진첩 script태그는 안에 넣어도, 안..

어느 Element에나 data-로 시작하는 속성을 사용할 수 있다. 화면에는 렌더링 되지 않게 정보를 엘리먼트에 담아놓을 수 있다. 사용법 ... Javascript에서 접근하기 자바스크립트에서 dataset객체를 통해서 data속성을 가져올 수 있다. 이때 접두사인 data-가 제거되고, 모든 대문자는 소문자로 변환된다. 그리고 data-다음에 오는 속성명은 -(dash)를 제거하고 camelCase로 변환된다. 예를 들면, data-node-id -> nodeId 로 변환. 따라서, 아래처럼 사용할 수 있다. const { nodeId } = e.target.dataset; e.target.dataset.nodeId; e.target.dataset['nodeId']; in 연산자로 해당 속성이 존재..

프로그래머스 고양이 사진첩 과제를 구현하던 중 위와 같은 에러를 만났다. 먼저 html에 아래와 같이 스크립트를 연결해줬다. export, import를 사용 할 것이기 때문에 type="module"이 필요하다. index.js import App from "./App"; new App(document.querySelector(".App")); import해줄 것이기 때문에 다른 js파일들은 html에 연결해주지 않아도 된다. index.js에서 App을 import 후 querySelector로 앱을 전달해줬는데..! 아래와 같은 에러가 뜬 것이다. App이라는 파일을 찾을 수 없나보다. net::ERR_ABORTED 404 (Not Found) 난 스크립트 태그의 순서에 문제가 있나 했더니.. 파일..

reduce 활용하기 const adj = []; const difIdx = [...el].reduce((acc, curr, idx) => curr !== word[idx] ? acc += 1 : acc, 0); if(difIdx === 1) adj.push(el); 간단하게 for문을 돌려서 카운트를 증가시키면 비교하고자 하는 문자열과 몇개의 문자가 다른지 알 수 있지만, reduce를 활용할 수도 있다! 위의 예시에서 보면, difIdx 는 다른 문자의 개수가 저장될 것이다. 예를 들어, word = 'apple', el = 'appel'일 경우 뒤에 2문자가 다르므로 difIdx = 2가 된다.

for...in 문, for...of 문 for...in for...in 문은 객체의 key를 하나씩 가져온다. const obj = { key1: 'value1', key2: 'value2', key3: 'value3', } for (const key in obj) { console.log(obj[key]); } // value1 // value2 // value3 for...of for...of 문은 iterable한 속성을 지닌 String, Array, TypedArray, Map, Set에서 값을 하나씩 가져온다. 객체는 iterable이 아니기 때문에 사용할 수 없다. 그렇기 때문에 Object.keys(object) 혹은 Object.values(object)를 통해 배열로 바꿔서 값을 가져..

replace() 메소드 : 어떤 패턴에 일치하는 일부 또는 전체 부분을 교체된 새로운 문자열로 반환 구문 const newStr = str.replace(정규식 | 문자열, 대체할 문자열 | function) 매개변수 regexp (pattern) 정규식(RegExp) 객체 또는 리터럴. 일치하는 항목은 newSubStr 또는 지정된 함수(function)가 반환 한 값으로 대체된다. substr (pattern) 대체하고 싶은 문자열. 정규식이 아닌 글자 그대로의 문자열로 처리된다. 오직 첫 번째 일치되는 문자열만이 교체된다. -> 전체에서 검토하고 싶으면 정규식을 써야한다. 예시) replace(/(C#)/g, 'c') : 문자열 내에 모든 C#이 c로 대체된다. newSubStr (replacem..