#cdn

질문 2

해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

10달 전 · 프레드윰 님의 답변 업데이트

php + 그누보드5 관련 웹사이트 질문입니다

안녕하세요. 저는 React + TS 기반 프론트엔드 개발자 신입입니다. 회사에서 제작했던 사이트 중 하나가 php + 그누보드5로 제작 되었는데 해당 사이트를 리뉴얼 해야합니다. 그나마 수정 할 부분은 이미지 하나로 이루어진 랜딩페이지여서 목업은 php를 몰라도 진행이 가능하다 생각되는데 JS 라이브러리를 사용할 수 있는건지 몰라서 질문드립니다. 예를들어 AOS를 사용한다 치면 CDN SOURCES를 이용해서 라이브러리를 사용하면 되는걸까요? php와 그누보드를 하나도 모르다보니 간단한 페이지 수정은 가능하지만 기능 구현에 있어서는 기존 JS 개발하듯이 하면 되는지 모르겠네요.

개발자

#php

#프론트엔드

답변 1

일 년 전 · 문정동개발자 님의 새로운 답변

웹폰트 나눔스퀘어네오 윈도우 크롬 적용안되는 현상

React 프로젝트이며, 웹폰트로 나눔스퀘어네오 cdn방식으로 가져오고 있습니다. 맥에서는 잘 적용되는데, 윈도우 크롬 콘솔에 에러 뜨고 네트워크탭 - 폰트 확인 시 404가 뜨는데, 혹시 저와 같은 현상인 분 있으신가요?? 콘솔 에러 OTS parsing error: Unable to instantiate font face from font data. ``` @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff') format('woff'); font-weight: normal; font-style: normal; } ``` 나눔스퀘어네오 폰트 https://noonnu.cc/font_page/1053

개발자

#프론트엔드

#react

#fronted

#font

#웹폰트

답변 1

보충이 필요해요 1

일 년 전 · 프레드윰 님의 새로운 답변

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

개발자

#html-css-js

#웹디자인

#css

#html

#script

답변 2

일 년 전 · 김인후 님의 새로운 답변

넷플릭스같은 영상 스트리밍 서비스

문득 가족들끼리 찍은 영상이나 사진들을 볼 수 있는 개인 서비스를 만들어보려 합니다. 항상 Django 프레임워크만을 이용해 구현했는데, 이번에는 영상 스트리밍에 효과적이라는 node.js를 이용해 구축하여 진행해 보려 합니다. 그리고 영상이나 사진들을 S3에 저장해두고 CDN 세팅 후 일부 로딩씩 가져오는 방법으로 구현해 보려 합니다. 위의 내용이 가능한지 검증해보지 못했고 일부 블로그에서 확인한 내용입니다. 알고있는 지식이 전무하여 관련 아키텍처나 어떤 방법으로 구현하면 좋을지 조언을 받아보고 싶습니다.

개발자

#스트리밍

#node.js

#영상

답변 1

추천해요 1

일 년 전 · 장훈 님의 새로운 댓글

AWS 로드밸런서 504 오류

안녕하세요. 혼자 해보다가 도저히 해결이 되지않아 도움을 구하고자 글을 작성합니다. Express로 구축한 서버를 배포하기위해 AWS EC2를 이용해 ubuntu 인스턴스를 생성한 후 Nginx를 인스턴스 내에 설치하고 Express를 pm2로 구동한 후 Nginx와 proxy를 연결하여 정상적으로 작동됨을 확인했습니다. (Curl 확인 및 퍼블릭 ip주소 접근) 그런데 ACM을 통해 발급받은 SSL인증서를 연동하여 HTTPS연결이 가능하게하려고 로드밸런서를 생성하였는데 cdn접속시 504 오류가 나옵니다. 또, 대상그룹도 아래 사진과 같이 Unhealthy, Request timed out이라 나옵니다 (인스턴스 퍼블릭 IP주소는 정상적으로 접근이 가능함) 어떻게해야 ssl인증서를 연동하여 https연결이 가능하게 할까요 ㅜㅜ 제발 살려주세요 12시간 넘게 삽질중입니다.ㅑ

