자바스크립트 (20) 썸네일형 리스트형 NextJS, 미해결) InvalidCheck: pkceCodeVerifier value could not be parsed. Read more at https://errors.authjs.dev#invalidcheck 처음 보는 에러가 나왔습니다.이슈로 등록된 것도 확인해봤지만 최근에 발생한 에러인지 해결법은 없었습니다. (링크)보통 코드를 수정하거나 생성하면 에러가 나오기 마련이지만 기존 oauth코드 부분에서는 최근 수정한 적이 없습니다. 한마디로 잘 되던 코드가 갑자기 동작을 안하게 된거죠..불과 하루 전 DB를 옮기느라 DB관련 로직을 수정한 것 외에는 전부 UI를 수정했으니 정말 황당합니다. 우선 에러에서 알려준 링크로 들어갔습니다.https://errors.authjs.dev#invalidcheck Auth.js | ErrorsAuthentication for the Webauthjs.dev링크에 나와있는 설명은"PKCE, 상태 또는 nonce OAuth 검사를 수행할 수 없을 때 발생합니다. 이는 OAut.. THREEJS로 인테리어 기능 안녕하세요.이번 팀 프로젝트로 진행한 "IDesign"에서 저는 THREEJS를 활용한 인테리어 기능과 대시보드 페이지를 맡았습니다.제가 설명/소개해드릴 부분은 THREEJS에 대한 내용이 아닌, "Three.js를 이용해 어떤 기능을 어떻게 구현했나"입니다. Three.js에 대해 다들 한 번쯤 들어보셨을텐데요, 블로그의 글이 구현 방법에 초점이 맞춰진 만큼 Three.js에 대한 것은 간단하게 소개하고 넘어가겠습니다. Three.js에 대해 자세히 알고 싶다면 공식문서를 읽어보길 추천합니다. 목차THREE.JS의 간단한 소개프로젝트에 녹여낸 기능과 구현 방식 1. THREE.JS 소개웹에서의 3D 그래픽은 매우 까다로운 영역이었습니다. 그러나 Three.js는 이 복잡한 작업을 쉽게 만들면서도 강력.. threejs) 프레임마다 업데이트되는 TextGeometry 안녕하세요. 무려 한달 반만에 작성하는 게시글입니다.프로젝트를 진행하며 무척 애를 먹었던 부분이 생겨 글을 작성해봅니다. 우선 제목에서 알다시피 threejs의 TextGeometry부분입니다. 다른 지오메트리와 달리 textGeomtry는 매 프레임마다 업데이트 되면 성능문제를 피할 수 없습니다.여기서 말하는 업데이트란, 텍스트의 변화입니다. 사진으로 보기엔 정상적으로 나오는 텍스트입니다. 하지만 이것을 매 프레임마다 업데이트한다면 어떻게 될까요?제 경우에서는 "onmousemove"이벤트에서 실행될 것입니다.좌표 (0,0,0)에서 현재 마우스 위치까지의 거리를 "distanceTo"메서드로 구한 후 이를 텍스트로 나타내는 기능입니다.영상에서 보시다시피 마우스를 움직이면 즉각적으로 텍스트에 변화가 .. JS) 무한 캔버스(Infinity Canvas)의 원리와 구현 들어가며...디자인에 관련된 일에 종사하는 사람이라면 "피그마" 앱을 익히 들었을 것입니다.디자이너 뿐만이 아니라 프론트엔드, 백엔드 등의 기타 개발자, 혹은 피그마 앱을 사용하는 팀 또는 회사에서 이를 사용하거나 본 적이 있는 사람이 대부분일 것입니다. 피그마는 매우 유용한 툴입니다. "dev"모드라는 유로 구독을 하면 디자이너가 원하는 부분의 색상이나 디자인을 그대로 css 코드로 변환해줍니다. (어도비는 피그마를 무려 28조원에 인수했습니다.) 저희 또한 피그마 같은 회사를 창업해 28조원을 벌어보려합니다.따라서 우리 팀은 피그마 앱의 카피앱을 만드려합니다.앱의 가장 중요한 부분은 무엇이 있을까요? 저는 딱 두개를 뽑았습니다.webGL을 이용한 GPU의 사용과 무한 캔버스의 구현입니다.하지만 자바스.. React) mediasoup을 이용한 SFU 작년 WebRTCPeerConnection을 이용한 P2P 토폴로지 방식의 화상채팅을 구현했었다.동작방식과 각각의 파라미터를 이해하는데 별 어려움이 없었고 올해, 내가 재직했었던 회사의 정부과제 프로젝트에서도 P2P방식의 화상채팅 기능을 사용했었다.그러나 P2P방식의 문제점은 사용자 수가 늘어갈 수록 한 사람당 감당해야 할 peerConnection의 수가 기하급수적으로 증가한다는 것이었고,시험인증에서 응답속도 부문은 탈락하게 되었다. 때문에 개인 프로젝트로 P2P방식이 아닌 SFU방식으로 webRTC를 구현해보고자 한다. LibrariesSFU를 구현하게 도와줄 라이브러리는 많다. Medooze와 Kurento 등이 있지만 mediasoup을 선택한 이유는 간단하다.mediasoup의 공식문서가 가장 .. JS) 논리적 AND OR 포스팅을 하게된 계기 import React, { useEffect, useState } from "react"; const Example = () => { const [data, setData] = useState(null); function getData() { return new Promise((reso) => { setTimeout(() => { const obj = { id: 1, name: "홍길동", firstName: "홍", }; reso(obj); }, 2000); }); } useEffect(() => { (async () => { const data = await getData(); setData(data); })(); }, []); return ( 오늘 일기 ....일기장 내 이름.. 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는 출시된지 꽤 된 라이브러리이지만, 회사에.. 이전 1 2 3 다음
