React(3)
-
#어이없었던 에러 - 파일이름 대소문자 대소동
오랜만의 포스팅이지만...길게 적을 것은 아니고 개발도중 어이없던 에러가 하나 생겨나 짧게 포스팅을 해볼까 한다. 프로필 페이지를 개발하던 도중 분명히 로컬 테스트 환경에선 잘만 나오던 성별아이콘이 빌드 이후 EC2에서 배포 중에는 이미지를 불러오지 않는 버그가 터진 것이다. ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 간단하지만 로직을 보여주자면 아이콘으로 사용할 사진의 이름을 FEMALE과 MALE이라는 대문자. png로 저장을 하였다.굳이 대문자로 저장되어 있는 이유는보시다시피 우리 백엔드 서버가 로그인한 유저의 성별정보를 보내줄 때 이렇게 대문자문자열로 성별을 보내 주기 때문이다. 따라서나는 따로 if 로직을 추가할 필요 없이 src를 설정하는 부분에서 링크에서 성별 부분을 데이터 통신으로 받아와MALE..
2024.08.07 -
작품검색의 로직변경! 실시간 반영 검색기능 구현하기!
검색기능! 기존의 검색기능 구현중에 의견이 나왔기에 반영을 해보려고 했다. 기존의 작품검색의 로직은 움짤과 같이 검색 Input 창에 검색어를 입력후 search 버튼을 눌러야 검색 로직이 작동해 작품정보를 받아와 결과로 뿌려주게 된다. 원하는 동작! 원하는 동작의 버전은 검색버튼을 누르는 추가동작없이 input 창에 검색어를 입력하면 실시간 반영되어 검색결과가 나오길 희망했다. 하지만 이기능의 구현을 생각하다보니 문제점이 생겼다. 생겨난 문제점! 이러한 동작을 생각해 검색어를 입력할때마다 감지하여 useEffect 기능을 사용해 search() 통신컴포넌트를 실행시키는 로직을 설계해봤다. 하지만 이렇게 간단히 구성하니 검색단어의 구성글자 한글자마다 통신이 오고가 엄청난 자원낭비가 생긴다는걸 인지했다. ..
2024.04.20 -
#UI 라이브러리
UI 라이브러리란 ? UI 라이브러리란 우리가 지금껏 개발을 하며 만들어낸 기본적인 버튼디자인, 아이콘, 별점, 달력기능, 등 여러 UI적인요소를 라이브러리 모듈 개발을 해놓아 우리가 원할때 직접 꺼내어 사용할수있는것을 말한다. 이를 잘만이용하면 실제 개발을 할때 시간을 엄청나게 단축시킬수 있고 코드의 단축화를 하기에도 수월하다. 라이브러리 종류 라이브러리 종류에는 여러가지가 있지만 오늘은 제일 유명한 것을 통해 기본적인 활용 방법을 알아볼것이다. ANTD https://ant.design/ Ant Design - The world's second most popular React UI framework An enterprise-class UI design language and React UI libr..
2023.08.16