묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
rafce 기본 템플릿 적용 및 폴더 파일 대소문자 관련 부분
기본 템플릿 생성 rafce 적용할 때 파일명 기준으로 객체 변수(NavBar) 생성 되는데 오타 때문에 삭제하고 재생성(Navbar)하면 처음 만들었던 이름 그대로 유지되는 습성이 있는데 삭제 하고 다시 만들때 바로 적용 되도록 환경 설정 따로 하는게 있는지 궁금합니다. Components 및 Page 폴더 파일 대소문자 구분 생성 이유가 따로 있는지 아니면 개인적인 개발 습관인지 답변 부탁드립니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
실무에서 tailwind css 사용시 구조 질문드립니다.
tailwind css가 편해보이기는 한데, 화면 코드의 많은 부분을 css 클래스로 차지하고 가독성을 헤치는것 같은데요.실무에서도 예제처럼 html 요소 인라인으로 하나하나 class를 넣어두나요?이러면 중복되는 코드도 많고 구조 파악도 어려울 것 같아서요 만약 html 디자이너가 따로 있을때는 tailwindcss를 사용하지 않나요?디자이너랑 협업할때는 css를 따로 만들어 줄것 같은데, 리액트 실무 환경에서 디자인 부분에 대해서 어떤식으로 협업하는지 궁금합니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
Ch1-4. 네비게이션바 컴포넌트 만들기(1부) 에서 오류질문
안녕하세요 강의 코드 중에 질문드립니다.상단 네비게이션바 코드 작성시Navbar.jsx 에서 노션에 올려주신 MenuItem 컴포넌트가 올바로 작동하지 않습니다. 다만, 찾아보니 '화살표 함수에서 중괄호를 사용하면 명시적으로 return문을 작성해야 JSX가 반환됩니다.' 라고 하는데...실제로 return 을 추가하면 실행이 됩니다.선생님 강의에서는 MenuItem 컴포넌트 선언시 retrun 명시를 안하신거 같은데 어떻게 개발서버에서 상단 네비바가 보여지나요..? (전 : 노션코드)const MenuItem = ({ path, label, onClick }) => ( <li> <Link to={path} className="hover:text-blue-600 transition duration-300" onClick={onClick} > {label} </Link> </li> ); (후-실행됨)const Menuitem = ({ path, label, onClick }) => { return ( <li> <Link to={path} className="hover:text-blue-600 transition duration-300" onClick={onClick} > {label} </Link> </li> ); };
-
미해결처음 만난 리액트(React)
prevIsConfiromed 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 섹션 9 실습에서setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed); 로 setState 정의 했는데prevIsConfrimed라는 state는 어디에서 나온 건가요
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
상속과 접근 제어: 부모 & 자식 클래스에서 서로 다른 값 설정시
안녕하세요. 상속과 접근제어 파트를 듣고 있는데요,만약에 부모 클래스인 Parent 클래스에서 public int publicValue = 2;라고 설정해놓고,package extends1.access.parent; public class Parent { public int publicValue = 2; protected int protectedValue; int defaultValue; private int privateValue;자식 클래스인 Child 클래스에서 publicValue = 1;이라고 설정하면 충돌이 일어나지 않나요?package extends1.access.child; import extends1.access.parent.Parent; //자동으로 되네? public class Child extends Parent { //부모 클래스의 어디까지 접근 가능한가? public void call() { publicValue = 1; protectedValue = 1; //상속 관계 or 같은 패키지 //defaultValue = 1; //다른 패키지 접근 불가, 컴파일 오류 //privateValue = 1; //접근 불가, 컴파일 오류컴파일 했을 때 Child 클래스에서 설정한 publicValue = 1;로 결과가 나오는데, 왜 그러는 것일까요? Parent 클래스에서 초기화한 값과 Child 클래스에서 초기화한 값이 다르면 컴파일 오류가 날 것 같은데 왜 아닌가요?
-
미해결바~로 실습! 개념몰라도 됨, HTML 시작
온라인명함만들기 중간부분이 없어요...
html 입문부터 수강하고 있습니다. 온라인명함만들기 부분 이해가 너무 잘되게 설명해주셔서 잘보고 있는데요visual studio code 로 레이아웃잡기영상 다음에 컨텐츠부분 코딩하기 가 나오는데요.레이아웃 잡은 후에 버튼영역이 있는 부분 영상이 없어서요...컨텐츠부분 코딩하기 영상보면 앞부분이 이미 코딩이 되어있는 상태로 수업이 진행됩니다.빠진 부분은 볼 수 없는 걸까요?
-
해결됨처음 만난 리액트(React)
chapter14 잘이해가 되지않습니다..
안녕하세요소플님 덕분에 리액트 공부 잘하고 있습니다.chapter14 실습영상을 계속 돌려보고 있는데 이해가 안가서요..DarkOrLight 컴포넌트가 ThemeContext MainContent 두개의 컴포넌트를 하위로 가지고 있는거 같은데 return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <MainContent /> </ThemeContext.Provider> ); ThemeContext.Provider Provider 로 감싼다는 부분이 이해가 잘안되서요 ㅠ Provider 로 감쌌을때 ThemeContext 컴포넌트를 사용한다는 의미인가요? 전체적인 설명 부탁드립니다 ~!!
-
미해결CSS Flex와 Grid 제대로 익히기
가로스크롤 과 margin: 0 -1rem 질문 있습니다
.card-list { display: flex; flex-wrap: wrap; margin: 0 -1rem; } .card-item { width: 50%; padding: 0 1rem; }질문1.맨 왼쪽 li의 padding-left는 없지만맨 오른쪽 li의 padding-right은 왜 크기를 차지하고 있을까요??margin: 0 -1rem으로 인해 맨 왼쪽, 맨 오른쪽의 padding-left, padding-right의 값이 없어진다고 생각했습니다.
-
미해결처음 만난 리액트(React)
2025년 3월 리액트버전
혹시 현재 25년 3월기준 이 강의를 들으면 리액트 버전 차이로 인해 렌더링 방식이라던지 다른 점이 있어서 수강할때 불편할까요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결처음 만난 리액트(React)
npm 설치 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.node 파일 버전 확인이 안되는데 어떻게 해결하면 될까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
slide-banner 위치 문제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="logo"></a> </div> <div class="nav"> <ul class="menu"> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> <li> <a href="#none">mainmenu</a> <div class="sub-menu"> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> <a href="#none">submenu</a> </div> </li> </ul> </div> </header> </div> <div class="slide"> <div class="slide-banner"></div> <div class="slide-content"> <a href="#none"><img src="images/slide-e-01.jpg" alt="slide"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="slide"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="slide"></a> </div> </div> <div class="content-inner"> <div class="items"> <div class="shortcut"></div> <div class="news-gallery"></div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="logo"></a> </div> <div class="footer-content"> <div> <a href="#none">기업소개</a> <p>|</p> <a href="#none">제휴 및 입점 문의</a> <p>|</p> <a href="#none">이용약관</a> <p>|</p> <a href="#none">개인정보처리방침</a> <p>|</p> <a href="#none">이메일무단수집거부</a> <p>|</p> <a href="#none">사이트맵</a> <p>|</p> <a href="#none">인재채용</a> </div> <div> <p> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 <br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </p> </div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { color: #666; background: #fff; margin: 0; } a { color: inherit; text-decoration: none; } header { border: 1px solid #000; margin: auto; display: flex; width: 1340px; justify-content: space-between; } header > div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .nav { width: 800px; position: relative; } .menu { margin-top: 50px; z-index: 1; position: absolute; display: flex; padding: 0; list-style: none; } .menu a { width: 170px; display: block; padding: 10px; text-align: center; } .menu li > a { border: 1px solid #000; transition: 0.3s; } .menu li:hover > a { color: white; background: #000; } .sub-menu { display: none; border: 1px solid #000; } .sub-menu > a { background: #fff; transition: 0.3s; } .sub-menu > a:hover { color: white; background: #000; } .slide { width: 100vw; height: 350px; border: 1px solid #000; position: relative; } .slide-content { width: inherit; height: inherit; position: relative; display: flex; width: inherit; height: inherit; } .slide-content a { position: absolute; width: inherit; height: inherit; } .slide-content img { width: inherit; height: inherit; object-fit: cover; object-position:center; } .slide-banner { background: #fff; z-index: 1; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border: 1px solid #000; width: 1340px; height: 100px; } .items > div { width: 1340px; margin: auto; border: 1px solid #000; } .shortcut { height: 150px; } .news-gallery { height: 300px; } footer { width: 1340px; margin: auto; display: flex; } footer > div { height: 120px; border: 1px solid #000; } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content > div { height: 50%; border: 1px solid #000; box-sizing: border-box; } /* fiexd content */ .header-logo, .footer-logo, .footer-content>div { display: flex; align-items: center; } .header-logo, .footer-logo { justify-content: center; } .footer-content>div { padding-left: 20px; } .footer-content>div:first-child>* { margin: 5px; } .footer-content>div:first-child>a { transition: 0.3s; } .footer-content>div:first-child>a:hover { color: dodgerblue; } /* fiexd content */ 슬라이드 배너가묘하게 어긋나는데 어떤부분이 문제인지 모르겠어 질문 드립니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D,E,F유형 포토샵 질문
D,E,F유형 작업시 슬라이드,배너,갤러리 이미지는 어떤사이즈로 제작해야하는지 시험지에 기재 돼 있는 부분일까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
실기시험 질문
포토샵 작업시PSD 파일은 어느 파일에 저장하는지,PSD파일도 최종 작업물 폴더와 제출해야하는지이해가 잘 안돼 질문 드립니다.
-
해결됨[말 한마디로 뚝딱!] AI와 함께 나만의 수익화 웹사이트를 만드는 법
ai툴 유료버전사용?
혹시 커서와 챗지피티 전부 유료버전 끊어서 사용하고 계신가요?
-
해결됨UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
figma에서 이미지 크기를 문의드립니다
안녕하세요.선생님께서 제공해주신 피그마 화일에서움직이는 아이콘을 확대해도이미지가 깨지지 않습니다.방법을 알려 주실 수 있을까요?질문이 많은데, 친절히 설명해주셔서 감사합니다.답변을 기다리겠습니다. 감사합니다.
-
해결됨처음 만난 리액트(React)
chapter_07 콘솔로그 질문드려요~!
안녕하세요~!소플님 덕분에 리액트 강의 잘보고 있습니다~!chapter_07 입장버튼을 10번 눌렀을때 콘솔로그가 밑에 처럼 찍히는건 이해가 되었는데======================useEffect() is called.isFull: falseCurrent count value: 10 밑에로그는 왜 다시 찍히는건가요??======================useEffect() is called.isFull: true 9번까지는 위에로그가 안찍히는거 같은데 10번째에 로그가 찍히는 이유가 궁금합니다~!
-
미해결HTML/CSS 베이스캠프
head와 body 질문
<head>여기에 코드 넣어도 되나요? <body></body></head>
-
미해결인터랙티브 웹 개발 제대로 시작하기
왼쪽/오른쪽 동작시 딜레이 문제
소스를 그대로 사용하는것이 아니고 한단계, 한단계 만들어가면서 하고 있는데요.팔, 다리, 몸통, 머리 소스 부분부분씩 진도나갈때마다 복붙하면서 진행하고 있습니다. 다 잘 진행되는데, 키보드 왼쪽/오른쪽 이동시, 잘 이동됩니다.근데 누르자마자 이동하는게 아니라, 1~1.5초 가량 딜레이(아무동작안함)후에 뒤늦게 동작하더라고요.어느 부분을 살펴보면 좋을지요!!
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션8 질문
안녕하세요. 선생님섹션 8 강의: con02영역_인터렉티브 모션 : Gsap ScrollTrigger를 활용한 워크리스트제작에서 'My Work' 텍스트를 스크롤할 때 고정시키고 아래 .workList 영역에게 margin-top을 줘서 자연스럽게 스크롤 되도록 설정해주셨는데,스크롤 밑으로 내릴 때는 자연스러워보여도 스크롤을 위로 다시 올릴 때 'My Work' 애니메이션이 위영역과 겹친다거나, 부자연스러운데... 이부분은 어떻게 해결해야 되나요? 그리고 타이틀영역을 positon: sticky로 적용하는 방법은 없을까요?
-
미해결처음 만난 리액트(React)
안녕하세요 미니블로그 실습 질문드립니다.
실습을 잘 따라하여 코드도 모두 동일합니다.그런데 왜 글 작성하기 버튼 클릭이 안되는지 오류도 없어서 문의드립니다.또한 버튼 간격도 코드가 동일한데 떨어지지 않고 제 것은 붙어있습니다.어떻게 해결해야할 지 모르겠네요 ㅎㅎ
