inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

SplitText를 순수 자바스크립트로 써봤어요

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

// const { chars } = new SplitText('.stage h1', { type: 'chars' }); function splitTextChars(elem) { const textElem = document.querySelector(elem); const letters = textElem.textContent.split(''); let newHTML = ''; letters.forEach(letter => { newHTML += /* HTML */ ` <div style="position:relative; display:inline-block">${letter}</div>`; }); textElem.innerHTML = newHTML; return [...document.querySelectorAll(`${elem} div`)]; } const chars = splitTextChars('.stage h1'); 복습중에 유료플러그인이나 라이브러리 없이 써보고싶어서 만들어봤습니다 ! 맞는 코드인지는 모르겠지만 혹시 참고하실분이 계실까 싶어 남겨둘게요 !ㅎㅎ

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
jay k 댓글 1 좋아요 3 조회수 685

node.js 설치

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. node.js 설치를 완료했는데 버전이 안나오는데 왜 그런건가요?

  • HTML/CSS
  • javascript
  • react
lahat 댓글 1 좋아요 0 조회수 619

서버 컴포넌트 관련 질문입니다!

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

SSR 방식에 서버 컴포넌트와 클라이언트 컴포넌트를 둘 다 적절히 사용하는 것인가요?? 서버 컴포넌트는 데이터 페칭, 보안, 캐싱, JS 번들크기 감소와 같은 장점이 있고 event와 hook을 사용하지 못한다는 특징도 이야기해주셨는데, 그렇다면 데이터를 받아서(페칭해서) 클라이언트 컴포넌트에 데이터를 뿌려주는 느낌으로 조합해서 사용하는 건가요?? 서버컴포넌트는 event를 사용하지 않으므로, TTI를 개선하기 위해 나온 개념은 아닌거죠???

  • react
  • typescript
  • next.js
  • next.js13
이종민 댓글 5 좋아요 3 조회수 1749

노드몬 에러 참조하세요

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

nodemon : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\~~~~~\AppData\Roaming\npm\nodemon.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies( https://go.microsoft.com/fwlink/?LinkID=135170 ) 를 참조하십시오. 위치 줄:1 문자:1 + nodemon + ~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 이런거 뜨면 https://velog.io/@kimy/VS-CODE-supervisor-nodemon-%EC%98%A4%EB%A5%98-ps1-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%A1%9C%EB%93%9C%ED%95%A0-%EC%88%98-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4 이 방법대로 참조하세요 혹시 안되시는분들

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 1 좋아요 0 조회수 367

깃허브에서 다운받지 않고 생성하는 방법 여쭤보고 싶습니다.

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

저 강의에서는 vpm init 등등을 활용해 노드js 기타등등을 생성하셨는데 이번강의에선 깃허브에서 다운을 통해 선생님께서 이미 준비하신 node.js파일들을 제공받았는데.. 만약 제가 스스로 혼자서 셋팅하고 만들어보고 싶은 경우에는 어찌해야 할까요...? 아니면 그냥 선생님이 만들어주신 저 다운패키지들을 활용해도 별 문제 없을까요...?

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 1 좋아요 0 조회수 328

확인부탁드리겠습니다.

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

module.exports = { jwtsecret : "jwt_secret_key_9312", host : "3.38.61.157", user : "root", port : "3306", password : "~~~", detabase : "enrolment", }; 이렇게 하고 index.js를 해줬는데 선생님처럼 aws아이피는 안 뜨고 그냥 PS C:\Users\YOONJUNHO\Documents\Test\Node-Template-For-Food-Map-main> node index.js 2023-11-15 02:38:07 info: undefined - API Server Start At Port 3000 이것만 뜨는데 이것도 연결된건가요?

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 1 좋아요 0 조회수 251

우측고정 네이게이션 작성 시 오류

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

안녕하세요. '왼쪽 개별 네비게이션' 완료 후 CSS만 변경해 '우측고정 네이게이션'을 만드는 와중에 잘 안되는게 있어 질문 드립니다. '세로 기본형' 일때는 호버가 잘 되었는데 CSS 변경 후 sub-menu 가 고정이 되지도 않고 호버도 되지 않아요... 영상 보면서 마크업 비교 해봐도(1시간째...ㅠㅠ) 틀린 부분이 없는데 작동되지 않아 답답합니다.뭐가 잘못 되었을까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="contaniner"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <!-- Navigation --> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> </ul> <!-- Navigation --> </div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="shortcut"></div> <div class="news-gallery"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></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; background-color: #fff; color: #333; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .right { width: calc(100% - 200px); } /* Header */ header {} header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; } /* Slide */ .slide { height: 400px; position: relative; } .slide-image { border: 1px solid #000; height: 400px; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 0; } /* shortcut */ .shortcut { border: 1px solid #000; height: 200px; } /* Nesw & gallery */ .news-gallery { border: 1px solid #000; height: 250px; } /* footer */ footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: calc(100% - 430px); } .sns { width: 230px; } /* Navi gation */ .menu { padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 15px; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { border: 1px solid #000; display: none; position: absolute; top: 0; left: 100%; width: 100%; height: 200px; background-color: #000; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #fff; color: #000; } /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })

  • HTML/CSS
  • jquery
  • 웹-디자인
  • 네비게이션
  • 네비게이션우측고정
  • 네비게이션오류
shinmile922 댓글 1 좋아요 1 조회수 395

슬라이드 안 find out more 버튼 위치관련

미해결

실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)

