173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 내용중 12분 00초 정도에 나옵니다. const filteredToDos = getFilterData(); 리랜더링 될 때마다, 해당 함수를 호출하여 결과값을 저장하라는데,,, 이게 무슨말일까요 ???
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 찍으실 때 어떤 프로그램 쓰면 선생님처럼 화면녹화도하면서 마우스로 네모박스도 그리고 그림도 그릴 수 있는거에요? 너무 궁금해요. 아 그리고 강의가 너무 꼼꼼해서 아직까진 아주 이해가 잘됩니다. 감사합니다.
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
테스트해보다가 0이 필터링 안되서 생각해보니, find는 조건에 해당되는 값을 반환해서 0입력하면 0을 반환해줘서 falsy값이라 조건이 false가 되서 제대로 작동안되는거같아요. some메서드는 쓰는게 true/false로 반환해줘서 더 나을거 같습니다 강의 항상 잘보고있습니다!
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Typeorm 관련 메서드 설명해주시는 과정에서, 위와같이, async 메서드 내부에서 create 메서드를 호출할 땐 await를 붙이지 않고, save 메서드를 호출할 땐 await를 붙이는 이유가 있을까요? 일단, async가 비동기로 메서드를 호출한다는 개념으로 알고 있고, await는 쓰레드가 값을 반환받게 하기위해 비동기 메서드 내부에서 계속 해당 코드에 머무르게끔, 점유하게끔 한다고 생각해서 create 메서드든 save 메서드든 둘다 await가 붙는다고 생각했었습니다. 제가 잘못 이해하고 있는 걸까요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
let temp = []; if (this.state) { this.state.forEach((elm) => { temp += `<img .../>` }); } temp는 배열인데 배열에 += 로 작업하신 이유가 있나요? temp = ''; 가 아닌 [] 로 시작한 이유가 궁금합니다.
미해결
찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)
안녕하세요 선생님 금일 수강신청 및 프로젝트해보면서 오류가 발생하여 질문드립니다. 우선 프로젝트를 clone하고 pnpm install로 의존성을 설치했습니다. 그리고 docker compose -f docker-compose/redis/redis-compose.yml up -d 를 실행하였는데 아래와 같은 결과가 나왔습니다. network ludgi-network declared as external, but could not be found 어떻게 조치하면 될까요~?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 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.0 node는 20 번대 사용중입니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 ~ 수업내용과 똑같이 코드작성을 하고 마지막에 실행을 했는데, 페이지 이동하기와 뒤로가기도 잘 되는데 Tost 메세지가 안뜹니다. 해당 수업 자료로 실행을 해바도 같은데 무슨 문제일까요 ?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 서버 액션에 관해 궁금한 점이 생겨 질문드립니다. 일단 제가 강의를 보고 실습하면서 느꼈던 서버 액션의 큰 장점은 다음과 같습니다. 브라우저에서 서버 측에서 사용되는 함수를 실행할 수 있다. => 별도의 백엔드 API를 구현하지 않고도 DB에 직접적으로 접근하는 등의 작업이 가능 브라우저와의 상호작용을 하면서도 컴포넌트를 서버 컴포넌트로 유지할 수 있다. 하지만 1번 장점의 경우 혼자 풀스택으로 개발하지 않고 백엔드 개발자와 함께 개발하는 경우에는, 주로 이번 강의와 같이 서버 액션 함수 내에서 별도의 API를 호출하게 될 것이라 생각됩니다. 이런 경우에도 기존의 방식대로 onSubmit 등을 사용해서 API를 호출하는 것보다, 2번 장점을 위해 서버 액션을 사용하는 것이 바람직 할지 궁금해 질문드립니다! state를 이용해 실시간 validation이 이루어져야 하는 곳이 아니라면 유용할 것 같다고 생각이 들지만, 구글링을 해봐도 최신 기술이라 그런지 실제 적용 사례를 잘 찾아볼 수 없어 질문 드립니다!
미해결
WEB2 - JavaScript
아래와 같이 코드를 작성했을 때, 화면에 출력되는 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; }
해결됨
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
선생님 게시글이 슬러그 필드를 이용해서 고유의 url 형성되는건 알겠는데 만약 제목글이 같은 글의 경우 같은 url이 만들어지면 같은 제목의 여러개의 동일한 url이 생기는게 아닌가요? 조금 이해가 안가서요...
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 1.3) 실습용 백엔드 서버 세팅 이후 terminal 에서 npm run start 로 Swagger UI 까지 작동이 되었는데요. 2.1) Page Outer를 소개합니다. 에서 npx create-next-app@14 section02 를 진행하고 나면, npm run start 시 에러가 나고 있습니다. SSR 강의를 진행하면서 계속해서 백엔드 서버에 접속을 못하는데 왜 이러는 걸까요? error 사진파일 첨부하였습니다.
해결됨
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
혹시 커서ai말고 젯브레인ai로 강의를 진행해도 진행에 어려움이 없을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리렌더링이 되고 있다고 설명하는 화면 리렌더링이 발생하지 않는다는 화면 제가 보엔 둘 다 하이라이팅이 되고 있는 것 같은데 어느 부분을 봐야 리렌더링이 안된다고 느낄 수 있을까요??
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
세션 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>
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요, 정환님 궁금한게 있습니다. 동적 경로를 갖는 page.tsx 파일 안에 generateStaticParams 라는 함수를 설정하게되면, 경로에 해당하는 모든 페이지는 모두 Static Page로 만들어지는 것으로 알고 있습니다. return하지 않은 URL Parameter를 갖는 페이지에 대해서도 동일하다고 봤었는데요 그렇다면 , 도서 id999번까지 있다고 가정해볼게요 return [{id:"1"}] 이렇게만 작성해도 999번까지 static page가 되는게 맞을까요 ?
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
⚠ 질문 작성법 세션 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);
해결됨
@시코 - TypeScript 제대로 배우기(초중급)
강의 소개에 교재와 git 링크를 제공한다고 적혀있어서 찾아봤는데 어디에 있는지 못 찾았습니다. 어디에서 확인할 수 있는 걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 해당 수업 내용을 안드로이드로 실행시켰을때 세 가지 내용중 두 가가지는 잘 나오는데 기종정보는 alert가 안뜨는데 왜 그런걸까요 ??
