neda의 블로그

WIL Facts 내일배움캠프가 개강하고 개인 과제를 진행했다. 프로그래머스 0레벨 자바스크립트 문제를 풀었다. Feelings 저번 팀과제보다 난이도가 낮아 혼자하기 수월했다. 0레벨 문제인데도 난이도가 높은 몇 문제가 있었다. Findings 자바스크립트 문제를 풀기 위한 기초와 DOM 조작에 익숙해졌다. innerHTML = '' 구문은 가독성은 좋지만, DOM을 조작할 수 없고 이벤트 등록이 안되니 여러 가지로 불편한 점이 있다. Future 자바스크립트 문제 1레벨을 도전해봐야 겠다.

230603 TMDB 영화 관련 영상 유튜브 iframe 모달 만들기 TMDB에서 영화 정보와 해당 영화의 관련 영상을 가져오고, iframe으로 모달을 띄우기 TMDB에서 해당 영화의 비디오 목록 가져오기 유튜브에서 비디오 정보 가져오기 동영상 정보에서 썸네일 정보 찾기 IFrame Player API로 유튜브 플레이어 띄우기 1. 영화 상세 페이지의 url에서 query string으로 영화 id값 가져오기 function searchParam(key) { return new URLSearchParams(location.search).get(key); } searchParam('id') 2. TMDB에서 해당 영화의 비디오 목록 가져오기 TMDB에서 Id값으로 해당 영화의 관련 비디오 목록 가져오기 ..

230602 타입스크립트 사용해보기 자유롭게 형 변환이 가능한 자바스크립트는 복잡한 코드 속에서 예기치 못한 오류를 발생시킬 수 있다. 타입스크립트는 컴파일 시점에서 미리 타입 에러를 확인함으로써 에러를 줄일 수 있다. 타입스크립트 단일 타입 정의 [type 변수명 = 타입] 을 통해 변수에 단일 타입을 지정할 수 있다. | 를 사용하여 여러 값 또는 타입을 OR 처럼 가질 수도 있다. type 변수 = 타입 type Name = string; type Email = string; type Room = number; type Address = string; type ContactInformation = string; type DateOfBirth = string; type Grade = 1 | 2 | 3..

230601 자바스크립트 인라인 자바스크립트를 사용하다보면 코드가 길어지고, 한 번에 원하는 코드를 찾기 힘들어진다. 이럴 때 사용할 수 있는 가장 간단한 방법은 코드를 여러 파일로 쪼개는 것이다. 코드 또는 함수를 여러 파일로 분리하면 서로 다른 js 파일 간에 불러와서 사용해야 할 경우가 생긴다. 이럴 때는 import와 export를 사용해 가져오고 내보낼 수 있는데, 이 구문을 사용할 때는 에 type을 'module'로 지정해야 한다. 모듈의 차이점 모듈은 항상 strict mode를 사용해 실행된다. 엄격 모드를 통해 기존에 뜨지 않던 에러가 발생할 수도 있다. 에러로 잡히지 않던 잘못된 실수를 찾을 수 있다. 기존에는 조용히 무시되던 에러들을 throwing합니다. JavaScript 엔진의..

230531 자바스크립트 알고리즘 문제 해결을 위한 방법 1. 앞의 대상이 null이나 undefined일 때 undefined 반환 obj?.value 2. 앞의 대상이 null이나 undefined일 때 오른쪽 연산자 사용 obj ?? '없습니다' 3. 나눗셈 몫과 나머지 구하기 Math.floor(num1/num2) num1%num2 4. 문자열을 리스트로 str.split('') 5. 리스트를 문자열로 arr.join('') 6. 길이가 같은 두 배열의 공통 원소 개수 arr1.filter(x=> arr2.includes(x)).length 7. 배열 모든 원소의 합과 곱 arr1.reduce((a,c)=>a+c) arr1.reduce((a,c)=>a*c) 8. 배열에서 최대값 찾기 array.r..

