늘 겸손하게

목차 문제 상황 문제 원인 해결책 - dependencies 배열 (의존성 배열) dependencies 배열 특징에 따른 결과 문제 상황 useEffect 메서드의 첫 번째 인자로 컴포넌트가 렌더링 된 이후에 실행할 코드를 넘겨주었습니다. api를 통해 데이터를 가져오는 코드였는데 데이터를 성공적으로 가져오면 dataRead state를 true로 변경하여 loading 화면에서 실제 앱 화면으로 변환되도록 구현했습니다. 하지만 불필요하게 api 호출을 두 번하는 문제가 발생했습니다. useEffect(() => { async function fetch_data() { console.log("fetch_data") console.log("dataRead : ", dataRead) const api_ke..

목차 hover 코드 hover 특정 버튼 위에 마우스 포인터를 올리면 확대되는 이펙트를 본 적이 있을 겁니다. 이를 css로 구현 가능합니다. 코드 해당 요소에 대해 hover 되기 이전과 hover 된 상태의 css 스타일이 각각 한 개씩 필요합니다. 위 gif에서 화살표 버튼의 id는 'scroll-to-top'입니다. 그러므로 마우스가 요소 위로 올라왔을때올라왔을 때 요소 크기를 키우기 위해서는 ':hover' 가상 선택자를 붙여주고 transform: scale() 속성을 사용합니다. 아래와 같은 css를 적용하면 마우스가 요소 위로 올라왔을 때 요소 크기는 1.2배로 커집니다. #scroll-to-top:hover { transform: scale(1.2); } 여기에 자연스러운 전환을 적용하..

목차 문제명 해결책 해결 문제명 프로젝트에 추가한 csv 파일이 깨지는 문제가 발생 해결책 인코딩 방식을 UTF-8에서 Korean(EUC-KR)로 변경한다. vscode 오른쪽 하단에 UTF-8을 클릭 > 인코딩하여 다시 열기 에서 'Korean(EUC-KR)'을 클릭하여 변경한다. 해결

목차 문제 해결책 코드 문제 apikey를 숨기기 위해 프로젝트에 apikey를 담은 .env 파일을 생성하고 .gitignore에 .env를 추가하여 apikey가 공개 레포지토리에서 보이지 않도록 막았다. 하지만 Github pages에 배포된 프로젝트가 apikey를 읽지 못하고 undefined를 url에 담아 api 호출이 제대로 되지 않는 문제가 발생. 로컬 서버에서 돌릴때는 apikey를 잘 읽으나 github page서는 읽지 못하고 api 호출을 못하는 상황이 발생하였다. 해결책 1. 프로젝트에 환경변수 추가 배포된 프로젝트 환경에 환경변수를 추가해주어야 한다. 우선 프로젝트 레포지토리의 settings > Secrets and Variables > Actions 에 들어간다. New r..