뉴히의 개발 로그

문자열 치환 replace() 함수, split(), join() 검색시에 공백을 제거해서 띄어쓰기가 틀리거나 해도 모두 검색이 될 수 있도록 split으로 공백을 기준으로 쪼개고 join으로 공백을 없애 주도록 했는데 튜터님께 코드 피드백 받는도중 저건 왜 split으로 쪼갠거죠? 하셔서 ㅎㅎㅎㅎㅎㅎ 코드봤을때 조금 의아했다! 하시며 replace 함수를 쓰는게 어떻겟나? 하셔서 변경해보앗다. 기존코드 const matchMovies = movies.filter((item) => { let titles = item.original_title.split(' ').join('').toLowerCase(); inputValue = inputValue.split(' ').join(''); return titl..

alert창 한번만 띄우기 !!! 어제 if 문으로 해결 된지 알았으나 아니었던것! 그 이유는! movies.forEach 안의 if문이라서 movies를 다 돌때 까지 alert창이 뜨는것 이였다 ㅎㅎㅎㅎ console창을 보면 알 수 있다! console을 잘 찍어봐야 하는 이유! let searchBtn = document.getElementById("search-btn"); searchBtn.addEventListener("click", function(){ let temp_html = ''; // input 입력값 let inputValue = document.getElementById("search-input").value.toLowerCase(); console.log('입력값->',inpu..

클로저 closure 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합니다 // 카운트 상태 변경 함수 #3 const increase = (function () { // 카운트 상태 변수 let num = 0; // 클로저 return function () { return ++num; }; })(); // 이전 상태값을 유지 console.log(increase()); //1 console.log(increase()); //2 console.log(increase()); //3 1. 위 코드가 실행되면, '즉시 실행 함수'가 호출 -> 함수가 반환(inner) -> increase에 할당 (function () { // 카운트 상태 변수 let num = 0; // 클로저 return functi..

Promise Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다. Promise는 비동기 처리에 대해, 처리가 끝나면 알려달라는 ‘약속’ new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행 그 내부의 resolve(또는 reject) 함수를 호출하는 구문이 있을 경우 resolve(또는 reject) 둘 중 하나가 실행되기 전까지는 다음(then), 오류(cat..

오늘은 콜백함수를 공부하고 있었는데 map 함수를 배웠다. 엇? 근데 이전에 map 객체도 배웠는데! 이름이 같아? 해서 정리해봤다. 자료구조 Map(Object) 와 .map() 함수(메서드) Map : key값으로 속성에 접근할 수 있다. (검색, 삭제, 제거, 여부확인 등의 기능 가능) ('key', 'value') 프로그래밍의 부족한 부분을 보완하기 위해서 Map, Set 같은 추가적인 자료구조(데이터 형태)가 등장 Map의 메서드 : keys, values, entries Map의 key는 모든 값(함수, 객체 또는 원시값 포함)이 될 수 있습니다. const contacts = new Map() contacts.set('Jessie', {phone: "213-555-1234", address:..

변수영역 - 가변 : 새로운 데이터 주소로 계속 바뀌기 때문에 가변! 데이터영역 - 불변 : 데이터는 새로운 데이터를 생성하고 새로운 데이터를 변수에 할당하기 때문에 불변! 참조형 데이터 영역 - 가변 : 참조형 데이터 영역또한 데이터의 주소를 가져와 담고 있기 때문에 가변! [문제] 변수의 데이터는 가변이기 때문에 변경이 가능한데, 새로운 변수에 담으면 기존 변수 데이터도 영향을 받게됨 var user = { name: 'wonjang', gender: 'male', }; // 이름을 변경하는 함수, 'changeName'을 정의 var changeName = function (user, newName) { var newUser = user; // * 복사한 후 newUser.name = newName..

ES6 문법 구조분해할당 Map (get / set) let myMap = new Map(); myMap.set('key', 'value') . . . myMap.get('key') //'key'를 통해서 set에 검색할 수 있다. : get과 set은 늘 pair다 => output : value 가 출력 ====================================================== ex) let myMap = new Map(); myMap.set('key', 'value'); // set을 통해서 넣어야함. myMap.set('name', 'john'); myMap.set('age', 30); myMap.set('gender', 'male'); myMap.set('age', 20)..

오늘부터는 javascript 강의 학습하기! 다음주 목요일에 개인 과제가 있을 예정이라 빠르게 완강하는게 좋을듯 하다. javascript 역사 1995년 넷스케이프 커뮤니케이션에서 자바스크립트가 만들어짐! 이름은 LiveScript였으나 마케팅때문에 Javascript로 이름을 바꿧다는.. ㅋㅋㅋㅋ 2005년 AJAX 때문에 전체 페이지 새로고침이아닌 해당영역만 새로고침이 가능해져서 UX 가 엄청 증가됨 2009년도 node.js 등장 fuyll Stack 가능(프론트,백엔드,mongoDB) 절차지향 -> 순서대로 프로그래밍 실행 객체지향 -> 역할을 가지고 있는 객체라는 그룹으로 묶어서 프로그래밍을 수행하는것 (객체 재활용가능) javascript는 객체 지향 언어이다. 역사부터 시작해서 기본 문법..