4전 4전

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

최근에 대한민국 철봉 지도라는 프로젝트를 진행하면서 사용자가 지도에 철봉 위치를 등록하면서 주변 사진을 이미지로 업로드하고, 업로드한 이미지를 다른 사용자들이 확인할 수 있는 기능을 구현하였습니다. 이때 저희 서비스 특성상 고화질 이미지를 제공할 필요성이 크지 않고, 거리뷰를 통해 확인할 수 있는 기능을 제공함으로써 서버의 부담을 줄이고, 로딩 속도를 올리기 위해 이미지를 리사이징 하여 용량을 줄이기로 결정하였습니다. | react-image-file-resizer 먼저 이미지를 리사이징 react-image-file-resizer라는 라이브러리를 활용해 보기로 했습니다. https://www.npmjs.com/package/react-image-file-resizer react-image-file-re..

자바스크립트에서 이벤트 위임과 이벤트 버블링은 효율적인 이벤트 핸들링을 위해 사용되는 이벤트 핸들링 패턴입니다. 이번에 각각에 개념을 확인해 보고, 예시를 통해 어떤 식으로 활용되는지 살펴보려 합니다. | 이벤트 버블링(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값 일 때 오른쪽 피연산자의 값을 검사하여 반환합니다. 반대로..

자바스크립트로 프로젝트를 하다가 외부에서 배열 데이터를 가져와서 출력하는 코드를 작성한 적이 있는데 화면에 출력될 때 순서가 보장되지 않는 문제가 발생하였습니다. 발생한 문제의 예시를 한번 들어보겠습니다. 예시로 사용하기 위해 무료 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 결정 화살표 함..

자바스크립트에서 특정값으로 끝나는지 아니면 특정값으로 시작하는지 확인할 수 있는 메서드가 있습니다. | endsWith() endsWidth는 특정값으로 끝나는지 확인할 수 있는 메서드입니다. 1. 문법 endsWidth() 메서드는 매개변수 2가지를 집어넣을 수 있습니다. string.endsWith(searchString, length) 여기서 serchString은 확인하고자 하는 특정 문자열, length는 찾으려고 하는 문자열의 길이입니다. length는 안 넣어도 되고 기본값은 문자열 전체 길이의 값입니다. 2. 사용 console.log("apple".endsWith("e")); // apple이 e로 끝나므로 true console.log("apple".endsWith("l")); // a..