강결합되는게 왜 싱글턴 패턴의 단점인지 연결이 잘 되지 않아 질문드립니다. 매개변수 주입같은 해법을 주신 것 처럼, 싱글턴 패턴과는 별개의 문제로 느껴지는데, 싱글턴을 안 하면 어떻게 나아지는지 예제 같은게 있을까요?

유인동님! 안녕하세요!!책을 아직 구매하지 않았는데 책과 이 영상강의중 어떤 것이 더 심화된 내용일까요!?아니면 같은내용인데 영상으로 더 쉽게 접할 수 있게 만드신 강의인건지 궁금합니다!

강의 잘 듣고 있습니다.질문이 있는데요,일반적인 css 꾸미기에서 width와 height의 값은 개발자가 아닌웹디자이너가 항상 알려주기도 하나요?즉 만약 vs code에서 파일이 index.html이 있고 index.css가 있다고 한다면, index.html에서 작성한 내용에 index.css에서 꾸며줄 시에 width 값과 height 값이 몇 픽셀인지, 혹은몇 퍼센트인지 정할 때 잘 모르겠다면 어떻게 해야 하나요? 개발자가 width 값과 height 값을 잘 모른다면감으로 크기를 늘렸다가 줄였다가 반복 하면서 적당한 width값과 height값을 찾아나가는 건가요?피그마에서는 보통 디자인이 다 된 결과 값을 보고 vs code에 코딩한다면 상세 정보를 보고 width크기,height크기,폰트 크기, 폰트 weight등등 다양하게 그대로 css에 적어주기만 하면 되는데요, 그랩 선생님 강의에서는 피그마로 볼 수 있게 추가 안내가 없어서, 스스로 강의 들은 이후 강의 없이 복습 할 시에(그랩마켓 웹화면 구현하기 1~3) 혹시나 각각 css로 꾸밀 때 width, height은 외우거나 혹은 보고 css에 적용하는 방식의 공부법 밖에 없는걸까요? 아니면 실무에서는 웹디자이너가 이미지등등의 경우에 width,height,기타 등등을 알려주기에 그대로 css에 코딩해주면 되는 것인지요? 그랩님, 답변 부탁드립니다.

엔드포인트마다 훅을 만드는 게 가장 좋은 방법일까요? 엔드포인트가 많아진다면 파일이 너무 많아질 것 같은데 더 좋은 방법이 있을까요?

스프링관련 프로젝트를 하려고하는데 마침 무료강의가 있어서 들어보려고 합니다.그런데 유료강의랑 무료강의랑 커리큘럼이 비슷한 것 같은데 차이점이 있을까요? 유료강의가 좀 더 자세히 알려주는건가요? 아니면 최신업로드여서 유료강의인가요? 궁금합니다.

아니면 강의 설명 동영상에프로젝트 초기버전 세팅 등 각종 프로젝트 설정을 자력으로 해야한다. 라는 안내문구라도 존재하면 좋겠습니다. 문제 해결을 할수는 있지만 초기 세팅에 시간이 많이 드는건 사실입니다.

Single Page Application(3) 수강 중barba와 gsap ScrollSmoother 사용할 때는 scroll update를 어떻게 해야되나요?

 오늘 올라온 새소식보고 문의남깁니다.현재 이강좌 구입해서 아직 듣고있지않고있거든요다음강좌가 스프링부트 리액트라고하는데지금강좌랑 내용상 겹침이 거의없는건가요?? 한가지 건의를드리자면 next.js나 장고계열에선 강의들을보면 결제기능까지 탑재하는 강의내용이 많은데 유독 스프링계열강의들에선 crud까지만 강의하고 대부분의 강좌들이 결제기능구현하는내용이 없더라구요스프링공부하는이유가 쇼핑몰같은걸 갠적으로 만들어보려고 학습하는데;;;; 다음강의 출시하실예정이라면 개인이 혼자 웬만한 웹사이트 제작할수있게 결제부터 다양한 기능구현에대한 내용을 포함시켜주실수있는지 궁금합니다. 왜 스프링계열에선 결제api연동하는걸 강의하는내용들을 다루지않는지 궁금하긴하네요    

안녕하세요, 강의 잘듣고 있습니다. const 변수로 선언된 태그를 컴포넌트화 시키셨는데  const와 컴포넌트의 차이가 궁금합니다! 즉, const는 변수이고  컴포넌트는 함수라고 인지하면 되는지 궁금합니다. 답변 부탁드려요. 감사합니다.

