세림 데일리스크럼

📝 23-07-17 : 프로젝트 생성

Vite를 통해 프로젝트 생성

• Vite : 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구
• CRA를 사용했을 때보다, 빠르게 프로젝트가 생성되어 선택함.
• 참고 자료 : https://yozm.wishket.com/magazine/detail/1620/

폴더 구조

meaningout-client    
├── node_modules    
├── public 
     └─ assets   
├── src
     ├─ components
     ├─ pages
     ├─ App.jsx
     ├─ index.css
     └─ main.jsx
├── .eslintrc.cjs    
├── .gitignore   
├── index.html    
├── package.json    
├── vit.config.js    
└── README.md     

📝 23-07-18 : MakePage 초안 구현

MakePage 초안 구현

• MakePage.jsx에 초안을 구현함

📝 23-07-19 : input 입력 후, div 태그에 나타내기

input 입력 후, div 태그에 나타내기

기획안을 살펴보면...

• input 태그에 입력을 한 후, '다음으로' 버튼을 클릭하면
• input 태그에 입력한 내용이 div 태그 안에 반영되게 해야한다.

아래 코드와 같이, 간단하게 기능만 구현을 해보았다.

import { useState } from 'react';

const MakePagePractice = () => {
  const [inputValue, setInputValue] = useState('');
  const [showCompelete, setShowCompelete] = useState(false);

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleComplete = () => {
    setShowCompelete(true);
  };

  const handleSave = () => {
    // 여기에 저장 기능을 구현
    console.log('Save the content:', inputValue);
  };

  return (
    <div>
      {showCompelete ? (
        <div>
          <div>{inputValue}</div>
          <button onClick={handleSave}>저장하기</button>
        </div>
      ) : (
        <div>
          <input type='text' value={inputValue} onChange={handleChange} />
          <button onClick={handleComplete}>완성하기</button>
        </div>
      )}
    </div>
  );
};

export default MakePagePractice;

📝 23-07-20 : 컴포넌트 다운로드

카드 제작 후 카드를 다운로드하는 기능이 있음.
따라서 컴포넌트를 다운로드 하는 것을 구현함.

dom-to-image, FileSaver 라이브러리를 사용하기로 함.

const cardRef = useRef();
const onDownloadBtn = () => {
  const card = cardRef.current;
  const filter = (card) => {
    return card.tagName !== 'BUTTON';
  };
  domtoimage
    .toBlob(card, { filter: filter })
    .then((blob) => {
      saveAs(blob, 'card.png');
    });
};

참고 자료 : https://onlydev.tistory.com/75

📝 23-07-21 : 'input 입력 후, div 태그에 나타내기' 프로젝트에 적용

저번에 구현한 'input 입력 후, div 태그에 나타내기'를 프로젝트에 적용하고 있음.