173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
키프레임 wrap around 실습하다가 궁금해서 여쭤봐요! 해설해주신 대로 어몽이를 x를 420으로 하면 부모인 stage 가로사이즈 500px이 바뀌면 어몽이에 적용한 420도 같이 바뀌어야 해서 부모 사이즈를 기준으로 하려면 left나 right 속성을 사용하는 방법 밖에 없을까요?
미해결
[웹 개발 풀스택 코스] HTML&CSS 기초
해당 강의에서 사용하시는 비디오, 오디오 파일을 어디에서 다운받을 수 있는 지 찾지 못하여 질문 드립니다.. 해당 관련 질문이 하나 있던데 답변 주신대로 찾아보아도 안보여서 질문하게 되었습니다
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>레이아웃 가로 고정형</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <div class="slide"> <div></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 class="sns"></div> </footer> <script src="js/jquery-1.12.4.js"></script> <script src="js/custum.js"></script> </div> </body> </html> .container { border: 1px red solid; box-sizing: border-box; width: 1200px; margin: auto; } header{ border: 1px red solid; box-sizing: border-box; height: 100px; } header div { border: 1px red solid; box-sizing: border-box; height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 800px; float: right; } .slide{ border: 1px red solid; box-sizing: border-box; } .slide div{ border: 1px red solid; box-sizing: border-box; height: 300px; } .items{ border: 1px red solid; box-sizing: border-box; overflow: hidden; } .items div{ border: 1px red solid; float: left; height: 200px; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer { overflow: hidden; } footer div{ border: 1px red solid; box-sizing: border-box; height: 100px; float: left; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; }
미해결
Sigil(시길)을 이용하여 전자책 만들기
첨부해주신 메모장 파일이 시길에 복붙하면 깨지는데 어떻게 해야할까요?
해결됨
[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기
rem을 폰트 말고 width랑 height에서도 쓰셨는데, vw와 vh와의 차이가 궁금합니다.
해결됨
부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프
영코디쌤 전강좌가 수강기간이 무제한으로 바뀌어있던데 제학습창엔 수강만료날짜가 표시되어있는데 저도 혜택을 받을수있을런지요?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
navList.forEach((li, index)=>{ const roma = ['I', 'II', 'III']; const arabic = ['1','2','3'] const linkAddr = ['naver.com','google.com','inflearn.com']; // button 링크 주소 li.addEventListener('click',()=>{ if(!playing) { next = index; if(li.classList.contains('active')) return; for(let i=0;i < navList.length; i++) { navList[i].classList.remove('active'); } li.classList.add('active'); const addr = /*html*/`location.href='http://${linkAddr[next]}'`; // button 속성 값 const tl = gsap.timeline() .add(leave[current].play()) .add(titleLeave.play(),'-=1') .set('.title h1',{text:`toystory ${roma[index]}`}) .set('.title p',{text:`토이스토리 시즌 ${arabic[index]}`},'<') .add(enter[next].play()) .add(titleEnter.play()) tl.eventCallback('onComplete',()=>{ const btnLink = document.querySelector('.title button'); // button 요소 가져오기 btnLink.setAttribute('onclick',addr); // button의 onclick 속성 추가 current = next; playing = false; }) playing = true; } }) }) window.addEventListener('load',()=>{ const tl = gsap.timeline() .add(enter1.play()) // enter 타임라인 실행 .add(titleEnter.play()) tl.eventCallback('onComplete', () => { const btnLink = document.querySelector('.title button'); //처음 실행시 button에 속성값 추가 btnLink.setAttribute('onclick',"location.href='http://naver.com'"); //처음 실행시 button에 속성값 추가 playing = false; }) // page03()[1].play() // leave 타임라인 실행 })
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요. 4강 토이스토리 practice에서 강의 중 선생님께서 "WATCH NOW" 버튼의 href?값을 페이지에 따라 변경할 수 있다고 하셨는데요. gsap을 이용해서 변경할 수 있는 방법이 있는 건지요? 아님 자바스크립트 함수 안에서 직접 세팅하는 걸까요?
미해결
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 단축키도 중간에 이야기 해주시면 안될까요? 물론 직접 찾아보면서 하긴하지만 잘 안나오는 경우도 있고 그때마다 영상 멈추고 찾아보는거보다 강사님께서 알려주시면 좋을듯해서요..
해결됨
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
안녕하세요 프로그래밍 시작하기 : 웹 입문 (Inflearn Original) 강의를 듣고 있는 수강생입니다. 혹시 출처를 남기고 공부한 내용을 요약해서 블로그에 게시해도 될까요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 선생님 visivility: hidden;을하여도 외곽의 검정선이 없어지지 않네요 완성 예제파일도 같은 현상이 나오는데 어떻게 해결하면 좋을까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>자손선택자vs자식선택자</title> <link rel="stylesheet" href="/CSS/style.css" /> </head> <body> <form class="login"> <span>Email</span> <input type="email" placeholder="Email Address"> <span>Password</span> <input type="password" placeholder="password"> <p> <label> <input type="checkbox"> Keep me logged in </label> <a href="#none">Forgot Your Password?</a> </p> <button>Log in</button> </form> @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; line-height: 1.5em; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; color: #222; } a{ text-decoration: none; color: #222; } .login{ width: 800px; background-color: #f5f5f5; border: 1px solid #eee; border-radius: 5px; padding: 25px; box-sizing: border-box; box-shadow: 0 0 25px #00000026; } .login span { font-weight: bold; display: block; margin-top: 20px; } .login input[type=email], .login input[type=password] { width: 100%; padding: 15px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 5px; padding-left: 40px; transition: .3s; } .login input[type=email]:hover, .login input[type=password]:hover { border: 1px solid dodgerblue; box-shadow: 0 0 5px dodgerblue; } .login input[type=email]::placeholder, .login input[type=password]::placeholder{ font-style: italic; } .login input[type=email]:focus::placeholder{ visibility: hidden; } .login input[type=email]{ background:#fff url(/img/icon-email.png) no-repeat center left 10px; } .login input[type=password]{ background:#fff url(/img/icon-lock.png) no-repeat center left 10px; } .login p { overflow: hidden; } .login p label { float: left; cursor: pointer; } .login p a { float: right; } .login p a:hover { text-decoration: underline; } .login button { background-color: #2991b1; color: #f5f5f5; width: 300px; padding: 10px; outline: none; border-radius: 5px; border: none; font-size: 24px; transition: 0.3s; } .login button:hover{ background-color: #237a95; }
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
안녕하세요.. 아래와 같이 에러가뜨는데요;; code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/sungwon/Desktop/Project/Web/company_website/backend/index.js' ] } Node.js v24.4.0 [nodemon] app crashed - waiting for file changes before starting... . backend > index.js코드 입니다. require("dotenv").config(); const express = require("express"); const mongoose = require("mongoose"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const app = express(); const PORT = 3000; const userRoutes = require("./routes/user"); app.use(express.json()) app.use(express.urlencoded()) app.use(cookieParser()); app.use(cors({ origin: "*", credentials: true, })); app.use("/api/auth", userRoutes); app.get("/", (req, res) => { res.send("Hello world"); }); app.get("/api/check-ip", (req, res) => { const clientIP = req.ip || req.connection.remoteAddress; const blacklistedIPs = JSON.parse(process.env.IP_BLACKLIST || '[]'); console.log("Client IP:", clientIP); console.log("Blacklisted IPs:", blacklistedIPs); if (blacklistedIPs.includes(clientIP)) { return res.status(403).json({ allowed: false, message: "Access denied - IP is blacklisted" }); } res.json({ allowed: true }); }); mongoose .connect(process.env.MONGO_URI) .then(() => console.log("MongoDB와 연결이 되었습니다.")) .catch((error) => console.log("MongoDB와 연결에 실패했습니다: ", error)); app.listen(PORT, () => { console.log("Server is running"); });
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님, 강의 잘 듣고 있습니다. 다름이 아니라, 상품 상세 페이지 에러와 의문점이 있어서 어떻게 해결해야 하는지 궁금한 사항이 있어 질문 드리게 되었습니다. 일단 src/main/index.js 소스 코드를 첨부합니다. import './index.css'; import axios from "axios"; import React from 'react'; import {Link} from 'react-router-dom'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("제 mock 서버 주소 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <Link className="product-link" to={`/products/${product.id}`}> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <div className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> </Link> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 2.src/product/index.js 소스 첨부합니다. import {useParams} from 'react-router-dom'; import axios from "axios"; import { useEffect, useState } from 'react'; function ProductPage(){ // const params=useParams(); const {id} = useParams(); const [product, setProduct] = useState(null); useEffect(function(){ axios.get('제 mock 서버 주소 넣었습니다/products/${id}' ) .then(function (result) { setProduct(result.data); // console.log(result); }).catch(function(error){ console.error(error); } ); },[]); console.log(product); // console.log(params); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; -->여기서부터 의문점과 문제점이 발생하게 되니 읽어주시고 해결할 수 있는 방법을 알려주시면 좋겠습니다. 위 소스에서 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id}') 처럼 소스를 달러 중괄호 아이디 입력하면 , 아래와 같은 첨부 사진처럼 에러 가 납니다. --> 위 에러 첨부 사진은 어떻게 해결해야 할까요? 3. 하지만, 위 소스대로 입력 안하면 axios.get('제 mock 서버 주소 넣었습니다 /products/1 ') 하면 제대로 데이터를 오류 없이 아래 첨부 사진처럼 받아 오는 것 을 알 수 있습니다. 3-1. 그랩님, 강의 소스에서 처럼 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id} ')해서 하면 위 첨부 사진 처럼 에러가 나는데요, 성공적으로 오류 없이 불러오고 싶은데요 , 어떻게 해야 하나요? 단계별로 어떻게 소스를 수정해야하는지 알려주시면 좋겠습니다. 확인하시면 답변 부탁 드립니다.
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
7:27 시점에서, 터미널에서 선생님은,, eyJhbGcioiJOUzI1N,......주소명이 뜹니다만,,, 저의 경우, 아래와 같이 몽고DB에 연결이 되었습니다만 뜹니다.... 이 경우 어떻게 해야할가요... [nodemon] starting node index.js [dotenv@17.2.1] injecting env (2) from .env -- tip: 🔐 prevent committing .env to code: https://dotenvx.com/precommit Server is running MongoDB와 연결이 되었습니다. [nodemon] restarting due to changes... [nodemon] starting node index.js [nodemon] restarting due to changes... [nodemon] starting node index.js [dotenv@17.2.1] injecting env (2) from .env -- tip: ⚙ suppress all logs with { quiet: true } Server is running MongoDB와 연결이 되었습니다. 아래는 routes폴더에 있는 user.js 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"); if(!user) { return res.status("401").json({message: "사용자를 찾을 수 없습니다."}); } if(!user.isActive){ return res .status(401) .json({ message: "비활성화된 계정입니다. 관리자에게 문의 주세요."}); } if(user.isLoggedIn){ 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.ipAddress = ipAddress; } catch (ipError) { console.error("IP 주소를 가져오는 중 오류 발생:", ipError.message); } await user.save(); const token = jwt.sign( { userId: user._id, username: user.username }, process.env.JWT_SECRET, { expiresIn: "24h" } ); res.cookie("token", token, { httpOnly: true, secure: "production", sameSite: "strict", maxAge: 24 * 60 * 60 * 1000, }); const userWithoutPassword = user.toObject(); delete userWithoutPassword.password; res.json({ user: userWithoutPassword }); } catch (error) { console.error("서버 오류:", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.post("/logout", async (req, res) => { 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; env.에 표기한 부분 MONGO_URI=mongodb+srv://sungwon5623:cho121101!@sungwon.oirqw5d.mongodb.net/?retryWrites=true&w=majority&appName=Sungwon JWT_SECRET=c21b6ba5372fa2b8 models폴더에 있는 User.js const mongoose = require("mongoose"); const userSchema = new mongoose.Schema( { username: { type: String, required: true, trim: true, minlength: 2, maxlength: 30, }, password: { type: String, required: true, select: false, }, isLoggedIn: { type: Boolean, default: false, }, isActive: { type: Boolean, default: true, }, failedLoginAttempts: { type: Number, default: 0, }, lastLoginAttempt: { type: Date, }, ipAddress: { type: String, trim: true, }, createdAt: { type: Date, default: Date.now, }, }, { timestamps: true, } ); const User = mongoose.model("User", userSchema); module.exports = User;
미해결
웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
다운로드할 수 있는 강의 자료의 부재로 수업을 진행하는데 어려움이 있음, 강의 제목 옆에 다운로드 버튼도 없을 뿐더러 동영상 재생바 하단에도 자료 다운로드가 없음 강의 자료가 없어서 강의 진행에 어려움이 있어요
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
강사님! 질문이 있습니다. 질문이 좀 길어요. 죄송합니다. 커뮤니티에도 질문을 올렸는데 휴가 중이신지 답변이 없어서 여기에도 남겨봅니다. Vue3 모든 과정을 수강하고 덕분에 프로젝트도 수행을 잘 했습니다. 그런데 프로젝트 할 때 quasar와 사용자 css 적용 문제로 퍼블리셔들이 고생을 많이 했습니다. 저는 PM 역할을 수행합니다. quasar의 css가 사용자가 정의한 css를 덮어 쓰는 경향이 있어 처리한다고 퍼블리셔 분들이 고생들을 많이 했어요. 그래서 다시 프로젝트를 곧 수행할 것 같은데 이번에는 tailwind를 적용해 볼려고 해요. 그러면 nuxt3 + vue3 + quasar + tailwind로 생각하고 있는데 그런데 저희는 포털은 웹 접근성 심사를 받아야 해서 이 조합이 맞는지가 궁금합니다. quasar가 다른 css를 덮어 쓰는 문제가 발생해서 tailwind로 작성한 css도 무용지물이 될까 심히 걱정스럽습니다.
미해결
처음 만난 리액트(React)
이거 왜 존재하지 않는다고 뜨는건가요
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.책같은거없나요? 그냥 강의들으면되요?
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
덕분에 무사히 다음 강의 듣고있는데요 또 막혔습니다;;; MongoDB는 연결이 잘되는데요;; { id : new ObjectId(''''') 등등 터미널에 admin과 패스워드 등의 데이터카 안뜹니다;;;
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
아래와 같은 오류가 발생됩니다.... Error: Cannot find module 'bcrypt' Require stack: - /Users/sungwon/Desktop/Project/Web/company_website/backend/routes/user.js - /Users/sungwon/Desktop/Project/Web/company_website/backend/index.js at Module._resolveFilename (node:internal/modules/cjs/loader:1369:15) at defaultResolveImpl (node:internal/modules/cjs/loader:1025:19) at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1030:22) at Module._load (node:internal/modules/cjs/loader:1179:37) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) at Module.require (node:internal/modules/cjs/loader:1449:12) at require (node:internal/modules/helpers:135:16) at Object.<anonymous> (/Users/sungwon/Desktop/Project/Web/company_website/backend/routes/user.js:3:16) at Module._compile (node:internal/modules/cjs/loader:1692:14) { code: 'MODULE_NOT_FOUND', requireStack: [ '/Users/sungwon/Desktop/Project/Web/company_website/backend/routes/user.js', '/Users/sungwon/Desktop/Project/Web/company_website/backend/index.js' ] } Node.js v24.4.0 [nodemon] app crashed - waiting for file changes before starting... 아래는 index.js 코드입니다. require('dotenv').config(); const express = require('express'); const mongoose = require('mongoose'); const app = express(); const PORT =3000; const userRoutes = require("./routes/user"); app.use('/api/auth',userRoutes); app.get('/', (req, res) => { res.send('Hello World!'); }); mongoose.connect(process.env.MONGO_URI) .then(() => console.log('MongoDB와 연결이 되었습니다.')) .catch((error)=> console.log('MongoDB와 연결이 실패하였습니다:',error)); app.listen(PORT, () => { console.log("Server is running"); }) models>User.js 코드입니다. const mongoose = require('mongoose'); const userSchema = new mongoose.Schema( { username:{ type:String, require: true, trim: true, minlength:2, maxlength:30, }, password:{ type:String, require:true, select: false, }, isLoggedIn:{ type:Boolean, default:false, }, isActive:{ type:Boolean, default:false, }, failedLoginAttempts:{ type:Number, default:0, }, lastLoginAttempts:{ type:Date, }, ipAddress:{ type:String, trim:true, }, createdAt:{ type:Date, default: Date.now, } }, { timestamps:true, } ); const User = mongoose.model('User', userSchema); module.exports = User; routes>user.js코드 입니다. const express = require('express'); const router = express.Router(); const bcrypt = require('bcrypt'); const User = require('../models/User'); 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); } }); module.exports = router;
