묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
swr에 대한 질문입니다. (용어 관련)
안녕하세요용어에 대한 이해 차원에서 질문드립니다.useMap이나 useStore 훅에서 map이나 store에 대한 정보를 전역상태로 관리한다라고 표현하시는데요. 이 부분에 대한 질문입니다.제가 알고 이해하고 있는 바를 먼저 말씀드리면, SWR은 같은 키값로 받아온 값은 다시 요청하지않고 기존의 캐싱된 값을 반환하는 것으로 알고 있습니다. 그래서 같은 키값으로 요청을 하게 되면 결국 캐싱된 값을 사용하게 되는 것이구요. 이러한 과정을 전역상태로 관리한다라고 표현하시는 것으로 이해했는데 맞을까요??[참고] SWR은 데이터의 효율적인 로딩과 캐싱을 위한 라이브러리로서 주로 서버 상태 관리와 데이터 동기화 측면에서 활용되는것이기에 전역상태 관리라고 하면 약간의 혼란을 야기하는 면이 없지 않아 있는 것 같습니다.(redux나 기타 다른 client side에 대한 전역상태 관리와 비교하여...) → 이 부분은 개인적인 생각이기에 참고만 해주셔도 괜찮을거 같습니다. 😅좋은 강의 감사합니다. 🙇🏻
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
git push origin master 입력시 오류가 발생해요!
git push origin master 입력시 위와 같은 오류가 나옵니다..! 확인부탁드립니다ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
코드자료 어디있나요? 매번 없네요.
이 강의에 불만이 한두개가 아닌 사람입니다.훈훈한 javaScript 타이머 만드는 부분 듣고있는데 제가 코드를 잘못 썼는지 작동이 안되는데요.코드를 비교해 보고싶어도 코드만 따로 올린게 없는 건지, 제가 못찾는건지 모르곘네요.만약 코드만 따로 올려놓은게 없다면 인강 처음부터 돌려보면서 하나하나 비교해야 하는건가요?심지어 html 코드자료 올려놓은거 복사해서 붙여넣었더니 class 이름이 강의랑 달라서 어이가 없었네요.자료좀 똑바로 올려주세요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
HTML 예치금 충전표
안녕하세요! 열심히 강의 듣고 있는데 HTML 수업에서 예치금 충전표 관련해서 따로 내용이 없는데 노션에는 나오더라구여! 예치금 충전표 관련 강의는 어디있는건가요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
mysql의 다른 schema(database) 를 참조하는 경우에는 어떻게 ...
시퀄라이즈로 모델 구성시 하나의 database 를 참조하는 방식인데요 서브쿼리로 다른 database(mysql 의 schema)의 테이블을 참조하는 경우에는 다음과 같이 query() function으로 풀어서 요청하기도 하는가요..? db.sequelize.query('select a.name, b.score from schemaA.Users a Left join schemaB.Score B on a.userid=b.userid')
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
swagger 사용
강의에서 제공해주시는 swagger를 사용하여 axios, rest-api로 게시글 post를 테스트 하고 싶습니다. 어떠한 url로 axios.post() 안에 작성해야할 지 모르겠습니다..!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
04-02-graphql-mutation
안녕하세요 강의 잘 듣고있습니다.04-02-graphql-mutaion/index.js부분에서 이부분 이유에 대해서 잘 모르겠습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
redux 상태값 문의드립니다
진도가 잘 안나가네요아직 redux에서 헤매고 있습니다. 페이지 이동 시 버튼을 통해 이동 시에는 state 값이 유지가 되는데 직접 localhost:3060/profile 를 타이핑해서 들어가게 되면 상태값이 유지가 되지 않습니다.원래 그런걸까요..?<Menu.Item key="home"><Link href="/"><a>노드버드</a></Link></Menu.Item> <Menu.Item key="profile"><Link href="/profile"><a>프로필</a></Link></Menu.Item> 유지가 되게 해주려면 어떤 방식으로 가져가야 할까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 24 유효성 검사
섹션 24 에서 빈값 처리를 구현하는것을 보여주셨는데요.html5 에서 제공하는 유효성 검사 <input type="text" required />위와같이 사용하는것과의 차이점이 뭘까요 ??
-
해결됨따라하며 배우는 리액트 A-Z[19버전 반영]
react-netflix-clone 작성 후 github에 배포 후 브라우저 접속 시 콘솔 에러입니다.
https://metlin-72.github.io/react-netflix/ 접속 시 아래와 같이 에러가 납니다.===========================================================metlin-72.github.io/:1 GET https://metlin-72.github.io/static/js/main.5bcb49d4.js net::ERR_ABORTED 404metlin-72.github.io/:1 GET https://metlin-72.github.io/static/css/main.10fc3cf1.css net::ERR_ABORTED 404manifest.json:1 GET https://metlin-72.github.io/manifest.json 404manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.===========================================================뭘까요? 여러번 반복해서 똑같이 따라했는데 안되네요.도움 부탁드립니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
ec2 배포시 빌드 안되는 문제
ec2 우분투에서 npm run build:production 명령어를 입력하면,> client@0.1.0 build:production> env-cmd -f .env.production react-scripts buildCreating an optimized production build...이 상태에서 더 이상 진행되지 않고 멈춰있습니다.ctrl+c로 중단했다가 다시 빌드해봐도 동일한데 어떻게 해결할 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 댓글불러오기 쿼리 오류
안녕하세요 강사님 중고마켓 댓글을 불러오는 쿼리훅을 작성했는데 아래와 같은 에러 메세지로 계속 상태코드 400이 나옵니다 ㅠㅠ "Variable \"$useditemId\" is not defined by operation \"fetchUseditemQuestions\"."훅 안에서 useditemId을 콘솔로 찍어봐도 정상적으로 나오고 같은 변수를 사용하는 fetchUseditem를 참고해서 다시 작성도 해봤는데 계속 같은 오류가 나옵니다.. 그래프큐엘 플레이그라운드에서는 똑같이 작성해서 query variables에 useditemId를 넣어서 요청해보면 문제없이 잘 작동하는데 프로젝트 안에서는 계속 오류가 나네요 ㅠㅠ 제가 어느 부분을 놓친걸까요..? import { gql, useQuery } from "@apollo/client"; import type { IQuery, IQueryFetchUseditemQuestionsArgs, } from "../../../../commons/types/generated/types"; const FETCH_USEDITEM_QUESTIONS = gql` query fetchUseditemQuestions($page: Int, $useditemID: ID!) { fetchUseditemQuestions(page: $page, useditemId: $useditemId) { _id } } `; export const useQueryFetchUseditemQuestions = ( variables: IQueryFetchUseditemQuestionsArgs, ) => { const query = useQuery< Pick<IQuery, "fetchUseditemQuestions">, IQueryFetchUseditemQuestionsArgs >(FETCH_USEDITEM_QUESTIONS, { variables: { useditemId: variables.useditemId, }, }); return query; };
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
로그아웃이 작동하지 않아서 질문드립니다.
안녕하세요 제로초님 로그인은 되는데 로그아웃이 되지않아서 질문남깁니다.로그인 한 다음 로그아웃을 하면 위와 같이 AxiosError가 나서 네트워크와 리덕스를 확인해보니깐 로그아웃 요청시 302 Found가 뜨고 404 Not Found라는 에러 메세지가 뜹니다.그리고 리덕스에서는 실패 메세지가 뜹니다. // UserProfile import { logoutRequestAction } from '../reducers/user'; const dispatch = useDispatch(); const { me, logOutLoading } = useSelector((state) => state.user); const onLogOut = useCallback(() => { dispatch(logoutRequestAction()); }, []); <Button onClick={onLogOut} loading={logOutLoading}> 로그아웃 </Button> // 리덕스 logOutLoading: false, // 로그아웃 시도중 logOutDone: false, logOutError: null, export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST'; export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS'; export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE'; case LOG_OUT_REQUEST: draft.logOutLoading = true; draft.logOutDone = false; draft.logOutError = null; break; case LOG_OUT_SUCCESS: draft.logOutLoading = false; draft.logOutDone = true; draft.me = null; break; case LOG_OUT_FAILURE: draft.logOutLoading = false; draft.logOutError = action.error; break; 사가 axios.defaults.baseURL = 'http://localhost:3065'; function logOutAPI() { return axios.post('/user/logout'); } function* logOut() { try { yield call(logOutAPI); yield put({ type: LOG_OUT_SUCCESS, }); } catch (err) { console.log(err); yield put({ type: LOG_OUT_FAILURE, error: err.response.data, }); } } function* watchLogOut() { yield takeEvery(LOG_OUT_REQUEST, logOut); } app.js const express = require('express'); const cors = require('cors'); // session, cookieParser, dotenv const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); // passport 로그인 설정 const passport = require('passport'); const passportConfig = require('./passport'); passportConfig(); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); dotenv.config(); const app = express(); // 시퀄라이즈 - db 연결 const db = require('./models/index.js'); db.sequelize .sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); app.use( cors({ origin: true, credentials: true, }) ); app.use(express.json()); app.use(express.urlencoded({ extended: true })); // session,cookieParser app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, }) ); app.use(passport.initialize()); app.use(passport.session()); app.use('/post', postRouter); app.use('/user', userRouter); app.listen(3065, () => { console.log('3065 포트에서 대기중'); }); user.js const express = require('express'); const router = express.Router(); const passport = require('passport'); const bcrypt = require('bcrypt'); const { User, Post } = require('../models'); // 로그인 POST/user/login router.post('/login', (req, res, next) => { passport.authenticate('local', (err, user, info) => { if (err) { console.error(err); return next(err); } if (info) { return res.status(403).send(info.reason); } return req.login(user, async (loginErr) => { if (loginErr) { console.error(loginErr); return next(loginErr); } const fullUserWithoutPassword = await User.findOne({ where: { id: user.id }, attributes: { exclude: ['password'], }, include: [ { model: Post, }, { model: User, as: 'Followings', }, { model: User, as: 'Followers', }, ], }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); // 로그아웃 POST/user/logout router.post('/logout', (req, res, next) => { req.logout(() => { res.redirect('/'); }); }); //회원가입 POST / user router.post('/', async (req, res, next) => { try { const exUser = await User.findOne({ where: { email: req.body.email, }, }); if (exUser) { return res.status(403).send('이미 사용중인 아이디입니다.'); } const hashedPassword = await bcrypt.hash(req.body.password, 10); await User.create({ email: req.body.email, nickname: req.body.nickname, password: hashedPassword, }); res.status(200).send('ok'); } catch (error) { console.error(error); next(error); } }); module.exports = router; 로그인과 회원가입은 제대로 작동하는데 로그아웃만 되지 않습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
value에 관해서 궁금합니다.
안녕하세요 선생님. :-) 코멘트 복습하며 궁금증이 생겨서 질문 드립니다.리팩토링 하면서 느낀건데 , 이 이미지의 밑줄이 그어진 태그들 없이 이벤트핸들러만 있어도 기능구현에 무리가 없던데 이 태그들이 꼭 있어야 하는건가요 ?? 있어야 한다면 이유를 알고 싶습니다. 두 번째는 antd에서 rate를 가져올 때 궁금증입니다.여기서 제가 궁금한것은 value={el.rating}이 부분인데, value값에 el.rating을 주지 않으면 색칠이 없는 별만 뜨더라구요. 그래서 이모션을 없애고 <div>{el.rating}<div>로 찍으니 숫자가 나오는 걸 알 수 있었습니다. 그럼 결국 댓글 작성할 때 클릭한 별은 숫자로 뮤테이션이 날라가고 조회할 때 그 숫자를 value에 넣어줘야 별 모양이 제대로 뜬다는 것을 확인했습니다. 그렇다면 이건 antd 개발자들이 독자적으로 설정을 이렇게 한건가요 ?? 아니면 일반적으로 이런 모양들은 value에 값을 넣어줘야 정상적으로 뜨는건가요 ??? 미리 답변 감사합니다 선생님 !!! ^_^
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslintrc.js에서 project를 폴더 안에있는 tsconfig.json으로 설정하는 방법이 있을까요.?
저 같은 경우 codecamp 폴더 안에 class, freeboard, quiz폴더들을 넣고 진행하고 있었는데요... (class와 freeboard에 tsconfig.ts파일을 설정해두었습니다.)class 폴더 안에서 설정해주시는대로 똑같이 lint설정하다가 project부분에서 '**/tsconfig.json'을 하는 순간 rootdir을 못찼겠다는 error가 뜨더라구요. 그래서 여기저기 검색해서 보니까 tsconfig를 못찼는것같아 경로를 '*/class/tsconfig.json'으로 변경하니 뭔가 되는것 같았는데, 이번엔 parsingError가 뜨면서 yarn lint를 하였을때 , 'The Next.js plugin was not detected in your ESLint configuration. ....' 란 경고가 뜨며 lint했을때 틀린 부분들이 나오지 않더라구요.. ㅠㅠ그래서 어쩔수 없이 freeboard폴더 자체를 따로 분리해서 class폴더를 다시 설정하니 잘되는 것을 확인했습니다. 저 같은 경우 다시 freeboard폴더를 codecamp 폴더 안에 넣고 수업을 진행하고 싶은데, class 폴더안의 eslintrc.json파일의 project 경로를 어떻게 설정해주어야 할까요? tsconfig.json파일이 2개가 있는것 자체가 lint에서 문제가 되는 것인가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
AWS 배포 후 cors 문제
AWS 배포 완료 하였는데 CORS 문제가 발생했습니다..env.production 파일 모두 정상적으로 URL 반영하였는데 왜 안 될까요? 어디를 확인해봐야 할까요?Github 코드 주소https://github.com/zzinbbang/react-reddit-main.env.production 설정에러 상황
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
$를 사용하면 정상적으로 작동하지 않습니다
import { useMutation, gql } from "@apollo/client"; const 나의그래프큐엘셋팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; export default function GraphqlMutation() { const [나의함수] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { const result = await 나의함수({ $: { //$ == variables 로 바꿔도 된다 같은 writer: "훈이", title: "contents", contents: "반갑", }, }); console.log(result); }; return <button onClick={onClickSubmit}>Graphql-API 요청하기</button>; }await 나의함수({ $: ...}) 에서 $를 사용하면 ApolloError: null value in column "writer" of relation "board" violates not-null constraint다음과 같은 에러가 발생하고 variables 로 바꾸면 정상적으로 작동합니다. 어느 부분이 틀렸을까요..?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
errno -4094 의 unknown error 가 종종 뜹니다
npm run dev로 실행시킨 후에 코드 수정 및 자동반영(핫리로드라고 하나요..?)이 잘 되다가어느 순간 이런 에러가 뜹니다. - error [Error: UNKNOWN: unknown error, open 'F:\dev\project\react\node-bird\.next\static\chunks\pages\login.js'] { digest: undefined[Error: UNKNOWN: unknown error, open 'F:\dev\project\react\node-bird\.next\static\chunks\pages\login.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'open', path: 'F:\\dev\\project\\react\\node-bird\\.next\\static\\chunks\\pages\\login.js'} 터미널에서 실행중인 프로세스 종료하고 다시 npm run dev 로 실행시키면 정상동작하기는 합니다만 혹시 에러가 발생하지 않도록 하는 방법이 있을가 해서 문의 남겨봅니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
cors 에러
안녕하세요. 회원가입 페이지 기능 생성중인데 서버 쪽에서 const origin = "http://localhost:3000";app.use(cors({ origin})); 이렇게 클라이언트 포트인 3000포트를 허용해줬습니다. 그런데 회원가입페이지에서 버튼을 누르면 XMLHttpRequest cannot load http://localhost:4000/api/auth/register due to access control checks. 요런식으로 에러남 요런 에러가 나는데 cors가 제대로 안먹히는고 있는건가요?
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
swr 질문입니다!
4:25 쯤 설명하시는 부분인데요새로운 매장 데이터가 들어왔을때 아래 사진의 20번째 줄이 실행되고, 20번째 줄이 실행되므로써, 아래 사진인 useStores.ts 의 8번째 줄이 실행되어 새로운 매장 데이터가 전역으로 저장되는거라고 이해를 했는데 제가 이해한게 맞는지 궁금합니다!