묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그인한 회원이 자유게시판 글 작성할 때 오류가 납니다
안녕하세요 강사님 !로그인한 회원이 자유게시판에 글을 쓸 때 작성자가 존재하지 않는다는 오류가 나옵니다.피그마 화면에 작성자와 비밀번호 인풋이 없어서 똑같이 비회원일 때만 보여주도록 했고 뮤테이션을 날릴 때에도 필수값이 아니라 비회원 글작성 뮤테이션을 똑같이 썼습니다. 그런데 작성자가 존재하지 않는다는 오류가 나요. 플레이그라운드에서 토큰을 넣고 똑같이 시도해봤는데 CreateBoardInput에 작성자랑 비밀번호를 다 넣어줘야 정상적으로 등록이 되더라구요. 타입을 보면 필수가 아닌데.. 제가 놓친 부분이 어디인지 잘 모르겠습니다 ㅠㅠ 강의는 완강했습니다! +댓글등록도 해보는데 댓글은 작성자가 없다는 오류 없이 정상적으로 등록되지만 user 정보가 같이 저장되지 않습니다. 저는 토큰에서 user 정보를 알아서 가져가는 줄 알았는데 그게 아닌건지, 그게 맞는데 제 코드가 잘못된건지 모르겠습니다 😂
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정후 저장할때 자동으로 붙는 세미콜론 등은 어떤 플로그인에 의해 작동되는지?
수정후 저장할때 자동으로 붙는 세미콜론 등은 어떤 플로그인에 의해 작동되는지요? 프리티어라면 프리티어 설정 어디에서 무엇을 ON 시켜야 되나요?저는 안되서..^^
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
dummyList 변수 선언 위치 질문
안녕하세요 dummyList라는 변수 선언이 App함수 밖에 선언이 되어있는데App함수 안에 선언을 하는거랑 결과상으로는 같더라구요 jsx문법에서 보통 이런 변수선언은 함수 안에 하나요 밖에 하나요?혹시 차이가 있을까요? 이런 변수선언을 함수 밖에 선언하는 경우와 안에 선언하는 경우의 차이가 궁금합니다
-
해결됨처음 만난 리액트(React)
context 질문 드립니다
안녕하세요 소플님1 context가 여러 컴포넌트에 접근을 할 수 있다고 하셨는데context는 상태 관리인건가요? 2 현업에서는 스타일 컴포넌트와 scss 중 어느걸 어 많이 사용 하나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build가 오류납니다ㅠㅠ
build 파일도 완성됐고 다른 것들도 다 오류없이 되었는데 serve -s build가 안됩니다..이렇게 오류가 뜹니다.. 커뮤니티에서 찾아봤는데 관리자 권한으로 실행하면 될 거라고 하셔서 해봤는데 안되고..get-executionpolicy를 입력하고set-executionpolicy -executionpolicy remotesigned입력하라고 하셔서 해봣는데 오류가 또 납니다..https://github.com/veryyounng/emotion_diary.git
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
툴킷에서 SSR적용하는 부분 질문있습니다.
강의 들은 부분을 툴킷으로 다시 만들어보는중 SSR 적용하는 부분 질문있습니다. 초기 로딩후 로그인은 정상적으로 동작하는데요 새로고침하고 로그인 풀린 화면이 나오고 다시 로그인하면 로그인되지 않습니다. 코드는 다음과 같이 작성했습니다. // toolkit/index.ts import axios from 'axios'; import userSlice, { UserInitialState } from './user'; import postSlice, { PostState } from './post'; import { AnyAction, CombinedState } from '@reduxjs/toolkit'; import { combineReducers } from 'redux'; import { HYDRATE } from 'next-redux-wrapper'; axios.defaults.baseURL = 'http://localhost:3065'; axios.defaults.withCredentials = true; export interface IState { user: UserInitialState; post: PostState; } const rootReducer = ( state: IState, action: AnyAction ): CombinedState<IState> => { switch (action.type) { case HYDRATE: return action.payload; default: { const combinedReducer = combineReducers({ user: userSlice.reducer, post: postSlice.reducer, }); return combinedReducer(state, action); } } }; export default rootReducer;툴킷에 HYDRATE를 적용하고 // store/configureStore.ts import { AnyAction, Reducer, configureStore } from '@reduxjs/toolkit'; import { createWrapper } from 'next-redux-wrapper'; import rootReducer, { IState } from '../toolkit'; const makeStore = () => configureStore({ reducer: rootReducer as Reducer<IState, AnyAction>, devTools: true, middleware: (getDefaultMiddleware) => getDefaultMiddleware(), }); export default createWrapper<AppStore>(makeStore, { debug: process.env.NODE_ENV !== 'production', }); export type AppStore = ReturnType<typeof makeStore>; export type RootState = ReturnType<typeof rootReducer>; export type AppDispatch = AppStore['dispatch']; 리덕스 래퍼 부분은 저렇게 만들고 //pages/index.tsx export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (req && cookie) { axios.defaults.headers.Cookie = cookie; } await store.dispatch(loadPostAction()); await store.dispatch(loadUserAction()); }); export default Home; // toolkit/user.ts export const loadUserAction = createAsyncThunk( 'user/loadUser', async (data) => { const response = await axios.get(`/user/${data}`); return response.data; } ); .addCase(loadUserAction.fulfilled, (draft, action) => { draft.loadUserLoading = false; draft.loadUserDone = true; draft.me = action.payload || null; }) 툴킷쪽은 이런식으로 작성했습니다.
-
해결됨만들면서 배우는 리액트 : 기초
진유림 선생님 너무 궁금해서 질문드립니다 ㅜ
진유림 선생님 너무 궁금해서 질문드립니다 ㅜ흔히 CSR은 SEO 최적화가 어렵다고 하는데 최적화가 어렵지 기본적인 메인 홈페이지는 검색이 되는게 맞죠?시작이 되는 index.html의 소스의 <head></head> 태그안에 meta 태그 속성 중 네임과 컨텐트,그리고 타이틀 태그로 인해서, 기본적인 메인 홈페이지는 검색이 되는 것이 맞나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
CSR이더라도 메인 홈페이지는 검색이 되는게 맞죠?
제로쵸 선생님 너무 궁금해서 질문드립니다 ㅜ흔히 CSR은 SEO 최적화가 어렵다고 하는데 최적화가 어렵지 기본적인 메인 홈페이지는 검색이 되는게 맞죠?시작이 되는 index.html의 소스의 <head></head> 태그안에 meta 태그 속성 중 네임과 컨텐트,그리고 타이틀 태그로 인해서, 기본적인 메인 홈페이지는 검색이 되는것 맞나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
동적라우팅
동적 라우팅 폴더를 생성해서 강의 따라서 입력했는데 경로에 들어가면 qqq 폴더 관련하여 에러가 뜹니다ㅠ 다르게 입력한건 없는데 왜 이런걸까요?
-
미해결프로젝트로 배우는 React.js
리액트 설치하려고 하니 에러가 뜹니다
안녕하세요.강의 그대로 리액트를 설치하는데 에러가 뜨네요무슨 문제일까요..?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
/api/users 질문
안녕하세요 선생님 강의 학습 도중 api에 대해 궁금한게 생겨 질문드려요. 로그인 할 때는 /api/users/login로 axios 요청을 하고 로그인 정보는 /api/users로 받아오는데 처음 공부할 땐 그려려니 하고 넘어갔는데 복습하다보니 login 과 users api가 반환하는 값이 살짝 다르지만 로그인 정보를 반환하는건 비슷하던데 이렇게 설정하신 이유가 있나요? 그리고 만약 로그인 api 요청 시 로그인 정보를 반환한다고 설정한 상황에 axios로 로그인 api요청 후 반환 값을 swr로 같은 api주소를 입력해 저장할 수 있나요?예를들어 axios.post('/api/login') ~~ / useSWR('/api/login', fetcher) 이런 식으로요 아직 잘 몰라 사용법이 낯설고 어렵네요..ㅎ 알려주신다면 열심히 배우겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
라우터 푸시
섹션 27 라우팅 강의를 따라서 진행하며useRouter 를 사용해 router.push(/폴더경로) 를 입력하고 버튼 onClick 이벤트에 바인딩 해주었습니다.각 버튼 클릭시 url 은 정상적으로 이동되는걸로 나오는데, UI 화면은 바뀌지가 않습니다.콘솔로그를 찍어봐도 클릭 이벤트도 정상작동 되는걸로 나오는데.. 도대체 뭐가 문제일까요ㅠAPP.js 에서 컴포넌트를 바꿔봤을 때도 각 버튼 별 이동 페이지들이 문제없이 뜨는걸 확인했습니다.url 이동시 화면만 새로고침되지 않는 것 같아요..이렇게 경로 변경만 되고 화면은 리렌더링 되지 않는 경우엔 어떻게 해결해야하나요?
-
해결됨처음 만난 리액트(React)
미니블로그
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 마지막 미니블로그 테스트만 남았는데코드를 깃헙에서 그대로 가져와 복붙을 하고 실행해도 사파리에서는 null is not an object크롬에서는 Cannot read properties of null (reading 'useContext') TypeError: Cannot read properties of null (reading 'useContext') 오류가 뜹니다 어떻게 해야 할까요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Fly.io 에 그랩마켓 서버 배포하기 수업 중 오류 발생
docker 관련 에러인것 같습니다.docker 관련 파트 언제 했는지 찾을 수가 없어서 수업 다시 들어 보면서 해결하지도 못하네요어떻게 손대야 할 지 모르겠습니다.
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
이미지 처음 올릴 때만 나타나는 오류
사이트 열고 이미지 "처음" 올릴 때 이런 오류가 떠요,근데 그 이후로 사진 올리면 정상적으로 올라가요 저런 오류 안뜨고..이유가 뭘까요?ㅠ...코드 강의 제대로 다 했는데...
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
local Storage을 이용하여 삭제하기 도중 오류납니다
강의를 들으면서 분명 삭제하기까지 정상 작동되는것을 보았는데 그 이후 diaryList에서 id값을 정렬할때 오류가 발생합니다 ㅠㅠapp.js에서 88번째 줄의 data가 정의되지 않았다고 뜹니다 ..아래는 코드 샌드박스 링크입니다.https://codesandbox.io/s/late-morning-d483sv?file=/src
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
createBoard 질문있습니다
const 나의그래프큐엘셋팅 = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput: $createBoardInput) { _id } } `;처음에 단순히 결과값을 _id 만을 받도록 코딩했었는데 이 결과 등록하기 버튼을 누르면 create 된 값이 화면에 리렌더링 되기는 했지만 글의 갯수가 10개로 고정이 됬습니다. 예를들어 이미 1,2,....,9,10 이라는 글이 화면에 보이는 상황에서 a라는 글을 추가하면 a,1,2,...,9,10 으로 화면이 보이는 것이 아니라 a,1,2...,8,9 까지만 보입니다.const 나의그래프큐엘셋팅 = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput: $createBoardInput) { _id writer title contents } } `;그리고 다음과 같이 코드를 수정하게 되면 원하는 결과가 나오게 되었는데 무슨 차이가 있는 것일까요?
-
해결됨만들면서 배우는 리액트 : 기초
react에서 컴포넌트 만들 때 대문자를 쓰는 이유
react에서 컴포넌트 만들 때 대문자를 쓰는 특정한 이유가 있을까요?(소문자로 시작하면 절대 컴포넌트로 받아올 수 없는 건가요?)
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
안녕하세요! 로딩 상태 테스트에 관련된 질문입니다.
제 나름대로 강의를 응용해서 테스트를 짜보려고 강의 시점과 다른 userEvent 버전을 쓰고 있기는 하는데요. 로딩 상태를 테스트할때 마치 로딩 상태를 건너뛰고 바로 리스폰스를 받은 듯이 작동하고 있습니다.... 혹시 userEvent 버전이 달라서 동작이 달라진걸까요? 강의와 코드 내용이 조금 달라진 것에 대한 질문이라 죄송합니다만 아무리 찾아도 이유를 모르곘네요..ㅠㅠㅠimport { screen, render } from '@testing-library/react'; import App from './App'; import userEvent from '@testing-library/user-event'; describe('MainPage', () => { it('should change page when click buttons', async () => { const user = userEvent.setup(); render(<App />); const americaInput = await screen.findByRole('spinbutton', { name: /america/i, }); await user.clear(americaInput); await user.type(americaInput, '2'); const englandInput = await screen.findByRole('spinbutton', { name: /england/i, }); await user.clear(englandInput); await user.type(englandInput, '1'); const dinnerCheckbox = await screen.findByText(/dinner/i); await user.click(dinnerCheckbox); const orderButton = screen.getByRole('button', { name: '주문하기' }); await user.click(orderButton); const summeryHeading = screen.getByRole('heading', { name: '주문 확인' }); expect(summeryHeading).toBeInTheDocument(); const productHeading = screen.getByRole('heading', { name: '여행상품: 3000', }); expect(productHeading).toBeInTheDocument(); const americaLi = screen.getByText('2 America'); const englandLi = screen.getByText('1 England'); expect(americaLi).toBeInTheDocument(); expect(englandLi).toBeInTheDocument(); const optionHeading = screen.getByRole('heading', { name: '옵션: 500' }); const dinnerLi = screen.getByText('Dinner'); expect(optionHeading).toBeInTheDocument(); expect(dinnerLi).toBeInTheDocument(); const confirmCheckbox = screen.getByRole('checkbox'); const submitButton = screen.getByRole('button'); await user.click(confirmCheckbox); await user.click(submitButton); const loading = screen.getByText(/loading/i); expect(loading).toBeInTheDocument(); const completeDiv = await screen.findByRole('heading', { name: '주문이 성공했습니다!', }); const subHeadingDiv = await screen.findByRole('heading', { name: '지금까지 모든 주문', }); const loadingAfterResponse = screen.queryByText(/loading/i); expect(completeDiv).toBeInTheDocument(); expect(subHeadingDiv).toBeInTheDocument(); expect(loadingAfterResponse).not.toBeInTheDocument(); const priceDiv = await screen.findByText('3500', { exact: false }); expect(priceDiv).toBeInTheDocument(); const backBtn = await screen.findByRole('button'); await user.click(backBtn); const newAmericaInput = await screen.findByRole('spinbutton', { name: /america/i, }); expect(newAmericaInput).toBeInTheDocument(); expect(newAmericaInput).toHaveValue(0); }); });
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시판 API 만들기 - cors 빨간 밑
안녕하세요 선생님!강의 게시판 API 만들기 실습을 보고 ApolloServer 안에 cors: true를 적었는데 빨간 밑줄이 생기면서 '{ typeDefs: string; resolvers: { Query: { fetchBoards: () => Promise<Board[]>; }; Mutation: { createBoard: (parent: any, args: any, context: any, info: any) => Promise<string>; }; }; cors: boolean; }' 형식의 인수는 'ApolloServerOptions<any>' 형식의 매개 변수에 할당될 수 없습니다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'ApolloServerOptionsWithTypeDefs<any>' 형식에 'cors'이(가) 없습니다. 라고 오류가 떴는데 아무리 찾아봐도 해결방법을 몰라 글을 올리게 되었습니다
