IT News 245

React 에서 useEffect 함수 사용방법

React 에서 useEffect 함수 사용하는 예시입니다. useState 가 사용되었지만 참고사항으로 보시면 될것 같구요. useEffect 는 처음에 기본적으로 한번 실행이 되고 나중에 변수값이 업데이트가 될때마다 실행이 되게 되는데요. 여기서 사용되는 변수의 이름은 currentCount 입니다. 버튼을 클릭할때마다 값이 1 씩 증가되는데요. (props.incrementBy 값은 버튼 속성으로 설정된 값입니다.) 그 값이 10 이상이 되면 다시 0 으로 초기화 시키는 역할을 useEffect 를 통해서 처리하게 됩니다. useEffect 함수 첫번째 파라메터에는 콜백함수를 지정하게 되고 두번째 파라메터에는 해당되는 변수들의 리스트를 지정을 해야합니다. 두번째 파라메터 부분이 엄청 중요하니 꼭 기..

검색창 예제 React : searchBar example in React

React 에서 검색창 예제입니다. useState 를 사용하여 변경된 searchValue 값을 화면에 표시가 되고 리스트 값인 products 의 filter 를 사용하여 필터 검색 효과 예제입니다. 참고로 products 의 데이터는 App.js 에서 searchItems 로 값이 지정이 되어있고 props.searchItems 으로 데이터 값을 받아서 처리가 됩니다. [MySearchBar.js] import React, { useState } from "react" import './MySearchBar.css' const MySearchBar = (props) => { const products = props.searchItems; // console.log(global); const [sea..

props 예제 : React

PROPS 를 사용한 React 예제 : tag 에서 컴포넌트(component)로 값을 전달할때 사용됨 여기서는 incrementBy 값이 사용이 되어짐 props 라는 변수로 받았지만 aa 나 임의의 변수 이름으로 사용이 가능함. import React, {useState} from "react"; const MyButton = (props) => { const [currentCount, setCurrentCount] = useState(0); const handleClick = () => { setCurrentCount(currentCount+props.incrementBy); } return ( +{props.incrementBy} {currentCount} ) } export default My..

useState in react : 리엑트 상태 예제

React 에서 useState 를 사용하는 예시 import React, {useState} from "react"; const MyButton = () => { const [currentCount, setCurrentCount] = useState(0); const handleClick = () => { setCurrentCount(currentCount+1); } return ( +1 {currentCount} ) } export default MyButton; 위에서 선언한 MyButton을 사용할때의 예시 import MyButton from './component/MyButton'; function App() { let subject = 'My React'; return ( {subject} ..

S/W HEVC(H265) 디코딩은 지원하지 않습니다. 라고 영상재생이 않될때 해결방법

동영상 파일을 재생하려고 하는데 아래 이미지와 같은 에러가 나오고 영상은 재생이 되지 않는 경우가 있는데요. 'S/W HEVC(H265) 디코딩은 지원하지 않습니다'라고 화면에 표시가 된다면 이럴 때 해결 방법은 코덱파일 하나만 설치해주시면 됩니다. 아래의 링크를 클릭해서 들어가시면 아래 이미지와 같이 LAVFilters 코덱을 다운로드 받으실 수 있습니다. https://github.com/Nevcairiel/LAVFilters/releases 위의 이미지와 같은 화면이 나오면 그 아래에 다음과 같은 표가 나오게 됩니다. 표에서 윈도우에서 설치하시려면 첫번째 LAVFilters-버전-Installer.exe 파일을 클릭해서 다운받아 설치하시면 됩니다. LAVFilters 설치 후 다시 동영상 플레이어를..

IT News 2021.09.16

피피티 문서를 읽을 때 원본 문서랑 다르게 글자가 이상하게 보일 때 해결방법

최근에 지인이 피피티 파일을 열었는데 글자가 화면 밖으로 표시가 되고 이상하게 보인다라고 물어보았는데요. 그래서 저도 그 파일을 확인해 보았습니다. 최신 오피스 버전을 사용하고 있던 저는 당연히 피피티 파일을 열면 아무 문제없이 나올 줄 알았는데 저도 똑같이 글자의 위치나 크기 등이 좀 이상하다는 생각이 들었습니다. 즉 오피스 버전 문제는 아니다라는 결론을 내었고 그래서 해당 텍스트에 마우스를 클릭해서 폰트명이 무엇인지 확인해 보았습니다. 그랬더니 제가 평소 사용하지 않는 무료 폰트를 사용하여서 피피티를 제작하였던 것이었습니다. 그래서 폰트명으로 인터넷으로 검색을 하였고 해당 폰트 파일을 다운 받았습니다. 폰트 파일은 기본적으로 윈도우에서는 폴더위치가 C:\Windows\Fonts 입니다. 다운받을 폰트..

IT News 2021.09.02

함수(function)와 메쏘드(method)의 차이점

일반적으로 함수와 메쏘드는 무언가를 실행해서 값을 반환한다는 부분에서는 같다고 할 수 있을것 같습니다. 그런데 정확한 용어의 차이는 아시는 분들이 많이 계시지는 않을것 같습니다. 쉽게 차이점을 말해본다면 메쏘는(method)는 class 안에 선언된 함수이고 함수(function)는 class 가 아닌 쪽에 선언된 함수라 생각하시면 될것 같습니다. 클래스(class)안에 선언된것과 아닌것의 차이가 뭐가 중요할까 하지만은 클래스에 선언되었다라는 것은 함수가 객체(오브젝트)에 종속이 된다는 의미입니다. 예를 들어 자바(java)와 C# 은 오직 메쏘드(method) 밖에 없습니다. 그리고 C 언어에서는 오직 함수(function) 밖에 없습니다. 그리고 C++ 와 파이썬(Python)은 프로그래머에 따라서 ..

다트(dart) 기본 변수값 출력 $ {} 사용법

아래의 소스코드를 보시면, 총 2개의 로컬변수(local variable)가 선언이 되어있습니다. 변수의 이름은 age 와 name 입니다. age 는 int 형 즉 정수이고, name 은 String 형 즉 문자 입니다. 단, 문자인 String 은 대문자 S로 시작하고 값은 홀 따음표(') 또는 쌍 따음표(")로 감싸면 됩니다. void main() { int age = 30; String name = 'SKY'; print( 'name: ' + name + ', age: ' + age.toString()); print('name: $name, age: $age'); print('name: ${name+'LOVE'}, age: ${age+10}'); } print 라는 함수(function) 라고 하..