inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

로그아웃이 작동하지 않아서 질문드립니다.

해결됨

[리뉴얼] 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; 로그인과 회원가입은 제대로 작동하는데 로그아웃만 되지 않습니다.

  • react
  • redux
  • node.js
  • express
  • next.js
ㅇㅅㅇ? 댓글 1 좋아요 0 조회수 613

value에 관해서 궁금합니다.

해결됨

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

안녕하세요 선생님. :-) 코멘트 복습하며 궁금증이 생겨서 질문 드립니다. 리팩토링 하면서 느낀건데 , 이 이미지의 밑줄이 그어진 태그들 없이 이벤트핸들러만 있어도 기능구현에 무리가 없던데 이 태그들이 꼭 있어야 하는건가요 ?? 있어야 한다면 이유를 알고 싶습니다. 두 번째는 antd에서 rate를 가져올 때 궁금증입니다. 여기서 제가 궁금한것은 value={el.rating}이 부분인데, value값에 el.rating을 주지 않으면 색칠이 없는 별만 뜨더라구요. 그래서 이모션을 없애고 <div>{el.rating}<div>로 찍으니 숫자가 나오는 걸 알 수 있었습니다. 그럼 결국 댓글 작성할 때 클릭한 별은 숫자로 뮤테이션이 날라가고 조회할 때 그 숫자를 value에 넣어줘야 별 모양이 제대로 뜬다는 것을 확인했습니다. 그렇다면 이건 antd 개발자들이 독자적으로 설정을 이렇게 한건가요 ?? 아니면 일반적으로 이런 모양들은 value에 값을 넣어줘야 정상적으로 뜨는건가요 ??? 미리 답변 감사합니다 선생님 !!! ^_^

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

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에서 문제가 되는 것인가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
유진환 댓글 1 좋아요 0 조회수 438

AWS 배포 후 cors 문제

미해결

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

AWS 배포 완료 하였는데 CORS 문제가 발생했습니다. .env.production 파일 모두 정상적으로 URL 반영하였는데 왜 안 될까요? 어디를 확인해봐야 할까요? Github 코드 주소 https://github.com/zzinbbang/react-reddit-main .env.production 설정 에러 상황

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

$를 사용하면 정상적으로 작동하지 않습니다

해결됨

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

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
  • node.js
  • seo
  • graphql
  • next.js
kyb1208tg 댓글 1 좋아요 1 조회수 290

errno -4094 의 unknown error 가 종종 뜹니다

미해결

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

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 로 실행시키면 정상동작하기는 합니다만 혹시 에러가 발생하지 않도록 하는 방법이 있을가 해서 문의 남겨봅니다.

  • react
  • redux
  • node.js
  • express
  • next.js
카이 댓글 2 좋아요 0 조회수 1796

cors 에러

미해결

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

안녕하세요. 회원가입 페이지 기능 생성중인데 서버 쪽에서 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가 제대로 안먹히는고 있는건가요?

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

swr 질문입니다!

해결됨

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

4:25 쯤 설명하시는 부분인데요 새로운 매장 데이터가 들어왔을때 아래 사진의 20번째 줄이 실행되고, 20번째 줄이 실행되므로써, 아래 사진인 useStores.ts 의 8번째 줄이 실행되어 새로운 매장 데이터가 전역으로 저장되는거라고 이해를 했는데 제가 이해한게 맞는지 궁금합니다!

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

크롬에서 카카오맵이 정상적으로 그려지지 않습니다.

해결됨

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

