강의가 아주 좋네요
미해결
리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트
설명 잘하십니다.
- HTML/CSS
- javascript
- react
- youtube-api
댓글 2
좋아요 0
조회수 199
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
동형형 잘 들을게요
해결됨
Azure Native로 나만의 GPT 만들기
사랑해
- javascript
- python
- mongodb
- azure
- FastAPI
방황하는물고기
댓글 1
좋아요 1
조회수 240
next 버전 관련하여 궁금해요!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 강사님! 우선 훌륭한 강의, 진짜 감사드립니다! 완강 후 필요한 부분은 다시 찾아보고 있는데, 처음 봤을 때도, 다시 볼 때도 이해가 쉽게 될 수 있도록 알려주시려는 게 느껴져요. 그래서 도움이 많이 되었습니다! 강사님 덕분에 자신감이 엄청 생겨서, 개발에 더 큰 흥미가 생겼어요! 늘 감사합니다. 제가 이번에 복습 겸 학습에 활용되었던 프로젝트를 다시 만들어보려고 하는데, next버전 관련하여 질문이 있습니다. 강의에는 next 12버전으로 실습했는데, 실무에서 12버전이 많이 쓰이나요? 버전 12에서 더 공부를 해야 할지, (강의를 듣는 동안 못 따라간 부분은 거의 없으나, 익숙하진 않은 것 같아서 학습이 더 필요한 것 같아요! ) 아니면 현재 강사님께 배운 것을 토대로 앞으로 진행하는 프로젝트는 버전을 높여야 할지 고민이 됩니다.
- react
- node.js
- seo
- graphql
- next.js
맙소사
댓글 2
좋아요 1
조회수 264
versel 배포 후 id : null
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 선생님 배포하고 난 후 id가 null 이라고 뜹니다.. 코드 바꾼 거 없는데 local에서는 잘 작동 하는데 왜 배포후만 그럴까욥..
- javascript
- react
- node.js
리액트어려워오요오아오아이아오어아용
댓글 1
좋아요 0
조회수 194
middleware 질문입니다!
미해결
Next + React Query로 SNS 서비스 만들기
자주 질문드리네요 ㅠ middleware에서 login을 유무를 파악하고 로그인으로 리다이렉트하려고합니다 그 이후 로그인이 된다면, 원래 진입하려던 url을 쿼리스트링으로 전달하고 이를 받아 리 다이렉트하는게 목적인데요! 간헐적으로 미들웨어가 실행되지 않는것 같습니다.. 새로고침을 해야지만 리다이렉트가 가능합니다. 클라이언트에서 세션감지하고 useEffect로 router.replace 해도 동일합니다. 제 생각으로는 미들웨어는 admin , contact진입시에는 무조건 실행한다고 알고있었는데 잘못된 거였나요 ㅠ 찾아보니 middleware not Working 이슈가 있는 것같긴한데 원인을 도통모르겠습니다 import { auth } from "@/auth"; import { NextRequest, NextResponse } from "next/server"; export const middleware = async (req: NextRequest) => { const session = await auth(); if (!session) { //권한없으면 login 하라 const url = new URL(`http:localhost:3000/auth/login?redirect=${req.url}`); return NextResponse.redirect(url); } //권한있으면 원래대로 return NextResponse.next(); }; export const config = { matcher: ["/admin/:path*", "/contact/:path*"], }; 혹시! useRouter의 redirect는 client에서 이루어지기 때문에 서버 세션갱신이 되지않아서 상이해지는건가요?! 에서 router.replace(redirectPath); 로 변경 window.location.href = redirectPath;
- react
- next.js
- react-query
- next-auth
- msw
squirrel PARK
댓글 1
좋아요 0
조회수 292
투두리스트 코드
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두리스트 계속 뭐가 빠진지 모르겠네요 완성된 코드 어디서 볼수있나요? 일일히 찾기에 시간이 너무 걸려요
- javascript
- react
- node.js
1028oob
댓글 1
좋아요 0
조회수 279
포트폴리오 주소 오류 (failed to fetch)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 만든 게시판 정보 입력후 등록하기 버튼을 누르면 아래와 같이 오류가 뜹니다. new:1 Access to fetch at ' http://backend-practice.codebootcamp.co.kr/graphql ' from origin ' http://localhost:3004 ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value ' http://localhost:3000 ' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 코드상에는 문제가 없는 거같은데.. 주소 확인 부탁드립니다.. ㅠ import { gql, useMutation } from "@apollo/client"; import { useRouter } from "next/router"; import React, { useState } from "react"; import { Address, ButtonWrapper, Contents, ImageWrapper, InputWrapper, Label, OptionWrapper, Password, RadioButton, RadioLabel, SearchButton, Subject, SubmitButton, Title, UploadButton, Wrapper, Writer, WriterWrapper, Youtube, Zipcode, ZipcodeWrapper, } from "../../../styles/boardsNew"; const CREATE_BOARD = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput: $createBoardInput) { _id } } `; export default function BoardsNewPage() { const router = useRouter(); const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const [writerError, setWriterError] = useState(""); const [passwordError, setPasswordError] = useState(""); const [titleError, setTitleError] = useState(""); const [contentsError, setContentsError] = useState(""); const [createBoard] = useMutation(CREATE_BOARD); const onChangeWriter = (event) => { setWriter(event.target.value); if (event.target.value !== "") { setWriterError(""); } }; const onChangePassword = (event) => { setPassword(event.target.value); if (event.target.value !== "") { setPasswordError(""); } }; const onChangeTitle = (event) => { setTitle(event.target.value); if (event.target.value !== "") { setTitleError(""); } }; const onChangeContents = (event) => { setContents(event.target.value); if (event.target.value !== "") { setContentsError(""); } }; const onClickSubmit = async () => { if (!writer) { setWriterError("작성자를 입력해주세요."); } if (!password) { setPasswordError("비밀번호를 입력해주세요."); } if (!title) { setTitleError("제목을 입력해주세요."); } if (!contents) { setContentsError("내용을 입력해주세요."); } if (writer && password && title && contents) { try { const result = await createBoard({ variables: { createBoardInput: { writer, password, title, contents, }, }, }); console.log(result.data.createBoard._id); router.push(`/boards/${result.data.createBoard._id}`); } catch (error) { alert(error.message); } } }; return ( <Wrapper> <Title>게시글 등록</Title> <WriterWrapper> <InputWrapper> <Label>작성자</Label> <Writer type="text" placeholder="이름을 적어주세요." onChange={onChangeWriter} /> <div style={{ color: "red" }}>{writerError}</div> </InputWrapper> <InputWrapper> <Label>비밀번호</Label> <Password type="password" placeholder="비밀번호를 작성해주세요." onChange={onChangePassword} /> <div style={{ color: "red" }}>{passwordError}</div> </InputWrapper> </WriterWrapper> <InputWrapper> <Label>제목</Label> <Subject type="text" placeholder="제목을 작성해주세요." onChange={onChangeTitle} /> <div style={{ color: "red" }}>{titleError}</div> </InputWrapper> <InputWrapper> <Label>내용</Label> <Contents placeholder="내용을 작성해주세요." onChange={onChangeContents} /> <div style={{ color: "red" }}>{contentsError}</div> </InputWrapper> <InputWrapper> <Label>주소</Label> <ZipcodeWrapper> <Zipcode placeholder="07250" /> <SearchButton>우편번호 검색</SearchButton> </ZipcodeWrapper> <Address /> <Address /> </InputWrapper> <InputWrapper> <Label>유튜브</Label> <Youtube placeholder="링크를 복사해주세요." /> </InputWrapper> <ImageWrapper> <Label>사진첨부</Label> <UploadButton>+</UploadButton> <UploadButton>+</UploadButton> <UploadButton>+</UploadButton> </ImageWrapper> <OptionWrapper> <Label>메인설정</Label> <RadioButton type="radio" id="youtube" name="radio-button" /> <RadioLabel htmlFor="youtube">유튜브</RadioLabel> <RadioButton type="radio" id="image" name="radio-button" /> <RadioLabel htmlFor="image">사진</RadioLabel> </OptionWrapper> <ButtonWrapper> <SubmitButton onClick={onClickSubmit}>등록하기</SubmitButton> </ButtonWrapper> </Wrapper> ); } import { gql, useQuery } from "@apollo/client"; import { useRouter } from "next/router"; import { Avatar, AvatarWrapper, Body, BottomWrapper, Button, CardWrapper, Contents, CreatedAt, Header, Info, Title, Wrapper, Writer, } from "../../../styles/boardsDetail"; export const FETCH_BOARD = gql` query fetchBoard($boardId: ID!) { fetchBoard(boardId: $boardId) { _id writer title contents createdAt } } `; export default function BoardDetailPage() { const router = useRouter(); const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.boardId }, }); return ( <Wrapper> <CardWrapper> <Header> <AvatarWrapper> <Avatar src="/images/avatar.png" /> <Info> <Writer>{data?.fetchBoard?.writer}</Writer> <CreatedAt> {new Date(data?.fetchBoard?.createdAt).toLocaleDateString()} </CreatedAt> </Info> </AvatarWrapper> </Header> <Body> <Title>{data?.fetchBoard?.title}</Title> <Contents>{data?.fetchBoard?.contents}</Contents> </Body> </CardWrapper> <BottomWrapper> <Button>목록으로</Button> <Button>수정하기</Button> <Button>삭제하기</Button> </BottomWrapper> </Wrapper> ); } import "../styles/globals.css"; import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client"; export default function App({ Component, pageProps }) { const client = new ApolloClient({ uri: "http://backend-practice.codebootcamp.co.kr/graphql", cache: new InMemoryCache(), }); return ( <ApolloProvider client={client}> <Component {...pageProps} /> </ApolloProvider> ); }
- react
- node.js
- seo
- graphql
- next.js
민선
댓글 2
좋아요 0
조회수 334
Provider를 layout에서 감쌀 때 질문
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
body의 내부 요소들만 감싸는게 아닌 html을 전체 감싸는 이유를 알고싶어요!
- firebase
- next.js
- tailwind-css
- react-query
- supabase
김지후
댓글 3
좋아요 2
조회수 390
NextAuth 질문입니다!
해결됨
Next + React Query로 SNS 서비스 만들기
NextAuth에서의 session token을 통해 사용자정보랑 세션쿠키를 전달하고있는데요. 만일 access Token이랑 Refresh Token으로 관리를 한다고 한다면, Session Token도 반 강제적으로 사용해야 하는 것같은데 이럴때는 3개의 토큰을 만료일을 컨트롤 해야하는건가요..? 예로 access 30분 session 1시간 refresh 7일 이렇게 가져가서 엑세스와 세션 두가지의 토큰을 다 갱신해주어야 하는건지 아니면 제가 지금 이상한 프로세스를 생각중인지 모르겠네요 .. NextAuth에 리프래시 엑세스토큰을 통상적으로 어떻게쓰는지가 궁금합니다.. session token때문에 너무 혼동이오네요..
- react
- next.js
- react-query
- next-auth
- msw
squirrel PARK
댓글 1
좋아요 0
조회수 423
로그인/소셜로그인 테이블 설계 관련 궁금증 관련 질문입니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강좌를 들은 후, 소셜로그인을 구현하다가 의문점이 생긴 부분이 있어 어떠한 방식으로 접근하는 것이 궁금하여 질문을 남깁니다. 상황 일반 회원가입시에는, 이메일 비밀번호 + 해당 서비스에 필요한 필수 정보들을 받고, 해당 내용을 클라이언트로 부터 받아 user테이블에 저장하는 상황입니다. 소셜 로그인 같은 경우에는, 정보를 받을 수 있는 것이 제한이 되어있어, 추가적으로 필요한 정보들을, 소셜 로그인 성공 이후, 클라이언트 측에서 회원가입시 필요한 정보들을 받을 수 있는 화면으로 이동시켜, 해당 정보를 받아서, 부족한 정보들을 채워넣는 것으로 알고 있습니다. 궁금점. 소셜로그인 로그인 후, 신규 유저이기에 서비스 이용에 필요한 필수 부가정보 입력을 받기위해, 회원가입 창으로 이동시켜, 부가 정보를 입력받는다면 크게 문제가 없습니다.하지만, 앱을 사용하다보면은 데이터가 끊긴다거나, 배터리가 방전된다거나, 알수없는 이유로, 로그인은 되었으나, 필수 부가정보를 입력하지 못하고, 꺼지는 경우가 있습니다. 필수 부가정보를 꼭 받아야 하는 경우라면 이 부분에 대해서 어떻게 처리해야하나요?필수 정보를 채웠는지 여부를 확인하는 column을 boolean으로 User 테이블에 추가하여, 클라이언트에서 해당 Column으로 부가정보를 입력받지 않았으면 메인화면으로 가지않고, 회원가입 스크린으로 리다이렉 시키는 이런 로직을 작성해야하나요?필수 정보를 채웠는지 여부를 확인하는 column 없이 이런 경우에 처리할 수 있는 방안이 있는지 궁금하고, 현업에서는 어떤식으로 테이블을 설계하는지 궁금합니다!
- javascript
- typescript
- rest-api
- nestjs
- backend
김용민
댓글 2
좋아요 0
조회수 339
compose modal 관련 질문입니다. history stack에 강제로 url을 추가 하는 방법이 있나요?
해결됨
Next + React Query로 SNS 서비스 만들기
만약 새창에서 /compose/tweet을 열었을 때 X버튼을 누르면 back()으로 동작되어 창이 닫히지 않거나, 이 전페이지 (트위터 창이 아닌 다른 창)으로 이동하는 이슈가 발생하여 x.com 은 어떻게 동작되는지 확인했는데, 이미지 처럼 새창에서 /compose/tweet을 열었을 때, history에 home url이 추가가 되어 뒤로가기를 눌렀을 때 홈으로 돌아가는 것 같습니다. 이렇게 hitory url을 제어하는 방법이 있을까요? 구글링해도 정보를 얻을 수 없어 글 올립니다 ㅠ
- react
- next.js
- react-query
- next-auth
- msw
인쮸
댓글 1
좋아요 0
조회수 174
테스트 오류
해결됨
실전 프론트엔드 테스트 시작하기
테스트가 안됩니다 못찾는다는거 같은데 오류 떠서 그런가요?? 오류 해결 어떻게 하나요
- javascript
- react
- next.js
- 소프트웨어-테스트
- Cypress
- e2e
br
댓글 2
좋아요 1
조회수 263
eslint 다운로드하면서
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
eslint다운로드하면서 자꾸 정렬이 안돼요 코드 작성하면 하나하나 띄워쓰기랑 스페이스바 눌러야되고 정렬 정리가 안돼요 ㅠㅠ
- javascript
- react
- node.js
1028oob
댓글 1
좋아요 0
조회수 240
yarn serve 를 실행하기 위한 조건이 있을까요?
미해결
Vue 3 시작하기
vue cli 생성 부분에서, npm install -g @vue/cli 하고 vue create vue-cli2 로 생성하였습니다. 깃허브에서 받은 소스에 이미 vue-cli 폴더가 있어서 저는 vue-cli2로 생성하였습니다. 근데 생성되는 진행과정을 보면, 강좌에서는 yarn install ... 이렇게 뜨던데요. 그래서 실행도 yarn serve 로 하구요.. 그런데 저는 npm install ... 이걸로 되던데요. 실행도 npm run serve 로 해야하구요. 제가 강의 중간 어디서 yarn 설정에 관한 부분을 놓친 걸까요?
- javascript
- vue.js
- vue-3
댓글 1
좋아요 0
조회수 472
ant-design/icon 적용 시 에러
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import { UpCircleOutlined } from "@ant-design/icons"; export default function LibraryIconPage() { return ( <> <UpCircleOutlined /> </> ); } ant-design/icons 5.0.1 버전 다운로드 받고 실행하니까 이런 에러가 뜨는데 어떤 문제일까요..?
- react
- node.js
- seo
- graphql
- next.js
임성균
댓글 2
좋아요 0
조회수 237
uncaught runtime error 해결
미해결
처음 만난 리액트(React)
패키지도 새로 설치해보고 챗지피티가 하라는데로 다 해봤는데도 해결이 안되네요 ㅠㅜㅜ 최신 버전맞아요 react랑 react dom 어쩌고랑 create어쩌고에서 문제가 있는 것 같다고 했습니다 ㅠ 어떻게 해결해야하나요
- HTML/CSS
- javascript
- react
ohci0022
댓글 2
좋아요 1
조회수 713
포트폴리오 리뷰 강의 관련이요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 리뷰 강의는 먼저 혼자 포트폴리오를 만들고 보는게 좋나요? 아니면 git clone으로 다운받고 어떻게 만들었는지 보고 그냥 넘어가도 되나요?? 리뷰 강의에서 clone으로 설명하는 이유가 궁금해서 여쭤봅니다!
- react
- node.js
- seo
- graphql
- next.js
민선
댓글 2
좋아요 0
조회수 244
ReactQuery와 Next를 공부하다가 궁금한 점이 생겼습니다.
해결됨
Next + React Query로 SNS 서비스 만들기
React Query가 사실 데이터를 불러오고 캐싱하는 이유가 가장 큰 것으로 알고있습니다. 하지만, Next14부터는 fatch에 store 기능이 생기면서 캐싱이 되는걸로 알고 있는데, 그러면 데이터 캐싱만을 사용하며 굳이 React Query를 사용하지 않아도 되는건가요?
- react
- next.js
- react-query
- next-auth
- msw
이상연
댓글 3
좋아요 0
조회수 637
overridFindOptions
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 코팩님! 개인 프로젝트를 하다가 약간의 오점을 발견해서 질문드립니다. 위 사진과 같이 paginate함수의 overrideOptions 파라미터에 where필터를 새로 작성하는 순간, 기존에 composeOptions에서 작성한 where필터를 아예 무시해버리게 되는 것 같습니다. 그래서 첫 번째 페이지는 정상적으로 응답이 오는데, next에 담긴 링크를 눌러보면 똑같이 첫번째 페이지가 응답으로 오게되는 것 같아요. 위와같은 증상이 뒷부분의 paginateComments에서도 똑같이 발생합니다. 첫번째 페이지는 작동이 잘 되기때문에 영상에서는 넘어가신 듯 한데, 여러 방법을 써봤지만 해결책이 보이지 않아서 질문드립니다ㅠ
- javascript
- typescript
- rest-api
- nestjs
- backend
코린이
댓글 3
좋아요 0
조회수 324
msw/node의 setupServer를 사용하면 안되나요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님, 강의 잘 보던 중 궁금한 점이 생겨 질문 올립니다. 구글링해보면 서버 컴포넌트에 msw를 적용하는 방법으로 msw/node의 setupServer를 많이 사용하는 것 같습니다. msw/node의 setupServer을 사용해도 이슈가 없을지 궁금합니다!
- react
- next.js
- msw
프론터
댓글 2
좋아요 0
조회수 358
인기 태그
인프런 TOP Writers
- 정현섭 6
- hush park 5
- eggmun(문성진) 4
- 박효정 3
- morneau 3
- Like me black 3
- 코코리코코 3
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚨[월 최소 650만원+] AI/Bigdata 데이터 분석·머신러닝 강사 구합니다🚨 NoFe
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv