유이로운 개발일지

1. jsx로 LikesBar를 지정하고 Style 컴포넌트를 분리하여 likes라는 Props를 스타일 컴포넌트로 넘겨주고 있는 상황. width: ${(props) => props.likes}%; 2. Props 를 넘겨 받는 이유: width 를 Likes 비율만큼 늘려줘야 하는 상황이기 때문에! 요로케 말입니다... 또가요 / 안가요 비율에 따라 움직이게 만들어야 하는 상황! 하지만 이렇게 코드를 두면 아래와 같은 콘솔 워닝이 나타났습니다! styled-components: it looks like an unknown prop "likes" is being sent through to the DOM, which will likely trigger a React console error. If yo..

1. 현재 포스트에 date 로 저장되어 있는 것 여기에 백 날 new Date(date)를 해 줘도 invalid Date가 뜰 뿐이었다... 그래서 정말 혹시 모르는 마음에 date.seconds 로 new Date() 를 해 줬더니 아래와 같은 결과가 나왔다 위가 date.seconds 의 결과, 아래가 new Date(date.seconds)를 한 결과이다. 엥? 근데 실제 저장된 날짜는 1970년도 1월 20년도에 작성된 글이 아니다... nanoseconds 를 해 보아도 비슷한 결과가 나온다... 이건 아닌 듯하다...ㅠㅠ const postDate = post.date.toDate().toDateString() 결론은 해당 방법으로 해결했다... post.date = 게시물의 date(Ti..

1. 태그를 생성하고, 클릭 시 글 제거 함수를 일으키도록 한다. 예시) { deletePostHandler(post); }} > 삭제 여기서 매개변수로 넣은 post는 제가 삭제할 post의 정보일 뿐입니다! 각자의 상황에 맞추어 함수를 실행해 주기만 하시면 됩니다! 2. 해당 함수에 if else 문을 삽입하고, if 문안에 window.confirm("") === true 조건을 넣어 준다. 여기서 ""안에 들어가는 메세지는 알림창의 메세지로 뜨게 된다. if 문 안에 있는 것이 이용자가 확인을 눌렀을 경우, else 문이 취소를 눌렀을 경우에 실행되는 부분이다. 예시) const deletePostHandler = (post) => { if (window.confirm("정말 삭제하시겠습니까?")..

사진처럼 프로필을 만들고 있는데, 회색 원 안에 카메라 이미지를 배치하고 해당 회색 원을 눌렀을 때 파일선택창이 나타나야 하는 상황이다. 예전에 다른 블로그에서 보ㅗㄱ, input아래 span 태그를 놓고 input을 display:none처리하면 가능하다는 정보를 얻었는데 그렇게 적용을 해도 왜인지 제대로 잘 되지 않았다. 결론적으로는 label 태그 안에 input 태그를 넣고, input을 display:none처리 함으로서 회색원(=label)태그 를 누르면 파일선택창이 열리겠끔 구현하는 데 성공하였다.

태그를 type="text"로 사용하며 글자를 입력 받을 때, 최대 글자수를 제한해야 하는 경우들이 자주 있다. 이럴 때 함수를 만들어 input에 들어가는 value의 length 를 제한하는 방법도 있겠지만, 그보다 훨씬 쉽고 간단하게 최대 글자수를 제한할 수 있는 방법이 존재한다! 바로 maxLength를 사용하는 것이다. 위 경우처럼 maxLength를 지정하고, 몇 자로 제한할 건지 적어주기만 하면 maxLength 에 적어둔 숫자만큼 최대 글자수가 제한된다! 정말 쉽고 간단하게 가능하니까... 다들 사용해 보세요 오늘도 잘 해냈다!