GABOJOK 개린D

🚗 input 커서 자동 위치 기능 원했던 방향 👉 페이지 리로드 되면 커서가 인풋으로 자동 위치되도록 하고 싶었다. 구현 방법 input 태그의 속성으로 autofocus 를 추가해 준다. 👉 autofocus 의 특징은 페이지가 로드 되자마자 자동으로 포커싱이 된다. 2. .focus() 메소드를 이용한다. //input 자동 커서 let input = document.querySelector("#searchInput"); input.focus(); .focus() 는 처음본 메소드라 찾아봤는데, 참고한 링크는 아래와 같다. 🧐 . focus( ) 특정한 포커스로 이동해야 할 경우에 사용하면 좋다. 포커스를 제거하려면 . blur( ) 메소드를 이용하면 된다. https://ko.javascript...

🚗 바닐라 자바스크립트로 검색 기능 구현하기 개인과제로 바닐라 자바스크립트만 이용해서(제이쿼리 제외) 페이지를 만들어 봤다.😆 그중에서 오늘은 검색 기능에 대한 부분을 적으려고 한다. 💡 구상 검색 버튼을 누르거나, 엔터키를 입력하면 검색이 된다. input에 입력된 값을 가지고 와서, 가지고 있던 데이터 들과 비교 한다. 동일한 것 데이터가 있다면 그것들을 보여주고, 동일한 데이터가 없다면 검색 결과가 없다고 알려준다. 이벤트 리스너 달아주기 //검색버튼 클릭하면 이벤트 실행 document.querySelector("#searchBtn").addEventListener("click", function (e) { return search(); }); //엔터 키 입력하면 이벤트 실행 document.q..

