Code Storage

HTTP (Hypertext Transfer Protocol)에서 사용되는 메서드는 다양한 웹 요청 및 작업을 나타내는데 사용됩니다. 다음은 널리 사용되는 HTTP 메서드 목록입니다:

1. GET: 서버로부터 데이터를 요청하는 데 사용됩니다. 일반적으로 정보를 검색하고, URL 쿼리 매개변수를 통해 데이터를 전달합니다. GET 요청은 주로 데이터를 요청하는 데 사용되며, 서버의 상태나 데이터에 변경을 가하지 않아야 합니다.
2. POST: 서버로 데이터를 제출하고, 이 데이터를 처리하도록 요청하는 데 사용됩니다. 주로 양식 데이터를 제출하거나 새로운 데이터를 생성하는 데 활용됩니다. POST 요청은 데이터를 요청 본문(request body)에 담아 전송하며, 서버의 상태나 데이터에 영향을 줄 수 있습니다.
3. OPTIONS: 서버에게 해당 리소스에 대한 지원되는 메서드나 기타 정보를 요청하는 데 사용됩니다. 주로 CORS (Cross-Origin Resource Sharing)와 관련된 요청에서 사용됩니다.
4. PUT: 서버에서 지정된 리소스를 업데이트하기 위해 사용됩니다. 클라이언트가 요청 본문에 데이터를 담아 서버에 제출하면, 서버는 해당 데이터로 리소스를 업데이트합니다.
5. DELETE: 서버에서 지정된 리소스를 삭제하기 위해 사용됩니다. 클라이언트가 DELETE 요청을 보내면, 서버는 해당 리소스를 삭제하고 응답을 반환합니다.

이러한 HTTP 메서드들은 웹 애플리케이션에서 클라이언트와 서버 간의 상호작용을 정의하는 데 사용됩니다. GET은 데이터를 가져오는 데, POST는 데이터를 보내고 저장하는 데, OPTIONS는 지원되는 메서드 및 기타 정보를 확인하는 데, PUT은 데이터를 업데이트하고, DELETE는 데이터를 삭제하는 데 사용됩니다. 이러한 메서드를 올바르게 사용하여 웹 애플리케이션은 데이터를 효과적으로 관리하고 조작할 수 있습니다.

React 함수 컴포넌트(Functional Component, FC)로 데이터를 props로 전달하는 방법은 다음과 같습니다:

함수 컴포넌트 정의: 함수 컴포넌트를 정의할 때 props 매개변수를 사용하여 데이터를 전달합니다.

import React, { FC } from 'react';

interface MyComponentProps {
  data: string; // 데이터의 타입에 따라 수정
}

const MyComponent: FC<MyComponentProps> = (props) => {
  return <div>{props.data}</div>;
};

컴포넌트 사용: 다른 컴포넌트에서 데이터를 props로 전달할 때는 컴포넌트를 사용할 때 props를 넘깁니다.

const ParentComponent: FC = () => {
  const dataToPass = "Hello, World!"; // 전달할 데이터

  return (
    <div>
      <MyComponent data={dataToPass} />
    </div>
  );
};

위의 코드에서 MyComponent는 data prop을 받아서 화면에 표시합니다. ParentComponent에서 MyComponent를 사용할 때 data prop에 데이터를 전달합니다.

이와 같이 React 함수 컴포넌트를 정의하고 사용할 때, props를 사용하여 데이터를 전달할 수 있습니다. Props는 컴포넌트 간에 데이터를 효율적으로 전달하는 데 사용됩니다. 필요한 데이터를 props로 전달하여 컴포넌트를 재사용하고 데이터를 동적으로 표시할 수 있습니다.

<?
// 비디오 입력 및 저장이미지 경로 설정
$video_file = "/var/www/master/mobile/modyeye/videos/day.mp4";
$thum_file =  "/var/www/master/mobile/modyeye/videos/thum/day.png";

