TIL26 [react] Intersection Observer API 스크롤에 도달했을 때 이미지 로딩하기 lazy load 이번 프로젝트는 유튜브 api를 사용하여 추천 영상을 등록하고, 검색하는 프로젝트를 진행하였다. 한 페이지에 이미지가 많이 배치될 예정이라 이미지 렌더링을 한 번에 하지 않는 방법을 찾던 중 IntersectionObserver 를 알게 되었다. 먼저 useState와 useRef를 추가한다. 렌더링 될 이미지가 여러 개이기 때문에 배열로 useRef에 담는다. const [visibleIndices, setVisibleIndices] = useState([]); const imageRefs = useRef([]); useEffect로 data가 변경될 때마다 실행시킨다. data : supabase에서 검색해 온 데이터 IntersectionObserver(callback[, options]) : 대상.. 2024. 2. 27. supabase database 정책 설정 이번 팀프로젝트에서 우리 팀은 supabase를 사용하기로 했다. 테스트를 위해 아래와 같이 설정 후 코드를 작성하였다. supabase url 과 key는 settings -> API에서 가져와서 env 파일에 넣었다. import React, { useEffect, useState } from 'react'; import { createClient } from '@supabase/supabase-js'; function Search() { const [data, setData] = useState(); const supabase = createClient(process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_KEY); useEffect.. 2024. 2. 23. [Glitch / vercel] json-server 배포하기 json-server 레포 생성 먼저 깃헙에서 json-server를 배포할 레포지토리를 생성한다. 이름은 auth-json-server라고 지었다. 그러고 레포를 vscode로 열고 아래와 같이 셋팅을 시작한다. json-server 셋팅 nodejs 프로젝트로 만들어지고, package.json 파일이 생성된다. npm init -y 루트 경로에 server.js 파일을 생성한 후 아래의 내용을 넣는다. // server.js const jsonServer = require("json-server"); const server = jsonServer.create(); const router = jsonServer.router("db.json"); const middlewares = jsonServer... 2024. 2. 22. 리팩토링 진행 이번 개인과제가 마무리되었다. 개인 과제 마무리 후 해설 영상을 보면서 리팩토링을 진행하였다. 1. 리듀서 로직 기존에는 리듀서에서 처리해야 할 로직을 컴포넌트에서 하고 있었다. 이 부분을 리듀서로 옮겨와서 처리하도록 변경하였다. [리팩토링 전] /redux/modules/letter.js //리듀서 const letter = (state = initialState, action) => { console.log(state); switch (action.type) { case UPDATE_LETTER: return { ...state, data: action.payload }; default: return state; } }; export default letter; [리팩토링 후] /redux/modul.. 2024. 2. 6. 두 번째 팀 프로젝트 시작 오늘부터 두 번째 팀 프로젝트가 시작됐다. 강의만 듣는 것보다는 역시 만드는 게 재밌는 것 같다. 잘 만들기 위해서는 강의도 열심히 들어야겠지만..ㅎㅎ 오늘의 일 와이어프레임 제작하기 역할 분배하기 - 리뷰 작성하여 localStorage에 저장하는 부분을 맡았다. 리뷰 영역 ui 작업하기 어제 있었던 깃 특강 복습하기(바로가기) 배운 점 / 느낀 점 코드 리뷰 오늘 튜터님께서 작성해 주신 코드 리뷰를 확인했다. 깃에 올리면 안 되는 설정 내용들을 올리지 않는 방법을 찾아봐야 할 것 같다. 깃 페이지로 배포하다 보니 git ignore로는 해결이 안 될 것 같다. 리액트에서는. env로 해야 된다고 하셔서 이 부분도 검색해 봐야겠다. 그리고 배포 시 사용하지 않는 주석 삭제해야 하는 내용도 있었는데, 다.. 2024. 1. 10. git 명령어 두 번째 오늘부터 다시 팀 프로젝트여서 어제 했던 깃 특강 내용을 다시 봤다. 브랜치 생성 git branch 브랜치명 브랜치 확인 git branch 브랜치 이동 git switch 브랜치이름 ----> 이게 최신 명령어 git checkout 브랜치이름 ----> checkout이 더 기능이 많음 더 큰 개념? git checkout 으로 브랜치 이동은 해봤는데 git switch로 이동하는건 처음 알게됐다. 브랜치 생성하고 바로 이동 git switch -c 브랜치이름 git checkout -b 브랜치이름 이 부분도 처음 알았다. 자주 유용하게 사용할 수 있을 것 같다 2024. 1. 10. data attribute / dataset / getAttribute() 사용자 정의 속성 활용 네이버 바로가기 나는 레드 html 코드에 위 코드와 같이 data-* 을 사용하여 사용자정의 속성을 추가할 수 있다. 사용자 정의 속성 가져오기 (data-*) data-* 은 두 가지 방법으로 가져올 수 있다. dataset 프로퍼티와 getAttribute()이다. 1. dataset 프로퍼티 data-text-size와 같이 - (대시)가 두 번 연달아 있을 경우에는 카멜케이스를 사용하여 가져올 수 있다. const $p = document.querySelector('.text'); console.log($p.dataset.color); //red console.log($p.dataset['color']); //red console.log($p.dataset.textSize.. 2023. 12. 28. firebase updateDoc, getDoc 으로 데이터 조회 및 수정하기 / git branch 최신화 등록된 방명록 수정하기 방명록 각 데이터의 식별 가능한 id 가져오기 (코드의 일부) let docs = await getDocs(collection(db, 컬렉션명)); docs.forEach((doc) => { let row = doc.data(); let html = ` 닉네임 : ${row.nicname} 내용 : ${row.content} ` }); firebase 공식 문서를 통해 doc.id 를 가져왔다. 수정시에 방명록의 id를 넘겨주기 위해 input hidden 으로 만들고 value 에 doc.id 를 넣었다. 수정 기능 import { doc, updateDoc, getDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-f.. 2023. 12. 26. 이전 1 2 3 4 다음
