inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

176만명의 커뮤니티!! 함께 토론해봐요.

prettier 설정관련 질문입니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

format on save 기능을 사용하면 저장 시에 자동으로 개행과 줄바꿈을 해줘서 잘 사용하고 있습니다. 그런데 짧은 코드는 오히려 개행을 하지 않고 한줄에 작성하는 것이 가독성이 좋은 것 같아서 한줄에 쓰고 싶은데 format on save에 체크가 되어있어서 한 줄에 입력하는 게 불가능하네요. 그런데 강사님의 경우에는 if (true) { alert("안녕하세요") ; } 같은 짧은 코드의 경우에는 if (true) { alert("안녕하세요") ; } 처럼 한줄로 작성하고 저장해도 강제로 개행이 안되던데, 여쭤보고 싶은건 강사님은 format on save를 off로 설정해놓으셨나요? 아니면 format on save를 on으로 설정해놓고, 저런 짧은 if문을 한줄에 다 입력할 수 있는 설정방법이 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
yashinwol 댓글 1 좋아요 0 조회수 544

파비콘 안뜨는 이유

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 선생님 고생이 많으십니다. _app.js 헤드에 코드도 추가했고 front 폴더안에 public 폴더만들어서 파비콘 이미지도 넣어놨는데 왜 파비콘이 지구모양에서 안바뀔까요.. 체크해 볼 경우의 수가 머가 있을지 궁금합니다.. <link rel="shortcut icon" href="/favicon.ico" />

  • react
  • redux
  • node.js
  • express
  • next.js
hornedllama6 댓글 1 좋아요 1 조회수 3554

로그인 유지 구현시 CSR vs SSR

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

매 요청마다 로그인 유지를 위한 요청을 보낸다고 할때(유저 정보를 받아오는 방식) useEffect를 이용해 CSR로 구현을하면 로그인 정보를 받아오기 전에는 초기상태가 없기 때문에 `초기상태` -> `유저정보 들어있는 상태` 로 변경하는 과정에서 화면 CSS에 깜빡임이 발생합니다. 이 현상이 저는 layout shift와 같다고 느껴서 해결을 하고 싶은데 실무에서는 보통 어떻게 해결하나요? 초기로드에 SSR을 적용할지, 아니면 CSR 에서도 깜빡임을 없애는 방법이 있는지 궁금합니다.

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
kenny 댓글 1 좋아요 1 조회수 596

서버 들어갈 시 에러

미해결

[리뉴얼] React로 NodeBird SNS 만들기

