묻고 답해요
143만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
nestjs+graphql에서 부분적으로 restapi를 사용해도되나요?
소셜로그인 부분을 그래프큐엘 가드를 사용해서 적용하면 원인을 도저히 모르겠는 , res.setHeader function이 없다는 에러가 계속 발생하는데요..챗지피티 무료버전에 물어보니소셜로그인 부분은 restapi로 구현한다고하는데..챗지피티를 믿을수가없어서요.. 소셜로그인 부분은 restapi로 해야된다.그래프큐엘로 바꿀수있는데 너가 코드를 잘 못친듯?1번과 2번중에 어떤건가요?
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
이미지 등록시 자동 등록 오류
이미지 등록시에 아래 사진과 같이 이미지가 리스트에 등록이 되긴하는데 이미지 형태가 깨져서 등록이 됩니다. 새로고침을 해야 정상적으로 반영되는 오류가 있는데 어느 코드가 잘못된지를 모르겠습니다ㅠㅠhttps://github.com/jjeongdong/ImageUpload_front
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
오픈그래프 질문드려요
강사님이 하시는데로 했는데 썸네일 이미지가 안뜨는데, 카카오에 가서 확인을 해봐도 안되어 있어서 혹시 경로가<meta property="og:image" content="/public/thumbnail.png" />/public 경로를 빼도 안되고 넣어도 안되고/....시간이 좀 걸린다 해서 카카오에 가서 캐시초기화해서 확인했는데도 이미지가 뜨지 않습니다.<meta property="og:image" content="/public/thumbnail.png" />
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
선생님 nestjs+graphql에서 구글로그인처리는 못하는건가요?
챗지피티에 물어보면 , NestJS와 GraphQL 환경에서도 Google OAuth 2.0을 이용한 소셜 로그인을 구현할 수 있습니다. 다만, GraphQL은 주로 데이터를 가져오고 조작하는데 사용되므로, OAuth와 같은 인증 과정은 일반적으로 REST API 엔드포인트를 통해 처리하는 것이 일반적입니다. 이렇게 하면 OAuth 2.0의 리디렉션 흐름을 관리하기가 더 쉽습니다.라고 하는데용,그러면 nestjs랑 graphql환경이라고해도 OAuth같은 소셜로그인은 rest-api처럼 컨트롤러를통해서 해주는건가요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[싸이월드만들기1탄] 정렬옵션
이 부분에서 wrapper__left__body가 튀어나온 이유가, wrapper__left가 정렬되지 않아서라고 하셨고, 그래서 자동으로 div가 block단위이고 한 줄 띄어진 것처럼 된 거다 라고 하셨습니다.근데 div가 block단위이고 한 줄 띄어진 것처럼 되는 게 이해되지 않습니다.. 한 줄 띄어진거면 바로 밑으로 붙여져서 안 튀어나가야하지 않나요? wrapper__left__body크기가 어차피 부모 height에서 wrapper__left__header부분을 뺀 크기의 100%라면요! 아니면 혹시 정렬을 해야지만 부모 height에서 wrapper__left__header부분을 뺀 크기의 100%라고 이해할 수 있는 걸까요? 정렬을 따로 설정하지 않으면 그냥 부모 height의 100%를 가져와서 튀어나가는 걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[싸이월드만들기1탄] wrapper 사이즈
[싸이월드만들기1탄]에서 wrapper 사이즈가 어떻게 된 건지 궁금합니다.부모-속성을 보면background -> outerbox -> wrapper -> wrapper__left, wrapper__right입니다!이때, background와 outerbox는 따로 크기를 지정해주었는데, wrapper는 따로 크기를 지정하지 않았더라고요!그러면 wrapper크기는 자동으로 지정되나요? 부모클래스인 outerbox의 width와는 동일한데 height는 달라서요! 혹시 어떻게 지정되는 건지 알 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section11 포폴리뷰 내용 부실한듯 합니다. (github에 삭제쿼리 조차 없음)
게시글 등록 화면에서 작성자, 비밀번호, 제목, 내용 값이 입력되면 등록하기 버튼의 색을 변경해주시고 반대로 값이 입력되지 않았다면 다시 원래 색인 회식으로 되돌리기freeboard_frontend 게시글 목록 화면을 구현해주세요.게시글 상세 화면에서 삭제하기 기능을 구현해주세요.이게 포폴과제인데, section11의 포폴리뷰 영상에는 오직 2번에 대한 내용만 있는듯하고 1,3번에 대한 내용은 아예 빠져있네요. github에 삭제쿼리 한줄조차 없네요. 너무 부실한거 아닌가 싶습니다.
-
해결됨대용량 채팅 TPS 처리를 위한 웹소켓 통신 만들며 학습하기
nodejs 파일이 프론트엔디 파일인가요??
안녕하세요 node js로 웹 개발을 시작하게 된 학생입니다아직 많은 정보가 없어서 node js 코드를 보면서 강의를 공부하고싶은데 리엑트 템플릿 파일 제공해준 폴더에 있는 js 코드가 node js 파일인가요??좋은 강의 감사합니다
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vercel....
감정일기장은 아니지만 앞서 연습한 todolist 를 일단 배포해보고싶어서 vercel 에 회원가입을 하고 로그인까지 해놓고 다시 vscode에서 터미널에서 vercel login 을 입력하고 엔터를 치면아래와 같이 에러메시지가 떠서 더이상의 진행을 못했는데요, 혹시 다른 뭔가를 더 해야 하는건지요 F:\★수업★\WEB수업\웹퍼블리싱\11-Front-End\React\react-study\6-todolist>vercel login'vercel'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
그래프큐엘로 구글 로그인 질문있습니다.
현재 아래와 같은 에러를 마주쳤습니다.my-server_1 | TypeError: res.setHeader is not a function my-server_1 | at JwtGoogleStrategy.strategy.redirect (/myFolder/node_modules/passport/lib/middleware/authenticate.js:340:13) my-server_1 | at stored (/myFolder/node_modules/passport-oauth2/lib/strategy.js:285:14) my-server_1 | at NullStore.store (/myFolder/node_modules/passport-oauth2/lib/state/null.js:5:3) my-server_1 | at JwtGoogleStrategy.OAuth2Strategy.authenticate (/myFolder/node_modules/passport-oauth2/lib/strategy.js:297:28) my-server_1 | at attempt (/myFolder/node_modules/passport/lib/middleware/authenticate.js:378:16) my-server_1 | at authenticate (/myFolder/node_modules/passport/lib/middleware/authenticate.js:379:7) my-server_1 | at /myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:88:3 my-server_1 | at new Promise (<anonymous>) my-server_1 | at /myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:80:83 my-server_1 | at GqlAuthGuard.canActivate (/myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:44:32)제 코드는 다음과 같습니다.auth.resulver.ts 파일의 일부분입니다. @UseGuards(GqlAuthGuard('google')) @Mutation(() => String) loginGoogle( @Context() context: IContext, // ): void { console.log('context::', context); }그래프큐엘 가드 부분입니다.import { ExecutionContext } from '@nestjs/common'; import { GqlExecutionContext } from '@nestjs/graphql'; import { AuthGuard } from '@nestjs/passport'; // graphql 인가 가드 설정 export const GqlAuthGuard = (name: string) => { return class GqlAuthGuard extends AuthGuard(name) { getRequest(context: ExecutionContext) { const gqlContext = GqlExecutionContext.create(context); return gqlContext.getContext().req; } }; }; jwt google 부분입니다.import { PassportStrategy } from '@nestjs/passport'; import { Strategy } from 'passport-google-oauth20'; export class JwtGoogleStrategy extends PassportStrategy(Strategy, 'google') { constructor() { super({ clientID: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, callbackURL: 'http://localhost:3001/login', scope: ['email', 'profile'], }); } validate(accessToken, profile) { console.log('profile:', profile); return { ... }; } } 혹시 제가 실수한 부분이있을까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지 업로드 url 오류 입니다.
freeboard_frontend 이미지 업로드 부분 진행중인데 upload 버튼 클릭해서 이미지를 선택하면 Cannot destructure property 'url' of 'undefined' as it is undefined.이라는 안내창이 뜨면서 정상적으로 실행이 되지 않습니다.. 원인을 알 수 있을까요?다른 분 문의 글을 보고 혹시 apollo셋팅 문제인가 싶어 yarn add apollo-upload-client 와 yarn add -D @types/apollo-upload-client 를 추가로 설치 해봤는데도 문제 해결이 안됩니다..
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
fetchPointTransactionsOfBuying 질문
위 사진과 같이 search에 'Terra'를 검색했는데 "usedItem":null 인 정보까지 받아와지는데 왜 이런가요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
props 데이터 전달하기 missing in props validation 오류
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.실행은 되는데 왜이렇게 자꾸 오류가 나는걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql에서 확인 시 게시물이 없다고 나옵니다
브라우저에 내용은 모두 잘 입력이 되고 console창에서도 _id가 잘 나왔는데 graphql로 넘어가서 등록된 부분을 확인하려 하니 등록된 게시물이 없다고 나옵니다. 어떤 부분이 문제인걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
types.ts 생성 오류
필요한 요소들 다 설치 되어있고, 오타없이 작성했는데도Unable to find template plugin matching '-typescript' 오류와 함께 types.ts가 생성이 안됩니다. 혹시나해서 >yarn add -D @graphql-codegen/typescript 다시 설치했지만 같은 오류가 뜹니다. >@graphql-codegen/typescript-plugin 도 설치해봤는데 아래와 같은 오류로 설치가 안되네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
css, div size와 크기가 다른 background image 적용 문의
background-image에 적용하는데 있어서 문의가 있습니다.outerbox.png 이미지 키기는 807px 544px 로 나옵니다.현재 outerbox css class에서 width 888px로 주면서 대략 81px 정도가 이미지가 반복되어서 표시됩니다. 이미지 반복을 없애기 위해서 아래와 같은 css를 추가했는데 이번에는 이미지가 잘려서 보입니다.background-repeat: no-repeat background-size: cover강사님 처럼 888px 544px div에 다른 이미지를 일치시켜서 표기하려면 어떻게 해야하나요 ?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
3.3)Node.js 사용하기 강의 중 npm run start 시 오류 발생
강의대로 package.json에 scripts 내 start에 경로 추가 후("node src/index.js)터미널에 npm run start 입력 시 아래와 같은 error가 발생됩니다.PS C:\Users\HOME\Desktop\oneBite-React\section03> npm run start> section03@1.0.0 start> node src/index.jsnpm error code ENOENTnpm error syscall spawn C:\Program Files\Git\bin\git.exenpm error path C:\Users\HOME\Desktop\oneBite-React\section03npm error errno -4058npm error enoent spawn C:\Program Files\Git\bin\git.exe ENOENTnpm error enoent This is related to npm not being able to find a file.npm error enoentnpm error A complete log of this run can be found in: C:\Users\HOME\AppData\Local\npm-cache\_logs\2024-07-14T05_57_50_914Z-debug-0.log
-
미해결실무 중심! FE 입문자를 위한 React
SuryveyPie 기획서 어디에 있나요?
제목 그대로 SurveyPie 기획서 pdf를 어디서 받아야 하는지 모르겠습니다.처음에 받은 "학습노트_리엑트기초심화.pdf" 파일에서는 디자인 가이드와 코드만 존재합니다. 기획서 어디서 받을 수 있는지 알려주시면 감사하겠습니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[section08, 투두리스트] 할일 추가가 한개밖에 안되는 문제
안녕하세요 section08까지 듣고 투두리스트 복습을 하던 중 할일이 한개는 추가가 되는데 그 뒤로는 추가된 할일에 덮어쓰기가 되어 추가가 안되는 문제가 발생하는 문제가 발생하여 어제부터 해결이 안되 질문남깁니다.onCreate함수 내부에 로그를 찍어보면새롭게 저장된 데이터가 아닌 매번 기존에 3개 만들어놓은 mockData가 불러와져서 데이터가 추가되는거 까진 확인하였습니다.또한 useReducer를 사용하면 강의와 같이 정상적으로 되는데 useState를 이용하면 위와 같은 문제가 발생합니다.몬가 Context를 사용해서 이런 현상이 발생하는 것으로 추측되는데 어떤 차이 때문에 이런 현상이 발생하는지 궁금합니다. App.jsximport './App.css' import Header from "./component/Header.jsx"; import Editor from "./component/Editor.jsx"; import List from "./component/List.jsx"; import {createContext, useMemo, useRef, useState} from "react"; export const ContextStateData = createContext(); export const ContextDispatchData = createContext(); const mockData = [{ id: 0, isDone: false, content: "Study react", date: new Date().getTime() }, { id: 1, isDone: false, content: "go to bed", date: new Date().getTime() }, { id: 2, isDone: false, content: "play game", date: new Date().getTime() },]; function App() { const [todos, setTodos] = useState(mockData); const idRef = useRef(3); const onCreate = (content) => { const newTodos = { id: idRef.current++, isDone: false, content: content, date: new Date().getTime() } setTodos([newTodos, ...todos]); } const memorizedDispatch = useMemo(() => { return {onCreate} }, []); return (<div className="App"> <Header/> <ContextStateData.Provider value={todos}> <ContextDispatchData.Provider value={memorizedDispatch}> <Editor/> <List/> </ContextDispatchData.Provider> </ContextStateData.Provider> </div>) } export default App 전체 코드 깃허브 주소https://github.com/ironwhale1014/one-bite-react/tree/main/todo_list_train
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
500 오류
강의 듣고 복습하면서 과제도 푸는 중에 갑자기 인터넷 페이지로 보기 위해 실행을 하니, 500번 오류가 수업(example)랑 과제(practice) 둘다 뜨면서 아무것도 뜨지 않습니다.. import 해오는 부분은 아무 이상이 없고, 과제 같은 경우도 이전에 문제 없었던 페이지에서도 같은 500번 오류가 뜹니다 ㅠ