본문 바로가기

자바스크립트

(19)
자바스크립트)디스코드 클론 - 리액트 최근 회사 일 때문에 디스코드 클론 프로젝트를 모두 다 끝내지 못했다. 그리고 그저께부터 다시 작업에 돌입했는데 문제가 발생했다. 어떤 유저가 스트림 데이터 중 비디오를 껐다고 가정해보자. 그럼 다른유저와 그 유저를 이어주는 피어의 스트림을 다시 갈아끼워야 한다. 그러나 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..
AWS S3 이미지 업로드 with React 거두절미하고 바로 본론으로 들어가겠다. 우선 https://aws.amazon.com/ko/s3/에 접속해 계정을 생선한다. 계정 생성 후. 버킷 생성에 들어가 이름과 지역을 선택한다. 쭉 내려가다가 "이 버킷의 퍼블릭 엑세스 차단 설정"에서 모든 체크를 해제하고 만들기를 클릭한다. 이제 버킷이 만들어졌으면, 버킷을 하나 클릭한 후, 권한 > 버킷 정책에 { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicListGet", "Effect": "Allow", "Principal": "*", "Action": [ "s3:List*", "s3:Get*" ], "Resource": [ "arn:aws:s3:::Your_Bucket_Name", "arn:aws:..