자바스크립트의 비동기 코드의 처리에 대해 공부한 내용을 정리했다. 블로킹과 논블로킹, 동기와 비동기 비동기 처리 및 그와 관련된 개념을 정리하기 전에 블로킹과 논블로킹, 동기와 비동기에 대한 개념부터 다시 잡고 가야할 것 같아서 내용을 찾아보았다. 동기, 비동기 : 코드의 순서와 실행 순서가 일치하는가 동기(Synchronous) : 코드가 순서대로 실행된다 비동기(Asynchronous) : 코드가 순서대로 실행되지 않는다. 블로킹, 논블로킹 : 코드의 실행이 다른 코드의 실행을 막는가 블로킹(Blocking) : 코드의 실행이 다른 코드의 실행을 막는다. 논블로킹(Non-blocking) : 코드의 실행이 다른 코드의 실행을 막지 않는다. 노드에서는 비동기면 논블로킹인 경우가 많다고 한다. fs같..
💡 TIL 20231029 - Recoil Selector Selector란? Derived state 입력받은 state를 변형해 반환하는 순수함수를 거쳐 반환된 값 Selector는 파생된 state(derived state)의 일부를 나타낸다. 즉, 기존 state를 가져와서, 기존 state를 이용해 새로운 state를 만들어서 반환할 수 있다. 기존 state를 이용만할 뿐 변형시키지 않는다. derived state는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다. atom의 output을 변형시켜 주는 개념 To Do 목록들을 카테고리별로 분류하려면 어떻게 할까? 컴포넌트 자체에서 전체 To Dos 배열을 불러온 뒤 분류할 수도 있지만, 이것은 데이터 자체를 바..
💡 TIL 20231019 - React-hook-form 복습 - register, validate, errors, handleSubmit React-hook-form import useForm 컴포넌트에서 useForm을 호출하면 register와 handleSubmit을 사용할 수 있다. form 내의 유효성 검사가 필요한 input들에 register 함수를 호출한다. required, minLength/maxLength, pattern, validate 등 💭 Register 함수 ; useForm hook으로 불러올 수 있음 검사가 필요한 input에서 register 함수를 호출 react-hook-form이 알 수 있도록 input에 이름을 부여해야 함 {...register("email..
💡 TIL 20230912 - HTTP 상태 코드 자주 쓰는 HTTP 상태 코드 ✅ 200 OK 요청이 성공적으로 되었습니다. (성공) 👎 400 Bad Request 이 응답은 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미합니다. (클라이언트에서 Request할 때 발생한 문제) 🔐 401 Unauthorized 요청된 리소스에 대한 유효한 인증 자격 증명이 없기 때문에 클라이언트 요청이 완료되지 않았음을 나타냅니다. ⛔️ 403 Forbidden 클라이언트는 콘텐츠에 접근할 권리를 가지고 있지 않습니다. 401과 다른 점은 서버가 클라이언트가 누구인지 알고 있습니다. 🚫 405 Method Not Allowed 요청한 메서드는 서버에서 알고 있지만, 제거되었고 사용할 수 없습니다. (허..
💡 TIL 20230909 - JavaScript 동기, 비동기, 비동기 프로그래밍의 필요성 동기와 비동기 동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 되는 단점이 있습니다. 비동기 처리 방식은 현재 실행 중인 태스크가 종료되지 않은 상태라 해도, 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는다는 단점이 있습니다. 비동기 프로그래밍의 필요성 자바스크립트는 싱글 스레드 언어입니다. 다시 말해, 자바스크립트는 한 가지 작업밖에 수행하지 못합니다. 그래서 자바스크립트로 코드를 구동하면 ‘순차적’으로 처리합니다. 이로 인해 무거운 작업들을 다량으로 ..
💡 TIL 20230907 - Tailwind CSS break-all (텍스트 줄바꿈 깨지는 현상) 태그의 글씨가 정상적으로 줄바꿈 되지 않는 현상 현재 모바일 반응형 작업 중인데, 왼쪽 이미지처럼 숫자를 길게 쓰면 줄바꿈이 되지 않고 영역 밖을 튀어나가는 현상을 발견했다. (암흑요리왕님께 무한한 감사) 그리고 오른쪽 이미지의 경우 이미지가 있는 다른 컴포넌트들은 정상적으로 나오는데, 저 "새콤달콤 치커리 샐러드"만 사진이 튀어나가는 것이 아니겠는가.. (딥빡) 암튼 치커리 샐러드를 고치다가 원인을 잘 모르겠어서 헤매던 중, 암흑요리왕님의 댓글을 발견하고 좀 찾아보니 tailwind의 Word Break라는 유틸함수를 알게 되었다. 엘리먼트 내에서 문장 또는 문단의 단어 나누기를 제어하는 유틸리티이다...
💡 TIL 20230831 - 기술면접 질문 정리 - 버츄얼 돔/리얼 돔, useRef, useEffect 1. 버과 리얼 돔의 차이 먼저 DOM이란 Document Object Model의 약자로 웹 어플리케이션의 HTML 요소들을 노드라는 단위로 나누어 노드들을 연결한 트리 구조의 객체입니다. 실제 DOM은 브라우저 화면을 렌더링할 때 이용하는 HTML 요소(노드)들의 트리 구조이고, 가상 DOM은 실제DOM의 가벼운 복사본이며, 메모리에만 존재하는 가상의 트리구조 입니다. 가상 DOM은 React.js, Vue.js와 같은 라이브러리와 프레임워크에서 사용됩니다. 둘의 가장 큰 차이점은 실제 DOM의 일부를 변경하면 전체 DOM을 한꺼번에 다시 렌더링하기 때문에 성능 문제가 발생할 수 있습니다. 또한..
💡 TIL 20230830 - react-hook-form mode mode란? mode란 React-hook-form의 useForm의 props 중 하나로, 사용자가 submit을 하기 전에 유효성 검사를 진행하는 것이다. (validation strategy before submitting behaviour) mode 옵션을 사용하면 사용자가 양식을 제출하기 전에 유효성 검사 전략을 구성할 수 있다. 유효성 검사는 handlesubmit 함수를 호출하여 트리거되는 onSubmit 이벤트 중에 발생한다. 1) onSubmit 유효성 검사는 제출 이벤트에서 트리거되며, 유효하지 않은 입력은 onChange 이벤트 리스너에 연결하여 유효성을 재확인한다. 2) onBlur 블러 이벤트에서 유효성 검사가 트..
💡 TIL 20230826 - 일시적 사각지대 TDZ(Temporal Dead Zone) 1. 일시적 사각지대(Temporal Dead Zone)이란? TDZ 는 스코프의 시작 지점부터 초기화 시작 지점까지의 사각지대 구간을 의미한다. 즉, 선언 단계와 초기화 사이에 잠시 머물러있는 구간이다. 2. 변수 선언의 3단계 1) 선언 단계(Declaration phase) 변수를 실행 컨텍스트의 변수 객체에 등록한다. 스코프가 참조하는 대상 2) 초기화 단계(Initialization phase) 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만든다. undefined로 초기화된다. 3) 할당 단계(Assignment phase) 사용자가 undefined로 초기화된 메모리에 다른 값..
