본문 바로가기

자바스크립트

(15)
JS) 무한 캔버스(Infinity Canvas)의 원리와 구현 들어가며...디자인에 관련된 일에 종사하는 사람이라면 "피그마" 앱을 익히 들었을 것입니다.디자이너 뿐만이 아니라 프론트엔드, 백엔드 등의 기타 개발자, 혹은 피그마 앱을 사용하는 팀 또는 회사에서 이를 사용하거나 본 적이 있는 사람이 대부분일 것입니다. 피그마는 매우 유용한 툴입니다. "dev"모드라는 유로 구독을 하면 디자이너가 원하는 부분의 색상이나 디자인을 그대로 css 코드로 변환해줍니다. (어도비는 피그마를 무려 28조원에 인수했습니다.) 저희 또한 피그마 같은 회사를 창업해 28조원을 벌어보려합니다.따라서 우리 팀은 피그마 앱의 카피앱을 만드려합니다.앱의 가장 중요한 부분은 무엇이 있을까요? 저는 딱 두개를 뽑았습니다.webGL을 이용한 GPU의 사용과 무한 캔버스의 구현입니다.하지만 자바스..
JS) remove() 와 removeChild() 발단 바닐라 자바스크립트로 이것저것 만지던 중, 이벤트 위임으로 todo-list를 만들어보자 생각이 들었다. 그러던 중 예상치 못한 동작이 발생했다. 전개 Enter const form = document.getElementById("form"); const wrapper = document.getElementById("todo-lists"); function handleTodo(e) { e.preventDefault() const btn = e.target.closest("button"); if (!btn) return; //버튼을 누른게 아님 const todo = e.currentTarget; // submit의 const todo if (btn.innerText === "remove") { wr..
Zutand 라이브러리 파해치기 최근 리덕스에서 Zustand으로 관심이 옮겨가고있다. 우선 리덕스라는 라이브러리는 잘 알 것이다. 리액트를 사용하는 개발자라면 누구나 한 번씩은 리덕스를 경험해 봤을 것이다. 리덕스를 사용하는데는 여러 이유가 있겠지만 아마 많은 개발자들은 "상태관리"를 더 원활히 수행하기 위해 사용할 것이다. 그러나 리덕스를 사용해보면 알겠지만 어쩌면 배보다 배꼽이 더 크다고 느낄지도 모른다. 고작 전역상태 "하나"를 만드는데 액션,리듀서,스토어를 생성해야하고 추후에 추가될 경우에 대비해 이를 파일로 나누어 정리한다. 등등의 파일을 말이다. 그러다보면 자연스레 리덕스의 역할을 하면서 완전히 쉬운 라이브러리가 떠오르기 마련이다. 그것이 바로 zustand이다. 이 zustand는 출시된지 꽤 된 라이브러리이지만, 회사에..
리액트 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] 참으로 간단하지 않은가. 단지..