개발자

#ec2

#express

#nginx

#https

#ubuntu

답변 3

일 년 전 · 이승훈 님의 새로운 댓글

react 취약점 경고 처리 방법이 궁금합니다.

React에서 11개의 취약점 경고가 나타났습니다. 이 중 4개는 중간 수준이고, 7개는 높은 수준의 취약점입니다. 원래는 더 많았지만 모듈 버전 업데이트 과정에서 해결된 것도 있습니다. 그럼에도 불구하고 11개의 취약점이 남아 있는 상태입니다. 이러한 취약점 경고를 일정 수준은 무시하는 것이 좋을까요? 아니면 100% 해결하는 것이 더 좋을까요? ps. 해결 했습니다. 모든 취약점에 해서 모듈 업데이트 진행 및 특정 모듈의 경우 대체 & cdn 주소로 변경했습니다.

개발자

#react

답변 1

추천해요 1

2년 전 · 강병진 님의 새로운 답변

React 환경 변수 설정 파일 사용 (.env 파일) 관하여

환경에 따라서 경로를 다르게 설정하기 위해서 다음과 같이 .env 파일을 정의하였습니다. 하지만 사용하는 곳에서 console.log 확인해 보니 정의한 주소로 나오지 않습니다. 무엇이 잘못 되었을까요? // .env.development API = https://m.j-sone.com:6420 URL_BASE = https://m.j-sone.com:6420/game_down/fgt-game // .env.production API = https://w.j-sone.com:6421 URL_BASE = https://jsonecdn.j-sone.com/fgt-game // common.ts export const API = process.env.API; export const URL_BASE = process.env.URL_BASE; console.log(API) => http://localhost:3000/undefined

개발자

#react

#node.js

답변 1

2년 전 · 김주호 님의 답변 업데이트

주니어 프론트엔드 고민 ㅜㅜ

프론트 개발자로 1년이 되어 이직을 하게 되었는데 질문이 있습니다. 최종합격을 통보받고, 입사해서 어떤 라이브러리와 프레임워크로 개발할지 궁금하여 물어봤는데, vue, nuxt.js, vite를 사용한다고 답변이 왔었고 Next.js를(심지어 전 직장에서는 생판 처음써보는 JSP로 Vue를 CDN으로 불러와 로우레벨로 유지보수를 해서 실무 사용 경험은 또 없습니다 ㅜㅜ) 가장 잘 다루는 저에게는 vue는 너무 생소한것 같습니다. 물론 하나를 알고 있으면 다른 하나도 쉽게 배울 수 있는건 알지만, 저는 한참 부족하고 머리가 남들보다 좋지않아서 많은 시간이 필요할 것 같습니다. 제가 입사하고 일을 잘 할지도 모르겠고 수습기간에 짤리지는 않을까 너무 걱정입니다 ㅜㅜ. 또 이사람들은 저를 왜 뽑은건가 싶기도 하구요... 역시 1년차라 신입과 다를게 없으니, 그냥 처음부터 알려준다고 생각하고 개발 외의 부분을 좋게 봐주셔서 저를 뽑았다고 생각하고 편안한 마음으로 다니는게 맞는거겠죠...? 이번에 연봉이 정말 많이 올라서 심적으로 더 걱정되는 것 같아요..

개발자

#이직

#vue

답변 2

2년 전 · 이상선 님의 새로운 답변

Async await fetch 오류

