본문 바로가기

전체 글39

사내 어드민 시스템 분석 보호되어 있는 글 입니다. 2024. 4. 15.
객체를 배열로 변환하는 방법 정리 이번에 객체를 배열 형태로 변환하는 코드를 다룰 일이 있어, 관련 메서드들을 정리해보았습니다.const testObject = { name: 'lucy', age: 28, address: 'seocho',}; 📌 변환 메서드 3가지메서드설명반환 형태Object.entries()객체를 [key, value] 쌍의 배열로 변환[[key, value], ...]Object.keys()객체의 키만 추출[key, key, ...]Object.values()객체의 값만 추출[value, value, ...] 🧪 사용 예시const entries = Object.entries(testObject);console.log(entries);// 출력: [["name", "lucy"], ["age", 28], [".. 2024. 4. 12.
크롬 개발자 도구를 활용한 FPS 성능 확인 웹 페이지에서 애니메이션이나 인터랙션의 성능을 측정하고 싶을 때, 크롬 개발자 도구를 이용하면 FPS(Frame Per Second)를 확인할 수 있습니다.아래 방법으로 FPS를 쉽게 확인하고 성능 병목 지점을 진단할 수 있습니다.✅ FPS 확인 방법크롬 개발자 도구 열기원하는 웹 페이지에서 F12 또는 Ctrl/Cmd + Shift + I를 눌러 개발자 도구를 엽니다.명령 메뉴 실행Ctrl/Cmd + Shift + P를 눌러 명령어 입력창을 열고,Show frames per second meter를 검색하여 실행합니다.좌측 상단에 FPS 표시창 확인이제 화면 좌측 상단에 FPS 측정 그래프가 표시됩니다.FPS 표시 끄기다시 명령 메뉴를 열고 Hide frames per second meter를 실행하면.. 2024. 4. 11.
📦 Vue.js에서 외부 모듈 불러오기 Vue.js에서 외부 모듈을 불러올 때는 보통 import를 사용하지만, CommonJS 형식의 모듈이거나 특정 상황에서는 require()를 사용해야 할 때가 있습니다.const 외부모듈 = require('모듈이름'); 이 방식은 특히 다음과 같은 경우에 사용됩니다:모듈이 CommonJS 형식으로 되어 있어 import로 불러올 수 없을 때런타임 시점에 동적으로 모듈을 불러와야 할 때 (예: 조건부 로딩)단, Vue 3 + Vite 프로젝트처럼 ESM 환경에서는 require() 사용이 제한되므로 가급적 import를 우선 고려하고, require()는 보완적인 수단으로 사용하는 것이 좋습니다. 2024. 4. 5.
oauth 2.0 redirect 동작 유의할 점 로그인 기능을 라이브러리화 시켜서 외부 프로젝트에서도 로그인 기능을 사용할 수 있게 하려고 한다.oauth 2.0은 소셜 로그인에서 자주 쓰이는 인증 방식이다. 흔히 아는 카카오, 구글, 페이스북, 네이버를 통해 로그인을 시도하면code={code값}&redirect_uri={redirect_uri}&state={state값} 대부분 저런 형태로 리다이렉트 url이 올 것이다. 하지만 이번 개발을 통해 새로 알게된 사실이 있다면 각 소셜마다 url의 형태가 조금씩 다르게 온다는 것이다. 예를 들어 state값을 추출해서 사용하고 싶은데 구글 redirect url에서는 &가 붙은 파라미터가 아닌 #(해쉬)가 붙어서 오기 떄문에 #(해쉬)를 제거하는 로직이 추가되어야 한다.그리고 각 소셜마다 인증하는 방식.. 2024. 4. 4.
로그인 기능 라이브러리화 🔐 일반적인 로그인 처리 방식보통 로그인 시 발급받은 토큰(accessToken, refreshToken)은 로컬 스토리지(LocalStorage)에 저장됩니다.하지만 외부 서비스에서 로그인 페이지를 불러와 사용하는 경우,해당 페이지의 로컬 스토리지에 접근하기 어려워 토큰을 사용할 수 없습니다.🔁 해결 방법: 토큰을 URL 쿼리 파라미터로 전달외부 서비스에서 로그인 후 토큰을 전달할 수 있도록accessToken 값을 URL 쿼리 파라미터로 넘기는 방식으로 처리했습니다.?accessToken={발급받은_토큰값}✅ 실제 적용 코드 예시const handleClickLogin = async () => { if (validateAll('before')) { try { const loginR.. 2024. 3. 17.