scrollIntoView이 좋은 걸 몰랐다니..요소를 뷰포트 내에 보이도록 자동 스크롤해주는 기능이라고 합니다.. 아래 예시에서는 div 의 아래에 버튼들이 있고인덱스를 state 로 관리하는 상황인데요. 인덱스가 변할 때 마다 useEffect 가 실행되고자동으로 인덱스에 해당하는 버튼이 화면의 중앙에 오게 됩니다. 많이 써먹을 것 같습니다!useEffect(() => { if (scrollRef.current) { const selectedButton = scrollRef.current.children[ selectedIndex ] as HTMLElement; if (selectedButton) { se..
javascript
당겨서 새로고침을 막고싶을 때모바일 버전 개발을 하다보면당겨서 새로고침이 되는 것이 매우 귀찮습니다. 특히 화면내에서 드래그 해야하는 요소들이 있을 때자꾸만 새로고침 되어서 짜증납니다. 그래서 방법을 찾아 보았습니다.역시 방법이 있었고요.. 전에는 div 같은 걸로 감싸서 높이를 제한하고 뭐 어쩌고 했던것 같은데그냥 간단하게 해결하는 방법이 있었습니다. 검색해보면 body 에다가 넣든지 html 에다 넣든지 하라고하는데저는 특정페이지에서만 막고 싶어서아래처럼 해보았습니다. useEffect(() => { document.documentElement.style.overscrollBehavior = 'none'; return () => { document.documentElement...
webp 로 변환이 필요해사용자가 만약 몇십메가짜리 이미지를 넣으면 어떡할 것인가?라는 문제에서 이미지를 webp로 변환하는 로직을 작성해보았습니다. 서버로 파일을 보내면 라우트핸들러에서webp로 변환하고 수파베이스에 저장하는 단순한 방법입니다.클라이언트 에서일단 useState 든 뭐든 File 이 변수에 저장되어 있어야 합니다.const formData = new FormData();formData.append('imageFile', imageFile);const payload: StoryData = formData;mutate(payload); 클라이언트에서는 위처럼 처리합니다.애초에 form 태그를 쓰고 있다면 new FormData(여기에 e.target 넣을것) 요렇게 하면 될 것 같고아니라면..
Lodash의 isEmpty를 사용하지 않고 바닐라 자바스크립트로 객체가 빈 객체인지 확인하는 방법을 정리합니다.방법 1: Object.keys 사용function isEmpty(obj) { return Object.keys(obj).length === 0 && obj.constructor === Object;}const obj = {};console.log(isEmpty(obj)); // trueconst nonEmptyObj = { key: 'value' };console.log(isEmpty(nonEmptyObj)); // false방법 2: for...in 루프 사용function isEmpty(obj) { for (let key in obj) { if (obj.hasOwnProperty..
try...catch 문에서 에러를 던질 때, 두 가지 방법 사이의 차이를 알아보겠습니다에러를 그대로 던지는 경우 (throw error):새로운 에러 객체를 생성하여 던지는 경우 (throw new Error(error.message)):1. throw errortry { // something to try...} catch (error) { console.error("Error fetching data:", error); throw error;}기존 에러 객체: catch 블록에서 잡힌 원래의 에러 객체를 그대로 다시 던집니다.스택 트레이스 보존: 원래의 스택 트레이스가 보존됩니다. 즉, 에러가 처음 발생한 위치와 관련된 디버깅 정보가 유지됩니다.에러 타입 보존: 원래 에러의 타입이 ..
class 프로퍼티 선언방법 두가지방식 1:class Book { constructor( public title: string, public author: string, public publishedDate: Date ) {}}방식 2:class Book { public title: string; public author: string; public publishedDate: Date; constructor( title: string = '타이틀', author: string = '저자', publishedDate: Date = new Date() ) { this.title = t..
createObjectUrl파일을 다룰때, 이미지 파일등의 미리보기를 띄우거나 할 경우에 유용하게 사용할 수 있다고 합니다!이 간단한걸 몰라서 막 base64로 바꾸고 했었습니다 ㅠ.ㅜ사용법은 매우 간단합니다. 그냥 URL.createObjectUrl(file) 입니다.. function handleFileInput(event) { const file = event.target.files[0]; const url = URL.createObjectURL(file); // URL을 사용하여 파일을 미리 보기 document.getElementById('preview').src = url; } // HTML // // 간단하지만 몰랐던 것! 정리..
오늘은 "2024-05-27" 형식의 날짜를 가리키는 문자열을 다루는 법을 정리해보겠습니다.유효성 검사로 2월30일 같은 없는 날짜 등을 걸러내는 방법입니다. 물론 애초에 input의 type 을 date 등으로 처리하면 되겠지만, 이렇게 문자열로 입력받아야 하는 상황에서 어떻게 처리하면 좋을지를 생각해봤습니다. 먼저 입력된 문자열을 Date 객체로 변환하고, 변환된 Date 객체의 값을 원래 입력값과 비교하여 유효한 날짜인지 검사합니다.날짜 유효성 검사 코드const [year, month, day] = dateString.split('-').map(Number);const date = new Date(year, month - 1, day);if ( date.getFullYear() !== yea..
오늘은 리액트를 공부하면서 그동안 왜 그렇게 사용해야 하는지 모르고당연하게 써왔던 방법과 관련하여 그 원리에 대해 알아보았습니다.불변성(Immutability)의 원칙과 순수함수 지향에 대한 내용입니다. 불변성(Immutability)의 원칙리액트에서 상태 관리를 다룰 때 불변성(Immutability)을 유지하는 방식으로 코드를 작성해야 합니다.불변성은 데이터가 생성된 후 수정되지 않고, 변경이 필요한 경우 새로운 데이터를 생성해서 사용하는 원칙을 의미합니다. 리액트에서 불변성을 유지하는 이유는 주로 성능 최적화와 관련이 있습니다.리액트는 상태가 변경될 때 렌더링을 결정하는데, 객체나 배열 같은참조 타입의 데이터는 내용이 변경되어도 참조 주소가 동일할 수 있습니다. 이 경우 리액트는 상태가 변화하지 않..
두번째 팀프로젝트가 어느새 지나가고, 본격적인 리액트 학습 주차에 접어들었습니다. SPA의 원리와 장단점에 대해 공부하다가, Hash Routing 이라는 방법으로바닐라 자바스크립트에서 SPA 처럼 구현할 수 있다는 것을 알게 되었습니다. 리액트는 History API 로 이러한 SPA 를 구현하는 것으로 알고 있는데,Hash Routing 은 처음 보아서, 두 가지 방법을 모두 정리해 보아야겠다고 생각했습니다. Hash Routing해시드 라우팅은 URL의 해시를 사용하여 클라이언트 측에서 페이지의 구역을 로드합니다.URL의 # 부분은 서버로 전송되지 않기 때문에, 이를 활용하여 페이지 리로드 없이 URL을 변경할 수 있습니다.예를 들어, http://example.com/#/page1에서 #/page..
오늘은 이벤트 버블링과 캡처링에 대해 다시 공부하면서,관련 메서드 3가지를 정리해 보았습니다.이벤트 버블링과 캡처링이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트가 발생한 가장 아래(자식) 요소에서 시작하여, DOM 트리를 따라 점점 상위 요소로 전파되는 과정을 말합니다. 예를 들어, HTML 문서에서 버튼(button)을 클릭하면 이벤트는 먼저 해당 button에서 발생하고, 그 후 button의 부모 요소로, 그 다음은 조상 요소로 순차적으로 이벤트가 전파됩니다. Click me!위의 예에서 버튼을 클릭하면, 클릭 이벤트는 먼저 button에서 발생하고, 그 후 div, 그리고 body, html 요소로 차례로 전파됩니다.이벤트 캡처링 (Event Capturing)이벤트 캡처링은..
오늘은 깊은 복사의 구현 방법에 대해 공부하다가, Object.assign 메서드에 대해서도 알게 되었습니다.먼저 Object.assign을 간단히 정리하고, 해당 메서드로도 구현할 수 없는 깊은 복사를재귀함수로 구현하는 방법을 알아보려고 합니다.Object.assignObject.assign 메서드는 소스 객체의 모든 열거 가능한 속성을 타겟 객체에 복사합니다.이 메서드는 타겟 객체를 수정하고, 수정된 타겟 객체를 반환합니다.Object.assign은 주로 객체의 속성을 복사하거나 합치는 데 사용됩니다. 사용법Object.assign 메서드는 첫 번째 인자로 타겟 객체를 받고, 그 뒤에 하나 이상의 소스 객체를 받습니다.소스 객체의 속성은 타겟 객체로 복사되며, 이미 존재하는 속성은 덮어쓰기 됩니다.O..
오늘은 Object.is 에 대해 정리해 보려고 합니다.Object.is의 개념Object.is는 두 값이 같은지를 판별하는 메서드입니다.이 메서드는 === (엄격한 동등 연산자)와 비슷하게 작동하지만, 몇 가지 특별한 경우에서 다르게 동작합니다.Object.is는 다음과 같은 경우에 true를 반환합니다:두 값이 정확히 같은 경우 (예: 같은 객체를 참조하거나, 두 변수가 같은 기본값을 갖는 경우).두 값이 모두 NaN인 경우 (NaN === NaN은 false이지만, Object.is(NaN, NaN)은 true).두 값이 0과 -0인 경우 서로 다르다고 판단 (0 === -0은 true이지만, Object.is(0, -0)은 false).사용법Object.is 메서드는 두 개의 인자를 받으며, 이 ..
벌써 3주차가 지나갔습니다. 이번 주는 팀 과제를 수행하면서 주로 실전적인 개발지식들을 좀 더 쌓을 수 있었습니다. HTMLcollection 과 NodeList, DOMcontentLoaded,js모듈에서의 변수 export import 등 다양한 상황에 필요한 내용들을 익혔습니다. 이번 WIL 에서는 이번주에 새롭게 익힌 내용 중 query parameter 에 대한 내용을 살짝 정리해보려고 합니다.쿼리파라미터는 path가 끝난 후 ? 로 시작하여 & 로 연결되는데, 테스트 중 &가 아닌 ? 로 연결했을 때도 작동하는 경우가 있었습니다.왜 이런 것인지는 잘 모르겠지만 아마도 서버가 관대한 부분이 있어서(?) 였던 것 같습니다. 그래서 이 규칙이 갑자기 헷갈렸었는데, 다시 정리해보면 'https://p..
오늘은 기초적인 내용이지만 헷갈려서 정확히 알지 못했던 변수 사용법에 대해 정리해 보려고 합니다. 상황자바스크립트 모듈 a.js, b.js, data.js 가 있습니다.a.js 와 b.js 는 무언가 기능을 하는 친구고data.js 에는 let fruit = "delicious"; 라는 변수가 export 되었습니다.각 모듈은 html 에서 type="module" 이 적용된 script 입니다. 궁금증은,"a.js 에서 import 한 fruit 변수를 재할당 할 경우 그 변동된 값이 b.js 에서도 반영되는가?"였습니다. 해답자바스크립트 ES6 모듈(commonJS 는 안된다고 합니다)에서 export로 내보낸 변수는,라이브 바인딩(live binding)이 적용되기 때문에, 한 모듈에서 변수의 값을..
오늘은 바닐라 자바스크립트로 코딩할때 으레 사용하게 되는 domContentLoaded 이벤트에 대해 궁금증이 생겼습니다. 처럼 defer 속성을 주거나 의 최하단에 를 적용하거나 하면dom 요소가 모두 로드되고 실행되어서 domContentLoaded 는 사용하지 않아도 되는 줄 알았는데,확실히 보장하려면 사용하는게 좋다는 결론을 얻었습니다. 사용 여부는 script 태그의 속성이 어떤지에 따라 달라질 수 있으므로, 먼저 script 태그의 속성부터 정리해보겠습니다. script - defer- 로딩 시점: 스크립트는 HTML 파싱 동안에 백그라운드에서 다운로드됩니다.- 실행 시점: HTML 문서의 파싱이 완전히 끝난 후, DOMContentLoaded 이벤트가 발생하기 전에 실행됩니다.- 순서 보장:..
오늘은 AbortController 라는 새로운 객체에 대해 알게되어 정리해보려고 합니다. AbortControllerAbortController는 하나 이상의 웹 요청을 취소할 수 있게 해주는 인터페이스 입니다. 기본동작1. 생성AbortController 객체는 생성자를 통해 호출합니다.const controller = new AbortController(); 2. 속성AbortController 객체는 signal 이라는 속성을 가지고 있으며, 이 신호는 여러 요청에 사용될 수 있습니다.const { signal } = controller; 3. 요청 취소signal 을 fetch 의 옵션으로 사용하여 나중에 요청을 취소 할 수 있습니다.fetch(url, { signal }) .then(r..
오늘은 HTMLCollection, NodeList에 대해서 알아보았습니다. querySelectorAll 이나 getElementsByClassName 등으로 dom 유사배열객체를 찾아왔을 경우배열이라고 생각해서 배열메서드를 사용했는데 안되는 경우가 있었습니다. HTMLCollectionHTMLCollection은 getElementsBy~ 와 같은 메서드에 의해 찾아진 유사배열객체입니다.HTMLCollection의 경우 Array.prototype 에 정의된 메서드들을 바로 쓸 수 없습니다.사용하려면 간단히 배열로 변환해서 쓰면 됩니다.//Array.from 사용하기let collection = document.getElementsByClassName('some-class');let elementsA..
오늘은 자바스크립트의 비동기와 관련된 이벤트 루프와 태스크 큐에 대해 공부했습니다.자바스크립트는 싱글스레드 언어인 것으로 알고 있는데, 태스크 큐는 또 다른 스레드를 쓴다고 합니다.그렇다면 사실 멀티스레드인 걸까요? 그리고 태스크 큐는 비동기 함수나 콜백을 실행할 때만 사용되는 것인가요?자바스크립트의 싱글 스레드 동작자바스크립트 엔진은 싱글 스레드로 동작합니다. 즉, 한 번에 하나의 태스크만 실행할 수 있습니다. 하지만 자바스크립트 환경(주로 브라우저나 Node.js)은 싱글 스레드인 자바스크립트 엔진 외에도 여러 개의 백그라운드 스레드를 사용하여 비동기 작업을 처리할 수 있게 해줍니다.이벤트 루프와 태스크 큐이벤트 루프는 자바스크립트가 멀티 스레드 같이 동작할 수 있게 하는 메커니즘입니다. 이벤트 루프..
이번 주는 개인학습 주차였습니다.그동안 안다고 생각했지만 다시 생각해보니 정확히 모르고있었던실행컨텍스트, this바인딩, 클로저 등의 개념에 대해 공부하였고, 이해할 수 있었습니다.이번 주차에 공부한 내용을 정리해보려고 합니다.실행 컨텍스트JavaScript에서 "실행 컨텍스트(Execution Context)"는 코드가 실행되기 위한 환경이나 상태를 말합니다. 실행 컨텍스트는 JavaScript 엔진이 코드를 실행할 때 관련 정보를 담고 있는 내부 데이터 구조입니다. 실행 컨텍스트에는 변수, 객체, 함수 호출 등 코드의 실행에 필요한 모든 정보가 포함되어 있습니다.실행 컨텍스트의 구성 요소실행 컨텍스트는 크게 세 가지 주요 구성 요소를 가지고 있습니다:변수 환경(Variable Environment):..
드디어 제가 클로저에 대해 조금 이해한 것 같습니다..! 그동안 여러번 공부했지만 이해하지 못했던 것 같은데이제야 드디어 약간(?) 알겠어서 정리해봅니다.공식 정의(?)가 아닌 제가 이해한 바를 정리해보려고 합니다. 클로저란?상태를 안전하게 변경하고 유지하기 위해(은닉화) 사용하는 JS의 기능으로중첩된 함수에서, 외부함수의 생명주기가 종료했음에도 여전히 상태가 참조되고 있는 것! 일반적인 상황// 함수가 호출될때다 증가해야하는 상태변수let num = 0;// 상태 변경 함수const increase = () => { return ++num}console.log(increase()); // 1// 만약 여기서 num = 100; // 이런식으로 변경해버리면console.log(increase());..
다음과 같은 this 바인딩에 대해 생각해볼 수 있는 코드를 실행해보는 과정에서 예상하지 못한 동작이 발생했습니다. var fullname = 'Ciryl Gane'var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function () { return this.fullname; } }, getName: function() { return this.fullname; }, getFirstName: () => { return this.fullname.split(' ')[0]; ..
오늘은 바닐라 자바스크립트로 DOM에 요소를 추가하는 상황에서documentFragment 객체에 대해 알게 되었습니다.react를 사용하면 볼 일이 많이 없을 수도 있지만 새로운 개념을 알게되어 정리합니다! Document Fragment 의 정의DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는, 가상 메모리에 존재하는 DOM 노드 객체입니다. DocumentFragment 노드를 사용하면 메인 DOM 트리 외부에 경량화된 DOM을 만들 수 있어 브라우저 repaint 영향 없이 메모리에서 DOM 조작이 가능합니다. 용도와 효과-메인 DOM의 조작(manipulation)이 필요할때 페이지 reflow 등 성능적 영향을 최소한으로 줄이기 위해 사용합니다.-Document Fr..
오늘은 화살표함수와 일반함수에서의 this 바인딩이 너무 헷갈려서 다시 공부했습니다.안녕하세요! 자바스크립트에서 일반 함수와 화살표 함수의 this 바인딩 차이를 이해하는 것은 중요한 부분입니다. 두 함수 유형의 this 바인딩 방식의 차이는 다음과 같습니다:1. 일반 함수일반 함수에서 this의 값은 함수가 호출되는 방식에 따라 결정됩니다. 즉, 누가 함수를 호출하느냐에 따라 this가 결정됩니다. 다음은 몇 가지 일반적인 경우입니다:객체의 메소드로 호출될 때: this는 메소드를 호출한 객체를 가리킵니다.단독 함수로 호출될 때: 엄격 모드(strict mode)에서는 this가 undefined가 되고, 비엄격 모드(non-strict mode)에서는 this가 전역 객체(global object)를..
네, ES6 이전의 JavaScript에서는 주로 함수를 사용하여 클래스와 비슷한 구조를 만들곤 했습니다. 이러한 방식은 주로 생성자 함수와 프로토타입을 이용하여 객체 지향 프로그래밍을 구현합니다. 이러한 패턴을 '프로토타입 기반 상속'이라고 합니다. 생성자 함수 사용 예제 생성자 함수를 사용하여 클래스와 유사하게 객체를 생성하고 메서드를 정의할 수 있습니다. 아래는 생성자 함수와 프로토타입을 이용한 예제입니다. function Person(name, age) { this.name = name; this.age = age; } Person.prototype.greet = function() { console.log(`Hello, my name is ${this.name} and I am $..
...[1, 2, 3]은 이터러블인 배열을 펼쳐서 요소들을 개별적인 값들의 목록 1, 2, 3 으로 만든다. 이때 1 2 3은 값이 아니라 값들의 목록이다. 즉, 스프레드 문법의 결과는 값이 아니다. 이는 스프레드 문법 ... 이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 의미한다. 따라서 스프레드 문법의 결과는 변수에 할당 할 수 없다. // 스프레드 문법의 결과는 값이 아니다. const list = ...[1, 2, 3]; 이처럼 스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 *주의 스프레드 문법은 앞에서 살펴본 Rest 파라미터와 형..
push 인수로 전달받은 모든 값을 원본 배열의 마지막에 추가하고 변경된 length 값을 반환 > 원본 배열 변경 > 성능x, 다음 두가지 방법을 쓰는게 좋음 const arr = [1, 2]; // push 와 동일 arr[arr.length] = 3; // 스프레드 문법으로 원본 안건드리고 const newarr = [...arr, 3]; pop 원본배열에서 마지막 요소를 제거하고 제거한 요소를 반환 > 원본 배열 변경 unshift 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 반환 > 원본 배열 변경 shift 원본배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. > 원본 배열 변경 concat 인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마..
클로저란? const x = 1; function outer() { const x = 10; const inner = function () { console.log(x); } return inner; } // outer 함수를 호출하면 중첩함수 inner 를 반환한다. // 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트는 스택에서 팝되어 제거된다. const innerFunc = outer(); innerFunc(); 위 코드를 실행하면 콘솔에 10이 찍힌다. 이미 생명주기가 종료되어 실행 컨텍스트 스택에서 제거된 outer 함수의 지역변수 x 가 다시 부활이라도 한듯이 동작한다. 이처럼 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참..
// this 는 어디서든지 참조 가능하다 // 전역에서 this 는 전역 객체 window 를 가리킨다 console.log(this); // window function square(number){ // 일반 함수 내부에서 this 는 전역객체 window를 가리킨다. console.log(this) // window; return number * number; } square(2); // 전역 함수는 물론이고 중첩함수를 일반 함수로 호출하면 // 내부의 this에는 전역 객체가 바인딩된다. // 다만 this 는 객체의 프로퍼티나 메서드를 참조하기 위한 자기참조 변수이므로 // 객체를 생성하지 않는 일반 함수에서 this 는 의미가 없다. // strict 모드에서는 undefined가 바인딩된다...
함수의 매개변수는 적을수록 좋다. 매개변수가 많다는 것은 함수가 여러가지 일을 한다는 증거이므로 바람직하지 않다. 이상적인 함수는 한가지 일만 해야 하며 가급적 작게 만들어야 한다. 따라서 매개변수는 최대 3개 이상을 넘지 않는 것을 권장한다. 만약 그 이상의 매개변수가 필요하다면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리하다. 모던자바스크립트 딥다이브 - 172p 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워진다. 따라서 함수 외부 상태의 변경을 지양하는 순수 함수를 사용하는 것이 좋다. 비순수 함수는 코드의 복잡성을 증가시킨다. 비순수 함수를 최대한 줄이는 것은 부수 효과를 억제하는 것과 같다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는..