안녕하세요. 제로초님. 우선 학습관련 내용이 아닌 내용에 대해 질문드리게 되어 죄송합니다. 혹여 문제가 될 시 질문 글을 삭제하도록 하겠습니다. 몇 일 동안 해결하려 했으나 해결이 잘 되지 않아 이 곳을 통해 질문드리게 되었습니다. fe작업물을 테스트 서버에 반영하였으나, 로그인을 시도할 때 아래와 같은 에러가 발생중입니다. xhr.js:247 Mixed Content: The page at 'https://도메인주소/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://백엔드api주소'. This request has been blocked; the content must be served over HTTPS. 구글링을 해본 결과 메타 태그를 index.html에 삽입하라고 하여 삽입을 해보았으나, pending로 통신 자체가 불가능한 상황입니다. http-proxy-middleware 라이브러리를 사용하여 setproxy.js파일도 세팅을 해보았으나 여전히 위와 같은 문제가 발생중입니다. .env 파일을 생성하여 백엔드 api를 프록시로 설정을 하였고, 프론트엔드 host도 지정을 하였는데 위와 같은 문제가 발생 중입니다. 도무지 해결이 되지 않아 여기 질문드린 점 다시 한번 사과드리겠습니다. 혹여 문제가 되면 질문 글은 바로 삭제하도록 하겠습니다.
안녕하세요. 이 강의에 질문을 달았는데 해결이 안되서 다시 질문드립니다.ㅠ 우선 로드밸런서에서는 아래의 동적페이지가 잘 작동되는것으로 확인됩니다. cloudFrond에서 연결도 잘 해줬구요. 그런데...제 도메인에서 부터 시작되는 부분은 자꾸 오류가 납니다. 아래처럼요ㅠ 아래 _buildManifest.js 네트워크창을 확인해보면 보드아이디도 잘 먹혀있는걸 확인할 수 있습니다. 그런데 오류가 난 빨간부분에서는 뭔가 이상합니다. x-cache 부분을 보면 클라우드 프론트에 에러가 났다고 하는데 이유를 당최 모르겠습니다.
이미지 업로드 후 thumb 폴더가 생성 안됩니다! 검색해보니 AWS Lambda 함수에서 S3 서비스를 호출할 때, 해당 Lambda 함수의 실행 역할이 S3 버킷에 대한 필요한 권한을 가지고 있지 않아서 발생한 것이라고 합니다... 역할도 S3객체 읽기 전용 권한 선택했습니다. 근데 여기서 PutObject가 없는게 걸립니다..
FE 서버 기동시(yarn start) 사전에 정의한 설정 정보를 읽어서 사용하는 방법이 있을까요? 예를 들어, 아래 apollo의 uploadLink 생성 코드의 경우, 만약 graphql 서버 주소가 바뀌었다면 uri 부분을 변경해서 다시 빌드를 해야 되는데요. 빌드없이 yarn start 시에 FE 서버 로컬 설정파일에서 uri를 읽어와서 적용하는 방식으로 하고 싶은데 어떤식으로 하면 좋을지요? .env 파일은 빌드 이후에 변경은 반영되지 않는것 같고.. SSR 같은 방법으로 해야 할까요? 아니면, 기동시에 accessToken 처럼 backend에 uri 정보를 조회해서 적용해야 할까요? const uploadLink = createUploadLink({ uri: "https://backendonline.codebootcamp.co.kr/graphql", headers: { Authorization: `Bearer ${accessToken}` }, credentials: "include", });
안녕하세요 선생님. 프로젝트 배포하고 나서 테스트 중에 특정 이미지를 업로드 하면 '413 Request Entity Too Large'라고 뜨는 오류를 발견했습니다. 특정 이미지 크기는 4.13mb정도구요. 일단 에러가 떠도 그대로 post요청을 보내면 업로드된 이미지가 보이긴 하는데 왜 이런 에러가 뜨는지 모르겠습니다.. 테스트 해보니까 세로 길이가 비교적 긴 이미지를 업로드 요청할 때 에러가 나는걸 확인했습니다. 위 이미지가 프론트에서 나는 에러 상태 입니다. 오류 해결을 위해 먼저 back의 const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: 'fashionary-s3', key(req, file, cb) { cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`) } }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB }); 여기서 limits부분이 20m인걸 확인하고, sudo vim /etc/nginx/nginx.conf 해서 http { ## # Basic Settings ## client_max_body_size 20M; sendfile on; tcp_nopush on; types_hash_max_size 2048; # server_tokens off; # server_names_hash_bucket_size 64; # server_name_in_redirect off; include /etc/nginx/mime.types; default_type application/octet-stream; 위와 같이 http부분 설정을 20m으로도, 0으로도 설정 후 sudo service nginx reload 했는데도 특정 이미지 전송을 시도하면 같은 에러가 떠요..이럴 땐 어디를 봐야 하나요?
음 어디를 봐야할지 잘몰라서 글을 남깁니다 ㅠㅠ 팔로우를 누르고 프로필을 넘어가면서 다른 사람을 팔로우 했다가 자신을 팔로우 한것으로 바뀌네요 ㅠㅠ 그래서 팔로우하고 프로필 페이지로 넘어가면 팔로잉 목록하고 팔로워 목록에 자신 닉넴임이 둘다 뜹니다 ㅠㅠ 일단 팔로우는 다른 사람 팔로우 했다고 정상적으로 뜹니다
안녕하세요 강의 관련된 내용은 아닌데 혹시 질문 드려도 괜찮을까요? 이번에 슬랙에서 만두피님이 하신걸 보고 저에게 맞게 따라하고 있는데 잘 되지 않아 질문 드립니다. 위와 같은 문제가 있는데 그 전에 비슷하게 사용했을땐 잘 되던 일이라 이것저것 해보다가 typescript 버전을 v4로 내리면 data가 IForm[] 으로 추론 된다는걸 알았습니다. typescript v5을 사용하려면 어떤 식으로 풀어가야 할까요?? rk는 v4 사용하고 있습니다. 공홈에서는 저 fetchFormAPI에서 리턴 값 타입으로 Promise<IForm[]>으로 주면 된다는데 처음 보는 방법이라 맞는건지 아니면 그냥 연습을 위한 방법인지 잘 몰라 질문 드립니다. const { data, isLoading } = useQuery<IForm[]>(['forms'], () => fetchFormsAPI('test')); export function fetchFormsAPI(domain: string) { // 1 return api.get(`/forms?formId=${domain}`).then((response) => response.data); // 2 // return axios({ // method: 'get', // url: `/forms?formId=${domain}`, // }).then((response) => response.data); } export const api = axios.create({ baseURL: backUrl, withCredentials: true, }); 위 2번째 코드에서 2번을 사용하면 첫번째 사진 빨간 밑줄은 사라지는데 결국 타입 추론이 안되는건 같았습니다. 그리고 공식 문서 처럼 fetchFormAPI함수에 리턴 타입을 붙이고 useQuery에 타입을 빼면 아래와 같이 useQuery에서는 타입을 정상적으로 추론하지만 막상 데이터를 사용할 때는 이상한 값이 들어오는 것을 확인했습니다. export function fetchFormsAPI(domain: string): Promise<IForm[]> { // 1 return api.get(`/forms?formId=${domain}`).then((response) => response.data); } const { data, error, isLoading } = useQuery(['forms'], () => fetchFormsAPI('test')); typescript 버전을 v4로 내리면 정상 작동하는 것은 확인했습니다. 어제부터 해결을 못하고 있어 질문드립니다. 감사합니다.
혼자 미니 프로젝트하면서 선생님 수업에서 배운 github를 통한 배포를 했는데, 어째서인지 Readme로 연결이 되네요. index.html도 정상적으로 있는데 왜그런지 이해가 잘안갑니다. 구글링을 했을때도 index.html의 위치를 확인하라고 써있는데 해결이 안되네요. 답변 부탁드려요!
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 선생님, 알려주신 것처럼, getServerSideProps 를이용해서 쿠키가 있을때만 페이지를 접근 가능하게 했습니다. 근데 sub를 생성할 수 있는 버튼을 클릭하면 아래 주소로 이동 가능하게( router.push('/sub/create') ) 했는데 접근이 가능하네요? 이럴땐, 해당 버튼을 클릭하면 다시 login 페이지로 가도록 라우팅 처리를 또 해줘야 하는건가요?
안녕하세요 제로초님 인피니트 스크롤링 적용하는 부분에서 스크롤이 끝에 올 때마다 mainPosts가 10개씩 추가 되지 않고 한번에 50개( draft.hasMorePost = draft.mainPosts.length < 50; )가 추가 되는데 원래라면 스크롤을 끝까지 내릴 때마다 10개씩만 추가 되어야 하는 건가요? 댓글에서 SUCCESS는 한 번만 와야 된다고 하셨는데 저는 처음 한 번만 게시글이 10개 추가(success 한 번)되고 이후에는 게시글이 50개가 될 때까지 한꺼번에 success가 들어옵니다 콘솔에 inView를 찍어보니 처음 10개만 들어왔을 때는 true -> false로 값의 변화가 있는데 한번에 success 되는 부분에서의 inView의 값은 계속 true로 찍힙니다.. 이런 경우에는 어떻게 해결해야 되나요..?? index.js const Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePost, loadPostsLoading } = useSelector((state) => state.post); const [ref, inView] = useInView(); useEffect( () => { dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect( () => { if (inView && hasMorePost && !loadPostsLoading) { const lastId = mainPosts[mainPosts.length - 1]?.id; dispatch({ type: LOAD_POSTS_REQUEST, lastId, }); } }, [inView, hasMorePost, loadPostsLoading, mainPosts], ); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => <PostCard key={post.id} post={post} />)} <div ref={hasMorePost && !loadPostsLoading ? ref : undefined} style={{ height: 10, backgroundColor: 'red' }} /> </AppLayout> );
다른 폴더에서 연습하다가 다시 강의할때 만든 폴더를 로컬 서버에 연결하려고 하니 안되네요 npm start하면next build 하라고 나오고 그대로 하면 또 다른 에러가 떠서 에러 동굴로 들어가는 느낌이에요 다른 폴더는 또 로컬서버 3000으로는 들어가지는데 코드 변경한게 저장해도 반영이 안되고 예전 모습 그대로만 나와요 구글링 해보면 도커를 설치해서 설정 추가하라고 나오는데 이렇게 따라해볼까요?? 구글에서 하라는대로 하다가 모두 엉망진창이 될까봐 두려워요
안녕하세요. Section10 함수형 컴포넌트의 생명주기에서 궁금한 점이 있어 질문 드립니다. component가 unmount 되는 상황을 만들기 위해 router.push로 페이지를 이동하잖아요? 그런데 router.push 로 이동할 때는 return()=>{...} 의 내용이 제대로 실행되는데, 주소창에 직접 이동할 주소를 써서 이동했을 때 에는 같은 동작이 실행되지 않더라구요. 둘다 현재 컴포넌트가 제거되고 새로운 컴포넌트가 화면에 나타나는 것아닌가요? 다르게 동작하는데 이유가 있는지, 아니면 제가 코드를 잘못 쓴건지 피드백 부탁드립니다. 감사합니다! 작성코드 useEffect(() => { console.log('컴포넌트가 마운트됐습니다~'); return () => { alert('컴포넌트가 제거됩니다~'); }; }, []); useEffect(() => { console.log('컴포넌트가 변경됐습니다~'); }); const onClickButton = () => { setCount((prev) => prev + 1); }; const onClickMove = () => { router.push('/'); };