- error Error: The default export is not a React Component in page: "/" at renderToHTMLImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\render.js:279:19) at PagesRouteModule.render (webpack-internal:///./node_modules/next/dist/server/future/route-modules/pages/module.js:31:45) at doRender (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1055:40) at cacheEntry.responseCache.get.incrementalCache.incrementalCache (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1215:34) at C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\response-cache\index.js:99:42 at ResponseCache.get (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\response-cache\index.js:149:11) at DevServer.renderToResponseWithComponentsImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1134:53) at C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:727:121 at NextTracerImpl.trace (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\lib\trace\tracer.js:90:20) at DevServer.renderToResponseWithComponents (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:727:41) at DevServer.renderPageComponent (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1366:35) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async DevServer.renderToResponseImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:1398:32) at async DevServer.pipeImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:645:25) at async Object.fn (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next-server.js:1153:21) at async Router.execute (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\router.js:315:32) at async DevServer.runImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:619:29) at async DevServer.run (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\dev\next-dev-server.js:908:20) at async DevServer.handleRequestImpl (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:546:20) { digest: undefined } 저번 폴더구조 문제를 해결하니 이러한 문제가 생겼습니다 어떻게 하나요?

  • react
  • redux
  • node.js
  • express
  • next.js
lsw0810222 댓글 11 좋아요 0 조회수 646

pages 또는 앱 디렉토리를 찾을 수 없음 에러

미해결

[리뉴얼] React로 NodeBird SNS 만들기

- ready started server on 0.0.0.0:3000, url: http://localhost:3000 Error: > Couldn't find any `pages` or `app` directory. Please create one under the project root at findPagesDir (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\lib\find-pages-dir.js:54:15) at DevServer.getRoutes (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\dev\next-dev-server.js:191:71) at new Server (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\base-server.js:198:47) at new NextNodeServer (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next-server.js:175:9) at new DevServer (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\dev\next-dev-server.js:149:9) at NextServer.createServer (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next.js:179:24) at C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next.js:200:42 at async NextServer.prepare (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\next.js:161:24) at async Server.<anonymous> (C:\Users\USER\Desktop\1080\react\front\node_modules\next\dist\server\lib\render-server.js:128:17) { type: 'Error' npm run dev를 했을 때 이런식으로 뜨는데 어떻게 해야 하나요??

  • react
  • redux
  • node.js
  • express
  • next.js
lsw0810222 댓글 5 좋아요 0 조회수 1311

fallback 관련 특성은 getStaticPaths에서만 설정가능한가요?

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

동적인 페이지에서 getStaticPaths 를 사용할때 fallback: true 속성을 이용해서 페이지를 요청때마다 새롭게 빌드할수 있는걸 배웠습니다. 만약 getStaticPaths를 안쓰고 getStaticProps만 쓰는경우는 요청할때마다 빌드하는 방식의 처리를 못하는건가요? , getStaticprops만 사용하면 revalidate 밖에 못하는건가요?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
kenny 댓글 1 좋아요 1 조회수 344

useSWR 로직을 hooks로 사용하는 경우

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

로그인 유지를 swr 방식으로 교체하려고 합니다. https://swr.vercel.app/ko/docs/getting-started 공식문서에는 useSWR을 hook으로 활용하는 가이드를 제시하고 있습니다. (재사용 가능하게 만들기 항목) 가이드와 같은 방식으로 외부 파일에 hooks를 만들고, 적용했습니다. useMyInfo.js import axios from 'axios'; export default function useMyInfo(useSWR) { const fetcher = url => axios.get(url, { withCredentials: true }).then(result => result.data); const { data: me, error: myInfoError, isLoading: myInfoLoading, } = useSWR(`${process.env.NEXT_PUBLIC_BACK_END_DOMAIN}/user/me`, fetcher); // mutate('ME', { me, myInfoError, myInfoLoading }); return { me, myInfoError, myInfoLoading, }; } index.js const Home = () => { const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } = useSelector(state => state.post); useEffect(() => { useMyInfo(); // hooks 호출 }, []); ...// 생략 매개변수로 전달하는 방식으로도 바꿔봤습니다. import useSWR from 'swr' const Home = () => { const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } = useSelector(state => state.post); useEffect(() => { useMyInfo(useSWR); // hooks 호출, hooks에서는 매개변수 받아서 적용하는 방식으로 변경했음 }, []); ...// 생략 여전히 같은 에러가 뜹니다. 공식문서 가이드와 달리 hook으로 만들어 재사용하는 것이 잘 안되는데 어떻게 해결할수 있나요? 간단한 get요청 하나 가져오는게 편할줄 알았는데 redux 보다 어려운거 같네요..

  • react
  • redux
  • node.js
  • express
  • next.js
kenny 댓글 1 좋아요 0 조회수 556

게시글 작성시 post.id를 읽지 못 하는 문제가 있습니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요, 제로초님. 문제에 대한 고민을 공유하기 앞서 현재 저는 [해시태그 등록하기]까지 수강한 상태입니다. 공유하려는 문제는 제목과 같이 게시글 작성시 post.id를 읽지 못 하여 컴포넌트가 렌더링 되지 않습니다. 그러나 새로고침을 하면 작성한 게시글이 정상적으로 렌더링됩니다. 네트워크와 redux 데브툴즈에는 액션들이 모두 정상적으로 작동하고 있음을 확인하였고, 콘솔을 확인해보니 아래와 같은 오류가 뜹니다. 위 오류는 비동기로 데이터를 받아오기 전에 먼저 render가 되서 발생하는 에러 임을 검색을 통해 확인하였습니다. 그래서 react suspense를 이용하여 해결해보려 했으나 해결하지 못 했습니다. 혹시 제가 해당 오류의 원인을 제대로 파악하지 못 하고 있는 걸까요? 알려주시면 감사하겠습니다.

  • react
  • redux
  • node.js
  • express
  • next.js
윤섭 댓글 2 좋아요 0 조회수 406

setValue가 함수가 아니라는 오류 발생

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

TailwindCss 적용하기 실습 중 발생한 문제입니다. setValue is not a function TypeError: setValue is not a function at handleChange ( http://localhost:3000/static/js/bundle.js:167:5 ) at HTMLUnknownElement.callCallback ( http://localhost:3000/static/js/bundle.js:11038:18 ) at Object.invokeGuardedCallbackDev ( http://localhost:3000/static/js/bundle.js:11082:20 ) at invokeGuardedCallback ( http://localhost:3000/static/js/bundle.js:11139:35 ) at invokeGuardedCallbackAndCatchFirstError ( http://localhost:3000/static/js/bundle.js:11153:29 ) at executeDispatch ( http://localhost:3000/static/js/bundle.js:15297:7 ) at processDispatchQueueItemsInOrder ( http://localhost:3000/static/js/bundle.js:15323:11 ) at processDispatchQueue ( http://localhost:3000/static/js/bundle.js:15334:9 ) at dispatchEventsForPlugins ( http://localhost:3000/static/js/bundle.js:15343:7 ) at http://localhost:3000/static/js/bundle.js:15503:16 이러한 오류가 발생하였습니다. 아래는 코드입니다. 지난 시간에서 딱히 바꾼게 없는데 오류의 원인을 잘 모르겠어서 질문드립니다. App.js import React, {useState} from "react"; import "./App.css"; import List from "./components/List"; import Form from "./components/Form" export default function App (){ const [todoData, setTodoData] = useState([]); const [value,setValue] = useState(""); const handleSubmit = (e) =>{ e.preventDefault(); // 전송시 페이지 새로고침 방지 함수 let newTodo = { id : Date.now(), title: value, completed : false }; // 새로운 할 일 데이터의 형성 setTodoData(prev => [...prev,newTodo] ) setValue("") // 원래 할 일에 새로운 할 일 데이터의 update 해주는 setState 함수 } const btnStyle = { color: "#fff", border: "none", padding : "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } return( <div className="container"> <div className='todoBlock'> <div className="title"> <h1>To do list</h1> </div> <h1 className='text-3xl font-bold underline'>Hello world!</h1> <List todoData= {todoData} setTodoData = {setTodoData}/> <Form handleSubmit = {handleSubmit} value ={value} setValue = {setValue}/> </div> </div> ); } list.js import React from 'react' export default function List({todoData , setTodoData}) { const btnStyle = { color: "#fff", border: "none", padding : "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } const handleClick = (id) => { let newTodoData = todoData.filter(data => data.id !== id) console.log('newTodoData',newTodoData); setTodoData(newTodoData); } const getStyle = (completed) => { return { padding : "10px", borderBottom: "1px #ccc solid", textDecoration: completed ? 'line-through' : 'none', } } const handleCompleteChange = (id) => { let newTodoData = todoData.map(data => { if (data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData); }; return ( <div> {todoData.map((data)=>( <div style = {getStyle(data.completed)} key = {data.id}> <input type = "checkbox" defaultChecked = {false} onChange = {() => handleCompleteChange(data.id)}/> {data.title} <button style = {btnStyle} onClick = {() => handleClick(data.id)}>X</button> </div> ))} </div> ) } form.js import React from 'react' export default function Form(handleSubmit,value,setValue) { const handleChange = (e) =>{ setValue(e.target.value); } return ( <form style = {{display:"flex"}} onSubmit = {handleSubmit}> <input type = "text" name = "value" style = {{flex: '10', padding :'5px'}} placeholder = "해야 할 일을 입력하세요." value ={value} onChange ={handleChange} /> <input type = "submit" value = "입력" className="btn" style ={{flex:'1'}} /> </form> ) }

  • react
  • redux
  • tdd
  • typescript
  • next.js
이성현 댓글 1 좋아요 0 조회수 674

훈훈한 자바스크립트 강의 문제점

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

appendchild강의에서 addEventListener 로 넘어갈 때, const KeyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); } }; 위 코드에서 const KeyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value) { createTodo(); } }; 로 아무런 설명없이 바뀌어 있네요. 이유를 설명해주세요. 이거 외에도 아무 부연설명없이, 코드가 바뀌어 있는 경우가 매우 많습니다. 수정해서 다시 올려주세요

  • react
  • node.js
  • seo
  • graphql
  • next.js
