본문 바로가기



전체  > 전체 글 (61)

Media팁: 무료로 영상과 사운드 녹화하는 방법: Game Bar 활용 가이드 안녕하세요, 각성한 데브키라입니다. 영상작업을 하다보면 PC의 영상을 녹화하거나 사운드를 녹화해야 할일이 많이 생깁니다. 특히 유튜브영상이나 강좌영상제작시 꼭 필요한 부분입니다. 여러가지 녹화프로그램들이 많이 있지만 기능의 제약이 있거나 유료버전인 경우가 많습니다. 이 포스팅에서 소개해드리는 Game Bar은 윈도우에서 무료로 제공하는 기본기능이기 때문에 유용하게 사용하실수 있을거꺼라 생각합니다. 설치기본적으로 윈도우에 사전 설치되어 있어 별도의 다운로드 없이 아래 절차를 따라 활성화하시면 됩니다. 만약 기본적으로 설치되어 있지 않은 경우에는 아래 주소에서 다운로드하여 설치하시면 됩니다.https://xbox-game-bar.softonic.kr/ Xbox Game Bar무료 게임 플레이 오버레이xbox..


Adobe Premiere 02: 새 프로젝트 생성 후 가져오기 편집 내보내기 안녕하세요. 각성한 데브키라(devkira)입니다. 영상 제작의 세계로 오신 것을 환영합니다! 새로운 프로젝트를 시작하는 것은 매우 흥미로운 일이지만, 영상 편집이 처음이신 분들에게는 복잡하게 느껴질 수 있습니다. 하지만 걱정하지 마세요! 이 시리즈를 통해 새 프로젝트를 시작하는 방법부터 최종 영상을 완성하는 방법까지, 단계별로 쉽게 안내해 드리겠습니다.새 프로젝트 생성 먼저, 화면 상단에 있는 메뉴에서 '프로젝트 생성'을 선택합니다. 이렇게 하면 세 개의 주요 탭(가져오기, 편집, 내보내기)으로 이동할 수 있는 화면이 나타납니다. 처음 열었을 때 편집창이 선택된 상태로 시작합니다.화면 상단에 보면 3개의 창을 탭으로 이동할 수 있는 메뉴가 있고 처음 열었을 때에 편집창이 선택되어 있습니다.가져오기: 작..


Adobe Premiere 01: 프리미어 설치 및 환경설정 안녕하세요. 각성한 데브키라(devkira)입니다. Adobe Premiere Pro는 영상 편집을 위한 가장 강력한 도구 중 하나로, 전문가부터 초보자까지 다양한 사용자들이 선호하는 소프트웨어입니다. 이 글에서는 Premiere Pro의 설치 방법과 함께 사용자의 편의에 맞게 환경 설정을 변경하는 방법을 소개하고자 합니다. 이 과정을 통해 보다 효율적인 작업 공간을 구성할 수 있을 것입니다. Premiere Pro 설치하기Adobe Premiere Pro를 설치하는 것은 매우 간단합니다. Adobe의 공식 홈페이지에서 무료 체험판을 다운로드할 수 있습니다. 위 링크를 통해 접속한 뒤, '지금 다운로드' 버튼을 클릭하면 설치 프로세스가 시작됩니다.https://www.adobe.com/kr/product..


리액트 09: 리액트 토픽변수를 useState 훅을 이용한 글입력 안녕하세요. 각성한 데브키라(devkira)입니다.웹 개발에서 사용자 입력을 처리하는 것은 매우 중요한 부분입니다. 오늘은 리액트의 useState 훅을 사용하여 간단한 텍스트 입력 기능을 구현하는 방법을 소개하겠습니다. 이 예제는 초보자도 쉽게 접근할 수 있도록 설계되었지만, 리액트에서 상태 관리의 핵심 개념을 이해하는 데 있어 매우 중요한 부분입니다. 아래에는 실습을 위한 소스 코드와 그 실행 결과를 제공합니다. 이를 통해 리액트의 기본 사용법을 익히는 첫걸음을 떼고, 상태 관리에 대해 더 깊이 파고들어 볼 수 있습니다.소스코드App.jsimport './App.css';import {useState} from 'react';function Header(props){ console.log(props..


리액트 08: React useState훅을 이용한 상태에 반응하는 UI표현 안녕하세요, 각성한 데브키라입니다. 이 포스팅에서는 목록과 관련된 이벤트 처리에 대해 다루며, 특히 목록의 index값의 중요성을 강조합니다. 목록에 이벤트를 적용하기 전에 각 항목에 id값을 할당하는 방법을 사용하여 이벤트 처리를 더 효율적으로 만들 수 있습니다. 이 방법을 통해 이벤트 처리 과정을 실습해 보는 내용을 다룹니다. App.jsimport logo from './logo.svg';import './App.css';import {useState} from 'react';function Header(props){ console.log(props); console.log(props.title); return( { e.preventDefault();//기본..


리액트 07: 리스트 형태의 사용자 정의 이벤트 구현 안녕하세요, 각성한 데브키라입니다. 이 포스팅에서는 목록과 관련된 이벤트 처리에 대해 다루며, 특히 목록의 index값의 중요성을 강조합니다. 목록에 이벤트를 적용하기 전에 각 항목에 id값을 할당하는 방법을 사용하여 이벤트 처리를 더 효율적으로 만들 수 있습니다. 이 방법을 통해 이벤트 처리 과정을 실습해 보는 내용을 다룹니다. App.jsimport logo from './logo.svg';import './App.css';function Header(props){ console.log(props); console.log(props.title); return( { e.preventDefault();//기본 이벤트의 동작을 막아줌 props.onCh..


리액트 06: 사용자 정의 이벤트 구현 안녕하세요, 각성한 데브키라입니다. 웹 개발을 하다 보면 사용자의 행동에 따라 다양한 이벤트를 처리해야 할 필요가 있습니다. 오늘은 리액트에서 사용자의 클릭 이벤트를 다루는 방법과, 이벤트에 필요한 데이터를 전달하는 방식에 대해 알아보겠습니다. [ 핵심 내용정리 ][ 주요 부분만 스크랩한 코드입니다. ]====== 변수선언 ======  const topics = [    {id:1, title:"게시글1", content:"컨텐츠1..."},    {id:2, title:"게시글2", content:"컨텐츠2..."},      ]      ====== 컴포넌트를 호출 ======    {   ====== 컴포넌트에서 이벤트가 발생 후 이벤트 데이터를 전달받음 ======          ...내용 ..


리액트 05: 리스트데이터의 활용 topics변수 사용 안녕하세요, 각성한 데브키라입니다. 오늘은 React에서 'topics' 변수를 활용해 데이터를 효과적으로 관리하는 방법을 알아봅니다. 이를 통해 동적 데이터를 사용자에게 보다 효율적으로 제공하는 방법을 살펴보겠습니다.[ 핵심 내용정리 ]  배열형태의 토픽변수를 Prop형태로 전송함으로써 동적으로 데이터를 가공할 수 있습니다.토픽형태의 변숫값을 사용할 때는 key값을 할당해서 사용해야 합니다.props 변수 사용 시 http://abc.com/'+props.path}"> 링크 이런 식으로 조합해서 사용할 수 있습니다.1. topics형태의 변수 하드코딩 주입토픽변수를 Nav컴포넌트에서 직접적으로 주입해서 출력하는 예제입니다.import './App.css';function Nav(){ const li..