❓ 발생 에러 프로젝트 진행중, 'react-nice-avatar'를 활용해보려 한다. https://www.npmjs.com/package/react-nice-avatar react-nice-avatar react library for generating avatar. Latest version: 1.3.1, last published: 3 months ago. Start using react-nice-avatar in your project by running `npm i react-nice-avatar`. There are no other projects in the npm registry using react-nice-avatar. www.npmjs.com 로컬에서는 아무 에러없이 잘 되는데 배포..

- 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다. var person = { firstName: 'Ung-mo', // 식별자 네이밍 규칙을 준수하는 프로퍼티 키 'last-name': 'Lee' // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키 } console.log(person) // { firstName: 'Ung-mo', last-name: 'Lee' } var person = { firstName: 'Ung-mo', last-name: 'Lee' // SyntaxError: Unexpected token - } - 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있는 경우에는 프로퍼티 키로 사용할 표현식을 대괄호([.....

- 명시적 타입 변환 var x = 10; // 숫자를 문자열로 타입 캐스팅한다. var str = x.toString(); console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x); // number 10 - 암묵적 타입 변환 var x = 10; // 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다. var str = x + ''; console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x); // number 10 참고자료: http://www.yes24.com/..

- 화면 왼쪽 사이드바에서 'Realtime Database'를 클릭하여 '실시간 데이터 베이스' 페이지로 넘어온다. - 아래 두번째 줄 'https://shoppy-......' 에 마우스를 올리면 '+'와 쓰레기통 아이콘이 활성화 되는데 '+'를 누르고 아래와 같이 '키'와 '값'을 입력하고 추가 버튼을 클릭힌다. - 이때, 로그인 했을 때, 유저의 정보를 console로 찍어보면 확인할 수 있는 'uid'값을 복사하여 '값'에 붙여넣기 한다. - '실시간 데이터베이스' 에 저장된 관리자 권한 코드를 가져오는 필수 코드 (초기화 코드) - 아래의 코드를 복사하여 내 프로젝트에 붙여넣기 한다. - firebase docs > build > Realtime Database > Web > Read and ..

- '프로젝트 추가'를 누른다. - 프로젝트 이름을 입력하면 '계속' 버튼이 활성화 된다. - 계정을 선택하면 '프로젝트 만들기' 버튼이 활성화 된다. - '계속' 버튼을 클릭하여 프로젝트 생성을 완료한다. - '사용자 인증 및 관리 (Authentication)' 클릭 - '사용 설정'을 클릭하여 '프로젝트의 공개용 이름'과 '프로젝트 지원 이메일' 설정 후 '저장' 버튼을 클릭한다. - Realtime Database 추가 - '미국, 벨기에, 싱가포르' 중, 내 나라에서 가장 가까운 나라를 선택한다. 한국의 경우, 싱가포르 선택. - 데이터 베이스를 누가 읽을 수 있고, 누가 쓸 수 있는지 규칙(?) 설정. 일단 테스트 모드로 시작 - JSON 객체 처럼 데이터가 전부 들어오는 것을 볼 수 있음. ..

Q. 팀 프로젝트를 진행하다가 멘토님께서 코드리뷰를 해주셨는데 addEventListener를 작성하고 removeEventListener를 해주라고 하셨는데 메모리 문제 때문이라고 하셨는데 그렇게 큰 차이가 있나요? A. 페이지나 DOM을 아예 나가는거면 상관없고 SPA특성이라서 해주는게 좋다. 대충 SPA는 페이지를 나가지 않기때문에 이벤트리스너가 쌓이게돼서 난 한가지 이벤트만 실행시키면 되는데 다른 이벤트리스너가 폭죽놀이하면서 두둥탁 하는 경우가 생길 수 있다. dom과 event listener가 상호 참조하는 경우 삭제해주지 않으면 상호 참조로 reference count가 0이 되지 않아서 영구히 남는 문제가 있다. addEventListenr(name, function)을 호출하면 시스템 내..

방법 01. Date객체의 ms 시간을 이용하여 생성한다. const id = new Date() 방법 02. uuid 라이브러리 사용하기 // uuid 설치 npm install uuid // 01. import {v4 as uuidv4} from 'uuid'; uuidv4(); // '9b1deb4d-3sd5-sdf2-asdf2cvbwe.....' // 02. import {v4: uuidv4} = require('uuid'); uuidv4(); // '9b1deb4d-3sd5-sdf2-asdf2cvbwe.....'

var num = 2; var kind; if (num > 0) { kind = "양수"; } else if (num 0) kind = "양수"; else if (num 0 ? "양수"..

var x = 2; var result = x % 2 ? '홀수' : '짝수'; console.log(result); // 짝수 x % 2가 true면 콜론(:) 앞의 두 번째 피연산자인 '홀수'반환, false면 콜론(:)뒤의 세 번째 피연산자 '짝수' 반환 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다. // 조건문(if...else)을 사용해도 삼항 조건 연산자 표현식과 유사하게 처리할 수 있다. var x = 2, result; // 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다. if(x % 2) result = '홀수'; else result = '짝수'; console.log(result); // 짝수 var x = 10; var result = if (x % 2) ..

▶ api key를 숨기기 위한 용도 (소스코드에서 숨기기 - 보안용) ▶ FE에선 코드가 전부 노출이 되기 때문에 api key를 숨기는 것은 BE 개발자에게 요청해야 한다. 파일명 : startProject.sh - 쉘 -한꺼번에 설치하는 방법 - 현업에서 자주 쓰이지는 않음. npm init -y // npm 초기화 npm i -D parcel vercel // parcel, vercel(서버리스 함수를 작동시키기 위함)을 개발의존성(devDependencies)로 설치 mkdir src // 폴더 만들기 touch src/main.js touch index.html // Window 사용자는 touch 대신 echo root 경로에 vercel.json 파일을 생성한다. // vercel.json..