neda의 블로그

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)로 동작하므로 한 번에 하나의 동작만 수행할 수 있다. 자바스크립트의 일반적인 코드는 동기적으로 동..

230524 동기와 비동기 동기적 실행 자바스크립트 문법반 4주차에서는 콜백함수와 관련해 동기와 비동기에 대해 배웠다. 대표적인 비동기 함수로 타이머 역할을 하는 setTimeout()과 setInterval()이 있었다. 일반적인 자바스크립트 코드는 동기적 실행이다. 동기적이라는 말은 코드의 한줄을 작업이 완료하길 기다렸다가 완료되면 다음줄을 실행한다. 반복문 안에서는 왜? 하지만 반복문 안에서 반복마다 html element를 변경하도록 코드를 짠 경우 for (let i = 0; i < n; i++) { document.getElementById("display").value = i; } 반복문이 다 끝난 후에 바뀐다는 것이다. 단순하게 생각하면 각 반복마다 html element가 바뀌어야 할 것..

230523 자바스크립트 메모리 할당 자바스크립트 문법반을 공부하면서 메모리 할당에 대해 배웠다. 원시값은 변경할 수 없고(불변성을 가짐), 복제할 때는 값이 담긴 주소값을 복제한다. 참조값은 변경이 가능하고, 복제할 때는 값이 담긴 주소값들을 묶음으로 가지고 있어 그 묶음에 대한 주소값을 복제한다. 객체에 대한 메모리 살펴보기 실제로 이런지 알아보기 위해 개발자 도구를 통해 메모리를 살펴 보았다. 실제 메모리 주소는 아니다. 과정은 아래와 같다. 처음에 name, age 프로퍼티를 가지는 객체를 전역 객체로 생성한다 name 값만 변경해 본다. age 값만 변경해 본다. 객체 아예 다른 객체로 변경해 본다. 1. 생성 후 2. name 변경 후 3. age 변경 후 4. 새로운 객체로 객체를 변경 후 ..