inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

수정하기 뮤테이션

해결됨

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

안녕하세요 선생님 ! 하나 궁금한 점이 있어서 질문 드려요. 게시물 수정할 때, 기존에 입력한 값이 사라지고 수정한 내용만 남는 문제가 발생해, 수정하기 버튼을 눌렀을 때 기존 값도 남아있고, 수정한 내용도 체인지 돼서 나오게끔 하는 부분을 공부중입니다. (이미지는 강의내용 캡쳐입니다) 궁금한 게, 이렇게 코드를 적용하고 게시물을 수정하면 바뀐 내용들만 뮤테이션이 날라간다는 건 이해 하겠는데 기존에 입력한 값들이 안 사라지고 출력되는 건 이해가 쉽지 않네요.. !! 어차피 writer,title,contents 스테이트는 수정된 게 없으니 빈 값 아닌가요 ? 빈 값인데 초기값이 나온다는 게 ..ㅠㅠ 미리 답변 감사합니다 선생님.

  • react
  • node.js
  • seo
  • graphql
  • next.js
주철민 댓글 1 좋아요 0 조회수 341

과제부분에 조건2에 대한 질문이요

해결됨

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

freeboard_frontend 랜딩페이지를 만들어보세요 ( 접속 시 첫 화면 ) 라고 나와있는데 이 조건이 무엇을 의미하나요?

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

naver로고 important 값 주는 이유

해결됨

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

안녕하세요. 강의 잘 듣고 있습니다. css가 중요한 것은 아니지만 important가 없으면 안되는 이유가 궁금해서 질문드립니다. naver 로고에 important 값을 주는 이유는 naver 에서 자체적으로 주는 css 값 때문이라고 생각했는데, 제가 생각한 게 맞을까요?

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

포트폴리오 깃 클론 주소를 못찾겠습니다.

해결됨

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

피그마 주소밖에 확인이 안되는데, 어디에 나와있는건가요..??

  • react
  • node.js
  • seo
  • graphql
  • next.js
Joy Lee 댓글 1 좋아요 0 조회수 281

useEffect clean up function 내부 코드의 역할

해결됨

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

return () => { marker?.setMap(null) } 해당 코드는 어떤 역할을 하는건가요??

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
박아무개 댓글 1 좋아요 2 조회수 339

강의노트 링크 못찾겠습니다

해결됨

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

안녕하세요 선생님 강의노트 다운받고 싶은데 링크를 못찾겠습니다. 부탁드립니다.

  • react
  • redux
  • node.js
  • express
  • next.js
카이 댓글 1 좋아요 1 조회수 256

중고마켓 카카오맵 질문

해결됨

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

