🐕 useEffect안의 콜백함수는 항상 함수를 반환해야한다. 하지만 async 함수는 프로미스를 반환하기 때문에 useEffect(async () => {}) 이와 같은 형식으로 작성하는 경우 useEffect는 반환문으로 함수를 반환해야하지만 프로미스를 반환하게 되어 오류를 만나게 될 가능성이 높아집니다. 👻그럼 async는 어떻게 씀 useEffect(() => { const process = async () => { setLoading(true); try { const resolved = await promiseCreator(); setResolved(resolved); } catch (e) { setError(e); } setLoading(false); }; process(); // eslint..
🐕 async/await 제너레이터 함수를 사용해 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있습니다. 제너레이터 함수가 뭐냐고요? 함수 제어권을 양도해줄 수 있는 함수입니다. 더 자세한 개념은 따로 찾아보세요 하여튼 제너레이터 함수를 이용해 비동기 처리를 동기 처리처럼 구현할 수 있는데 그렇게 하면 코드가 굉장히 장황해진다는 문제점이 있습니다. 코드가 굉장히 장황해지면 저같은 허수개발자들은 코드를 제대로 치지도 못하겠죠? 따라서 좀 더 간편하고 가독성 좋으면서도 비동기 처리를 동기 처리처럼 동작할 수 있게 도와주는 문법에 대한 필요성이 있었고 그를 위해 async/await 문법이 ES8(ECMAScript2017)에서 도입되었습니다. async/await은 프로미스와 제너레이터함수를 기반으로 ..
🐕 스레드 풀은 스레드풀(Thread pool)은 프로그램이 동시에 처리해야 할 작업이 많은 경우, 이를 처리할 스레드를 관리하는 기법입니다. 스레드풀은 미리 정해진 개수의 스레드를 생성하고 유지함으로써, 새로운 작업이 들어올 때마다 매번 스레드를 생성하지 않고 생성된 스레드 중에서 작업을 할당하여 처리합니다. 말투가 뭔가 이상하죠 네 챗지피티입니다.그러니까 스레드 풀이란 것은 프로그램이 동시에 처리해야할 작업이 많으면이를 동시에 처리해줄 스레드도 많이 필요하겠죠?동시에 처리해야할 작업이 많으면 많을 수록 컴퓨터는스레드를 동시에 처리해야할 작업의 수만큼 생성할 것입니다. 문제는 스레드를 생성하는 것 자체도 꽤 자원이 많이 드는 일이라는 것입니다.따라서 스레드를 그때그때 필요한 만큼 생성하고 지우는 방식은..
🐕 RESTful API https://aws.amazon.com/ko/what-is/restful-api/ RESTful API란 무엇인가요? - RESTful API 설명 - AWS Amazon API Gateway는 어떤 규모에서든 개발자가 API를 손쉽게 생성, 게시, 유지 관리, 모니터링 및 보안 유지할 수 있도록 하는 완전관리형 서비스입니다. API Gateway를 사용하면 실시간 양방향 통신 애 aws.amazon.com RESTful API에 대해서 aws 사이트는 다음과 같이 정의한다. 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스 SOP 원칙과도 일맥상통하는 것 같은 느낌이 드는데 인터넷을 통해 정보를 교환하는 과정에서 안정성을 보장해주기 위해 사용..
🐕 SPA의 등장 배경 싱글 페이지 어플리케이션...은 전통적인 HTML로 구성된 페이지와 조금 많이 다릅니다. 전통적 방식은 MPA(Multi Page Application)이라고 부르는군요! 대표적으로 SPA로 구성된 웹페이지를 떠올려보면 페이스북...정도가 떠오르네요 원래는 사용자가 웹사이트내의 다른 페이지로 이동하면 HTML 파일로 된 페이지의 전체를 다 불러와야 했습니다. 레이아웃이 크게 다르지 않다면 이건 리액트에서 안바꿔도될 애들까지 다 리렌더링하는수준의 비효율성이었을거에요 웹이 발전하면서 사용자와 웹 간의 많은 상호작용이 필요했습니다. 하지만 이런 상호작용은 비용이 저렴하지 않아요 따라서 불필요한 렌더와 트래픽은 최대한 피하는게 좋을 것이고 그렇기 때문에 업데이트에 필요한 데이터만 서버에서..
⚡문제정보 나온지 얼마 안된 문제여서 흥미롭게 풀어봤습니다. 입출력 예시를 보면 직관적으로 감이 오는데 keymap과 target이 주어집니다. 키하나에 여러 문자가 할당된 경우에 동일한 키를 연속해서 누르면 할당순서대로 문자가 바뀐다는 것입니다. ABACD 와 같은 형태의 키맵이있다면 한번 눌렀을때 A 두번은 B 세번은 A 이런식인거죠! 문제는 이렇게 키맵이 주어져있는데 최소한으로만 버튼을 눌러서 타겟값을 만들고싶다는 것입니다. 그리고 그와중에도 타겟값을 만들 수 없는 경우(모든 알파벳이 없으니 그런 경우도 있을 수 있겠죠?) -1을 리턴해야하며 주어지는 키맵에 알파벳이 한개로 고유하지 않다는 조건이 있습니다. 이런 와중에 문제의 요구사항인 최소한의 클릭으로 값을 구하려면 1. 타겟값이 원하는 알파벳이..
🐕 렌더할 데이터가 많다면? function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); 간단한 리액트 투두 리스트 앱을 저번에 만들어봤는데 다음 차트는 성능 최적화 부분이었습니다. 만약 2500개의 데이터를 렌더링하면?? 안타깝게도 제 사이트는 1~2초 정도의 렉이 발생하고 뭔가 이벤트를 발생시켜도 느리게 동작해요 이걸 해결하는 것이 중요하겠네용 👻리액트에서 성능을 체크하는 법 먼저 크롬 확장에서 React DevTools를 설치해주고 개발자도구를 켜서 Profiler를 켜줍니다. 전 하도 안되서 새로고침해봤는데 새로고침하니까 잘되네요 녹화버튼을 누르..
🐕 SOP (Same - origin - policy) 동일 출처 정책 동일 출처 정책은 웹 애플리케이션의 중요한 보안 모델입니다. 동일 출처 정책은 같은 출처(Origin)의 리소스만 공유가 가능하다는 정책인데 인간이 보기엔 그냥 딱봐도 같은 출처인것도 여기서 많이 걸러져서 CORS를 모르고 있으면 CORS 에러를 만나게되는거네요 동일출처 정책은 위험할 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주는 역할을 수행합니다. 만일 이러한 제약이 없다면 CSRF (Cross-Site Request Forgery) 나 XSS(Cross-Site Scripting)등의 공격에 매우 취약해질 가능성이 생깁니다. 따라서 동일하지 않는 다른 출처의 스크립트가 실행되지 않도록 브라우저에서 사전에 방지해주는..
