팀 프로젝트에서 카드 등록 기능을 구현해야 했습니다.. 카드를 등록하는데 카드 스캔이 빠지면 아쉽겠죠? 이런건 어떻게 구현할까요? 팀원들의 반응은 다음과 같았습니다. 백엔드 팀원 : 이게 가능해? 프론트엔드를 처음 맡게 된 프론트엔드 팀원 : 이게 가능해? 개발 전에는 video태그로 카메라 영상을 띄우고 z-index로 ui를 표시한 후 html2canvas로 카드 이미지를 캡쳐할 계획이었습니다. 결론부터 말하자면 구현에 성공하긴 했지만 생각보다 난관이 많았습니다. 일단, html2canvas는 video를 캡쳐할 수 없었습니다... 구현 방법 1. video태그에 카메라 연결하기 먼저 카메라를 띄울 수 있어야겠죠? import React, { useRef, useEffect } from 'react'..
MSW가 2.0으로 바뀌고 문서가 너무 없었다. 서론 Next.js도 처음이고 MSW도 처음이라 더 어려웠습니다. 다른 블로그를 따라서 적용하니 CSR로 api 요청을 보냈을 때 msw가 로딩되기 전에 api요청이 끝나서 404에러가 발생했습니다. pages router + msw2를 사용하는 경우의 해결책을 찾을 수 없었습니다. app router+ msw2를 사용하거나 pages router + msw1을 사용하는 경우들 뿐이었습니다. 틈틈히 삽질한 결과 해결책을 찾게되어 글을 쓰게 되었습니다. 설정 방법 먼저 Next.js는 CSR도 하고 SSR도 하기 때문에 브라우저측 서버측 모두 설정이 필요합니다. // /mocks/browser.js import { setupWorker } from "msw/..
모바일 앱에 어울리는 프로젝트를 하고 있는데 팀원 모두 앱개발 경험이 없었다. 진로도 앱개발 쪽으로 생각하고 있지 않기 때문에 PWA를 활용해보기로 했다. PWA를 APK파일로 만들어서 플레이스토어에 등록할 수도 있다. Next.js는 SSR인데 앱으로 만드는게 맞나요? Next.js는 기본적으로 SEO향상 등을 위해 첫 접속시에만 SSR을 활용하고 그 이후에는 SPA처럼 동작한다. 그래서 토스같이 앱을 개발하는 회사에서도 Next.js를 많이 사용하는 것 같다. SEO가 필요 없는 사이트인데 Next.js를 사용해야 할까요? 공유하기 기능이 있다면 사용하는 것을 추천한다. 링크 미리보기에 들어갈 내용을 og 태그로 작성하는데 CSR만 사용하면 모든 페이지 링크 미리보기가 똑같아진다. 페이지별로 대응을 ..
isNan()은 원래 javascript에서 string도 인자로 받을 수 있다. 문자열이 숫자로 변환될 수 있는지 판단해준다. 하지만, Typescript에서는 숫자만 인자로 넣을 수 있다. 해결방법 isNan(Number(str)) 형태로 사용하면 된다. let num = "123"; console.log(isNan(Number(num))); // true
원래는 SCSS만 되던 기능이었는데 2023년에 CSS에도 추가되었다. "Scss만 되는 줄 알았는데 CSS에서 nesting 썼는데 돌아가더라?" 라는 팀원의 말을 듣고 찾아보게 되었다. 🤷♀️Nesting(중첩) 이 뭐죠? 예시 코드는 아래와 같다. /* Nesting 적용 전 */ .header { background-color: #333; } .header h1 { color: #fff; } .header nav { font-size: 16px; } /* Nesting 적용 후 */ .header { background-color: #333; h1 { color: #fff; } nav { font-size: 16px; } } 🙅♀️잘못된 사용 예시 SCSS에서는 되고 CSS에서는 안되는 것 S..
Vue.js is detected on this page. 라고 써있지만 F12를 눌렀을 때 크롬 개발자 도구에서 Vue 탭이 나오지 않았다. 확장 프로그램 설정에서 "파일 URL에 대한 액세스 허용"을 체크해주니 해결되었다.
Vue에서 hammer.js를 이용하려고 했는데 실제 dom element를 전달해줘야 했다. Vue는 가상 DOM을 이용하는데 어떻게 해야 할까? 템플릿 참조를 이용하면 된다. 먼저 ref와 onMounted를 꼭 import 해준다. import { ref, onMounted } from 'vue' onMounted는 컴포넌트의 DOM 트리가 문서 내에 있음을 보장한다. onMounted 전에는 DOM에 접근할 수 없다. https://ko.vuejs.org/guide/essentials/lifecycle.html 생명 주기 훅 | Vue.js ko.vuejs.org 그리고 아래와 같이 사용하면 된다. 이때 :ref가 아니라 ref인것에 주의한다. https://ko.vuejs.org/guide/es..
데이터를 받기 전에 렌더링을 한 후 데이터를 받고 리렌더링을 해서 화면 깜빡임이 발생했다. SPA의 장점 중 하나는 어플리케이션을 쓰는 것 처럼 움직임이 부드럽다는 것인데 그 장점을 활용할 수 없는 문제가 있었다. 처음에 방법을 바로 생각해내지 못해서 created에 await을 사용하는 등 여러 시도를 해 보았지만 잘 되지 않았었다. 가장 간단한 방법은 v-if였다. {{data.context}} 데이터가 없으면 렌더링을 하지 않고 데이터가 있으면 렌더링을 한다.