강사님, 안녕하세요. 슬라이드 안 find out more 버튼 스크롤 애니메이션이, 가운데 정렬로 올라가는게 아니라, 오른쪽으로 치우쳐있다 가운데로 올라갑니다. css에선 left:50%; 되어 있던데 왜 그럴까요?? (올려놓으신 수업 파일도 똑같은 현상입니다.)

  • HTML/CSS
  • jquery
  • 인터랙티브-웹
  • 클론코딩
  • 반응형-웹
Heajin Sohn 댓글 1 좋아요 0 조회수 407

component관련 질문있습니다.

해결됨

처음 만난 리액트(React)

안녕하세요 🙂 React 첫 인강을 소플님의 강의로 시작했습니다. 소플님의 인강을 들으면서 유튜브에 올라오는 React 사이드 프로젝트들을 따라하고 있는데 component관련에서 궁금한 사항이 생겨서 늦게나마 질문을 올립니다. 예시) Main component 안에 Button // List // Write 3개의 component가 있다고 가정한다면 소플님은 먼저 3개의 작은 component들을 만들고 조합하여 Main component를 완성한다고 말씀하셨습니다.(재사용성 떄문) 그런데 어떤분들은 먼저 Main component에서 3개의 작은 component 내용들을 전부다 쓰고 마지막에 3개를 분리하여 각각 해당 component들에 나눠담으시던데 먼저 큰 컴포넌트를 레이아웃을 구성해서 작은 컴포넌트에 나눠 담는게 맞는건지 작은 컴포넌트들을 조합해서 큰 컴포넌트를 만드는게 맞는건지 알 수 있을까요? React 처음으로 완강했는데 너무 유익한 강의였습니다 감사합니다:)

  • HTML/CSS
  • javascript
  • react
한상윤 댓글 1 좋아요 1 조회수 313

혹시 git 실습은 진행하지 않는 건가요?

미해결

Colini 웹개발 가이드

다음 영상이 git 실습이 되어야할 것 같은데 혹시 동영상은 따로 없는 걸까요?

  • HTML/CSS
  • javascript
  • react
kimgni.dev 댓글 1 좋아요 1 조회수 334

작업형2 모의문제3

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 안녕하세요 선생님, 질문은 3가지 입니다. 1) 저는 문제를 딱 접했을때 분류모형을 써야할지, 예측모형을 써야할지 판가름을 정확하게 못하는 것 같습니다. 쉽게 판별하는 방법이 있을까요? 2) 이 문제의 경우 target인 output 컬럼을 train.head() 로 보면 0과 1로 구분되어있어서, 0 또는 1로 분류하는(분류모형) 것인가 생각했다가도 문제 맨위에서 참조해주는 예시에서 id,output 41,0.633 28,0.123 222,0.355 를 보면 output이 확률값으로 되어있어서 회귀모형을 사용해야하는 것인가? 라고 헷갈리곤합니다. 어디서 개념을 잡지 못하는 것일까요 3) 최종 예측을 할때 pd.DataFrame({'id':test_id, 'output':pred_proba[:,1]}).to_csv("00000.csv", index=False) output에 pred_proba 를 쓰셨는데 참조예시에서 확률값을 OUTPUT에 담았기 때문에 pred_proba를 사용한 것일까요? 그렇다면 output에 pred 를 담는 경우는 어떤 경우인지요?

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
댓글 1 좋아요 0 조회수 284

작업형1 모의문제3 7번문제

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 df = df.T df.head() mean_2001 = df[2001].mean() mean_2003 = df[2003].mean() a = sum(df[2001] > mean_2001) b = sum(df[2003] < mean_2003) print(a+b) 이렇게 작성하면 결과가 다르게 나오는데,, 어디서 잘못된 것일까요?

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
댓글 1 좋아요 0 조회수 354

모바일웹 소스가 없습니다.

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

질문 주실 때 항상 2가지를 지켜주세요. 브라우저 화면 캡쳐해서 올ㄹ기 HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기 만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 커리큘럼 하단의 자료소스를 다운받았습니다. 풀어서보니 퍼블소스, pc소스만 있던데 모바일웹 소스가 없습니다. 어디서 다운받아야 하는지요. 퍼블리싱 할때도 모바일웹 소스가 있어야 하는거 아닌가 해서요.

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
김민정(질풍가도) 댓글 1 좋아요 0 조회수 304

