GABOJOK 개린D

🚗 Object.assign(Target, Sources) target 에 sources를 병합해서 target을 리턴한다. 동일한 key를 가진다면 Sources의 값으로 덮어쓴다. 여러 객체들을 병합 할 수 있다. 열거 가능한 자체 속성만 목표 객체로 복사해서 할당한다. 얕은 복사가 가능하다. 얕은 복사의 예시 let obj1 = {a:0, b:{c: 0}} let obj2 = Object.assign({}, obj1) obj1.a = 2 obj2.b.c = 10; console.log(obj1) //{a:2, b:{c:10}} console.log(obj2) //{a:0, b:{c:10}} 참고한 링크 https://developer.mozilla.org/ko/docs/Web/JavaScript/R..

🚗 Set( ) 자료형 중복되지 않는 유일한 값들의 집합 요소의 순서에는 의미가 없다. 이터러블(반복 할 수 있는)한 것들을 인수로 전달 받는다. Set 자료에 모든 값을 요소로 저장 할 수 있다. (객체, 배열도 가능) Set 객체는 이터러블(반복 할 수 있는) 객체 👉 forEach(), for~ of, 스프레드 문법 을 이용 할 수 있다. Set 객체에서 forEach("현재 요소값", "현재 요소값", "현재 순회하고 있는 Set객체") 반복문의 인자구성은 이렇다. 🚗 Map( ) 자료형 이터러블(반복할 수 있는) 한 것을 인수로 전달받아 키와 값으로 이루어진 map객체 생성 중복된 키가 존재할 수 없다. Map 자료에 모든 값을 키로 사용할 수 있다.(객체도 가능) obj는 이터러블하지 않는다...

👩🏻‍⚖️ Facts 1. JS 문법 종합반 수강 10.12 ~ 10.17 2. 개인과제 진행 _ 영화 정보 사이트 만들기 10.18 ~ 10.23 순수 바닐라 자바스크립트 사용하기 검색기능 구현하기 필수 api 사용해서 데이터 불러오기 😳 Feelings 1. js 문법 종합반 수강. 3주차 강의는 정말 어려워서 걱정했는데, 뒤에는 걱정했던 것 만큼 어렵지 않아 다행이였다...ㅎㅎ 이론적인 부분이 좀 더 어렵게 느껴지는것 같다. 눈에 보이지 않고 추상적인 느낌이기도 하다. 그래도 알게 되면, 이게 왜 이렇게 동작하는지에 대한 원리를 알 수 있을 것 같아서 다시 보면서 이해해 보려고 했는데,, 개인과제를 생각보다 오래 붙잡고 있었다. 2. 개인과제 단순히 데이터 가져와서 붙여넣고, 필수 요소들 가져와서 ..

드디어 import, export를 했다!! 정말 막막했는데, 이리저리 만져보니 작동이 되었다. 진행하면서 막혔던 부분들에 대해 정리하고, 오늘 알아간 부분들에 대해 정리하려고 한다. 😳 document is not defined 에러 연결을 시도하면서 console을 정말 많이 찍어봤다. vsCode의 터미널에서 node 파일명.js 방법으로 콘솔을 확인했는데, 이유는 처음 연결 할 때에 브라우저에서 어떤것도 확인 할 수 없었기 때문에 작은 것부터 node 콘솔로 확인해 나갔다. 그렇게 쭉이어오다 보니 .... document.querySelector()를 이용해 컨트롤 하던 부분에서 이런 에러를 마주하게 되었다. 찾아보니, document 라는 애는 브라우저에 존재하고, node환경 에서는 존재하지 ..

import, export를 사용하면 코드를 파일별로 나누기 때문에 관리하기 쉽다고 들었다. 정말 유용할 것 같아 시도해 봤는데, 정말 막막했다. 😿 어디서부터 어떻게 만져야 할지 감이 오질 않아서 일단 찾아봤다. 🔮 step 1. 다른사람 코드 살펴보기 내배캠 에서 현재 개인과제를 진행중이라, 다른 분들의 코드를 공유받아 살펴보며 공부 할 수 있는 좋은 기회가 있었다. import, export를 설명해 주셧지만 잘 이해가 되지 않아서 실제로 어떻게 동작이 되는지 직접 읽어보고 싶었다. 그래서 깃에서 다운받아 실제로 열어보니 잘게 나눠서 저글링 하듯이 서로 주고받고 있었다. 🔮 step 2. import, export 개념 살펴보기 지금까지 정리한 개념은 이렇다. ✅ 사용하려면 script type =..

🚗 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); }..