묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨처음 만난 리액트(React)
Contex와 redux같은 전역 상태관리 라이브러리
Contex가 하위 컴포넌트들에서 해당 변수에 바로 접근이 가능하게 만들어주는 것은 이해가 되었습니다.하지만 한 가지 의문점이 있습니다.저의 짧은 지식으로는 redux같은 전역 상태 관리 라이브러리를 이용하면 모든 컴포넌트가 접근할 수 있는 store라는 공간이 생기는 것으로 알고 있습니다. 그래서 redux를 사용한다면 contex는 굳이 사용할 필요가 없는 것으로 생각됩니다. redux같은 전역 상태 관리 라이브러리를 이용할 때에도 context를 사용하는 경우가 있는지 궁금합니다. 그리고 이전 질문에서 엄밀히 말하면 context가 상태 관리는 아니라고 하셨는데 상태 관리와 context의 차이점을 잘 모르겠습니다.. 간략하게나마 차이점을 설명들을 수 있을까요?
-
해결됨처음 만난 리액트(React)
useRef가 잘 이해되지 않습니다.
useRef() Hook의 다음 코드에서 질문이 있습니다.useRef는 DOM에 접근하기 위해 사용하는 Hook으로 이해하면 될까요?예시 코드에서 <input type="text" ref={inputElem} />inputElem을 해당 input태그에 접근하기 위해 useRef를 사용하는 것이 맞나요?useRef() Hook이 데이터 변경을 감지하지 못해서 HTML 코드에 있는 ref의 변경을 감지할 수 있는 useCallback() Hook을 대신 사용하는게 맞나요?그럼 useCallback을 useRef를 대체하여 사용가능한 건가요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
HTML 실습에서 테두리만 보이지 않습니다.
안녕하세요. 도형 만들어 지지 않아 질문 드립니다.사진 올리기, 색깔 등등 다른 것은 다 되는데 이상하게 border와 같은 테두리, 도형을 만들면 화면에 보이지 않습니다. 아래의 코드 방식으로 작성했을 때는 적용이 됩니다. 표기 방식만 다른 것인데 무엇이 문제인가요?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
제이쿼리 load 메서드 포트폴리오 연결 질문
안녕하세요 선생님! 개인 포트폴리오 홈페이지 만들다 궁금한 점이 있어 여쭤봅니다 :)해당 강의에서 만든 작업물을 변형하여 개인 포트폴리오 홈페이지에 넣으려고 하는데Header랑 GNB 부분을 제이쿼리 load 메서드로 연결해서 그런지a태그로 모바일 웹 작업물을 연결하면 Header랑 GNB 부분이안 뜨더라구요ㅜㅜ혹시 이런 경우에는 어떻게 하면 되는 걸까요?항상 알차고 좋은 강의 감사합니다!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
영상 14분쯤에 대한 질문입니다.
강의 영상에서는 .tabs에 relative, 100vh .items에 absolute top, left이렇게 강의 해주셨는데 제가 다르게도 한번 해보았습니다.이렇게 하니 코드가 조금이나마 짧은것 같아서요~ 동작은 똑같이 하는데 이렇게 해도 실무에 적용하는데 구조적으로 문제 없는지 궁금해서 질문 드려봅니다.항상 좋은강의 감사합니다 선생님!
-
미해결자바스크립트 제대로 배워볼래?
module 질문있습니다.
.js로 아래와 같은 자바스크립트 파일을 작성했습니다. export function log(message) { console.log(message); } export function error(message) { console.error(message); }해당 자바스크립트 파일을 html에 삽입하기 위해 src에 넣고, type을 module로 지정했습니다. 후에 log함수를 이용하려고 아래 코드를 작성했는데,"Uncaught ReferenceError: log is not defined at 3-14.html:9:7" 이라고 에러가 납니다.<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <script src="./scripts/3-13.Module.js" type="module"></script> <script> log("메세지 출력"); // Uncaught ReferenceError: log is not defined at 3-14.html:9:7 에러 출력 </script> </body> </html> 여기서 질문이 2가지가 있는데,위의 코드 에러를 해결하려면 어떻게 해야하나요?모듈을 삽입하는 방법으로 script 안에 type을 모듈로 정의하고 import를 통해 삽입하는 방법과, src에 자바스크립트를 사용하여 삽입하는 2가지 방법이 존재한다고 이해했습니다. 그럼 후자의 방법은 단순히 src만 입력해 해당 자바스크립트 안에 있는 모든 함수, 변수를 사용하는 방법을 말하는 걸로 이해하면 될까요? 답변주시면 감사하겠습니다.! 항상 강의 잘 듣고 있습니다. 좋은 강의 내주셔서 정말 감사합니다 . ㅎㅎ 😃
-
미해결처음 만난 리액트(React)
미니블로그 프로젝트 빌드시 오류
안녕하세요 마지막 프로젝트 진행시 오류때문에 질문남겨드립니다. 이러한 오류가 생기는데 해결방법을 잘 모르겟습니다 ㅠㅠ
-
해결됨자바스크립트 제대로 배워볼래?
clearInterval, setInterval 질문
var i = 0; var fnc = setInterval(function () { if (i == 3) { clearInterval(fnc); } console.log("3초마다 프로그램 실행 - " + i); i++; }, 3000);i가 3일 때 setInterval를 중단하기 위해 해당 코드를 작성했습니다.i가 3일 경우에는 clearInterval에 의해 setInterval이 중단됐기 때문에아래 console.log("3초마다 프로그램 실행 - " + i)도 실행되지 않아콘솔창을 실행했을 때 "3초마다 프로그램 실행 - 2"까지만 나오고 멈출거라고 생각했는데,"3초마다 프로그램 실행 - 3"이 나와 왜 그런지 질문 드립니다.
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
상품 상세페이지 아코디언 부분
/* Goods Accordion */ $('.goods-accordion .detail').eq(0).show() $('.goods-accordion .title').click(function(){ $(this).toggleClass('active') $(this).next().toggle() $(this).siblings('.goods-accordion .title').removeClass('active') })상품문의에 클레스가 들어가서 상품후기에 있는 엑티브가 빠졌는데상품문의 밑에 디테일은 안접혀졌어요 (영상강의캡쳐)이렇게 적을경우에 .title부분은 class가 빠져서 시블링이 되는데 .detail 부분은 접었다 펴는 토글이라서 계속클릭하면 .title +,- 와 .detail의 이미지가 안맞는데 이런경우에는 어떻게 하나요 ㅠ?
-
미해결따라하며 배우는 HTML, CSS
Abutton 만들기 css가 인식이 안돼요.
안녕하세요. 강의를 듣고 있는 수강생입니다.초반 버튼을 만드는 과정에서 css가 인식이 안되는데 어떻게 해야할까요?
-
미해결따라하면서 배우는 웹애플리케이션 만들기
Bitnami wamp 단종
bitnami wamp가 홈페이지에서 다운로드가 불가능 한데 다른 대체 프로그램을 찾아봤더니,여러 프로그램이 있어서 어떤 프로그램을 이용해야 하는지 추천해주세요.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
반복문 i 질문
for(var i = 0; i < names.length; i++) { var name = names[i] console.log(name); }에서 var name = names[i] 에서 i가 0 임으로 0 값부터 시작한다고 이해 했는데 i 가 아니라 1 을 넣으니까 철수만 3번 반복 되더라구요 i를 넣음으로써 어떻게 순차적으로 진행되는건지 궁금합니다
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
함수 리턴중에 질문
function calculate(x) { var result = 3*x+5; return result; }라고 입력후 var result1 = calculate(1); 이 어떻게 동작 하는 건가요 ? 괄호를 닫았음에도 아직 저 위에 함수 블록에서 작업 중인 걸로 되는 건가요?
-
미해결자바스크립트 제대로 배워볼래?
window 객체 질문 있습니다.
clearInterval은 setInterval을 중단하는 내장 함수입니다.아래 setInterval를 i 가 3일 때 clearInterval 함수를 삽입하여 중단하기 위해서 var i = 0; var fnc = setInterval(function () { console.log("3초마다 프로그램 실행 - " + i); i++; }, 3000); var i = 0; var fnc = setInterval(function () { if (i == 3) { clearInterval(fnc); } console.log("3초마다 프로그램 실행 - " + i); i++; }, 3000);위와 같이 작성을 했습니다.i가 3일 경우에는 clearInterval에 의해 setInterval이 중단됐기 때문에 아래 console.log("3초마다 프로그램 실행 - " + i)도 실행되지 않아콘솔창을 실행했을 때 "3초마다 프로그램 실행 - 2"까지만 나오고 멈출거라고 생각했는데,"3초마다 프로그램 실행 - 3"이 나와 왜 그런지 질문 드립니다..!
-
해결됨자바스크립트 제대로 배워볼래?
Date 함수 질문
set 함수를 이용해 현재 년도, 월, 일, 시간, 분, 초 등을 설정할 수 있다고 배웠습니다.var day = new Date(); day.setFullYear(2020); console.log(day); // Sat Dec 05 2020 14:51:11 GMT+0900 (한국 표준시)수업 내용처럼 코드를 작성하면 년도 값이 달라져서 나오는데, 아래 코드처럼 작성하면 "912837772073" 이라는 결과가 나옵니다.두 코드의 차이가 무엇인지, 어떤 점이 잘못되어 해당 결과 값이 나오는지 궁금합니다..! var day = new Date(); console.log(day); var day2 = day.setFullYear(1998); console.log(day2);
-
미해결백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편
안녕하세요 foo님 강의 설명 중에 질문이 있습니다...!
안녕하세요~ 백엔드를 위한 프론트 강의에서 꿀팁 잘 얻어가고 있습니다~!다름이 아니라 JSON 강의에서 7분 53초 부분에 질문이 있습니다. obj === objStr으로 동일성 비교하는 부분을 보여주셨는데, returnObj를 objStr로 오타나신건가 싶어서요..!
-
해결됨자바스크립트 제대로 배워볼래?
Boolean 내장함수 강의 질문
Boolean 내장 함수에서,변수에 문자열을 입력하고 boolean으로 출력하면 1이 아닌 이외의 모든 것은 false로 출력된다고 이해했습니다.var x = ""; console.log(Boolean(x)); // false 출력위의 코드처럼요! 그런데 아래 코드처럼 문자열을 입력하고 실행하면,1이 아닌 다른 값이 들어갔기 때문에 false가 출력될 것이라고 생각했는데 true가 출력돼서 왜 그런지 질문드립니다! var y = "안녕하세요"; console.log(Boolean(y)); // true 출력 문자열과 마찬가지로 숫자도 0이외의 다른 숫자(양수, 음수, 소수 등..)를 입력하고 boolean으로 실행했을 때 전부 true로 나오는데,1이 아닌 것은 모두 false라고 배워서 잘 이해가 가지 않아 질문드렸습니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery scss로만드는데
제가 scss로 인강을 듣는데 16:00분쯤 .active 적용이 안돼서 진도를 못 나가고 있어요 ㅜㅠ그 .active를 나중에 jquery addClass로 넣으려고 미리 스타일에 .btn li.active{ background-color: #fff; border-top: 2px solid crimson; } .tabs div.active{ display: block; }이렇게 쓰잖아요근데 전혀 적용이 안됩니다개발자 도구로 열어서 봐도 취소선이 찍혀 있더라고요 다른 것들은 다 적용이 되는데 active 넣은 것만 적용이 안돼요 ,, 도대체 어떻게 해야 할 지 모르겠네요 ㅜㅜㅠ 코드 전문 첨부합니다,, <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04 탭 메뉴 콘텐츠- 스타일 02(실전 제작)</title> <link rel="stylesheet" href="04 탭 메뉴 콘텐츠- 스타일 02(실전 제작).css"> <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- jQuery UI CDN --> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <section> <div class="heading"> <h1>코딩웍스, 프론트엔드 퍼블리셔 취업을 위한 실전 퍼블리싱 강좌</h1> <input type="text" placeholder="What are you looking for?"> <div class="tab-inner"> <ul class="btn"> <li data-alt="tab1" class="active">HTML5</li> <li data-alt="tab2">CSS3</li> <li data-alt="tab3">JQUERY</li> <li data-alt="tab4">JAVASCRIPT</li> <li data-alt="tab5">CSS FRAMEWORKS</li> </ul> <div class="tabs"> <div id="tab1" class="active">tab1</div> <div id="tab2">tab2</div> <div id="tab3">tab3</div> <div id="tab4">tab4</div> <div id="tab5">tab5</div> </div> </div> </div> </section> </body> </html>/* montserrat raleway roboto 폰트*/ @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Hind+Siliguri:wght@300;400;500;600;700&family=Hind:wght@300;400;500;600;700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Noto Sans KR 폰트 */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); body{ font-family: 'Noto Sans KR' , sans-serif; color: #222; line-height: 1.5em; font-weight: 300; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #f4f4f4; } a{ color: #222; text-decoration: none; } section{ width: 800px; .tab-inner{ margin-top: 30px; .btn{ list-style: none; padding: 0; margin: 0; overflow: hidden; li{ float: left; // border: 1px solid #000; width: 120px; text-align: center; cursor: pointer; background-color: #eee; border-right: 1px solid #ddd; padding: 5px; border-top: 2px solid transparent; transition: 0.3s; &:last-child{ width: 170px; border-right: none; } &:hover{ background-color: #fff; border-top: 2px solid crimson; } } } .tabs{ div{ background-color: #fff; padding: 20px; box-sizing: border-box; height: 200px; display: none; } } } } .btn li.active{ background-color: #fff; border-top: 2px solid crimson; } .tabs div.active{ display: block; }@charset "UTF-8"; /* montserrat raleway roboto 폰트*/ @import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Hind+Siliguri:wght@300;400;500;600;700&family=Hind:wght@300;400;500;600;700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); /* Fontawesome 4.7 */ @import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); /* Noto Sans KR 폰트 */ @import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap"); body { font-family: "Noto Sans KR", sans-serif; color: #222; line-height: 1.5em; font-weight: 300; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #f4f4f4; } a { color: #222; text-decoration: none; } section { width: 800px; } section .tab-inner { margin-top: 30px; } section .tab-inner .btn { list-style: none; padding: 0; margin: 0; overflow: hidden; } section .tab-inner .btn li { float: left; width: 120px; text-align: center; cursor: pointer; background-color: #eee; border-right: 1px solid #ddd; padding: 5px; border-top: 2px solid transparent; transition: 0.3s; } section .tab-inner .btn li:last-child { width: 170px; border-right: none; } section .tab-inner .btn li:hover { background-color: #fff; border-top: 2px solid crimson; } section .tab-inner .tabs div { background-color: #fff; padding: 20px; box-sizing: border-box; height: 200px; display: none; } .btn li.active { background-color: #fff; border-top: 2px solid crimson; } .tabs div.active { display: block; }ㅜㅠㅜㅠ
-
미해결Sigil(시길)을 이용하여 전자책 만들기
교안 중 alice_dynamic.epub 파일이 열리지 않습니다.
교안 중 16강 내용인 alice_dynamic.epub 파일이 열리지 않습니다. Sigil로 열려고 하면 아래 오류가 뜹니다. OPF 파일을 읽을 수 없습니다.Line: 4 Column 14 - 네임스페이스 접두사 'dc'이(가) 선언되지 않았음 정상적인 파일을 올려 주시거나 수정할 수 있는 방법을 알려주실 수 있을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
brackets 파일명 변경 시 에러가 뜹니다.
안녕하세요. http://brackets.io 에서 다운로드 받아 설치 했는데요파일명 변경 시 이미지처럼 에러가 뜨는데이유를 알 수가 있을까요?
