4전 4전

무한 스크롤은 사용자가 페이지를 스크롤할 때 콘텐츠를 동적으로 로드하는 기법입니다.무한 스크롤을 구현하는 방식은 몇 가지가 있는데 그중 몇 가지 방법을 사용해 보고,어떤 방식이 가장 좋은지 확인해 보려 합니다.| json-sever해당 글에서 기본적으로 예시 코드를 구현할 때 json-server라이브러리를 사용하여 구현하였습니다.https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node..

프론트엔드 개발을 진행하다 보면 사용자가 데스크톱으로 접속했는지, 모바일 기기로 접속했는지,어떤 브라우저를 사용해서 접속했는지 등을 확인하고 이에 따라 다른 UI를 제공해야 하는 경우가 있습니다. 이때 웹 브라우저의 User Agent를 활용하여 이를 알 수 있습니다.| User Agent User Agent는 사용자가 웹사이트에 접속할 때 브라우저가 서버로 보내는 문자열입니다. 이 문자열에는 브라우저의 정보, 운영 체제, 기기 정보 등이 포함되어 있어 이를 파싱 하면 사용자의 접속 환경을 알 수 있습니다. 자바스크립트에서는 브라우저의 navigator객체를 통하여해당 문자열을 확인할 수 있습니다.console.log(navigator.userAgen);또한 기기나 브라우저로 출력되는 User Agent..

자바스크립트에서 이벤트 위임과 이벤트 버블링은 효율적인 이벤트 핸들링을 위해 사용되는 이벤트 핸들링 패턴입니다. 이번에 각각에 개념을 확인해 보고, 예시를 통해 어떤 식으로 활용되는지 살펴보려 합니다. | 이벤트 버블링(Event Bubbling) 이벤트 버블링은 DOM요소에서 이벤트가 발생했을 때, 해당 이벤트가 부모 요소로 전파되는 것을 말합니다. 아래 코드를 보면 버튼을 클릭하면 "자식 요소 클릭", "부모 요소 클릭"이 동시에 출력이 됩니다. 클릭 document.getElementById('parent').addEventListener('click', () => { console.log('부모 요소 클릭'); }); document.getElementById('child').addEventLis..

단축평가란 표현식을 평가하다가 결과가 확정되면 나머지 과정을 진행하지 않고 결과를 반환하는 것을 말합니다. 이를 통해 자바스크립트에서 평가를 최소화하고, 조건부 로직을 간결하게 작성할 수 있습니다. | OR (||) OR연산자는 왼쪽 피연산자가 falsy값 일 때 오른쪽 피연산자의 값을 반환합니다. 반대로 왼쪽 피연산자가 truthy값이면 왼쪽 값을 그대로 반환합니다. let name = null; let user = name || "yi"; console.log(user); // yi 출력 이처럼 name이 null이므로 falsy값이기 때문에 "yi"라는 오른쪽 값을 반환합니다. | AND (&&) AND연산자는 왼쪽 피연산자가 truthy값 일 때 오른쪽 피연산자의 값을 검사하여 반환합니다. 반대로..

타입스크립트에서 함수에 타입지정을 해서 사용할 수 있습니다. | 타입지정 먼저 아래처럼 간단한 함수가 있다고 해보겠습니다. function 함수(x){ return x * 5; } 함수(2) // 10 이런 함수에는 파라미터와 리턴 값에 타입 지정을 해줄 수 있는데 아래 코드처럼 타입을 지정해 주면 됩니다. function 함수(x :number) :number{ return x * 5; } 함수(2) // 10 이때 파라미터 타입 지정은 파라미터 옆에 적으면 되고, 리턴값의 타입 지정은 함수명() 오른쪽에 적으면 됩니다. 또한 함수를 만들 때 리턴값이 없는 함수를 만들 수 있는데 이럴 때 void라는 타입을 사용할 수 있습니다. // 리턴값이 없을 때 void타입 function 함수(x :number..

자바스크립트로 프로젝트를 하다가 외부에서 배열 데이터를 가져와서 출력하는 코드를 작성한 적이 있는데 화면에 출력될 때 순서가 보장되지 않는 문제가 발생하였습니다. 발생한 문제의 예시를 한번 들어보겠습니다. 예시로 사용하기 위해 무료 open API로 숫자에 대한 흥미로운 지식을 알려주는 Numbers API라는 걸 사용해 보겠습니다. http://numbersapi.com/ Numbers API NumbersAPI An API for interesting facts about numbers Bring meaning to your metrics and stories to your dates An API for interesting facts about numbers Bring your metrics and..

자바스크립트에서 좀 어렵다고 생각하는 개념 중 클로저라는 것에 대해 알아보려 합니다. 그나마 쉽게 말하면 코드에서 함수가 선언될 때 그 유효범위(렉시컬 범위)를 기억하고 있다가, 함수가 외부에서 호출될 때 그 유효범위의 특정한 변수를 참조할 수 있는 개념이라고 합니다. | 예시 function count() { let a = 0; return function () { return a+= 1; } } const count1 = count(); console.log(count1()); // 1 console.log(count1()); // 2 console.log(count1()); // 3 이처럼 함수가 외부에서 호출되면 그 변수를 참조하여 값을 증가시킵니다. 또한 다른 변수로 또 호출하면 변수에 있는 값..

자바스크립트에 화살표 함수와 일반 함수에 몇 가지 차이가 있다고 하는데 한번 알아보겠습니다. 1. this | 일반함수 함수를 호출할 때 this 결정 일반적으로 함수를 실행하면 전역 객체인 window를 가리킴 객체의 메서드로 함수를 실행하면 해당 메서드를 소유한 객체를 가리킴 생성자로 실행하면 생성자로 만들어진 객체를 가리킴 function func() { console.log(this); } const object = { name: "Yi", func1: func, }; func(); // 전역객체 window object.func1(); // 해당 object객체 const nFunc = new func(); // 생성된 객체인 nFunc | 화살표 함수 함수를 선언할 때 this 결정 화살표 함..