172만명의 커뮤니티!! 함께 토론해봐요.
미해결
pip를 통해서 face-recognition 모듈을 설치하려는데 아래 사진과 같은 오류가 계속 발생합니다. pip 버전은 제일 최신 버전 파이썬 버전은 3.11.4 인터넷 보니 CMake를 설치하래서 일단 CMake 버전은 3.28.1입니다 아 dlib도 pip말고 직접 설치하래서 했더니 밑에 빨간 글자를 제외하고 위에 'subprocess.CalledProcessError' 부분과 똑같은 오류가 발생하더군요 이걸로 계속 고통받다 마지막으로 질문해봅니다 ㅠ
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
nav section aside main 사용해서 하는법을 알수없을까요??
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
스크립트에 fade: true를 하면 그림처럼 뒤에 있는 요소들은 안 나오는데 어디가 틀렸을까요? .. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- slick.js --> <link rel="stylesheet" href="slick/slick-theme.css"> <link rel="stylesheet" href="slick/slick.css"> <script src="slick/slick.js"></script> <!-- <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> --> <link rel="stylesheet" href="01.slickslider-contents-slider.css"> </head> <body> <div class="myslider"> <div>your content1</div> <div>your content2</div> <div>your content3</div> <div>your content4</div> <div>your content5</div> <div>your content6</div> <div>your content7</div> <div>your content8</div> </div> <script> $('.myslider').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 4, autoplay: true, autoplaySpeed: 2000, speed: 2000, fade: true, cssEase: 'linear', dots: true, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script> </body> </html> body { margin: 0; box-sizing: border-box; background-color: pink; } .myslider { width: 800px; margin: auto; } .myslider .slick-arrow { border: 1px solid #000; display: none !important; } .myslider .slick-dots { border: 1px solid #000; /* display: none !important; */ bottom : 5px; } .myslider .slick-dots li button:before{ font-size: 15px; } .myslider div { border: 1px solid #000; height: 300px; background-color: #ddd; } @media (max-width: 768px){ .myslider { width: 100%; } }
해결됨
처음 만난 리액트(React)
안녕하세요 선생님 Char 7 실습 코드를 localhost:3000 포트에서 처음 랜더링 했을 때 그림과 같이 useEffect() 각각 2번씩 (총4번)호출되어 질문드립니다. 코드는 다음과 같습니다. 각각 1번씩 호출되지 않고 2번씩 호출되는 이유가 뭘까요.. ㅠ import React, {useState, useEffect} from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; function Accommodate(props){ const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); 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 ( <div style={{padding : 16}}> <p>{`총 ${count}명 수용했습니다.`}</p> <button onClick={increaseCount} disabled={isFull}> 입장 </button> <button onClick={decreaseCount}> 퇴장 </button> {isFull && <p style={{color: "red"}}>정원이 가득찼습니다.</p>} </div> ) } export default Accommodate;
미해결
SVG 마스터
- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
더블 보더 다음인 막대 그래프에 대한 영상이 없는데 어디서 확인할 수 있나요?
해결됨
[코드캠프] 시작은 프리캠프
피그마 링크는 인프런 강의실 하단에 (강의실에서 아래로 스크롤) 수업자료로 가는 노션링크가 있고, 노션에 피그마로 넘어가는 링크가 있습니다. 라고 안내를 받았습니다. 그런데 인프런 강의실은 어느 화면을 이야기 하는지요? 동영상 강의를 보고 있는데 어디를 찾아가야 하는지 모르겠습니다. 세션별 학습 자료 이미지를 보내 주셨는데 이런 자료를 찾을 수가 없습니다. 자세한 그리고 쉬운 설명을 부탁 드릴께요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
비쥬얼스튜디오 코드 환경설정 강의에서 beautify 익스텐션에서 다운 받으시라고 하셨는데, 이제 지원하지 않는다고 나오는데 다운 없이 그냥 해도 상관없는걸까요? 그리고 처음부터 강의를 보고 있는데 비쥬얼스튜디오 코드를 쓰면 브라켓은 따로 설치하고 사용을 하지 않아도 되는걸까요?
미해결
자바스크립트 : 기초부터 실전까지 올인원
투두리스트 마지막에서 과제로 내주신 '끝남' 에서 Delete 버튼을 눌렀을 경우 삭제가 안되는거 어디를 봐야하는건지 모르겠어요 ㅠㅠ
해결됨
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
제시해주신 방식대로는 마크다운으로 작성하는 이미지가 링크를 작성하기까지만 하고 나오지 않는 경우가 대부분입니다. 이유는 모르겠네요. 잠깐 나왔었는데.. 또 안나옵니다. 이유가 있을까요. 조건과 지시를 다양하게 걸었더니 제대로 답변을 못하네요. ^^; 특히 일기를 제멋대로 쓰는 부분이 있습니다. 어떤때는 내가쓴것처럼 잘 쓰는데 어떤때는 제멋대로 씁니다. ㅎㅎ 그래도 이런 시도를 해볼수 있어서 좋습니다.
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
왜 그런걸까요? ;; 이것때문에 진도를 못나가고있어요 ~ ㅠㅠ 파일을 똑같이 복사해서 동영상에서 이미지로 변경하면 선생님처럼 중심에서 애니메이션이 진행되네요... 왜 동영상을 넣으면 우측하단에서 동영상이 진행될까요? 동영상 파일이 좀 크지만 선생님 메일에 보내볼게요~ ㅠㅠ
해결됨
[코드캠프] 시작은 프리캠프
별도로 제공되는 Figma를 통해서 과제를 한다는 것이 무슨 뜻인가요? Figma는 어디로 가야하나요?
미해결
Next + React Query로 SNS 서비스 만들기
Error occurred prerendering page "/newpost". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: document is not defined at 46593 (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/app/newpost/page.js:2:59980) at __webpack_require__ (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/webpack-runtime.js:1:146) at F (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:6049) at /Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8464 at W._fromJSON (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8902) at JSON.parse (<anonymous>) at L (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:5770) at t (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:12155) ✓ Generating static pages (5/5) > Export encountered errors on following paths: /newpost/page: /newpost npm run build시에 발생하는 에러입니다. 각종 사이트에서는 14버전에서 에러가 발생하고 있다고 하는 글 들만 있고 해결방법을 찾지 못했습니다.. gpt에서는 클라이언트 사이드에서 실행되어야 하는 코드가 서버 사이드에서 실행되서 그렇다고 하는데 잘해결이 안되고 있습니다. npm run dev시에는 에러없이 잘 실행됩니다. "use client"; import React, { ChangeEventHandler, useState } from "react"; import LexicalEditor from "@/app/newpost/LexicalEditor"; function Page({ props }: any) { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const onChangeTitle: ChangeEventHandler<HTMLInputElement> = (e) => { setTitle(e.target.value); }; const onSubmit = (e: any) => { e.preventDefault(); console.log("제목 : ", title); console.log("내용 : ", content); }; return ( <form className="postForm" onSubmit={onSubmit}> <div className="postForm__titleInputSection"> <input className="postForm__titleInput" type="text" name="title" value={title} onChange={onChangeTitle} placeholder={"제목을 입력하세요."} /> </div> <div className="postForm__editorWrapper"> <LexicalEditor /> </div> <button>작성하기</button> </form> ); } export default Page; 깃허브 링크 입니다. https://github.com/littleduck1219/codeblog/blob/main/src/app/newpost/page.tsx
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 선생님 front, back nginx 한 뒤로 둘다 https라고 바뀌고 인증서도 있긴한데, Front(502 Bad Gateway)라고 나오고 back(welcome to nginx) 라고만 나오는 상태입니다. (설치는 Nginx Ubuntu20보고 했습니다 https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard ) 문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다. 0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process. 질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소( MemoryStore )를 사용할 때 MemoryStore 가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,, 문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다. ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log 2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored 2024/01/24 12:19:54 [notice] 420260#420260: signal process started 질문2)찾아보니 Nginx 설정 파일 내에 서 api.luckyhaejin.com 이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다. 질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,? 현재 설정된 내용) front=> /etc/nginx/nginx.conf => server관련 (글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,) front/pacakage.json에서 start부분에 3060 잘 되어있음 front => /etc/nginx/nginx.conf front/config/config.js에서 backUrl설정 잘 되어있음 back => /etc/nginx/nginx.conf back => app.js(사진이 보기 편하실거같아서 코드랑 둘다올려욧) const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'https://luckyhaejin.com', credentials: true })); } else { app.use(morgan('dev')); } app.use('/', express.static(path.join(__dirname, 'uploads'))); app.use(express.json()); app.use(express.urlencoded({extended:true})); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, //자바스크립트로 접근하지못하게 secure: true, //일단 false로 하고 https적용할 땐 ture domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(3065, () => { console.log('서버 실행 중'); }); back => /etc/nginx/nginx.conf 사용중인 Os) macOS
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 연습파일을 다운로드 받고 싶은데요.. 유튜브 영상에서 연습파일 다운로드를 못찾았습니다.. 어디에 있을까요?
해결됨
[코드캠프] 강력한 CSS
강의 내용과 같은 작업을 쉽게 도와주는 라이브러리 같은 것도 있나요? 실무에서도 이렇게 한땀한땀 만드나요 아니면 좀 쉽게 해주는 툴이나 라이브러리가 있나요?
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브) 이 부분 캡쳐 보면서 코드 따라쳐도 오류가 나오네요 이부분 코드좀 전달주세요 wssksms@naver.com
해결됨
[코드캠프] 강력한 CSS
안녕하세요~ 강의를 수강하면서 작성한 일부 html/css 코드를 개인 블로그에 재사용하여 css에 관련된 내용정리/요약을 하고 싶은데 가능할지 여쭙고 싶어 질문 드렸습니다! 예를들어 inline과 block에 관한 글을 작성한다면 (01-04-inline-block) 폴더에 있는 html과css코드를 사용하는 식으로 재사용이 가능할까요? 감사합니다!
미해결
처음 만난 리액트(React)
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((a) => <li>{a}</li>); ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root')); 이 예시를 강사님처럼 리액트로 만들고 싶은데 이때 index.js를 어떻게 해야하나요? #수업질문
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
선생님 질문이있습니다. 스크롤라 제이에스를 $(document).ready(function(){ $(".animate").scrolla({ mobile:true, once:false }) }) 작성하고, html 에 동일하게 넣었는데 <section class="visual animate" data-animate="motion"> 클래스가 motion 이렇게 붙는게아니라.. 선생님과 다르게 animate__motion 이렇게 붙습니다 혹시..이유를 할수있을까요?