🚌 문제 1️⃣ 첫번째 풀이 과정 function solution(name, yearning, photo) { let mapPhoto = photo.map((p)=>{ let answer = []; p.map((e)=>{ name.map((n)=>{ return e ===n ? answer.push(e) : e }) }); return answer }) let val = {}; for(let i=0; i{ let newA = a.reduce((acc,acu)=>{ return acc + val[acu] }, 0) return newA }) return ansan..

🚗 링크드 리스트 유동적으로 연결고리를 떼었다가 붙였다가 할 수 있는 자료구조링크드 리스트 요소의 삽입/삭제에 강점이 있다. 빈번하게 데이터를 삽입/삭제 해야하는 경우에 사용하면 좋다. 🧐 배열 vs 링크드 리스트이와 반대로 배열의 경우 데이터를 삽입/삭제 과정이 번거롭다. 요소 변경 후, 재정렬이 이루어 진다. 빈번하게 데이터를 접근 하는 경우 배열을 사용하는 것이 좋다. 인덱스 값에 따라 한번에 값을 찾기 때문. 예시) __ 각 노드들을 연결하기class Node { constructor(data) { this.data = data; //포인터로 사용할 값이 필요해서 만듬. this.next = null; } } class LinkedList { constructor(value) { //헤드로 시작할..

🚗 promise 패턴 new 연산자로 호출해서 사용한다. promise 패턴의 인자로 넘어가는 콜백함수는 따로 호출하지 않아도 바로 실행된다. 파라미터는 resolve, reject 이렇게 사용한다 성공의 결과는 resolve 를 통해 then 이 실행되며, 실패의 결과는 reject를 통해 catch 가 실행된다. catch를 사용하지 않는다면 오류가 생긴다. catch 를 이용해 에러를 컨트롤 한다. .finally는 성공 실패 여부와 상관 없이 항상 실행된다. 예시) new Promise(function (resolve, reject) { setTimeout(function () { let name = "에스프레소"; console.log(name); resolve(name); }, 500); }..

🚗 this의 바인딩 1. . call( ) .call() 은 즉시실행함수 이면서, this에 값을 바인딩 할 수 있는 애다. .call(this가 참조 할 대상, 해당 함수에 넣을 파라미터 값) 호출 주체가 없는 경우. var func = function (a, b, c) { console.log(this, a, b, c); //{ x: 1 } 1 2 3 }; func.call({ x: 1 }, 1, 2, 3); 호출 주체가 있는 경우 var obje = { gogo: function (a) { console.log(this, a); }, }; //this에 바인딩 하지 않는 경우 obje.gogo(2); //obj내부에 있는 애들 전체 호출 { gogo: [Function: gogo], toto: [..

🚗 this 1. 그냥 사용한다면 👉 브라우저 에서는 window / node.js 에서는 global 이라는 의미를 가지고 있다. 2. 일반 함수 내부에서 호출 👉 브라우저 에서는 window / node.js 에서는 global 이라는 의미를 가지고 있다. 3. script type = 'module' 배경의 일반 함수 내부에서 호출 👉 undefined 을 의미한다. 4. object 내의 함수 내부에서 호출 👉 해당 함수를 실행 한 바로 위 object 를 의미 5. 화살표 함수에서의 호출 👉 브라우저 에서는 window / node.js 에서는global 이라는 의미를 가지고 있다. 6. 생성자 함수 안에서의 호출 👉 새로 생성되는 intance(생성자 함수로 부터 생성되는 오브젝트) 를 뜻한다..

👀 obj의 자료를 이런식으로도 만들어 낼 수 있다. 변수에 값을 담는다. 새로운 변수에 obj을 만들고, 그 안에 전에 만들어둔 변수 이름을 넣어준다. 새로만든 obj.변수이름 을 출력하면 마치 객체처럼 해당 값이 출력된다. let p = "pop"; let j = "jaze"; let music = { p, j }; console.log(music.p); //pop 이런 방식을 우리는 단축속성명 이라고 부른다. 🚗 단축속성명 (property shorthand) 단축속성명은 변수가 미리 준비된 경우, 이를 활용하여 객체의 키와 값을 한번에 정의할 수 있다. 문자열, 함수, 객체 등 자료형에 상관 없이 적용이 가능하다. 아래 예시를 살펴보자. let country = "korea"; let member..

오늘은 javaScript 문법 강의를 들었다. 헷갈렸던 부분을 다시 되집기에 정말 좋았는데, 그동안 잘 사용하지 않았던 switch문에 대해 적어보려고 한다. if문과 비슷하게 조건에 해당하는 결과를 지정해 줄 수 있지만, 좀더 직관적이라고 느껴졌다. 일단 아래의 예시를 살펴보자. 🚗 switch switch문은 해당 값이 이런 경우~ 이렇게 해주고 멈춰줘~ 이렇게 사용된다. 배열의 요소들을 forEach문 이용해서 반복시키며 switch문을 사용해 보겠다. 배열에 담긴 값이기 때문에, 앞에 요소부터 순서대로 돌아간다. ❓break를 사용하지 않을 경우 ➡️ 계속 아래로 흘러서 해당하는 경우 이후의 모든 경우가 출력된다. let na = ["김", "박", "김", "선우", "남궁"]; na.forE..

드디어 프로젝트가 끝났다. 정말 정리할 게 많지만, 회고에 따로 적으려고 한다. 🤠 오늘의 배움 일단 오늘 가장 크게 배운것 중 하나는 함수의 사용이다. 프로젝트를 하면서 정말 난잡하게 코드를 작성해놔서 내가 쓴 코드 조차 한번에 파악하기 어려웠다. 분명 재활용 할수 있는 같은 기능임에도 불구하고 함수로 묶어서 사용하는 것이 어려웠고, 반복문의 사용 속에 중첩 반복문, 그리고 그 안에 데이터베이스 호출 등 무겁고 어지러운 코드들로 작성했었다. 일단 프로젝트 진행중이라, 일단 기능 구현에 초점을 맞춰서 진행했는데, 진행이 되면 될수록 불편함을 느꼇다. 그러던 중 튜터님 께서 오셔서 보시고는 함수를 이용해서 기능별로 묶어서 사용해 보라고 조언을 주셧다. 예를 들면 1. 데이터를 불러오는 기능, 2. 이벤트가..