프로젝트/work

file, blob 객체의 차이점

최근 사내 프로젝트를 진행하던 도중, ai 인식을 위해 키오스크 기기에서 촬영한 이미지 파일을 서버로 보내야 하는 상황이 있었다. 이미지 파일을 blob 형식으로 보냈는데, 서버에서 정상 인식이 되지 않는 상황이 발생해 디깅을 하다, File 형식으로 보내야 한다는 것을 깨닫고... 두 형식의 차이점이 무엇인지 궁금해졌다. 결론부터 말하자면, File 객체는 Blob 의 확장이다. 만약 input 을 통해 file 을 업로드 하면, 이 데이터의 형식이 바로 File 형식이다. 테스트를 위해 임시로 input 을 통해 file 을 받아 업로드 했을 때 정상 동작했던게 바로 이런 차이가 있기 때문이다... 그렇다면 Blob 객체란 무엇이냐? Blob 은 Binary Large Object 의 약자로, 이진 ..

프론트엔드 e2e 테스트 도입기: 구조화가 필요해..! (feat. cypress)

배경 기존에 서비스중이던 프로젝트 구조를 변경에 대응하기 쉽도록 리팩토링하는 작업을 맡게 되었다. 그 중 가장 시급했던 부분은 로그인/인증 파트였는데, 기존에도 이상하게 에러가 많이 발생하는 파트였지만... 에러를 잡기 위해서 고치면 고칠수록 다른 부분에서 또 다른 이슈가 발생하는 상황이 있었다. 규모가 규모인지라, 별도의 QA 팀도 없어서 이슈를 고쳤을 때 또 다른 이슈는 없는지, 또 어느 범위까지 영향을 미치는 것인지 충분히 파악이 되지 않은 상태에서 배포를 하다보니 미흡한 부분이 그대로 유저에게 노출이 되었고... 비슷한 이슈에 대한 반복적인 대응에 나를 포함한 다른 여러 유관부서 팀원들의 리소스를 낭비하게 되는 현상이 있었다. 😢 분명 나는 개선하려고 리팩토링을 시작했던 건데... 가독성도 좋아지..

CRA to Vite 마이그레이션 및 테스트환경 세팅하기

배경 CRA 기반으로 세팅된 사내 프로젝트 중 하나를 Vite 로 마이그레이션을 진행하게 되었다. CRA 는 최신 번들러에 비해 크기가 크고 속도가 느린 편이고, 현재 리액트에서 공식적으로 deprecated 된 상태라 변경이 필요했다. 공식적으로는 Next.js, Remix, Gatsby 등으로 새 프로젝트를 시작하라고 하는데, 그러면 전체 구조가 바뀌어야 하니까 가장 현실적이고 사례가 많은 Vite 를 도입하기로 함. 성과 빌드 타임과 로컬 컴파일 타임이 무진장진장 거의 3배 정도 줄어들었다. CRA : 빌드 타임 58.68s. Vite : 빌드 타임 19.61s. 기존에는 빌드를 하고 앱을 시작하기 까지 한 세월이 걸렸는데, 거의 시간이 거의 3배 정도 단축되어 DX 가 무척 향상되었다. 번들 사이..