const Content: React.FC = () => { const [htmlContent, setHtmlContent] = useState<string>(''); const data = { "filePath": ""https://cdn-image-dev.test.io/dev/contents/terms/2023/10/11/",", "fileName": "test.html" } const url = `${data.filePath}${data.fileName}`; // HTML 파일 가져오기 const fetchHtmlFile = async () => { try { const res = await fetch(url); console.log('res', res); if (res.ok) { const html = await res.text(); setHtmlContent(html); } else { console.error('Failed to fetch HTML file'); } } catch (error) { console.error('Error fetching HTML file:', error); } }; fetchHtmlFile(); return( <div dangerouslySetInnerHTML={{ __html: htmlContent }} /> ) } fetchHtmlFile 호출 시켜 res에서 얻은 html소스를 가져와 htmlContent에 넣어야하는데 에러나네요,, **에러메세지 Content.tsx:30 Error fetching HTML file: TypeError: Failed to fetch Cors 오류 참고 -- api url : https://api-dev.test.io/api/test/v1/~~ 도와주세요!

개발자

#react

#html

#async

#fetch

답변 1

2년 전 · 손정현 님의 답변 업데이트

cloudflare vs aws

안녕하세요 최근 서버 아키텍처 및 보안에 관심이 생겨 대표적인 서비스인 aws의 다양한 기능들을 맛보기로 구경하고 공부해보고 있습니다. 역시 ec2 같은 기본적인 서비스 외에도 cloudfront, WAF, ACM, event bridge 등 이미 수많은 서비스들이 aws에 모두 존재하더군요.. 그러나 아직 제대로 사용해본적이 없어 있다는 것만 알고 구체적인 비용 정책이나 자세한 사용법은 모르고 넘어간 상태입니다. aws에 다양한 기능들이 있으며 배포 시에 필연적으로 aws를 마주하게 되지만.. 아직 취업을 하지 못하고 사이드 프로젝트만 하는 저는 비용적인 면이 크게 부담이 되었는데요.. 여기서 경제성과 편리성을 고려했을 때 cloudflare의 서비스들이 굉장히 매력적으로 느껴졌습니다. 보안 전문가가 아닌 취준 백엔드 개발자인 제가 몰랐던 보안취약점까지 모두 cloudflare가 관리하며 프리티어에서는 미국 리전이긴 하지만 cdn 서비스까지, 그리고 이 모든 점을 무료로 제공해준다는 점이 말도 안된다고 생각이 들었습니다. 또한, aws s3 대신 cloudflare r2를 사용하면 미친 비용절감이 된다는 영상도 보았는데 실무에서는 다들 aws만 사용하시는 것 같더군요.. (cloudfront+WAF+ACM 등) - s3 - ec2 와 같은 아키텍처를 (cloudflare service) - r2 - ec2로 변경하면 더 나은 보안 및 편리성 그리고 경제성을 챙길 수 있을 것 같은데 이렇게 두지 않는 이유가 있을까요?? 클라우드 서비스의 요금제도 aws와 비교했을때 제공하는 서비스에 비해 저렴한 편이라고 개인적으로 생각되네요.. 아직 잘 모르는 지망생이라 다양한 점들을 고려하지는 못했지만 aws를 사용하는 데는 이유가 있을거라고 생각이 됩니다! 의견 한번씩만 부탁드립니다! +) cdn 서비스는 한국 리전을 사용하려면 엔터프라이즈 요금제를 써야하는데 이게 엄청 비싸다는군요.. 그렇다면 해외 접속도 빈번한 글로벌 서비스라고 고려한다면 위 아키텍처가 이점을 발휘할 수 있을까요?

개발자

#cloudfront

#waf

#aws

#s3

#아키텍처

답변 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

웹 폰트를 유료화 시키려면 어떤식으로 개발해야 하나요?

웹 프로젝트에서 시스템 폰트를 유료 아이템으로 개발하게 되었는데 어떤식으로 해야 할지 감이 안잡힙니다. 모바일앱 같은 경우 로컬로 폰트를 다운 받아서 적용시켜줄수 있는것 같은데 웹은 서버에 구입 내역 정보를 저장하고 해당 정보 확인 후 매번 cdn으로 폰트를 적용해야 하는건지 감이 잘 안잡히네요. 유료 시스템 폰트 전체를 프로젝트 내부에 전부 저장하는건 말이 안되는것같고.. 혹시 이 부분에 대해 조언 좀 해주실 수 있을까요?

개발자

#web-font

#paid

#폰트

#유료

답변 1

2년 전 · 최경훈 님의 새로운 답변

react,javascript ImageUrl to File

안녕하세요! react를 이용하여 개발 중 입니다. 아직 주니어라 모르는게 많아 여쭙습니다.. 상품을 수정 시 기존 올려놓은 이미지가 수정이 안되어있으면 수정이 안된 이미지의 File 객체를 그대로 서버에 요청을 보내야하는 상황입니다. 상품의 이미지는 상세API에서 CDN URL로 받고 있는데 해당 CDN URL을 이용하여 File 객체를 얻으려면 어떻게 할 수 있을까요? 검색 후 url get 요청으로 blob()을 이용하여 File객체를 만드는 방법을 해봤는데 size가 0이 나와서 찾던 중 해당 방법은 local 파일에 엑세스할 경우인걸로 이해를 했는데 제가 이해를 한게 맞을지.. 다른 방법이 있는지 궁금합니다.

개발자

#react

#javascript

#cdn

답변 1

2년 전 · 커리어리 AI 봇 님의 새로운 답변

next.js getServerSideProps 관련해서 질문드립니다.

1. getServersideProps(serverless function)는 동적인 컨텐츠를 제공해야하기 때문에 정적인 콘텐츠를 전달해주는 cdn를 거칠 수 없다고 알고 있습니다. 그래서 vercel origin 서버까지 통신을 거쳐서 콘텐츠를 전달 받기 때문에 TTFB가 느릴 것 같다고 생각했는데 여기까지 맞는 생각인가요? 2. next.js v13에서 edge(cdn)에서 동적인 콘텐츠를 받아올 수 있게 하기 위해 세그먼트 런타임 옵션(https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes#segment-runtime-option)을 통해 nodejs 대신 edge runtime으로 설정해주면 serverless function이 edge function이 되는건가요? 3. 커리어리 홈화면을 보니 getServersideProps를 사용하고 있고 pre-rendering는 간단한 골격만 하고 pre-fetch는 안해주고 있는것 같은데, 새로고침 했을때 TTFB를 300ms 정도로 유지할 수 있는건지가 궁금합니다! 저는 프로젝트 규모가 크지않은데도 불구하고 가끔씩 새로고침을 하면 TTFB가 1초이상 걸릴 때도 있거든요.. 어떻게 적용했는지 알려주신다면 큰 도움이 될 것 같습니다! 🙇🏻‍♂️

개발자

#next.js

#getserversideprops

#엣지컴퓨팅

답변 2

추천해요 2

2년 전 · 커리어리 AI 봇 님의 새로운 답변

iOS 갤러리 권한 관련해 질문드립니다.(미디어 라이브러리에 저장된 정보를 외부에 공유할 때)

우선, 저는 개발자는 아니고 주니어 기획자인점 미리 밝힙니다. 개발 관련한 지식이 부족해 이렇게 도움을 구합니다..;; 현재 앱에서 특정 활동을 완료하면 영상 콘텐츠를 만들어 고객에게 제공중에 있습니다. 앱 내에서 해당 콘텐츠를 표출하기 위해 CDN 서버에 업로드 된 영상의 url(스트리밍 아니고 로컬에 다운로드하는 url)을 통해서 앱에 정보를 표출하고 있는 상황입니다. 콘텐츠를 표출하기 위해 만들어진 특정 페이지의 경우 다음과 같은 기능을 제공합니다. 1. 영상 재생 2. 영상 다운로드 3. 영상 공유 영상 공유시에는 CDN에서 제공하는 url이 스트리밍을 위한 url이 아닌 관계로 공유를 위한 버튼을 클릭함과 동시에 로컬에 영상을 내려받고 로컬에 저장이 완료되면 그때 공유를 진행할 수 있도록 구성되어 있습니다. 문제는 안드로이드는 이러한 과정이 정상적으로 진행되어 사용자가 콘텐츠를 공유할 수 있는데, ios는 불가하다는 점입니다. 이러한 과정이 불가한 이유에 대해 확인해보니(내부적으로), CDN 서버에서 제공하는 URL을 통해 영상을 내려받아야 하는데 안드로이드는 갤러리에 대한 접근 권한을 열어주지만, ios는 접근 권한을 열어주지 않는다고 하네요. 제 입장에서는 이해가 가질 않아 Apple에서 제공하는 정보를 확인해 보았으나, 그 어디에도 App에 대한 사용 권한(개인정보추적, 연락처, 갤러리, 카메라 등)을 이미 허가한 상태라면 관계가 없다는 정보만 확인할 수 있었습니다. apple photokit 문서에도 해당 kit을 활용하면 앱에서 로컬 디바이스의 미디어 라이브러리에 접근할 수 있고 이때, 사진 편집을 비롯해 공유 앨범에 대한 접근(이 경우 사용자 본인이 아닌 다른 사용자가 업로드 해둔 미디어까지도 앱이 열람할 수 있는 셈으로 생각되는데..)도 가능한 것으로 나와있다보니 계속 머리만 복잡해지더라구요..;; 혹시 제가 Apple의 개인정보 지침 관련해서 놓치고 있는점이 있는지(가령, A앱에서 B앱으로 공유할 경우 제3자에게 사용자의 정보가 공개되므로 불가능하다거나하는..) 궁금합니다.. 횡설수설이지만, 혹시나 찰떡같이 알아듣고 어느정도 실마리라도 주실 수 있는 분이 있다면 답변 남겨주시면 감사하겠습니다..ㅠㅠ

개발자

#ios

#개인정보

#영상

#개발

답변 1

2년 전 · 성원 님의 새로운 답변

SSG 의 결과물이 preload 된 상태가 정확히 어떤 상태인가요 ?

SSG 방식에서 preload 된 페이지를 CDN을 통해 접근하여 가져온다고 하는데 pre-load되었다는 말은 DOM 구성이 완료된 상태를 말하나요?

개발자

#ssg

#cdn

#static-site-generation

답변 1

2년 전 · 익명 님의 새로운 댓글

마크다운 에디터에 클립보드 이미지 붙여넣기 기능을 구현하려면 어떻게 해야 하나요?

제목 그대로 마크다운 에디터에 클립보드 이미지 붙여넣기 기능을 구현해야 하는데요. 어떤 식으로 접근해야 하는지 조언을 구하고자 합니다. clipboard API로 검색하니 관련 정보가 좀 나오긴 하는데요.. 내용을 봐도 어떤 흐름으로 동작시켜야 하는지 감이 잘 안 와서 질문 드립니다ㅠㅠ 리액트를 사용하고 있고, 업로드하는 이미지는 사내 CDN url로 바꾸고 있어요! 추가로 라이브러리를 사용해야 하는 건지 직접 구현해야 하는 건지도 의견 주시면 감사하겠습니다.

개발자

#react

#clipboard-api

답변 1

3년 전 · 익명 님의 새로운 댓글

여러 자료들을 저장하고 꺼내는 서비스 찾고 있습니다

이미지, 영상뿐 아니라 여러 문서 pdf 등 저장이 가능한 곳을 찾고 있습니다. 웹 서비스 개발 중인데 파일, 이미지등 자료들을 저장하는 곳을 분리해서 저장을 하고 싶어서요 일반 aws ec2 같은 서비스가 아닌 cloudinary, firebase , cdn 을 이용하는에 이미지나 영상만 저장하는 것이 아니라 파일도 같이 사용 할 수 있는 서비스가 뭐가 있을까요? 여러 자료들을 저장하고 꺼내는 서비스 찾고 있습니다 목적은 외부 서비스를 이용해서 파일을 앱 추가 작업을 할때 적게 작업 하고 싶어서 입니다.

개발자

#react

#firebase

답변 1

추천해요 3