b18lue 댓글 2 좋아요 0 조회수 408

리액트기초 yarn 설치 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

*우분투안쓰고 윈도우로 이용중입니다. 질문1. 강의자료 보면서 따라하는 중인데요. 강의자료에 나온 화면과 다르게 저는 style.thirteen도 없고 삭제부분을 삭제하면 오류가 많습니다. 마찬가지로 첫번째 div인 container가 저는 애초에 존재하지않고 <>형식으로 되어있는데 따로 타이핑해서 만들어줘야하나요? 질문2: 버전: 강의자료에 나온것 외에도 전부 no하는게 맞나요? 잘따라가고 있는지 모르겠습니다 ㅠ 질문3: 저는 yarn dev를 해서 페이지에 접속하니 컴파일 실패가 뜨네요.. 질문4: 혹시나 powershell로 설치한게 문제인건가 싶어서 폴더를 다 삭제하고 재생성후 gitBash를 사용해봤는데 yarn설치 명령어가 안먹히네요 그리고 powershell에선 먹히던 기본 명령어들이 Gitbash에선 안먹힙니다 어디서 부터 잘못된건지 막혀서 진도를 못나가고 있습니다. 도와주십쇼.. + 실무에서 설치할때는 이런일이 발생하지 않으려면 신경써야 하는 것들이 어떤게 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
전현욱 댓글 2 좋아요 0 조회수 570

