반응형 분류 전체보기68 밴드에서 동영상 다운받기 밴드에 등록된 영상화면에서 F12 또는 오른마우스 '검사'를 눌러 개발자 툴을 연다.( 크롬 브라우저 기준 ) 선택 툴을 누르고 영상을 선택하면 html코드 video태그에 src 주소를 찾을 수 있다.src주소 위에 오른마우스 > Open in new tab을 누르면 새로운 창으로 영상이 뜬다. 오른쪽 하단 옵션더보기 > 다운로드 2024. 9. 25. 웹사이트에서 사용된 기술 파악해주는 도구 Wappalyzer 공식 사이트 https://www.wappalyzer.com/ 어떤 사이트를 이용하다가 보면 무슨 기술을 이용해 만들어졌는지 궁금할때가 많았다.그러다가 wappalyzer를 알게되었다. Wappalyzer는 콘텐츠 관리 시스템, 전자 상거래 플랫폼, 웹 프레임워크, 서버 소프트웨어, 분석 도구 등을 감지한다고 한다. 사용방법은 간단하다.Chrome 웹 스토어에서 wappalyzer를 검색하여 설치하면 된다.https://chromewebstore.google.com/?hl=ko&utm_source=ext_sidebar Chrome Web Store브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다.chromewebstore.google.com 설치를 하면 크롬 브라우저 오른쪽 상단에 확장프.. 2024. 6. 3. Axios의 다양한 기능 Axios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js 환경에서 모두 사용할 수 있고, 다양한 기능을 제공하여 HTTP 요청을 쉽게 관리하고 처리할 수 있게 해준다. Axios의 주요 기능 / Promise 기반Axios는 Promise를 기반으로 동작하므로 비동기 작업을 쉽게 처리할 수 있다./ 요청 및 응답 변환요청 데이터를 자동으로 JSON 문자열로 변환하고, 응답 데이터를 JSON 객체로 변환한다. / 요청 취소요청을 취소할 수 있는 기능을 제공/ 자동 변환JSON 데이터를 자동으로 변환/ 타임아웃 설정요청의 타임아웃을 설정할 수 있다./ 인터셉터요청 또는 응답을 가로채고, 그 사이에 추가 로직을 삽입할 수 있다./ 헤더 설정요청에 대한 커스텀 헤더를 쉽게 설정할 수.. 2024. 5. 27. 데이터 전송 fetch와 Axiox 비교 브라우저 환경에서 HTTP 요청을 보내기 위해 사용되는 라이브러리로, fetch 또는 Axios가 사용된다. | fetch APIfetch는 브라우저 내장 API로, 최신 브라우저에서 기본적으로 제공된다. ES6 Promise 기반으로 동작하며, 간단한 요청에는 매우 유용하다. 장점- 내장 API로 별도의 라이브러리르 설치하지 않아도 된다.- 간단한 요청을 작성할 때 간결하게 사용할 수 있다. 단점- 기본 기능만 제공하고 오류 처리가 불편하다.- HTTP 에러가 reject되지 않고 resolve되기 때문에, 명시적으로 에러를 체크해야 한다.- 응답 데이터를 JSON으로 변환하려면 .json() 메서드를 별도로 호출해야 한다. fetch 예 >fetch('/api/data', { method: 'P.. 2024. 5. 27. VS Code 언어 설정하기 Ctrl + Shift + pConfigure Display Language 한국어 선택. Restart를 누르면 된다. 영어로 바꿀때도 위와 같다. 만약, 한국어가 목록에 없다면 Extensions에서 korean language pack...을 찾아 install 한다. 2024. 5. 23. React 버전 업데이트를 하게 된 이유 useId에 대한 공부를 하려고 기본적인 코드를 작성하고 실행했지만react에서 useId를 import해서 사용할 수 없다는 에러가 떴다. 원인은 리액트 버전의 문제였다.리액트 프로젝트를 설치하기 귀찮아서 언제였는지 기억도 나지 않는 예전에 설치해둔 곳에서 테스트 했는데 useId의 경우 react 버전18부터 사용이 가능했기 때문이다. 확인을 해보니 내가 설치한 리액트는 버전17이었고 리액트 업데이트가 필요했다. React 최신버전 확인 및 업데이트 업데이트를 위해 react 버전은 공식 사이트 https://react.dev/ 에서 확인한다. 만약, 최신 버전으로 업데이트 하려면 install을 하고 특정 버전으로 업데이트 하려면 update를 한다. 특정버전으로 업데이트 하려면.pack.. 2024. 5. 14. Node.js와 JavaScript 구문의 차이점 Node.js에서 사용되는 자바스크립트 구문은 일반적인 브라우저 환경에서 사용되는 자바스크립트와 기본적으로 동일하다. Node.js는 Chrome V8 JavaScript 엔진을 사용하며, 일반적인 자바스크립트 문법과 ECMAScript 표준을 따르지만 몇 가지 중요한 차이점이 있다. / 환경 객체 (Global Object) 브라우저 환경에서는 window 객체가 전역 객체로 사용되지만, Node.js 환경에서는 global 객체가 전역 객체로 사용된다. 예를 들어, 브라우저에서는 window.setTimeout()을 사용할 수 있지만, Node.js에서는 global.setTimeout()을 사용한다. / 모듈 시스템 Node.js는 CommonJS를 사용하는 모듈 시스템을 지원하여 파일 간의 코드를.. 2024. 4. 4. [1-1] dotenv로 환경변수 관리하기 dotenv는 Node.js 환경에서 환경 변수를 쉽게 관리하기 위한 패키지다. dotenv를 사용하면 윈도우 환경 변수에 직접 설정하지 않아도 된다. '.env' 파일에 환경 변수를 정의하면 Node.js 어플리케이션에서 이를 불러와 사용할 수 있다. 보통 Node.js 어플리케이션에서 사용되는 중요한 정보(예: 데이터베이스 정보, API 키 등)는 환경 변수에 저장되며, 어플리케이션이 실행될 때 환경 변수를 불러와 사용한다. 이는 애플리케이션의 보안을 강화하고, 환경 구성을 더욱 효율적으로 관리할 수 있다. 중요한 점은 .env 파일에는 민감한 정보를 저장하므로 외부에 노출되지 않도록 주의해야 한다. / .env파일 생성 및 환경 변수 정의 DB_HOST=localhost DB_USER=myuser .. 2024. 3. 29. JWT 토큰 저장 방법들 - Cookies, HTTP인증헤더, 로컬스토리지, 세션스토리지 쿠키 (Cookies) 서버에서 클라이언트에게 JWT 토큰을 쿠키에 저장하여 전송할 수 있다. 쿠키는 HTTP 요청 헤더에 자동으로 포함되므로, 클라이언트 및 서버 모두에서 쉽게 액세스할 수 있고 Secure 및 HttpOnly 플래그를 사용하여 보안을 강화할 수 있다. Secure 플래그는 HTTPS 연결을 통해만 쿠키가 전송되도록 보장하고, HttpOnly 플래그는 JavaScript에서 쿠키에 접근하는 것을 방지하여 XSS 공격을 예방한다. // 회원 로그인 라우터 router.post('/login', async (req, res) => { try { // 이메일과 비밀번호를 이용하여 사용자를 인증하고 JWT 토큰 생성 const user = await User.findOne({ email: re.. 2024. 3. 28. [인증/권한] 클라이언트와 서버 간의 인증 JWT(JSON Web Token) 공식 페이지 https://jwt.io/ JWT(JSON Web Token)는 주로 인증(Authentication) 및 권한(Authorization)에 관련된 기술로 사용된다. 정보를 안전하게 전송하기 위한 인터넷 표준으로 주로 클라이언트와 서버 간의 인증을 위해 사용된다. JSON으로 구성된 가볍고 자가수용적인 토큰이며, 사용자에 대한 정보를 담고 있고, 전자 서명되어 있어서 정보가 변경되지 않았음을 검증할 수 있다. 인증(Authentication) 사용자의 신원을 확인하고 인증하는 데 사용된다. 사용자가 로그인한 후에 서버로부터 발급된 토큰을 클라이언트에게 전달하고, 이 토큰을 이용하여 사용자의 인증 상태를 유지한다. 클라이언트는 이 토큰을 포함하여 서버에 요청을 보내며, 서버는 토큰을 검증하여.. 2024. 3. 28. 이전 1 2 3 4 ··· 7 다음 반응형
