안녕하세요 선생님!예전에 선생님 강의 청첩장강의랑 flex,grid, 기타 강의들 구매하고 들었던 학생입니다.선생님은 메인개발분야가 뭔지 궁금합니당.또 리액트 사용하시는지도 궁금합니다!질문과는 무관한 여담이지만,,최근 리액트로 프로젝트하면서 애니메이션 편하게 구현하기위해서 여러 라이브러리를 사용하고 또 gsap관련해서도 찾아보고 했었는데.. gsap로 이렇게 손쉽게 인터랙티브 애니메이션을 구현할 수있다고? 하면서 혁신이다! 라고 생각했었는데보니깐 자체 서비스에서 결제 같은 기능이있을경우 (넷플릭스같은) gsap 프리미엄을 결제해서 사용해야하더라구요..그것도 연간 구독 시스템이고, 코딩하는 개발자 수에따라서 개별로 구매..ㅎㄷㄷ 그래서 돌고돌아 다시 선생님 곁으로왔습니다.이 강의 듣다가 개인적인 일들이 겹쳐서 중간하차했었는데 다시 처음부터 차근차근 수강하고 복습해서 마스터해보려고합니닷.. 질문 요약1: 선생님 메인분야가 뭐에요?2: gsap에 관해서 의견이궁금합니다. 

https://studiomeal.com/archives/197위 링크에서 align-items 속성설명 보면"align 키워드가 나왔죠? 수직축 방향으로 아이템을들 정렬하는 속성이에요."라고 오타가 있네요~내용들이 술술 읽혀서 발견했습니다~

질문은 자세하게 적어주실 수록 좋습니다. 2-6 Vue CLI 설치 강의 Node. js 파일까지 설치 완료 -> Vue 설치 진행 과정에서 아래와 같은 오류가 뜹니다. npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supportednpm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecatednpm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated apollo-datasource@3.3.2: The apollo-datasource package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated apollo-server-errors@3.3.1: The apollo-server-errors package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecatednpm warn deprecated apollo-server-types@3.8.0: The apollo-server-types package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated apollo-server-plugin-base@3.7.2: The apollo-server-plugin-base package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatednpm warn deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. npm warn deprecated apollo-reporting-protobuf@3.4.0: The apollo-reporting-protobuf package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/usage-reporting-protobuf package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated apollo-server-env@4.2.1: The apollo-server-env package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/utils.fetcher package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated subscriptions-transport-ws@0.11.0: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md npm warn deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.changed 852 packages in 1m 75 packages are looking for funding run npm fund for details  재설치도 해 봤는데, 안되네요..!도와주세요! 추가로 터미널에 작성할 때 폴더명 뒤에 % 이것도 넣어야 하나요?

스크롤링 권장 스크립트 올려주신 부분으로 했는데 작동이 되지 않아 해결 방법 문의 드립니다.  권장<script>  /* Smooth Scrolling */  $('.menu a').click(function(e) {    e.preventDefault();    $.scrollTo(0, 900);  });  문제: 이 스크립트 하기 전에는 menu a를 눌렀을 때 잘 이동했는데 해당 스크립트를 추가하면 작동이 되지 않습니다..  그래서 일단 아래와 같이  html { scroll-behavior: smooth; }  해결했더니 다음 챕터에서  .gototop부분에서 같이 스크립트 작성해야 하는 부분이 있네요. 혹시 잘못된 부분이 있을까요?  <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Archecture Agency</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page Scroll Effect JS& CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <!--FONTASOME CDN--> <script src="https://kit.fontawesome.com/c7f55332cf.js" crossorigin="anonymous"></script> </head>$(function(){ /* Trigger*/ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }); $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }); /* Change CSS with Scroll */ $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header').addClass('active') } else { $('header').removeClass('active') } }); /* Smooth Scrolling */ $('.menu a').click(function(e){ e.preventDefault(); $.scrollTo(0, 900); }); });  

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 미니 블로그 진행해보는데, MainPage는 출력이 되고 버튼도 작동됩니다. 다만 여기서 PostViewpage로 넘어가려니, 아래와 같은 오류가 발생합니다. 콘솔 로그를 확인해도 해결방안을 잘 모르겠어서 질문드립니다. 아래 오류 사진과 PostViewPage 코드입니다. 