안녕하세요, 강사님. 좋은 강의 감사히 듣고 있습니다!현재 실제 앱 출시를 목표로 개발을 시작하려고 하는데, Expo와 CLI 중 어떤 방식으로 진행할지 고민 중입니다.공식 문서에서도 Expo를 권장하고 있고, Prebuild 기능 덕분에 대부분의 네이티브 라이브러리도 사용할 수 있고, 성능 최적화도 많이 이루어진 것으로 알고 있습니다.CLI와 Expo 사이의 런타임 성능이나 최종 번들 용량 차이에 대한 정확한 비교 자료가 부족해 선택이 쉽지 않은 상황입니다.강사님께서 CLI와 Expo를 모두 사용해보셨을 때, 두 방식 간에 실제 체감되는 성능이나 앱 용량 차이가 유의미했는지 궁금합니다.만약 차이가 크다면 CLI를 선택하는 쪽이 맞을 것 같기도 한데, 강사님의 의견이 듣고 싶습니다. 감사합니다!

강의 내용중 12분 00초 정도에 나옵니다. const filteredToDos = getFilterData();리랜더링 될 때마다, 해당 함수를 호출하여 결과값을 저장하라는데,,,이게 무슨말일까요 ???

 테스트해보다가 0이 필터링 안되서 생각해보니,find는 조건에 해당되는 값을 반환해서 0입력하면 0을 반환해줘서 falsy값이라 조건이 false가 되서 제대로 작동안되는거같아요.some메서드는 쓰는게 true/false로 반환해줘서 더 나을거 같습니다 강의 항상 잘보고있습니다! 

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.  Typeorm 관련 메서드 설명해주시는 과정에서,위와같이,async 메서드 내부에서 create 메서드를 호출할 땐 await를 붙이지 않고,save 메서드를 호출할 땐 await를 붙이는 이유가 있을까요? 일단, async가 비동기로 메서드를 호출한다는 개념으로 알고 있고,await는 쓰레드가 값을 반환받게 하기위해 비동기 메서드 내부에서 계속 해당 코드에 머무르게끔, 점유하게끔 한다고 생각해서 create 메서드든 save 메서드든 둘다 await가 붙는다고 생각했었습니다. 제가 잘못 이해하고 있는 걸까요?