[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!

미해결

인터랙티브 웹 개발 제대로 시작하기

강좌섹션, 전진! 3D 스크롤 11(5:49) 에서 mousePos 공식 어떻게 나오게 됐는지 궁금해 문의 드립니다! mousePos.x = -1 + (e.clientX / window.innerWidth) * 2; mousePos.y = 1 - (e.clientY / window.innerHeight) * 2; 이왕 코드 다 작성하고 이해하는 중에, 해당 부분도 이해하고 싶어 문의 드립니다 e.clientX(e.clientY) / window.innerWidth(window.innerHeight) 브라우저( window.innerWidth , window.innerHeight ) 가로 세로 기준으로 현재 마우스 위치(e.clientX/e.clientY)가 어디인지 구하는 수식으로 이해했습니다. mousePos.x = -1 + ..중략.. * 2; mousePos.y = 1 - ..중략.. * 2; 그리고 -1과 1은 결과 반환값으로, -1과 1로 나오기 위해서 지정한 것으로 추측되구요, 그 이외에 - 하는 것, + 하는 것, * 2 하는 것은 어떤 이유에서 만들어진건지 궁금합니다!

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
프린이 댓글 2 좋아요 0 조회수 451

useState 오류

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

GPT API 호출, 프롬프트 연동 강의 0:24 계속해서 useState에 다음과 같은 오류가 뜹니다. import { useState } from "react"; 오류 사유는'useState' is declared but its value is never read. 대체 왜 해결이 안되는 것일까요..?ㅜ.ㅜ

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
한나 댓글 2 좋아요 1 조회수 836

워크벤치 연결 관련 질문드립니다.

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

어찌저찌해서....연결하다보니 워크벤치설치-> aws 인바운드규칙 수정 하고 mysql워크벤치에서 테스트 커넥션까지해서 연결되었다고 하는데 ok버튼을 누르니 Improper name이라더군요. 이름이 root면 안되는건가요?

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 2 좋아요 0 조회수 508

mysql이 8.0버전인데 이렇게 하는 거 맞나요?

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

GRANT ALL PRIVILEGES ON . TO '아이디'@''%'; 이렇게 하라고 하셨는데 아이디에 root를 넣고 %에 aws로 받은 ip주로를 넣어도안되네요. 엔터를 눌러도 뭐 작동도 안하고.. 어찌 해야할까요? 참고로 you are not allowed to create a user with GRANT 라는 에러도 떠서 구글링 해봤는데 어찌 할지 모르겠네요... 까지가 질문이었는데 https://1mini2.tistory.com/87 를 참고해보니 mysql> CREATE USER 'root'@'%' identified by 'Xptmxm1212!@'; 이런식으로 사용자먼저 생성 mysql> GRANT ALL PRIVILEGES ON . to 'root'@'%';권한할당 mysql> flush privileges; mysql> SELECT Host,User,plugin,authentication_string FROM mysql.user; (확인조회) 이런식으로 하라고 하더라구요. 그래서 보니 이렇게 새로운 호스트와 유저가 생겼습니다. 그 이후, 설명해 주신대로 mysql워크벤치 설치 -> aws규칙수정 -> 워크벤치에서 연결 이렇게 했는데 맞는걸까요? 한번 틀리면 나중에 다 수정해야하는데 그게 너무 버거워서 확인차 질문 남겨봅니다.

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 1 좋아요 0 조회수 456

노드js 14버젼 설치 안되시는 분 참조하세요

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

node.js 14.x is no longer actively supported 이하 뭐시기 떠서 개열받았는데 https://corona-world.tistory.com/83 여기 보시는 방법대로 하시면 잘 됩니다.

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 1 좋아요 1 조회수 784

강의가 재생이 안됩니다.

미해결

자바스크립트 : 기초부터 실전까지 올인원

해당 강의(자바스크립트에서 API를 불러보자) 재생 버튼 누르면 동작하지 않고 그 전 강의에서 다음강의 수강하러가기로 이동해도 건너띄어지는데 확인좀부탁드립니다

  • HTML/CSS
  • javascript
전혜린 댓글 2 좋아요 0 조회수 447

웹드라이버 오류

미해결

실습으로 끝장내는 웹 크롤링과 웹 페이지 자동화 & 실전 활용

driver = webdriver.Chrome () 여기서 계속 오류가 나는데요. 혹시 최근에 바뀐게 있나요? 강의 내용 외 개인적인 실습 사이트의 질문은 답변이 제공되지 않습니다. 문제가 생긴 코드, 에러 메세지 등을 꼭 같이 올려주셔야 빠른 답변이 가능합니다. 코드를 이미지로 올려주시면 실행이 불가능하기 때문에 답변이 어렵습니다. 답변은 바로 제공되지 않을 수 있습니다. 실력 향상을 위해서는 직접 고민하고 검색해가며 해결하는 게 가장 좋습니다.

  • python
  • 웹-크롤링
  • selenium
  • beautifulsoup
니키부 댓글 3 좋아요 0 조회수 1973

인기 태그

인프런 TOP Writers

주간 인기글