묻고 답해요
150만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
미해결처음 만난 리액트(React)
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
import React, { useEffect, useState } from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; export default function Accommodate() { const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); console.log(count,"rendor Accommodate", new Date().getMilliseconds()) useEffect(() => { console.log("===================="); console.log("useEffect() is called."); console.log("isFull:", isFull); }); useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log("Current count value:", count); }, [count]) return <> <button onClick={increaseCount}>입장</button> <button onClick={decreaseCount}>퇴장</button> {isFull && <p>정원이 가득 찼습니다.</p>} </>; }안녕하세요! 실습 진행 중에 이해가 안되는 부분이 있어 질문드립니다!우선 컴포넌트 내부에 포함된 state가 변경될때 컴포넌트가 재렌더링 되는게 맞을까요?그게 맞다면, 다음과 같은 순서로 실행된다고 생각했는데요.입장 버튼 클릭increaseCount가 실행되면서 count 상태가 변경됨Accommodate 컴포넌트가 재렌더링첫번째 useEffect함수가 실행두번째 useEffect함수가 실행 그리고 위 순서에 따라 console에는 다음과 같이 출력될 것이라고 예상했는데, 실제로는 캡쳐화면처럼 출력되더라구요.어떤 이유로 컴포넌트 최상단에 있는 console.log(count,"rendor Accommodate", new Date().getMilliseconds()) 코드가 두번 실행되는 건지 이해가 안됩니다.ㅠ제가 놓치고 있는 부분이 많은 것 같은데 어디서 부터 놓친건지 잘 정리가 되지 않네요!ㅠㅠ0 'rendor Accommodate' 991 ==================== useEffect() is called. isFull: false Current count value: 0 1 'rendor Accommodate' 430 ==================== useEffect() is called. isFull: false Current count value: 1
-
미해결[개발부터 수익화까지] AI로 코드 한 줄 짜지 않고 만드는 IT 올인원 실전 프로젝트!
IntelliJ IDEA, Git 설치 및 스프링부트 설정
본 강의는 끝까지 잘 따라왔다가 마지막에 실행해보니 error 가 생기며 끝나는데요.이후 강의가 끝나버려서 문의드리는데요. 어떤 문제일까요? 아, IntelliJ IDEA 사용중에 @EnableFeignClients 입력후 알트 +엔터 누르면import calss가 안생기던데 왜그럴까요?한국어 버전을 써서 그런건가요? 한참 헤메다가 어쩌다 노란색으로 처리가 되며 완성은 됐는데, 결과는 에러가 나서..
-
미해결[개발부터 수익화까지] AI로 코드 한 줄 짜지 않고 만드는 IT 올인원 실전 프로젝트!
그누보드 설치시 DB 연결 실패
강의에서 저만 안보이는지 모르겠지만 그누보드 설치 장면이 잘린 거 같습니다... XAMPP에서 ADMIN을 누르면 강제로 저기로 넘어가는데 강의에선 저 장면이 없거든요. 포트번호 수정에서 갑자기 넘어가는거 봐서 그 장면 삽입하시면서 영상이 잘린 게 아닐까 생각이 드네요... 그래서 스스로 설치하고 있는데 이 장면에서 HOST를 localhost:3307로 해도, 127.0.0.1로 해도, 127.0.0.1:3307로 해도 오류가 납니다. 지금 제 컴에서 mysql 실행이 mysql -uroot -p로는 안되고 강제로 TCP/IP 연결 명령어를 추가해야만 되는 상황인데 이 문제와도 연관이 있을까요
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩마켓 웹화면 구현하기 -2 질문입니다.
header 에서는 header-area를 따로 만들어서 이미지를 관리를 하였는데body에서 배너는 배너-area를 따로 안만들고 바로 banner에 이미지를 넣어서 관리하는 이유가 따로 있나여?? 무슨차이인가요
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
GP 테마 LOOP 템플릿 관련
GP 테마에서 메인 페이지 직접 제작하는 방법 강의를 수강중인데 현재 강의에서 나오는 QUERY LOOP나 POST TEMPLATE 이 제 테마에서는 나오질 않습니다. 이에 따라 강의에서 진행되는 내용을 이어갈수가 없는데 어떤 차이인지요? 아무리해도 POST TEMPLATE을 찾을수가 없습니다.[제 화면 캡쳐]
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
목소리 좀 키워주세요.
소리가 너무 작아서 잘 안들립니다..좋은 강의 감사하지만 들을 때마다 볼륨을 거의 최대로 해야 해서 불편한 부분이 있습니다. 소리좀 조금 키워주셨으면 좋겠습니다 ㅠ
-
해결됨[개발부터 수익화까지] AI로 코드 한 줄 짜지 않고 만드는 IT 올인원 실전 프로젝트!
Gitlab 소스코드 접속이 안됩니다
안녕하세요 강의 1강에 있는 완성코드 접속 했는데 프론트 , 백 둘 다 아래처럼 404 page가 나옵니다확인 해주시면 감사하겠습니다
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
visibility:hidden; 적용 문제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="nav"></div> </header> <div class="slide"> <div> <a href="#none"><img src="images/1200-1.jpg" alt="slide-1"></a> <a href="#none"><img src="images/1200-2.jpg" alt="slide-2"></a> <a href="#none"><img src="images/1200-3.jpg" alt="slide-3"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"> <div></div> <div></div> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; } .container { margin: auto; width: 1200px; border: 1px solid #000; } header { display: flex; justify-content: space-between; } header > div { height: 100px; border: 1px solid #000; } .header-logo { width: 200px; } .nav { width: 600px; } /* slide */ .slide { position: relative; width: 1200px; height: 300px; border: 1px solid #000; } .slide > div { font-size: 0; } .slide > div > a { position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; opacity: 0; } .slide > div > a:nth-child(2) { animation-delay: 3.5s; } .slide > div > a:nth-child(3) { animation-delay: 7s; } @keyframes slide { 0% { opacity: 0; visibility: hidden; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } /* slide */ .items { display: flex; } .items > div { height: 200px; border: 1px solid #000; flex:1; } footer { display: flex; } footer > div { height: 100px; border: 1px solid #000; } .footer-logo { width: 200px; } .copyright { width: 1000px; } .copyright > div { box-sizing: border-box; border: 1px solid #000; height: 50%; }현재 섹션8-5번 강의 수강중입니다.강의에서 말씀하신대로 세번째 슬라이드 사진이 투명도 0 상태로 최상위 계층에 있는 상태여서 visibility: none; 속성을 주었는데, 속성을 넣어도 다른 슬라이드 사진을 눌러도 세번째 슬라이드사진이 클릭 되는데 어떤부분이 잘못되었을까요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
req.cookies.token == undefined 현상
logout을 해보니 400BadRequest:이미 로그아웃 됨 상태가 지속됩니다. console.log(req.cookies.token); 출력해보니 undefined 라고 출력됩니다. 쿠키를 제대로 읽지 못하는것 같은데 왜 이런 현상이 뜨는지 궁금합니다.. const express = require("express"); const router = express.Router(); const bcrypt = require("bcrypt"); const User = require("../models/User"); const axios = require("axios"); const jwt = require("jsonwebtoken"); router.post("/signup", async (req, res) => { try { const { username, password } = req.body; const existingUser = await User.findOne({ username }); if (existingUser) { return res.status(400).json({ message: "이미 존재하는 사용자입니다." }); } const hashedPassword = await bcrypt.hash(password, 10); const user = new User({ username, password: hashedPassword, }); await user.save(); res.status(201).json({ message: "회원가입이 완료되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); console.log(error); } }); router.post("/login", async (req, res) => { try { const { username, password } = req.body; const user = await User.findOne({ username }).select("+password"); //왜인지 password가 select되지 않아서 추가함 if (!user) { return res.status(401).json({ message: "존재하지 않는 사용자입니다." }); } if (!user.isActive) { return res.status(401).json({ message: "비활성화된 사용자입니다." }); } if (user.isLoggedIn == true) { return res.status(401).json({ message: "이미 접속 중인 사용자입니다." }); } const isValidPassword = await bcrypt.compare(password, user.password); //비밀번호 비교 if (!isValidPassword) { user.failedLoginAttempts += 1; user.lastLoginAttempt = new Date(); if (user.failedLoginAttempts >= 5) { user.isActive = false; //다섯번 틀리면 계정 비활성화 ㅋㅋ await user.save(); return res.status(401).json({ message: "비밀번호를 5회 이상 틀려 계정이 비활성화되었습니다.", }); } await user.save(); return res.status(401).json({ message: "비밀번호가 일치하지 않습니다.", remainingAttempts: 5 - user.failedLoginAttempts, }); } user.failedLoginAttempts = 0; user.lastLoginAttempt = new Date(); user.isLoggedIn = true; try { const response = await axios.get("https://api.ipify.org?format=json"); //공공장소 사용금지요 const ipAddress = response.data.ip; //한번 정제함 user.lastLoginIp = ipAddress; } catch (error) { console.log("IP 주소를 가져오는데 실패했습니다: ", error.message); } await user.save(); const token = jwt.sign( { userId: user._id, username: user.username }, process.env.JWT_SECRET, { expiresIn: "24h" } //토큰 만료는 24시간 ); console.log(token); //오 된다 res.cookie("token", token, { httpOnly: true, //자바스크립트에서 쿠키 접근 불가 secure: "production", //https에서만 쿠키 전송 sameSite: "strict", //같은 사이트에서만 쿠키 전송 maxAge: 24 * 60 * 60 * 1000, //24시간 }); const userWithoutPassword = user.toObject(); //구글링 해보니 이렇게 하면 문서 타입을 일반 객체로 변환할 수 있다고 한다 delete userWithoutPassword.password; //보안때문에 비밀번호는 삭제할 수 있다고 한다 res.json({ user: userWithoutPassword }); } catch (error) { console.log("서버 오류: ", error); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.post("/logout", async (req, res) => { console.log(req.cookies.token); try { const token = req.cookies.token; if (!token) { return res.status(400).json({ message: "이미 로그아웃된 상태입니다." }); } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (user) { user.isLoggedIn = false; await user.save(); } } catch (error) { console.log("토큰 검증 오류: ", error.message); } res.clearCookie("token", { httpOnly: true, secure: "production", sameSite: "strict", }); res.json({ message: "로그아웃되었습니다." }); } catch (error) { console.log("로그아웃 오류: ", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.delete("/delete/:userId", async (req, res) => { try { const user = await User.findByIdAndDelete(req.params.userId); if (!user) { return res.status(404).json({ message: "사용자를 찾을 수 없습니다." }); } res.json({ message: "사용자가 성공적으로 삭제되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); module.exports = router;
-
해결됨[개발부터 수익화까지] AI로 코드 한 줄 짜지 않고 만드는 IT 올인원 실전 프로젝트!
[해결] 그누보드 설치시 DB 연결 실패
강의에서는 gnuboard DB를 3307로 사용하는데 host에 그냥 localhost만 쓸 경우 자꾸 3306으로 연결 되서 연결 실패하더라구요 다른 config 설정을 바꿔주어야 하나 엄청 찾다가.. host 부분에 localhost가 아닌 localhost:3307로 써주니 3307 port의 mysql로 접속되어 db 설치가 됩니다.다른 해결 방법이 있는진 모르겠지만.. 이 방법도 있으니 막히시는 분들 참고 하세요
-
미해결[개발부터 수익화까지] AI로 코드 한 줄 짜지 않고 만드는 IT 올인원 실전 프로젝트!
[해결] XAMPP mysql 실행 안되는 문제
안녕하세요 다른 분들 수강 공유 차원에서말씀드립니다. XAMPP 컨트롤에서 port 충돌이 났을때강의에서는 아래 화면 설정만 바꾸면 된다고 하시는데,실제로는 아래 my.ini에서 port도 바꿔주시고 실행해주셔야 에러가 나지 않습니다. 해당 강의 조금만 더 들으시면 저기도 수정해야한다고 해주시긴하는데, 중간에 막히시는 분들 계실것 같아서 공유드리니다.
-
해결됨[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기
일기만들기는 혼자만들어야하나요?
일기만들기는 따로 강의가없고 알아서 만드는건가요?
-
미해결처음 만난 리액트(React)
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.vs code에서 터미널을 열어 바로 입력하였는데 이런 창이 뜹니다. 어떻게 해결할 수 있을까요?
-
해결됨[코드캠프] 시작은 프리캠프
과제 profile 부분 질문
폰트 간격 어떻게 띄워요?
-
해결됨[코드캠프] 시작은 프리캠프
과제 Profile 부분 질문
이렇게 하나하나 나눠서 한다고 틀린건아니지만어차피 같은 css속성이고 문서길이만 길어질 뿐이라서과제 레퍼런스에서는<div class="profile_detail> 이렇게 하나로 묶은건가요? 만약에 phone부분만 특정스타일 부여하고 싶으면id부여해주면되는건가요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
npm run dev 무한로딩
npm run dev를 통해 frontend 폴더에서 다음과같이 정상적으로 실행이 되었습니다.다만, 막상 해당 경로로 접속하면 우외같이 무한로딩에 빠져서 아무것도 뜨지 않습니다.F12 개발자도구로 봐도 어떠한 콘솔에러메시지도 없습니다. 어떻게 해결해야 할까요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
강의요청
안녕하세요 강사님!올려주시는 강의들 너무너무 잘보고 있습니다 !!!!혹시 시간 괜찮으시면 왼쪽고정 오른쪽 스크롤 되는 애니메이션을 구현 강의 요청드릴수 있을까요 ??여러번 시도해봤는데 제가 만든건 뭐가 문제인지 자꾸 삐그덕 거리고 실패해서요 ㅠ 이 부분입니다 !
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이쿼리 작동이 안됩니다
섹션3. 제이쿼리(jQuery) 필수 핵심이론(기본 구문 만들기, 선택자)강사님께서 보여주신대로 똑같이 따라했는데 작동이 안돼요.그리고 제이쿼리 파일을 끌어당겨서 넣었는데 이렇게 하는게 맞는건가요? 한 번 확인 부탁드려요 ■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다
<html> <head> <meta charset="utf-8"> <title>인스타그램</title> <link rel = "stylesheet" href="styles/card.css"> </head> <body> <section class="container"> <article class ="card"> <header> <div class = "circle-image"> <img src="images/inflearn-project-images/profile.png"/> </div> <div class="card-username"> <span>inflearn</span> </div> <div class="option-more"> <button class="transparent-button"><img src="images/inflearn-project-images/icons/mark.png"/></button> </div> </header> <main> <div class="carousel" data="0"> <!--캐러셀 들어갈 영역--> <div> <ul> <li><img src="images/inflearn-project-images/mountain1.jpg"/></li> <li><img src="images/inflearn-project-images/mountain2.jpg"/></li> <li><img src="images/inflearn-project-images/mountain3.jpg"/></li> <li><img src="images/inflearn-project-images/mountain4.jpg"/></li> </ul> <div class="slide slide-left"> <button class="transparent-button"><img src="images/inflearn-project-images/icons/arrow-left.png"/></button> </div> <div class="slide slide-right"> <button class="transparent-button"><img src="images/inflearn-project-images/icons/arrow-right.png"/></button> </div> </div> <footer> <div class = "active"></div> <div></div> <div></div> <div></div> </footer> </div> <div class="card-container"> <dic class="card-buttons"> <div> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/heart.png"/> </button> </div> <div> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/chat.png"/> </button> </div> <div> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/paper-plane.png"/> </button> </div> <div class="last-card-button"> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/bookmark.png"/> </button> </div> </dic> <div class="card-likes"> 좋아요999,999개 </div> <div class="card-content"> <ul> <li> <div> <span> lnflean.user </span>본문 내용 </div> </li> <li class="comment"> <div> <span>lnflean.user</span>댓글 1 <button class="transparent-button"> <img src="images/inflearn-project-images/icons/heart.png"> </button> </div> </li> <li class="comment"> <div> <span>lnflean.user</span>댓글 2 <button class="transparent-button"> <img src="images/inflearn-project-images/icons/heart.png"> </button> </div> </li> </ul> </div> <div class="card-time">7일전</div> </div> </main> <footer class="card-comment"> <input type="text" placeholder="댓글달기..." name="comment"> <div> <button class ="transparent-button">개시</button> </div> </footer> </article> </section> </body> </html>body { padding : 0; margin : 0; } ul, li{ list-style: none; } button.transparent-button{ background-color: transparent; border: 0; outline: 0; cursor: pointer; } .container{ width: 100%; background-color: #f0f0f0; padding: 20px 0; } article.card{ width: 600px; margin: 20px auto; margin-bottom: 60px; background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; } /*** header 시작 ***/ article.card header{ height: 40px; padding: 10px; } article.card header > div { display: inline-block; vertical-align: middle; } .circle-image { height: 100%; padding: 5px; box-sizing: border-box; } .circle-image > img { height: 100%; border-radius: 50%; } .card-username { padding: 10px 0; font-weight: 900; line-height: 20px; margin-left: 5px; font-size: 13px; } .option-more { float: right; padding: 7px; } /*** header 시작 ***/ /*** content 시작 ***/ .card-container{ padding: 5px 10px; } /* 버튼 */ .card-buttons{ padding: 0 5px; margin-top: 5px; } .card-buttons > div{ display: inline-block; margin-right: 10px; } .card-buttons > div.last-card-button { float: right; margin-right: 0; } /* 좋아요*/ .card-likes{ padding: 5px; font-size: 13px; font-weight: 900; } /* 본문*/ .card-content{ padding: 2px 5px; font-size: 13px; } .card-content li > div{ padding: 1px 0; } .card-content li > div > span{ font-weight: 900; } .card-content li.comment > div > button{ float: right; } .card-content li.comment > div > button > img{ width: 12px; margin-right: 5px; } /*시간*/ .card-time{ padding: 3px; font-size: 11px; color: #a0a0a0; } /*푸터*/ footer.card-comment{ position: relative; height: 55px; border-top: 1px solid #e0e0e0; } footer.card-comment input{ width: 100%; height: 100%; border : 0; outline : 0; padding: 0 15px; color: #606060; } footer.card-comment >div{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } footer.card-comment > div > button{ color: #0095f6; opacity: 0.5; padding: 10px 5px; } /*캐러셀*/ article.card main .carousel{ width: 100%; position: relative; } article.card main .carousel > div{ overflow: hidden; } article.card main .carousel ul{ width: 10000px; } article.card main .carousel ul >li { display: inline-block; } article.card main .carousel ul > li img{ width: 600; } .slide{ position: absolute; top: 50%; transform: translateY(-50%); padding: 10px; } .slide img { opacity: 0.75; } .slide-right{ right: 0; } .carousel footer{ position: absolute; height: 20px; text-align: center; width: 100%; bottom: -20px; } .carousel footer div{ width: 6px; height: 6px; background-color : #a8a8a8; display: inline-block; border-radius: 50%; } .carousel footer div { width: 6px; height: 6px; background-color: #a8a8a8; } 원인을 찾을 수 없어서 ul style 사용해서 그냥 40px을 지웠는데 왜 40px이 들어가 있는지를 모르겠습니다
-
해결됨[개발부터 수익화까지] AI로 코드 한 줄 짜지 않고 만드는 IT 올인원 실전 프로젝트!
강의 순서
1강부터 차례대로 듣고 있는데 3강부터 막히네요.영상으로만 보면 따라갈수가 없습니다.보니까 3강 이후 강의를 먼저 들어야 진행이 가능한거 같은데,우선순위를 한번 자세히 설명해주시면 좋겠습니다. 그리고, 영상만 봐서 진행이 안되는부분은https://banbu.kr/free/35 해당페이지 순서를 우선적으로 따라해야하는건지도요?
주간 인기글
순위 정보를
불러오고 있어요
