폴리프레임

기업에서 API를  CDN만을 고집하는 경우가 있습니다. API를 CDN을 통해서만 제공하고, 별도의 모듈 형식으로 제공하지 않는 것이 기업에게 여러 가지 장점을 제공합니다. 버전 관리와 업데이트 제어: API를 CDN을 통해 제공하면, 기업은 사용되는 API의 버전을 효과적으로 관리할 수 있습니다. 사용자가 각자의 서버에 API를 설치하는 경우와 달리, CDN을 통해 API를 배포하면 중앙에서 쉽게 업데이트를 배포하고 적용할 수 있습니다. 이는 보안 패치, 기능 개선 및 버그 수정을 신속하게 배포할 수 있게 하며, 사용자가 오래된 또는 지원되지 않는 버전을 사용하는 것을 방지할 수 있습니다.성능 최적화: CDN은 전 세계에 분산된 서버 네트워크를 사용하여 컨텐츠를 제공합니다. 이는 사용자에게 더 빠른 ..

JavaScript 2024. 5. 3. 17:54

이 둘은 OpenLayers에서 쓰이는 클라스(Class)로 구현되어 있습니다. 특히 마커를 표현하려면 두 클라스로 구현한 객체들의 메소드와 속성을 사용하여 기능을 구현합니다.VectorSource: 이 클래스는 벡터 데이터를 저장하는 소스로 사용됩니다. 벡터 데이터는 지리적 객체들을 포함할 수 있으며, 이 데이터는 GeoJSON, KML 등 다양한 형식에서 로드할 수 있습니다.VectorLayer: 이 클래스는 VectorSource를 사용하여 지도 위에 벡터 데이터를 표시하는 레이어를 만듭니다. 레이어는 지도 상의 시각적 표현을 담당하며, 스타일링, 이벤트 처리 등의 기능을 제공합니다.import VectorSource from 'ol/source/Vector';import VectorLayer fr..

JavaScript 2024. 5. 3. 16:03

***** 배열을 반환한다***** 는 것이 중요함!휠게임을 만들면서 색상의 반복 선택을 방지하고자 만든 함수 const assignSegmentColors = (numItems, availableColors) => { let lastColorIndex = -1; return Array.from({ length: numItems }, () => { let colorIndex; do { colorIndex = Math.floor(Math.random() * availableColors.length); } while (colorIndex === lastColorIndex); lastColorIndex = colorIndex; return ..

JavaScript 2024. 4. 30. 18:39

UUID(Universally Unique Identifier)데이터의 고유성을 보장하기 위해 널리 사용됩니다.고유한 128비트 길이의 식별자입니다.보통 32개의 16진수로 표현되며, 하이픈으로 구분된 5개의 그룹(예: 123e4567-e89b-12d3-a456-426655440000)으로 나뉩니다.난수를 기반으로 생성되기 때문에 예측이 불가능하고, 중복 확률이 극히 낮습니다. 이 특성은 데이터베이스의 키, 세션 식별자 등 고유해야 하는 값에 적합합니다. crypto.randomUUID()  최근 많이쓰이는 것은  crypto.randomUUID() 함수이며 JavaScript와 Node.js에서 UUID를 생성할 수 있는 내장 메서드로, 별도의 외부 라이브러리 설치 없이 사용할 수 있습니다. 이 메서..

JavaScript 2024. 4. 26. 17:50

웹 브라우저에서 JavaScript를 사용할 때, window.location.search 속성은,  현재 페이지 의 쿼리 스트링에 접근하여 현재 페이지 URL의 쿼리 스트링 부분을 가져옵니다. 이는 '?' 문자로 시작하여 URL의 파라미터를 포함하는 문자열입니다. 이 문자열을 사용하여 페이지의 동작을 조절하거나, 특정 파라미터에 따라 다른 내용을 표시할 수 있습니다. 현재 URL 창에 http://4ok.kr/?userId=1234&theme=dark 이라면, const urlParams = window.location.search;console.log(urlParams) // ?userId=1234&theme=dark

JavaScript 2024. 4. 25. 16:20

자바스크립트에서 보편적으로 사용하는 api는 URLSearchParams입니다. 그러나 중첩된 객체/배열 등 복잡한 것을 다루려면 qs API를 사용해야 합니다. 차이점을 정리해 보겠습니다. 1. URLSearchParams내장 API: URLSearchParams는 웹 브라우저가 기본적으로 제공하는 API입니다. 별도의 라이브러리 설치 없이 사용할 수 있습니다.기능: 이 API는 URL의 쿼리 스트링을 파싱하고, 조작하고, 직렬화하는 기본적인 기능을 제공합니다. 쿼리 스트링의 키-값 쌍을 추가, 삭제, 검색, 수정할 수 있습니다.단순성: 배열이나 복잡한 객체를 쿼리 스트링으로 직렬화하는 등의 복잡한 작업은 지원하지 않습니다.브라우저 지원: 현대적인 브라우저에서 널리 지원됩니다. 브라우저에서 간단한 쿼리..

JavaScript 2024. 4. 25. 13:38

프로젝트가 완성되었으면, 빌드를 완료한다. npm run build 빌드 완료된 디랙토리명을 확인한다. Vite.js --> "dist", React.js --> "build" 1. firebase console 로 가서, 프로젝트 추가 또는 선택을 한다. 2.앱 추가하여 시작 - 앱 선택 3. 앱 닉네임 설정 - 예) rkko4 4. 호스팅 설정 클릭 - okkr-420413(아직배포없음) 5. 앱등록 버튼 클릭 6. Firebase SDK 추가 를 위해 코드 생성됨 npm install firebase 7. 터미널 통해 위 firebase 설치하고, package.json 에 등록되었음을 확인 8. 복사한 SDK 내용을 프로젝트 루트에 firebaseConfig.js 라는 파일로 붙여 넣는다. 9. ..

JavaScript 2024. 4. 17. 21:44

React에서 사용하던 react-dotenv 를 사용하였으나 계속해서 에러를 해결 못하였고, Vite 프로젝트 설정과 충돌하고 있는 것으로 보입니다. 그런데, Vite의 내장 환경 변수 관리 기능이 있음을 알았고, 이를 이용해서 쉽게 해결 할 수 있었습니다. Vite 환경 변수 로딩 사용 Vite는 .env 파일을 자동으로 로드하고, import.meta.env를 통해 환경 변수에 접근할 수 있게 해줍니다. 예를 들어, .env 파일에 다음과 같이 설정할 수 있습니다. VITE_API_URL="AI......sw" 그리고 애플리케이션 코드에서는 다음과 같이 접근할 수 있습니다. console.log(import.meta.env.VITE_API_URL); or const Google_API_KEY = i..

JavaScript 2024. 4. 17. 18:59