묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
아이콘의 경우 새로 고침해야지 checkBtnCompleted가 적용됩니다
<template> <div> <ul> <li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow"> <span v-on:click="toggleComplete(todoItem, index)"> <i class="checkBtn fas fa-check" v-bind:class="{ checkBtnCompleted: todoItem.completed }"></i> </span> <span v-bind:class="{ textCompleted: todoItem.completed }">{{ todoItem.item }}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fas fa-trash-alt"></i> </span> </li> </ul> </div> </template>i 태그를 span 안에 넣은 이유는 클릭해도 아무 반응이 없어서 span 안에 넣었습니다.completed 관련한 v-bind는 새로고침 안해도 바로 반영되는데 checkBtnCompleted 관련한 v-bind는 새로고침 해야지 체크표가 회색으로 변합니다.어디가 문제인지 모르겠습니다
-
미해결누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌
firebase에서 db 데이터 값 가져오기 중...
코드샌드박스에서 작성중인 데이터입니다.https://codesandbox.io/s/upbeat-jasper-gfb978?file=/src/App.js:0-563 import "./styles.css";import { db } from "./firebase";import { doc, onSnapshot } export default function App() { const unsub = onSnapshot(doc(db, "cities", "SF"), (doc) => { let word = "hsdsi"; console.log("Current data: ", doc.data().name); word = doc.data().name; }); //word = unsub.name; return ( <div> <p> {word} </p> </div> ); // Add a new document in collection "cities"} word 변수를 선언해서 return 값으로 word 변수를 받아서 rendering 하려고 합니다. onSnapshot( ) 안에서 let word = "" ;으로 초기 변수 설정을 해주지 않으면, 에러가 계속 뜨더라구요.어쩔수없이 이렇게 선언해서 return 값에서 불러왔는데, 렌더링은 잘되지만, 코드 자체는 에러가 뜹니다.제가 볼때도 const 내부에서 선언하면 호이스팅이 안되기때문에 변수 초기화가 안되서 이렇게 하면 안될것 같지만, 일단 렌더링이 되긴하네요. 근데 코드상에서는 빨간줄이 밑줄 그어지면서잘못 코드한것처럼 에러가 나는것 같습니다.어떻게 해줘야할까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
시간 오류 - getTime()
안녕하세요. 한국에선 문제 없던 앱이. 미국에서 동작할경우 등록한 날짜보다 하루 전의 날짜로 저장되는문제를 겪었습니다.찾아보니 getTime()도 toISOString 와 마찬가지로 UTC 0+ 시간으로 작동되는 부분이 문제였습니다. 스토리지에 저장되는 타임스탬프가 UTC 기반이였던거죠. 달력에서 날짜를 설정할때 시간은 반영되지않고 12am 즉 00시로 설정되는데, 한국은 UTC +9 이라 날짜에 영향을 주지 않았지만, 제가 있는 지역의 타임존은 UTC -5이기에 하루전날의 타임스탬프가 저장되고 다시 그 타임스탬을 이용해 new Date(date)을 해줄때 전날의 날짜가 불러진다고 결론내렸습니다.이문제를 해결하기위해, 스트로지에 타임스탬프가아닌 getStringDate 으로 뽑아낸 스트링 날짜를 넣어주었고. 다이어리 리스트에서 sort 를 위한 비교를할때만 getTime()을 써주었습니다. 전문가의 의견을 듣고싶습니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
왜 발생하는 걸까요??Property or method "store" is not defined on the instance but referenced during render.
Todo-Header.vue 파일에 코딩된 내용은 아래와 같습니다.<template> <header> <!-- <h1>TODO it!</h1>--> <h1>{{ this.$store.state.headerText }}</h1> </header> </template>위 코드를 실행했을때 store 못 찾는 다고 나오는데 이유를 모르겠네요 ㅠ.ㅠ[Vue warn]: Property or method "store" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.found in---> <TodoHeader> at src/components/TodoHeader.vue<App> at src/App.vue<Root>
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
화살표 함수 질문드립니다.
화살표 함수 질문드립니다.const a = (a ) => {a *b } 보통 이렇게 가는데 어떤건 const a = (a ) => { ( a* b ) } 으로 괄호가 들어가더라구요 어떤 경우에 괄호가 들어가고 어떤 경우에는 빠지는지가 궁금합니다 .
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
업로드 후 홈화면에서 이미지가 보이지 않습니다
데이터 베이스에도 기록이 잘 들어가고 사이트 홈화면에도 잘 뜨는데 화면의 이미지가 안뜹니다.uploads파일에도 이미지 다 잘 들어갑니다.인강과 데이터베이스를 비교해봤을 때 경로문제인것같긴한데 어떻게 수정을 해야할까요?근데 DB경로의 역슬래시를 슬래시로 바꾸어도 안뜨고 uploads에는 사진도 잘 들어가고 사진의 경로를 봤을때도 동일해서... 왜 안뜨는걸까요?단순히 한사진의 오류라고생각했었는데 등록한 것 모두 이렇게 되어서...어딜 어떻게 수정해야할지모르겠어서... 일단은 깃허브링크 함께올려봅니다... 홈사이트 화면개발자 툴 상품넣고 난뒤DB데이터 베이스물건 등록 후 vscode에 뜨는것 깃허브 링크: https://github.com/Dalrae03/webstudy/commit/7a5981dafabdbf009b40c0c5814e7e7c6f3ea9dehttps://github.com/Dalrae03/webstudy/commit/c9106654b1d6badba9ae64ce744a11da46b719a5
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
일정시간마다 자동으로 데이터를 생성하는 코드를 짜려고 합니다.
외부 api 에서 ajax를 통해 데이터를 받아오고, 받아온 데이터를 카피해서 mysql 에 삽입하고자 합니다.일정시간마다 반복하는 것은 setInterval 을 활용하면 되는것까지는 구글링을 통해 알아냈는데본 강의에서는 데이터 생성을 postman 을 사용해 수동으로 데이터를 입력하고 전송하셔서 코드 상으로는 어떻게 구현해야 할지 궁금해서 여쭤봅니다! 1줄요약!postman을 통해 했던 데이터 삽입을 코드로 하는 방법이 궁금합니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
image 파일에서 vscode로 드래그 앤 드롭을 처리할 수 없다고 합니다
압축을 푼뒤 진행해도 에러가 납니다The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.라고 나오고요 hexeditor를 깔아도 해결이 안됩니다찾아보니 50mb를 넘는 자료를 vs코드에서 지원을 못한다고 하는데요 참고로 집에 컴퓨터가 없어 pc방 컴퓨터로 배우는 중입니다
-
해결됨[코드캠프] 시작은 프리캠프
회원가입 양식 과제
안녕하세요 과제를 해봤는데 예쁘게 잘 되긴 하였습니다.혹시 여기서 더 고쳐야 되는 부분이 있을까요?<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="02-signup.css" /> </head> <body> <div class="container"> <div class="member-container"> <div class="header"> <div>회원 가입을 위해</div> <div>정보를 입력해주세요</div> </div> <div class="user-info"> <div id="email">* 이메일</div> <div>* 이름</div> <div>* 비밀번호</div> <div>* 비밀번호 확인</div> </div> <div class="gender"> <input type="radio" name="gender" /> <label for="women">여성</label> <input type="radio" name="gender" /> <label for="men">남성</label> </div> <div class="agree-check"> <input type="checkbox" /> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <div class="btn"> <button>가입하기</button> </div> </div> </div> </body> </html>* { box-sizing: border-box; font-family: "Noto Sans CJK KR"; font-style: normal; } body { display: flex; flex-direction: row; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; width: 670px; height: 960px; margin-top: 60px; margin-bottom: 60px; background: #ffffff; border: 1px solid #aacdff; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; } .member-container { display: flex; flex-direction: column; align-items: center; width: 470px; height: 818px; margin-top: 72px; margin-bottom: 70px; } .header { width: 466px; height: 94px; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068ff; } .user-info div { font-weight: 400; font-size: 16px; line-height: 24px; color: #797979; border-bottom: 1px solid #cfcfcf; width: 466px; height: 80px; margin-top: 21px; } .user-info #email { border-bottom: 1px solid #0068ff; } .gender { display: flex; align-items: center; justify-content: space-between; width: 140px; height: 23.94px; margin-top: 50px; } .gender input { width: 20px; height: 19.95px; background: #ebebeb; border: 1px solid #d2d2d2; } .gender label { font-weight: 400; font-size: 16px; line-height: 24px; } .agree-check { width: 454px; height: 21.06px; margin-top: 52.05px; font-weight: 400; font-size: 14px; line-height: 21px; color: #000000; } .btn { display: flex; flex-direction: column; margin-top: 60px; width: 470px; height: 106px; border-top: 1px solid #e6e6e6; } button { margin-top: 30px; width: 470px; height: 75px; font-weight: 400; font-size: 18px; line-height: 27px; text-align: center; color: #0068ff; background: #ffffff; border: 1px solid #0068ff; border-radius: 10px; }잘 듣고 있습니다. 제가 들어본 강의 중에서 최고로 안 헷갈리게 가르쳐주셔서 좋습니다.
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
깃헙
권한 요청드립니다.인프런 아이디 : pm@nuriapp.co.kr인프런 이메일 : pm@nuriapp.co.kr깃헙 아이디 : mursh330@gmail.com깃헙 Username : jooahnlee 감사합니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
API 보안 관련 질문입니다!
안녕하세요!현재 올려주신 강의 내용을 바탕으로 쇼핑몰 상품의 정품 등록을 하는 서비스를 구현하려고 하고 있습니다.정품 등록 과정에서 사용자가 정품 인증 코드를 입력하면, API 서버를 통해 데이터베이스에 해당 코드가 존재하는지 찾은 후, 존재한다면 해당 코드와 사용자를 매칭시키는 방식으로 우선 구현하고자 합니다. (약간 문화상품권 등록 같기도 하네요 ㅎㅎ)물론 위 내용에 관련된 코드 질문은 아니구요 ㅎㅎ 위와 같은 내용이 구현되었을 때 악의를 가진 사용자가 postman 등 툴을 통해 API 서버에 무작위로 정품 인증 코드를 보낸 후, 정말 우연히 존재하는 코드를 찾은 경우에 그 코드를 사용해서 정품 등록을 할 수 있을 것 같은데, 이를 어떻게 대비하는게 좋을지 궁금합니다. rate limit이 생각나긴 하지만... 그리 완벽한 방법은 아닐 것 같아서요..!!그리고 API 서버 주소가 외부에 노출이 되지 않는 경우엔 무차별 대입 공격을 하기도 힘들텐데, 개발자도구에서 소스를 확인하면 결국 API 서버 주소가 나오잖아요~ 그래서 API 서버 주소를 쉽게 알아내지 못하게 하는 방법이 있을지도 궁금합니다.또 하나 구현해야 하는 기능이 사용자 본인이 정품 등록한 제품을 조회할 수 있도록 하는 기능인데요, userID가 API 서버에 전송되면 데이터베이스에서 해당 userID로 등록된 제품들을 찾아서 보여주도록 구축하려고 합니다. 다만 이 경우에도 위와 비슷하게 API 서버 주소를 알고있는 사람이 다른 사람 ID를 API 서버에 전송해서 그 사람의 정품 등록된 제품을 조회할 수 있는 문제점이 있을 것 같은데요, 이를 어떻게 해결하는게 좋을지도 의견 여쭤보고 싳습니다.요약하자면 다음과 같습니다.:API 서버에 무작위 정품인증 코드를 보내는걸 어떻게 막는게 좋을까요? 제가 생각한 방법은 rate limit인데, 더 좋은 방법이 있을까요?API 서버 주소를 개발자도구 등을 통해 쉽게 알아내지 못하게 하는 방법이 있을까요?userID를 통해 API 서버에서 해당 사용자의 정보를 가져오는 경우, 타인이 API 서버와 통신해서 다른 사용자의 정보를 가져오는걸 어떻게 막을 수 있을지 궁금합니다. 제 짧은 생각으로는 ID를 암호화해서 API 서버와 통신해야 될 것 같은데, 조금 막막한 감이 있네요.. 현재 제가 사용하는 프론트엔드가 react가 아니라 순정 html+JS인지라...약간 질문이 두서없고 강의 주제랑 조금 벗어난 것 같지만... 잘 부탁드리겠습니다..ㅎㅎ지금 질문드리는 내용이 결국 API 서버 보안과 관련된 내용인 것 같은데, 혹시나 해당 내용과 관련해서 말씀해주고 싶으신 내용이 있으시다면 설령 TMI라고 생각드실지라도 얼마든 알려주세요!! 열심히 배우겠습니다. 💪좋은 강의 감사드립니다. 좋은 하루 되세요!
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
design > common 타입 에러
깃을 클론하려다 키체인 문제가 쉽게 해결되지 않아서 다운받아 압축을 풀고 Visual Studio Code에서 폴더에 접근하였습니다. 이후 common 폴더에서 npm install을 하였더니 아래와 같은 에러가 발생했습니다. 그래서 npm audit fix --force를 실행하였는데 (sudo 붙여서도 확인) 아래같은 로그가 뜨네요..이후 그냥 npm run serve로 실행시켜보려고 했는데 아래와 같은 타입 에러가 발생했습니다.이래저래 방법을 찾아보다가 현재는 아래 네 개의 항목이 설치가 안되는 것 같은데 혹시 어떻게 해결하면 좋을까요?
-
해결됨입문자를 위한 자바스크립트 기초 강의
질문합니다!
제가 모르는 부분이나 이해가 안 되는 부분을 구글링을 통해 찾아 보는 편인데 구글링 할 때마다 예제에 var이 나와서 구글링 했을 때 이해가 좀 힘든 상황입니다지금 강의를 함수 3편까지 본 상태인데 var을 설명해 주시는 부분이 따로 있을까요? 아니면 이 강의에선 var을 다루지 않는 건가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm install -g serve 설치 오류가 납니다..ㅠㅠ
hyunwooji@jihyeon-uui-MacBook-Air emotiondiary % npm install -g servenpm WARN config global --global, --local are deprecated. Use --location=global instead.npm ERR! code EACCESnpm ERR! syscall mkdirnpm ERR! path /usr/local/lib/node_modules/servenpm ERR! errno -13npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'] {npm ERR! errno: -13,npm ERR! code: 'EACCES',npm ERR! syscall: 'mkdir',npm ERR! path: '/usr/local/lib/node_modules/serve'npm ERR! }npm ERR! npm ERR! The operation was rejected by your operating system.npm ERR! It is likely you do not have the permissions to access this file as the current usernpm ERR! npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in:npm ERR! /Users/hyunwooji/.npm/_logs/2023-02-19T07_24_53_420Z-debug-0.log 구글링 해봣을때는 npm 업데이트 문제인거같다고로 찾아서npm update 도 해봣는데 전혀 해결되지 않고 더 꼬이고 있는거같습니다.. 완강을 앞두고 좌절중이네요ㅠ 오늘 다 완강하고 싶었는데 도저히 해결이 안되어 질문남깁니다 감사합니다!!
-
미해결자바스크립트로 알아보는 함수형 프로그래밍 (ES5)
_get 함수 부분이 너무 이해가 안갑니다 ㅠ
안녕하세요.지금 강의를 여러번 돌려보고 천천히 생각하는데도전혀 이해가 되지 않습니다 ㅠ // 2. _get 만들어 좀 더 간단하게 하기 console.log( _map( _filter(users, function(user) { return user.age >= 30; }), _get('name'))); // function(user) { return user.name}여기 코드에서 _get('name')에 인자가 더 들어가야되지않나여??...예시들 중에서var user1 = users[0]; console.log(user1.name); console.log(_get(user1, 'name')); console.log(_get('name')(user1)); var get_name = _get('name'); console.log( get_name(user1) );여기서 보면 _get('name')(user1)이라고 썼는데_map에서 사용했을때 어떻게 저렇게 동작이 되는지 잘 이해가 안되네요 ㅠ 설명 좀 부탁드리겠습니다 ㅠ다른 질문들 보니 저랑 같은 생각하시는 분께 답변이차근차근 생각해보라고 되어있는데 계속 봐도 이해가 안가서 다시 질문올립니다 ㅠ
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
4092 Error
8080으로 안되서 검색해서 이것저것 해봐도 안되길래 8090으로 하니까 되는데 8090을 써도 상관 없나요?
-
해결됨풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
header 의 CSS 값 중 left:0 으로 설정한 부분이 잘 이해가 되지 않습니다.
[모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기3] 12:10 부분에서, header 의 CSS 값 중 top :0 인 것은 이해가 되는데,left :0 으로 설정한 이유는 잘 모르겠습니다.이미 width:100% 로 설정해서 좌우에 딱 맞게 설정된것으로 이해했는데, 여기에다가 또 left:0 을 해서 중앙이 아닌 좌측 정렬을 하는 이유가 있는걸까요?
-
미해결처음 만난 리액트(React)
Event handler 질문입니다.
변수 handleConfirm의 Arrow function이 실행하는 것은 어떤걸 받아서 무엇을 하는 건가요?prevIsConfirmed이 뭘 하는 녀석인지 모르겠습니다.
-
미해결인터랙티브 개발 실무 끝장내기 [역량 강화편]
모바일 3D 입체 카드 제작 아이폰에서 에러
안녕하세요.모바일 3D 입체 카드 제작 강의 최종 완성본 파일을 아이폰에서버튼을 클릭하고 확인했을 때 아래의 이미지처럼 에러가 발생을해서 아이폰에서는해당 화면을 확인할 수가 없습니다. 서버에 올려서도 확인 해봤는데 동일합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
우분투에 몽고디비 설치 후 실행이 안됩니다.
제가 사용중인 우분투 버젼입니다.몽고 디비 설치를 노션 자료에 있는대로도 설치를 해보고, 삭제하고 공식문서에 있는대로도 설치를 해봤는데(노션에는 공개키가 server-5.0 으로 되어있고 공식 문서는 server-6.0 으로 되어있더라구요)설치 후에 실행을 해보면 [fail] 이 뜨면서 실행이 되지 않네요.구글링해서 여러가지 방법 따라해봐도 계속 fail 이어서 질문글 올립니다.추가로 이상한 점은 mongod --version 이라고 치면버전이 나오는게 아니라 Illegal instruction 라고 나옵니다.++구글에 mongod --version Illegal instruction 라는 키워드로 검색을 해서 https://info-orgs.blogspot.com/2021/10/how-to-install-mongodb-v44-mongodb.html이 글을 보고 몽고 디비 4.4 버전을 설치해봤는데mongod --version 이라고 치면 이제 버전이 나오긴 하는데 여전히 실행은 실패하네요.$ service mongod start * Starting database mongod /etc/init.d/mongod: 136: ulimit: error setting limit (Operation not permitted) /etc/init.d/mongod: 142: ulimit: error setting limit (Operation not permitted) start-stop-daemon: start-stop-daemon: unable to open pidfile '/var/run/mongod.pid' for writingunable to set gid to 121 (Permission denied) (Operation not permitted) start-stop-daemon: child returned error exit status 2
