미치 프로젝트 피그마에 올라온 디자인이다.안내 문구를 보면 닉네임 중복 검사 기능이 있다는 걸 알 수 있다. 그런데 중복 검사하는 버튼은? 없다.요즘엔 이렇게 중복 검사, 검색 등 입력하는 값에 따라 즉각 반응하는 UI가 많다(특히 모바일). 그런데 이렇게 하면 언제 사용자가 입력을 끝낼지 모른다!그래서 input 값이 바뀔 때(사용자가 키보드를 누를 때)마다 이벤트 핸들러가 실행되도록 해야 하는데, 그러면 쓸모없는 API 요청이 너무 많이 생기고 서버엔 과부하가 걸릴 수도 있다. 성능, 비용적인 측면에서도 좋지 않은 방법이다. 디바운싱(Debouncing)이걸 해결할 수 있는 방법은 "디바운싱(Debouncing)"을 사용하는 것이다.✨ 디바운싱이란,연이어 호출되는 함수들 중 마지막(또는 처음) 함..
프로젝트 중 카드 오른쪽 위 케밥 아이콘을 누르면 메뉴가 보이는 기능을 넣어야 했다.그런데 문제. 카드를 누르면 해당 글 상세 페이지로 넘어가게 되어 있는데 아이콘을 눌러도 페이지가 넘어가는 일이 발생했다.대충 이벤트 전파 관련인줄은 알았지만, 정확히 모르고 있어서 이번 기회를 통해 공부했음 이벤트 전파DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파라고 한다.표준 DOM 이벤트에서 정의한 이벤트 흐름엔 다음 3가지 단계가 있다.1. 캡처링 단계: 이벤트가 하위 요소로 전파2. 타깃 단계: 이벤트가 실제 타깃 요소에 도달3. 버블링 단계: 이벤트가 상위 요소로 전파 보통 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타겟 단계와 버블링 단계의 이벤트만 실행된다..
트러블슈팅 : MuiOutlinedInputInput contains an input of type text with both value and defaultValue props. DOK 프로젝트를 진행하면서 MUI를 사용하였는데, 아무래도 처음 쓰다보니 예시 코드를 가져와서 값을 변경하는 방식을 많이 사용하였다.그러다보면 가끔 위와 같은 에러가 떴다.대충 text 타입의 input에서 controlled와 uncontrolled가 같이 사용되고 있다는 말인 것 같은데 controlled와 uncontrolled는 처음 들어봐서 찾아보니 그동안 react에서 뭔가 께름직 했던 input 사용 방식과 연관이 있었다. Controlled & Uncontrolled우선 Form 요소에는 input, text..
🏷️JavaScript 퀵 정렬 분할 정복 알고리즘의 하나 분할 정복이란 문제를 작은 2개의 문제로 분리하고 각각을 해결한 다음, 결과를 모아서 원래의 문제를 해결하는 전략이다. 피벗이라는 기준 값을 잡아서 두 개의 비균등한 크기로 분할하고 분할된 부분 리스트를 정렬한 다음, 두 개의 정렬된 부분 리스트를 합쳐서 전체가 정렬하게 되는 방법. 방법 퀵 정렬은 다음의 단계들로 이루어진다. 분할(Divide): 입력 배열을 피벗을 기준으로 비균등하게 2개의 부분 배열(피벗을 중심으로 왼쪽: 피벗보다 작은 요소들, 오른쪽: 피벗보다 큰 요소들)로 분할한다. 정복(Conquer): 부분 배열을 정렬한다. 부분 배열의 크기가 충분히 작지 않으면 순환 호출(재귀)을 이용하여 다시 분할 정복 방법을 적용한다. 결합(C..
🏷️JavaScript 선택정렬 가장 작은 것을 선택해서 제일 앞으로 보내는 것을 반복하는 알고리즘 가장 기초적이고 원시적이다. 방법 첫 인덱스부터 마지막 인덱스까지 반복문을 돌린다. 원소들 중 제일 작은 원소를 찾는다. 현재 인덱스의 원소와 제일 작은 원소의 자리를 바꾼다. ⇒ 바꿀 때는 스와핑 정렬이 완료되었으므로 다음 인덱스로 넘어간다. 시간복잡도 O(N*N) ⇒ 매우 비효율적이다. 버블정렬 옆에 있는 값과 비교하여 더 작은 숫자를 앞으로 보내주는 것을 반복하는 알고리즘 가장 비효율적인 알고리즘이다. 방법 첫 인덱스부터 반복문을 돌린다. 현재 인덱스의 원소와 오른쪽 원소의 값을 비교하여 현재 원소가 더 크면 자리를 바꾼다. 인덱스를 하나씩 증가시키며 위 과정을 반복한다. 마지막 인덱스는 가장 큰 원..
🌐인터프리터 언어 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 *바이트코드로 변환한 후 실행한다. * 바이트코드 : 특정한 하드웨어가 아니라 가상 머신에서 실행하도록 만든 바이너리 코드 🌐컴파일러 언어 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한 번에 *머신코드로 변환한 후 실행한다. * 머신코드 : CPU가 바로 실행할 수 있는 기계어 자바스크립트는 컴파일 언어인가? 인터프리터 언어인가? 자바스크립트는 인터프리터 언어다. 따라서 개발자가 별도의 컴파일 작업을 수행하지 않는다. 인터프리터 언어는 코드가 실행될 때마다 인터프리트 과정이 반복 수행되므로 코드 실행 속도가 비교적 느리다. 때문에 대부분의 자바스크립트 엔진(V8, SpiderMonkey ...)은 전통적인 컴..