중고마켓 구현 중에 계속 구글링해도 해결이 안돼서 질문드립니다ㅠ Header에 판매하기 Link가 있고, 클릭하면 /product/new 로 이동하게 했습니다 주소창에 직접 주소를 입력해서 들어가면 에러가 안뜨는데, 버튼을 클릭해서 들어가면 TypeError: window.kakao.maps.LatLng is not a constructor 에러가 발생하는데 원인이 뭘까요 ....?? Header <Link href="/product/new"> <a> <S.HeaderIcon> 판매하기 </S.HeaderIcon> </a> </Link> BoardWrite declare const window: typeof globalThis & { kakao: any } export default function BoardWrite(props: IBoardWriteProps): JSX.Element { const router = useRouter() const { setValue, trigger } = useForm({ mode: "onChange", }) useEffect(() => { const script = document.createElement("script") script.src = "https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=앱키" document.head.appendChild(script) script.onload = () => { window.kakao.maps.load(function () { const container = document.getElementById("map") // 지도를 담을 영역의 DOM 레퍼런스 const options = { // 지도를 생성할 때 필요한 기본 옵션 center: new window.kakao.maps.LatLng(37.462381, 126.813369), // 지도의 중심좌표. level: 3, // 지도의 레벨(확대, 축소 정도) } const map = new window.kakao.maps.Map(container, options) // 지도 생성 및 객체 리턴 }) } }, [])

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

Next 13으로 작업 중 Login 실행에서 경고를 받았습니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

Layout.tsx의 return을 return ( <html lang="en"> <AuthProvider> <body>{children}</body> </AuthProvider> </html> ) 위와 같이 수정했을 때에, 경고가 Login을 실행했을 때 발생했습니다. 무시하면 안 되는 경고인것 같아 어떻게 해결하는지 궁금하여 질문 남깁니다. 경고 내용: Warning: Cannot update a component (`Router`) while rendering a different component (`Login`). To locate the bad setState() call inside Login , follow the stack trace as described in https://reactjs.org/link/setstate-in-render

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
지말미 댓글 1 좋아요 0 조회수 563

useRef 사용이유

해결됨

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

강의에 useRef 사용 이유에 대해선 안나오는거 같은데 아래 두 코드는 왜 사용된건지 설명해주실 수 있나요?? const mapRef = useRef<NaverMap | null>(null) mapRef.current = map

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
박아무개 댓글 1 좋아요 1 조회수 492

강의 ver1, ver2 뭘듣고 있는지 어떻게 알수있나요?

해결됨

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

강의 ver1, ver2 뭘듣고 있는지 어떻게 알수있나요? ver1, ver2 표시가 안되어있어서요! html, css, javascript 는 노션 링크 따로있나요?

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

onChangePasswordCheck [password] 인자 문의

미해결

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

안녕하세요 zerocho 님 아래 코드에서 const onChangePasswordCheck = useCallback( (e) => { console.log("onChangePasswordCheck1 :" + e.target.value); console.log("onChangePasswordCheck2:" + passwordCheck); //전 값을 참조함 setPasswordError(e.target.value !== password); setPasswordCheck(e.target.value); }, [password] //passwordCheck 로 바꾸어도 전 값을 참조함 ); 1.[password] 부분을 [] 바꾸어도 정상 작동 하는 것 같구요 [] 의미는 최초 render 시에만 함수를 생성한다는 의미로 알고 있습니다만... 2.[passwordCheck]로 바꾸면... [웹 게임을 만들며 배우는 React/6-5. useMemo와 useCallback] 강의에 의하면 onChangePasswordCheck 안에서 passwordCheck 가 정상 참조 되어야 할 것 같은데.. 이전 값으로 참조 되는 것 같습니다. 2번째 인자 작동 방식이 정확히 이해 되지 않습니다. 다시 한번 설명 부탁 드려도 될까요? (참고자료나, zerocho님, 다른 강의 부분 알려 주시면 직접 찾아 보겠습니다.) 감사합니다.

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

깃주소

해결됨

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

깃주소 알려주세요, 뭐 다 들어야 깃 주소를 아는건지 왜 찾을수가 없나요

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

중고마켓 게시물 Pick

해결됨

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

혹시 중고마켓에서 게시글들어갈때 해당 게시글을 찜했는지 알 수 있는 API가 있을까여?

  • react
  • node.js
  • seo
  • graphql
  • next.js
병아리222 댓글 2 좋아요 0 조회수 330

이미지 못찾겠네요

해결됨

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

강력한 css 섹션 5 단위심화 강의에서 고슴도치 이미지 파일을 자료에 올려놨다고 하는데 못찾겠어요 ㅡㅡ... 뭔 자료를 이렇게 찾기 힘들게 올려논건지? 장난하나.. 이미지 찾다가 시간 다갔네

  • react
  • node.js
  • seo
  • graphql
  • next.js
부레옥잠 댓글 1 좋아요 0 조회수 378

serverState undefine 출력

미해결

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

import { configureStore } from "@reduxjs/toolkit"; import { createWrapper } from "next-redux-wrapper"; import reducer from "../reducers"; function getServerState() { return typeof document !== "undefined" ? JSON.parse(document.querySelector("#__NEXT_DATA__").textContent)?.props .pageProps.initialState : undefined; } const serverState = getServerState(); console.log("serverState", serverState); const makeStore = () => configureStore({ reducer, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware(), preloadedState: serverState, // SSR }); const wrapper = createWrapper(makeStore); export default wrapper; ssr 문제를 계속 해결해보고 있는데 지금 보니 console.log()에 serverState가 undefined가 나옵니다 이게 혹시 문제의 원인인가 싶어서 그런데 serverState는 무었이고 왜 undefined가 나오나요?

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

DB만 도커 컨테이너로 올리는 이유?

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요 선생님, 좋은 강의 항상 감사드립니다^^ 현재 이 강의에서 DB를 Docker Container 안에 올렸는데, 이 이유가 궁금합니다. 구글링 했을 때는 DB가 안전하게 관리되는 것이 최우선이기 때문에, 현업에서는 On-premise 환경에서 구축한다는데, 현재 저희는 빠르게 배포하는 것이 목적이기 때문에 docker 환경에 구성하는 것일까요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
miniapp 댓글 1 좋아요 0 조회수 697

시작 할때 0-2 branch 에서 시작 하는게 맞나요?

해결됨

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 빈 폴더에서 npx create-next-app@latest --typescript 로 시작 해야 하는지 아니면 받은 소스의 0-2 브랜치 에서 npx create-next-app@latest --typescript 로 시작 하는게 맞는지 어떤건가요?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
김석영 댓글 1 좋아요 1 조회수 312

useEffect의 clean up 함수를 실행해야 하는 이유가 무엇일까요??

해결됨

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

안녕하세요 강사님! 유익한 강의 아주 잘 듣고 있습니다. 혹시 컴포넌트 unmount 시 맵 객체를 destroy 해야 하는 이유를 알 수 있을까요? destroy를 하지 않아도 코드 동작에는 큰 문제가 없는 것 같습니다. 혹시 메모리 상의 문제나 다른 문제가 있어서 이 코드를 작성해야 하는걸까요?? next/script로 네이버 지도 불러오기 강의 (8:40) useEffect(() => { return () => { mapRef.current?.destroy(); } }) 예를 들면, setInterval의 경우 Unmount시 clearInterval을 하지 않을 경우 계속 백그라운드에서 실행되기 때문에 clearInterval을 해줘야한다고 바로 이해가 됐습니다. 하지만 위의 경우 꼭 맵 객체를 destroy 해야하는걸까요??

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

redux toolkit ssr 질문

미해결

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

계속 똑같은 부분을 질문하고있는데 혹시 똑같은 오류가 발생하고 이 부분 코드는 양이 적고 코드 양이 적어서 오류의 원인을 아는데 용이 할꺼 같아 질문드립니다 pages/about.js import React from "react"; import { useSelector } from "react-redux"; import Head from "next/head"; import { Avatar, Card } from "antd"; import AppLayout from "../components/AppLayout"; import wrapper from "../store/configureStore"; import { loadUserInfo } from "../reducers/user"; const Profile = () => { const { userInfo } = useSelector((state) => state.user); return ( <AppLayout> <Head> <title>ZeroCho | NodeBird</title> </Head> {userInfo ? ( <Card actions={[ <div key="twit"> 짹짹 <br /> {userInfo.Posts.length} </div>, <div key="following"> 팔로잉 <br /> {userInfo.Followings.length} </div>, <div key="follower"> 팔로워 <br /> {userInfo.Followers.length} </div>, ]} > <Card.Meta avatar={<Avatar>{userInfo.nickname[0]}</Avatar>} title={userInfo.nickname} description="노드버드 매니아" /> </Card> ) : null} </AppLayout> ); }; export const getStaticProps = wrapper.getStaticProps( (store) => async ({ req }) => { console.log("getStaticProps"); await store.dispatch(loadUserInfo(1)); } ); export default Profile; reducers/user.js export const loadUserInfo = createAsyncThunk( "/user/LoadUserInfo", async (data) => { const response = await axios.get(`/user/${data}`, data); return response.data; } ); const userSlice = createSlice({ name: "user", initialState, reducers: { addPostToMe(draft, action) { // 값을 하나만 전달해서 값이 바로 payload에 저장이된다 // 내가 만든 포스트를 me state에 저장하는 reducer draft.me.Posts.unshift({ id: action.payload }); }, removePostOfMe(draft, action) { draft.me.Posts = draft.me.Posts.filter((v) => v.id !== action.payload); }, }, // 외부에서 action을 만든것은 extraReducers로 가져와서 사용한다 주로 createAsyncThunk로 action을 만들 때 사용한다 extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.user, })) // 다른유저정보 가져오는 리듀서 .addCase(loadUserInfo.pending, (state, action) => { state.loadUserInfoLoading = true; state.loadUserInfoError = null; state.loadUserInfoDone = false; }) .addCase(loadUserInfo.fulfilled, (state, action) => { state.loadUserInfoLoading = false; state.me = action.payload; state.loadUserInfoDone = true; }) .addCase(loadUserInfo.rejected, (state, action) => { state.loadUserInfoLoading = false; state.loadUserInfoError = action.error; }) .addDefaultCase((state) => state), }); 이런 코드인데 // 다른유저정보 가져오는 리듀서 .addCase(loadUserInfo.pending, (state, action) => { state.loadUserInfoLoading = true; state.loadUserInfoError = null; state.loadUserInfoDone = false; }) .addCase(loadUserInfo.fulfilled, (state, action) => { state.loadUserInfoLoading = false; state.me = action.payload; state.loadUserInfoDone = true; }) .addCase(loadUserInfo.rejected, (state, action) => { state.loadUserInfoLoading = false; state.loadUserInfoError = action.error; }) 제가 이것저것 하다가 알게된거 action에 이부분을 전부 주석처리하게 되면 에러가 안난다는 겁니다 그래서 결정적으로 initalstate에 있는 변수들을 변경하는 과정이 브라우저의 정보와 서버의 정보를 다르게만드는 일을 하는것 같은데 혹시 의심가시는거 있으신가요?

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

노션 강의자료

해결됨

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

노션에 있는 자료들이랑 실제 강의에서 쓰이는 자료들이랑 차이가 좀 있네요. 강의에 들어있는 내용이 다 들어있는 것도 아니고요... 혹시 추후에 보강되거나 강의에 나오는 자료가 제공되진 않을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
이진호남선 댓글 1 좋아요 0 조회수 521

인기 태그

인프런 TOP Writers

주간 인기글