유이로운 개발일지

input 태그 안에 accept 를 넣어 원하는 확장자를 넣어 두면 파일 선택 시 '사용자 지정 파일'이라는 파일 형식 제한으로 파일을 선택할 수는 있지만 해당 탭을 '모든 파일'로 누르게 되면 여전히 모든 파일을 선택할 수 있다는 점에서 유저의 파일을 통제할 수가 없다는 단점이 존재하였다... 유저 입장에서는 개발자가 어떤 파일 형식을 원해서 사용자 지정 파일을 선택해 놨는지 알 수가 없기에 어? 사용자 지정 파일? 그냥 모든 파일로 해서 봐야지~ 하고 모든 파일로 파일 형식을 설정해 놓고 볼 수 있기 때문에 충분히 위험이 도사리고 있다... 그래서 아래와 같은 코드를 통해 input 의 accept 을 통한 파일 제한 뿐만 아니라, 파일 확장명과 용량을 제한하여 허용하지 않은 파일이 선택됐을 경우 ..

useEffect(() => { window.scrollTo(0, 0); }, []); React를 사용해서 웹사이트를 개발 중인 상황인데, 이전 페이지 스크롤 위치가 다음 컴포넌트 페이지의 스크롤 위치에도 영향을 미쳐 새로운 페이지에 접속했을 때 가장 위부터 볼 수 있는 것이 아니라 이전 페이지에서 있던 스크롤의 위치에 영향을 받아 페이지를 보는 데 불편함이 있었다. 따라서 위처럼 useEffect, 의존성배열을 빈배열로 한 상태로 window.scrollTo(0,0)을 주어서 화면이 마운트 됐을 때 스크롤이 최상단에 위치하도록 하였다. 하지만 이럴 경우 윈도우 자체의 화면 캡처 기능을 사용하려고 하거나, 현재 있는 사이트의 탭이 아닌 타사이트의 탭을 다녀오는 등 현재 사이트에서 벗어난 작업을 하기만 ..

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..