묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
S3 관련
Aws s3 프리티어 조건을 보니 5GB 제공에 get 요청 2만건 put요청 2000건까지 무료라고 되어있는데 get요청이라는게 노드버드로 치면 게시글 에 있는 이미지를 조회할때마다 요청이되는건가요? 그럼 새로고침 될때마다 요청이 되는거고 새로고침 2만번하면 프리티어에서 초과되는 이런 개념인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
댓글 삭제 에러 관련질문
댓글 삭제가 잘 진행이 되다가 .. 다음과 같은 에러창이 뜨면 더이상 삭제가 진행되지 않습니다.
-
미해결처음 만난 리액트(React)
컴포넌트 재 렌더링 과정이 궁금합니다.
안녕하세요 소플님!감사하게도 강의 너무 잘 듣고 있습니다!강의에서 알려주신 Accommodate function component 코드 제일 상단에 아래 처럼 로그를 찍도록 선언을 했는데요.function Accommodate(prop) { console.log("Accommodate created!!!") const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("======================"); console.log("useEffect() is called."); console.log(`isFull: ${isFull}`); }); //이후 생략 }최초에 화면을 그린 로그는 아래처럼 나오고 있는데Accommodate created!!! ====================== useEffect() is called. isFull: false Current count value: 0 입장 버튼을 누르고난 뒤에는 Accommodate created!!!로그가 마지막에 한번씩 더 찍히더라구요.count가 변경이 됐기 때문에 Accommdate를 재렌더링 했고 그 과정에서 1번 useEffect에 선언한 함수가 호출되고count가 변경됐기 때문에 2번 useEffect에 선언한 함수가 호출되는건 알겠는데, 최상단에 작성한 로그가 다시 찍히는 이유가 어떤거 인가요??Accommodate created!!! ====================== useEffect() is called. isFull: false Current count value: 1 Accommodate created!!!재렌더링이 또 된거라고 봐야하는걸까요..?!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
오타로 인한 오류 제보 입니다.
9분:15초쯤 commented on다음에 작성코드[변경전]<span>commented on</span> <Link href={`/u/${comment.post?.url}`} className="cursor-pointer font-semibold hover:underline" > {comment.post?.title} </Link>[변경후]<span>commented on</span> <Link href={`${comment.post?.url}`} className="cursor-pointer font-semibold hover:underline" > {comment.post?.title} </Link>
-
미해결처음 만난 리액트(React)
실행이 잘 되지않습니다.
안녕하세요 import문에서 일부 입력하면 뒤에 경로가 자동으로 생성되는 부분에서 자꾸 소문자로 변하길래 수정해 주니 빨간 줄이 뜹니다. 또한 경로의 대소문자에 상관없이 실행이 어렵습니다. 확인 부탁 드립니다. 코드와 오류 나는 부분 첨부 합니다. Book.jsximport React from "react"; function Book(props){ return( <div> <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1> <h2>{`이 책은 총 ${props.numOfPage}로 이루어져 있습니다.`}</h2> </div> ); } export default Book;Library.jsximport React from "react"; import Book from "./Book"; function Library(props){ return( <div> <Book name="책 1" numOfPage ={100}/> <Book name="책 2" numOfPage ={200}/> <Book name="책 3" numOfPage ={300}/> </div> ); } export default Library;index.jsimport React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './ch03/Library'; ReactDOM.render( <React.StrictMode> <Library /> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
-
미해결웹 게임을 만들며 배우는 React
Failed to load resource
github에 있는 like-button-jsx.html 그대로 실행했는데도 이러한 오류가 뜹니다. 뿐만 아니라 모든 html 파일을 열면Failed to load resource: net::ERR_FILE_NOT_FOUND이게 뜨는데 어떻게 해야할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
대댓글 기능 구현
대댓글 기능을 구현하라고 했는데, graphql을 보면대댓글 기능을 구현할 수 있는 query가 보이지 않아요.fetchBoardcomments는 있는데, 이건 그냥 댓글 리스트를 가져오는 query고 대댓글 리스트를 가져오는 query는 안보여요.혹시나 해서 포트폴리오 리뷰를 참고했지만 SECTION9-1에서 대댓글 기능 구현에 대한 언급은 따로 없는거같아서요. 제가 못찾는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 난이도와 강의가 취업에 충분한지 궁금합니다
안녕하세요 취업을 위해 강의를 구매하고 듣고 있습니다혹시 이강의 만으로 취업이 가능할까요?보통 국비학원이나 오프라인 코드캠프 과정에 비해 내용이 좀 적은 편인가요?난이도가 입문이라고 되어 있어서 더 따로 공부해야 취업을 위한 실력이 가능한 건지 궁금합니다혹시 부족하다면 어떤 부분을 따로 공부하는게 좋나요?그리고 또 알고리즘같은 것도 여기서 다루나요? 따로 공부해야 하나요?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
isEmpty 체크
안녕하세요 선생님,커뮤니티를 생성하는 핸들러 생성하기(1) 강의 9:29분에 보면 sub Name, Title이 있는지 isEmpty로 체크를 해주고 있습니다.이런 체크은 백엔드에서만 해주는건가요 아니면 프론트, 백엔드 둘 다 해줘야 하는건가요? 강의에서 말씀하신 것처럼, 만약 프론트에서 체크를 해줘서 프론트에 error를 전달하기 위한 목적이 아니라면, 백엔드에서 isEmpty 메서드로 체크 해줄 필요가 없는건가요?
-
미해결[React 1부] 만들고 비교하며 학습하는 React
버전이 어떻게 되는지가 궁금합니다.
이제 배우게 될 리액트는 버전이 어떻게 되는지가 궁금합니다. 최신 버전인 18버전의 강의가 될까요?? 함수형 기반과Class 기반이 있는것 같은데어떤지 궁금해서 질문을 남깁니다...
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
qql
qql에서 백틱 다음에 저는 문자열로 모든게 표현되는데, 강의 화면에서는 다르게 나오던데 어떤 익스텐션을 추가해야 되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
cloudFront에 원본 프로토콜
원본 도메인을 적는 칸에 강의와는 다른 프로토콜 칸이 생겼습니다.해당 부분은 어떻게 진행하는 것인가요?++ 우선 뷰어 일치로 진행하였는데, 받은 주소가 자꾸 에러가 나네요.자물쇠는 걸렸지만 아래처럼 나옵니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
쿠키 공유 질문이요
제가 어디서부터 흐름이 끊겼는지 모르겠는데 우선 로컬에서 브라우저랑 백엔드서버가 쿠키공유를 할 때 origin이 서로 달라서 브라우저에서는 axios.defaults.withCredentials = true를 해주고 백엔드서버에서는 credentials: true 하고 origin: http://localhost:3060을해서 쿠키를 서로 공유했는데 배포 할 때도 백엔드서버에서 브라우저 ip주소를 origin에 적어주면 공유 되는 거 아닌가요? 왜 배포할 떄는 브라우저와 백엔드서버 origin이 서로 같아야 쿠키가 공유 되는 건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
회원가입 에러
로컬에서는 문제 없는데 배포 후 에러가 뜹니다... 무슨 에러인지 해결을 못하겠어요..ㅠㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Error: Data too long for column 'src' at row 1
게시글 작성에서 이미지를 업로드할때 이런 에러가 나옵니다 s3를 적용한 다음부터인데 검색을 해보니 db에 지정해둔 길이 보다 s3로 부터 가져온 이미지 문자열이 길어서 그런거 같은데 어떻게 하면 좋을까요? 이미지 부분 datatype string을 기존 200에서 300으로 늘려도 에러가 나오네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
.git 파일
초기 세팅부분에서 ls -al 했을때 .git 파일이 나오면 어떻게 삭제를 해야하죠? 그리고 이전 수업에서는 .git 파일을 따로 삭제하진 않았던것같은데 혹시 했었다면 어떤 강의에서 했는지 알 수 있을까요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React에서 사용자 입력 처리하기 강의중 22:02쯤 spread연산자 관련 질문 입니다.
setState()에서setState({author:e.target.value,...state,});요 부분에서 spread연산자를 사용하면setState({author:e.target.value,author: "", content: "",});이런식으로 펼쳐지는 건가요?setState는 새로운 객체를 만들어주는건데 저리 펼치면 author가 중복되는 부분 아닌가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[CSS-in-js] Emotion styled components 관련 질문입니다.
const Wrapper = styled.div` @media (max-width: 767px) { width: 760px; & > div { width: 700px; } }; width: 1200px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 0 auto; & > div { width: 1000px; } `1) 위의 내용과 같이 CSS-in-js 코드 작성하고 화면 너비를 767px 이하로 조정하였음에도 Wrapper 자손 div 선택자들의 너비가 width: 700px로 조정되지 않습니다. 아래 그림과 같이 @mobile 밖의 코드인 1000px로 계속 강제적용이 되는것으로 보입니다. 왜 이런 것인지 알 수 있을까요?2) 논외로 위의 코드와 같이 & > div 를 이용하여 자손 div 태그들에 너비를 정해준 후, 따로 const 이용하여 자손 div 중 하나를 상수 지정하여 너비를 설정해주면, Wrapper에서 &>div를 이용해서 지정한 너비로 또 계속 강제적용되는 것으로 보입니다. & > div가 가장 우선적인 설정인가요? 답변 부탁드리겠습니다ㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인 구매
혹시 도메인 구매할때 .com만 구입하는게 좋을까요? .site같은 도메인을 쓰게 되면 문제되는게 있을까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
더미데이터와 포스터폼 만들기 강좌 질문
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2.Unhandled Runtime ErrorError: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of PostForm.Sourcecomponents/LoginForm.js (15:4) @ eval 13 | 14 | const onSubmitForm = useCallback(() => { > 15 | dispatch( | ^ 16 | loginAction({ 17 | id, 18 | password,터미널 에러 메세지/!\ You are using legacy implementation. Please update your code: use createWrapper() and wrapper.useWrappedStore().4. withRedux(Sansbook) created new store with { giapState: undefined, gspState: null, gsspState: null, gippState: null}{}4. withRedux(Sansbook) created new store with { giapState: undefined, gspState: null, gsspState: null, gippState: null}{}3. import React, { useCallback } from "react"; import { Button, Form, Input } from "antd"; import Link from "next/link"; import { useDispatch } from "react-redux"; import useInput from "./hooks/useInput"; import { loginAction } from "../reducers/user"; const LoginForm = () => { const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const dispatch = useDispatch(); const onSubmitForm = useCallback(() => { dispatch( loginAction({ id, password, }) ); }, [id, password]); return ( <Form onFinish={onSubmitForm} style={{ padding: "10px" }}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" value={password} onChange={onChangePassword} type="password" required /> </div> <div style={{ marginTop: "10px" }}> <Button type="primary" htmlType="submit" loading={false}> 로그인 </Button> <Link href="/signup"> <a> <Button>회원가입</Button> </a> </Link> </div> </Form> ); }; export default LoginForm; import { Form, Input, Button } from "antd"; import { useCallback, useState, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; const PostForm = () => { const { imagePaths } = useSelector((state) => state.post); const [text, setText] = useState(""); const dispatch = useDispatch(); const imageInput = useRef(); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onSubmit = useCallback(() => { dispatch(addPost); }, []); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: "10px 0 20px" }} encType="multipart/form-data" onFinish={onSubmit} > <Input.Textarea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 일이 생겼나요" /> <div> <input type="file" multiple hidden ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: "right" }} htmlType="submit"> 짹쨱 </Button> </div> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: "inline-block" }}> <img src={v} style={{ width: "200px" }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm; 포스트폼까지 만들고 로그인버튼 누르면 저 에러가 뜨면서 안되네요 ㅠㅠ 에러메시지를 보면 LoginForm에 dispatch가 문제가 있다하고 PostForm 렌더링 방법을 한번 체크해보라는데 잘모르겠습니다