유사 다른 질문 참고해도 오타는 없는 거 같은 데 동일 실패가 반복 됩니다. 

tl.set('#emart .pick', { opacity: 0 }) .to(map, { scale: 1, x: 0, y: 0 }) .set('#emart .pick', { opacity: 1 }) .fromTo('#emart .path', { strokeDashoffset: 496 }, { strokeDashoffset: 0 }) .to( '#emart .pick', { motionPath: { path: '#emart .path', align: '#emart .path', alignOrigin: [0.5, 0.5], }, }, '<' );위 코드에서 맨 처음 set 으로 opacity: 0 을 줘서 pick을 안 보이게 한 다음에후에 다시 set으로 opacity: 1을 주게 되는데요 궁금한 것이아직 순서상 motionPath 가 실행될 차례가 아니어서 마트 위치에서 pick 이 보여질 것인데 어째서 강남역 위치에서 부터 보여 지게 되는지 궁금합니다. 아래에 있는 set을 위로 올려서tl.set('#emart .pick', { opacity: 0 }) .set('#emart .pick', { opacity: 1 }) .to(map, { scale: 1, x: 0, y: 0 })이렇게 위치를 바꾸면 그때서야 제가 이해한 형태로 움직이게 되네요.왜 그런지 궁금합니다.

해당 편 강의를 들어보면 set을 어디선가 사용한 것 같이 설명을 해주시는데 혹시 정확히 어느 파트로 가야 set 사용한걸 볼 수 있을까요?

안녕하세요.수업 너무 잘 듣고 있습니다 ^^gsap.set 은 어디에서 처음 배우는가요? 베이직 편도 다 봤는데 제가 놓친것인지.. 그리고 나중에 svg 편이 새로 출시되는 계획이 있는걸까요~?

본 강의에서는 resize 핸들러를 사용해서 구성이 되었는데,(function () { const houseElem = document.querySelector(".house"); window.addEventListener("scroll", function () { const maxScrollValue = document.body.offsetHeight - window.innerHeight; const zIndex = (pageYOffset / maxScrollValue) * 880 - 900; houseElem.style.transform = `translateZ(${zIndex}vw)`; }); })(); 이런식으로 scroll 이벤트 내부에 maxScrollValue를 사용하면 화면이 height이 변경되더라도 문제가 없는게 아닐까 생각이 되서요! 여러가지 방법이 있을 수 있겠지만 scroll 이벤트 안에 넣은게 아닌 resize 이벤트에 넣은 이유가 maxScrollValue이 재사용성될 가능성이 있기 때문일까요??

div와 span 태그 간의 차이점은 알겠는데 p태그와 div,span태그 간의 차이가 있나요? 어떤 기준으로 선택하여 사용하면 될까요?input 태그 내에서 value를 사용할 때 value가 하는 역할이 무엇인지 궁금합니다! 

hook 실습중인데 강의에선 클릭했을때만 콘솔이 찍히는거같은데 저는 console이 계속 찍힙니다. ㅜㅜㅜ 

여기까지 작성하였는데 질문중에 폰트어썸관련질문보고 주신링크인 cdnjs.com에 4.7버전이 없고 다6.대 버전입니다.. 또한 https://fontawesome.bootstrapcheatsheets.com/#보내주셨던 링크에서 복사해서 썼지만 이렇게 아무것도 뜨지 않습니다ㅠㅠ

