일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Boostrap
- url
- API
- SQL
- W
- useEffect
- db
- HTML
- web
- TMDB
- Database
- this
- REACT
- firestoredatabase
- jQuery
- http
- CSS
- Protocol
- Github Pages
- data
- til
- github
- nosql
- Cloud
- bootstrap
- IntersectionObserver
- supabase
- JavaScript
- 배포
- Fetch
- Today
- Total
072DATA
안녕 강의를 듣다가 정리하면서 학습하면 좋을 것 같아서HTTP 상태코드 및 HTTP 메서드에 대해서 간략하게 적어보았다. HTTP 상태코드 서버가 클라이언트의 요청을 처리한 결과이고세자리 숫자로 구성되어 첫 번째 자리에 따라 의미가 다르다 1xx : 정보100 (Continue) :요청의 일부를 서버가 받았으며, 나머지를 계속 보내달라는 의미 2xx : 성공200 (OK) : 요청이 성공적으로 처리되었음을 나타냄201 (Created) : 요청이 성공적으로 처리되었고 새로운 자원이 생성되었음을 나타냄 3xx: 리다이렉션301 (Moved Permanently) : 요청한 리소스가 영구적으로 새로운 URL로 이동302 (Found) : 오청한 리소스가 임시로 다른 URL로 이동 4xx: 클라이언트 오류..
안녕 오늘은 리덕스를 사용해 React에서 상태 관리를 어떻게 구현하는지 정리했음리덕스는 중앙 집중식 상태 관리를 가능하게 해주고 컴포넌트 간에 상태를 공유할 수 있게 해줌 리덕스 스토어 설정 리덕스로 상태 관리를 하려면 스토어를 먼저 설정함스토어는 애플리케이션의 모든 상태가 저장되는 공간임import { combineReducers, createStore } from "redux";// 1) rootReducer: 여러 리듀서를 합치는 부분 (현재는 빈 객체)const rootReducer = combineReducers({});// 2) store 조합: rootReducer를 기반으로 스토어 생성const store = createStore(rootReducer);// 3) 스토어 exporte..
안녕하세요 오늘은 팀 프로젝트를 진행하면서 구현했던 무한스크롤 방식을 TIL로 작성해보려 합니다무한 스크롤은 꼭 한 번 구현하고 싶었던 기능이었기 때문에 설레는 마음으로 기능을 구현하였습니다.intersectionObserver을 React에서 사용하고 Supabase로 데이터를 받아왔습니다!1. 상태 변수 설정 const [postLoadingMore, setPostLoadingMore] = useState(true); const [displayedPosts, setDisplayedPosts] = useState([]); const [offset, setOffset] = useState(0); const limitLength = 6; postLoadingMore: 추가 데이터가 있는지에 대한 ..
스타일드 컴포넌트는 React에서 CSS-in-JS 스타일링을간편하게 적용할 수 있는 라이브러리인데요 조건부 스타일링을 통해 컴포넌트의 상태나 props에따라 동적으로 스타일을 변경할 수 있슴다 기본적인 조건부 스타일링 예로 들어 버튼의 활성화 상태에 따라 색상을 변경하는 경우 예시 코드와 같이 작성이 가능해요 코드예시import styled from 'styled-components';const Button = styled.button` background: ${props => props.primary ? 'blue' : 'gray'}; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; ..
오류 내용 로그인된 상태에서 새로고침하면 클라이언트가비로그인 상태로 인식하여 로그인 페이지로 보내는 오류가 발생했음 useEffect도 사용해보고 로직도 새로 다시 짜보고 useState로 loading을 만들어서 user 데이터 값이 들어올 때까지 기다려보아도 해결할 수 없었는데 context 파일을 살펴보니 user의 초기 값이 null 인 것이었다그러하여 3가지 상태를 정의하여 오류를 해결하기로 했다 해결 방법1. 초기값이 존재하면 로딩중인 상태2. null이면 비로그인 상태3. 데이터 값이 존재하면 로그인 상태 2, 3번은 데이터베이스에서 전달된 값에 따라 상태가 null 혹은 데이터가 전달되지만초기 값은 직접 커스텀 해줘야 한다 만약 컴포넌트 어딘가에서 user에 대한 데이터 값에접근한다면 해당..