20240807

2024. 8. 7. 17:35SNS 프로젝트 일지/PHP

728x90
반응형

2024.08.06 - [PHP 일지/SNS 프로젝트] - 20240806

 

20240806

인스타그램 , FaceBook과 같은 SNS를 제작을 목표로 페이지를 만들고 있다. 먼저 제일 중요한 Feed에 대한 모델링이다.게시물 테이블 (Feeds)id (Primary Key): 고유 게시물 IDuser_id (Foreign Key): 게시물을 작

recordfordev.tistory.com

 

어제에 이어

 

RssFeed 를 커맨드로 등록하여 스캐줄 을 돌려 자동으로 수집하자.

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use App\Services\Feed\RssService;
class FetchRssFeeds extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'feeds:fetch';

    /**
     * The console command description.
     *
     * @var string
     */

    protected $description = 'Fetch and save RSS feeds';

    protected $RssService;

    public function __construct(RssService $RssService)
    {
        parent::__construct();
        $this->RssService = $RssService;
    }
    /**
     * Execute the console command.
     */
    public function handle()
    {
        //
        $this->channel('fetch_rss')->info('Fetching RSS feeds...');
        $this->RssService->saveFeeds();
        $this->channel('fetch_rss')->info('RSS feeds saved successfully!');
    }
}

 

RssService 를 생성자에서 인스턴스화 하여 

 

커맨드를 만들었다 .

 

routes / console.php

use Illuminate\Foundation\Inspiring;
use Illuminate\Support\Facades\Artisan;
use Illuminate\Support\Facades\Schedule;

use App\Console\Commands\FetchRssFeeds;

Artisan::command('inspire', function () {
    $this->comment(Inspiring::quote());
})->purpose('Display an inspiring quote')->hourly();

Schedule::command(FetchRssFeeds::class)->everyFiveMinutes();

 

에 해당 커맨드를 스케줄로 등록한다.

 

로그는 daily 로그로 fetch_rss  채널을 등록해 따로 쌓는다.

 

 

쌓아 놓고 나니 마지막 갱신 시간이 궁금했다. 그래서 News 옆에 붙여 주기로 했는데

 

 

요런식으로 

 

아니 이게 웬걸 라라벨 로그 , DB에 출력되는 시간과 웹 클라이언트에서 찍히는 시간이 다른것이다 ..

 

이것저것동네방네 찾아보다가 TIMEZONE 문제인가 확인을해봤다

 

근데 Intl 로 보니 Asia\Seoul 이 맞다 . . . . 

 

그렇게 낙담할 찰나 

 

 

https://velog.io/@hahahaday12/Life-Calendar12-Time-Zone%EC%97%90-%ED%97%88%EB%8D%95%EC%9D%B4%EB%8B%A4

 

Life-Calendar#12 | Time Zone에 허덕이다......

React-Project

velog.io

 

빛과 소금을 만나게 되고

 

const formatDateWithTimezone = (dateString, timeZone = 'Asia/Seoul') => {
    const date = new Date(dateString);
    const year = date.getUTCFullYear();
    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
    const day = String(date.getUTCDate()).padStart(2, '0');
    const hour = String(date.getUTCHours()).padStart(2, '0');
    const minute = String(date.getUTCMinutes()).padStart(2, '0');
    const second = String(date.getUTCSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};

 

함수를 만들어 포맷하니 잘나온다 ( 욕 한바가지 )

 

 

이제 

 

 

이 볼품 없는 폼에 웹에디터를 달자

 

웹에디터는  cheditor 를 달까 하다가 

 

https://ui.toast.com/tui-editor

 

TOAST UI :: Make Your Web Delicious!

TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud.

ui.toast.com

 

NHN 의 에디터를 달기로 했다.

 

먼저  패키지 매니저로 

 

npm install --save @toast-ui/editor

 

패키지를 설치해 주고 

 

/resources/js/Pages/Admin/Feed/store.jsx

 

상단에

 

import Editor from '@toast-ui/editor';

 

설치한 패키지를 임포트 한다. 

 

import '@toast-ui/editor/dist/toastui-editor.css'; 

 

css 도 임포트를 하고 

 

상단 react import 를

 

import React, { useEffect,useRef,useState } from 'react';

 

으로 고쳐주고

 

const editorRef = useRef(null);

useEffect(()=>{
    // DOM 요소가 렌더링된 후에 에디터를 초기화합니다.
    if (editorRef.current) {
        const editorInstance = new Editor({
            el: editorRef.current, // 에디터를 렌더링할 DOM 요소
            height: '500px',
            initialEditType: 'markdown',
            previewStyle: 'vertical',
        });

        // 예시: 에디터의 마크다운 콘텐츠를 가져오는 함수
        const getMarkdownContent = () => {
            console.log(editorInstance.getMarkdown());
        };

        // 예를 들어, 버튼 클릭 시 마크다운 콘텐츠를 로그에 출력하도록 할 수 있습니다.
        const button = document.createElement('button');
        button.innerText = 'Get Markdown';
        button.addEventListener('click', getMarkdownContent);
        document.body.appendChild(button);

        // Cleanup the button on component unmount
        return () => {
            button.removeEventListener('click', getMarkdownContent);
            document.body.removeChild(button);
        };
    }
}, []);// 빈 배열로 초기 렌더링 시에만 실행되도록 설정

 

useEffect 안에 editor api 코드를 넣어준다.

 

 

볼 품 없음이 -1  되었다.

 

 

깃 레포는 

 

https://github.com/jsh9587/new_dp/tree/master/new-dp

 

new_dp/new-dp at master · jsh9587/new_dp

Contribute to jsh9587/new_dp development by creating an account on GitHub.

github.com

 

이니 의견이나 피드백 항상 부탁드립니다.( _ _ )

 

728x90
반응형

'SNS 프로젝트 일지 > PHP' 카테고리의 다른 글

20240808  (0) 2024.08.08
20240806  (0) 2024.08.06
20240805  (0) 2024.08.05
20240803  (0) 2024.08.03
20240731  (0) 2024.07.31