vanilla javascript로 과제를 하라고..? 아... 리액트가 그립다... 생각해보니 만들면 되잖아?vanilla javascript로 과제하기가 불편해서 나만의 프레임워크를 만들어 보고 싶어졌다.관련 글을 찾아보니 React 관련 글이 많았다. 역시 인기 1위답다.그래서 나만의 프레임워크는 일단 제쳐두고 React를 만들어보기로 했다.(react 컨트리뷰터가 되고싶은 야망, react를 알고싶은 마음도 있었다.) useState를 구현한 게시글은 많았다.하지만 실제로 사용해보니 문제가 있었다.함수형 업데이트를 지원하지 않는다는 것아마 구현만하고 실제 프로젝트를 만드는데 써보진 않았으셨을지도...ㅠㅠ 그래서 이 글에 함수형 업데이트까지 구현한 기록을 담으려고 한다. useState 구조useS..
팀 프로젝트에서 카드 등록 기능을 구현해야 했습니다.. 카드를 등록하는데 카드 스캔이 빠지면 아쉽겠죠? 이런건 어떻게 구현할까요? 팀원들의 반응은 다음과 같았습니다. 백엔드 팀원 : 이게 가능해? 프론트엔드를 처음 맡게 된 프론트엔드 팀원 : 이게 가능해? 개발 전에는 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에서 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..
