코딩기록

포트폴리오 컨셉을 게임으로 잡고 작업하던 중컨셉이 게임이니까 간단한 게임을 넣으면 좋지 않을까? 하는 생각에 시작하게 되었다.  https://youtu.be/BgK7qM8-3dQ?si=jLCrRnbVzI6ipL8e내가 원하는 게임과 비슷한 강의를 찾았는데 js 강의였다.먼저 js로 만들어 실행해본 뒤 리액트로 바꾸어서 적용을 하기로 했다. >> js 게임 전체 코드 더보기let canvas;let ctx;canvas = document.querySelector(".game_canvas");ctx = canvas.getContext("2d");canvas.width = "500";canvas.height = "800";const scoreTextEl = document.querySelector(".sco..

어쩌구 저쩌구,... 알라딘 api를 연결하는데 오류가 나온다.' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.  열심히 검색을 해 본 결과 해결 방법으로는 1. 서버 만들어서 해결하기2. heroku 사용하기3. https://cors-anywhere.herokuapp.com   ..

내가 요즘 잘 이용하고 있는 북적북적 이라는 어플을 웹으로 만들어보면서 학습하고 있다.전에 고캠핑을 만들었을 땐 파이어베이스를 이용해서 했는데 이번엔 zustand를 접해 볼 기회가 있어 적응해볼 겸 적용해보았다.zustand를 이용해 로컬 스토리지에 책 데이터(독서한 책)를 저장하고 있다.  책 정보 types더보기// 상품 조회 데이터export interface BookData {  title: string;  author: string;  cover: string;  description: string;  isbn: string;  isbn13: string;  link: string;  publisher: string;  pubDate?: string;  subInfo?: {    itemPag..

const [userAnswers, setUserAnswers] = useState([]);const activeQuestionIndex = userAnswers.length;const quizIsComplete = activeQuestionIndex === QUESTIONS.length;const handleSelectAnswer = useCallback((selectAnswer) => { setUserAnswers((prev) => { return [...prev, selectAnswer]; });}, []);const handleSkipAnswer = useCallback( () => handleSelectAnswer(null), [handleSelectAnswer]); .....

부수효과란?앱이 제대로 동작하기 위해 실행되어야 하지만 현재의 컴포넌트 렌더링 과정에 직접적인 영향을 미치지는 않는 작업 sample1. useEffect() 사용 장소가 나열된 리스트를 사용자의 위치와 가까운 순으로 나열하고 싶다.  위치 코드는 있는 상태더보기function toRad(value) { return (value * Math.PI) / 180;}function calculateDistance(lat1, lng1, lat2, lng2) { const R = 6371; const dLat = toRad(lat2 - lat1); const dLon = toRad(lng2 - lng1); const l1 = toRad(lat1); const l2 = toRad(lat2); const..

캠핑장 후기를 작성하고 이미지가 추가할 경우 FileReader로 이미지가 미리 보여지며등록하기를 누르면 파이어베이스 storage에 저장이 된다.이미지는 4개로 제한해놨기때문에 4개가 초과되면 alert창이 뜬다.    firebase 들어가면 확인할 수 있다. 내가 작성한 필드와 스토리지에 저장된 이미지들.   FileReader정의 :FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 함.비동기적으로 동작함. Base648비트 2진 데이터를 (플랫폼의) 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일..

데이터를 가져올 때 where과 orderBy를 같이 쓰면 생기는 문제 cloud Firestore  색인에 들어가서 복합 색인을 만들어준다.필요한 필드의 조건을 정해주고 만들어주면 색인이 생긴다.사용 설정될때까지 시간이 좀 걸린다.상태가 사용 설정됨이 되면 화면에 반영된다. // 좋아요 리스트export const getLikeList = async (userId: string) => { try { const q = query( likeListItem, where("userId", "==", userId), orderBy("createdAt", "desc"), ); const snapshot = await getDocs(q); return snapsho..

좋아요... 좋아요 기능을 추가해야한다...어떻게 해야하는지 엄청 찾아봤지만 기본 로컬데이터를 이용해서 관리하기는 어렵고파이어베이스를 이용한김에 데이터 관리도 로컬이 아닌 파이어베이스로 변경했다. https://hhyj0000.tistory.com/184 [Next 고캠핑] 로컬 데이터 파이어베이스로 변경하기캠핑장 좋아요 기능을 추가하기 위해서 로컬로 데이터를 불러왔던것을 firebase로 바꿨다.오른쪽 상단 더보기를 눌러서 json 가져오기를 누르면 내 데이터가 잘 들어와진 것을 확인할 수 있다.  hhyj0000.tistory.com   likeList 컬렉션을 만들었다.여기에 userId를 추가해서 유저의 좋아요 상태 관리를 할 것. https://firebase.google.com/docs/fir..

캠핑장 좋아요 기능을 추가하기 위해서 로컬로 데이터를 불러왔던것을 firebase로 바꿨다.오른쪽 상단 더보기를 눌러서 json 가져오기를 누르면 내 데이터가 잘 들어와진 것을 확인할 수 있다.  로컬로 불러오기 // 데이터 불러오기 useEffect(() => { async function fetchData(): Promise { if (!query.region) return; // 지역 값이 유효할 때만 setLoading(true); try { const response = await axios.get( `${API_URL}/basedList?serviceKey=${SERVICE_KEY}&numOfRows=3000&pageNo=1&Mo..

로그인, 회원가입 화면page > login const [formError, setFormError] = useState(false); // 로그인, 회원가입 에러 const [tabLogin, setTabLogin] = useState(true); // 로그인, 회원가입 탭 const router = useRouter(); const { isLogin } = useAuth(); useEffect(() => { // 로그인된 상태에서 /login 들어오면 홈으로 if (isLogin) { void router.replace("/"); } else { // active 클래스 1초 뒤 삭제 const timer = setTimeout(() => { ..