1. 유데미 한글 자막이 제공되지 않는 경우 유데미에서 WEB AR 관련 코스를 학습 중인데 영문 자막이라 불편함이 있었다. 구글링의 통해-완벽한 번역은 아니지만-유용한 한글 자막 생성 팁을 얻게 되어 기록한다. 2. 유데미 한글 자막 생성 방법 대본 활성화 > 대본 마우스 우클릭 > 한국어로 번역 자막 > 자막 설정 > 동영상 아래 표시(토글 on) 크롬 개발자 도구 > 콘솔에 아래 코드 입력 if (typeof window.i === "undefined") { clearInterval(window.i); } else { let lastText = ""; function check() { let toEl = document.querySelector(".well--container--1cXrh span"..

1. 단말기의 카메라 이용한 사진 촬영 기능 스마트폰이나 노트북의 카메라를 이용해 사진을 촬영해 저장하는 기능을 구현하고자 하였다. react-webcam과 react-camera-pro가 눈에 띄었는데 공식문서와 데모를 통해 내가 원하는 기능에 react-camera-pro가 더 맞아 선택하였다. 2. Styled-Components가 설치되어 있어야! 처음에는 Next.js 프로젝트에서 진행을 했었다. Styled-Components가 없다는 에러가 발생하여 설치해 주었으나 역시 작동하지 않았다. 그래서 React.js 프로젝트를 새로 생성하여 테스트를 진행하였다. Usage의 코드를 이용해 테스트하였고 역시 Styled-Components가 없다는 에러가 발생하였다. 하지만 React.js 프로젝트..

1. react-qr-reader에서 qr-scanner로 갈아탄 이유! react-qr-reader 라이브러리를 이용해서 이미 프로젝트를 진행했었는데 Adobe Express에서 생성한 QR을 읽지 못하는 것이 아닌가?! 이 외에도 사용감이 좋지 못했기에 다른 라이브러리를 찾아보았다. 그렇게 해서 발견한 라이브러리가 qr-scanner이다. react-qr-reader 처럼 리액트를 위해 만들어진 라이브러리는 아니었지만 공식 문서와 데모를 살펴본 후 더 고민할 필요가 없었다. 2. qr-scanner를 리액트에 적용하기! 2.1. qr-scanner를 설치 npm install --save qr-scanner 2.2. qr-scanner 리액트 컴포넌트에 적용 장치의 카메라를 통해 QR을 스캔하고 스캔..

1. git clone 명령을 내렸는데 인증 실패!!! remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication. fatal: Authentication failed for (생략) git clone을 시도하였는데 위 와 같은 인증 실패 메시지가 표시되고 프로젝트 코드가 클론 되지 않았다. 2. token 발급/인증하여 해결 2.1. token 발급 깃허브에서 token을 발급받아 깃클론 명령에 적용하여 인증 문..

1. 구름 IDE에서 간편한 무료 서버 이용 통합 개발 환경 SASS 서비스를 무료로 이용할 수 있는 구름 IDE를 이용해 리눅스 명령어 실습을 진행하였다. 이 실습은 인프런의 "2022 30분 요약 강좌 시즌 1 : HTML, CSS, Linux, Bootstrap, Python, JS, jQuery&Ajax"에 포함된 리눅스 강좌를 학습하며 진행한 것이다. 구름 IDE : https://ide.goorm.io/my/dashboard 2022 30분 요약 강좌 시즌 1 : https://www.inflearn.com/course/%EC%A0%9C%EC%A3%BC%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-30%EB%B6%84%EC%9A%94%EC%95%BD# 2...

1. 리덕스 좀 복잡하네?! 상태관리 라이브러리 리덕스(Redux)는 다음과 같은 구조로 되어 있다. Store: 애플리케이션 상태를 저장한다. Action: 상태 변경을 요청하는 객체로, type필드와 필요에 따라 payload를 가진다. Reducer: 현재 상태와 액션을 받아 새로운 상태를 생성하는 함수로, 불변성을 유지하면서 상태를 업데이트한다. Dispatcher: 액션을 리듀서로 보내 상태를 업데이트한다. Store의 값은 모든 컴포넌트에서 사용할 수 있고, 변경하고자 하는 값을 Action에 담아 Dispatcher를 이용해 Reducer로 보내서 값을 변경할 수 있다. 이런 단순 깔끔한 구조이지만 코드로 작성하면 다소 복잡해진다. 2. 리덕스로 간단한 TODO리스트 구현, 뭔가 복잡?! 간..

1. 브라우저 정책으로 사용자와 상호작용 없는 오디오 재생 불가 문제 브라우저 정책으로 사용자와 상호작용없는 오디오의 재생이 안 되는 문제가 있어서 고민하고 리서치하다가 일렉트론을 이용한 데스크톱 애플리케이션으로 실행하면 오디오 재생이 가능하다는 것을 알게 되었다. 그래서 배포된 Vue.js 애플리케이션을 데스크톱 애플리케이션으로 만들어 보았다. 2. 일렉트론 프로젝트 생성하여 오디오 재생 성공! 2.1. 일렉트론 프로젝트 생성 일렉트론 공식 페이지의 Quick Start를 참고하여 프로젝트를 생성하였다. 데스크톱 애플리케이션으로 만들고자하는 웹 애플리케이션과는 별도로 일렉트론 프로젝트를 생성한다. // 별도의 일렉트론 프로젝트 폴더 생성 => 이동 => 설치 명령어 실행 npm i 2.2. 의존성 설치..

1. 클로저(Closure) 란? 클로저는 함수와 함수가 선언된 렉시컬 스코프(Lexical Scope) 사이의 특별한 관계를 나타내는 개념이다. 함수 내부에서 선언된 함수가 외부 함수의 변수에 접근할 수 있고, 그러한 함수를 클로저라고 한다. 클로저는 외부 함수의 변수에 대한 참조를 "닫아"(Capture)서 나중에 사용할 수 있도록 저장한다. 이로 인해 외부 함수가 종료된 이후에도 해당 변수에 접근할 수 있다. 2. 클로저와 관련한 몇 가지 개념 1) 렉시컬 스코프(Lexical Scope): JavaScript는 함수를 정의할 때 함수 내부에서 외부 스코프에 접근할 수 있도록 스코프를 정의한다. 이 스코프는 함수를 선언할 때 결정되며, 함수가 어떤 변수에 접근할 수 있는지 결정한다. 이러한 스코프 ..