묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
defaultProps 사용이 이제 불가해진다고 경고문이 왔습니다
내용을 찾아보니 defaultProps에 대한 지원은 향후 주요 릴리스의 함수 구성 요소에서 제거될 예정이고, 대신 JavaScript 기본 매개변수를 사용하세요. 라고 나와있는데defaultProps 를 사용하지 않으면 기본값은 어떻게 설정해야 할까요??
-
미해결mongoDB 기초부터 실무까지(feat. Node.js)
Schemaless 특성을 재생시 검은화면이 나와요
Schemaless 특성을 재생시 검은화면이 나와요 새로고침해도 같은 현상이 나오네요 ㅠ
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
map을 이용한 EmotionItem 렌더링 질문
강의 14:00 쯤에 작성하신 map 함수를 이용한 EmotionItem 렌더링 파트에 질문이 있습니다. 강의에서는 아래처럼 작성하셨는데emotionList.map((item) => { <EmotionItem key={item.emotionId} {...item} /> });저는 map 내부 콜백함수에서 return 을 붙이지 않으면 화면에 렌더링 되지 않더라구요. 특별히 다른 이유가 있을까요?
-
해결됨차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)
Prisma 환경 설정 질문있어요!
안녕하세요 강의를 듣다가 궁금한 부분이 있어서 질문드립니다!!User에 대한 모델을 정의할 때 comments, likes도 정의하는 데 이 둘은 각각의 articles 모델에 대한 comments, likes라고 생각되는 데 왜 User 모델에도 정의되어 있는지 궁금합니다!!각각의 articles 모델에 대한 comments, likes라도 User에서 정의해야 하는 건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
변수, useState 부분 질문있습니다.
안녕하세요 수업 너무 잘 듣고 있습니다. 수업을 듣다 궁금한점이 생겼는데 제가 인강을 보면서 변수 let, const와, 리액트에서 useState부분을 보고 이해는 갔지만 제가 막상 혼자 코드를 친다고 했을때 let, const와 useState를 언제 작성을 하면 되는지 잘 모르겠더라구요. 혼자 코드를 작성을 한다고 할때 변수와 useState를 언제 작성을 하면된다라고 이해를 하면 쉽게 이해할수있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Postman UI가 또 바뀌어서 Mockserver 를 찾을 수가 없습니다
제목 그대로 입니다. 가장 최근에 업데이트 해주신게 벌써 2년전인데, 강의를 계속 걸어놓으시려면 적어도 매년 단위로UI 상태에 맞게 해당 부분만이라도 강의를 업데이트 해주셔야 할 것 같습니다.Mock server 부분 도저히 찾지못해 시간만 보내고 진척이 없습니다. 대체 어떻게 해야 하나요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
로그 관리에 대해 질문 있습니다.
안녕하세요. 최근에 프로젝트를 완성해서 배포까지 성공리에 마쳤는데요. 이제 운영을 해야하는데 몇가지 궁금한 점이 생겨서 질문 남기게 되었습니다.운영을 하다보면 배포하기 전 진행한 테스트 외에도 예기치 못한 오류가 생길 수 있기때문에 서버에서 로깅하는게 굉장히 중요하다고 생각이 드는데요. 실무에서는 로깅을 따로 어떻게 하는지에 대해 궁금함이 생겼습니다.현재 서비스의 중요한 비즈니스 로직에는 Logger를 사용해서 호출 될 때 마다, 시간과 함께 넘어가는 데이터를 같이 로깅하게끔 개발 해놨습니다. 약간 문제라고 생각되는 것은 에러가 발생 할 때, 호스팅하고있는 온프레미스 서버에 직접 접속해서 도커 컨테이너 로그를 일일이 확인해야 하는 번거로움이 있는 점입니다. 실무에서 모든 개발자들이 이렇게 확인하지 않을 것이라고 생각하는데 보통 실무에서는 어떻게 로그를 관리하시나요? 조언 부탁드립니다!
-
미해결코로나맵 개발자와 함께하는 지도서비스 만들기 2
키워드 검색 데이터 받아오기 강의중 문제 발생
카카오 api 받아서 지도 잘 작동하고 검색창도 떳는데키워드 검색 데이터 받아오기 강의 들으면서 잘 따라갔는데 갑자기 안됩니다 upload.js:1 Uncaught ReferenceError: require is not definedat upload.js:1:20 f12누르니까 이렇게 나옵니다 ㅠㅠ 추가적으로 vs코드에서는파일이 CommonJS 모듈입니다. ES 모듈로 변환될 수 있습니다.ts(80001) 이런 문구가 나오네요 +그래서 upload 파일은 무시하고 지도위에 저장한 데이터 표시하기 강의까지 들었는데 이번엔 main.js:1 Uncaught ReferenceError: require is not defined at main.js:1:20 이렇게 뜨네요 require 함수가 지금까지 잘 되다가 수업이 진행될수록 왜 문제가 될까요 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트 설치에 대해 궁금한 점이 있습니다.
현재 리액트부분을 시작했는데 리액트를 설치할때 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact이러한 명령어를 사용하는데 이렇게 설치하고 나니 제가 알고있는 폴더들이나 내용이 좀 다르더라구요. 제가 알고있는 건 npx create-react-app ./ 이러한 명령어로 리액트를 설치했는데 이거와 전혀 다른 명령어 인가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
영상 보고 응용 프로젝트 하는 중에 라우터 관련 질문이 있습니다.
안녕하세요 강사님! 이번학기에 갑자기 웹 개발을 하게 되어 부랴부랴 프론트 강의 챙겨보는중인데 정말 도움이 많이 돼 우선 감사의 말씀 먼저 드립니다. ㅜㅜ 다름이 아니라 제가 본 영상 강의를 보고 학교 과제를 수행하다가 (투두 리스트를 참고하여 만들었습니다. 참고로 과제는 이슈관리 시스템입니다.) 이러한 메인 화면을 구현하였는데, 각 프로젝트 이름을 누르면 그 프로젝트의 상세 페이지로 연결 시키고 싶은데, 라우터 기능을 사용하여 링크는 제대로 바뀌는데 화면 전환이 되지 않습니다. ㅜㅜ 코드를 여러번 봐도 무엇이 문제인지 감이 안 잡혀 질문 드리게 되었습니다. 코드 첨부 하겠습니다. ! import "./App.css"; import { Routes, Route, Link, useNavigate } from "react-router-dom"; import { useRef, useState } from "react"; import Header from "./components/Header"; import List from "./components/List"; import ProjectDetail from "./pages/ProjectDetail"; //임시데이터 const mokdata = [ { p_id: 0, p_name: "회원가입 프로젝트", date: new Date().getTime(), }, { p_id: 1, p_name: "온라인 테트리스 게임 프로젝트", date: new Date().getTime(), }, { p_id: 2, p_name: "윷놀이 프로젝트", date: new Date().getTime(), }, { p_id: 3, p_name: "온라인 채팅 앱 개발 프로젝트", date: new Date().getTime(), }, { p_id: 4, p_name: "회원 관리 시스템 프로젝트", date: new Date().getTime(), }, { p_id: 5, p_name: "이슈 관리 시스템 프로젝트", date: new Date().getTime(), }, ]; function App() { const [projects, setProjects] = useState(mokdata); const onDelete = (targetId) => { //배열에서 targetId와 일치하는 id를 갖는 요소만 삭제한 새로운 배열 setProjects(projects.filter((project) => project.p_id !== targetId)); }; return ( <> <div className="App"> <Header /> <List projects={projects} onDelete={onDelete} /> </div> <Routes> <Route path="/ProjectDetail:p_id" element={<ProjectDetail projects={projects} />} /> </Routes> </> ); } export default App; 위는 App.jsx 코드 이고 아래는 ProjectDetail 코드 입니다. !import { useParams } from "react-router-dom"; const ProjectDetail = ({ projects }) => { const { p_id } = useParams(); const project = projects.find((project) => project.p_id === parseInt(p_id)); return ( <div> <h1>프로젝트 상세내용</h1> <h2>{project.p_name}</h2> </div> ); }; export default ProjectDetail;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn 설치가 되지않습니다.
node.js와 npm은 --version을 이용하니 버전이 나오는데 yarn은 버전이 나오지 않아 npm install -g yarn 이라는 명령어를 하니 이미지처럼 에러가 나옵니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션11 eslint 설치
eslint 설치 시 3개 중에 마지막 3번째를 선택하라고 하는데 저는 선택지가 2개만 나옴니다. 2번째를 선택해서 설치해도 되나요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
geolocation부분에 대해 질문있습니다.
geolocation부분에const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); }; askForLocation();이렇게 함수가 있는데 여기서 궁금한점이 askForLocation(); 함수 호출부분에 인자로 전달하는 것이 없는데 매개변수로 position에 위치정보 객체형식으로 콘솔에 나오는 이유가 뭔지 궁금합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
3000번은 잘 들어가지는데 80번은 안됩니다.
sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000까지 하고 3000번 포트로 잘 들어가지는데 3000번포트를 지우고 들어가봐도 뒤에 :80을 붙여 넣어 들어가봐도 사이트에 연결할 수 없음이 뜨네요 왜 그럴까요??
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
CORS 에러 질문 있습니다.
안녕하세요. 프로젝트를 배포하는 과정에서 왜인지 모를 CORS 에러가 계속 생겨서 질문 드립니다.CORS 문제를 해결하기 위해서는 응답 헤더에 Acess-Control-Allow-Origin이 필요한데, nestjs와 같은 was에서 enableCors를 설정해주거나, Nginx의 server 블럭에 add_header를 통해서 헤더를 추가 해 줄 수 있는 것으로 알고 있습니다.웹 서버가 was보다 앞에 있으니까 웹 서버에서 설정해줘야겠다는 생각에 nginx.conf에 allowed_origin은 동적으로 Access-Control-Allow-Origin 헤더의 값을 받기 위해서 설정해뒀습니다.이렇게 작성하고 reload를 해줬는데, 왜인지 응답헤더에 추가한 헤더가 생기지 않습니다...테스트 서버에 위와 같은 설정으로 올렸을 때는 잘 해결됐는데 라이브에 올리니까 이런 문제가 발생하는데 어디를 살펴봐야 할 지 모르겠습니다... access to XMLHttpRequest at '도메인 주소' from origin '서버 ip' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.이런식으로 404에러가 나옵니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
함수, 변수의 호이스팅 부분 질문있습니다.
함수, 변수의 호이스팅 강의 영상 부분에if (storageData?.complete) { newLi.classList.add("complete"); }이 코드에서 storageData 뒤에 ? 이 물으표가 없으면 매개변수를 받아오지 않게 되니 undefined라고 강사님이 말씀하시는데 이게 무슨 말인지 잘 모르겠습니다. 그리고 ToDoList에서 리스트에 추가를 하고 더블클릭 삭제, 전체 삭제까지는 어느정도 이해가 되는데 로컬스트리지 전체 부분이 조금 이해도 어려운데 어떻게 이해를 하면서 공부를 하면 좋을까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
객체 localStorage 부분 질문있습니다.
현재 객체 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.setItem("saved-items", JSON.stringify(saveItems)); };현재 자바스크립트 코드 제일 마지막 부분에 saveItemsFn함수가 저장하는 부분이니 이 함수안에 localStorage.setItem을 사용해서 로컬스토리지에 저장을 하는것까지는 이해가 되었는데 저장된걸 가져오기 위해 const savedTodoList = localStorage.getItem("saved-items");localStorage.getItem을 사용하는데 여기서 첫번째로 이 코드 위치가 다시 제일 위쪽에 작성이 되었는지 궁금하고 두번째로 이 코드가 saveItemsFn 함수 안에 작성이 되지 않은 이유는 getItem이 저장하는 코드가 아니기때문에 saveItemsFn안이 아닌 따로 다시 작성이 된것인가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
14강 로그아웃 안됨
logout을 send하면 해당 오류가 발생합니다. 코드가 잘못된건지 궁금해 git 도 올려드립니다. 감사합니다. https://github.com/bukwon/boiler-plate
-
미해결대용량 채팅 TPS 처리를 위한 웹소켓 통신 만들며 학습하기
채팅 메시지 DB로 저장 하기.
안녕하세요.강의 잘 들었습니다.마지막에 메시지를 저장 하는 얘기를 하셨는데.. 보통 메신저 서비스에서는 어떤 방식의 DB를 사용하는지궁금합니다. 흔히 Oracle이나 MariaDB 같은 방식의 관계형 DB를 사용하는게 흔한지 아니면 Mongo같은 비관계형 방식의 DB를 많이 사용하는지 혹시 답변이 가능하시다면 답변 부탁 드립니다. 그리고 그걸 선택한 이유가 무엇인지. 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql codegen 설치
섹션 10에서 graphql codegen 설치하려는데요강의에서는 yarn add -D @graphql-codegen/cli을 설치하라고 하는데 지금 설치하려고 사이트에 들어가니yarn add --dev typescript @graphql-codegen/cli로 되어 있는데 같은 건가요?그냥 아래 명령어 실행해도 되나요?