추가하고 싶은 기능이 생각보다 빨리 끝나서 얼른 TIL을 작성하고 자려고 한다!
👉 오늘 한 일
- React 개발 및 개발 상황 공유(2021.01.04~05)
- 회의(2021.01.04)
- 병원(2021.01.04)
👉 공부한 내용
- React 개발을 계속 진행했다. 디자인이 어느정도 나와서 입히고 있는데 생각보다 신경을 많이 써야하는 레이아웃이 있었다.
이미지 출처: https://kissme-wallpapers.com/1744
지금은 이미지로 대체했지만 원래 저부분에 카메라 화면이 보인다. 그리고 중앙에만 opcity가 없어지고 강조선이 있는 레이아웃을 그려야했다.
검색을 해보니 QR인식 같은 곳의 화면을 만들 때 중앙을 제외하고 상하좌우에 투명도가 있는 박스를 따로 그린다는 stackoverflow 글이 보였었다.
처음에 그렇게 만들려다가 radius 처리가 힘들 거 같아서 좀 더 검색을 해보니 사각형을 그리고 shadow를 큰 사이즈로 주는 방법이 있었다. 맞는 방법인지는 사실 확신이 없지만 일단은 맞게 나오므로 사용하고 있다!(혹시 더 좋은 방법이나 잘못된 점이 있으면 알려주면 감사하겠습니당,,,🙏🙇♂️) 코드는 아래와 같다.
// styled-components를 사용하고 반응형을 위해 vw, vmin을 사용했다.
// 사진과 강조색 선은 다른 색 선이다.
const RectangularGuide = styled.div`
width: 80vw;
height: 55vmin;
border: 4px solid #6adac1;
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.7); // 임의로 큰 값을 지정
border-radius: 8px;
`;- React-webcam 라이브러리를 사용하는데 카메라가 Load 되기전에 조금 심심하다는 느낌이 들었다. 그리고 잘못 찍었을 경우 다시 촬영 화면으로 돌아가는 부분이 필요했다. 그래서 저번에 추천했던 번역 / 리액트 훅스 컴포넌트에서 setInterval 사용 시의 문제점을 참고해서
Timer를 만들까했는데 카메라가 Load 됐을 때를 판단하면 굳이 만들 필요가 없어보였다. 그래서React-webcam을 살펴봤는데 HTMLMediaElement를 상속받는 HTMLVideoElement를 사용하는 것을 알 수 있었다. 그래서onLoadStart와onLoadedData를 사용해서 처리했다! 에러가 뜨고 다시 카메라로 돌아갈 때onLoadedData가 너무 빨리 떠서 에러 창이 안 보이는 경우는 없는지 확인해봐야겠다!
☕️ 잡담
회사에서 매주 월요일마다 전체 미팅를 하는데 병원때문에 늦게 참석했다,,,ㅠㅠㅠ 진짜 병 하나 때문에 병원을 세곳이나 갔다,,,🤦♂️ 마지막으로 대학 병원을 갔는데 목요일에 MRI를 찍는다,,, 큰 병은 아니라고는 하지만 약간 걱정된다,,,ㅠㅠㅠ 쨋든, 병원에 갔다가 늦게 갔는데 이미 회의도 많이 진행됐고 이야기들도 많이 나눈 상태였다. 중간에 들었으므로 이해하기 위해 칠판에 적힌 내용을 빠르게 훑고 내용에 집중했다! 좋은 아이디어들도 많은 것 같고 아이템들도 점점 구체화 되고 있는게 느껴졌다. 개발팀도 열심히해서 멋진 결과물을 보여줘야겠다!🔥
📑 참고사이트
- 아이유 Blueming(블루밍) 컴퓨터 배경화면 43장 (해상도 1920 x 1080) - 아리따움 배경화면
- React-webcam - Moz Morris님 github
- 번역 / 리액트 훅스 컴포넌트에서 setInterval 사용 시의 문제점 - jakeseo-javascript.js velog
- HTMLMediaElement, HTMLVideoElement - MDN 사이트
요리 좋아하는 코린이