묻고 답해요
138만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
vercel 배포 후 지도서비스가 네이버 API key인증 실패관련문의..
안녕하세요~버셀에 프로젝트를 베포할때 .env 파일에 있는NEXT_PUBLIC_NCP_CLIENT_ID와 키넘버를 vercel에 직접 입력했는데요..env 파일도 있고요. 결론적으로 둘다 입력하고 파일을 가지고 있는 경우에는 네이버 클라우드에 도메인을 등록하더라도 API Key 인증에 실패되나요?페이지를 새로고침 했을 시 지도가 잠깐 정상적으로 떳다가 바로 인증에 실패했다고 뜨지 않습니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
메인페이지에서 fetchBoardsOfTheBest 질문입니다.
(위 화면은 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=" ? " 어떻게 가져와야할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
openWeartherMap - fetch()부분
강의 영상에서 https:// 해당 부분 에서 3.0을 2.5로 바꿔서 수정하면 오류가 해결된다고 하셨는데 적용 시켜봐도 오류가 계속 유지 됩니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
emotion styled 에서 백틱
안녕하세요리액트 01-02 emotion 강의를 들을때 styles 폴더 안에 만든 emotion.js 입니다.강사님과 다르게 백틱 안에서의 문법이 문자열 처리된 것처럼 나오고 있습니다.제가 사용하는 윈도우, 맥 모두 이러한 증상이 나타나는데 윈도우는 문법 적용이 안되고 맥은 적용이되네요..자동완성도 안되니까 많이 불편한데 vscode 에서 문제인 걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 게시글의 유효기간이 따로 있나요?
중고마켓으로 포트폴리오를 만드는중인데 혹시 제 게시물이 사라질 수도 있을 것같아서 유효기간같은게 있는지 궁금합니다. 아니면 계정당 상품등록 개수에 제한이 있는지 궁금합니다.
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
설치단계 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 저는 지금 막 시작한 코린인데요 . 지금 사실 최신 버신에서는 설치할떄 물어보는게 많더라구요. 그런데 영상처럼 설치후에, npm run dev를 했는데 에러가떠서 영상에는 제가 잘못아는진모르겟지만 자세히설명이안되있어서 막혀있습니다 ㅠㅠ어떡하죠?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재버전의 포트폴리오/퀴즈 깃 레포가 없는것 같습니다.
포트폴리오/퀴즈가 과거 강의와 달라진 것 같은데 해당 과제를 구현한 깃 레포를 찾을수 없어서 적절한 도움을 받기 어렵습니다. 현재 과제 풀이는 어디서 확인할 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
초기설정 질문
pages 폴더랑 styles폴더가 없는상태로 초기 설정이 되는데 어떻게 설정해야 할까요?? ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://practice.codebootcamp.co.kr/graphql 접속 안되는 현상
안녕하세요~ https://practice.codebootcamp.co.kr/graphql 이 링크로 접속했는데 무한 로딩?이 되면서 접속이 안되는 현상이 발생합니다..! 와이파이도 바꿔보고 핸드폰에서도 접속해보고 했는데 계속 이러더라구요 아까는 잘 접속이 됐었는데... 다른 주소(https://backendonline.codebootcamp.co.kr/graphql) 로 접속을 할땐 잘 되는데 유독 저 주소만 그러네요!! 그래서인지 실습할 때(apollo-client의 사용 및 _app.js 작동원리 수업) 요청하기 버튼을 클릭하면계속 아무 반응이 없다가 기다리다보면 이렇게 뜨더라구요!! 왜그러는지 모르겠어서 진도를 못나가구 있습니다..ㅜ.ㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 설치후 tsconfig.json에 자동 생성이 되지않습니다.
타입스크립트를 깔때 devdependencies에서 애초에 eslint하고 eslint-config-next가 같이 안까ㅓㄹ려서 수동으로 깔아줬는데 그래도 안되네요. 자꾸 기초적인것들 질문해서 죄송합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
전체 상품 count api 는 없나요?
모든 사용자가 등록한 상품을 보여주고 거기다 페이지네이션 까지 걸고 싶은데내가 구매한 상품 카운트 api는 있지만전체 상품 구매 api는 없는거 같아서요 ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
갑자기 에러가 나네요 하... ㅠㅠ
항상 수업 잘 듣고있습니다! 질문이 하나 있어서 글 올립니다. 다름이 아니라ver2 section2 듣고 강의 들을때까지는 문제 없었는데 이제 수업 다 듣고 포트폴리오 작성하려고 하는데 yarn dev를 터미널에 쳤는데 에러가 납니다. Error: UNKNOWN: unknown error, readlink 'C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\class\.next\server\middleware-manifest.json'] { errno: -4094, code: 'UNKNOWN', syscall: 'readlink', path: 'C:\\Users\\82109\\OneDrive\\바탕 화면\\codecamp-frontend-mentee\\class\\.next\\server\\middleware-manifest.json'error Command failed with exit code 1. 이렇게 에러가 나서 노드모듈 지우고 캐쉬 지우고 다시 시작해 봐라 구글링했더니 저렇게 하라고 해서 했는데도 안되더라구요 ㅠㅠ 근데 강사님 포트폴리오 리뷰 해주시는거는 또 되더라구요 버전 문제 인건지 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Unexpected token ```, Expected a string literal 이게 뭐죠??
항상 이런데 도대체 뭐가 문제인지 모르겠네요 import {useRouter} from `next/router`에서 오류가나네요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지 업로드 오류
사진첨부 부분에 이미지를 넣었는데 오류가 뜨는데 이유가 뭘까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
aws 비용
배포까지 다 진행을 했는데aws비용이 청구가 되가지구요,제가 설정을 잘못한걸까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Graphql 질문
저는 강사님처럼 빽틱을 쓰면 글자로 "" 안에 글쓴거처럼 글자로 읽는데 상관없는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
지원 중단된 기능이 사용됨 이라고 나오네요 ㅠㅠ
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]); } }
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
getStaticPaths-> getStaticProps
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인가요??
-
해결됨Next.js 시작하기(feat. 지도 서비스 개발)
[Next.js에 Private Route 관련문의]
안녕하세요. 강의 잘 보고 있습니다. 질문이 몇가지있어 문의드립니다. 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로 로그인 체크 하는 코드는 많이 검색이 되는데 공통으로 오류 처리는 검색이 딸려서 그런지 찾을수가 없네요.