TIL #031

오늘 한 일

정보처리기사

• 소프트웨어 설계 - 요구사항 확인

 

Bookstack

• Stack Create 페이지 ui 변경
• Book image 추가 기능
  • 이미지 추가 버튼을 클릭하면 이미지를 추가할 수 있도록 하기 (jpeg, png만)
  • 이미지를 업로드하면 해당 이미지 화면에 띄우기

참고 문헌 : FE, BE

 

오늘 배운 것

ref를 이용하여 JSX Element에 클릭 이벤트 주기

⇒ ref.current.click()

const ref = useRef<HTMLInputElement | null>(null);
const handleDiv = () => {
	if(ref.current) **ref.current.click();** // 클릭 이벤트 부여
};

return (
	<>
		<div onClick={handleDiv}/> //div 클릭시 input 클릭 이벤트 발생
		<input ref={ref}/>
	</>

 

input accept 속성을 이용하여 파일 확장자 제한하기

accept

파일 입력 칸이 허용할 파일 유형을 문자열로 제한할 수 있는 특성

문자열은 쉼표로 구분된다.

<input type='file' accept='.jpeg,.jpg,.png' />

 

FileReader를 사용하여 임시 이미지 data 만들기

const reader = new FileReader()
    // 파일을 불러오는 메서드, 종료되는 시점에 readyState는 Done(2)이 되고 onLoad 시작
reader.readAsDataURL(file)
reader.onload = (e) => {
	if(reader.readyState === 2) {
    	// 파일 onLoad가 성공하면 2, 진행 중은 1, 실패는 0 반환
      	setImage(e.target.result)
    }
}

 

오늘 느낀 점

정보처리기사 공부를 시작하였다.

정보처리기사를 공부하게 되면 CS의 방법론들에 대해 배우게 된다. 기존에 공부하던 실무적인 지식들이 아닌 근본적인 지식에 배우다 보니 CS에 대한 생각이 개념적으로 확장된다는 느낌을 받았다. 모르는 것을 새로 아는 것은 쉽진 않지만, 할 수 있다. 화이팅 : )