개발 여행자, 현

기획부터 디자인, 프론트엔드, 백엔드 모든 과정을 혼자 고군분투하여 만든 'CCC 서비스' 개발 과정을 기록하고자 한다. CCC란 보기쉬운 유튜브 자동자막 서비스로, 유튜브 자동자막의 사용 경험을 높이고자 만든 서비스이다. 자세한 내용은 배포 이후 별도의 포스팅으로 소개하고자 한다. 이번 포스팅에서는 크롬 익스텐션 배포 방법을 간략하게 소개한다. 크롬 익스텐션 배포하기 1. 크롬 웹 스토어에 접속 후 설정 아이콘을 클릭하여 개발자 대시보드 클릭 2. Chrome 앱스토어 개발자로 등록하기 위한 수수료 $5를 결제 나는 해외결제 카드가 있어서 문제없이 진행했는데, 아마 Master 카드나 Visa 카드와 같이 해외결제 가능한 카드만 되는듯 하다. 3. 결제가 완료되면 개발자 대시보드 페이지에 접근이 가능 ..

[React] state 변경함수 사용시 유의할 점 (setState 비동기처리) 동기(synchronous) / 비동기처리(asynchronous)란? 자바스크립트는 일반적인 코드를 작성하면 동기적으로 처리한다. 동기적으로 처리한다는 것을 쉽게 얘기하면 코드를 적은 순서대로 윗줄부터 차례로 코드가 실행된다는 뜻이다. 사실 거의 모든 프로그래밍 언어들은 위에서 부터 차례대로 동기적으로 코드가 실행된다. console.log(1+1) console.log(1-1) console.log(1) // 결과값 2 0 1 자바스크립트에서 비동기 처리를 이용하고자 하면 ajax, setTimeout과 같은 함수들을 사용한다. 이런 함수들은 처리시간이 오래걸리는데, ajax를 예로 들면 인터넷 상황이 안좋으면 코드 실..

'React' must be in scope when using JSX 오류 리액트를 사용하여 프로젝트를 진행할 때 다음과 같이 React를 import 하지 않으면 오류가 발생한다. JSX는 자바스크립트 문법의 확장으로 ECMA 표준이 아니다. 따라서 바벨과 같은 툴로 JSX를 자바스크립트로 변환해야 한다. 바벨이 JSX가 사용되었음을 알고 이를 변환하도록 하기 위해서는 React를 반드시 import 해주어야 한다. import React from "react";​

프로젝트를 시작할 때 늘 처음에 npm init을 작성했는데 무슨 의미인지 모르고 사용하고 있던 내 자신을 발견했다. 1. npm init이란? npm init 다음과 같이 입력하면 'package.json' 파일이 만들어진다. 2. npm init -y의 의미 보통 npm init만 입력하면 npm project에 대한 기본 Form을 위와 같이 하나씩 작성해야한다. npm init -y 하지만 "yes"라는 의미의'-y' 속성값을 같이 입력하면 'default' 값으로 설정된 package.json을 만들 수 있다.