처음부터 막히는데 어떻게 해야하는 건지 자세한 답변 바랍니다.

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

https://nextjs.org/docs/getting-started/installation 공식문서, 아래 명령어 실행. npx create-next-app@latest 폴더명 적고 아래와 같이 선택하여 설치. ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias? … No 강좌 그대로 따라하려고 했는데 아래 캡쳐화면이 현재 제가 설치한 화면 입니다. 강의 화면 처럼 pages 이런 폴더들이 없는데, 대체 어떻게 하라는 건가요?? 사용하지 않는 코드를 모두 정리하라고 했는데, 정리해야하는 코드들이 없을 경우 어떻게 처리를 해야 하는 지 상세한! 자세한! 답변 바랍니다.

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
이은혜 댓글 2 좋아요 1 조회수 851

로그아웃 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

로그아웃 버튼 클릭후에 setAccessToken을통해 accessToken이 공백으로 바뀌고 로그아웃 mutation 결과값 true 반환까지 확인되는데 쿠키의 refreshtoken 값이 사라지지않습니다ㅜㅜ 도와주세요

  • react
  • node.js
  • seo
  • graphql
  • next.js
dydtjq324 댓글 2 좋아요 0 조회수 527

D-Day강의 중에 오류가 있네요. 수정 좀 해줘요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

훈훈한 자바스크립트 강의 중에 D-Day 사이트 만들기 강의가 있는데, 설명 복잡한 건 그렇다 쳐도, 최종적으로 코드에 오류가 있더라고요. 새로 고침을 하게 되면 사이트 로컬 스토리지 에서, 데이터가 사라져 있는 걸 볼 수가 있어요. 해결 방법 알려주세요.

  • react
  • node.js
  • seo
  • graphql
  • next.js
b18lue 댓글 2 좋아요 0 조회수 375

실행안됨

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

위와 같이 실행이 안되고 저 상태로 계속 멈춰있습니다. 종료하고 다시해도 안되고, 삭제했다 다시 설치해도 안되고, 컴퓨터를 껐다 켜도, NPM을 업그레이드 시켜도 계속 저 창에서 멈춰있는 것만 반복하는데 뭐가 문제일까요?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
치치와 댓글 1 좋아요 1 조회수 496

