코드노트

fetch API를 통해서 값을 보내고 받고 하면서 여러개의 요청들을 한번에 실행하려고 했다. 예를 들면 전체선택? 전체해제? foreach를 통해서 요소들을 순회하며 fetch를 사용하니 요소 하나하나 적용되는 이슈가 있었다. ux에 있어서도 좋지 않고 과제 작업을 하면서도 계속 신경이 쓰였다... 그래서 찾은 해결 방법! Promise.all() - 이 메서드는 순회 가능한 객체를 주어진 모든 프로미스가 이행하게 되면 그때 이행한 프로미스를 반환한다. - 여러 프로미스의 결과를 집계할 때 사용 ex) function exPromiseAll() { let arr = [1, 2, 3, 4, 5] arr.forEach(async(i) => { await fetch('url', { method: "PUT" ..

AJAX (Asynchronous JavaScript And XML) 음... 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술? 서버와 통신하기 위해 XML객체를 사용하는 것! 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청 -> 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 * XML (XMLHttpRequest) - 서버와 상호작용을 할 때 사용 - 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다. HTTP요청 메서드는 클라이언트가 서버에 요청의 종류와 목적을 알리는 방법 5가지 요청 메서드 CRUD ( Create(생성), Read(읽기), Update(갱신), Delete(삭제) ) HTTP 요청 메서드 종류 목적 페이로드..

1차 과제였던 클론코딩 후 2차 과제로 영화검색 사이트를 제작했다. 영화 API를 들고와서 구현하는 검색사이트였다. 이번 영화 검색사이트를 제작하면서 비동기에 대해서 많이 배우게 된거 같다. 그리고 Jquery, React, Vue를 사용하지않고 바닐라 자바스크립트로 구현하다보니 자바스크립트에 대해서도 공부를 할 수 있는 계기가 되었다. Vue를 사용해서 영화검색 사이트를 만들었던 경험이 있지만 바닐라 자바스크립트로 구현하는건 또 달랐던거 같다. 1년도 채 되지 않았는데 같은 API를 사용하는데도 사용하는데 힘이 들었다.. 역시 코드를 짜고나면 바로 기억속에서 사라지는거 같다... Movie Search strong-rolypoly-f45a54.netlify.app 코드를 짜고 Readme.md에 정보와..

영화검색 사이트를 만들면서 무한스크롤을 구현하는데 Intersection Observer API를 사용했다. 일반적으로는 addEventListener를 사용해서 구현하지만 문제점이 꽤 많았다. - 스크롤을 할때마다 이벤트가 발생하는 문제점 - 스크롤 이벤트가 무거워질수록 위험하다는 점 등등 여러 문제점들이 있기에 다른방법을 찾다가 Intersection Observer API를 알게 되었다! Movie Search strong-rolypoly-f45a54.netlify.app 위 사이트에서 구현해보았는데 사용법도 어렵지 않고 활용도가 많을 것 같다. 이번에 사용하면서 막히던 부분들이 있었기 때문에 Intersection Observer API에 대해서 정리해보려고 한다. See the Pen Untit..

mac을 사용하는 사람들이라면 자주 만나게 되는 오류... 매번 새로운 디렉토리를 열때마다 VScode에서 이렇게 오류가 나는거 같다. 매일 파일을 지워주고 새로 'Shell Command: Install 'code' command in PATH' 이렇게 검색을 하려니 너무 귀찮아져서 해결방법을 정리하려고 한다.! EACCES: permission denied, unlink 'user/local/bin/code' 이런 메세지가 났을때 해결하는 방법은? cd /usr/local/bin sudo rm -rf code 간단하다. 저 경로로 들어가서 code 파일을 지워주면 끝 설치가 완료되고 원하는 디렉토리에 들어갈 수 있는걸 확인할 수 있다.. 근복적으로 해결하고 싶은데 아직 찾지 못했다.. 우선 에러가 날..

super키워드는 클래스에서 빠질 수 없는 키워드이다. 자바스크립트를 공부하다보면서 느낀건 호출, 참조에 대해서 참 헷갈리게 정리되어있는거 같다.( 나만 이해 못하는거겠지만..) 이 부분만 이해하기 시작하면 어느정도의 동작원리나 코드 명령어의 이해도가 빠르게 높아진다. 객체부터 시작해서 이 사고가 어느정도 진행되는 순간 학습능력이 올라가는거 같다. 클래스를 사용하면서 필요한 super키워드를 빠르게 이해해보자. super - super 키워드는 함수처럼 호출할 수 있다.(constructor 내에서) - this와 같이 식별자처럼 참조할 수 있는 특수한 키워드 * super를 호출하면 수퍼클래스(부모 클래스)의 constructor를 호출 * super를 참조하면 수퍼클래스(부모 클래스)의 메서드를 호출..

function scroll() { const header = document.querySelector("header"); // const maxheight = header.clientHeight; // document.addEventListener("scroll", onScroll, { passive: true }); function onScroll() { const scrollLocation = document.documentElement.scrollTop; const bar = document.querySelector(".scroll_search"); if (maxheight

let t = "3141592"; let p = "271"; 숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요. 예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다. - 문제를 해석하면 쉬운 문제다. 간단하게 말하면! - p의 길이는 3이다. t의 문자를 3개씩 순차적으로 자른다. - 314, 141, 415, 159, 592 - 이 5가지 수를 p=272..

- 메가바이트스쿨에 입과한지 3주차가 되었다. 자바스크립트를 공부하면서 첫달이 가기전에 리액트도 같이 병행하려고했는데 생각보다 시간분배가 어려운거 같다. 첫 목표는 도달하지 못하였지만 그래도 얻은것들이 많은 주였다. 왜냐하면 자바스크립트 공부가 생각한것보다 진행이 잘되고 있다!!!!!..(이해 안되는것도 많음) - 첫주에는 git, github를 배우고 개념부터 시작해서 사용법까지 배웠다...! 생각보다 어려운점은 없었고 손에 안익는다는 느낌...?! add, commit은 이제 그래도 손에 익은거 같다. 브런치, pr, git flow는 아직도 손에 안익지만 현재 진행하고 있는 클론코딩 과제도 github로 하기 때문에 계속 사용하면서 손에 익혀야할거 같다. - TIL을 작성하면서 매주 주차별로 WIL..

클래스 - 클래스는 생성자 함수와 유사하게 동작하지만 몇 가지의 차이를 가지고 있다. - 클래스는 class 키워드를 사용하여 정의 // 클래스 선언문 class Person{} // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; - 클래스는 표현식으로 정의할 수 있다. * 무명의 리터럴로 생성할 수 있고 런타임에 생성 가능 * 변수, 자료구조(객체, 배열) 저장 가능 * 함수의 매개변수에 전달 가능 * 함수의 반환값으로 사용 1. 클래스를 new 연산자 없이 호출하면 에러가 발생 - 생성자 함수를 new 연산자 없이 호출하면 일반 함수로 호출 2. 클래스는 상속을 지원하는 extends와 super 키..