176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
getCurrentPosition() 및 watchPosition()은 더 이상 안전하지 않은 출처에서 작동하지 않습니다. 이 기능을 사용하려면 애플리케이션을 HTTPS와 같은 안전한 출처로 전환하는 것을 고려해야 합니다. 자세한 내용은 다음 페이지를 참고하세요 코드 입니다 const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); }; .
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
스토리지 데이터에 다른건 다 삭제 되는데 하나 남았을때 삭제가 안되네요 전체 삭제하든 더블클릭으로 삭제하든 삭제가 안되네요 추가적으로 전체삭제를 해도 데이터가 안지워 지네요 ㅠㅠ 코드입니다. const todoInput = document.querySelector("#todo-input"); const todoList = document.querySelector("#todo-list"); //로컬스토리지에서 데이터 빼오기 const savedTodoList = JSON.parse(localStorage.getItem("saved-items")); const createTodo = function (storageData) { //할일 추가 함수 let todoContents = todoInput.value; if (storageData) { todoContents = storageData.contents; } const newLi = document.createElement("li"); const newSpan = document.createElement("span"); const newBtn = document.createElement("button"); //할일 완료 이벤트 newBtn.addEventListener("click", () => { newLi.classList.toggle("complete"); saveItemsFn(); }); //할일 삭제 이벤트 newLi.addEventListener("dblclick", () => { newLi.remove(); saveItemsFn(); }); if (storageData?.complete) { newLi.classList.add("complete"); } newSpan.textContent = todoContents; newLi.appendChild(newBtn); newLi.appendChild(newSpan); todoList.appendChild(newLi); todoInput.value = ""; saveItemsFn(); }; const keyCodeCheck = function () { //할일 추가 실행 함수 if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); } }; const deleteAll = function () { //전체 삭제 함수 const liList = document.querySelectorAll("li"); for (let i = 0; i < liList.length; i++) { liList[i].remove(); } saveItemsFn(); }; const saveItemsFn = function () { //할일 저장 함수(네트워크 스토리지에) const saveItems = []; for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, complete: todoList.children[i].classList.contains("complete"), }; saveItems.push(todoObj); } saveItems.length === 0 ? localStorage.removeItem("saved-Items") : localStorage.setItem("saved-items", JSON.stringify(saveItems)); }; if (savedTodoList) { for (let i = 0; i < savedTodoList.length; i++) { createTodo(savedTodoList[i]); } }
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 이미지 업로드할때 한글이름으로 된 이미지를 업로드하면 화면에 보여지고 s3에도 업로드는 되는데 post할때는 500에러가 나네요 ㅠㅠ 백엔드에 encodeURIComponent하고 normalize("NFC") 까지 써봤는데 고쳐지지가 않아서 문의 남깁니다 ㅠㅠ const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: "react-sansbook-aws", key(req, file, cb) { cb( null, `original/${Date.now()}_${path.basename( encodeURIComponent(file.originalname) )}` ); }, }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
export const getStaticPaths: GetStaticPaths = async () => { const stores = (await import('../public/stores.json')).default; const paths = stores.map((store) => ({ params: { name: store.name } })); return { paths, fallback: false }; }; export const getStaticProps: GetStaticProps = async ({ params }) => { const stores = (await import('../public/stores.json')).default; const store = stores.find((store) => store.name === params?.name); return { props: { store } }; }; getStaticPaths에서 리턴하는 paths가 getStaticProps 매개변수 params인가요??
미해결
[리뉴얼] React로 NodeBird SNS 만들기
script에서 dev를 못 찾는 다고 해서 scripts에서 s가 문제인가 해서 script 로 바꿨는데 이게 아닌가 봅니다 어떻게 하나요? { "name": "front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next" }, "author": "Seung Won", "license": "ISC" } npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\USER\AppData\Local\npm-cache\_logs\2023-04-29T14_33_46_373Z-debug-0.log PS C:\Users\USER\Desktop\1080\new react\front> npm run dev npm ERR! Missing script: "dev" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\USER\AppData\Local\npm-cache\_logs\2023-04-29T14_34_59_051Z-debug-0.log
미해결
[리뉴얼] React로 NodeBird SNS 만들기
getServersideProps에서 작성한 api는 ssr이든 csr이든 무조건 실행되는데 ssr시에만 실행하고 csr에서는 막을 방법이 없을까요? 페이지에서 컴포넌트로 props 넘기지 않고 swr 설정해서 초기에 ssr은 잘 되는데 그 이후 클릭으로 csr 방식으로 다른페이지 이동했다가 다시 돌아왔을때 swr 사용중이고 캐싱중임에도 불구하고 getServersideProps에서 작성한 api가 매번 호출되어 25.json?id=25이런식으로 데이터 받아와서 리렌더링되는데 막을 방법이 없을까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 람다 런타임 설정 편집부분 화면이 좀 바뀐거같아서 질문 남깁니다! 저는 이렇게 보입니다 일단 index를 exports로 바꿨는데 이대로 그냥 저장하고, 진행했더니 thumb파일도 안만들어지고 이미지도 평소에 잘뜨던게 undefined로 떠서 문제를 찾아보고 있었습니다
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요. 강의 잘 보고 있습니다. 질문이 몇가지있어 문의드립니다. 1. Private Route 관련 로그인된 유저만 접근할 수 있는 페이지 라우팅 경로를 아래와 같이 만들어 볼려고 하는데 next-auth에 useSession, getServerSession 으로 페이지 마다 각각 접근 제한하는 방식 말고 app/my 폴더에서 하위에 모두 접근을 제한 하는 방식이 있는지 궁금하여 문의 드립니다. app/my/profiles/page.tsx app/my/membership/page.tsx app/my/qna/page.tsx 2. API 공통 에러 처리 관련 API호출시 not-found.tsx를 사용해서 API 경로 404를 json으로 보내줄 수 있는지 궁금합니다. 그리고 app/api/test/route.ts 에서 각각 try catch로 익셉션을 체크 해서 http 500을 리턴하는 방식말고 middleware에서 공통으로 오류 처리를 할수 있는지 궁금합니다. middleware.ts로 로그인 체크 하는 코드는 많이 검색이 되는데 공통으로 오류 처리는 검색이 딸려서 그런지 찾을수가 없네요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 섹터 52이후 수업을 진행하는데 자꾸 비쥬얼 스튜디오 터미널에 jwt must be provided: {"response":{"errors":[{"message":"jwt must be provided","locations":[{"line":3,"column":9}],"path":["restoreAccessToken"],"extensions":{"code":"INTERNAL_SERVER_ERROR","exception":{"name":"JsonWebTokenError","message":"jwt must be provided","stacktrace":["JsonWebTokenError: jwt must be provided"," at Object.module.exports [as verify] (/codecamp_backend_api/node_modules/jsonwebtoken/verify.js:53:17)"," at RestoreAccessTokenService.createAccessToken (/codecamp_backend_api/dist/api/token/services/mutation/restoreAccessToken.service.js:38:31)"," at runMicrotasks (<anonymous>)"," at processTicksAndRejections (internal/process/task_queues.js:93:5)"]}}}],"data":null,"status":200,"headers":{}},"request":{"query":"\n mutation {\n restoreAccessToken {\n accessToken\n }\n }\n"}} 라는 오류가 뜹니다 getAccessToken.ts 부문 뮤테이션에서 오류 나는거 같은데 혹시 왜이러는지 알 수 있을까요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요 선생님 이번에 쇼핑몰 강의가 업데이트가 되었길래 강의를 들어보려고 합니다 그런데 제가 도커 강의도 한번 들어보고 싶은데 도커에 도자도 모르는 상태인데 수업을 따라갈만 할까요?? 항상 좋은 강의 감사합니다
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 저는 폴더 구조를 한 폴더안에 프론트 백엔드 담겨있지않고 다 따로 두고 있는데 그럴경우에 람다도 따로 보관해도 되는지 궁금합니다 아니면 지금 임시로 백엔드 폴더 안에 두고 진행하고있는데 괜찮은지 궁금합니다!
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
공식문서에 vscode 디버깅 셋팅은 나와잇지만 모노레포인 경우의 디버깅 셋팅은 알려주지 않고잇습니다. 모노레포인 경우 공식문서대로 셋팅하면 안되더라고요 이 문제를 해결하기 위해 vscode 공식문서 - 없음 next.js 공식문서 - 없음 github에서 next.js 프로젝트 찾아서 디버깅 셋팅되잇는지 하나하나 살펴봄 - 20개 정도 찾아봣지만 못찾음 오픈채팅방 - 답변받지 못함 stack overflow - 못찾음 몇몇 외국인에게 직접적인 도움 요청- 본인도 모르니 알게되면 알려달라는 답변 모노레포에서 디버깅 셋팅이 가능한지 알고싶습니다 또 webstorm에서는 모노레포 next.js 사용시 풀스택 디버깅이 가능한지 알고싶습니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
커뮤니티 리스트 ui생성 강의 부분에서 맨앞 내용에서 상위 커뮤니티 데이터를 가져오는 부분이 const {data: topsubs} = useSWR<Sub[]>(address,fetcher) 부분 undefined가 나오네요 ㅠ 소스코드가 확인해서 오타도 확인해봤는데 원인을 찾지못했습니다. 혹시 짐작가는 부분이 있으시나요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요, 강의 잘 듣고 있습니다. 18강에서 궁금한 점이 있어 질문드립니다. useStores 함수에서 return 값에 다음과 같이 괄호가 들어가 있는 이유가 무엇인가요? return { initializeStores, } 답변 주시면 감사하겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
선생님 안녕하세요 수업 잘듣고있습니다! freebord 폴더로 docker-compose up 했는데 오류가 났어요 혼자해볼려했지만 잘안되서 올려요.. /boards/[boardId]/index.tsx import { gql, useQuery } from "@apollo/client"; import { useRouter } from "next/router"; import { IQuery, IQueryFetchBoardArgs, } from "../../../../src/commons/types/generated/types"; import BoardWrite from "../../../../src/components/units/board/write/BoardWrite.container"; const FETCH_BOARD = gql` query fetchBoard($boardId: ID!) { fetchBoard(boardId: $boardId) { writer title contents youtubeUrl boardAddress { zipcode address addressDetail } images } } `; export default function BoardsEditPage() { const router = useRouter(); if (typeof router.query.boardId !== "string") { alert("올바르지 않은 게시글 아이디입니다."); void router.push("/"); return <></>; } const { data } = useQuery<Pick<IQuery, "fetchBoard">, IQueryFetchBoardArgs>( FETCH_BOARD, { variables: { boardId: router.query.boardId } } ); return <BoardWrite isEdit={true} data={data} />; } #0 95.00 Error occurred prerendering page "/boards/[boardId]". Read more: https://nextjs.org/docs/messages/prerender-error #0 95.00 ReferenceError: alert is not defined #0 95.00 at BoardDetail (/freeBoard_/.next/server/pages/boards/[boardId].js:308:9) #0 95.00 at d (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498) #0 95.00 at bb (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16) #0 95.00 at a.b.render (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43) #0 95.00 at a.b.read (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83) #0 95.00 at Object.exports.renderToString (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138) #0 95.00 at Object.renderPage (/freeBoard_/node_modules/next/dist/server/render.js:751:45) #0 95.00 at Object.defaultGetInitialProps (/freeBoard_/node_modules/next/dist/server/render.js:389:51) #0 95.00 at Function.getInitialProps (/freeBoard_/.next/server/pages/_document.js:530:20) #0 95.00 at Object.loadGetInitialProps (/freeBoard_/node_modules/next/dist/shared/lib/utils.js:69:29) #0 95.00 #0 95.00 Error occurred prerendering page "/boards/[boardId]/edit". Read more: https://nextjs.org/docs/messages/prerender-error #0 95.00 ReferenceError: alert is not defined #0 95.00 at BoardsEditPage (/freeBoard_/.next/server/pages/boards/[boardId]/edit.js:48:9) #0 95.00 at d (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498) #0 95.00 at bb (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16) #0 95.00 at a.b.render (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43) #0 95.00 at a.b.read (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83) #0 95.00 at Object.exports.renderToString (/freeBoard_/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138) #0 95.00 at Object.renderPage (/freeBoard_/node_modules/next/dist/server/render.js:751:45) #0 95.00 at Object.defaultGetInitialProps (/freeBoard_/node_modules/next/dist/server/render.js:389:51) #0 95.00 at Function.getInitialProps (/freeBoard_/.next/server/pages/_document.js:530:20) #0 95.00 at Object.loadGetInitialProps (/freeBoard_/node_modules/next/dist/shared/lib/utils.js:69:29) #0 95.00 info - Generating static pages (2/8) #0 95.04 info - Generating static pages (4/8) #0 95.04 [] #0 95.05 info - Generating static pages (6/8) #0 96.43 info - Generating static pages (8/8) #0 96.43 #0 96.43 > Build error occurred #0 96.43 Error: Export encountered errors on following paths: #0 96.43 /boards/[boardId] #0 96.43 /boards/[boardId]/edit #0 96.43 at /freeBoard_/node_modules/next/dist/export/index.js:498:19 #0 96.43 at runMicrotasks (<anonymous>) #0 96.43 at processTicksAndRejections (internal/process/task_queues.js:95:5) #0 96.43 at async Span.traceAsyncFn (/freeBoard_/node_modules/next/dist/trace/trace.js:75:20) #0 96.43 at async /freeBoard_/node_modules/next/dist/build/index.js:1024:17 #0 96.43 at async Span.traceAsyncFn (/freeBoard_/node_modules/next/dist/trace/trace.js:75:20) #0 96.43 at async /freeBoard_/node_modules/next/dist/build/index.js:898:13 #0 96.43 at async Span.traceAsyncFn (/freeBoard_/node_modules/next/dist/trace/trace.js:75:20) #0 96.43 at async Object.build [as default] (/freeBoard_/node_modules/next/dist/build/index.js:82:25) #0 96.55 error Command failed with exit code 1. #0 96.55 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ------ failed to solve: executor failed running [/bin/sh -c yarn build]: exit code: 1
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
@layer base { #__next { display: contents; } } #__next를 레이어 두어 스타일링 명시도를 낮춘 것에 대한 이유가 궁금합니다. 혹시 next.js 내부에서 (프레임워크 내부에서) id : __next 를 스타일링하면 내가 작성한 코드보다 우선시 되도록 하기 위함인가요??
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 선생님, yarn을 사용중이었는데, Ubuntu에서 npm이 아니라 yarn을 설치하면 되겠죠?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요 강의 감사합니다. 잘듣고잇습니다. 헤더에서 처음보는 값이 잇는데 x-nextjs-cache: STALE hit는 알겟습니다. stale이 라고 표기되는 기준이 무엇인가요? 서버의 최신 값이 아닌걸 어떻게 알죠? revalidate 되기 전에는 hit 로 표기되고 revalidate 되는 동안에는 stale 표기가 되는 건가요? 그리고 추측이 맞다면 revalidate 되는 동안이라는건 서버에 다시 요청보내고 응답받을때 까지를 말하는게 맞을까요? (* 여기는 읽으실 필요 없습니다. 질문이랑 같이 메모한거에요 그리고 revalidate 되었는데 값이 안바뀌면 캐시는 stale이라하더라도 e-tag로 2차 검증하고 태그 값이 같아서 그래도 사용한다 (강의 내용 그대로) 값이 바뀌면 hit 되고 e-tag값도 갱신한다. )
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
ssr인데 해당 html에 연결된 js 파일이 있어서 js파일로 동적으로 렌더링하면 ssr로 내려진 html 자체는 캐시가 가능한가요? *ex) ssr로 받아온 infren.html 안에 user.js 파일 있고 user.js에서 ajax로 사용자 이름만 json으로 받아와 렌더링하면 infren.html과 user.js은 캐시할 수 있나요???
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
state 끌어올리기 수업부분에서 계속 이런 오류가 나서 문의드립니다. 혹시나 해서 다른 서버들은 종료를 해놓고 이것만 다시 실행을 했는데도 계속 오류가 발생하네요. 어떤부분이 잘못된 것인가요?
