Library-Framework/React23 React 컴포넌트를 어떻게 만들어야 할까? React는 컴포넌트 기반 라이브러리입니다. 웹을 개발할 때 헤더, 메인 콘텐츠가 들어가는 부분, 버튼 등을 만든다면 하나의 컴포넌트로 묶어서 관리할 수 있습니다. 그렇기 때문에 개발하다가 특정 부분에서 오류가 생겼다고 한다면, 그 컴포넌트만 수정하면되기 때문에 코드를 간결하게 만들 수 있습니다. 지금까지 React로 여러 가지 프로젝트를 해보면서 많은 컴포넌트들을 만들어보았고, 그 과정에서 비슷한 기능인데도 모두 따로 만든다던가 하는 방식으로 비효율적인 방법으로 만들었다가 또 다시 그 코드를 고쳐서 하나의 컴포넌트를 깔끔하게 만들었을 때 재미를 느꼈습니다. 그래서 컴포넌트를 어떻게 해야 잘 만들 수 있을 지에 대한 점이 궁금해 몇 가지 글과 웨비나를 참고해서 정리해봤습니다. 1. React 컴포넌트와 .. 2024. 1. 20. 🌟 외부 라이브러리 없이 별점 평점 기능 만들기 별점 평점 은 리뷰 기능을 만들 때 빠질 수 없는 요소이다. 현재 진행 중인 프로젝트의 리뷰 작성 페이지를 만들면서 별점 평점 기능을 만들게 되었다. 요새 Chakra UI 처럼, 외부 UI 라이브러리가 매우 잘 되어있기 때문에 자주 쓰이는 UI 컴포넌트들은 대부분 라이브러리를 사용해 만들고 나는 로직에 더 집중하는 방식으로 개발을 진행했었다. 하지만 아쉽게도 (?) 자주 쓰는 라이브러리에서는 별점 컴포넌트가 제공되지 않았고 로직을 생각해보니 그리 어렵지 않은 것 같아서 직접 만들어보았다. (찾아보니 있긴 했다.) https://www.npmjs.com/package/rc-rate rc-rate React Star Rate Component. Latest version: 2.12.0, last publi.. 2023. 12. 29. [React] 폰트 파일 추가하기 1. otf 파일 다운받기 2. woff 또는 eot 파일로 변환하기 다른 브라우저에서도 나오게 하려면 이 과정이 필요하다고 한다. https://anyconv.com/ko/ttf-to-eot-byeonhwangi/ 온라인에서 TTF를 EOT로 변환하십시오 - AnyConv AnyConv는 5 성급 TTF EOT 변환기입니다 ⭐ 온라인에서 ttf를 eot로 몇 초 안에 변환하십시오 👍 소프트웨어 설치가 필요하지 않습니다 👍 무료로 👍 완전히 안전합니다. TTF를 EOT로 쉽게 변경할 수 anyconv.com 3. src 폴더 내에 font 폴더 만들기 4. font 폴더 내에 woff 파일 넣기 5. font 폴더 내에 font.css 파일 만들기 @font-face { font-family: "Noto.. 2023. 4. 8. [React] Google Map Polygon 바로 띄우기 문제 상황 처음 지도가 불러와질 때 Polygon이 뜨지 않는다. 문제 원인 내가 사용 중인 react-google-map api의 functional component는 react strict and/or react@17+에서는 작동하지 않는다고 한다. https://www.npmjs.com/package/@react-google-maps/api 해결 방법 1. react strict 모드 제거하기 2. react 다운그레이드 하기 둘 중 나는 1번 방법을 선택하였다. (다운그레이드하기 귀찮았다) 참고 문헌 https://stackoverflow.com/questions/72229607/markers-not-rendering-using-react-google-maps-api/73769832#737698.. 2023. 4. 3. 이전 1 2 3 4 ··· 6 다음