let temp = []; if (this.state) { this.state.forEach((elm) => { temp += `<img .../>` }); }temp는 배열인데 배열에 += 로 작업하신 이유가 있나요? temp = ''; 가 아닌 [] 로 시작한 이유가 궁금합니다.

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello'); https://trip-wiki-api.vercel.app/?start=0브라우저에서 여기로 들어가도 api 호출값이 안나오고 검은색 창이 떠요 그리고 코드 작성했는데, Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.이런 에러만 console에 찍혀서...코드 사이트에 있는걸로 복사해서 넣어도 마찬가지네요server.js는const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, '..'))); app.get('/*splat', (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); app.listen(PORT, () => { console.log('START SERVER'); });/*splat은 /*name 해도 결과가 같아요 ㅠ express는 5.1.0node는 20 번대 사용중입니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.

아래와 같이 코드를 작성했을 때,화면에 출력되는 sum(2,3) 의 값은 5인데sumColorRed(2,3)의 값은 왜 더해지지 않고 23으로 출력되는걸까요? function sum(left, right){ document.write(left+right+'<br>') } function sumColorRed(left, right){ document.write('<div style="color:red">'+left+right+'</div>') } sum(2,3); // 5 sumColorRed(2,3); // 5

세션 7, 7. 프로젝트 적용하기프로젝트 적용 시 홈페이지 바탕화면에 이미지를 무료 이미지 사이트인 unsplash 사이트 적용 방식 외에 개인 컴퓨터 c드라이브 문서 및 다운로드 폴더에 있는 이미지를 적용하는 방법이 있나요?unsplash 에서 개인 컴퓨터로 다운로드 받은 이미지를 적용하는 방법에 대해서 궁금합니다!:root { --xlarge: 170px; --large: 28px; --medium: 18px; --small: 16px; --xsmall: 14px; --xxsmall: 10px; } body { margin: 0 auto; width: 100%; font-family: "Noto Sans KR", sans-serif; background-image: url("C:/Users/user/Downloads/image.jpeg"); font-optical-sizing: auto; font-weight: 400; font-style: normal; } .main-container { display: flex; justify-content: center; align-items: center; height: 100vh; position: relative; } .main-container .main-wrapper { text-align: center; position: fixed; } .main-wrapper .date { font-size: var(--large); } .main-wrapper .time { font-size: var(--xlarge); font-weight: 400; margin-top: -35px; } .main-wrapper .search { display: flex; justify-content: center; } .search #search-input { width: 600px; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: var(--medium); padding: 15px 0px; border-radius: 30px; border: 0px; text-align: center; margin-top: -10px; } .search #search-input::placeholder { color: rgb(169, 169, 169); font-size: var(--medium); } .quote { font-size: var(--small); position: fixed; bottom: 0; max-width: 800px; padding: 0 10px; margin-bottom: 20px; font-weight: 300; text-align: center; } .bookmark-open { width: 240px; padding: 15px 30px; font-size: var(--xsmall); height: 20px; position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; color: white; background-color: rgba(0, 0, 0, 0.5); } .bookmark-close { width: 240px; padding: 15px 30px; font-size: var(--xsmall); height: 20px; position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; color: white; } .bookmark-close div { cursor: pointer; } .bookmark-open div { cursor: pointer; } .bookmark-bar { width: 240px; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 50px; right: 0px; min-height: calc(100vh - 70px); padding: 10px 30px; color: white; } .bookmark-item-add-btn { padding: 10px; font-size: var(--small); cursor: pointer; display: flex; justify-content: center; border-radius: 5px; background-color: rgba(255, 255, 255, 0.1); border: rgba(241, 241, 241, 0.2) 0.5px solid; margin-bottom: 35px; margin-top: 10px; } .bookmark-item-add-btn:hover { background-color: rgba(255, 255, 255, 0.2); } .bookmark-item-input-form { border-radius: 5px; background-color: rgba(255, 255, 255, 0.1); border: rgba(241, 241, 241, 0.2) 0.5px solid; font-size: var(--small); padding: 12px; margin-top: 20px; margin-bottom: 20px; } .bookmark-item-input-form .bookmark-input { margin-bottom: 12px; } .bookmark-item-input-form .bookmark-input .label { margin-bottom: 3px; font-size: var(--xsmall); } .bookmark-item-input-form .bookmark-input input { width: 200px; height: 20px; border-radius: 5px; margin: 5px; } .bookmark-item-input-btn { display: flex; justify-content: space-between; font-size: var(--xsmall); margin-top: 5px; } .bookmark-item-input-btn div { padding: 5px 35px; border-radius: 5px; border: rgba(241, 241, 241, 0.2) 0.5px solid; cursor: pointer; } .bookmark-item-input-btn div:hover { background-color: rgba(255, 255, 255, 0.2); } .bookmark-list a { color: white; display: flex; text-decoration: none; } .bookmark-list .url-icon { margin-right: 8px; } .url-icon img { vertical-align: middle; } .bookmark-list .bookmark-item { border-radius: 5px; background-color: rgba(255, 255, 255, 0.1); border: rgba(241, 241, 241, 0.2) 0.5px solid; font-size: var(--small); padding: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } .bookmark-item .del-btn { color: lightgray; vertical-align: center; font-size: var(--xxsmall); cursor: pointer; }

리렌더링이 되고 있다고 설명하는 화면 리렌더링이 발생하지 않는다는 화면 제가 보엔 둘 다 하이라이팅이 되고 있는 것 같은데 어느 부분을 봐야 리렌더링이 안된다고 느낄 수 있을까요??

세션 7 6.북마크 아이템 추가하기북마크 추가 버튼을 클릭해도 이름, 주소, 취소, 추가 활성화되지 않고 있습니다.어떠한 코드 오류가 있는 지 오류 코드 체크해주세요!const newBookmarkForm = document.getElementById("bookmark-item-input-form"); let bookmarkList = []; if (localStorage.getItem("bookmarkList")) { bookmarkList = JSON.parse(localStorage.getItem("bookmarkList")); } else { localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList)); } const addBookmarkItem = () => { let bookmarkList = []; if (localStorage.getItem("bookmarkList")) { bookmarkList = JSON.parse(localStorage.getItem("bookmarkList")); } let name = document.getElementById("new-bookmark-name-input").value; let url = document.getElementById("new-bookmark-url-input").value; let createAt = Date.now(); bookmarkList.push({ name: name, url: url, createAt: createAt }); localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList)); document.getElementById("new-bookmark-name-input").value = ""; document.getElementById("new-bookmark-url-input").value = ""; newBookmarkToggle(); }; let isAddBtnClick = false; newBookmarkForm.style.display = "none"; const newBookmarkToggle = () => { isAddBtnClick = !isAddBtnClick; isAddBtnClick ? (newBookmarkForm.style.display = "block") : (newBookmarkForm.style.display = "none"); }; document .getElementById("bookmark-item-add-btn") .addEventListener("click", newBookmarkToggle); document.getElementById("add-btn").addEventListener("click", addBookmarkItem); document .getElementById("cancel-btn") .addEventListener("click", newBookmarkToggle); (function () { const bookmarkBar = document.getElementById("bookmark-bar"); const bookmarkOpen = document.getElementById("bookmark-open"); const bookmarkClose = document.getElementById("bookmark-close"); const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen"); if (isBookMarkBarOpen === "close") { bookmarkBar.style.display = "none"; bookmarkOpen.style.display = "none"; bookmarkClose.style.display = "flex"; } else { bookmarkBar.style.display = "block"; bookmarkOpen.style.display = "flex"; bookmarkClose.style.display = "none"; } const bookmarkBarToggle = () => { const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen"); if (isBookMarkBarOpen === "close") { localStorage.setItem("isBookMarkBarOpen", "open"); bookmarkBar.style.display = "block"; bookmarkOpen.style.display = "flex"; bookmarkClose.style.display = "none"; return; } localStorage.setItem("isBookMarkBarOpen", "close"); bookmarkBar.style.display = "none"; bookmarkOpen.style.display = "none"; bookmarkClose.style.display = "flex"; }; document .getElementById("bookmark-open-btn") .addEventListener("click", bookmarkBarToggle); document .getElementById("bookmark-close-btn") .addEventListener("click", bookmarkBarToggle); })(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>newtab</title> <link rel="stylesheet" href="./css/main.css" /> </head> <body> <div class="main-container"> <div class="main-wrapper"> <div class="today-info"> <div class="date" id="date"> <!-- 날짜&요일 --> </div> <div class="time" id="time"> <!-- 현재 시간 --> </div> </div> <div class="search"> <input id="search-input" autocomplete="off" placeholder="검색어를 입력하세요" /> </div> </div> <div class="quote" id="quote"> <!-- 명언 --> </div> </div> <div class="bookmark-open" id="bookmark-open"> <div id="bookmark-open-btn">북마크 닫기</div> </div> <div class="bookmark-close" id="bookmark-close"> <div id="bookmark-close-btn">북마크 열기</div> </div> <div class="bookmark-bar" id="bookmark-bar"> <!-- 북마크바 --> <div class="bookmark-item-add-btn">+ 북마크 추가</div> <div class="bookmark-item-input-form" id="bookmark-item-input-form"> <div class="bookmark-input"> <div class="new-bookmark-name"> <div class="label">이름</div> <input id="new-bookmark-name-input" /> </div> <div class="new-bookmark-url"> <div class="label">주소</div> <input id="new-bookmark-url-input" /> </div> </div> <div class="bookmark-item-input-btn"> <div class="cancel-btn" id="cancel-btn">취소</div> <div class="add-btn" id="add-btn">추가</div> </div> </div> </div> <script src="./js/clock.js"></script> <script src="./js/search.js"></script> <script src="./js/quote.js"></script> <script src="./js/bookmark-toggle.js"></script> <script src="./js/bookmark.js"></script> </body> </html>

⚠질문 작성법세션 7 5. 북마크바 만들기북마크바 배치가 강의내용이랑 달라서 문의드립니다.북마크바 열기와 닫기 버튼 활성화가 강의랑 다르게 열기 버튼, 닫기 버튼이 따로 실행되어 보여지고 있는데요, 열기랑 닫기를 하나로 북마크바 보여지게 할려면 어떻게 코드 수정해야하나요<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>newtab</title> <link rel="stylesheet" href="./css/main.css" /> </head> <body> <div class="main-container"> <div class="main-wrapper"> <div class="today-info"> <div class="date" id="date"> <!-- 날짜&요일 --> </div> <div class="time" id="time"> <!-- 현재 시간 --> </div> </div> <div class="search"> <input id="search-input" autocomplete="off" placeholder="검색어를 입력하세요" /> </div> </div> <div class="quote" id="quote"> <!-- 명언 --> </div> </div> <div class="bookmark-open" id="bookmark-open"> <div id="bookmark-open-btn">북마크 닫기</div> </div> <div class="bookmark-close" id="bookmark-close"> <div id="bookmark-close-btn">북마크 열기</div> </div> <div class="bookmark-bar" id="bookmark-bar"> <!-- 북마크 바 --> </div> <script src="./js/clock.js"></script> <script src="./js/search.js"></script> <script src="./js/quote.js"></script> <script src="./js/bookmark-toggle.js"></script> </body> </html> const bookmarkBar = document.getElementById("bookmark-bar"); const bookmarkOpen = document.getElementById("bookmark-open"); const bookmarkClose = document.getElementById("bookmark-close"); const bookmarkBarToggle = () => { const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen"); if (isBookMarkBarOpen === "close") { localStorage.setItem("isBookMarkBarOpen", "open"); bookmarkBar.style.display = "block"; bookmarkOpen.style.display = "flex"; bookmarkClose.style.display = "none"; return; } localStorage.setItem("isBookMarkBarOpen", "close"); bookmarkBar.style.display = "none"; bookmarkOpen.style.display = "none"; bookmarkClose.style.display = "flex"; }; document .getElementById("bookmark-open-btn") .addEventListener("click", bookmarkBarToggle); document .getElementById("bookmark-close-btn") .addEventListener("click", bookmarkBarToggle);