묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
pagination 페이지 번호 유지하고 싶습니다.
예시로 pagination을 통해 4번째 게시물 목록을 보고 있는데여기서 새로 고침을 하거나4번 게시물 목록의 해당 게시글 클릭해서 들어가고 다시 뒤로 가기를 통해 게시물 목록으로 이동이 되었을 때4번 게시물 목록이 아닌 1번 게시물 목록으로 초기화가 되는데저는 4번 게시물 목록으로 유지하고 싶습니다. 다른 사이트의 게시물 홈페이지를 참고해 보면 page=4 이런 식으로 주소 창에 입력이 되어있는데 pages폴더에 폴더를 추가해서 유지를 해야 하나요?인프런에서 질문 & 답변 부분에서도 다음과 같이 사용되고 있습니다.https://www.inflearn.com/community/questions?page=2&order=recent 만약 폴더를 추가 해야 한다면 다음과 같이 폴더가 있을 때boards 하위 폴더에 추가하고 해당 page폴더 안에[boardId], new 폴더를 넣어야 할 까요?(page폴더 생성 안 한 상태입니다.)아니면 useState나 useRecoil을 사용해서 상태관리를 해야하는 건가요?어떻게 사용되는지 알고 싶습니다.
-
해결됨만들면서 배우는 리액트 : 기초
고양이 사진이 깨져요.ㅜㅜ
고양이 사진이 뜨지 않아요..ㅜㅜ
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. README 링크가 이상해 제보합니다.
REAMDE 1부 - 4장 > 정답코드 링크가 잘못 작성된 것 같아 제보드립니다https://github.com/practical-fe-testing/test-example-shopping-mall/blob/main/shopping-mall-integration-test-with-answer
-
미해결Next + React Query로 SNS 서비스 만들기
로그인시 CallbackRouteError
강사님~ 챕터 3-2 올려주신 소스에서도 갑자기 CallbackRouteError 가 발생하네요.지난주까지는 이상없이 동작했는데요...확인 좀 부탁드려요 [auth][error][CallbackRouteError]: Read more at https://errors.authjs.dev#callbackrouteerror[auth][cause]: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11576:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)[auth][details]: { "errno": -61, "code": "ECONNREFUSED", "syscall": "connect", "address": "::1", "port": 9090, "provider": "credentials"
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
토큰쿠키저장에 대해서 질문드립니다.
강의에서 토큰을 보관하기에 보안에도 좋고 적절한 곳이 쿠키라고 말씀해주셨는데 보통 쿠키에 저장을 많이 하는편일까요?내년 하반기에 크롬에서 쿠키차단예정을 하고 있다고 들어서 왠지 다른 대체제가 필요할거같은데 쿠키를 사용 못하게 된다면 보통 클라이언트에서는 로컬스토리지 이외에는 대체제가 없는지 궁금합니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
bootstrap4
혹시 django boorstrap4는 django4.x.x를 지원 안하나요.
-
미해결처음 만난 리액트(React)
실행이 잘되었지만 그래서 오히려 납득이 안되는 부분이 있습니다.
안녕하세요 선생님. 좋은 강의 진심으로 감사드립니다. 실행이 잘 됩니다. 왜 잘 되지?하며 이해가 안되는 부분이 있어서 질문드립니다.Attendance.jsx 코드를 보면 함수 정의 후 Attendance함수만을 export 하고 있습니다. students 배열은 export되지 않고 있어 Attendance함수를 index.js에 불러가서 거기서 사용하면 거기는 students 배열은 불러가지 않았기 때문에 정의되지 않았다며 오류가 떠야할 것 같은 느낌이 들었는데 잘 실행이 되었습니다. 함수만을 export했는데 어떻게 students배열까지 index.js에서 잘 사용할 수 있는걸까요?그리고 간단한 추가질문이 하나 더 있습니다. 저번 강의에서 리스트의 키값을 지정해주지 않으면 리액트에서는 자동으로 인덱스를 키값으로 설정한다라는 말씀을 잠깐하셨습니다. 그런데 왜 키값을 지정해주지 않았을 때 오류가 뜨는걸까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
npm run dev 실행 시 emojis-list 관련 오류,,
위 파일이 client/index.js에 대한 코드입니다.루트 디렉토리에서 npm run dev를 실행시키면 밑 사진과 같은 오류가 뜹니다..node_modules, package.json 삭제 후 재설치도 해보고 client 디렉토리에서 npm install emojis-list도 해보고, npm uninstall emojis-list도 해보았지만 똑같은 오류가 떠서 페이지가 안열립니다..어떻게 해야 해결할 수 있을까요 ?
-
해결됨2시간으로 끝내는 프론트엔드 테스트 기본기
테스트시 api 통신에 관한 질문입니다.
안녕하세요. 강의 열심히 수강중인 수강생입니다.jest와 cypress 강의를 보다가 보면 url 통신을 하는 부분은 실제 api 통신이 아닌, 미리 준비해둔 가상의 데이터를 사용하는데, 왜 테스트 시에는 mocking을 해주는 건가요? 구글링 해보면 테스트 코드의 의존성을 제거하기 위함이다 라고 많이 나오는데 개발자가 준비해둔 가상의 데이터를 response 해주면 결국 테스트 자체는 뭘 해도 다 ok가 될텐데 이러면 테스트라는거 자체가 의미가 없는게 아닌가요? 구글링해서 테스트시에 mock 처리를 해주는 이유를 찾아봤는데, 이게 결국은 내가 만들어둔 더미데이터를 넣어주면 무조건 그대로 움직이게 되는데 그러면 이 테스트 자체를 하는게 어떤 의미인지를 잘 모르겠습니다. 제가 뭔가 잘못 생각하고 있는건지... 질문 한번 올려봅니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
POST 요청 시 {"statusCode":500,"message":"Internal server error"}가 발생합니다ㅠ
안녕하세요! '서버 쿠키 공유하기 & 게시글 업로드 완성' 강의에서 백엔드 전용 토큰을 생성하고 난 다음에 발생하는 에러가 있습니다. 현재 connect.sid는 잘 받아와 졌고 게시글과 사진을 올린 다음에 게시하기를 누르게 되면 강사님과 다르게{"statusCode":500,"message":"Internal server error"} 가 발생합니다 서버쪽 에러로그는 다음과 같습니다 제가 백엔드쪽은 아예 몰라서... 혹시 추가로 첨부해야 할 코드가 있다면 말씀해주시면 감사하겠습니다
-
미해결Next + React Query로 SNS 서비스 만들기
Next.js호환 CSS 관련 문의
안녕하세요. 제로초님. 질문 많이 드려서 죄송합니다.아마 마지막 질문이 될 것 같아요. 강의에서 CSS-in-JS 라이브러리와 Next의 호환성 문제를 언급해주셨음에도 불구하고, styled-componets로 진행을 하다가 문제점을 깨닫고 멈춘 상태입니다.제가 꾸역꾸역 styled-componets 써보려고 한 이유는 다음과 같았습니다.프로젝트를 마이그레이션 하는 과정에서 라이브러리를 바꾸게 됐을 때의 비용이 너무 많이 발생한다고 판단함.Next에도 babel, swc 등의 설정 파일을 추가 하면 사용할 수 있다는 글들이 구글링에 많이 보였기 때문에, '이제 업데이트 돼서 가능한가?' 싶었음. 하지만 결론적으로 layout.tsx, page.tsx 파일에도 스타일이 들어가지 않을 수 없었고, use client로 떡칠된 프로젝트가 되어서 next.js를 사용하는 의미를 잃었습니다.서론이 길었습니다. 위와 같은 이유로 아래 내용 질문드립니다.styled-component가 된다고 우기는 블로그들은 다 ssr의 이점을 버리고 사용중인 거라고 보면될까요?채용공고에서 next와 styled-component를 동시에 요구하는 공고는 두 개를 같이 쓰고 있는 곳일까요?현실적으로 next와 함께 쓰일만한 라이브러리는 유명한 라이브러리 중에서 postCSS, SASS 가 전부인가요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
Product게시판 이미지에 대해서
토큰적용 후 발생하는 현상에 대해서 질문드립니다.Product게시판에 이미지에 경우, 아래와 같이 표시가되는데요 이때 토큰을 헤더에 설정 되어있지않기떄문에 {"error":"ERROR_ACCESS_TOKEN"}가 발생합니다.jwtAxios를 사용하여 처리는 가능할듯한데 문제는 결과값이 문자열로 되돌아와서 이미지표시가 좀 힘들어보이고 어떻게 처리해야할지 모르겠습니다.이런경우 어떠한방식으로 처리하는게 좋을까요?src={`${host}/api/products/view/s_${product.uploadedFileNames[0]}`}
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
강의 순서 및 누락 건 확인
안녕하세요 강의 진행 중에[로그인 적용 확인] -> [로그아웃 처리] 를 보다 보니 중간에 쿠키 설정이 다되어 있어서뭔가 순서가 뒤바뀐 건가요...
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
redux-thunk 관련 오류 !!
import React from 'react'; import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {Provider} from 'react-redux'; //import 'antd/dist/antd.css' import { applyMiddleware,createStore } from 'redux'; import promiseMiddleware from 'redux-promise'; import thunk from 'redux-thunk'; import Reducer from './_reducers' const createStoreWithMiddleware = applyMiddleware(promiseMiddleware,thunk)(createStore) const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <Provider store={createStoreWithMiddleware(Reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() )}> <App /> </Provider> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 위 코드 실행했더니 export 'default' (imported as 'thunk') was not found in 'redux-thunk' (possible exports: thunk, withExtraArgument) 이란 오류가 떠서 node_modules, package.json 폴더도 삭제하고 다시 npm install을 했음에도 똑같은 오류가 떠요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
husky
D:\coding\codecamp-frontend\class> npx husky install위 내용처럼 허스키를 설치하면 husky - .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory) 이렇게 .git을 찾을 수 없다고 뜹니다. 저는 작업물을 git으로 버전 관리했는데 찾아보니 package.json과 .git의 경로가 형제관계여야 오류가 안난다는 정보를 찾았습니다. 제 작업물의 폴더 구조가 최상위 폴더에 .git이 있고 저렇게 클래스 / 클래스_퀴즈 / 포폴 폴더에 package.json이 각각 있는 형태인데요.이러한 경우는 어떻게 해결해야 할까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npx create-react-app ./ 사용
npx create-react-app simplediray 를 통해 만들고 파일을 옮기는 것과 create-react-app ./을 사용하는게 동일한건가요 ?
-
미해결Next + React Query로 SNS 서비스 만들기
webstorm 테마 어떤거 사용하시나요?
저도 webstorm 사용하는데 영상에 사용하신 테마가 궁금합니다!!!
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
로그인 적용확인 회차에대해서
위에 내용하고 겹치는듯한데 맞나요?... 로그인 적용확인 회차부터해서 뭔가 내용이 이어지질 않는듯한 느낌이듭니다....
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
리뉴얼 강의가 오픈이 되면 기존 강의는 더이상 못보는걸까요
안녕하세요 어제 부터 구매해서 강의를 보며 따라서 공부하고 있습니다. 리뉴얼 강의가 오픈이 되면 현재 강의를 계속 볼수 있는 걸까요 .. 감사합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
Next 기본 내장 loading.tsx 의 기능에 대한 질문이 있습니다!
안녕하세요!'Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx)' 강의를 듣던 도중 갑자기 궁금한 것들이 생겨서 이렇게 질문드립니다! “ /home은 서버컴포넌트여서 서버에서 다 그려서 보내주기 때문에초기 로딩 자체가 존재하지 않는다. 그러므로 /home에서 새로고침을 해도 loading.tsx 가 적용되지 않는다그렇지만 /explore에서 ‘새로고침 하고’ /home이라는 페이지로 넘어가면 /explore에서 /home페이지를 새로 로딩한다. 그래서 loading.tsx 가 적용된다 ”라고 말씀하셨는데 여기서‘/explore에서 새로고침을 하고난 다음에 /home페이지로 가면 해당 페이지를 새로 로딩한다’ 는 개념이 무슨 말씀이신가요? 이와 관련된 Next.js 의 개념 키워드가 있을까요? “첫 페이지를 로딩 할 때 서버에서 미리 로딩된 것을 불러오기 때문에 Next에서 구성해주는 loading.tsx나, 리액트 쿼리에서 사용하는 isPending둘 다 의미가 없다. Next에서 첫 페이지의 데이터는 서버에서 전부 로딩하고 이걸 가져다 쓰기 때문이다“라고 하셨는데 여기서 첫 페이지가 정확히 무엇을 의미하는 것인가요?최초 렌더링인지, 새로고침 이후 접근하는 페이지인지, 아니면 다른 페이지를 갔다가 그대로 다시 돌아오면 그것도 첫페이지가 되는 것인지 헷갈립니다ㅠㅠ (Next의 Streaming with Suspense 를 사용하기 전 내용입니다) API에 await delay(3000) 를 사용했을 때,prefetchInfiniteQuery를 사용한 PostRecommends.tsx 에서는리액트 쿼리의 isPending은 적용되지 않지만, loading.tsx로 지정한 로딩 스피너는 보여집니다.loading.tsx로 지정한 로딩 스피너가 보여질 때, 어쨌든 prefetchInfiniteQuery 를 통해 서버측에서 미리 데이터를fetch할 때 API를 사용할텐데 이 때 API에 await delay(3000)가 있음에도loading.tsx는 항상 await delay(3000)와 관계없이 아주 짧은 시간동안만 (거의 0.5초?) 나타나는데 이는 왜 그런가요?최소 이 때 역시 API 호출로 인해 delay(3000)가 작동되면 3초 이상이 걸려야하는게 맞지 않나요?이는 혹시 prefetchInfiniteQuery가 컴포넌트가 마운트 되기 전에 미리데이터를 받아놓기 때문에 dealy(3000)이 직접적으로 체감되지 않기 때문인가요?