230530 Intersection Observer 간단한 무한 스크롤 Intersection Observer API를 이용한 간단한 무한스크롤 만들기 Intersection Observer 생성하기 callback과 options를 인자로 생성자를 사용해 생성한다. Intersection Observer는 등록한 요소를 관찰하고 지정한 임계값 이상 화면에 노출되면 callback을 호출한다. let observer = new IntersectionObserver(callback, options); callback 함수는 entries와 observer를 받는다. options는 관찰하는 요소의 부모 요소 또는 null을 지정하고 rootMargin은 root 요소로 부터 밖으로 공간을 넓히거나 마이너스..

230529 data 값으로 배경 이미지 설정하기 일반적으로 이미지를 표시하기 위해서 를 사용하지만, 배경이미지와 같이 드래그가 되지않고 뒷면에 표시되는 이미지는 css 속성인 background-image 속성을 이용한다. 가장 정석적인 방법은 자바스크립트로 요소에 직접 스타일을 주는 것이지만, 문자열 템플릿을 사용하여 요소를 추가할 때는 사용할 수 없는 방법이다. 따라서 문자열 템플릿에서도 배경이미지를 사용할 수 있도록 하는 방법이 필요하다. 자바스크립트로 배경 이미지 넣기 const div = document.createElement("div"); div.classList.add("bg"); div.style.backgroundImage = 'url("https://placehold.co/600x4..

WIL Facts 내일배움캠프가 개강하고 두 번째 주를 보냈다. 자바스크립트 문법반 강의를 제공받아 문법에 대해 복습을 했다. 동기함수 사용 중 리렌더링이 되지 않았다. Feelings 자바스크립트의 값이 매번 새로 할당 된다는 말이 이해가 어려웠다. for문을 반복하는 동안 리렌더링이 되지 않아 답답했다. Findings 자바스크립트의 메모리에 대해 개발자 도구를 통해 확인했고 새로운 메모리 주소로 매번 바뀌는 것을 확인했다. 자바스크립트가 돌아가는 구조 공부를 통해 리렌더링은 콜스택이 비어 있을 때만 진행된다는 점도 알 수 있었다. Future 앞으로 원시값과 참조값을 구분해 복사할 때 깊은 복사를 사용하도록 조심해야 겠다. 비동기함수인 setTimeout(,0)를 왜 사용하는지 알 것 같았다. 코드..

230526 자바스크립트 클래스 클래스는 많은 프로그래밍 언어에서 기본적으로 제공하는 기능이다. 클래스는 공통 속성을 같은 객체를 여러 개 생성 할 때 생성하기 편하도록 일종의 템플릿을 만들어 놓은 것이다. 자바스크립트는 이와 비슷한 Prototype이라는 객체 상속 개념이 있었고 클래스라는 기능은 없었다. 그러다 ES6 (2015)에서 class 기능이 추가되었다. 내부적으로는 Prototype과 비슷하게 동작한다고 해서 Syntactic sugar라고도 한다. 클래스 만들기 클래스는 class를 통해 만들어지며, new 연산자를 통해 클래스를 호출하면 constructor()에 의해 초기화를 수행하고 인스턴스를 반환한다. class NewClass { constructor(){ //클래스 초기화 } ..

230525 자바스크립트 이벤트 루프 자바스크립트 문법반 4주차를 들으면서 동기와 비동기에 대해서 공부를 했는데 3주차에 들었던 콜스택만으로는 비동기 작업에 대해 이해할 수 없었다. 콜스택은 차례대로 들어오고 마지막으로 들어온 것부터 다시 나가는 녀석인데, 비동기라는 말과도 어울리지 않고, 콜스택에 비동기 함수가 들어오면 따로 갈 곳이 없다. 그래서 동기와 비동기를 이해하기 위해서는 콜 스택과 함께 태스크 큐를 알아 볼 필요가 있다. 콜스택에 대한 이해 콜스택 자바스크립트에는 후입선출 구조를 가지는 콜 스택(call stack)이라는 저장소가 있다. 또한 자바스크립트는 싱글 스레드(single thread)로 동작하므로 한 번에 하나의 동작만 수행할 수 있다. 자바스크립트의 일반적인 코드는 동기적으로 동..