유이로운 개발일지

if (userOwnData?.state === "like") { return setLikes(true); } else if (userOwnData?.state === "dislike") { return setDislikes(true); } 위와 같은 코드로 userOwnData가 존재하고 그의 state에 따라 각각 useState로 설정해 둔 likes/dislikes의 boolean값을 true/false로 설정하게 만들어 두었다. 이 상태에서 likes/dislikes값이 true일 경우 버튼이 비활성화 되어 보이게(유저가 이미 해당 버튼을 눌렀음을 상기 시키기 위해) 하기 위해서 어떻게 해야 할지 고민을 해 보았다. 1. useRef 를 이용해 해당 button을 조정한다. 2. button의 ..

위는 console.log로 auth에 저장된 user의 정보이다. email, displayName, phoneNumber, photoURL, uid 등 다양한 정보를 저장할 수 있다. 하지만 위 객체 key 에 없는 정보를 auth에 추가적으로 다른 정보를 넣는 것은 불가능한 것인지 방법을 찾지 못하고 있는 것인지 알 수는 없지만 데이터 추가를 시도해 보았을 때는 제대로 되지 않았고, 검색을 해 봐도 마땅한 자료를 찾지 못했다. 따라서 auth에서 기본으로 제공하는 정보 외 다른 정보를 추가하고 싶을 경우에는 firestore에 추가적으로 user데이터를 저장하는 것이 답일 수도 있겠다는 생각이 들었다. 조금 번거로운 작업일 수 있지만 그렇게 하면 위에서 제공되는 것 외에도 자신이 원하는 정보를 마음..

1. textarea의 readonly 기능 -> 말 그대로 읽기 전용으로 사용 가능 (jsx 환경에서는 readOnly로 처리해아 함) -> 회원가입 시 약관문을 넣기 위해 사용하는 데 적합할 것 같아 사용하였다! -> disabled를 사용해도 마찬 가지로 입력이 불가능하긴 하지만, disabled는 아예 사용이 불가능하게 만드는 것이기에 현재 상황에서는 readonly가 더욱 적합할 것 같다고 생각하여 readonly를 사용하였다! 2. input의 type과 여러 기능 -> password, email, checkbox, tel 등 다양하게 사용 가능하기에 이를 적극 활용하는 것이 좋을 듯하다! -> 심지어는 time은 시간을 쉽게 설정할 수 있는 팝업이 나온다! -> tel 은 모바일로 이용시 ..

1. 유저 친화적인 것과 보기에 깔끔한 것 둘 중 하나를 선택해야 한다면 어떤 것을 선택해야 할까?에 대한 고민을 하게 됐다. 물론 유저 친화적이면서도 보기에 깔끔한 것이 가장 좋겠지만, 피치 못하게 하나를 선택해야 한다면 어떻게 해야 할까? 기획자를 꿈꾸고 있는 것은 아니지만 프로젝트를 기획할 때마다 유저 친화적인 기능을 넣기 위해 전체 레이아웃의 균형이 깨지는 것 / 레이아웃의 균형을 맞추되 유저가 약간 불편할 수 있는 것... 뭘 선택하는 게 좋을지 고민된다. 2. 좋아요/싫어요 버튼 중 딱 하나, 1번만 누를 수 있게 하려면 saved 라는 객체에 active: boolean 값을 넣어서 처음 눌릴 때 boolean 값이 변경되게 한 뒤로 변경된 boolean 값이 적용되어 있을 경우에는 버튼을 ..