유이로운 개발일지

웹에서 image를 주소복사해와서 src 로 불러와서 사용하는 방법도 물론 있지만, 나의 로컬에 있는 이미지를 쉽게 불러와서 사용해야 할 경우에는 어떻게 해야 할까?? 1. public 폴더 안에 image 폴더를 생성한다 (당연히 폴더명은 관련없습니다) 2. image 폴더 안에 필요한 사진들을 넣어 준다. 3. 이후 image 파일을 사용해야 하는 컴포넌트에서 이를 src 링크에 넣어 준다. => 이때, public 폴더는 ../../ 등처럼 현재 폴더 기준의 상대경로를 기재해 줄 필요가 없다고 한다! 그냥 바로 image(사진이 있는 폴더명)/image.jpg 를 src 링크에 넣어 주면 사진이 바로 불러와진다! 엄청 간단함!!!!! 오늘도 잘 해냈다!

const totalCount = likesCount + dislikesCount; const likesPercentage =(likesCount / totalCount) * 100; const dislikesPercentage =(dislikesCount / totalCount) * 100; 위처럼 like+dislike를 각각 더한 값을 total count로 만들고, likes와 dislikes의 Percentage를 계산하였다. 이때, likesCount, dislikesCount, totalCount 의 값이 모두 0이면, 퍼센테이지 계산 값이 '0' 이 아닌 'NaN'으로 출력되는 현상이 일어났다. 하지만 typeof 로 보았을 때 likes, dislikes, total count 모두 '0..

input 을 file이라는 타입으로 이용할 때, 특정 파일 형식만 업로드 가능하게 하려고 하면 아래처럼 accept 를 넣어주고, "" 안에 파일 형식명을 넣어주기만 하면 된다. ex) 참고로 input 태그의 모양이 싫은 경우에는 input 태그를 스타일 작업하는데 여러가지 제약이 따르는 경우가 꽤 많기 때문에 input태그와 span 태그를 하나의 div에 묶고, input태그를 display: none 처리를 한 뒤 span 태그를 버튼 모양으로 만들어서 span 태그의 모양을 누르면 input 태그가 눌리는 것과 같은 일종의 사기(?) 효과를 줄 수 있다... 오늘도 잘 해냈다!

const navigate = useNavigate(); 회원가입 하러 가기 평소와 같이 코드를 작성하였는데 왜인지 버튼을 아무리 눌러도 회원가입 창으로 이동하지 않음을 발견하였다. 그래서 콘솔을 열어보니 버튼을 누를 때마다 아래와 같은 경고문이 발생하고 있었다. "You should call navigate() in a React.useEffect(), not when your component is first rendered." 찾아 보니 이런 경우에는 onClick 내부에서 useNavigate 를 바로 호출하여 사용하지 않고, 함수를 onClick 내부에서 호출시켜 작동하게 만들거나, onClick 내부에 화살표 함수를 넣고, 실행부에 navigate를 적용시키면 되는 것 같았다. 직독직해하면 u..