// 1. ffmpeg 명령어로 비디오 가로 세로 크기 가져오기
$command = 'ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=s=x:p=0 ' . escapeshellarg($video_file);
$size= shell_exec($command);	
$size = str_replace("\n", "", $size);


// 2. ffmpeg 명령어로 설정된 크기와 시간으로 이미지를 저장하기
$time = "00:00:00.000";
$cmd = "ffmpeg -i $video_file -ss $time -s $size $thum_file";
shell_exec($cmd);  
?>

배포 시 아래와 같은 화면만 뜨는경우

(네트워크, 콘솔에서 오류가 없음)

package.json 파일에 보면

homepage 부분이 "." 로 되어있습니다.

그부분을 실제 사이트 주소를 입력해주세요

개발시 

Access to XMLHttpRequest at '주소A' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CROS 문제가 발생한다.

1. package.json 에

  "proxy":"http://testtest.cafe24.com",

이렇게 사이트 명을 넣어준다.

2. 호출 시 주소를 

http://testtest.cafe24.com/login.php 부분을 상대경로로 바꺼준다.

/login.php

속도는 0.5초 정도 느런거같은데 잘된다 ㅎㅎㅎ

현재 날짜 가지고 오기

$today = date("Y-m-d",time());

1달전 날짜 가지고오기

$day = date('Y-m-d', strtotime('-1 month'));

그외 날짜

date("Y-m-d", time());						//오늘
date("Y-m-d", strtotime("-1 week", time()));	//최근 일주일
date("Y-m-d", strtotime("-1 month", time()));	//최근 1개월
date("Y-m-d", strtotime("-6 month", time()));	//최근 6개월
date("Y-m-d", strtotime("-1 year", time()));	//최근 1년

응용 ( 6개월전 을 구한다음 하루 뺴기)

	$limit_dt = date(  'Y-m-d', strtotime('-1 days', strtotime('-6 month', time()))  );

먼저 우분투에서 동영상 썸네일 추출을 위해서는

ffmpeg 라는 프로그램을 설치해야 합니다.

당연히 설치전에는 root로 로그인 해야 겠죠.

아래 sudo -s를 사용해서 root 로그인 합시다.

sudo -s

아래 쉘커맨드를 입력하면 ffmpeg를 설치 합니다.

경고가 뜨면 Y 눌러주면 됩니다.

apt update
apt install ffmpeg

비디오 파일 경로와, 만들어질 썸네일 이미지 경로 + 파일명을 넣어줍니다.

size는 썸네일 이미지 크기

time는 동영상에서 뽑아낼 시간

$video_file = "/var/www/master/upload/comment/test.mp4"
$thum_file = "/var/www/master/upload/comment/thum.png"

if(true) // 동영상 이라면
{
	$size = "960x512";
    $time = "00:00:00.000";
    $cmd = "ffmpeg -i $video_file -ss $time -s $size $thum_file";
    shell_exec($cmd);  
}

shell_exec를 사용하여 ffmpeg 프로그램을 사용하여 썸네일 이미지를 추출합니다.

기타로는 이미지 크기변경도 가능합니다.

ffmpeg -i input.jpg -vf scale=320:240 output_320x240.png

<input> 태그에서 파일을 선택했을때 비동기 이벤트를 처리하는 방법은 아래와 같다.

html 코드에는 input 파일을 넣어줘야 한다.

파일을 선택 또는 변경시 아래 uploadFile() 한수를 호출해서 결과를 넘긴다.

현재 코드는 json() 으로 되어있는데 text로도 변경할 수 있다.

<javascript>
document).on("change","#fileupload",function(){		 
	var result = uploadFile().then(text => {

	//처리 코드 입력
)};

async function uploadFile() {
    let formData = new FormData();           
    formData.append("upload_file", fileupload.files[0]);
    var response = await fetch('/comment_upload_ok.php', {
      method: "POST", 
      body: formData
    });    

	var text = response.json(); // json(), text() 선택
	return text;
}
</javascript>


<input id="fileupload" type="file" name="fileupload" />