묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
cityList 개발에서 citylist 가 렌더가안되요
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂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일 이후에 적용됩니다.
-
미해결WEB2 - JavaScript
27. 함수 리턴에서 sumColorRed 의 출력값 질문드려요.
아래와 같이 코드를 작성했을 때,화면에 출력되는 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; }
-
해결됨한 입 크기로 잘라 먹는 리액트(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>
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
북마크바 배치 문의드립니다!
⚠질문 작성법세션 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 링크 문의
강의 소개에 교재와 git 링크를 제공한다고 적혀있어서 찾아봤는데 어디에 있는지 못 찾았습니다. 어디에서 확인할 수 있는 걸까요?
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
명언 설정하는데 위치설정 오류가 있어요!
⚠질문 작성법세션 7 - 4.API를 사용해 명언 강사님처럼 명언을 검색바 밑으로 보여지게 출력하고 싶은데요, 저는 오른쪽으로 명언이 출력되요! 명언바 위치 설정을 어떻게 해야 하는 지 궁금해요?!const API_URL = "https://random-quote.hyobb.com/"; const quoteElement = document.getElementById("quote"); const quoteItem = localStorage.getItem("quote"); const nowDate = new Date(); const month = nowDate.getMonth() + 1; const date = nowDate.getDate(); const setQuote = (result) => { let quote = { createDate: `${month}-${date}`, quoteDate: result }; localStorage.setItem("quote", JSON.stringify(quote)); quoteElement.textContent = result; }; const getQuote = async () => { try { const data = await fetch(API_URL).then((res) => res.json()); const result = data[1].respond; setQuote(result); } catch (err) { console.log(`err:${err}`); setQuote("작은 기회로 부터 종종 위대한 업적이 시작된다. - 데모스테네스"); } }; getQuote();
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
getStringedDate month , date 변환 질문
안녕하세요! 이정환님 강의 정말 재미있게 잘 보고 있습니다. 😊 New 페이지 구현하기 2.기능 강의 중에const getStringedDate = (targetDate) => { let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if(month < 10) { month = `0${month}`; } if(date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; }로 날짜 변환 함수로 강의에서 언급 해주셨는데요! 혹시 이건 어떨까요?const getStringedDate = (targetDate) => { return `${targetDate.getFullYear()}-${String(targetDate.getMonth() +1).padStart(2,0)}-${String(targetDate.getDate()).padStart(2,0)}`; }결과는 동일하게 나올 수 있을 것 같아 상관은 없지만 보통 저런 경우에는 조건문을 애용하시는 편이실까요? 어떤 방식으로 짜는 것을 더 선호 하시는지 정말 호기심에 질문을 드립니다! 😆
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
기존 mock data는 그룹이 따로 만들어지는데 뭔가 잘못된 건가요?
이게 제 console인데요아래 mock data는 자기들끼리 따로 그룹지어서 나오는데 선생님 콘솔에는 그냥 다 개별로 나오거든요...뭐가 문제일까요? import { useReducer, useRef } from "react"; const mockData = [ { id: 1, createDate: new Date().getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createDate: new Date().getTime(), emotionId: 2, content: "2번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; } } function App() { const [data, dispatch] = useReducer(reducer, [mockData]); const idRef = useRef(3); const onCreate = (createDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createDate, emotionId, content, }, }); }; return ( <> <button onClick={() => { onCreate(new Date().getTime(), 1, "Hello"); }}> 일기 추가 테스트 </button> </> ); } export default App; 제 코드도 첨부해봅니다,,,
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
카운터앱 기능구현하기 - 스테이트 리프팅이 헷갈립니다.
강의 설명 중 10분06초 부분 에서 설명해주신 " State Lifting (State끌어올리기 ) "이라는 개념이 아직 애매모호해서 좀더 확실하게 설명 부탁드려도 될까요 ?부모컴포넌트에서 state관리 해야하는 건 인지하고 있습니다. ( 단방향으로 흘러가는 React의 특성 때문에 ) 끌어올린다? 라는 키워드가 확실하게 팍! 하고 이해하기가 조금 어렵네요 ...
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Header 컴포넌트에 div 말고 애초에 button은 안 되나요?
궁금한 점이 2가지 있는데요1. Header 컴포넌트에 div 말고 애초에 button를 넣으면 안 되나요?Header.jsxconst Header = ({ title, leftChild, rightChild }) => { return ( <header className="Header"> <button className="header_left">{leftChild}</button> <div className="header_center">{title}</div> <button className="header_right">{rightChild}</button> </header> ); };App.jsx<Header title={"Header"} leftChild={"Left"} rightChild={"Right"} />이런 식으로 헤더 컴포에 처음부터 버튼 태그를 넣으면 될 것 같은데 왜 div로 감싸는 건가요?음.. 그냥 css 편의상 이유일까요? 2. 저는 css를 배울 때 처음에 charset "utf-8"; 을 항상 입력하라고 배웠는데 리액트 강의에서는 항상 안 사용하시더라구요. 리액트에서는 원래 안 쓰는건가요, 아니면 그냥 강의에서는 굳이 필요없어서 쓰지 않는건가요?
-
미해결애플 웹사이트 인터랙션 클론!
[크로스브라우징] safari에서 동영상 영역 미노출
안녕하세요.공유해주신 자료를 보다가 보니 사파리 브라우저에서는 첫번째 동영상 영역이 크롬 브라우저와 다르게 영상이 없거나, 화면 스타일이 다르게 노출되는 것 같아서요. 오류인지 문의드립니다.apple-clone-v11/@simple-version/index.htmlapple-clone-v11/@ipad-stroke-effect/index.html
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
@nestjs/serve-static
안녕하세요 강사님, 'Static File Serving에서 옵션 추가하기' 강좌에서 @nestjs/serve-static 설치하는 과정에서 버전 문제 때문인지 의존성 충돌 문제가 일어나는 것 같습니다.혹시라도 다른 분들도 저와 같은 문제 겪으실까봐 글 작성합니다.-----------------------------------npm add @nestjs/serve-static 실행------------------------------------ 오류: npm add @nestjs/serve-static npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: cf_sns@0.0.1 npm error Found: @nestjs/common@10.4.17 npm error node_modules/@nestjs/common npm error @nestjs/common@"^10.0.0" from the root project npm error npm error Could not resolve dependency-----------------------------------2. npm install @nestjs/serve-static@4.0.0 // 버전 맞춰서 설치------------------------------------ 브라우저 오류 발생: {"message":"Cannot GET /public/44f57f3f-7afa-4262-b2a3-13ee7053f920.jpg","error":"Not Found","statusCode":404}- npm run start: dev 오류 : no such file directory ~~\.index.html// 정확하지는 않지만 index.html 파일까지 찾아서 jpg 파일을 찾는 것 같아서 claude에게 물어봤더니...------------------------------------ 해결: @Module({ // 다른 모듈을 불러올 때 사용 imports: [ PostsModule, ServeStaticModule.forRoot({ rootPath: PUBLIC_FOLDER_PATH, serveRoot: '/public', serveStaticOptions: { index: false } }),이렇게 하니 해결 됐습니다... 이게 맞는건지 궁금합니다!! 일단 브라우저 요청했더니 jpg 사진은 잘 나옵니다!!코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
고차 함수 작성법과 수업 진도 관련한 질문
안녕하세요. 저는 이전 수업 기초 개념을 다 들었다고 생각했는데, 함수가 함수를 리턴하는 고차함수,그 함수 호출한 내용을 변수에 넣는 것,그걸 리턴값으로 대체하고.. 등등 내용 이해하기가 어렵습니다. 이 장에서 새롭게 배우는 내용이니 학습을 하면 되는걸까요 아니면 제가 이전 진도에서 뭔가 놓치는게 있는걸까요? 후자라면 어떻게 학습을 해야할까요? 감사합니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
dto 필드 기본값 이슈에 대해 질문드립니다.
안녕하세요!다음과 같이GET: http://localhost:3000/posts아무런 파라미터 값 없이 요청을 실행했을 때dto 객체의 기본 상태는 다음과 같고, 응답 결과로 아래와 같은 nextURL을 받을 수 있었습니다. "next": "http://localhost:3000/posts?page=undefined&order__createdAt=ASC&take=20&where__id__more_than=23"cursorPagination 이기 때문에 page를 사용하지 않지만 url에는 조립되는 이유가 로직에 값을 검증하는 부분이 없어서 그런 것 같은데요, 아래와 같이 값(dto[key])를 검증하는 것을 추가하니 문제 없이 동작하였습니다.if ( dto[key] // 값 검증 추가 && key !== 'where__id__more_than' && key !== 'where__id__less_than' ) { nextUrl.searchParams.append(key, dto[key]); }"next": "http://localhost:3000/posts?order__createdAt=ASC&take=20&where__id__more_than=23"그런데 강사님께서는 따로 검증하지 않고 진행하셨음에도 nextUrl 쪽에 page가 따로 붙어나오진 않는 것 같은데요, 어떤 차이에서 발생한걸까요?.. ㅠㅠ
-
해결됨애플 웹사이트 인터랙션 클론!
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
schema.gql 질문 드립니다.
entity 등으로 생성된 tpye 에서 강의에서 사용된 코드로 예시를 들면# product.entity.ts @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag], { nullable: true }) productTags: ProductTag[];위와같이 nullable 을 사용하여#schema.gql type Product { productId: String productName: String! description: String! productPrice: Int! isSoldout: Boolean! productSalesLocation: ProductSalesLocation productCategory: ProductCategory user: User productTags: [ProductTag!] }productTags: [ProductTag!] 와 같이 할 수 있었습니다.위에서 productTags: [ProductTag!]를 productTags: [ProductTag] 와같이 변경 해보려고합니다.방법이 있나요?@Field(() => [ProductTag, { nullable: true }], { nullable: true })에러는 발생하지 않지만 안됩니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
서버 재실행시 Many to Many
yarn start:dev 를 할 경우Many to Many 로 자동으로 생성되는 table이자꾸 문제를 일으키네요. 서버 재 실행시 기존에 만들어진 중간테이블 강의에서는 상품_상품태그 테이블이 되겠네요.해당 테이블을 삭제후 실행하지 않으면 에러발생시키네요.원인을 찾아보면 아래 코드의 주석된 custom join table 이 문제였는데요.기본 @JoinTable 사용시 문제는 사라집니다. // @JoinTable({ // name: 'PRODUCT_TO_PRODUCT_TAG', // 원하는 중간 테이블명 // joinColumn: { // name: 'PRODUCT_ID', // Product 엔티티 ID를 참조하는 컬럼명 // referencedColumnName: 'productId', // Product 엔티티의 실제 ID 컬럼명 (기본값은 PrimaryColumn 이름) // }, // inverseJoinColumn: { // name: 'PRODUCT_TAG_ID', // ProductTag 엔티티 ID를 참조하는 컬럼명 // referencedColumnName: 'productTagId', // ProductTag 엔티티의 실제 ID 컬럼명 // }, // }) @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag], { nullable: true }) productTags: ProductTag[]; 질문 1. 위의 문제를 해결할 수 있는 방법입니다.질문 2.DB 컬럼에는 UPPER_CASE (SCREAMING_SNAKE_CASE) 로 작성하지 않나요?그렇기 때문에 custom / 각 컬럼마다 @Column({ name: 'BOARD_TITLE', type: 'varchar', length: 50, nullable: false, }) @Field(() => String) boardTitle: string;위와 같이 컬럼명을 하나하나 지정해줬습니다.typeorm 또는 요즘 실무 컨벤션에서는 강의에서처럼 카멜표기법으로 사용하나요?Node 강의지만 Java기준 스프링 기본설정에서 카멜케이스조차도 스네이크로 자동 변환하는데 말이죠!msa 구조에서는 테이블은 공통된걸 사용할수도 있으니 궁금해서 질문 드립니다.
-
미해결애플 웹사이트 인터랙션 클론!
vue강의는안하시나요?!
선생님 vue강의는 안하시나여?너무 잘가르쳐 주셔서 프론트엔드쪽도 선생님한테 배우고싶네요!ㅎㅎ