안녕하세요~데이터베이스 이해와 실습 CRUD 실습을 진행하다가 오류로 인하여 다음차시 진행이 불가하여 질문드립니다. PS C:\Users\폴더이름\Desktop\database> node db.jsError: querySrv ENOTFOUND _mongodb._tcp.cluster0.mongodb.net at QueryReqWrap.onresolve [as oncomplete] (node:internal/dns/promises:291:17) { errno: undefined, code: 'ENOTFOUND', syscall: 'querySrv', hostname: '_mongodb._tcp.cluster0.mongodb.net' 관련하여 챗GPT에 오류 내용을 검색해본 후 원인 및 해결방법에 대해 아래 내용을 얻을 수 있었는데요인터넷 연결 확인:인터넷 연결이 정상적으로 이루어지고 있는지 확인하세요. 특히, 네트워크에 제한이 있거나 프록시 서버를 사용하는 경우 문제가 발생할 수 있습니다.DNS 설정 문제:DNS 설정 문제로 인해 _mongodb._tcp.cluster0.mongodb.net 도메인이 해결되지 않을 수 있습니다. DNS 서버를 Google Public DNS(8.8.8.8, 8.8.4.4)로 변경하여 문제가 해결되는지 확인해보세요.Windows에서 DNS 설정 변경 방법:제어판 > 네트워크 및 인터넷 > 네트워크 및 공유 센터 > 어댑터 설정 변경으로 이동합니다.사용 중인 네트워크 연결을 마우스 오른쪽 버튼으로 클릭하고 속성을 선택합니다.인터넷 프로토콜 버전 4 (TCP/IPv4)를 선택한 후 속성을 클릭합니다.하단에 있는 다음 DNS 서버 주소 사용을 선택하고, 8.8.8.8과 8.8.4.4를 입력합니다.설정을 저장하고 다시 시도해보세요.MongoDB Atlas의 클러스터 주소 확인:cluster0.mongodb.net이 아니라 클러스터의 정확한 호스트명을 사용하고 있는지 확인하세요. MongoDB Atlas에서 클러스터의 연결 문자열을 다시 복사하여 확인하세요.Atlas UI에서 데이터베이스 > Connect > Connect Your Application을 선택하고, 제공된 연결 문자열을 확인하세요. 예를 들어:bash코드 복사mongodb+srv://<username>:<password>@cluster0.mongodb.net/test?retryWrites=true&w=majorityuseUnifiedTopology 옵션 사용:최신 버전의 MongoDB 드라이버를 사용하고 있는지 확인하고, useUnifiedTopology 옵션이 활성화되어 있는지 확인하세요.javascript코드 복사const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });방화벽 또는 네트워크 제한:회사 네트워크나 특정 ISP에서 DNS 쿼리 또는 MongoDB Atlas에 대한 연결을 제한할 수 있습니다. 이런 경우, 다른 네트워크(예: 휴대폰 핫스팟)에서 시도해보거나, 네트워크 관리자에게 문의하세요.SRV 레코드 대신 표준 연결 문자열 사용:SRV 레코드(mongodb+srv://) 대신 표준 MongoDB 연결 문자열(mongodb://)을 시도해보세요. SRV 레코드를 지원하지 않는 네트워크 환경에서 표준 연결이 문제를 해결할 수 있습니다.현재 회사에서 지급한 노트북으로 진행하여 보안상 문제가 있어 작업이 불가한건지.. 위 내용을 읽어봐도 명확하지 않아 질문드립니다.

Security 부분에 SSL 설정하는 부분이 안보이는데 바뀐건가요? 설정한적에 없는데 설정이 되어있기는 합니다.  

강의 내용은 아니지만 따로 뭔가를 더 하고싶어서 그런데화면은 잘 나왔는데 text-align: center;로 중앙배치 했지만 세로가 위쪽에있는데 세로도 중앙배치 하려면 어떻게 해야하나요?

 // PostListItem.jsx import React from "react"; import styled from "styled-components"; const Wrapper = styled.div` width: calc(100% -32px); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid grey; border-radius: 8px; cursor: pointer; background: white; :hover { background: lightgrey; } `; const TitleText = styled.p` font-size: 20px; font-weight: 500; `; // 글의 제목만 표시 function PostListItem(props) { const { post, onClick } = props; return ( <Wrapper onClick={onClick}> <TitleText>{post.title}</TitleText> </Wrapper> ); } export default PostListItem; // PostList.jsx import React from "react"; import styled from "styled-components"; import PostListItem from "./PostListItem"; const Wrapper = styled.div` display: flex; flex-direction: column; align-items: flex-start; justify-content: center; :not(:last-child) { margin-bottom: 16px; } `; function PostList(props) { const { posts, onClickItem } = props; return ( <Wrapper> {posts.map((post) => { return ( <PostListItem key={post.id} post={post} onClick={() => { onClickItem(post); }} /> ); })} </Wrapper> ); } export default PostList;   안녕하세요, 소플님. mini-blog 프로젝트 실습 질문합니다.박스 테두리가 강의 영상과 다르게 나오는데 style부분에서 어느 파일을 고쳐야 할지 잘 모르겠습니다.좋은 강의 무료로 해주셔서 감사합니다!

제가 슬릭 슬라이더 pc를 모바일로 바꾸려고 하는데요..제이쿼리에서 바꿀 방법 없을까요???아래 같이 추가햇는데 안먹어서 질문합니다 ㅠㅠ /* product */ $('.sales-presentation').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정 draggable : true, //드래그 가능 여부 responsive: [ // 반응형 웹 구현 옵션 { breakpoint: 960, //화면 사이즈 960px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:3 } }, { breakpoint: 768, //화면 사이즈 768px settings: { //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경 slidesToShow:2 } } ] });

안녕하세요강의 재미있게 잘 듣고 있습니다제가 궁금한 것은 예제 삼아 다른 코드를 테스트해보고 있는데 문제는 붙임 코드를 실행하면 4열로 형성된 카드 안에 더미 텍스트와 버튼들이 있어야 하는데 border 밖에 형성되어서 아무리 옵션을 바꿔도 변화가 없습니다강사님의 명쾌한 해답을 듣고 싶어요 <div className="grid grid-cols-12 gap-6"> <div className="col-span-12 lg:col-span-6 xxxl:!col-span-3"> <div className="box border-t-[5px] border-t-danger dark:border-t-danger"> <div className="box-header"> <h5 className="font-semibold text-xl text-danger text-center">New Project <span className="font-normal text-xs text-gray-500 dark:text-white/70">(03)</span></h5> </div> <div className="box-body overflow-auto"> <div className="gap-4 grid" id="task-left"> <div ref={leftContainerRef} onMouseEnter={OnDivChange} className='firstdrag' id="new-tasks-draggable" data-view-btn="new-tasks"> <div className="box task-box"> <div className="box-body space-y-4"> <div className="flex"> <div className="flex space-x-3 rtl:space-x-reverse"> <img src={"../../assets/img/logos/4.png"} className="p-1 h-full avatar avatar-sm bg-gray-100 dark:bg-black/20 rounded-sm" alt="logo" /> <div className="my-auto hidden sm:block"> <h5 className="text-base font-semibold w-44 truncate">Zanex Laravel Project</h5> <p className="text-gray-500 dark:text-white/70 text-xs my-auto flex space-x-1 rtl:space-x-reverse"><i className="ri-calendar-line"></i><span>05-12-2022</span></p> </div> </div> <div className="ltr:ms-auto rtl:mr-auto hs-dropdown ti-dropdown [--placement:left-top]"> <Link aria-label="anchor" href="#!" scroll={false} className="hs-dropdown-toggle ti-dropdown-toggle hover:bg-transparent dark:hover:bg-transparent inline-flex !p-0 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border-0 font-medium text-gray-500 shadow-none align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 transition-all dark:text-white/70"> <i className="ri ri-more-2-line text-lg leading-none"></i> </Link> <div className="hs-dropdown-menu w-40 min-w-[10rem] mt-0 transition-none ti-dropdown-menu"> <Link className="ti-dropdown-item" href="#!" scroll={false} ><i className="ri-eye-line"></i>View</Link> <Link className="ti-dropdown-item" href="#!" scroll={false} ><i className="ri-edit-2-line"></i>Edit</Link> <Link className="task-remove ti-dropdown-item" href="#!" scroll={false} ><i className="ri-delete-bin-6-line"></i>Delete</Link> </div> </div> </div> <div> <p className="mb-2">Justo kasd duo sanctus et elitr et, sed diam clita lorem sed eirmod, clita labore tempor et sanctus et ipsum stet, eos.</p>

깃 복붙도 해봤는데 계속 저래요... ㅜㅜ