Experience43 스타트업 기술 면접 후기 (프론트엔드) 인생 처음으로 스타트업에 방문하여 기술면접을 봤습니다. 일주일 정도 면접 문항을 준비하고, 예상 질문에 대해서 연습을 했었습니다. 면접 과정 최근에 원티드를 참고했을 때, 직원 수 대비 2개월 사이에 3분의 1이 퇴사를 했었습니다. 그래서 채용공고가 많이 올라와 있었으나, 스타트업 특성상 대부분 경력직을 뽑고 있었습니다. 하지만 저는 이 회사에 꼭 가고 싶은 마음이 있었기 때문에 자격요건을 무시하고 지원한 후, 따로 대표님의 이메일을 수소문해서 따로 저의 장문의 편지(?)와 이력서를 보냈습니다. 다행히도 저는 프론트엔드 개발자이지만 건축학과를 나와서 건축도메인이 있기 때문에 지원한 해당 스타트업이 서비스하는 산업이 건축설계 분야라 경력을 커버할 수 있는 지식과 열정을 저에게 기대하셔서 서류합격 후에 면접.. 2023. 8. 2. KT AIVLE School 빅프로젝트 - event loop, call stack, callback queue 학습 자바스크립트는? 자바스크립트는 논블로킹, 싱글 스레드 언어이다. = 호출 스택을 하나만 사용한다 = 동시에 하나의 일만 처리할 수 있다. 비동기 코드는 Back Stage로 보낸다. Back Stage = Web APIs, Callback Queue(Task Queue), Event Loop 비동기 처리 방법 Callback Function, Promise, async await, then catch 자바스크립트 엔진 자바스크립트 코드를 해석하고 실행하는 인터프리터 = 메모리 힙과 호출 스택이 존재 메모리 힙 = 변수, 객체 등이 저장되는 곳 호출 스택 = 함수가 호출되서 함수의 실행 문맥을 순서대로 쌓고 실행하는 스택으로 작동하는 것 자바스크립트가 구동되는 환경인 브라우저는 여러 개의 스레드가 사용된다.. 2023. 7. 25. KT AIVLE School 빅프로젝트 - SpeechRecognition 3주 동안 조원이 여러 음성 인식에 대한 인공지능 모델을 찾아보고, 적용을 하던 와중에.. 이미 브라우저에서 음성인식을 지원하는 것을 발견하게 되었습니다. 심지어 성능과 속도가 너무 좋아서 조원이 해온 결과물들이 쓸모가 없어져서 아쉽지만 SpeechRecognition을 사용하게 되었습니다. Web Speech API 웹 앱으로 음성 데이터를 핸들링 할수 있게 한다고 합니다. 이 API 안에는 2개의 구성이 있습니다. SpeechRecognition - 음성인식 SpeechSynthesis - 음성합성(발화) Instance properties SpeechRecognition.lang: 언어 선택 ("ko-KR") SpeechRecognition.continuous: 단일 / 연속 결과 선택 (false.. 2023. 7. 20. KT AIVLE School 빅프로젝트 - 텍스트 입력 Debounce 처리 사용하게된 이유 RTK의 useAppSelector, useAppDispatch를 사용하여 state를 갱신하고 가져오는 과정이 있었는데, dispatch를 할 때마다 관련된 state들이 리랜더링이 일어나면서 미리보기를 제공하는 영상과 이미지가 플리커 현상이 일어났습니다. 뿐만 아니라 tiptap 라이브러리를 사용했었는데, tiptap의 useEditor의 인자로 객체의 안에 onUpdate 키의 값으로도 입력할 때마다 리랜더링 되는 현상을 늦게 발견하게 되었습니다. 불필요한 리랜더링은 줄이는게 맞다는 판단이 들어서 사용하게 되었습니다. debounce 함수 코드 export default function debounce any, T>( func: F, delay: number ): (this: T, .. 2023. 7. 20. KT AIVLE School 빅프로젝트 - shadcn/ui 사용 후기 shadcn/ui 란? Re-usable components built using radix UI and Tailwind CSS. Radix UI와 tailwind css로 만들어진 재사용 가능한 컴포넌트 radix UI 란? An open-source UI component library for building high-quality, accessible design systems and web apps. 높은 퀄리티와 접근 가능한 디자인 시스템 및 웹 앱을 구축하기 위한 오픈소스 UI 컴포넌트 라이브러리 Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer.. 2023. 7. 20. KT AIVLE School 빅프로젝트 - 웹캠 녹화 구현 댄서블(춤을 연습하는 사람)이 춤을 추고 다음 구간 영상으로 넘어갈 때 POST요청을 보내는데, 댄서블이 춤을 춘 모습을 담기 위해서 react-wecam의 녹화할 필요가 있었습니다. 이를 구간 연습이 끝나거나, 한 번 더 연습하거나, 다음 구간으로 넘어가거나 여러 상황에 따라서 녹화를 시작하고 끝내야 하는 로직이 생각보다 복잡했습니다. hook 사용은 옳은 방법이 아닐 수 있습니다. 녹화 로직만 참고하시길 바랍니다. 구현 과정 Navigator.mediaDevices는 읽기 전용 속성은 카메라, 마이크, 화면 공유와 같이 현재 연결된 미디어 입력 장치에 접근할 수 있는 MediaDevices 객체를 반환합니다. - mdn web docs // 녹화 시작 함수 const startRecording = u.. 2023. 7. 19. 이전 1 2 3 4 ··· 8 다음
