인생네컷 만들기 프로젝트 1 - 틀 & 사진 업로드 & 저장

스파르타 코딩클럽에서 무료로 css,html 강의를 풀어줬는데,

이건 그냥 간단한 html,css니 듣지 않고 여기서 영감을 얻어... 리액트로 인생네컷 만들기를 해봤따.
반나절이면 간단히 끝낼 줄 알았는데, 이런 저런 복병을 마주쳐 결국 게시글도 두 개로 나뉘게 됨 ^_6 (세 개가 될 수도)

🪟 기본 틀

일단 만들고 블로깅하는 거라 현재까지 상황은 이러하다
왜 아이브고 장원영이냐면,... 아이브 신곡이 너무 좋고 원영이가 너무 이뻐서.. ㅠ

스타일 컴포넌트 쓰려다가 그냥 css 에다가 했다.
진행하면서 새로 알게 된 것들만 정리해봄

배경만 투명도 설정

위 사진에 보이는 배경은 사실

이러한 사진이다.
근데 만들어 놓고 보니 배경이 너무 정신이 없어서 ㅠㅠ
투명도를 조금 주고 싶었는데 App자체에 주게 되니 전부다 투명도가 들어가더라..

그래서 이부분은 before를 이용해 가상요소를 만들어주고 거기에 배경이미지를 넣어주어 해결했다

.App {
  margin: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.App::before {
  content: "";
  background-image: url("./../public/background.png");
  background-size: cover;
  opacity: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

그라데이션

하나의 타이틀로 두기도 머쓱하지만
나중에 여기서 했다고 기록도 할 겸..
https://cssgradient.io/
여기서 만들고 친절히 코드도 복사해서 쓸 수 있다.

.container {
  width: 290px;
  background: linear-gradient(
    0deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(51, 51, 52, 1) 0%,
    rgba(233, 233, 233, 1) 100%,
    rgba(113, 135, 139, 1) 100%
  );
  height: 749px;
  margin-top: 30px;
  z-index: 1;
}

오늘 날짜로!

let today = new Date();
let year = today.getFullYear();
let month = ("0" + (today.getMonth() + 1)).slice(-2);
let day = ("0" + today.getDate()).slice(-2);
let dateString = year + "-" + month + "-" + day;

그 동안 많이 해왔지만 늘 검색해서 하기 때문에 ^^ 다시 정리.

console.log(`today:`, today);
console.log(`year:`, year);
console.log(`month:`, month);
console.log(`day:`, day);

그리고 원하는 곳에 {dateString} ~

🎞 사진 업로드

어제 그저께 간단히 공부했던 것을 이용함!
일단 네모난 거 한 칸에 하나씩 들어가야 하기 때문에
코드가 너무 정신없어 질 것 같아 따로 component를 만들어 주었다.

사진영역 눌러 사진 업로드

Upload.js

const Upload = () => {
  const [Image, setImage] = useState(null);
  const fileInput = useRef(null);

  const onChange = (e) => {
    const file = e.target.files[0];
    console.log(e.target.files);
    const reader = new FileReader();
    reader.readAsDataURL(file);

    return new Promise((resolve) => {
      reader.onload = () => {
        setImage(reader.result);
        resolve();
      };
    });
  };

  return ( ... )

파일을 첨부할 때 onChange 함수가 실행된다.
FileReader를 생성하고 readAsDataURL로 받아온 파일을 reader로 불러와준다.

일단 지난번에 공부했던 것은 input을 누르면 파일 윈도우가 뜨는 것이었는데,
지금은 사진영역자체가 이미지업로더가 될 것이다.

img 태그에 기본 이미지를 초깃값으로 한 state를 만들어 src에 넣어준다.
useRef() 변수를 생성해서 사진을 클릭하면 파일 업로더를 띄울 수 있도록 onClick함수의 이벤트에 넣어주었다.

const [Image, setImage] = useState(null);
const fileInput = useRef(null);
...
 	 <img
		style={{
          width: "250px",
          height: "150px",
          margin: "10px 20px",
          cursor: "pointer",
        }}
		src={Image ? Image : process.env.PUBLIC_URL + "blank.jpg"}
		onClick={() => {
  			fileInput.current.click();
			}}
        />

input에 만들었던 useRef() 변수를 참조하도록 해준다.
그리고 input 모냥이 보이면 구리므로 display: "none"을 해줘야 함

      <input
        style={{ display: "none" }}
        accept="image/*"
        type="file"
        onChange={(e) => onChange(e)}
        ref={fileInput}
      />

마지막으로 App.js에서 불러와주면 끝!

<Upload onChange={onChange} />

---

일단 여기까지 진행했는데,
마지막사진처럼 비율이 다른 사진을 쓰게 되면 찌부러진다 ㅠ ㅠ
뭐 이미지 자체를 조절했으니까 당연하지만, 이부분을 수정해야함

---

사이즈를 조절하는 모달창을 만들어서 진행하다가,
어디서부터 꼬였는지 실패하게 되어,

 objectFit: "cover"

를 이용해서 일단 찌부러진 사진은 바꾸었음