털먹는토끼
프론트엔드 취준생입니다.
프론트엔드
질문S3와 Cloudfront로 웹사이트 배포 후 ACM으로 커스텀 도메인 설정 과정에서 레코드 생성이 안되는 문제가 발생했습니다.
Gatsby로 만든 개인 블로그를 CloundFront 로 배포했습니다. 아시겠지만 CloundFront 로 배포하면 도메인주소가 지저분하잖아요? 못생기고... 그래서 AWS Certificate manager를 이용해 커스텀 도메인과 https를 적용하려는데 문제가 생겼습니다. us-east-1 리전(버지니아 북부)로 설정하고 인증서 요청을 진행했습니다. 근데 인증서 요청해서 만든 CNAME이 계속 검증 대기중으로 뜹니다... 세부정도 갱신자격도 부적격으로 뜨구요ㅠㅠ Route 53 레코드 생성 버튼을 눌러봐도 레코드생성 버튼이 비활성화 되어있구요... 원인이 뭔지 도무지 모르겠네요ㅠㅠ 도와주시면 정말 감사하겠습니다!
112
1
0
닥터핸·2024-06-09
아래 몇 가지 사항들을 확인해보시기 바랍니다. 1. CNAME 레코드 설정 확인 AWS Certificate Manager에서 제공한 CNAME 레코드가 Route 53에 올바르게 설정되었는지 확인합니다.CNAME 레코드의 이름과 값이 정확하게 입력되었는지 확인합니다.AWS 리전이 올바르게 선택되었는지 확인합니다(이 경우 us-east-1). 2. Ro...
질문React ErrorBoundary 관련 fallback UI 렌더링 이슈 질문
React-query를 이용해 비동기함수를 호출 시 발생한 에러를 errorboundary에 throw하고 fallbackUI를 렌더링하는 기능을 구현하려합니다. <ErrorBoundary FallbackComponent={ErrorFallback} onReset={reset}> <ComponentA /> </ErrorBoundary> ErrorBoundary 에러핸들링의 경우 위 코드처럼 react-query에서 발생한 에러를 가장 가까운 ErrorBoundary로 던지는 구조기 떄문에 react-query를 직접 참조하는 컴포넌트(<ComponentA />)를 ErrorBoundary로 감싸줘야 한다고 들었습니다. 만약 A컴포넌트에서 react-query로 받아온 data를 B컴포넌트에 props로 전달하고 B컴포넌트에서 data값을 렌더링시키는 구조일 때 비동기함수 호출 시 에러가 발생했을 때 fallback ui가 띄워지는 곳은 B컴포넌트 영역이 되도록 하는 방법은 없을까요?? 비동기처리하는 버튼과 FallbackUI가 별도로 분리되어있는 기능을 구현하고싶은데 잘 안돼서 질문드립니다ㅠㅠㅠ
123
2
0
닥터핸·2024-05-09
React-query를 사용할 때 발생한 에러를 다루고, 이 에러를 특정 컴포넌트의 ErrorBoundary로 처리하여 해당 위치에서 fallbackUI를 렌더링하도록 구성하기 위해 아래 몇 가지 접근 방법을 사용할 수 있습니다. 방법 1: B컴포넌트를 ErrorBoundary로 감싸기 A컴포넌트에서 데이터를 가져와 B컴포넌트에 전달하는 구조에서, B컴포넌...
질문타입스크립트 'value' is possibly 'null' 에러 옵셔널체이닝으로 해결안되는 이슈
import DateRangePicker from "@wojtekmaj/react-daterange-picker"; import { useDispatch } from "react-redux"; import { dateFetch } from "components/feature/FetchSlice"; import styled from "styled-components"; type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; export default function CustomCalendar() { const dispatch = useDispatch(); const [value, onChange] = useState<Value>([new Date(), new Date()]); return ( <CalendarBox> <Calendar>조회 기간</Calendar> <StlyedDateRangePicker onChange={onChange} value={value} onCalendarClose={() => { dispatch( dateFetch({ startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), }) ); console.log(value); }} /> </CalendarBox> ); } StlyedDateRangePicker는 styled component로 만든 DateRangePicker 라이브러리 컴포넌트입니다. DateRangePicker 에서 날짜 2개를 선택하면 value라는 배열에 Date 객체 2개가 들어갑니다. 그리고 onCalendarClose 함수가 동작하면서 redux로 만들어놓은 startDate, endDate 객체에 각각 date를 toISOString() 처리한 값이 할당되는 로직입니다. 날짜를 선택하기 전에는 value={value}의 value 배열요소인 Date객체 값이 null 값이니까 type ValuePiece = Date | null; 타입지정을 해줬습니다. startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), 근데 위 코드의 value[0], value[1] 에러가 나더라구요. 'value' is possibly 'null'.ts(18047) Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date | [ValuePiece, ValuePiece]'. Property '0' does not exist on type 'Date | [ValuePiece, ValuePiece]'. null 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ
285
1
0
닥터핸·2024-12-17
이 문제는 value의 타입이 명확하지 않아서 발생합니다. useState의 초기값을 [new Date(), new Date()]로 설정했지만 타입스크립트는 value를 배열 또는 다른 타입으로 혼동하고 있어요. 이를 해결하려면 useState에 제네릭을 명확히 지정하면 됩니다. 예를 들어 const [value, onChange] = useState...
질문next.js 특정 페이지에 컴포넌트 미출력 기능 구현 이슈(use client 사용)
로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 'use client' 줬습니다. 근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ nextjs는 ssr이니까 window에 접근하기 위해선 'use client'를 주면 된다고 들었는데 왜 안되는걸까요?? 찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요. 문제점 알려주시면 감사하겠습니다ㅠㅠㅠ <footer.tsx 파일> 'use client' import React, { useEffect } from 'react' import style from '../styles/footer.module.scss' const Footer = () => { if (window.location.pathname === '/user-page') return null return ( -생략- ) } <루트 layout.tsx 파일> 'use client' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="ko"> <body className={inter.className}> <div className="wrap bg-white"> <Header /> {children} <Footer /> </div> </body> </html> ) }
227
2
0
닥터핸·2023-09-11
Footer에서 useEffect를 어떻게 쓰셨는지 보여주시면 한번 확인해보겠습니다. 아래 코드는 useEffect를 사용한 Footer 코드이니 참고해보시기 바랍니다. 'use client'
import React, { useState, useEffect } from 'react';
import style from '../styles/footer.modu...