VamosDev의 개발 브이로그

웹페이지는 공급하는 쪽에서 수정후 배포하면, 그 곳으로 사용자가 접속하기 때문에 별도의 업데이트 패치가 필요없지만,설치하는 파일일 경우에는 강제로 업데이트가 적용되도록 해야한다.아래는 S3 browser 그것을 하는 방법이다. 1. S3 browser 다운로드 후 설치 2. xml 파일 import 하여 로그인시 자동으로 기본 셋팅이 됨 3. 파일 경로에서 build 진행 ㄴ 빌드 실행 전 package.js 파일에서 버전 수정(업데이트) ㄴ 빌드 시 베타 먼저 한 후, 알파를 빌드해야 함. (베타가 무조건 알파를 덮어 버리는 이슈가 발생하기 때문) ㄴ 빌드 완료 시, 해당 프로젝트 > dist 폴더에 파일이 생성됨. ㄴ 참고) 아래와 같은 오류 발생 시 권한 문제이므로, cmd를 관리자 권한으로..

아래와 같은 두 함수 선언 방식의 차이 const 함수명 = () => {}function 함수명 () {}  1. 요약 1) 함수 선언문 : function 함수명() {} - function 키워드를 사용해 선언 - 호이스팅*이 적용됨 - this가 동적임 (일반 함수에서 this는 호출된 컨텍스트를 따름)  2) 함수 표현식 : const 함수명 = () = > {} - const 키워드를 사용해 변수처럼 선언 - 호이스팅이 적용되지 않음 - 화살표 함수로, 이 함수는 this를 부모 스코프에서 유지함  2. this 바인딩 차이 - ()=>{}와 같은 화살표 함수는 this가 변하지 않기 때문에 React 이벤트 핸들러로 사용함.// 1) 함수 선언문 : 일반 함수의 this는 호출된 객체(obj..

1. require()  - Node.js 환경에서 모듈을 가져오는 CommonJS 방식 - Node.js 환경에서는 require()를 사용하여 파일이나 패키지를 가져올 수 있음const fs = require("fs"); // Node.js의 파일 시스템 모듈 불러오기const express = require("express"); // npm 패키지 가져오기const app = express();// require("express")는 node_modules에서 express 패키지를 찾아서 가져옴  2. require vs import (ES Module) 1) CommonJS (require)Node.js에서 사용되는 모듈 시스템module.exports와 함께 사용비동기 import()와 다르게..

Audio 객체 생성 후 사용 시 장점!  1. javascript로 세밀하게 조작이 가능함.const introSound = new Audio("intro.mp3");introSound.play(); // 재생introSound.pause(); // 일시 정지introSound.currentTime = 10; // 특정 시간으로 이동introSound.volume = 0.5; // 볼륨 조절  2. DOM을 직접 조작할 필요 없음 - 태그를 사용하면 HTML에서 오디오 요소를 찾고(document.querySelector) 조작해야 함.  => 코드가 더 깔끔해// audio 태그 사용// Audio 객체 생성하여 접근const introSound = new Audio("intro.mp3");intr..

const countDownRef = React.useRef>();ReturnType는 제네릭 유틸리티 타입으로, 함수 T의 반환타입을 추출하는 역할// 1.unction myFunction() { return 42;}type MyReturnType = ReturnType; // number를 가져옴// 2.const value = "Hello";type ValueType = typeof value; // string을 가져옴  * typeof - JavaScript에서 변수나 값의 타입을 가져오는 연산자인데, TypeScript에서는 타입 추론용 키워드로 사용됨. typeof를 ReturnType과 함께 사용하면, 특정 함수의 반환 타입을 안전하게 가져올 수 있음.(typescript에서는 그냥 세트..

1. Zustand 란? - 상태 관리 라이브러리, Redux보다 간단함.  2. 주요 메서드 1) create : Zustant의 기본 스토어 생성  - create(set => {...})를 사용하면 상태(store)*를 만들 수 있음. - set을 이용해 상태 업데이트 가능! - Redux의 createStore(reducer) 또는 configureStore({ reducer })와 같음import { create } from "zustand";const useStore = create((set) => ({ count: 0, increase: () => set((state) => ({ count: state.count + 1 })),}));function Counter() { const { ..

폼 양식(입력 양식)을 만들고 내용을 쿼리로 전송하는 태그 - 사용자의 입력을 받음- type 속성 : 입력 방식 종류 선택, checkbox, date, password(입력 값 비노출) 등 값 선택 가능- name 속성 : input 식별자 - input의 라벨 역할- 이런식으로 감싸면 라벨만 클릭해도 input이 선택됨.- 아니면 병렬로 표기하고 input id=email / label for=email 식으로 연결해 줄 수 있음. - type 속성: 기본값 'submit' 쿼리*로 데이터를 보냄- type을 'reset'으로 하면 초기화, 'button'으로 하면 아무 동작을 하지 않음.- form 태그 밖에 작성할 경우 아무 동작을 하지 않음!   [심화]   * form 태그의 action ..

[설치] https://analytics.google.com/analytics/web/provision/?utm_source=OGB&utm_medium=app&authuser=0#/provision Redirecting... analytics.google.com '측정시작' 클릭 아래 단계를 순차적으로 진행 1.계정 생성  - ID 입력하고 다음 2. 속성 만들기 - 측정할 시설 세부정보 등록 (웹페이지, 모바일페이지 등 여러개를 등록하여 측정할 수 있다.) 3. 비즈니스 세부정보 - 설문조사 진행 4. 비지니스 목적 - '웹 또는 앱 트래픽 파악'  체크 > '만들기' 클릭 4-1. 서비스 약관 동의 - GDPR 요구 약관에도 동의 '체크'   (구글은 쿠키를 통해 방문자 정보 수집, 그런데 유럽은 쿠..

1. 회원 가입 및 로그인 https://www.netlify.com/ Scale & Ship Faster with a Composable Web Architecture | NetlifyRealize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!www.netlify.com 2. 맨 하단 파일 업로드 선택하여 index.html 문서가 있는 폴더를 업로드 3. 배포 후 site configuration에서 주소(url) 수정도 가능 함.

SNS에 미리보기를 제공하는 meta 태그.이를 잘 활용하면 예쁘게 보이도록 할 수 있음! 그중 페이스북이 만든 '오픈그래프'가 소셜 미리보기 기능을 제공함.property의 'og:' 값이 오픈그래프를 의미함. 아래 코드를 html 문서의 head 부분에 입력 * 참고1"og:image" 태그 사용 시, 프로젝트 내에 이미지를 업로드하여 해당 이미지의 주소를 사용하면 표시되지 않음.이유 - react는 CRS기 때문에 미리보기 제공 시에는 실제 이미지 로딩이 되기 전 빈 html만 있는 상태기 때문임. 해결 방안 - 온라인 웹상에 업로드된 이미지의 주소를 사용함. * 참고2간혹 카톡 서버 URL 캐시로 인해 새로 적용한 og image가 보이지 않을 수 있음 해결 -카카오 디버거 툴을 이용하여 ur..