getStaticPaths 질문

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

1. fallback:true 인 경우 npm run build 할때 정적 페이지를 생성하는게 아니라 외부사용자가 접근한 시점에 생성을해서 보여준다는 것인가요? 맞다면 npm build 시점에는 생성을 하나도 안한다는 건가요? 2. fallback: false 인 경우 npm run build 시에 getStaticPaths 에서 return한 path에 대한 페이지만 생성하는게 맞나요? 3. getStaticProps 안에서 fallback에 대한 처리는 fallback:true인 경우에만 처리하는거죠? (return { notFound: true } 같은것) 4. getStaticPaths는 path에 따른 페이지를 생성시켜주는 함수이니 동적 라우팅에만 사용하는 함수인가요? 5. 데이터가 자주 바뀌는 페이지도 이러한 방식을 적용가능한것 같은데 초기 페이지에 대해서 SSR과 SSG 중 하나의 선택지로 골라서 적용을 해야할것 같네요. 어떤것을 선택해야 하는지는 직접 성능을 측정해가면서 비교하는게 정확한가요? 아니면 강좌에서 말씀하신것 처럼 웬만하면 SSR를 지양하고 SSG를 적용하는쪽으로 가는게 좋은건가요? CSR, SSR, SSG 적용을 하는 판단기준이 잘 안서네요.

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
kenny 댓글 1 좋아요 1 조회수 494

UPDATE_BOARD 400error

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

