오랜만의 포스팅이지만...길게 적을 것은 아니고 개발도중 어이없던 에러가 하나 생겨나 짧게 포스팅을 해볼까 한다.   프로필 페이지를 개발하던 도중 분명히  로컬 테스트 환경에선 잘만 나오던 성별아이콘이 빌드 이후 EC2에서 배포 중에는 이미지를 불러오지 않는 버그가 터진 것이다. ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 간단하지만 로직을 보여주자면  아이콘으로 사용할 사진의 이름을 FEMALE과 MALE이라는 대문자. png로 저장을 하였다.굳이 대문자로 저장되어 있는 이유는보시다시피 우리 백엔드 서버가 로그인한 유저의 성별정보를 보내줄 때 이렇게 대문자문자열로 성별을 보내 주기 때문이다. 따라서나는 따로 if 로직을 추가할 필요 없이 src를 설정하는 부분에서 링크에서 성별 부분을 데이터 통신으로 받아와MALE..

검색기능! 기존의 검색기능 구현중에 의견이 나왔기에 반영을 해보려고 했다. 기존의 작품검색의 로직은 움짤과 같이 검색 Input 창에 검색어를 입력후 search 버튼을 눌러야 검색 로직이 작동해 작품정보를 받아와 결과로 뿌려주게 된다. 원하는 동작! 원하는 동작의 버전은 검색버튼을 누르는 추가동작없이 input 창에 검색어를 입력하면 실시간 반영되어 검색결과가 나오길 희망했다. 하지만 이기능의 구현을 생각하다보니 문제점이 생겼다. 생겨난 문제점! 이러한 동작을 생각해 검색어를 입력할때마다 감지하여 useEffect 기능을 사용해 search() 통신컴포넌트를 실행시키는 로직을 설계해봤다. 하지만 이렇게 간단히 구성하니 검색단어의 구성글자 한글자마다 통신이 오고가 엄청난 자원낭비가 생긴다는걸 인지했다. ..

들어가기에 앞서... 기초적인 회원로그인 기능은 이미 해봤던 기능이기에 별다른 어려움 없이 완료를 하였지만 소셜로그인은 처음 시도해보는것이기도 하며 일반적으로 서칭을 해 나왔던 여타 일반적인 다른 프로젝트와는 조금 다른 부분이 있다고 생각하기에 포스팅을 하기로 했다... 소셜로그인의 구조 일반적으로 진행하는 소셜로그인의 구조라고한다 리액트 (프론트 클라이언트) 측에서 카카오에 api키등이 포함된 url 로 푸쉬를 해 카카오측에서 보내주는 인가코드를 전달받고 전달받은 인가코드를 백앤드 서버측에 보내줘 백앤드 서버가 토큰을 발행받아 우리서버의 엑세스토큰을 발행해 리액트 측에 전달해주는 과정이다. 소셜로그인 구현에 대해 간단히 구글링을 해보았을때도 대부분의 사용자들이 이러한 구조방식을 사용하고있었다. 하지만 ..