본문 바로가기
728x90
프로그래밍 「 자바스크립트 편」기본 및 비기본 데이터 형식 이전 기사에서 JavaScript 데이터 유형에 대해 논의했습니다. 이러한 데이터 형식은 기본 및 비기본 형식으로 분류할 수 있습니다. 먼저 기본 데이터 유형과 비기본 데이터 유형의 차이점을 설명하고 어떤 범주에 속하는지 살펴보겠습니다. 기본 데이터 유형은 값으로 전달되며, 이는 변경할 수 없음을 의미합니다. 프리미티브는 스택에 저장되며 새 값을 할당할 수 있지만 변수 자체는 변경할 수 없습니다. 다음 코드 조각은 이 개념을 보여줍니다: 변수를 선언하면 각각에 특정 값이 할당됩니다. 'x' 변수에서 'y'를 생성하고 'y'의 값을 수정해도 'x'의 값에는 전혀 영향을 미치지 않습니다. let x = 5; let y = x; y = 6;console.log(x); //5 console.log(y); //6.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」HTML 및 CSS를 사용하여 텍스트 애니메이션 입력(소스 코드) 안녕하세요, 코더스입니다. 이 기사에서는 Html 및 Css를 사용하여 텍스트 입력 애니메이션을 만들 것입니다. 입력 텍스트 애니메이션은 웹 개발, 특히 초보자를 위한 좋은 연습 프로젝트입니다. 우리는 HTML과 CSS를 사용하여 멋진 반응형 타이핑 텍스트 애니메이션 웹사이트를 만들 것입니다. CSS를 통해 사용할 수 있는 다양한 텍스트 스타일을 배우는 데 도움이 됩니다. 이 기사가 끝날 때까지 자신만의 텍스트 입력 효과를 만들 수 있어야 합니다. 프로젝트에 대한 아이디어가 있었기를 바랍니다. 이제 소스 코드를 추가하여 텍스트 입력 애니메이션 프로젝트를 시작하겠습니다. 이를 위해 먼저 Html 코드를 사용하고 있습니다. 1단계: 텍스트 타이핑 애니메이션을 위한 HTML 코드 HTML은 하이퍼 텍스트 마크.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」CSS 및 JavaScript 코드를 사용하여 햄버거 메뉴를 만드는 방법 안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다. 이 기사에서는 html, css 및 JavaScript 코드를 사용하여 햄버거 메뉴를 만듭니다. 햄버거 메뉴는 내비게이션의 표준 아이콘이 되었으며 오늘날 대부분의 주류 플랫폼과 앱에서도 사용할 정도로 인기를 얻었습니다. 햄버거 메뉴는 3개의 막대 라인이며 막대를 클릭하면 햄버거 메뉴로 나타나는 메뉴 열기 및 닫기 아이콘이 있습니다. 햄버거와 닮았 기 때문에 이런 식으로 명명되었습니다. 왜 햄버거 메뉴를 사용합니까? 햄버거 메뉴는 웹사이트를 탐색하거나 콘텐츠를 구성하는 더 깔끔하고 깔끔한 방법을 제공합니다. 또한 디자이너들은 햄버거 메뉴를 너무 오랫동안 사용해 왔기 때문에 그 자체로 표준이 되었습니다. 햄버거 메뉴를 만드는 .. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」CSS를 사용하여 스크롤 애니메이션 만들기 안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다. 이 블로그에서는 CSS를 사용하여 스크롤 애니메이션을 만드는 방법에 대해 알아봅니다. 웹 페이지를 스크롤할 때 콘텐츠는 다른 측면의 애니메이션에서 가져옵니다. 스크롤 애니메이션에는 Html, CSS 및 JavaScript를 사용합니다. 이 프로젝트에서 JavaScript를 사용하는 이유는 더 좋고 부드러운 스크롤 애니메이션을 얻을 수 있기 때문입니다. CSS를 사용한 스크롤 애니메이션[/caption] 스크롤 애니메이션은 방문자가 웹 사이트를 위아래로 스크롤하는 동안 발생하는 모든 종류의 애니메이션입니다. 스크롤 애니메이션에서 사용자가 웹 사이트 양식을 아래로 스크롤하면 웹 사이트에 적용한 이미지 및 비디오 효과가 다른 효.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」JavaScript를 사용하여 미리보기로 파일 업로드 드래그 앤 드롭 안녕하세요 코더입니다. 이 튜토리얼에서는 Html, Cs 및 JavaScript를 사용하여 다운로드 기능으로 드래그 앤 드롭 또는 찾아보기 업로드 파일을 만드는 방법을 배웁니다. 드래그 앤 드롭은 자바스크립트를 사용하여 드래그 앤 드롭 파일을 만들기 위해 양식, CSS 및 자바스크립트 개념의 개념을 지우는 데 사용되는 초보자 프로젝트입니다. JavaScript를 사용하여 미리 보기로 파일 업로드 끌어서 놓기[/caption] 프로젝트를 시작하기 전에 드래그 앤 드롭 파일 업로드가 무엇이며 어떻게 만드는지 이해해야 합니다. 드래그 앤 드롭 파일 업로드는 파일을 드래그 앤 드롭하여 제출할 수 있음을 의미합니다. 를 웹 페이지로 이동합니다. 대부분의 웹 사이트에는 이러한 종류의 파일 업로드 기능이 있습니다. .. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」GraalVM 언어의 새로운 기능 이 릴리스에는 많은 업데이트가 있으므로 두 개의 릴리스 블로그 게시물이 있습니다.이 게시물은 GraalVM 언어 및 Truffle 업데이트에 중점을 둡니다. GraalVM JDK 및 Native Image의 새로운 기능은 관련 블로그 게시물로 이동하십시오. 오라클 GraalVM 새로운 배포판인 Oracle GraalVM을 소개합니다! GraalVM 무료 이용 약관(GFTC) 라이선스에 따라 사용할 수 있습니다(FAQ 참조). 사용자의 경우 이는 다음을 의미합니다. 개발 및 프로덕션 용도로 무료입니다. CI/CD 파이프라인에 통합하기 위해 명령줄 또는 스크립트를 통해 쉽게 다운로드할 수 있습니다. Oracle JDK에 부합하는 장기 지원 릴리스 Oracle GraalVM 및 관련 블로그 게시물에서 제공하는.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」HTML 코드를 사용하는 난수 생성기 안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다. 이 기사에서는 HTML 및 JavaScript를 사용하여 난수 생성기를 만듭니다. 예전에는 우리 인간이 시작하고 멈추는 것을 들으면서 종이 한 장을 고르거나 마음속으로 숫자를 선택해야 하는 게임이 있었습니다. 이제 개발자로서 시스템은 숫자를 선택하고 정의된 범위 내에서 출력을 제공합니다. 난수(Random Number): 단어 자체는 예측을 위한 식별 가능한 패턴이 없는 제한된 숫자 또는 무제한의 지정된 풀에서 숫자 또는 정수를 선택한다고 명시합니다. 위와 같은 난수 생성기는 정의된 범위 내에서 하나 이상의 난수를 생성할 수 있는 장치입니다. 난수 생성기는 하드웨어 기반 또는 의사 난수 생성기일 수 있습니다. 프로젝트에 대.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」단순화 3 React 핵심 개념 (구성 요소, 소품 및 상태) 1. 구성 요소 : 구성 요소는 React 애플리케이션의 빌딩 블록입니다. 재사용 가능하고 독립적이며 UI 기능을 캡슐화합니다. React 구성 요소는 기능 구성 요소와 클래스 구성 요소의 두 가지 유형으로 분류할 수 있습니다. 기능적 구성 요소: 기능 구성 요소는 React 요소를 반환하는 JavaScript 함수입니다. 일반적으로 상태 또는 수명 주기 메서드를 관리할 필요가 없는 더 간단한 구성 요소에 사용됩니다. 함수형 구성 요소는 props(다음에 자세히 설명)를 입력으로 받아들이고 구성 요소의 UI를 정의하는 JSX(JavaScript XML)를 반환합니다. 기능 구성 요소의 예: import React from 'react'; function Greeting(props) { return Hel.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」Chrome 확장 프로그램 개발을 위한 고급 기술: 종합 가이드 이 기사에서는 Chrome 확장 프로그램 개발 프로세스를 크게 향상시킬 수 있는 몇 가지 고급 개념과 방법에 대해 설명합니다. 이러한 귀중한 통찰력은 단일 소스에서 쉽게 찾을 수 없으므로 이 문서는 개발 워크플로를 단순화하는 데 유용한 참고 자료가 됩니다. 웹 페이지에서 CSS 선택기를 추출할 수 있는 웹 스크레이퍼를 만드는 방법을 안내해 드리겠습니다. 이 확장에서 필요한 기능은 다음과 같습니다. 프론트엔드 애플리케이션은 React 애플리케이션입니다. 사용자는 데이터를 스크랩해야 하는 웹사이트 URL을 입력해야 합니다. 지정된 URL로 팝업 창이 열립니다. 사용자는 드래그 가능한 봇을 볼 수 있습니다. 사용자는 봇에서 텍스트 캡처 기능을 사용하도록 설정할 수 있습니다. 그런 다음 사용자는 웹 페이지에서 .. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」HTML 및 JavaScript를 사용한 간단한 카운트 다운 타이머 안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다, 우리는 HTML, CSS 및 자바 스크립트를 사용하여 카운트 다운 타이머를 만드는 방법을 배웁니다. 카운트다운 타이머는 특정 순간에 시작하여 0으로 내려갑니다. 중요한 이벤트가 다가오거나 게임에 몇 초가 남았을 때 상황에 대한 흥분이나 긴박감을 높이는 데 자주 사용됩니다. 카운트다운 타이머가 사용되는 상황에는 이벤트, 프레젠테이션, 게임, 심지어 시간 관리를 위한 일상 생활과 같은 다양한 상황이 있습니다. 카운트다운 타이머는 사용자가 생산성을 높이고 보다 효율적으로 작업할 수 있도록 도와줍니다. 카운트 다운 타이머 프로젝트는 항상 시간, 분, 초를 계산하기 위해 경주 또는 수영 경주와 같이 시간이 가장 중요한 곳에서 보았지.. 2023. 6. 17.
프로그래밍 「 자바스크립트 편」코드를 사용하여 HTML 및 CSS로 세련된 로그인 페이지 만들기 안녕하세요 코더입니다! Codewithrandom에 오신 것을 환영합니다., 오늘의 블로그에서는 코드가 있는 HTML 및 CSS로 로그인 페이지를 만들 것입니다. 우리는 웹사이트를 위한 스타일리시한 로그인 양식 페이지 디자인을 만들 것입니다. 현재로서는 로그인을 위한 입력으로 이메일과 비밀번호만 고려하고 있습니다. 로그인 페이지는 승인된 사용자가 전체 사이트 또는 사이트의 하위 집합에 액세스할 수 있도록 허용하므로 웹사이트 또는 앱에서 가장 중요한 페이지 중 하나입니다. 로그인 또는 등록 페이지는 사용자가 로그인으로 보호된 사이트에서 보는 초기 페이지입니다. 가입 또는 로그인 페이지는 시각적으로 매력적이고 사용자 친화적이며 사용하기 쉬워야 합니다. 그렇게. 코드부터 시작하되 코드를 진행하기 전에 확인해보.. 2023. 6. 16.
프로그래밍 「 자바스크립트 편」AI 토킹 디스코드 봇 만들기 | ChatGPT 및 JavaScript 음성을 텍스트로, 텍스트를 음성으로 변환 AI Discord BOT 인간의 능력을 가진 로봇과 실시간으로 대화할 수 있기를 원했던 적이 있습니까? 글쎄, 이것은 너무 미친 것이 아니라 2023년에 생각하십시오 사실 그것은 매우 쉽습니다, 당신이 정말로 필요로하는 것은 다음과 같습니다 : 디스코드 봇 (Discord.js) 챗GPT API Text-to-speech 및 Speech-to-text API(Google 클라우드) 그리고 시간 🤠 다음은 어떻게 생겼는지에 대한 예입니다. 이 작은 프로젝트에 대해 알아야 할 것은 몇 가지 기본적인 JavaScript입니다. 1단계: 봇 만들기 먼저 디스코드 봇을 만들고 디스코드 개발자로 이동하여 새 애플리케이션을 클릭하고 원하는 이름을 지정해야 합니다. 그런 다음.. 2023. 6. 16.
728x90

티스토리툴바