묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
toastify-css 적용안됨
ReactDOM.createRoot(document.getElementById('root')).render( <BrowserRouter> <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App /> </PersistGate> </Provider> </BrowserRouter>, )App /에서 실행할 거여서 설정하고, const userSlice = createSlice({ name: "user", initialState, reducers: {}, extraReducers: (builder) => { builder .addCase(registerUser.pending, (state) => { state.isLoading = true }) .addCase(registerUser.fulfilled, (state) => { state.isLoading = false toast.info('회원가입을 성공했습니다.') }) .addCase(registerUser.rejected, (state, action) => { state.isLoading = false state.error = action.payload toast.error(action.payload) }) } })toast.info, toast.error 등 toast 메세지 정확하게 넣었고, import { ToastContainer } from "react-toastify" import "react-toastify/dist/ReactToastify.css" function Layout() { return ( <div className='flex flex-col justify-between h-screen'> <ToastContainer position='bottom-right' theme='light' pauseOnHover autoClose={1500} /> <Navbar/> <main className='w-10/12 max-w-4xl mx-auto mb-auto'> <Outlet/> </main> <Footer/> </div> ) }toastify랑 css를 사용하려고 import했고, const RegisterPage = () => { const { register, handleSubmit, formState: { errors }, reset } = useForm({ mode: 'onChange' }) const dispatch = useDispatch() // const navigate = useNavigate() const onSubmit = ({ email, name, password }) => { const body = { email, name, password, image: `https://via.placeholder.com/600x400?text=no+user+image` } dispatch(registerUser(body)) reset() // navigate('/login') }실행 하니까, db에 데이터는 잘 담기는데, css가 적용이 안됩니다. 그리고, css가 적용되지 않고, 자꾸 login 페이지로 넘어가기만 합니다. 오류를 도저히 못찾겠어요 도와주세요!
-
미해결React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
프롬프트 내용은 어디서 볼수있나요?
안녕하세요 강사님 강의 정말 잘 듣고있습니다.다름이 아니라 프롬프트의 내용이 꽤 긴데 혹시 복붙할 수 있는 페이지는 따로 없는지 궁금합니다..! 제가 못찾은것일수도 있어서 조심스럽게 문의드립니다
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
callBack 함수에서 중괄호 유무의 차이
검색 기능을 구현할 때 callBack 함수를 사용하셨는데return todos.filter((todo) => todo.content.includes(search)); -> 검색기능 구현return todos.filter((todo) => {todo.content.includes(search)}); -> 검색기능 구현 x위와 같이 중괄호의 유무에 따라 결과가 달라지더라고요중괄호를 사용 안했을 땐 의도대로 필터링 된 값들이 반환되고, 사용 했을 땐 동일한 값을 입력해도 빈 리스트만 반환이 됩니다.중괄호의 유무에 따라 어떤 차이가 있는지 궁금합니다!
-
미해결쿠버네티스 101 - 클라우드/서버 개발 첫걸음
섹션2 Yaml로 Deployment 실습 시 Pod 이미지가 없다는 오류
안녕하세요.강의에 나온 것처럼 똑같이 Yaml을 만들어 Deployment를 생성하는데 아래처럼 오류가 나는데 잘 모르겠습니다.실제 Deployment와 Pod도 replicas=3으로 모두 생성되기는 하는데 대시보드에서 보면 오류가 있다고 나옵니다.도커 이미지를 조회하면 분명히 있거든요. (docker image inspect hello-kube:v1) 오류 내용Container image "hello-kube:v1" is not present with pull policy of Never
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
14강 로그아웃 기능 구현시 postman에서 Cannot POST 오류가 뜹니다.
이거 왜 이런지 알 수 있을까요?? 경로 문제라는것 같은데 잘모르겠습니다...ㅜ
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
upload2를 안쓰고 그냥 해도 되지않나요?
강의중 제로초님이 routes폴더의 post.js를 작성하실때const upload2 = multer();router.post('/', isLoggedIn,upload2.none(), uploadPost);이렇게 작성하셨는데,그냥 router.post('/', isLoggedIn, uploadPost);로 작성해도 되지않나요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
useMoveToPage 안에 onClickMoveToPage 함수를 따로 만드는 이유
ex1) useMyMoveToPage1.tsximport { useRouter } from "next/router"; export const useMyMoveToPage1 = (path: string) => () => { const router = useRouter(); // error void router.push(path); };ex2) useMyMoveToPage2.tsx, 강의내용import { useRouter } from "next/router"; interface IUseMyMoveToPage2Return { onClickMoveToPage: (path: string) => () => void } export const useMyMoveToPage2 = (): IUseMyMoveToPage2Return => { const router = useRouter(); const onClickMoveToPage = (path: string) => () => { void router.push(path); }; return { onClickMoveToPage }; };ex3) /test/index.tsximport { useMyMoveToPage1 } from "../../src/components/commons/hooks/useMyMoveToPage1"; import { useMyMoveToPage2 } from "../../src/components/commons/hooks/useMyMoveToPage2"; export default function TestPage() { const { onClickMoveToPage } = useMyMoveToPage2(); return ( <> <button onClick={useMyMoveToPage1("/test/01")}> useMyMoveToPage: Move To Test01 Page </button> <button onClick={onClickMoveToPage("/test/01")}> useMyMoveToPage2: Move To Test01 Page </button> </> ); }[useMyMoveToPage1 error 내용]useMoveToPage 만들기를 실습하다가 더 짧게 리팩토링할 수 있을 것 같다는 생각에 맨위에 ex1 처럼 해봤는데 const router = useRouter() 부분에 문제가 있다고 하더라구요. 에러 내용을 번역해서 봐도 "잘못된 hook 호출이고 함수 컴포넌트 내부에서만 호출될 수 있다"라고 하는데 무슨 말인지도 사실 잘 모르겠습니다.. 강의내용처럼 useRouter를 밖에 두고 onClickMoveToPage라는 hof 함수를 따로 만들어 return 해줘야 문제가 없다는 것은 알겠지만 음... 이해가 되지 않아서 더 자세한 원리와 error가 나는 이유에 대해서 알려주시면 감사드리겠습니다. 잘 알려주시는 것에 비해 제 부족한 학습능력이 살짝 부끄럽네요 ㅠㅠ
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
await를 사용하면 결국 동기와 다른 이유가 뭔가요?
강의 2.14 비동기작업처리하기, 5:59비동기는 프로세스의 병렬 처리를 위해 사용하는 것인데 비동기 함수를 await 키워드를 통해서 값이 반환되기를 기다렸다가 사용하면 동기 와 다른 점이 뭔지 궁금합니다. 어떤 경우에 await가 비동기 함수를 사용하면서 중요한 역할을 담당하는지도 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
구조분해 할당 키값이 아닌 값 할당할때
안녕하세요 본 강의를 듣던 도중 의문이 들어 질문 올립니다.let [one, two, three, four = 4] = arr; let { name, age: myAge, hobby, extra = "hello" } = person;위 상황처럼 four이나 extra 변수는 원래 존재하지 않던 변수지만 해당 let 선언을 할때 초기화처럼 값을 넣어주면console.log(name, myAge, hobby, extra); console.log(extra);이렇게는 조회가 가능하지만console.log(person);이렇게 조회를 했을때에는 기존 name, age, hobby만 person의 프로퍼티로 조회가 됩니다.어떻게보면 당연한거긴한데 보다보니 이러면 extra가 person의 프로퍼티라고 봐야하는가?이는 어떻게 사용되는가에 대해 여쭤보고 싶습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
로컬 front에서 직접 build하여 메모리 해결 하는 방법.
안녕하세요.. 우분투에서 git pull 하고 build가 메모리문제로 되지 않아서,직접 로컬 fornt에서 build 한 뒤, build 폴더를 scp로 우분투 front 폴더로 보내줬는데요.. 필요한 몇가지도 같이 보내주어서 아래와 같이 있습니다.1. 여기서 바로 sudo npx pm2 start npm -- start를 하는게 맞나요?CORS 문제도 back과 front 둘다 해결했습니다.back과 front 둘다 pm2로 실행하였고, 성공한거 같은데..페이지가 열리지가 않습니다 ㅠㅠmonit으로 확인해보니..2. build폴더 안에서 index.html을 찾지 않고,, fornt/pubilc에서 index.html을 찾는데요.. 왜 그럴까요?3. pubilc 폴더도 같이 우분투 서버에 보내줘야하나요?react와 ts로 작업하였고.. scp도 처음 해보는거라 너무 버벅거립니다 ㅠㅠ아래는 제 깃허브 주소 첨부하였습니다..https://github.com/nuring9/sns-nora-react
-
미해결사물인터넷 통신은 내 손에 (Arduino, MQTT, Nodejs, MongoDB, Android,VS Code)
mqtt 서버 설정 방법
mqtt 서버가 pub sub 반응이 없길래 한참을 헤매이다 실행방법 올려둡니다. esp8266 과 데스크탑(mqtt)에서 실행 잘됩니다. mosquitto 폴더내의 mosquitto.conf 파일을 관리자모드로 메모장을 실행하여 아래의 2줄을 추가함.listener 1883 0.0.0.0allow_anonymous true윈도우 방화벽 > 고급설정 > 인바운드 규칙 > 새규칙 > 1883 포트를 추가 (자세한 내용은 구글 탐색)윈도우 서비스 > mosquitto 서버 다시 시작mosquitto_sub -d -t outTopic 실행
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
state 구조 잘짜는 법
조금 포괄적인 질문인데 어텋게 하면 state 구조를 잘 짤수 있을까요? 라이브러리 문법이나 그런 건 쓰다보면 익숙해지는 부분이 있어서 크게 어렵게 느껴지지는 않는데이 강의에서 reducer을 user reducer랑 post reducer로 나누는 부분처럼 state 구조 짜는 것은 스스로 생각하기 쉽지 않은 것 같아요. 예전에 자바 살짝 공부 했을 때 배웠던 객체지향적인 부분도 있는 것 같고 좀 혼란스럽네요
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
Error: Unknown column Hashtag.name in where clause
프론트에는 해쉬태그가 표현되나 백에서는 Hashtags 테이블에 기록되지 않습니다에러 메시지 확인해 본 결과Hashtag.name 칼럼이 없다고 오류가 발생되는데https://www.inflearn.com/questions/18298/sequelizedatabaseerror-unknown-column-x27-name-x27-in-x27-field-list-x27?commentId=44343#44343여기 질문과 유사하여 서버 끊고 워크벤치에서 drop table을 진행하였으나 계속 같은 오류가 발생되고 있습니다 네트워크 오류 메시지백 오류 메시지워크벤츠 해쉬태그 테이블
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
refreshToken useAuth에 적용했을 때 문제점
안녕하세요. 리프레쉬 토큰을 사용하여 useAuth에 적용을 했는데요. 로그인을 하여 리프레쉬 토큰이 발급 되어도 조건에 만족하지 못하고 있습니다.확인해보니 restoreAccessToken을 가져오지 못하여 발생하는 이벤트 였습니다.하지만 새로고침을 하면리프레시 토큰을 찾아서 인증이 됩니다.무슨 이유 때문인지 잘 모르겠습니다.리프레시 토큰 코드도 첨부하도록 하겠습니다.추가적으로 로그인 인증시getAccessToken을 직접 불러오면 문제가 없지만리코일로더블로 이용하면 이런 문제가 생깁니다.!!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
프리캠프 회원가입
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="wrapper"> <div class="main"> <div class="detail"> <div class="detail1">회원가입을 위해<br> 정보를 입력해주세요</div> <div class="detail2"> <input type="text" class="box" placeholder="* 이메일"> </div> <div class="detail3"> <input type="text" class="box" placeholder="* 이름"> </div> <div class="detail4"> <input type="password" class="box" placeholder="* 비밀번호"> </div> <div class="detail5"> <input type="password" class="box" placeholder="* 비밀번호 확인"> </div> <div class="gender"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <div class="checkbox"> <input type="checkbox">이용약관 개인정보 수집 및, 마케팅 활용 선택에 모두 동의합니다. </div> <div class="line"></div> <div class="join"> <button>가입하기</button> </div> </div> </div> </div> </div> </body> </html> * { box-sizing: border-box; margin: 0px; } html,body { width: 100%; height: 100%; } .wrapper { width: 1920px; height: 1080px; display: flex; flex-direction: row; align-items: center; justify-content: center; } .main { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; display: flex; flex-direction: row; align-items: center; justify-content: center; box-shadow: 7px 7px 39px 0px #0068FF40; } .detail { width: 470px; height: 818px; display: flex; flex-direction: column; align-items: center; } .detail1 { width: 466px; height: 94px; font: 700; font-size: 32px; color: #0068FF; } .detail2 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #0068FF; } .detail3 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #797979; } .detail4 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #797979; } .detail5 { width: 466px; height: 80px; color: #797979; border-bottom: 1px solid #797979; margin-bottom: 20px; } .box { border: none; padding-top: 30px; } .gender { width: 140px; height: 23.94px; border: none; display: flex; flex-direction: row; justify-content: space-between; margin: 20px; } .checkbox { width: 454px; height: 21.06px; display: flex; flex-direction: row; justify-content: center;; font-size: 15px; margin: 30px; } .line { width: 470px; height: 1px; color: #E6E6E6; border: 1px solid #E6E6E6; margin: 20px; } .join { width: 470px; height: 75px; border: 1px solid #0068FF; border-radius: 10px; display: flex; justify-content: center; margin: 20px; } button { border: none; background-color: white; color: #0068FF; }생긴건 비슷하게 만들었는데 가입하기가 안 눌리는 것 같아요ㅠㅠ 이메일,이름 등 인풋도 밑줄에 맞게 써지지도 않습니다 ㅠㅠ
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
Ec2로 안하시는 이유가 있을까요?
Ec2로 안하시는 이유가 있을까요?
-
해결됨클론코딩에서 알려주지 않는 것들 (보안, DDD, 마이크로서비스) 2편
바로 실무에 적용할 수 있는 내용일까요?
안녕하세요 선생님. 급한 마음에 강의를 구매하며 이렇게 문의글도 남기네요. 저는 이제 막 입사 반년 정도 된 주니어 백엔드 개발자 입니다. 회사에 별다른 사수는 없고 php만 쓰던 분들 몇분 계시는데 저 혼자 nestjs를 사용하고있고 레거시코드를 전부 nestjs로 바꾸라고해서 이 강의까지 오게되었습니다. 회사에서는 DDD가 뭔지는 잘 모르지만 요즘 좋다고하니 그걸로 해서 레거시코드를 다 변환하라고하는데 저는 DDD를 잘 알지못하는 상태이고물어볼 선임도 없고 마땅한 강의도 이것밖에 보이질 않아서요,,이 강의를 보면서 nest에 적용시키는것에는 크게 어려움이 없겠지요? ( 아직 보기 전인데 익스프레스 기반 인것같아서요 ,, 개념만 이해하면 구조 잡는것에는 문제가 없겠죠? ) 소개 페이지에 나와있는 메일로 문의를 드려도 문의에 대한 답변을 받을 수 있는지도 궁금합니다. 🙂
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
ERROR [ExceptionsHandler] this.validate is not a function 무슨 에러일까요 ㅠ
안녕하세요 postman에서 login 요청을 보내려고 할때 터미널에서 ERROR [ExceptionsHandler] this.validate is not a function 라고 오류가 납니다 validate를 함수로 작성해주었는데 이러한 오류가 나서 어떻게 해결해야 할지 고민입니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
DB에서 Comment 테이블이 안불러와지는 것 같습니다.
// posts.jsrouter.get("/", async (req, res, next) => { // GET /posts console.log(Comment); try { const posts = await Post.findAll({ limit: 10, order: [["createdAt", "DESC"]], include: [ { model: User, attributes: ["id", "nickname"], }, { model: Image, }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname"], }, ], }, ], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router;LOAD_POST_REQUEST 액션이 dispatch돼서api 요청을 통해 data를 받아오면 data안에 Comments의 값이 Comments 테이블에 들어있는 값이 들어있을 것으로 예상이 되는데 빈배열인 상황입니다. 혹시 다른 살펴볼만한 곳이 있는지 알려주시면 감사하겠습니다. 감사합니다.
-
미해결습관부터 바꿔주는 Node.js & Express 기초
윈도우는 터미널을 뭘 써야하나요?
05:28 부터 윈도우와 맥이 동일하다고 하셨는데 윈도우는 무슨 터미널을 이용해서 진행하나요 ㅠㅠㅠ cmd도 안되고 powershell도 안되고 vim을 깔아봐도 안되는데요..............