묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드에서 궁금한게 있습니다.
<>{content}</> 로 쓰면 에러가 안나고{content} 로쓰면 에러가 나는 이유가 뭘까요 ??? 작성자 : {id} | 감정 : {emotion}<div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div>여기서 강의 보면 id,emotion는 <></>을 안쓰는데 content를 쓰는 이유가 뭔지 모르겠습니다. 어차피 const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => {전부 List로 부터 받아오는데 누군 <>{content}</>이고 누군 그냥 {id} {emotion}인 이유가 먼지 궁금해요그리고 data.filter((it)=>(it.id!==targetId)); 을 data.filter((it)=>{it.id!==targetId}); 로 바꾸면 왜 에러가 나는걸까요 ?? ?언제 괄호를 쓰고 언제 중괄호를 써야하는지 정확히 알수있을까요 ??? 아래는 전체 코드입니다.import { useRef, useState } from "react"; const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => { const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIsEdit(!isEdit); const [localContent, setLocalContent] = useState(content); const handleDelete = () => { console.log(id); if (window.confirm(`${id}번쨰 일기를 삭제하겠습니까?`)) { onDelete(id); } }; const handleQuiteEdit = () => { setIsEdit(false); setLocalContent(content); }; const handleEdit = () => { onEdit(id, localContent); }; return ( <div className="DiaryItem"> <div className="info"> <span className="author_info"> 작성자 : <>{id}</> | 감정 : <>{emotion}</> </span> <br /> <span className="date">날짜: {create_date}</span> </div> <div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div> {isEdit ? ( <> <button onClick={handleQuiteEdit}>수정취소</button> <button onClick={handleEdit}>수정완료</button> </> ) : ( <> <button onClick={handleDelete}>삭제하기</button> <button onClick={toggleIsEdit}>수정하기</button> </> )} </div> ); }; export default DiaryItem;
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
미로 탐색 코드 리뷰 부탁드립니다!
반복문을 안 쓰고 짜 봤는데 답은 그대로 나오지만 이렇게 짜도 되는 건지 궁금합니다. 1로 바꿔줬다가 0으로 바꿔주는 시점을 이렇게 해도 괜찮을까요?? 풀이에서는 DFS 돌아올 때마다 해주시는 것 같아서 질문 드립니다! const solution = (miro) => { let ans = 0; const DFS = (N, M) => { if (N < 0 || M < 0 || N > 6 || M > 6) return; if (M === 6 && N === 6) { ans++; } else { if (miro[N][M] === 0) { miro[N][M] = 1; DFS(N - 1, M); DFS(N, M - 1); DFS(N + 1, M); DFS(N, M + 1); miro[N][M] = 0; } } }; DFS(0, 0); return ans; }; console.log( solution([ [0, 0, 0, 0, 0, 0, 0], [0, 1, 1, 1, 1, 1, 0], [0, 0, 0, 1, 0, 0, 0], [1, 1, 0, 1, 0, 1, 1], [1, 1, 0, 0, 0, 0, 1], [1, 1, 0, 1, 1, 0, 0], [1, 0, 0, 0, 0, 0, 0], ]) );
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
저도 가로 배치가 잘되다가 세로 배치가 되어 질문드립니다.
저도 강의 따라가다가 세로로 갑자기 변환되어서 답변 내용대로 해봤지만 고쳐지지를 않아서 질의 드립니다 아래 코드는 html코드입니다<html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> <body> <div id="header"> <div id="header-area"> <img src="images/images/icons/logo.png"/> </div> </div> <div id="body"> <div id="banner"> <img src="images/images/banners/banner1.png"/> </div> <h1>판매되는 상품들</h1> <div id="product-list"> <div class="product-card"> <img class="product-img" src="images/images/products/basketball1.jpeg"/> <div class="product-contents"> <span class="product-name">농구공 1호</span> <span class="product-price">50000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> </div> <div class="product-card"> <img class="product-img" src="images/images/products/keyboard1.jpg"/> <div class="product-contents"> <span class="product-name">키보드 1호</span> <span class="product-price">30000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> <div class="product-card"></div> <div class="product-card"></div> </div> <div id="footer"></div> </body> </head> </html>아래는 css코드입니다 * { margin: 0; padding: 0; } #header{ height: 64px; display: flex; justify-content: center; border-bottom: 1px solid gray; } #body{ min-height: 100%; width: 1024px; margin: 0 auto; padding-bottom: 24px; } #footer{ height: 200px; background-color: red; } #banner{ height: 300px; background-color: yellow; } #header-area{ width: 1024px; height: 100%; display: flex; align-items: center; } #header-area > img{ width: 128px; height: 36px; } #body > h1{ margin-top: 16px; } #banner > img{ width: 100%; height: 300px; } #product-list{ display: flex; flex-wrap: wrap; margin-top: 12px; flex-direction: row; } .product-card{ width: 180px; height: 300px; margin-right: 12px; margin-bottom:12px; border: 1px solid rgb(230, 230, 230); border-radius: 12px; } .product-img{ width: 100%; height: 210px; } .product-contents{ display: flex; flex-direction: column; padding: 8px; } .product-name{ font-size: 14px; } .product-price{ font-size: 16px; font-weight: 200px; margin-top: 4px; } .product-seller{ display: flex; align-items: center; margin-top: 12px; } .product-avatar{ width: 24px; }바쁘시겠지만 답변 해주시면 감사하겠습니다!+해당 코드 진행 후 개발자 도구 이용해서 보면 flex에 의해 정해지지않은 보라색 칸이 있는데 해당 칸 처리가 힘들어 추가 질문 올립니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드 질문있습니다.
<DiaryItem key={it.id} {...it} />스프레드 연산자는 이해가 가는데 key={it.id} 옆에 바로 붙혀서 state객체를 넣을수 있는건가요 ?? 이건 어떤 문법일까요 <DiaryItem key={it.id} {...it} /><DiaryItem key={it.id} diary={it} />...을 써서 넣는거랑 안쓰고 앞에 diary = {it}으로 명시하고 넣는거랑 어떤차이가 있을까요 ? 전 이렇게 바꿨는데 ..이해가 안되서import DiaryItem from "./DiaryItem"; const DiaryList = ({diaryList})=> { console.log(diaryList); return ( <div className="DiaryList"> <h2>일기리스트</h2> <h4>{diaryList.length}개의 일기가 있습니다</h4> <div> {diaryList.map((it) => ( <DiaryItem key={it.id} diary={it} /> ))} </div> </div> ); }; DiaryList.defaultProps = { diaryList : [], } export default DiaryList;
-
해결됨문법 공부 다음엔, 자바스크립트 프로젝트 101
해결되지않는 부분이 있어서 질문드려요
삭제버튼도 아이콘폰트로 바꾸고 이것저것 추가해서 해봤습니다.근데 모든 작동이 다 잘되는데, 만약 5개의 목록이 있고 처음에 각 항목의 삭제버튼을 클릭할시에는 다 잘 되는데요,근데 1,2개 삭제해보고 나서 새로고침을 누른 후에는 각 항목의 삭제버튼을 클릭하면 화면상에는 제대로 되는데 로컬스토리지는 무조건 다 삭제가 됩니다. delItem 부분에서는 잘못이 있는걸까요?const form =document.querySelector('form'); const input =document.querySelector('input'); const ul = document.querySelector('ul'); const todoCount = document.querySelector('.todo-count'); const clearAll = document.querySelector('.clear-all'); let todos = []; const save = () => { localStorage.setItem('todos', JSON.stringify(todos)); }; const updateTodoCount = () => { todoCount.textContent = todos.length; }; const delItem = (event) => { const target = event.target.parentElement; todos = todos.filter((todo) => todo.id !== parseInt(target.id)); save(); target.remove(); updateTodoCount(); }; const addItem = (todo) => { if(todo.text !== ''){ const li = document.createElement('li'); const span =document.createElement('span'); const icon = document.createElement('i'); icon.classList.add('fa-solid','fa-trash-can'); span.innerText = todo.text; icon.addEventListener('click',delItem); ul.appendChild(li); li.appendChild(span); li.appendChild(icon); li.id = todo.id; updateTodoCount(); } }; const handler = (event) => { event.preventDefault(); const todo = { id: Date.now(), text: input.value, }; if((input.value) !== '') { todos.push(todo); addItem(todo) save(); input.value = ''; } }; const init = () => { const userTodos = JSON.parse(localStorage.getItem('todos')); if(userTodos){ userTodos.forEach((todo) => { addItem(todo); }); //todos = userTodos; todoCount.textContent = 0; } }; clearAll.addEventListener('click', () => { ul.innerHTML = ''; todoCount.textContent = 0; todos = []; localStorage.removeItem('todos'); }); init(); form.addEventListener('submit',handler);
-
해결됨[코드캠프] 시작은 프리캠프
final 과제 타이머 부분 질문드립니다!
안녕하세요! 제가 파이널 과제를 진행하다가 인증번호 전송부터 인증 완료 단계의 자바스크립트 코드를 작성하면서 어려움을 겪고 있어서 문의드립니다. 해당 코드를 적용하여 html 파일을 실행시킨 결과 인증완료 버튼을 눌러도 인증번호만 초기화가 되고 타이머는 그대로 1초씩 감소하는 상태가 유지되었습니다. clearInterval(timer)를 하면 반복함수가 멈춰 document.getElementById("timer").innerText = "3:00";의 결과로 3:00이 되는 것으로 생각했는데 왜 초기화가 되지 않는지 도통 모르겠습니다. <div class="certification"> <div id="certificationNumber">000000</div> <button id="sendButton" disabled = "true" onclick="submit()">인증번호 전송</button> </div> <div class="certification"> <div id="timer">3:00</div> <button id="completeButton" disabled = "true" onclick="completeMessage()">인증 확인</button>let timer let isStarted = false const submit = () => { const token = String(Math.floor( Math.random() * 1000000)).padStart(6, "0"); document.getElementById("certificationNumber").innerText = token; document.getElementById("sendButton").setAttribute("disabled", "true") document.getElementById("completeButton").removeAttribute("disabled") if(isStarted === false) { // 타이머가 작동중이 아닐때 isStarted = true let time = 180 timer = setInterval(function(){ if(time >=0) { let min = Math.floor(time/60) let sec = String(time%60).padStart(2, "0") document.getElementById("timer").innerText = min + ":" + sec; time = time -1 } else { document.getElementById('completeButton').disabled = true; isStarted = false document.getElementById("certificationNumber").innerText = "000000"; document.getElementById("timer").innerText = "3:00"; clearInterval(timer) } },1000) } else { } } const completeMessage = (timer) => { clearInterval(timer) alert("인증이 완료되었습니다.") document.getElementById('completeButton').disabled = true; isStarted = false document.getElementById("completeButton").innerText = "인증 완료" document.getElementById("signup").disabled = false; }
-
해결됨JavaScript로 배우는 fullPage + anime + SVG Animation 포트폴리오
질문드립니다.
#sec3에서 물결 움직이는거에서요,브라우저 화면을 키우면 꽉차지 않고 잘리는 부분 수정에서left:o 을 빼 한다고 하셨잖아요...근데, 좀더 큰 모니터에서 확인을 해보니 여전히 꽉차지 않고 잘려나오는데 어떻게 해야 할까요?이것저것 해봤는데, 잘 안되어서 피그마에서 좀더 크게 그려야 하는걸까요^^.sec3_svg{ fill: #667eea; stroke: none; position: absolute; /* left: 0; ->큰화면에서 꽉차게 안나옴 */ bottom: 0; width: 100%; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
redis 질문있습니다.
redis를 도커로 설치하는 이유가 따로 있을까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
gsap 상업적 사용여부
Club GreenSock을 제외하면 상업적으로 무료로 사용가능한건가요?
-
해결됨Vue 3 시작하기
강의 영상이 끊겨서 계속 로딩중입니다.
vue2 vue3의 차이점, 개발환경 등 강의가 24초, 15초에서 계속 무한로딩됩니다. 강의 올리신지 얼마안되어서인지, 영상이 매끄럽지 않은거 같습니다. 이후 업로드된 강의 전부 검수하셔야 할거 같네요!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
brew 명령어를 찾을수 없음
몽고 DB root설정하는 부분에서 이런 오류가 나는데 어떻게 해결해야할까요?
-
해결됨[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지
switch-case문 질문있습니다!
수업 정말 잘 듣고 있습니다, 강사님!다름이 아니라, switch-case문에서 case문에 들어가는 조건으로 0,1,2,3,4 등이 아닌 조건식을 넣고 싶은데 undefined가 나오네요. 조건식을 활용하려면 무조건 if-else문을 사용해야하는 건가요? switch-case문으로는 조건식을 사용 못하는 건지 궁금합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
섹션2-8 openWeatherMap API
const weatherSearch = function (position) { const openWeatherRes = fetch( `https://api.openweathermap.org/data/2.5/onecall?lat=${position.latitude}&lon=${position.longitude}&appid=4bdfd4f45f4d597908e29058919e8707` ); console.log(openWeatherRes); }; const accessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, longitude: position.coords.longitude, }; weatherSearch(positionObj); }; const askForLocation = function () { navigator.geolocation.getCurrentPosition(accessToGeo, (err) => { console.log(err); }); }; askForLocation(); fetch 안에 2.5로 변경해도 계속 오류가 떠요 ㅠ어떻게 해야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
비주얼 스튜디오 코드 폴더명 변경시 오류
section03 의 03-10 폴더를section04 에 복사 후이름을 변경하면error:EPERM: OPERATION NOT PERMITTED 가떠서, 비주얼스튜디오코드를 종료후 다시 시작해야 변경이 되는데, 복사 붙이기로 붙여넣은 후에는 별다른 작업을 하지 않았는데도, 왜 이런 오류가 발생되는 걸까요? node_modules를 제외하고 복사 후 npm i 로 설치해야 하나요? 매번 계속 시작하려니 시간이 많이 낭비되는듯하여질문 드립니다~답변주시면 감사하겠습니다~
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vuex 관련 질문
안녕하세요~ 캡틴 판교님 수업을 잘 듣고 실무에서도 잘 사용 중입니다. 다만, 사용하다보다가 발생한 궁금증이 있습니다.Vuex의 장점들은 어디서나 쉽게 찾아볼 수 있는데, 단점이라 하면 무엇들이 있을까요? 저희가 props와 event로 component간 데이터를 주고 받는데, component의 depth가 깊어지면 단순 데이터를 내리고 올림에 있어서 복잡도도 증가하고번거로움도 생기잖아요? 그래서 eventbus가 있는데, 이 녀석은 naming rule을 아무리 잘 정해도 많이 사용하다보면서로 호출하는 곳들이 얽히고 나중엔 어디서 사용하는지 모르는 경우가 태반이라 사실상저희는 암묵적으로 금지하고 있는 상황입니다.(사실 얘도 언제 사용해야 가장 powerful하게 사용할 수 있는지 궁금하네요.) 그래서 vuex를 많이 사용하는데, vuex 사용에 있어서도 내부적으로 갑론을박이 있습니다.vuex도 eventbus 처럼 아무데서나 import만 하면 접근할 수 있어서 중구난방으로 접근이 되어서결국 관리가 복잡해진다.(실제도 redux도 처음에 적용했다가 다 걷어내는 프로젝트들이 주변에 점점 생겨나고 있어서요.) 그런데, 검색해보면 vuex는 단점이라고 설명이 되어 있는 것을 찾기가 힘듭니다.또한, 어느정도 선에서 vuex를 적용해야하는지가 애매한데, 기준을 어떤식으로 잡아야 할까요?vuex를 사용하면 .vue 파일 내부 코드나 로직들을 store쪽으로 뺄 수 있어서 많이 간략해지고 깔끔해지는 것으로 한눈에 component 구조들을 파악하기가 쉽긴 한데요.그렇다면 모든 computed나 data에서 관리하는 것들을 다 vuex로 항상 빼는 것이 정답일지알아서 적당히 구분해서 할지... 정말 필요한것만 vuex로 빼야할지 그런것들이 참 어려운 것 같습니다.마치 component를 어느정도 수준으로 세분화해서 설계할지와 같은 고민 같습니다. 제가 front 개발에 대한 지식의 깊이가 미진해서 그런지 관련해서 이야기를 한번 듣고 싶은데,제 주변에서는 마땅하지가 않아서 질문을 남깁니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
학생 할인 관련 질문이 있습니다.
이 수업과 관련된 질문은 아니지만, Vue 중급강좌를 완강하기 전에 미리 Vue 완벽가이드 강의를 구매하려합니다.학생할인을 50%를 제공한다고 하는데 학생증을 첨부하면 자꾸 첨부한 파일이 자꾸 사라지네요. 개발자 도구로 확인해보니 학생증 사진의 글씨를 인식하는 카카오 api가 작동을 안하는것 같습니다.혹시 학생 할인이 이제 끝난건가요? 아니면은 고쳐 주시길 부탁드리겠습니다...ㅠ 제가 학생이라 가격이 조금 부담되는게 있어서요. 답 해주시면 감사하겠습니다:)
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
카카오맵이 나오지를 않아요ㅠㅠㅠㅠ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="layout.css" /> </head> <body> <nav> <div class="inner"> <div class="nav-container"> <hi class="nav-title">맛집지도</hi> <button class="nav-contact">contact</button> </div> </div> </nav> <main> <section id="category"> <div class="inner"> <div class="category-container"> <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2> <div class="category-list"> <button class="category-item">한식</button> <button class="category-item">중식</button> <button class="category-item">일식</button> <button class="category-item">양식</button> <button class="category-item">분식</button> <button class="category-item">구이</button> <button class="category-item">회/초밥</button> <button class="category-item">기타</button> </div> </div> </div> </section> <!-- 카테고리 --> <div id="map" class="inner"></div> <!-- 카카오지도 --> </main> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b156fcbd2ea3a6340f64c07f5eaef559" ></script> <script src="layout.js"></script> </body> </html> @font-face { font-family: "KyoboHandwriting2020A"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff") format("woff"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: "KyoboHandwriting2020A"; font-size: 10px; } nav { /* background-color: orange; */ } .nav-container { padding: 1rem 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .nav-title { font-size: 3rem; } .nav-contact { font-size: 2.5rem; justify-content: right; border: none; background: none; cursor: pointer; font-family: inherit; } .category-title { font-size: 3.5rem; } .category-item { width: 25%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: orange; cursor: pointer; } .inner { padding: 0 1.5rem; } @media all and (min-width: 1024px) { .inner { max-width: 1024px; margin: 0 auto; } } /* 카카오맵 css */ body { height: 100vh; } nav { height: 59px; } main { padding-top: 1.5rem; height: calc(100%-59px); display: flex; flex-direction: column; } #map { flex-grow: 1; width: 100%; height: 100%; } var container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3, //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 이렇게 했는데 지도가 안 나와요ㅠㅠ 어디가 틀린 걸까요
-
해결됨[코드캠프] 시작은 프리캠프
강의자료 문의
안녕하세요, 강의 처음으로 듣고 있는데요!강의자료가 노션(링크)에 있다고 써져있는데, 어디있는 걸까요..?ㅠㅠ (링크가 활성화되어있지 않습니다..)제가 못 찾고 있는건지 도무지 보이지가 않습니다ㅠㅠ지금 1강 들었는데 영상 하단에 강의자료 링크도 안뜨구요..강의 자료를 보기 위한 노션 링크 달아주실 수 있을까요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
mysql 접속 로그인
다 알맞게 작성한거 같은데 계속 오류가 나요ㅠㅠ hostname에 퍼블릭 ip를 작성하는것이 맞을까요?강의따라서 수업 내용은 잘 따라하였습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
중소,스타트업에서는 코딩테스트 안 보는 곳도 있나요?
중소, 스트타업 채용공고 찾아봤는데 코딩테스트를 보는 곳도 있고 아닌 곳도 있는 거 같아서 무조건 보는 건 아닌가요?