안녕하세요 강사님! 강의 정말 잘 보고 있습니다. 카카오맵 지도를 띄우는 코드를 작성하는 실습을 하면서 크롬으로 확인을 했는데요, 처음에는 아래의 오류가 떠서 구글링 후에 useEffect(() => { window.kakao.maps.load(() => { const container = document.getElementById("map"); // 지도를 담을 영역의 DOM 레퍼런스 const options = { // 지도를 생성할 때 필요한 기본 옵션 center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표. level: 3, // 지도의 레벨(확대, 축소 정도) }; const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴 }); }, []); 위의 코드처럼 kakao의 map 객체가 로드되면 실행되게끔 수정을 했습니다. 그 후부터는 위의 오류가 뜨지는 않았지만 한참동안 브라우저 상단 탭에 로딩되는 상태가 보이다가 지도는 결국 보이지 않더라고요. 개발자도구의 네트워크 탭을 보면 아래와 같이 kakao.js 를 불러오지 못했다고 오류가 나오는데, 로딩 중에 크롬 콘솔에 window.kakao 를 쳐보면 정상적으로 찍힙니다. 크롬에서 브라우저 캐시를 삭제하는 방법, 시크릿창에서 해보는 방법, 새 api 키를 발급하는 방법 등등 해보았지만 모두 안됐는데 사파리에서 실행해보니 곧잘 되는걸 확인했습니다... 코드 상의 문제는 아닌 것 같은데 왜 크롬에서만 안되는 건지 혹시 알 수 있을까요..? 구글링하다가 저와 같은 이슈를 겪은 분의 글을 발견했는데, 이슈가 해결은 안됐지만 일단 첨부합니다. https://devtalk.kakao.com/t/kakao-maps-load-net-err-internet-disconnected/125422/4 위의 글 답변에서는 크롬 확장프로그램 문제일 가능성이 있다고 나오는데, 딱히 문제가 될 것 같은 확장프로그램도 없어서요.. 답변 부탁드립니다! 감사합니다!

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

배포하고 나서는 visual studio code에서는 실행못하나요?

미해결

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. AWS로 배포하고나면 visual studio code에서 npm으로 로컬실행을 할 수 없을 까여?

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

<코멘트달기 section> boardId 오류

해결됨

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

import { useState } from "react"; import CommentPageUi from "./BoardCommentWrite.presenter"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT } from "./BoardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/BoardCommentList.queries"; export default function CommentPage () { const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [contents, setContents] = useState(""); const [createBoardComment] = useMutation(CREATE_BOARD_COMMENT) const router = useRouter; const onChangeWriter = (event) => { setWriter(event.target.value) } const onChangePassword = (event) => { setPassword(event.target.value) } const onChangeContents = (event) => { setContents(event.target.value) } const onClickSubmit =async() => { try { await createBoardComment ({ variables : { createBoardCommentInput: { writer : writer, password : password, contents : contents, rating: 0, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId : router.query.boardId}, }, ], }); } catch (error) { alert(error.message); } alert("정상적으로 댓글이 달렸습니다.") } return ( <CommentPageUi onChangeWriter = {onChangeWriter} onChangePassword ={onChangePassword} onChangeContents ={onChangeContents} onClickSubmit = {onClickSubmit} contents={contents} > </CommentPageUi> ) } comment write import { gql } from "@apollo/client"; export const CREATE_BOARD_COMMENT = gql` mutation createBoardComment( $createBoardCommentInput: CreateBoardCommentInput! $boardId: ID! ) { createBoardComment( createBoardCommentInput: $createBoardCommentInput boardId: $boardId ) { _id } } `; comment write query import { gql } from "@apollo/client"; export const FETCH_BOARD_COMMENTS = gql` query fetchBoardComments($boardId: ID!) { fetchBoardComments(boardId: $boardId) { _id writer contents createdAt rating } } `; comment list query import { useQuery } from "@apollo/client" import { FETCH_BOARD_COMMENTS } from "./BoardCommentList.queries" import { useRouter } from "next/router" import BoardCommentListUI from "./BoardCommentList.presenter" export default function BoardCommentList() { const router = useRouter() const {data} = useQuery(FETCH_BOARD_COMMENTS, { variables: {boardId : router.query.boardId} }) return ( <BoardCommentListUI data={data} /> ) } comment list 폴더명 에러1 에러2 둘 다 boardId와 관련있고, 내용으로 봐서는 boardId에 값이 없는 것 같은데, 코드를 아무리 봐도 문제점을 모르겠네요.. 문제가 뭘까요 ???

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

posts.js 라우터 파일에 문제가 생겼습니다

해결됨

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

const express = require('express'); const { User, Post, Image, Comment } = require('../models'); const router = express.Router(); console.log(Post); // undefined router.get('/', async (req, res, next) => { try { const posts = await Post.findAll({ limit: 10, order: [ ['createdAt', 'DESC'], [Comment, 'createdAt', 'DESC'], ], include: [{ model: User, attributes: ['id', 'nickname'], }, { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'], }], }, { model: User, as: 'Likers', attributes: ['id'], }], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router; posts.js const express = require('express'); const cors = require('cors'); const passport = require('passport'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const dotenv = require('dotenv'); const morgan = require('morgan'); const db = require('./models'); const passportConfig = require('./passport'); const postRouter = require('./routes/post'); const userRouter = require('./routes/user'); const postsRouter = require('./routes/posts'); dotenv.config(); db.sequelize.sync() .then(() => { console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); const app = express(); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cors({ origin: true, credentials: true, })); 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(morgan('dev')); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.listen(3065, () => { console.log('3065포트 서버실행중'); }); app.js (node:4192) Warning: Accessing non-existent property 'User' of module exports inside circular dependency (node:4192) Warning: Accessing non-existent property 'Post' of module exports inside circular dependency // 생략 영상보면서 코딩중에 위 문구와 함께 ../models에서 require한 것이 존재하지 않는 문제가 발생했습니다. const { Post } = require('../models') console.log(Post) 출력결과 undefined 입니다 이 문제가 posts.js 파일에서만 발생했습니다. (user.js, post.js는 정상) 그래서 postss.js 라는 이름이 다르고 코드만 옮긴 파일을 만들어서 다시 시도해보았습니다. (rename시 module not found 에러 발생) 그랬더니 ../models에서 require 한것이 존재했습니다. 근데 요청시 라우터(method: get, url: /posts)의 미들웨어가 실행이 안되는 문제가 있었습니다. 상태코드는 300 Multiple Choices 였습니다 이번에는 url를 바꿔서 요청을 보냈습니다 ex) /posts/test 그랬더니 성공했습니다. 왜 이런 현상이 발생했는지 어떻게 해결할 수 있는지 모르겠어서 질문남깁니다!

  • react
  • redux
  • node.js
  • express
  • next.js
박규석 댓글 2 좋아요 0 조회수 468

안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.

해결됨

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

<li className={styles.menu} key={menu.name}> <span className={styles.name}>{menu.name}</span> <span className={styles.price}>{menu.price}</span> </li> 위 코드는 DetailContent.tsx 코드의 일부입니다. 위 코드에서 span 태그의 경우 inline 태그이기 때문에 부모 태그인 li 태그에 display: flex 속성을 적용해도 의미가 없는 것이 당연하다고 생각했습니다. 그런데 위 코드에서는 inline 태그인 span 태그가 display: flex에 영향을 받고 있더라구요. 혹시 제가 잘못 이해하는 걸까요? 혹은 다른 이유가 있는걸까요?? (Next.js 관련 질문이 아니라 너무 지엽적인 질문이라 죄송합니다...!)

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

수정하기 뮤테이션

해결됨

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

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

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

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

해결됨

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

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

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

naver로고 important 값 주는 이유

해결됨

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

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

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

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

해결됨

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

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

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

useEffect clean up function 내부 코드의 역할

해결됨

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

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

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

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

해결됨

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

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

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

중고마켓 카카오맵 질문

해결됨

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

중고마켓 구현 중에 계속 구글링해도 해결이 안돼서 질문드립니다ㅠ 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 조회수 576

인기 태그

인프런 TOP Writers

주간 인기글