2024/11/19 3

리액트) 브라우저가 처음 실행될 때 바로 시작되게 하는 방법

import { useEffect } from 'react';function Today() {  useEffect(() => {    console.log("우리는 코사녀들이에요 ㅎㅎ")  })  return (    div>Hello, world!div>  )}export default Today; 전체보기 라는 p태그를 누르자마자콘솔창에 "우리는 코사녀들이에요 ㅎㅎ"라고 찍히게 하고싶었다. 테스트용으로 그러면 저렇게 입력해준 다음에원하는 곳에 함수를 호출해주면 된다.

axios 사용할 때 export 에서 오류가 뜰 경우에 해결하는 방법

인피니트 콘서트랑 팬미팅으로 되어있는MOCK_DATA 하단도 같은 MOCK_DATA로만들고,전체보기를 클릭했을 때는 MOCK_DATA의하단에 공연 데이터들을 불러와서그리드로 출력을 해주려고 했다. 메일로 받은 KOPIS의 open API 인증키로axios 사용해서 공연 데이터를 가지고 있는공연예술통합전산망 서버에 접근하려고코드를 작성했는데process.env.REACT_APP_API_API_URL이라는 부분에서 자꾸 에러가 났다. 검색해봤더니  vite 프로젝트에서 이런 에러가 생기는 경우,cra에서 쓰는 process.env 가 아니라다르게 가져와야 하기 때문에import.meta.env 라고 써야한다고 한다.  출처https://serene-r.tistory.com/44

API 키가 노출되면 안 되는 이유

오늘 하려고 했던 일은사용자가 검색 텍스트 박스에 검색을 하면검색어를 포함되는 데이터를 출력하는 로직을짜려던 일이었다. 뮤지컬과 연극 사이트에 접속한 뒤,개발자 도구를 누르면 내 API를 볼 수 있다고 해서들어가봤는데 볼 수가 없어서 튜터님께 갔다.내가 완전히 잘못 알고 있었다.. API 키는 그 서버를 사용할 수 있는 사람들에게만 주는 것이고가지고있으면 그 서버를 제어할 수 있는 것이다. 내가 api키를 받고 나서 .env파일에 api키를넣었는데 왜 api키를 숨기는지 궁금했다. 전에 팀플 할 때에도 튜터님들이랑 팀원들이api키 숨기라고 했고, 며칠 전에는같이 공부하는 분이 api가 .env파일에 있지 않아서남들이 보게돼면 깃에 올라가지지 않지 않냐고물어보시기도 했다.. 마침 질문이 생겼다.api키도 ..