묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
스토리지 데이터에 하나만 안지워 지네요
스토리지 데이터에 다른건 다 삭제 되는데 하나 남았을때 삭제가 안되네요 전체 삭제하든 더블클릭으로 삭제하든 삭제가 안되네요 추가적으로 전체삭제를 해도 데이터가 안지워 지네요 ㅠㅠ코드입니다.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 만들기
이미지 업로드 할때 한글이름 파일 500에러
안녕하세요 제로초님 이미지 업로드할때 한글이름으로 된 이미지를 업로드하면 화면에 보여지고 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
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
조건설정 질문입니다
2번째 문제에서 else if의 조건에else if (1 =< product.length =< 4)혹은else if (product.length =< 4 && product.length > 0)는 왜 오류가 나는지 궁금합니다
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
main의 index.js export default가 Mainpage인데 app.js에서는
mainpagecomponent로 쓰던데uploadpage나 productpage는 component가 따로 안붙고 쓰던데 mainpage만 이렇게 써야되는 규칙인가요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
선생님 강의를 보면서 플젝을 진행중입니다
현재 선생님 강의를 보며 플젝을 진행하고 있는 와중에 한가지 질문이 생겼습니다!백엔드(장고)단에서 사진 여러개를 올리면 그걸 기반으로 저희가 만든 딥러닝 모델이 학습해서 학습결과를 보여주는 웹서비스를 기획중입니다. 만약 api응답이 필요없는, 예를 들면 가장 첫 페이지에 그림하나 딱 들어가있고 우측상단에 로그인/회원가입 버튼만 있는 상태인 경우는 백엔드 단에서 제공해야하는 api라던가 이런게 없으니까 해당 페이지는 react에서만 처리하면 되는건가요?그렇다면 해당 페이지에는 urls.py 등에서 설정을 해줄 필요가 없는걸까요?웹페이지 구조에 따라 달라질 수 있지만, 이번에는 프론트와 백엔드를 완전히 분리해서 진행하다보니 이런부분이 헷갈립니다
-
해결됨웹 게임을 만들며 배우는 React
memo
const Try = memo((props) => { return( <li> <div>{props.tryInfo.try}</div> <div>{props.tryInfo.result}</div> </li> ) }) 해당 함수 컴포넌트를 익명함수가 아니라 선언적 함수로 했을 때memo함수를 어떻게 적용시키나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
12강 데이터베이스에 있는 정보로 로그인 부분 오류가 계속 납니다
안녕하세요 선생님 12강 데이터베이스에 있는 정보로 로그인 하는 쪽 강의 질문 드립니다.app.post("/api/users/login", (req, res) => { // 요청된 이메일을 데이터베이스에서 찾는다 User.findOne({ email: req.body.email }, (err, user) => { if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다", }); } // 요청된 이메일이 데이터베이스에 있다면 비밀번호가 맞는 비밀번호 인지 확인 user.comparePassword(req.body.password, (err, isMatch) => { // 비밀번호가 틀릴 경우 if (!isMatch) return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다", }); // 비밀번호까지 맞다면 토큰을 생성하기 user.generateToken((err, user) => { if (err) return res.status(400).send(err); // 토큰을 저장한다. 쿠키 로컬스토리지 세션 등 // 여기서는 쿠키 사용 // x_auth라는 이름으로 토큰이 들어감 res .cookie("x_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id }); }); }); }); });위와 같이 작성된 코드를 app.post("/api/users/login", async (req, res) => { // 요청된 이메일을 데이터베이스에서 찾는다 try { const user = await User.findOne({ email: req.body.email }); if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다", }); } // 요청된 이메일이 데이터베이스에 있다면 비밀번호가 맞는 비밀번호 인지 확인 const isMatch = await user.comparePassword(req.body.password); // 비밀번호가 틀릴 경우 if (!isMatch) { return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다", }); } // 비밀번호까지 맞다면 토큰을 생성하기 const token = await user.generateToken(); // 토큰을 저장한다. 쿠키 로컬스토리지 세션 등 // 여기서는 쿠키 사용 // x_auth라는 이름으로 토큰이 들어감 res .cookie("x_auth", token) .status(200) .json({ loginSuccess: true, userId: user._id }); } catch (err) { return res.status(400).json({ loginSuccess: false, error: err }); } });이렇게 변경했습니다. 그런데 postman으로 자꾸 실행해보면 비밀번호가 틀렸다는 오류를 받고 있습니다. 그리고 서버가 꺼지는 현상이 발생하고 있습니다. isMatch문이 잘못된 것 같아서 !isMatch 예외문을 주석처리하고 실행하면 서버가 바로 꺼져버리는 현상이 발생합니다. 어떻게 코드를 변경해야 할까요?그리고 console.log()로 오는 값들을 확인하고 싶은데 cossole.log()로 찍은 보고싶은 값을 어떻게 볼 수 있나요? http://localhost:5000/api/users/login 로 들어갔는데도 안보입니당..%% 이 코드를 /register로 postman을 보낼때는 정상적으로 작동하고 monogdb에도 잘 등록이 되서 다른 부분은 오류가 아닌 것 같습니다 %%%% 스키마 부분 코드도 첨부합니다 (선새인ㅁ과 똑같이 작성함) %%userSchema.methods.comparePassword = function (plainPassword, cb) { // plainPassword 는 입력한 값 데이터베이스 비밀번호는 $2b$10 등 으로 암호화 되어 있음 // 그러므로 plainPassword를 암호호 해야 함 // bcrypt를 이용해 암호화 bcrypt.compare(plainPassword, this.password, function (err, isMatch) { // this.password는 5번째줄에 userSchema에서 가져옴 if (err) return cb(err); cb(null, isMatch); }); }; userSchema.methods.generateToken = function (cb) { let user = this; // 데이터베이스의 id 를 넣고 이름을 정해준다. // 이후 secretToken을 입력하면 user._id가 나온다 let token = jwt.sign(user._id.toHexString(), "secretToken"); // user의 token에 방금 만든 token을 넣어준다. user.token = token; user.save(function (err, user) { if (err) return cb(err); cb(null, user); }); };
-
미해결코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
serach.ts 파일 질문드립니다.
select된 상태를 확인하기 위해 search.ts에서 selectAtom을 가져오셨는데 serach.ts 파일에 대한 코드가 강의에서 누락된 거 같습니다.추가로 섹션1에서 강의해주셨던 Navigation 컴포넌트 코드에 현재 굉장히 코드가 많이 추가됐던데 해당 부분 또한 모두 누락되어있습니다...뒤에 강의에서 일일이 찾아서 정지하고 따라치는데 너무 힘드네요 ㅠㅠ
-
해결됨웹 게임을 만들며 배우는 React
Uncaught TypeError: tries.map is not a function
function getNumbers() { // 숫자 네 개를 겹치치 않고 랜덤하게 뽑는 함수 const candidate = [1,2,3,4,5,6,7,8,9] const array = [] for (let i = 0; i<4; i+=1) { const chosen = candidate.splice(Math.floor(Math.random()*(9-i)), 1)[0] array.push(chosen) } return array } const NumberBaseball = () => { const [result, setResult] = useState('') const [value, setValue] = useState('') const [answer, setAnswer] = useState(getNumbers) // lazy init const [tries, setTries] = useState([]) const submit = (e) => { e.preventDefault() if (value === answer.join('')) { setResult('홈런!') setTries(...tries, {try:value, result:'홈런!'}) alert('게임을 다시 시작합니다!') setValue('') setAnswer(getNumbers()) setTries([]) } else { // 답 틀렸으면 const answerArray = value.split('').map((v)=> parseInt(v)) let strike = 0 let ball = 0 if(tries.length >= 9) { // 10번 이상 틀렸을 때 setResult(`10번 넘게 틀려서 실패! 답은 ${answer.join(', ')}였습니다!`) alert('게임을 다시 시작합니다!') setValue('') setAnswer(getNumbers()) setTries([]) } else { for (let i=0; i<4; i++) { if (answerArray[i] === answer[i]) { strike += 1 } else if (answer.includes(answerArray[i])) { ball += 1 } } setTries({tries: [...tries, {try:value, result: `${strike} 스트라이크, ${ball} 볼입니다.`}]}) setValue('') } } } const change = (e) => { setValue(e.target.value) } return ( <> <h1>{result}</h1> <form onSubmit={submit}> <input maxLength={4} value={value} onChange={change}/> </form> <div>시도: {tries.length}</div> <ul> {tries.map((value, index) => { return ( <Try key={`${index+1}차 시도 : ${value.try}`} tryInfo={value} /> ) })} </ul> </> ) } Uncaught TypeError: tries.map is not a function 오류가 뜨는데 원인을 모르겠습니다
-
해결됨웹 게임을 만들며 배우는 React
splice 질문
뒤에다가 [0]을 붙이는 이유가 무엇인가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run dev 에러
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
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
영상 5:20 설명 질문
실패하면 then의 revalidate때문에 원래 있던 데이터가 사라진다고 하셨는데 따로 catch부분에서 처리해줘야 이전에 넣어뒀던 가짜 데이터를 삭제하는 등 처리되는 거 아닌가요?
-
미해결코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
강의자료 소스코드 질문드립니다.
더미데이터를 강의 자료에 있는 소스코드에서 가져오면 된다고 하셨는데 아무리 찾아봐도 소스코드가 안보이네요 ㅜㅜ
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
useSWRInfinite에서 index질문
const { data: chatData, mutate, setSize, } = useSWRInfinite<IDM[]>( (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, );setSize에서 prevSize +1이 1페이지 더 불러오는 거면 useSWRInfinite에서 index +1은 뭔 역할이죠? 둘 다 페이지 관련된거라 헷갈립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
swr ssr 관련 질문드립니다.
getServersideProps에서 작성한 api는 ssr이든 csr이든 무조건 실행되는데 ssr시에만 실행하고 csr에서는 막을 방법이 없을까요?페이지에서 컴포넌트로 props 넘기지 않고 swr 설정해서 초기에 ssr은 잘 되는데 그 이후 클릭으로 csr 방식으로 다른페이지 이동했다가 다시 돌아왔을때swr 사용중이고 캐싱중임에도 불구하고 getServersideProps에서 작성한 api가 매번 호출되어 25.json?id=25이런식으로 데이터 받아와서 리렌더링되는데 막을 방법이 없을까요?
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
Cannot read properties of undefined (reading 'isLoading') 오류 해결법 혹시 알 수 있을까요...
안녕하세요 제가 이번 강의를 따라하다가 파이어베이스 버전이 달라지는 시점부터 영상과 다른 내용을 찾으면서 해결하는 게 너무 힘들어서 일단 완성된 앱을 가지고 보면서 공부하자고 생각하여 완성본 코드와 똑같이 만든 후 모듈도 다 설치하고 파이어베이스에 연결도 다 했는데요 앱을 실행시키니 아래와 같은 오류가 뜹니다ㅠㅠ 정말 도저히 어떻게 해야할 지 모르겠습니다.. 정말 앱이 실행만 됐으면 좋겠는데 방법이 있을까요..?
-
미해결코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
맵 클릭 이벤트 추가 강의와 Jotai 강의 순서에 대해 건의드립니다.
강의 순서로 보면 Jotai -> 맵 클릭 이벤트 추가인데 맵 클릭 이벤트 추가 강의가 앞에 있어서 atoms폴더와 initMap 코드를 작성한적이 없는데 왜있지?라는 혼란이 생겼습니다. 저는 혹시나 하는 마음으로 다음 강의를 봐서 알았지만 다른 수강생분들도 저와 같은 혼란이 생길 거 같아 맵 클릭 이벤트 추가와 Jotai 강의 순서 변경에 대한 건의를 드립니다! 강의는 너무 좋습니다..ㅎㅎ :)
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
히로쿠 말고 fix.io로 한 경우에는도메인주소를 어떻게 불러와야하나요?
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
람다강의에서 런타임 설정 편집부분
안녕하세요 제로초님람다 런타임 설정 편집부분 화면이 좀 바뀐거같아서 질문 남깁니다! 저는 이렇게 보입니다일단 index를 exports로 바꿨는데 이대로 그냥 저장하고,진행했더니 thumb파일도 안만들어지고 이미지도 평소에 잘뜨던게 undefined로 떠서 문제를 찾아보고 있었습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
jwt must be provided 오류
안녕하세요! 섹터 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 부문 뮤테이션에서 오류 나는거 같은데 혹시 왜이러는지 알 수 있을까요?