173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시물 등록 실습중이던 학생입니다. input 크기를 잡을 때 padding값을 주어서 크기를 잡고 있었는데 미묘하게 input 태그들 마다 가로길이가 다릅니다..ㅠㅠ(컴포넌트 분리한 상태입니다.) globals.css내부를 보니 *{box-sizing:border-box} 이 ,기재되어있는거같은데 실제로는 적용이 안되는거 같습니다. padding으로 크기를 잡는게 아닌건가요? 아니면 globals에 있는 스타일이 원래 적용이 안되는건가요? 따로 작업을 해주어야하는게 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요, 로그인과 마이페이지를 구현하였고, 로그인 후에 router.push로 페이지 이동하고 거기서 다시 마이페이지를 눌렀을때 로그인이 안되었다고 hoc에서 걸립니다. 로그아웃도 마찬가지로 문제가 발생됩니다. 다만, 새로고침을 했을땐 정상적으로 작동이 잘 됩니다. fetchUser 받아올 때의 문제인건지 accessToken과 refreshToken에서의 api 문제인건지 도저히 혼자서 해결이 어려워 문의 남깁니다..
미해결
[리뉴얼] 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로 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로 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'); });
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요~ 버셀에 프로젝트를 베포할때 .env 파일에 있는NEXT_PUBLIC_NCP_CLIENT_ID와 키넘버를 vercel에 직접 입력했는데요. .env 파일도 있고요. 결론적으로 둘다 입력하고 파일을 가지고 있는 경우에는 네이버 클라우드에 도메인을 등록하더라도 API Key 인증에 실패되나요? 페이지를 새로고침 했을 시 지도가 잠깐 정상적으로 떳다가 바로 인증에 실패했다고 뜨지 않습니다 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
(위 화면은 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=" ? " 어떻게 가져와야할까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 영상에서 https:// 해당 부분 에서 3.0을 2.5로 바꿔서 수정하면 오류가 해결된다고 하셨는데 적용 시켜봐도 오류가 계속 유지 됩니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 리액트 01-02 emotion 강의를 들을때 styles 폴더 안에 만든 emotion.js 입니다. 강사님과 다르게 백틱 안에서의 문법이 문자열 처리된 것처럼 나오고 있습니다. 제가 사용하는 윈도우, 맥 모두 이러한 증상이 나타나는데 윈도우는 문법 적용이 안되고 맥은 적용이되네요.. 자동완성도 안되니까 많이 불편한데 vscode 에서 문제인 걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓으로 포트폴리오를 만드는중인데 혹시 제 게시물이 사라질 수도 있을 것같아서 유효기간같은게 있는지 궁금합니다. 아니면 계정당 상품등록 개수에 제한이 있는지 궁금합니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 저는 지금 막 시작한 코린인데요 . 지금 사실 최신 버신에서는 설치할떄 물어보는게 많더라구요. 그런데 영상처럼 설치후에, npm run dev를 했는데 에러가떠서 영상에는 제가 잘못아는진모르겟지만 자세히설명이안되있어서 막혀있습니다 ㅠㅠ어떡하죠?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오/퀴즈가 과거 강의와 달라진 것 같은데 해당 과제를 구현한 깃 레포를 찾을수 없어서 적절한 도움을 받기 어렵습니다. 현재 과제 풀이는 어디서 확인할 수 있을까요?
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
안녕하세요 이번에 배우면서 일부분 리팩토링 하면서(?) 진행 중입니다. 그런데 하다가 보니 이런 R_CONNECTION_TIMED_OUT 오류가 나오더라고요 관련 코드들 싹 다 찾아보니 www. 관련 검색해도 안나오고 뭔지 모르겠네요 따로 추가하신 거라도 있을까요? / www.welcometoscotland.com/blog/2013/06/19/%20glasgow-a-green-urban-oasis-with-style net::ERR_CONNECTION_TIMED_OUT Image (async) eval @ chakra-ui-image.esm.js:89 eval @ chakra-ui-image.esm.js:126 commitHookEffectListMount @ react-dom.development.js:20568 commitLifeCycles @ react-dom.development.js:20629 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 unbatchedUpdates @ react-dom.development.js:22433 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26015 hydrate @ react-dom.development.js:26081 renderReactElement @ index.js:721 doRender @ index.js:880 _callee$ @ index.js:601 tryCatch @ runtime.js:45 invoke @ runtime.js:274 prototype.<computed> @ runtime.js:97 asyncGeneratorStep @ index.js:185 _next @ index.js:203 eval @ index.js:208 eval @ index.js:200 _render @ index.js:637 render @ index.js:640 eval @ next-dev.js:110 eval @ fouc.js:13 requestAnimationFrame (async) displayContent @ fouc.js:8 eval @ next-dev.js:109 Promise.then (async) eval @ next-dev.js:69 ./node_modules/next/dist/client/next-dev.js @ main.js?ts=1683339159009:567 options.factory @ webpack.js?ts=1683339159009:633 __webpack_require__ @ webpack.js?ts=1683339159009:37 __webpack_exec__ @ main.js?ts=1683339159009:1236 (anonymous) @ main.js?ts=1683339159009:1237 webpackJsonpCallback @ webpack.js?ts=1683339159009:1179 (anonymous) @ main.js?ts=1683339159009:9
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님! 최근 다시한번 노드버드를 참고하여 따로 사이드 프로젝트를 진행중에 있습니다. 진행은 nginx 설정까지 마무리 하고 배포까지 성공적으로 진행이 되었습니다. 실제 사용도 했었고, 어제까지만 해도 큰 문제가 없었습니다. 다만 오늘 이미지를 로드해오는 과정에서 gateout 에러가 좀 발생하는것 같아 방법을 찾아보면서 pm2의 ecosystem.config.js 설정 등을 하다가 잘 안되는것 같아 다시 지우고 재 실행을 했습니다. 실행을 다시 하니 로그인은 유지가 되는데, 데이터를 가져오려니 401 인증 에러가 발생하여 질문 드립니다.. 오류가 뜨는 이유가 무엇일까 생각했었는데, 우선 쿠키가 관련이 있겠다 생각해서 application - cookie 탭에서 확인을 해봤습니다. 실제 도메인 주소, secure 설정까지 다 맞춰서 들어와있음을 확인했고, 그렇기에 새로고침을 했을 시 로그인은 유지가 되었습니다. 네트워크 쪽을 살펴보니 분명 쿠키가 같이 request 되고 있었습니다. 근데 이상하게도 쿠키가 application 에 저장된 문자와 다름을 확인했고 request 의 cookie 탭을 확인해보니 이렇게 2가지 도메인으로 쿠키가 생성되어 전달되고 있음을 확인했습니다. 하나는 api. 가 붙어있었고 하나는 실제 로그인을 유지시켜주는 도메인이었습니다. 계속 고민을 해봐도 왜 request 에 위와같이 2개의 쿠키가 전달이 되는지 이유를 알 수 없어서 질문드립니다.. 도메인은 강의처럼 .주소 형식으로 했습니다. 백엔드 nginx.conf 입니다 프론트 nginx.conf 입니다 프론트 pm2 list 입니다 백엔드 pm2 list 입니다. 답변 부탁드리겠습니다 ㅜㅜ...
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 강의 도중 데이터베이스 연결 설정 후 에러가 나서 질문 드립니다! 혹시 뭐 터미널이 달라서 그럴까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 혹시 백엔드도 /etc/nginx/nginx.conf 이것만 따로 설정해주고 /etc/nginx/sites-enabled/default 이건 프론트랑 똑같이 설정해주면 되는건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
pages 폴더랑 styles폴더가 없는상태로 초기 설정이 되는데 어떻게 설정해야 할까요?? ㅜㅜ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 리액트 기초 및 폴더구조와 이모션 듣고있는데 세팅 다 마치고 yarn 데브 쳐서 보니까 이 메세지가 뜨더라고요 저는 초기에 아예 저기에 골뱅이가 써져있어서 다시 ..으로 바꾸고 다시 해봤습니다. 그런데도 이 오류가 떠서 보니까 선생님이 보여준 코드랑 제 index.js코드랑 미묘하게 다르더라고요? 선생님 코드는 이건데 제 초기 코드는 이거입니다.. 리액트 버전도 잘 낮췄는데 왜 다른 걸까요? 갑자기 난데없는 백틱과 변수표현식도 있고......일일이 지워서 선생님 강의랑 맞게 고쳐야할까요? 혹시 index.js전체 코드를 구할 수 있을까요? 보니까 Home.module.css도 선생님 거랑 달라요ㅠㅠ .title은 없고 이런것만 있어요. 노션 보고 지울건 지우고 순차대로 깐 게 맞는데 왜 제 건 이럴까요ㅠㅠ 현재 제 버전입니다 "next": "12.1.0", "react": "17.0.2", "react-dom": "17.0.2"
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요~ https://practice.codebootcamp.co.kr/graphql 이 링크로 접속했는데 무한 로딩?이 되면서 접속이 안되는 현상이 발생합니다..! 와이파이도 바꿔보고 핸드폰에서도 접속해보고 했는데 계속 이러더라구요 아까 는 잘 접속이 됐었는데... 다른 주소( https://backendonline.codebootcamp.co.kr/graphql ) 로 접속을 할땐 잘 되는데 유독 저 주소만 그러네요!! 그래서인지 실습할 때(apollo-client의 사용 및 _app.js 작동원리 수업) 요청하기 버튼을 클릭하면 계속 아무 반응이 없다가 기다리다보면 이렇게 뜨더라구요!! 왜그러는지 모르겠어서 진도를 못나가구 있습니다..ㅜ.ㅜ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트를 깔때 devdependencies에서 애초에 eslint하고 eslint-config-next가 같이 안까ㅓㄹ려서 수동으로 깔아줬는데 그래도 안되네요. 자꾸 기초적인것들 질문해서 죄송합니다.
