김서버의 프론트엔드 일기

개요 평소에 에디터에 관심이 많아서 이미지 에디터를 fabric.js 로도 만들어 보았었는데, 가장 대중적이고 많이 쓰는 WISIWYG 에디터도 한번 직접 만들고자 해서 만들었었습니다. WYSIWYG란? What You See Is What You Get의 줄임말로 직역하자면 "보는 그대로 얻어 낸다". 라는 뜻을 가지고 있는 에디터입니다. 보통 어떤 게시물을 써야 하는 기능을 넣을 때, 글 뿐만이 아니라 이미지와 동영상도 게시물에 같이 녹여져 있어야 할 때, 사용이 되는 에디터입니다. 유명한 오픈소스로는 Quill.js, frolara editor, summernote가 있겠습니다. 도전과제 사실 WYSIWYG는 document.execCommand 라는 함수를 사용하면 간단하게 구현할 수 있으나, 이..

개요 최근에 웹 컨퍼런스 중 구글의 최홍찬 개발자님의 web의 audio api 연사를 듣고 나서 media 관련으로 간단하게 서비스를 만들어 보자는 생각으로 시작이 되었었습니다. 구현할 기능 카메라에 찍히는 자신을 녹화하면서 실시간 자신의 모습을 확인하기 면접 질문을 랜덤으로 뽑아서 하나씩 보여주고, 문제를 넘길 때마다, 기록해서 vtt 파일로 저장하기 vtt파일과 녹화한 영상을 가지고 자막과 함께 자신의 녹화된 모습을 보면서 피드백할 수 있게 하기 사용한 주요 API - getUserMedia: 사용자의 카메라와 마이크의 입력을 받고, 그 입력값을 stream 방식으로 실시간 입력을 받을 수 있습니다. - MediaRecorder: js native객체로 stream에서 발행하는 데이터를 Blob 파..

개요 Service Worker 는 우리가 사용하는 브라우저의 캐시 중에 하나입니다. 이 Service Worker는 요즘 웹 푸시 메시지 보내기와, PWA의 핵심 기술로 사용이 되고 있습니다. 이 Service Worker와의 첫 인연은 그렇게 좋지 않았습니다. 왜냐하면 회사에서 웹 클라이언트에서 버그를 수정하거나, 기능을 추가하고 마스터에 버전을 올려도 계속해서 과거의 버전의 웹이 사용이 되는 현상이 있었습니다. 그래서 추후의 업데이트 때도, 이런 증상이 나타나면 곤란해지기 때문에 반드시 해결을 해야하는 문제였었고, 그때 당시 저는 제일 먼저 주로 캐시가 원인일 것으로 생각을 하고 원인을 분석을 했으나, 오랜 삽질 끝에 밝혀진 원인은 Service Worker가 설정이 됨으로 나타나는 현상이었습니다...

개요 프론트엔드 개발은 서버에 요청을 보내서 필요한 콘텐츠를 받아 와서 화면에 그려주는 작업들을 많이 하게 됩니다. 또한 사용자의 입력을 화면에서 받아서, 서버에 넘기는 작업도 하게 됩니다. 그 중에서 사용자의 입력을 받아서 서버에 넘기는 것을 form이라고 부릅니다. 대표적으로 로그인 화면, 검색창, 필터, 그리고 더 나아가서는 페이지 네이션까지 형태는 정말 다양한 컴포넌트들이 있습니다. 위 컴포넌트들이 form인가에 대해서 의문이 들 수 있지만, 사용자에게 입력을 받아서 서버에게 요청을 보내는 큰 틀에서는 form이라고 부를 수 있습니다. React 공식문서에는 html form을 다음과 같이 설명을 했습니다. HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 ..