본문 바로가기

자바스크립트

(20)
리액트 19가 또 나오네 2024년 연말에 리액트 19가 나올 예정이다. 블로그 useMemo, useCallback, memo는 리액트에서 불필요한 리렌더링 최적화를 진행하는데 없어서는 안될 훅이다. 그런데 이번 19버전에서는 이 훅들이 사라질 예정이라고 한다. (정확히는 deprecated) 이제 리액트에서 이부분을 알아서 최적화해주는 것으로 바뀐다고 한다. 때문에 리액트 사용자들은 해당 훅들을 사용하여 최적화하는 시간에 다른 생산적인(비즈니스 로직 등)에 집중할 수있다. 두번째로 forwardRef가 없어진다고 한다. const ChildComponent = React.forwardRef( ({ data,ref }: dataTypes, ref) => { return ( // ... ); } ); 기존 forwardRef로 ..
자바스크립트)디스코드 클론 - 리액트 최근 회사 일 때문에 디스코드 클론 프로젝트를 모두 다 끝내지 못했다. 그리고 그저께부터 다시 작업에 돌입했는데 문제가 발생했다. 어떤 유저가 스트림 데이터 중 비디오를 껐다고 가정해보자. 그럼 다른유저와 그 유저를 이어주는 피어의 스트림을 다시 갈아끼워야 한다. 그러나 peer.js를 사용하면 하나의 피어(겉으로 보기엔)만 생성해 모든 유저의 피어를 관리한다. 때문에 마이크 볼륨이나 오디오 볼륨 등의 세세한 작업을 하는데 시간이 너무 많이 소요되는 것이 느껴졌다. 그래서 나는 peer.js를 사용하지 않고 RTCPeerConnection이라는 WebAPI를 사용하는 아주 기본적인 peer생성부터 다시 시작하기로 마음 먹었다. 자바스크립트에서 제공하는 WebAPI를 사용하는데에는 조금 어려움이 있었다. ..
자바스크립트)웹펙.... 모듈 번들러 재사용성이라는 말이 있다. 흔히 말해 한 번 작성한 코드를 여러 번 재사용 하는 것이다. 예를 한 번보자. 단순히 x,y값을 받아 둘의 합을 리턴해주는 함수이다. const Calc = (x: number, y: number) => { return x + y; }; 굉장히 간단한 함수이다. 하지만 단순히 x,y값을 받아 둘의 합을 리턴해주는 것이 아닌, 특정 api를 요청하고 서버로부터 받은 값 중에 무엇을 비교하고, 올림/내림을 수행하고 등등의 복잡한 함수라면 우린 분명 어떤 파일에 해당 함수를 저장하여 사용할 것이다. 하지만 " 특정 api를 요청하고 서버로부터 받은 값 중에 무엇을 비교하고, 올림/내림을 수행하고 등등"의 모든 일련의 과정을 하나의 함수로 담는 것은 매우 안좋다. 따라서 모든 것을 ..
JS)User-Agent의 작동 방식 및 사용방법 이 포스팅은 DeviceAtlas의 글을 해석한 글입니다. 들어가기 앞서 User-Agetn는 웹 아키텍처의 중심 부분이며 콘텐츠 협상에서 중요한 역할을 합니다. 이는 기능이나 컨텍스트에 따라 다른 클라이언트 또는 '에이전트'로 다르게 요청하는 사용자를 처리할 수 있는 기능을 구축하려는 명시적인 의도로 만들어졌습니다. User-Agetn란 UA(User-Agent)는 문서, 이미지 또는 웹 페이지와 같은 자산에 대해 웹 서버에 요청하는 '에이전트' 또는 프로그램을 식별하는 영숫자 문자열입니다. 웹 아키텍처의 표준 부분이며 HTTP 헤더의 모든 웹 요청에 의해 전달됩니다. User-Agent문자열은 요청하는 장치에서 실행중인 소프트웨어 및 하드웨어에 대한 매우 구체적인 정보를 제공하기 때문에 매우 유용합니..
자바스크립트) 함수 내 d내장함수와 프로토타입 아무런 생각없이 사용하던 Array.sort(), length 등등의 함수들. 최근에 궁금증이 하나 생겨났다. 자바스크립트를 처음 공부할 때 분명 봤었던 것이지만, 시간이 지나 잊어버리고 다시 공부하며 다시 한 번 더 정리하려 한다. 아무런 생각없이 사용하던 Array.sort(), length등등의 함수들은 어떻게 사용되는 것일까. 예를들어 다음과 같은 배열이 있다고 해보자. const arr = [5,4,3,2,1] 이 함수를 정렬하기 위해선 여러 방법이 있다. 시간복잡도를 생각해 선택 정렬, 버블정렬, 퀵 정렬 등을 선택할 수 있겠지만 보통은 array.sort()로 정렬을 시행한다. arr.sort(); console.log(arr); //[1, 2, 3, 4, 5] 참으로 간단하지 않은가. 단지..
자바스크립트) forEach와 비동기 최근 코드를 작성하는 중에 한번에 여러개의 비동기 작업을 처리해야 할 일이 생겼다. 단순히 async awiat을 사용해 다음과 같이 구현할 수 있지만, const data = await fetch("/api"); const data2 = await fetch("/api"); const data3 = await fetch("/api"); const data4 = await fetch("/api"); 특정 변수를 배열에 담고 그 배열을 주소값 또는 파라미터로 넣어 api를 여러번 호출해야 하는 상황이었다. const number_arr = [1, 2, 3, 4, 5]; const data = await fetch(`/api/${number_arr[0]}`); const data2 = await fetch(..
자바스크립트) 객체의 복사 이 글은 아래 링크 https://web.dev/structured-clone/ Deep-copying in JavaScript using structuredClone For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with structuredClone(), a built-in function for deep-copying. web.dev 를 보고 의역한 글입니다 최근 객체를 복사할 일이 생겨 이에 대해 알아보는 시간을 가져보았습니다. 자바스크립트에서 객체를 복사하는 방법은 몇가지가 존재합니다 얕은 복사본 개체..
React) 구글 로그인 - @react-oauth/google npm install jwt-decode 최근 구글 로그인을 적용할 순간이 와서 여지없이 reat-google-login 라이브러리를 적용하려했다. 그러나 3월을 마지막으로 더이상 지원을 하지 않는다 해서 다른 방법을 찾아야 했다. 공식문서를 보며 하나하나 코드를 적용하면 되겠지만, 나는 무척 귀찮았다. 그래서 구글링을 했고 대부분의 react-google-login 대신 @react-oauth/google라이브러리를 찾았다. 구글에 널려있는 react-google-login 라이브러리 설명 블로그 와는 다르게 @react-oauth/google라이브러리는 이를 다룬 블로그가 거의 없었기에 직접 포스팅하기로 생각했다. 우선 설치해야 할 라이브러리리는 두개다. npm i @react-oauth/google..