[Blog Thumbnail Maker] 폰트 사이즈를 조절해보자

 

[Blog Thumbnail Maker] 썸네일 메이커 기능 개선 프로젝트

▲ 기능 개선을 하고싶은 항목들에 대한 포스팅

[Blog Thumbnail Maker] 썸네일을 저장해보자

▲ 지난 포스팅

 

썸네일 저장 기능 구현 포스팅을 한 지 벌써 한 달 정도가 지나버렸다. 너무 띄엄띄엄 포스팅을 하는게 아닐까 싶지만, 한 달 동안 기능 구현을 안 한건 아니고, 그동안 이것저것 많이 시도하면서, 기능 개선 및 추가를 했는데 아직 한 두 군데 나사 빠진 것들이 많았다. 그 중에 만족할만큼 결과가 나온 기능이 있어 포스팅을 작성해보려 한다. 

 

오늘 포스팅에서 다루려고 하는 기능은 폰트 사이즈 조절 기능에 대한 것이다. 기존에는 80px 사이즈로만 썸네일을 제작할 수 있었지만 이제는 자유자재로 폰트 사이즈를 조절할 수 있게 되었다.

---

먼저 썸네일 메이커의 근황이다.

CSS 속성을 좀 적용했고, 텍스트 입력란과 지난 번에 구현한 저장 버튼 아래에 4개의 기능이 더 추가된 것을 볼 수 있다.

'배경 색상 선택하기' 같은 경우에는 이 프로젝트를 처음 구현할 때 넣은 기능이라 손을 대지 않았고, '폰트 색상 선택하기' 기능은 다음 포스팅에서 다룰 생각이다. 오늘 볼 부분은 하단 맨 우측의 80px로 표현된 폰트 사이즈 선택 기능이다.

 

여기 속성이 잘못 들어갔네....

위 사진처럼 드롭 다운 메뉴로 폰트 사이즈를 선택할 수 있으며, 기본적으로 제공되는 사이즈는 50px, 70px, 80px, 100px, 120px, 150px. defaultValue로는 80px을 지정해주었다.

 

120px로 설정하면 

확실히 텍스트 크기가 커졌다.

 

이제 이 기능을 어떻게 구현했는지 적어보도록 하겠다.

---

📚 이 기능을 구현하는 데에 사용한 라이브러리

React-Select

 

바닐라와 js 둘 다 select, options을 사용해서 기본적으로 셀렉트 기능을 구현할 수는 있지만, 이런 라이브러리가 있어 사용해보았다.

js는 역시 라이브러를 갖다 쓰는 맛에 쓰는...

 

---

✍️ 이 기능을 구현하며 참고한 레퍼런스

Intro to React Select - Cathy Richards

 

Como usar react-select en tu proyecto frontend - Yasu Flores

국내에서 참고할만한 레퍼런스가 많지 않아서 공식 문서와 해외 개발자들의 유튜브 영상을 참고하여 구현하게 되었다.

---

⌨️ 기능 구현 코드

Select

const options = [ 
    { label: "50px", value: "50px" },
    { label: "70px", value: "70px" },
    { label: "80px", value: "80px" },
    { label: "100px", value: "100px" },
    { label: "120px", value: "120px" },
    { label: "150px", value: "150px" }
  ];
  
const [textSize, setTextSize] = useState(options[2]);

<div id = "divSelectSize">
      <Select 
      className = "fontSize" 
      placeholder = "폰트 사이즈"
      options = { options } 
      value = { textSize }
      defaultValue = { textSize[2] }
      onChange = { e => setTextSize(e) }
      />
    </div>{/* End of divSelectSize*/}

options 배열은 label, value 형식으로 작성한다. label은 사용자에게 보여질 값, value는 내부적으로 사용될 값을 의미한다.

useState를 사용한 textSize의 경우 초기값을 options배열의 2번째 원소, 즉 80px로 설정했다는 것을 알 수 있다.

<Select> 태그 안의 요소들은 다음과 같다.

• className? : 해당 Select의 이름
• placeholder? : 기본적으로 표시될 텍스트 (하지만 표시가 안된다. defaultValue가 설정되어 있기에 그렇다고 생각중이다.)
• options? : 해당 select에서 옵션으로 사용될 옵션, 배열로 선언된 options을 넣어주었다.
• value? : value가 들어갈 곳이다. 
• defaultValue? : select에서 기본값으로 설정할 값이다. 역시 2번째 원소, 80px을 넣어준 모습이다.
• onChange? : 텍스트 사이즈를 선택하면 실행되는 onChange 이벤트 함수.

지난 번 썸네일 저장 기능 구현 포스팅과 달리 이번 포스팅은 설명할 코드가 이게 전부다....

 

---

👀 느낀 점

사실 기능은 작동은 하나 코드는 효율적이고 깔끔하게 짜여졌는지 스스로도 의문이 간다.  이 부분은 각 컴포넌트들을 각각의 .js의 파일로 나누는 과정을 진행하며 수정할 것이 있다면 수정을 해야겠다.

 

react-select 라이브러리의 공식 문서에 들어가보면, style을 따로 지정해 줄 수도 있는데 아직 이건 스스로 활용할 정도로 공부가 안 된 관계로 이 부분 또한 위에서 말한 작업을 진행하며 같이 적용해보도록 해야겠다.

 

아직 부족한 부분도 많고, 배워야 할 것들도 많다고 느낀다.

다음 구현을 목표로 두고 있는 기능은 '폰트 색상 선택' 기능, 그리고 '썸네일 사이즈 선택' 기능이 될 것 같다.