176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요. 소주제 - 이모션까지 강의를 보고 복습, 퀴즈를 진행한 뒤 피그마를 참고하여 포트폴리오1 게시판을 만들었습니다. 등록하기 버튼까지 다 만들고 부족한 부분은 리뷰 강의를 본 후에 강사님 코드를 참고하여 틀린 부분들을 고치면서 보강했습니다. 그런데 코드를 참고하여 틀린 부분들을 다 고쳤다고 생각했는데 딱 두군데가 맞지 않아서 몇 시간 동안 원인을 못 찾고 있어, 문의를 드립니다. 제가 노란색으로 표시한 두 부분이 튀어나왔는데 저 부분은 몇 시간 동안 찾아보고 비교해봐도 왜 저런지를 모르겠어서 최후의 수단으로 강사님 index.js랑 emotion.js 코드를 전부 복붙해봤는데도 저 두 곳이 튀어나온 상태에서 바뀌질 않습니다. 버전 때문에 그런가 해서 버전 다시 맞추고 yarn install 해봐도 똑같습니다 ㅠㅠ (그런데 강사님 git 코드를 clone 한걸 실행하면 정상적으로 랜더링 됩니다) 강사님의 index, emotion 코드를 붙여 넣어봐도 저 상태인거 보면 코드가 아니라 어디쪽 문제일까요..?
node.js seo react graphql nodejs next.js Next.js
FRONTEER
2023-01-20T15:54:38.542Z
댓글 1
좋아요 0
조회수 637
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
vscode 강의랑 맞출려고하는데 확장 어떤거 사용하셨을까요?
graphql node.js react seo nodejs next.js Next.js
희진
2023-01-20T12:15:30.559Z
댓글 1
좋아요 0
조회수 1471
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
질문1 리액트에 gql 적용시 영상과다르게 아래와같이 단색으로 프로그래밍 됩니다 어떤 패키지를 적용해야 할까요?
seo node.js graphql nodejs react next.js Next.js
이효성
2023-01-20T07:40:42.240Z
댓글 1
좋아요 1
조회수 262
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요, react 도커파일 작성 및 docker run을 해줬는데요, (port 10001:10001) localhost :10001이 들어가지지 않는데,, 별도의 설정이 필요할까요?
Next.js tdd redux typescript next.js react
kwangjin12
2023-01-20T06:45:42.280Z
댓글 1
좋아요 0
조회수 383
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
안녕하세요. 1월 21일까지 수강기간인데 제가 한번더 총체적으로 살펴보길 소망해서요. 혹시 수강기간을 연장해주실 수 있을까요? 보통 무제한 수강인줄알고 구매를 했었는데 수강기간이 제한이 있는줄 늦게 알게 되었습니다. ㅠ
learning
2023-01-20T04:05:59.910Z
댓글 1
좋아요 0
조회수 394
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
제선에서 할 수 있는 방법은 다 해본거 같은데 모르겠습니다.. config 수정 node v 18- >14 fs오류때문에 강의 진행이 안되고있습니다 ㅠ 해결방법이 무엇일까요
2023-01-19T07:14:18.674Z
댓글 1
좋아요 0
조회수 2191
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playground에서 api-docs가 강의에 있는 docs랑 다릅니다 같게 할 방법이 있을까요?
seo react graphql nodejs Next.js
cheolung
2023-01-18T17:10:09.778Z
댓글 2
좋아요 0
조회수 451
미해결
[리뉴얼] React로 NodeBird SNS 만들기
그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ 코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..
redux nodejs react express Next.js
hyuri
2023-01-18T15:09:01.151Z
댓글 2
좋아요 1
조회수 593
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강사님 모든 코드를 수정한 후 로그인하려고 하는데 아이디, 비밀번호 입력 후 누르면 로그인이 되지 않습니다. 콘솔창에 에러도 나타나지 않아서 어디가 틀렸는지 모르겠네요. 몇개파일의 코드 같이 올려드립니다. 아래는 로그인 안되는 화면캡처본입니다. LoginForm.js import React, { useCallback, useMemo } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import styled from "styled-components"; import useInput from "../hooks/useInput"; import { useDispatch, useSelector } from "react-redux"; import { loginRequestAction } from "../reducers/user"; const FormWrapper = styled(Form)` padding: 15px; `; const LoginForm = () => { const dispatch = useDispatch(); const { isLoggingIn } = useSelector((state) => state.user); const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginRequestAction({ id, password })); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <Input name="user-id" value={id} onChange={onChangeId} required></Input> </div> <div> <label htmlFor="user-password">비밀번호</label> <Input name="user-password" value={password} onChange={onChangePassword} required ></Input> </div> <div style={style}> <Button type="primary" htmlType="submit" loading={isLoggingIn}> 로그인 </Button> <Link href="/signup"> <a>회원가입</a> </Link> </div> </FormWrapper> ); }; export default LoginForm; reducers-user.js export const initailState = { isLoggingIn: false, // 로그인 시도중 - 로딩창을 띄우기위해 isLoggedIn: false, isLoggingOut: false, // 로그아웃 시도중 me: null, signUpDate: {}, loginData: {}, }; // 로그인 액션 create export const loginRequestAction = (data) => { return { type: "LOG_IN", data, }; }; export const logoutRequestAction = () => { return { type: "LOG_OUT", }; }; const reducer = (state = initailState, action) => { switch (action.type) { case "LOG_IN_REQUEST": console.log("reducers login"); return { ...state, isLoggingIn: true, }; case "LOG_IN_SUCCESS": return { ...state, isLoggingIn: false, isLoggedIn: true, me: { ...action.data, nickname: "가나다" }, }; case "LOG_IN_FAILURE": return { ...state, isLoggingIn: false, isLoggedIn: false, }; case "LOG_OUT_REQUEST": return { ...state, isLoggingOut: true, }; case "LOG_OUT_SUCCESS": return { ...state, isLoggingOut: false, isLoggedIn: false, me: null, }; case "LOG_OUT_FAILURE": return { ...state, isLoggingOut: false, }; default: return state; } }; export default reducer; sagas-user.js import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; function loginAPI(data) { return axios.post("/api/login", data); // 서버에 요청 } function* login(action) { try { console.log("saga login"); yield delay(1000); // 비동기 요청 대신수행 // const result = yield call(loginAPI, action.data); yield put({ type: "LOG_IN_SUCCESS", data: action.data, }); } catch (err) { yield put({ type: "LOG_IN_FAILURE", data: err.response.data, }); } } function logoutAPI() { return axios.post("/api/logout"); // 서버에 요청 } function* logout() { try { yield delay(1000); // const result = yield call(logoutAPI); yield put({ type: "LOG_OUT_SUCCESS", }); } catch (err) { yield put({ type: "LOG_OUT_FAILURE", data: err.response.data, }); } } function* watchLogIn() { yield takeLatest("LOG_IN_REQUEST", login); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST", logout); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); } configureStore.js import { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas/index"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;
nodejs redux react express Next.js
뽀개즈아
2023-01-18T11:05:28.894Z
댓글 3
좋아요 0
조회수 717
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 넷플릭스 실습을 하면서 iframe을 사용해 유튜브에서 동영상이 나오게 하는거 까지는 완료가 되었습니다. 그런데 재생버튼을 누르고 영상이 시작되면 그림처럼 흐릿하게 나오는데 왜 그런걸까요?
react typescript tdd redux Next.js
김규혁
2023-01-17T09:05:56.354Z
댓글 2
좋아요 1
조회수 699
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
[text, setText]와 onChangeText를 만들어놓은 훅 useInput을 사용해서 코딩해도 되지 않나요? 그렇게 하지 않은 이유가 긍금합니다!
nodejs redux express react Next.js
뽀개즈아
2023-01-17T02:37:21.980Z
댓글 1
좋아요 0
조회수 370
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 노드 버전이 올라가서 노드도 16.17로 내리고 나머지도 다 버전 내려서 버전에 맞게 설정하고 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 까지 했는데 노션에 있는 것 처럼 페이지와 api 여러 등등이 뜨지 않습니다 뭐가 문제일까요?ㅠㅠ
react nodejs graphql seo Next.js
2023-01-10T16:15:57.512Z
댓글 1
좋아요 0
조회수 375
미해결
[리뉴얼] React로 NodeBird SNS 만들기
post 로 id, password 전송시 => 크롬 개발자 도구, 네트워크, Request 에 보면 id, password 가 그대로 노출되는데 숨길순 없나요? 브라우저를 사용하는 유저가 보낸 거기 때문에 보안을 안해도 상관없을까요?
Next.js react express nodejs redux
mkp0131
2023-01-10T14:35:39.456Z
댓글 1
좋아요 0
조회수 1410
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그대로 따라한거 같은데 태그마다 빨간 줄이 있는 이유가 뭔지 모르겠어요 ㅜ 작동은 잘 됩니다! 항상 감사합니다
seo graphql react nodejs Next.js
lar888
2023-01-04T13:19:30.529Z
댓글 2
좋아요 0
조회수 629
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
tdd 앱 개발 초입 강의에서 질문 있습니다. App.test.js에서는 screen.getByTestId("counter")를 했고, App.js 에서는 <h3> 내부에 data-testid="counter" 라고 되어 있는데요. 어떻게 App.js 내부의 <h3> 태그의 data-testid가 getByTestId로 불릴 수 있는지 궁금합니다..! 그리고 넘어간 정보가 왜 0이 아니라 TextContent가 맞는걸까요?
tdd typescript react redux Next.js
kwangjin12
2023-01-03T16:22:42.877Z
댓글 1
좋아요 0
조회수 422
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
import "reflect-metadata"; ^^^^^^ SyntaxError: Cannot use import statement outside a module 해당 에러 발생 후 , package.json 파일에 type 을 추가 후 실행 하였더니, 충돌 에러가 발생합니다 ㅠ 어떻게 해결 해야 하는지 조언좀 부탁드립니다. https://github.com/bottlesun/study/tree/master/09-redditClone-nextjs
클론코딩 Next.js postgresql nodejs react docker typescript
병선
2023-01-03T08:17:58.835Z
댓글 1
좋아요 0
조회수 452
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
const subs = await AppDataSource.createQueryBuilder() .select( `s.title,s.name,${imageUrlExp} as "imageUrl", count(p.id) as "postCount"` ) .from(Sub, 's') .leftJoin(Post, 'p', `s.name = p."subName"`) .groupBy('s.title, s.name, "imageUrl"') .orderBy(`"postCount"`, 'DESC') .limit(5) .execute(); 위의 코드에서 백틱 ``과 따옴표들 '', "" 사용방식들에대한 기초적인 지식을 쌓으려면 어떻게 검색해보면될까요? 일단 제 나름대로 접근식으로는 .from이나 .orderBy 이런건 typeORM 문법인거같아서 찾아보니 문서에는 백틱은 안적혀있는거같고 따옴표로만 작성해준거같아서요.. 혹시 변수가 들어가있으면 ``를써주는게맞나요? 근데 .orderBy부분에서 `"postCount"`, 이부분이 좀 이해가 안가는게 백틱에 또 큰따옴표를 감싸주셔서..
react nodejs postgresql docker typescript Next.js 클론코딩
반가우면반갑다고해
2023-01-03T05:54:01.669Z
댓글 1
좋아요 1
조회수 423
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { try { const cookie = req.headers.cookie; console.log(req.headers.cookie); // 쿠키가 없다면 에러를 보냄 if (!cookie) throw new Error('Missing auth token cookie'); // 쿠키가 있다면 그 쿠키를 이용해서 백엔드에서 인증 처리하기 await axios.get('/auth/me', { headers: { cookie } }); return { props: {} }; } catch (error) { // 백엔드에서 요청에서 던져준 쿠키를 이용해 인증 처리할 때 에러가 나면 // login 페이지로 이동 res.writeHead(307, { Location: '/login' }).end(); return { props: {} }; } }; axios.get에 파라미터로 헤더.쿠키 로 넣어준걸까요? 근데 순서대로 코드가 동작하게되면 if문에 걸려서 영원히 쿠키가 없어 페이지가 로그인페이지로 이동될텐데 제가 잘못생각한걸까요? 두번쨰로 리턴 props:{}로 해주신 이유에대해서 궁금합니다. 다른식으로 그냥 return; 이렇게 작성하고 끝내도 괜찮을까요?
react nodejs docker typescript postgresql 클론코딩 Next.js
반가우면반갑다고해
2023-01-01T08:20:05.360Z
댓글 1
좋아요 0
조회수 507
미해결
[리뉴얼] React로 NodeBird SNS 만들기
const id = useSelector((state) => state.user.user?.id); const { addCommentDone } = useSelector( (state) => state.post ); 위에 코드처럼 state 단계에서 갈리게되면 2번 실행하게되는데 성능엔 문제 없나요?
Next.js react nodejs redux express
mkp0131
2022-12-27T09:00:09.532Z
댓글 2
좋아요 2
조회수 621
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의를 보고 graphql-codegen 설치를 진행하는데 yarn generate 명령어를 입력하니 아래와 같은 에러가 발생합니다. 수업 자료를 보고 다시 설치해봐도 동일한 오류가 계속 발생합니다.
seo graphql react nodejs Next.js
파인애플
2022-12-26T14:23:53.287Z
댓글 3
좋아요 0
조회수 991
