날짜별 페이지네이션 목표 : 날짜 마다 장소를 추가할 수 있는 화면을 구현하기 dates = ["2023-08-23","2023-08-24","2023-08-25"] dates는 날짜가 하나씩 담긴 배열로 이루어져 있다. const [currentPage, setCurrentPage] = useState(0); const handleNextPage = () => { setCurrentPage(currentPage + 1); }; const handlePreviousPage = () => { setCurrentPage(currentPage - 1); }; ... return ( ... ⬅️ {dates[currentPage]} ➡️ ... ) 페이지넘버 state를 만들고, 페이지넘버를 증감시키는 함수를 ..
1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 각각의 컴포넌트에 같은 데이터를 사용해야 할 때, 컴포넌트의 관계가 부모자식이 아니면 데이터를 직접 전달해줄 수 없다.그리고 만약 전달이 가능 하더라도, 수많은 컴포넌트를 거쳐서 porp을 전달하면 prop drilling이 일어나서 어디에서 데이터가 왔는지 확인하기가 어렵다. 그러므로 state를 잘 추적하기 위해 상태관리를 꼭 해야한다. 평소에는 상태관리를 위해 중앙 저장소의 역할을 하는 Redux 같은 툴을 사용한다. 2. Redux가 무엇인가요, 왜 Redux를 사용하시나요? Redux는 애플리케이션에서 상태를 관리하는 라이브러리이다. Redux는 애플리케이션의 상태를 하나의 store에 저장하고, 상태 변경을 예측 가능..
Supabase Supabase에서 내보낸 타입 사용하기 Supabase에서 table을 생성할 때 타입을 지정하는데, 그 지정한 타입을 ts파일로 내보낼 수가 있다. table의 모든 type이 interface로 지정되어있어서 평소처럼 export에서 원하는 컴포넌트에서 타입을 사용하면 된다. 밑에 쓰여진 형식으로 필요한 부분을 지정해서 export해서 사용할 수 있다. 해당 방법이 번거롭다면, 그냥 컴포넌트에서 Database['public']... 으로 불러와서 사용해도 된다. export type PinType = Database['public']['Tables']['pins']['Update']; export type UserType = Database['public']['Tables']['u..
CPU CPU란? 사용자의 명령에 대한 작업을 수행하는 처리장치 CPU 구성 산술논리 연산장치(ALU) : 비교, 판단, 연산 제어부(CU) : 명령어의 해석과 올바른 실행을 위해 CPU를 내부적으로 제어 메모리 유닛 레지스터 : 처리할 명령어 저장 캐시 메모리(L1) : 처리속도를 높여줌 제어부 Control Unit 명령어를 실행하는 순서를 제어하고 스케쥴링 제어부 주기억 장치에 저장되어 있는 명령어를 순서대로 호출하여 해독하고, 제어 신호 발생시킴 컴퓨터의 각 장치를 동작하도록 함 내부버스 CPU와 주기억 장치, 입출력 장치, 외부 기억 장치, 주변 장치, 통신 처리 장치 등의 제어부 사이를 연결하는 버스 연산장치 Arithmetic Logic Unit 산술 논리 장치 논리 연산을 계산하는 디지털 ..
https://github.com/rmdkak/Quiz-Play-Ground GitHub - rmdkak/Quiz-Play-Ground Contribute to rmdkak/Quiz-Play-Ground development by creating an account on GitHub. github.com 튜터님 피드백 로딩중 이미지 굿 로그인 유도 할 장치 필요( 댓글 투명, 로그인 해야 볼 수 있도록..) eslint 굿 커스텀 훅 굿 optimistic 하고 debouncing 처리까지 해주면 더 굿(불필요한 클릭까지 고려) 트러블 슈팅 설명 굿굿 K - Keep Eslint 사용으로 인해 수월해진 디버깅 (너무너무 철저한 예외 처리) 공용 컴포넌트를 다양한 커스텀 조건으로 생성 논리적인 이유를 근거..
Progress bar 만들기 완성 이미지 tailwind animaton 추가하기 사용자 지정 animation을 추가하려면, tailwind.config 파일을 수정해야한다. extend: { keyframes: { progress: { '0%': { width: '0%' }, '100%': { width: '100%' } } }, animation: { progress3: 'progress 3s ease-in', progress5: 'progress 5s ease-in', progress7: 'progress 7s ease-in' } } 원하는 이름으로 keyframe을 추가한다. (progress bar를 만들 것이라서 progress로 만들었다!) 0%, 100% 만 설정하는 경우에는 from ..
CSR CSR이란? Client Side Rendering 페이지의 내용을 브라우저에서 그려준다. 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 방식 CSR의 단점 사용자가 페이지 요청을 했을 때 보여지기까지 시간이 오래걸릴 수 있다. SEO(Search Engine Optimiztion) CSR은 처음에 HTML에 아무 내용도 없기 때문에 웹 크롤러가 읽어갈 수 있는 정보가 없다. 따라서 검색엔진들이 웹페이지를 분석하기에 CSR은 나쁘다고 할 수 있다. SSR SSR이란? Server Side Rendering 서버에서 사용자에게 보여줄 페이지를 모두 구성해 보여주는 방식 기존 CSR의 느린 페이지 로딩과 SEO 문제 해결 SSR의 단점 서버 과부화 발생 가능 TTV(Time To View)와 TTI..
S3란 Amazon Simple Storage Service(Amazon S3) 인터넷 스토리지 서비스 웹 규모 컴퓨팅 작업을 수행하는 데 필요한 데이터 저장 공간 S3 사용 예 웹 사이트 호스팅 멀티미디어 파일 저장 및 스트리밍 애플리케이션 데이터 저장 백업 및 복원 아카이브 S3의 장점 높은 내구성, 가용성, 안정성 손쉬운 사용 및 관리 보안성 높은 확장 S3 Bucket 데이터를 저장하는 가상 상위 레벨의 폴더 형태의 컨테이너 객체에 대한 접근 권한을 설정하기 위한 위치 객체에 대한 이벤트 알림을 설정하기 위한 위치 버킷 및 객체 사용에 대한 비용 추적 및 모니터링을 위한 위치 네이밍 컨벤션 : 대문자 금지, 언더스코어 금지 Bucket Policy JSON 형식의 문서 버킷의 모든 객체에 대한 엑..
