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'..
1. 의도한 결과는 무엇이었는가(초기 목표) 잔돈으로 자동 기부가 가능한 핀테크 시스템 만들기 2. 실제 어떤 일들이 일어났는가(현실) 목표를 크게 잡고 시간이 부족하면 쳐내는식으로 작업하려고 했는데 팀원들의 능력이 뛰어나서 목표한것을 거의 다 이룬 것 같습니다. 지난 프로젝트에 비해서는 시간관리가 잘 되었지만, 제 생각보다는 기획에 시간을 많이 쓴 것 같습니다. 3. 계획과 실제 결과의 차이는 왜 발생되었는가 (배운점들) 생각보다 팀원들의 능력이 뛰어나 구현이 잘 되었습니다. 프론트를 처음 맡아본 팀원이 next.js + react query + zustand + storybook등을 소화해내는 모습이 신기했습니다. 4. 지속, 개선 혹은 포기할 것들은 무엇인가, 배운 것들은 무엇인가 (목적 팀원 개개..
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/..
계기 git에 code를 푸시하려면 git push origin 브랜치명와 같은 형식으로 적어야 한다. 하지만 코드리뷰를 받으려면 git push origin HEAD:refs/for/브랜치명와 같은 형식으로 적어야한다. VSCode의 git lens에서 gui로 제공하지 않는 기능이라 명령어를 직접 입력해야했는데 너무 길어서 불편했다. 해결방법 git alias를 활용하기로 했다. GPT선생님이 만들어준 코드인데 확인해보니 잘 작동한다. git config --global alias.review '!f() { branch=${1:-$(git symbolic-ref --short HEAD)}; git push origin HEAD:refs/for/$branch; }; f' 위 명령어를 한번 실행하면 그 ..
keep (현재 만족하는 부분, 계속 이어갔으면 하는 부분) 1일 1 커밋을 잘 지키고 있음 서로 존중하고 화목한 분위기 함께여서 두렵지 않음 명확한 역할 분담 원활한 소통 빠른 실행력 새로운 기술에 대한 거부감 없는 수용력과 판단력 충분한 회의를 통한 결과 도출, 의견 통합력 Try (problem)에 대한 해결책, 당장 action 가능한 것, 다음 회고 때 판별 가능한 것) 차주부터 지연되지 않도록 확실하게 계획을 짠다 다같이 쉬는시간 가지기 Jira를 적극 사용하기 푸쉬 하기 전에 빌드 항상 하기 Problem (불편한 부분, 개선이 필요하다고 생각하는 부분) 생각보다 볼륨이 크다 일정이 잘 지켜지지 않았다 jira 사용 미숙 빌드 확인을 잘 해야한다
모바일 앱에 어울리는 프로젝트를 하고 있는데 팀원 모두 앱개발 경험이 없었다. 진로도 앱개발 쪽으로 생각하고 있지 않기 때문에 PWA를 활용해보기로 했다. PWA를 APK파일로 만들어서 플레이스토어에 등록할 수도 있다. Next.js는 SSR인데 앱으로 만드는게 맞나요? Next.js는 기본적으로 SEO향상 등을 위해 첫 접속시에만 SSR을 활용하고 그 이후에는 SPA처럼 동작한다. 그래서 토스같이 앱을 개발하는 회사에서도 Next.js를 많이 사용하는 것 같다. SEO가 필요 없는 사이트인데 Next.js를 사용해야 할까요? 공유하기 기능이 있다면 사용하는 것을 추천한다. 링크 미리보기에 들어갈 내용을 og 태그로 작성하는데 CSR만 사용하면 모든 페이지 링크 미리보기가 똑같아진다. 페이지별로 대응을 ..