useForm 이용해서 하고있는데 update_board를 할때 계속 try에서 catch(error)로 넘어가네요 ㅠ presenter.js import * as S from "./BoardWriter.styles"; export default function BoardWriteUI(props) { return ( <S.Wrapper onSubmit={props.isEdit? props.handleSubmit(props.onClickUpdate, props.onInValid) : props.handleSubmit(props.onValid, props.onInValid)}> <S.Title>{props.isEdit? "게시글 수정": "게시글 등록"}</S.Title> <S.WriterWrapper> <S.InputWrapper> <S.Label>작성자</S.Label> <S.Writer {...props.register("writer", { validate : (value) => value ? true:"작성자를 작성해주세요."} )} onChange={e => props.onChangeWriter(e)} type="text" placeholder="이름을 적어주세요."/> <S.Error>{props.errors.writer?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>비밀번호</S.Label> <S.Password {...props.register("password", { validate : (value) => value? true: "비밀번호를 작성해주세요."} )} onChange={e => props.onChangePassword(e)} type="password" placeholder="비밀번호를 작성해주세요." /> <S.Error>{props.errors.password?.message}</S.Error> </S.InputWrapper> </S.WriterWrapper> <S.InputWrapper> <S.Label>제목</S.Label> <S.Subject {...props.register("title", { validate : (value) => value? true: "제목을 작성해주세요."} )} onChange = {e => props.onChangeTitle(e)} type="text" placeholder="제목을 작성해주세요." /> <S.Error>{props.errors.title?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>내용</S.Label> <S.Contents {...props.register("contents", { validate : (value) => value? true: "내용을 작성해주세요."} )} onChange={e => props.onChangeContents(e)} placeholder="내용을 작성해주세요." /> <S.Error>{props.errors.contents?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>주소</S.Label> <S.ZipcodeWrapper> <S.Zipcode {...props.register("boardAddress")} placeholder="07250" /> <S.SearchButton>우편번호 검색</S.SearchButton> </S.ZipcodeWrapper> <S.Address /> <S.Address /> </S.InputWrapper> <S.InputWrapper> <S.Label>유튜브</S.Label> <S.Youtube {...props.register("youtubeUrl")} placeholder="링크를 복사해주세요." /> </S.InputWrapper> <S.ImageWrapper> <S.Label>사진첨부</S.Label> <S.UploadButton>+</S.UploadButton> <S.UploadButton>+</S.UploadButton> <S.UploadButton>+</S.UploadButton> </S.ImageWrapper> <S.OptionWrapper> <S.Label>메인설정</S.Label> <S.RadioButton type="radio" id="youtube" name="radio-button" /> <S.RadioLabel htmlFor="youtube">유튜브</S.RadioLabel> <S.RadioButton type="radio" id="image" name="radio-button" /> <S.RadioLabel htmlFor="image">사진</S.RadioLabel> </S.OptionWrapper> <S.ButtonWrapper> <S.SubmitButton isActive={props.isActive} type="submit">{props.isEdit? "수정하기": "등록하기"}</S.SubmitButton> </S.ButtonWrapper> </S.Wrapper> ); } quires.js import { gql } from '@apollo/client' export const CREATE_BOARD = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput : $createBoardInput){ _id } } ` export const UPDATE_BOARD = gql` mutation updateBoard($updateBoardInput: updateBoardInput!, $password: String, $boardId: ID!) { updateBoard(updateBoardInput: $updateBoardInput, password: $password, boardId: $boardId) { _id } } ` container.js import { useState } from 'react' import { useForm } from 'react-hook-form'; import { useRouter } from 'next/router'; import { useMutation } from '@apollo/client' import BoardWriteUI from './BoardWriter.presenter'; import { CREATE_BOARD, UPDATE_BOARD } from './BoardWriter.queries'; export default function BoardsWriteContainer(props) { const router = useRouter() const [isActive, setIsActive] = useState(true) const [createBoard] = useMutation(CREATE_BOARD) const [updateBoard] = useMutation(UPDATE_BOARD) const { register, watch, handleSubmit, formState: { errors } } = useForm(); const onChangeWriter = (e) => { e.target.value && watch("password") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangePassword = (e) => { e.target.value && watch("writer") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangeTitle = (e) => { e.target.value && watch("password") && watch("writer") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangeContents = (e) => { e.target.value && watch("password") && watch("title") && watch("writer") ? setIsActive(false) : setIsActive(true) } const onValid = async (data) => { try { const result = await createBoard({ variables: { createBoardInput: { writer: data.writer, title: data.title, password: data.password, contents: data.contents, } } }) console.log(result.data.createBoard._id) alert("게시물이 정상적으로 등록되었습니다.") router.push(`/boards/${result.data.createBoard._id}`) } catch(error) { alert(error.message) } } const onInValid = (error) => { console.log("에러입니다", error) } const onClickUpdate = async (data) => { try { const result = await updateBoard({ variables: { updateBoardInput : { title: data.title, contents: data.contents }, password : data.password, boardId : router.query.boardid, } }) console.log(result) // router.push(`/boards/${router.query.boadid}`) } catch(error) { console.log(error) } } return <BoardWriteUI onValid = {onValid} oninValid = {onInValid} register = {register} handleSubmit = {handleSubmit} errors = {errors} onChangeContents = {onChangeContents} onChangeTitle = {onChangeTitle} onChangePassword = {onChangePassword} onChangeWriter = {onChangeWriter} onClickUpdate = {onClickUpdate} isActive={isActive} isEdit={props.isEdit} /> }

  • react
  • node.js
  • seo
  • graphql
  • next.js
김무연 댓글 1 좋아요 0 조회수 432

fetchUserLoggedIn가 안됩니다 도와주세요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강의를 따라 순서대로 따라했는데 마지막에 cannot read property _id 오류가뜹니다 ㅠㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
dydtjq324 댓글 2 좋아요 0 조회수 411

안녕하세요 강사님 질문드립니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

현재 저는 국비학원을 마치고 취업을 준비중 현실을 맞닥들이고 다시 공부를 시작하였습니다. 국비는java를 기반으로 수료했지만 저의 적성이 백엔드보다는 프론트가 맞을 것 같아 본 강의를 구매했습니다. 기본적인 html,css는 이해하고있지만 js는 다소 약한 부분이있습니다. 강의를 들으려고 보니 새로 시작한 사람은 새셕23부터 시작하면 된다고 설명이 되어있길래 살펴봤더니 바로 리액트부터 시작하는 것 같았더라구요. js가 다소 약하더라도 따라가는데 어려움이 없을지 질문 드립니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
simple 댓글 1 좋아요 0 조회수 559

인기 태그

인프런 TOP Writers

주간 인기글