본문 바로가기

이것저것 스터디📚

 (107)
React 공식문서 -flushSync - flushSync : 강제로 제공된 콜백 내부의 모든 업데이트를 동기적으로 flush(강제로 비워냄)하도록 하고 DOM이 즉시 업데이트 된다. - flushSync는 자주 사용되지 않으며 앱 성능을 저하시킬 수 있습니다. - flushSync를 호출하면 React가 보류 중이던 작업을 강제로 flsuh하고 DOM을 동기적으로 업데이트 한다. import { flushSync } from 'react-dom'; flushSync(() => { setSomething(123); }); - flushSync는 매개변수로 전달받는 콜백함수를 즉시 호출하고 여기에 포함된 모든 업데이트를 동기적으로 flush한다. - 보류 중인 모든 업데이트, Effect 또는 Effect 내부의 업데이트를 flush할 수도 ..
React 공식문서 -useSyncExternalStore - useSyncExternalStore : 외부 스토어를 구독할 수 있는 React 훅이다. const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) - 스토어에 있는 데이터의 스냅샷을 반환한다. - 두 개의 함수를 인수로 전달해야 한다. - subscribe : 하나의 callback 인수를 받아 스토어를 구독하는 함수. 스토어가 변경되면 제공된 callback을 호출해야 하고, 이로부터 컴포넌트가 리렌더링된다. subscribe 함수는 구독을 해제하는 함수를 반환해야 한다.(subscribe 함수는 처음 마운트될때 호출되고, 이후 상태가 변화될때 호출된다) - getSnapshot 함수의 경우, 스토어에서 데이..
React 공식문서 -userId - userId : 접근성 속성에 전달할 수 있는 고유 ID를 생성하기 위한 React 훅이다. - useId는 특정 컴포넌트 내 특정 useId와 관련된 고유 ID 문자열을 반환한다. - useId를 목록에서의 키 생성하기 위해 호출하지 말아야 한다. 키는 데이터에서 생성되어야 한다. import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); return ( Password: The password should contain at least 18 characters ); } export default function App() { return ( Choose password Confirm passwor..
DeepDive - 48장. 모듈 48.1 모듈의 일반적 의미 - 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. - 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. - 이때, 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. - 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. - 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하며 이를 export라 한다. - 모듈 사용자는 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있으며 이를 import라 한다. 48.2 자바스크립트와 모듈 - 자바스크립트는 태생적으로 모듈 시스템을 지원하지 않는다. 즉, 모듈이 성립하기 위해 필요한 파일 스코프와 im..
DeepDive - 47장. 에러 처리 47.1 에러 처리의 필요성 - 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. - try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다. - 우리가 작성하는 코드에서는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요하다. 47.2 try... catch... finally 문 - try... catch... finally 문은 일반적인 에러 처리 방법이라고 한다. - finally 문은 불필요하다면 생략 가능하다. catch 문도 생략이 가능하지만, catch문 없는 try 문은 의미가 없으므로 생략하지 않는다. console.log('[Start]'); t..
HTTP 대신 HTTPS를 사용해야하는 이유 HSTS(HTTP Strict Transport Security) - Web Site에 접속할 때, 강제적으로 HTTPS Protocol로만 접속하게 하는 기능이다. - 즉, HTTPS Protocol을 지원하는 웹 사이트에서 HTTPS Protocol만을 사용해서 통신할 수 있음을, 접속하고자 하는 브라우저에게 알려주고 브라우저에게 HTTPS Protocol만 사용하도록 강제하는 기능이다. - 이는 해커와 같은 공격자가 중간자공격을 하여 중간에 Proxy Server를 두고, 사용자와는 HTTP 통신을 하고 실제 웹 사이트와는 HTTPS 통신을 해도 사용자는 이를 인식하지 못하며, 사용자와 실제 웹 사이트가 주고 받는 모든 정보는 공격자에게 노출되게 된다. 이를 SSL Stripping 공격이라고 하며..
REST API - REST API : REST를 기반으로 만들어진 API를 말한다. 1. REST(Representational State Transfer)란? - REST는 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다. - HTTP URI(Uniform Resource Identifier)를 통해 자원을 명시하고 - HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 - 해당 자원(URI)에 대한 CRUD(Create, Read, Update, Delete) Operation을 적용하는 것을 의미한다. 2. REST 구성 1) 자원(Resource) : HTTP URI 2) 자원에 대한 행위(Verb) : HTTP Method 3) 자원에 대한 행위의 ..
AJAX란? 1. AJAX(Asynchronous Javascript And XML) - 비동기식 자바스크립트와 xml의 약자 - 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 - JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱싱할 수 있다. - Ajax의 가장 핵심적인 구성 요소는 XMLHttpRequest 객체이며, 이는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다. * 서버와는 다음과 같은 형태의 데이터를 주고 받을 수 있다. - JSON - XML - HTML - 텍스트 파일 등 * Ajax 장점 - 웹페이지의 속도향상 : 페이지 전체가 아닌 필요한 부분만 업데이트할 수 있기 ..

티스토리툴바