묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 강의 쿠폰 관련 질문
안녕하세요, 비슷한 유형의 질문이 이미 있어 저도 글을 남겨봅니다. 미리 구매해둔 후 이제 듣기 시작하려 하니, 새로운 교육과정으로 리뉴얼 되었다고 하는데, 시기를 놓쳐 쿠폰 혜택을 받지 못했습니다. 해당 강의에 기대를 많이 하고 있었는데, 리뉴얼된 버전으로 듣지 못한다는 사실이 안타까워 혹시 쿠폰을 받을 다른 방법이 없을지 문의드립니다. 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 만들기 1탄
코드를 아래와 같이 작성하였는데, 이렇게 표시가 됩니다. (사진 참고)레퍼런스도 참고하여 적었는데 해결이 안 되어서 질문 납깁니다. 또한 fontawesome도 강의 내용대로 연동시키려 하였는데 이모티콘이 보이지 않습니다.어떻게 해야 할까요? <!DOCTYPE html> <html lang="ko"> <head> <title>홍길동 님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title> <link href="./styles/index.css" rel="stylesheet" /> <script src="https://kit.fontawesome.com/e3aa47cdec.js" crossorigin="anonymous" ></script> </head> <body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> <!-- TODAY 0 | TOTAL 12345 --> <div class="today"> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div> <div class="wrapper__left__body"> <div class="left__body__header"> <div class="left__body__header__gray"></div> <div class="left__body__header__line"></div> </div> <div class="left__body__profile"> <div class="profile__detail"> <i class="fa-regular fa-face-grin"></i>이름</div> <div class="profile__detail"> <i class="fa-solid fa-phone"></i>Phone</div> <div class="profile__detail"> <i class="fa-regular fa-envelope"></i>E-mail</div> <div class="profile__detail"> <i class="fa-brands fa-instagram"></i>인스타그램</div> </div> <div class="left__body__footer"> <div class="wrapper__feel"> <div class="feel__title">오늘의 기분</div> <select class="feel__select"> <option>기쁨 😊</option> <option>슬픔 🥲</option> <option>화남 😑</option> <option>분노 🤬</option> </select> </div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body> </html> ------------- css ------------- * { box-sizing: border-box; margin: 0px; } .background { width: 1024px; height: 600px; background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; } .outerbox { width: 808px; height: 544px; background-image: url("../images/outerbox.png"); } .wrapper { display: flex; flex-direction: row; padding: 32px 0 0 32px; } .wrapper__left { width: 208px; height: 472px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-left: 3px; margin-right: 7px; } .wrapper__left__header { width: 100%; height: 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .today { padding-top: 10px; font-size: 9px; } .wrapper__left__body { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding: 20px 30px 0px 30px; border: 1px solid gray; border-radius: 15px; background-color: white; } .left__body__header { width: 100%; display: flex; flex-direction: column; } .left__body__header__gray { width: 148px; height: 133px; background-color: gray; } .left__body__header__line { border-top: 1px dotted black; margin: 12px 0px; } .left__body__profile { font-style: normal; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .profile__detail { color: #999999; font-size: 10px; margin-bottom: 10px; display: flex; flex-direction: row; } .fas { color: black; margin-right: 10px; width: 5px; height: 5px; } .left__body__footer { width: 100%; margin-bottom: 30px; } .wrapper__feel { display: flex; flex-direction: column; justify-content: center; width: 100%; } .feel__title { font-size: 11px; margin-bottom: 5px; color: gray; } .wrapper__right { width: 524px; height: 472px; background-color: violet; display: flex; flex-direction: column; justify-content: flex-end; padding-left: 5px; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새로운 강의 쿠폰 질문
개인적인 사정으로 오늘에서야 공지사항을 확인했습니다.기존의 프론트엔드 고농축 코스를 수강중인데 혹시 쿠폰을 다시 발급 받을 수 있을까요? 답변 부탁드립니다.좋은 강의 제공해주셔서 감사합니다. (+쿠폰함을 확인해보았지만 제공받은 쿠폰이 없었습니다. )
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
이 강좌를 수강 하면 게시판을 만들수 있나요?
강좌 목록에는 페이징 게시글 관련사항이 있는데 Db와 연결해서게시판을 만들 수 있나요
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의자료가 안뜹니다
강의 자료가 있는 항목을 누르면이렇게 아무것도 뜨지 않습니다 ㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 리뷰 강의에 대한 질문
섹션23인 검색 기능 구현 파트 이후로는 포트폴리오 강의가 제공되지 않고 있는데, 이 후의 중고마켓 웹사이트에 대한 포트폴리오 리뷰 강의는 제공되지 않고, 스스로 하되, 포트폴리오 리뷰 자료를 참고하면 되는 건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
백엔드도 '완벽한' 시리즈 코스가 나오나요?
백엔드도 나온다면 완벽한 시리즈로 듣고 싶어서요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
기존강의 수강질문
새 강의도 쿠폰 받아서 잘 구매 하였습니다.궁금한 것은 기존 강의를 다 듣고 새 강의를 수강해야 하는 것인지 기존 강의의 진도와 새 강의의 진도가 어느 부분인지 어떻게 바뀐 것 인지에 대해 이해가 안 가서 어떻게 해야하는지 알려주는 공지 또는 간단 영상이 필요할 것 같습니다.기존 강의의 커리큘럼과 비슷하나 좀 바뀐 부분이 있을 것 같아서요.기존 강의를 다 수강 후 복습 + 새로운 기술을 익힐 겸 새 강의를 수강하는 것이 맞는지,아니면 기존 강의는 수강을 멈추고 새로운 강의를 다시 수강하면 되는 것인지 알려주시면 감사하겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
질문드립니다
안녕하세요,수업 잘 듣고 따라가고 있습니다~~!! 다름이 아니라 , 아무래도 graphQL를 이용한것보다 취직하고싶은 회사에서 대부분REST API를 사용하는거같아 혹시 fetch 또는 axios를 사용하는 방법은 강의에 추가할 계획이 없으실까요?그리고 nextjs에서는 axios를 사용하는 대신에 fetch를 사용하는것이 맞을까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
기존강의 새 강의
새 강의 구매 할인 어떻게 진행하면 되는건가여ㅛ?방법을 몰라서 문의드립니다.,
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요
안녕하세요,혹시 최초 프로젝트 생성할때, nextjs15버전으로 설정되었는데 괜찮을까요?14로 다운그레이드 해야할까요?
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
Meteor 실행 오류 문의 드립니다.
DISABLE_WEBSOCKETS=true meteor run 실행 오류입니다. 아래 오류 코드이고 개인 계정부분은 ** 처리했습니다. **@**ui-MacBookAir graphql-study-apollo-v4-master % DISABLE_WEBSOCKETS=true meteor run[[[[[ ~/Desktop/Study_File/Back-end_Study/GraphQL/graphql-study-apollo-v4-master]]]]] => Started proxy. arch: posix_spawnp: /Users/**/.meteor/packages/meteor-tool/.2.14.0.1btio5i.hfop++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/mongodb/bin/mongod:Bad CPU type in executableUnexpected mongo exit code 1. Restarting.=> Meteor 3.0.4 is available. Check the changeloghttps://docs.meteor.com/changelog.html and update this project with 'meteorupdate'.arch: posix_spawnp: /Users/**/.meteor/packages/meteor-tool/.2.14.0.1btio5i.hfop++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/mongodb/bin/mongod:Bad CPU type in executableUnexpected mongo exit code 1. Restarting.arch: posix_spawnp: /Users/**/.meteor/packages/meteor-tool/.2.14.0.1btio5i.hfop++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/mongodb/bin/mongod:Bad CPU type in executableUnexpected mongo exit code 1. Restarting.Can't start Mongo server. MongoDB failed global initialization**@*ui-MacBookAir graphql-study-apollo-v4-master % 답변 부탁드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 자료 내용 확인 부탁드립니다.
안녕하세요. 수강생 입니다. 좋은 강의 잘 수강하면서 열심히 공부하고 있습니다.노션 페이지 내용 관련으로 문의드립니다.[입문] 시작은 프리캠프 - 섹션 3 CSS의 기본과 싸이월드 실습 1CSS 사용방법 3가지 예시 이미지 중 해당 내용들에 대한 이미지가 이상해문의 남깁니다. 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 자료 내용 맞는지 확인 부탁드립니다.
[입문] 시작은 프리캠프 - 섹션 2 HTML과 기술스택 이해하기 노션 페이지 내용 중 종속태그 예시 부분의 이미지에 태그 내용은 없고 글자만 표기되어 있습니다. 이 부분이 오류인지 확인 부탁드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이 강의는 이제 업데이트가 진행되지 않는건가요?
문의드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새버전 강의
주기적으로 업데이트한다고 강의 소개에 크게 적어놓으셨는데, 왜 2023년 초 이후로 업데이트가 없나요?그리고 새로운 버전 강의가 나왔던데, 이전 버전 수강자들에게는 무료로 제공되나요?이 강의가 저렴한 것도 아니고 몇십만 원이나 하는데, 그 정도 보상은 해주셔야 한다고 생각합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
신규강의가 비슷하게 나왔던데...
기존에 프론트엔드 강의 수강생들에 대한 혜택은 없는건가요?? 거기는 이제 업데이트 안되는건가요?? 아 너무한데.....
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
날씨 API 코드 오류
const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; 2.5로 수정햇는데 오류가 뜨네요 어떠한 오류인 지 모르겠습니다 밑 코드는 // DOM 요소 선택 const todoInput = document.querySelector("#todo-input"); // 할 일 입력 필드 const todoList = document.querySelector("#todo-list"); // 할 일 목록 // localStorage에서 저장된 데이터를 불러오기 const savedTodoList = JSON.parse( localStorage.getItem("saved-items") ); /* 문자열로 저장된 데이터를 JSON.parse를 통해 배열로 변환 */ // 새로운 할 일을 생성하는 함수 const createTodo = function (storageData) { let todoContents = todoInput.value; // 입력 필드에서 가져온 값 if (storageData) { todoContents = storageData.contents; // 저장된 데이터가 있으면 그 내용을 사용 } // 할 일을 나타내는 DOM 요소 생성 const newLi = document.createElement("li"); // li 요소 생성 const newSpan = document.createElement("span"); // span 요소 생성 (할 일 내용 표시) const newBtn = document.createElement("button"); // 완료 버튼 생성 // 완료 버튼 클릭 시 해당 할 일을 완료 상태로 변경 newBtn.addEventListener("click", () => { newLi.classList.toggle("complete"); // 완료된 상태를 토글 saveItemsFn(); // 변경 내용을 저장 }); // 할 일을 더블클릭하면 삭제 newLi.addEventListener("dblclick", () => { newLi.remove(); // li 요소 제거 saveItemsFn(); // 변경 내용을 저장 }); // 저장된 데이터가 완료 상태면 완료 표시 추가 if (storageData?.complete) { // 옵셔널 체이닝 사용 newLi.classList.add("complete"); // 완료 클래스 추가 } // 할 일 내용을 span에 추가 newSpan.textContent = todoContents; // li 요소에 버튼과 span을 자식으로 추가 newLi.appendChild(newBtn); newLi.appendChild(newSpan); // 할 일 목록에 li 추가 todoList.appendChild(newLi); // 입력 필드를 비우기 todoContents.value = ""; // 변경된 목록 저장 saveItemsFn(); }; // Enter 키를 눌렀을 때 할 일 추가 const keyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); // 입력값이 있으면 할 일을 생성 } }; // 전체 삭제 기능 const deleteAll = function () { const liList = document.querySelectorAll("li"); // 모든 li 요소 선택 for (let i = 0; i < liList.length; i++) { liList[i].remove(); // 모든 할 일 제거 } saveItemsFn(); // 변경 사항 저장 }; // localStorage에 저장하는 함수 const saveItemsFn = function () { const saveItems = []; // 저장할 데이터를 담을 배열 // 현재 목록의 할 일들을 객체로 변환하여 저장 for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, // 할 일 내용 complete: todoList.children[i].classList.contains("complete"), // 완료 상태 }; saveItems.push(todoObj); // 객체를 배열에 추가 } // 배열이 비었으면 localStorage에서 데이터 제거, 아니면 저장 saveItems.length === 0 ? localStorage.removeItem("saved-items") // 데이터가 없으면 키 삭제 : localStorage.setItem( "saved-items", JSON.stringify(saveItems) // 배열을 문자열로 변환 후 저장 ); }; // 저장된 데이터가 있으면 불러와 화면에 표시 if (savedTodoList) { for (let i = 0; i < savedTodoList.length; i++) { createTodo(savedTodoList[i]); // 저장된 데이터로 할 일을 생성 } } const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; // Geolocation API로 사용자 위치 요청 const askForLocation = function () { navigator.geolocation.getCurrentPosition( acessToGeo, // 위치 정보를 가져오면 실행할 콜백 (err) => { console.log(err); // 에러가 발생하면 에러 정보를 출력 } ); }; // 위치 요청 실행 askForLocation();
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
/boards/224/ 403 이 뜨네요.
next.config.mjs/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, trailingSlash: true, generateBuildId: () => "tranme24", // 아래 주소들만 out 폴더에 만들기 exportPathMap: () => ({ "/": {page: "/"}, "/boards": {page: "/boards"}, "/404": {page: "/404"}, }) }; export default nextConfig; 위와같이 설정 경로에서 아래의 이미지와 같이 파일들이 동일한걸 확인했습니다.왜 안되는걸까요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
value 와 defaultValue 의 차이
포트폴리오 강의를 보다가 질문이 생겼습니다.defaultValue 와 value 의 차이가 defaultValue 는 기존값이 수정되고, value 는 수정이 안된다는 것 뿐인가요? 그렇다면 value 는 값을 수정할 수 없으므로 readOnly 라는 코드를 빼도 되는것 아닌가요?그리고 아래의 코드는 삼항연산자로 되어 있는데 (props.address !=="" ) 이 거짓일때는 게시물 수정할 때를 의미하는것이 맞나요?제가 정확히 이해하고 있는지 의심이 들어서 질문 올립니다!그리고 BoardCommentWrite.presenter컴포넌트에서 value={props.writer} 라고 되어 있는데 defaultValue={props.writer} 라고 되어도 문제 없는게 맞나요? <S.Input placeholder="작성자" onChange={props.onChangeWriter} value={props.writer} /> <S.Address readOnly value={ props.address !== "" ? props.address : props.data?.fetchBoard.boardAddress?.address ?? "" } />
