욕설(비속어) 필터링 기능 개선 (Aho-Corasick 알고리즘) 사이드 프로젝트를 만들었는데 뭔가 허전함을 느꼈다 문득 생각난게 게임처럼 비속어 필터링 기능을 넣으면 어떨까? 라는 생각이 문득 들었다. import { badWords } from "@/constants/badwords"; // 욕설 모음 zip...export default function badWordsFilter(text: string) { let filteredText = text; badWords.forEach((badWord) => { let index = filteredText.toLowerCase().indexOf(badWord.toLowerCase()); while (index !== -1) { ..

Next.js server action을 공부하면서 요소의 action속성은 기본 FormData(캡처된 데이터가 포함된 개체)를 자동으로 수신한다는 것을 알았다.그리고 이 FormData를 어떤식으로 사용하는지에 대해서 공부하면서 처음보는 Object.fromEntries()를 보게 되어 기록하고자한다. FormData를 사용하려면 기본적으로 아래와 같이 사용한다.'use server';// 데이터 추출하기export async function createInvoice(formData: FormData) { const rawFormData = { customerId: formData.get('customerId'), amount: formData.get('amount'), statu..

Call Stack, Task Queue, Event Loop  JavaScript 언어를 공부하던 중 비동기 처리 방식을 이해하기 위해서는 Call Stack, Task Queue, Event Loop의 개념을 알아야 한다는 것에서부터 흥미를 느껴 공부한 내용을 기록해보려고 한다. 작성 순서1. Call Stack, Task Queue, Event Loop 란?2. Call Stack, Task Queue, Event Loop 이해하기 위한 나만의 설명 + 사진   그럼 이제 자바스크립트에서 함수를 호출할 때 보이지 않는 곳에서 무슨 일이 일어나는지에 대해서 살펴보자. 1. Call Stack, Task Queue, Event Loop 란?콜 스택(Call Stack)모든 프로그래밍 언어에는 보이지 않..

setTimeout, setInterval, clearInterval 이란?   css 애니메이션 강의를 들으면서 setInterval을 처음 보게되어 찾아보고 공부한 내용을 내 방식대로 쉽게 작성해서 공유하려고 작성한다. 1. setTimeout기본 형태: setTimeout(Fn, delay)setTimeout 메서드는 일정시간 후에 함수를 실행시켜주는 메서드 입니다.ex)setTimeout(()=>{console.log("hi")}, 1000); // 1초후에 console에 hi 출력됨 2. setInterval기본 형태: setInterval(Fn, delay)setInterval 메서드는 일정시간마다 계속해서 함수를 실행시켜주는 메서드 입니다.ex)setInterval(()=>{console...

JavaScript: padStart(), padEnd()   ❗️기본 문법str.padStart(targetLength[, padString])str : 문자열targetLength : 목표로 하는 문자열 길이를 적음, 이 길이에 맞게 문자열이 채워질 수 있음padString(옵션) : 필요한 경우 채우기에 사용할 문자열임, 기본값은 공백 문자열(' ')이다.  ❗️padStart() padStart 함수는 문자열의 앞부분을 특정 길이로 채우는 역할을 함 예시코드const str = "123";const paddedStr1 = str.padStart(7, "0");console.log(paddedStr1); // 출력 : "0000123"const paddedStr2 = str.padStart(10)..

JavaScript: 논리 연산자 정리    & : 비트 연산자비트의 논리 합을 하는 연산자 && :  논리곱 연산자&&는 모든 조건이 참이여야 true  || :  논리합 연산자||는 둘중 하나가 참이면 true  >  : 비트 이동 연산자왼쪽, 오른쪽으로 비트를 밀어내는 연산자  !   , !!  : 부정 연산자! :  입력값을  boolean으로 변환하는데, true이면 false로 , false이면 true로 값을 반대로 반환한다.!! : boolean타입으로 명시적으로 형 변환   ?. : 옵셔널 체이닝객체의 속성이 없는 경우, typeError가 발생하지 않고 undefined가 반환됨  ?? : Null 병합 연산자앞에 오는 값이 null 또는 undefined이면 뒤에오는 값을, 아니면 n..

URL.createObjectURL, URL.revokeObjectURL    사용자가 업로드한 파일을 미리보기하거나, 서버에서 받은 데이터를 로컬에서 처리할 때 유용한 두 가지 메서드 URL.createObjectURL, URL.revokeObjectURL에 대해 설명하겠습니다! ❗️URL.createObjectURLURL.createObjectURL 메서드는 File, Blob, MediaSource 객체를 가리키는 임시 URL을 생성합니다.이 URL을 통해 해당 객체에 쉽게 접근할 수 있으며, 웹 애플리케이션에서 이미지, 동영상, 오디오 등의 미디어 파일을 미리보기할 때 유용하게 사용할 수 있습니다. 예제// 파일 입력 요소에서 파일을 선택할 때const fileInput = document.que..

점 표기법(정적속성) vs 대괄호 표기법(동적속성)    ❗️상황 공부를 하면서 문득 이렇게 작성한 코드를 보고 점 표기법으로 작성을 안하는 이유가 뭐지 하고 의문이 들었다.export default function App() { const [order, setOrder] = useState("createdAt"); const sortedItems = items.sort((a, b) => b[order] - a[order]); /.../ } ❗️공부하고 깨달은 점 점 표기법으로 접근하려면 속성 이름이 고정된 경우에만 사용할 수 있습니다.예를 들어, b.order와 같이 접근하는 경우에는 order가 객체의 정적 속성이어야 합니다. 그런데 지금 코드는 order값이 상태 값으로 동적으로 설정되어..

e.target 속성들    ❗️e.target은 이벤트가 발생한 요소를 나타내는 객체다!이벤트의 종류에 따라 e.target 객체의 속성은 다를 수 있지만, 일반적으로 다음과 같은 속성들이 포함될 수 있습니다:nodeName: 요소의 태그 이름을 나타냅니다.nodeType: 요소의 노드 유형을 나타냅니다.tagName: 요소의 태그 이름을 나타냅니다.value: 입력 요소에서 사용자가 입력한 값(텍스트, 체크 상태, 선택된 옵션 등)을 나타냅니다.name: 입력 요소의 이름을 나타냅니다.type: 입력 요소의 타입을 나타냅니다.checked: 체크 박스나 라디오 버튼의 체크 상태를 나타냅니다.selected: 선택된 옵션 요소인지 여부를 나타냅니다(선택 상태인 경우 true).id: 요소의 고유 식별자..