176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://backend-practice.codebootcamp.co.kr/graphql URL에 직접 접속하여 로그인 mutation 쿼리를 직접 실행하며 테스트 하고 싶어서 진행 중인데요, restoreAccessToken 쿼리에 대한 의문이 생겼습니다. 제가 잘못 사용한건지 작동이 되질 않아서 몇 시간 동안 삽질하다가 문의드립니다. 제가 알기로 restoreAccessToken 쿼리는 accessToken이 만료된 경우 refreshToken을 통해 accessToken을 새로 발급해주는 것으로 알고 있습니다. 그래서 우선은 테스트로 로그인 쿼리를 날려서 만료되지 않은 accessToken을 받고 복사한 뒤, 위와 같이 쿼리를 작성하고, { "authorization": "Bearer [accessToken값]" } 이러한 방식으로 헤더에 직접 입력 후 request를 날렸습니다. 그런데 아래와 같은 에러 문구가 뜹니다. 토큰이 제공되어야 한다는 에러 메시지에 제가 뭔가 설정을 잘못했나? 싶어서 accessToken을 필요로 하는 fetchUserLoggedIn 쿼리에 요청을 날려보니 잘 작동합니다. 하지만 restoreAccessToken 은 똑같이 헤더 설정을 하고 요청을 보내도 jwt must be provided 와 같은 메시지만 계속 나옵니다. 그리고 다음으로 만료된 토큰을 넣어봤습니다. loginUserExample 쿼리를 통해 만료된 토큰을 만들고 넣어서 요청을 보내니까 Context creation failed: 토큰 만료 와 같은 메시지가 나옵니다. restoreAccessToken 이건 어떻게 사용하는 쿼리인가요? 제가 잘못 사용하고 있는 걸까요..?
react node.js seo graphql next.js
FRONTEER
2023-05-17T15:59:40.592Z
댓글 1
좋아요 0
조회수 273
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. fetchUseditemsIPicked 의 search 공백인 상태로는 정상 조회가 되는데 값을 넣으면 아래와 같은 에러가 발생합니다. 에러 원인과 해결방법 부탁드립니다! 감사합니다.
react node.js seo graphql next.js
용준
2023-05-17T15:21:40.816Z
댓글 1
좋아요 0
조회수 361
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 강의를 들으며 신세계를 느끼는 중인 학생입니다. 다름이 아니고 혹시 퀴즈섹션 보면 마지막에 만들 수 있게 피그마제시해주는걸로 아는데, 혹시 답지라면 좀 이상하긴 하지만, 코드를 볼 수 있는 그런 자료들은 따로 없나요? 깃헙이나 등등...
react node.js seo graphql next.js
조충범
2023-05-17T14:56:21.408Z
댓글 1
좋아요 0
조회수 527
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
제가 강박이 있어서 피그마 있는거 그대로 픽셀따라가면서 하려고 노력중입니다. 그런데 간격이라든지 몇몇군데는 상세하게 잘 보이지 않더군요. 그래서 드리는 질문이 피그마를 참조하면서 전반적인 틀만 수용하고 픽셀이나 % 같은거는 제 임의대로 해도 되는지요? 만약 그렇지 않다면 혹시 피그마 내에서 간격이나 픽셀 하나하나를 확인하는 방법이 있나요? 가령 강의에서 wrapper__left의 height 값이 472px라고 알려주셨는데 피그마에서는 이 값을 확인할 수 없어서 계속 찾다찾다 답답해서 이렇게 질문드립니다. 아무쪼록 읽어주셔서 감사합니다.
react node.js seo graphql next.js
2023-05-17T14:26:15.319Z
댓글 1
좋아요 0
조회수 3444
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 현재 마이페이지의 판매중상품 페이지네이션을 구현중입니다. fetchUseditemsISold 를 하면 아래와 같이 상당수의 판매중인 중고상품이 조회되는데 fetchUseditemsCountISold 를 하면 0개가 조회됩니다. 동일한 Authorization으로 조회하였는데 원인이 무엇일까요? 혹 다른 api를 사용하여 갯수를 조회해야하나요? 감사합니다.
react node.js seo graphql next.js
용준
2023-05-17T12:13:08.999Z
댓글 1
좋아요 0
조회수 430
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업들으면서 만든 포트폴리오는 배포 할 수가 없나요 ?
react node.js seo graphql next.js
정재민
2023-05-17T10:28:31.138Z
댓글 1
좋아요 0
조회수 407
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
const stores = (await import('../public/stores.json')).default; 라고 next api routes로 변경전에 json 파일을 가져오는데, '.default' 를 붙이는 이유가 있을까요? 정확히 무슨 의미인지 알고 싶습니다.
seo next.js vercel csr ssg ssr
poan1221
2023-05-17T07:44:20.118Z
댓글 1
좋아요 2
조회수 582
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의를 여러번 따라해봐도 이런 오류가 뜹니다ㅠ
react node.js seo graphql next.js
dydtjq324
2023-05-15T02:51:10.324Z
댓글 1
좋아요 0
조회수 930
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
학습 자료 버전 1 노션의 경우 포트폴리오 과제에서 어떤 내용을 구현해야하는지 섹션 별 소주제로 나와있어 강의 수강 전 직접 만들어본 후 포트폴리오 리뷰 강의를 들을 수 있는데 학습 자료 버전 2 노션은 링크만 제공되어 선행 작업에 어려움이 있습니다. 2023년 업데이트 버전의 경우에는 각 섹션 포트폴리오 리뷰에 대한 설명 어디서 확인 할 수 있나요? 학습 자료 버전1 노션을 함께 확인해야하나요?
cm-lee
2023-05-14T17:00:04.682Z
댓글 1
좋아요 0
조회수 292
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 수업잘듣고 있습니다. 수업을 듣다가 수업중에 사용하신 erd 작성툴이 무엇인지 궁금해졌습니다. 혹시 어떤 제품인지 여쭤봐도 될까요..?
react node.js postgresql docker typescript 클론코딩 next.js
jsfever
2023-05-14T07:48:07.778Z
댓글 1
좋아요 0
조회수 335
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
강의 보고 따라했는데 tailwind가 적용이 안되네요 뭐가 문제일까요? Hello world!에 밑줄이 그어져야 하는데 그대로예요. 다른분이 하신 질문보고 거기 답변달린 방법들 해봤는데 계속 해결이 안되네요.. 시도한 방법 tailwind.config.js 파일의 content 확인 터미널에서 pakage.json에 dependencies 최신버전으로 업그레이드하기 App.css 확인 npm run start했던거 껐다가 다시켜기 아래는 해당하는 파일들이예요. App.css에서 [Unknown at rule @tailwindcss (unknownAtRules)] 경고가 떴었어요 이게 문제일까요? 근데 저 오류로 검색해보면 죄다 그냥 경고 무시하기 설정방법만 나오던데 다른 해결방법이 있는건가요? tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } app.css @tailwind base; @tailwind components; @tailwind utilities; /*아래는 생략*/ 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(""); }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할 일 목록</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> ) }
react redux tdd typescript next.js 소프트웨어-테스트
Jin Park
2023-05-12T02:08:05.104Z
댓글 1
좋아요 0
조회수 10247
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님, Application > Cookies 에 sid가 front에만 저장이 안 되는 문제가 있습니다. sid가 back에는 저장이 됩니다. 제가 아직 쿠키와 세션 이해가 부족한 건지.. axios config에 뭔가 문제가 있는건지,,, 구글링 해봐도 별 거 안 나오고.. 제가 이미 다 한 거고... https://stackoverflow.com/questions/71036779/cookies-sent-from-backend-but-not-set-correctly-on-frontend https://stackoverflow.com/questions/72105765/axios-doesnt-create-a-cookie-even-though-set-cookie-header-is-there front: config/config.ts import axios from "axios"; import { backUrl } from "../../config/config"; axios.defaults.baseURL = backUrl; axios.defaults.withCredentials = true; const instance = axios.create({ baseURL: backUrl, // cors withCredentials: true, // cookie (user info) }); // instance.interceptors.request.use(function (instance) { // const kakao_authorization = localStorage.getItem("kakao_authorization"); // const Token = localStorage.getItem("Authorization"); // const Retoken = localStorage.getItem("refresh-Token"); // instance.headers["Authorization"] = Token; // instance.headers["refresh-Token"] = Retoken; // instance.headers["kakao_authorization"] = kakao_authorization; // return instance; // }); export default instance; front - Network 탭 front - Application > Cookies 탭 back: app.js const express = require('express'); const morgan = require('morgan'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); const userRouter = require('./routes/user'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const db = require('./models'); const passportConfig = require('./passport'); dotenv.config(); const app = express(); db.sequelize.sync() .then(()=>{ console.log('db 연결 성공'); }) .catch(console.error); passportConfig(); app.use(express.json()); // axios로 data보낼 때 app.use('/', express.static(path.join(__dirname, 'uploads'))); // multipart form data app.use(express.urlencoded({ extended: true })); // 일반 form 일 때에는 url encoded로 받음 if (process.env.NODE_ENV === 'production') { app.use(morgan('combined')); app.use(hpp()); app.use(helmet({ contentSecurityPolicy: false })); app.use(cors({ origin: 'http://shinyoungyou.com', credentials: true, })); } else { app.use(morgan('dev')); 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, cookie: { httpOnly: true, secure: false }, domain: process.env.NODE_ENV === 'production' && '.shinyoungyou.com' })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) => { res.send('Express + TypeScript Server'); }); app.post('/api/post', (req, res) => { res.send('this is post http method'); }); app.use("/user", userRouter); app.use("/post", postRouter); app.use("/posts", postsRouter); module.exports = app; back - Application > Cookies 탭
react redux node.js express next.js
신영 유
2023-05-11T02:32:40.082Z
댓글 11
좋아요 0
조회수 2763
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
<Link href={`/search/${storeName}`}>{`${idx + 1} ${storeName}`}</Link> 이렇게 만들고 링크된 페이지는 (href로 이동하는 페이지는) sass + css.module 로 스타일링 하고 있습니다 이 경우 사진과 같은 경고 메세지가 나옵니다. (링크를 hover 시 css 파일을 미리 가져오는데 사용되고잇지 않은 상태) https://nextjs.org/docs/pages/api-reference/components/link#if-the-child-is-a-tag 를 보고 <Link href={href} passHref legacyBehavior> <RedLink>{name}</RedLink> </Link> 와 같이 작성하엿으나 여전히 문제가 지속됩니다. 이 경고메세지의 해결방법을 알수있을까요? 비슷한 문제인건지 정확하게 확인은 안했지만 본 강의 마지막 커밋에서도 동일한 경고가 발생합니다.
seo next.js vercel csr ssg ssr
콩팥팥죽
2023-05-10T05:49:39.561Z
댓글 1
좋아요 1
조회수 507
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시물 등록 실습중이던 학생입니다. input 크기를 잡을 때 padding값을 주어서 크기를 잡고 있었는데 미묘하게 input 태그들 마다 가로길이가 다릅니다..ㅠㅠ(컴포넌트 분리한 상태입니다.) globals.css내부를 보니 *{box-sizing:border-box} 이 ,기재되어있는거같은데 실제로는 적용이 안되는거 같습니다. padding으로 크기를 잡는게 아닌건가요? 아니면 globals에 있는 스타일이 원래 적용이 안되는건가요? 따로 작업을 해주어야하는게 있을까요?
react node.js seo graphql next.js
임수진
2023-05-09T18:21:51.458Z
댓글 1
좋아요 0
조회수 587
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요, 로그인과 마이페이지를 구현하였고, 로그인 후에 router.push로 페이지 이동하고 거기서 다시 마이페이지를 눌렀을때 로그인이 안되었다고 hoc에서 걸립니다. 로그아웃도 마찬가지로 문제가 발생됩니다. 다만, 새로고침을 했을땐 정상적으로 작동이 잘 됩니다. fetchUser 받아올 때의 문제인건지 accessToken과 refreshToken에서의 api 문제인건지 도저히 혼자서 해결이 어려워 문의 남깁니다..
react node.js seo graphql next.js
wodndi0321
2023-05-09T15:50:59.341Z
댓글 1
좋아요 0
조회수 439
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요! models 구성하고, app.js 로 db import도 다 했는데, node app.js 실행하면 다음과 같은 에러 메세지가 뜹니다. Post.belongsToMany called with something that's not a subclass of Sequelize.Model models에서 user, hashtag export 가 잘못된거 같아서 다 확인했는데, 문제를 못찾았습니다. 어떤 부분이 잘 못된걸까요? 감사합니다.
react node.js express next.js
Spencer Kwon
2023-05-09T07:40:45.258Z
댓글 2
좋아요 0
조회수 514
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
이와 비슷한 문제가 많아서 참고해서 복붙도 해보면서 했는데도 해결되지 않아 질문 남깁니다. 로그인 버튼을 누르면 리덕스 데브툴에 이와 같이 나오고 saga가 연결이 되지 않는 거 같아요 (코드 첨부) sagas/index.js import { all, fork } from 'redux-saga/effects'; // import postSaga from './post'; import userSaga from './user'; export default function* rootSaga() { console.log('rootSaga') yield all([ fork(userSaga), // fork(postSaga), ]); } sagas/user.js import { all } from "axios"; import { delay, fork, put, takeLatest } from "redux-saga/effects"; import { LOG_IN_FAILURE, LOG_IN_REQUEST, LOG_IN_SUCCESS, LOG_OUT_FAILURE, LOG_OUT_REQUEST, LOG_OUT_SUCCESS } from "../reducers/user"; // function logInApi(data) { // // 비동기 처리 함수는 일반함수로 정의 // return axios.post("api/login", data); // } // function logOutApi() { // // 비동기 처리 함수는 일반함수로 정의 // return axios.post("api/login"); // } function* logIn(action) { console.log('login') try { console.log('saga logIn'); // const result = yield call(logInApi, action.data); //요청의 결과 yield delay(1000); yield put({ type: LOG_IN_SUCCESS, data: action.data, }); } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, data: err.response.data, }); } } function* logOut() { console.log('login') try { // const result = yield call(logOutApi); //요청의 결과 yield delay(1000); yield put({ type: LOG_OUT_SUCCESS, }); } catch (err) { console.error(err); yield put({ type: LOG_OUT_FAILURE, data: err.response.data, }); } } function* watchLogIn() { console.log('watchLogIn') yield takeLatest(LOG_IN_REQUEST, logIn); } function* watchLogOUT() { console.log('watchLogOUT') yield takeLatest(LOG_OUT_REQUEST, logOut); } export default function* userSaga() { yield all([ fork(watchLogIn), fork(watchLogOUT) ]) } const g = watchLogIn(); console.log(g.next()) sagas/posts.js import { all } from "axios"; import { delay, fork, put, takeEvery } from "redux-saga/effects"; // function addPostsApi(data) { // // 비동기 처리 함수는 일반함수로 정의 // return axios.post("api/login", data); // } function* addPosts(action) { console.log('addPosts') try { // const result = yield call(addPostsApi, action.data); //요청의 결과 yield delay(1000); yield put({ type: "ADD_POST_SUCESS", data: action.data, }); } catch (err) { yield put({ type: "ADD_POST_FAILURE", data: err.response.data, }); } } function* watchAddPost() { yield takeEvery("ADD_POST_REQUEST", addPosts); } export default function* postSaga() { yield all([fork(watchAddPost)]); } reducers/index.js import { HYDRATE } from "next-redux-wrapper"; import { combineReducers } from "redux"; import user from "./user"; import post from "./post"; // (이전 상태, 액션) => 다음 상태 const rootReducer = combineReducers({ index: (state = {}, action) => { switch (action.type) { case HYDRATE: console.log("HYDRATE", action); return { ...state, ...action.payload }; default: return state; } }, user, post, }); export default rootReducer; reducers/user.js export const initialState = { isLoggingIn: false, //로그인 시도(로딩)중 isLoggedIn: false, // 로그인된 상태 isLoggingOut: false, // 로그아웃 시도(로딩)중 me: null, //내정보 signUpData: {}, loginData: {}, }; export const LOG_IN_REQUEST = 'LOG_IN_REQUEST'; export const LOG_IN_SUCCESS = 'LOG_IN_SUCCESS'; export const LOG_IN_FAILURE = 'LOG_IN_FAILURE'; export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST'; export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS'; export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE'; export const loginRequestAction = (data) => ({ type: LOG_IN_REQUEST, data }); export const logOutRequestAction = () => ({ type: LOG_OUT_REQUEST, }); const user = (state = initialState, action) => { switch (action.type) { case LOG_IN_REQUEST: console.log('reducer login') return { ...state, isLoggingIn: true, }; case LOG_IN_SUCCESS: return { ...state, isLoggingIn: false, isLoggedIn: true, me: {...action.data, nickname: 'skylove1004'}, }; 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 const userState = (state) => state.user; export default user; reducers/post.js export const initialState = { mainPosts: [ { id: 1, User: { id: 1, nickname: "skyblue5030", }, content: "첫 번째 게시글 #express #react", Images: [ { src: "https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?udate=20180726", }, { src: "https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg", }, { src: "https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg", }, ], Comments: [ { User: { nickname: "nero", }, content: "우와 개정판이 나왔군요~", }, { User: { nickname: "hero", }, content: "얼른 사고싶어요~", }, ], }, ], imagePaths: [], //이미지업로드시 추가됨 postAdded: false, }; const ADD_POST = "ADD_POST"; export const addPost = { type: ADD_POST, }; const dummyPost = { id: 2, content: "더미데이터입니다.", User: { id: 1, nickname: "제로초", }, Images: [], Comments: [], }; // 데이터를 먼저 구성, 화면은 작성한 데이터나 데이터 변경을 기준으로 구성 // 데이터 구조는 서버측과 합의해서 구성해야 나중에 수정할 일이 없음 const post = (state = initialState, action) => { switch (action.type) { case 'ADD_POST_SUCCESS': return { ...state, mainPosts: [dummyPost, ...state.mainPosts], // 데이터을 앞에 추가해서 게시글이 위로 올라가게 postAdded: true, }; default: return state; } }; export const postState = (state) => state.post; export default post; store/configureStore.js import { applyMiddleware, compose, createStore } 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"; const loggerMidddleware = ({ getState }) => (next) => (action) => { console.log({ action, getState }); return next(action); }; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware, loggerMidddleware]; 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;
react redux node.js express next.js
hoze12
2023-05-09T02:41:21.510Z
댓글 1
좋아요 0
조회수 447
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님! 게시글 좋아요 부분 듣고 다시 작성해보고 있는데 처음 로딩 시에는 좋아요 버튼 눌렀을 때 로그인 하지 않은 상태면 에러 메시지가 잘 나오는데 ( 로그인 안 하면 좋아요 못 누르게) 첫 번째 문제는 로그인 했다가 로그아웃을 한 뒤에 좋아요 버튼을 누르면 화면에는 변화가 없지만 리덕스에는 LIKE_POST_REQUEST -> LIKE_POST_SUCCESS가 되어서 이전에 로그인했던 사용자의 아이디가 LIKERS에 들어갑니다. // middlewares.js exports.isLoggedIn = (req, res, next) => { if (req.isAuthenticated()) { next(); } else { res.status(401).send('로그인이 필요합니다.'); } } 여기 middlewares에 콘솔을 띄어보니 로그인 했다가 로그아웃을 한 상태에서 버튼을 누르면 401에러 부분이 아니라 if ( req.isAuthenticated()) 부분이 실행됩니다.!! // 에러 메시지 출력부분 PostCard.js // PostCard.js const { removePostLoading, likePostError } = useSelector((state) => state.post); useEffect(() => { if (likePostError) { alert(likePostError); } }, [likePostError]); // routes/user.js - 로그아웃 부분 router.post('/logout', isLoggedIn, (req, res, next) => { req.logout((err) => { if (err) { return next(err); } }); req.session.destroy(); res.send('ok'); });
react redux node.js express next.js
kyung3098
2023-05-08T15:26:53.211Z
댓글 1
좋아요 0
조회수 329
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요~ 버셀에 프로젝트를 베포할때 .env 파일에 있는NEXT_PUBLIC_NCP_CLIENT_ID와 키넘버를 vercel에 직접 입력했는데요. .env 파일도 있고요. 결론적으로 둘다 입력하고 파일을 가지고 있는 경우에는 네이버 클라우드에 도메인을 등록하더라도 API Key 인증에 실패되나요? 페이지를 새로고침 했을 시 지도가 잠깐 정상적으로 떳다가 바로 인증에 실패했다고 뜨지 않습니다 ㅠㅠ
seo next.js vercel csr ssg ssr
Nuri Park
2023-05-08T09:59:32.618Z
댓글 1
좋아요 1
조회수 1283
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
(위 화면은 fetchBoardsOfTheBest에서 images을 보여주는 파일입니다) 메인화면 하다가 질문이 있어서 글 남깁니다. API fetchBoardsOfTheBest에서 images 부분에 0번째는 0 : "codecamp-file-storage/2023/4/18/copy-1616378722-5.jpg" 이런식으로 뜨고 1번째는 0 : " https://storage.googleapis.com/codecamp-file-storage/2023/5/2/SampleJPGImage_100kbmb.jpg " 1 : " https://storage.googleapis.com/codecamp-file-storage/2023/5/2/file_example_JPG_100kB.jpg " 이렇게 두개가 뜹니다.. 저희가 여태 배웠던 BoardDetail.presenter에서는 src={` https://storage.googleapis.com/${el}` } 이런식으로 주소를 주어서 사진을 가져왔는데 fetchBoardsOfTheBest 의 이미지는 src=" ? " 어떻게 가져와야할까요?
react node.js seo graphql next.js
임프런
2023-05-08T08:17:55.030Z
댓글 1
좋아요 0
조회수 333
