묻고 답해요
143만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
로그인방법이 고민됩니다.
제가 프론트에서는 nextauth를 사용하고 잇고 nest에서는 passport를 이용하고 있는데 둘다 인증및 인가를 위한 라이브러리다보니까 한쪽에서만 인증 인가를 하는게 맞는것인지 아니면 둘다 써도 문제 없는것인지 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
jsx와 js파일
쌤~문득 궁금해져서 질문드립니다.보통 파일작성하실 때 jsx확장자로 하시는데 왜 유독 util폴더에 있는 파일은 js확장자 인가요?jsx나 js든 자유롭게 써도 되는건지 어떤 규칙이나 의도가 있으신지 궁금합니다.!
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onClickButton함수를 넘겨주는 것이 궁금합니다.
import "./App.css"; import Viewer from "./components/Viewer"; import Controller from "./components/Controller"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( <div className="App"> <h1>Simple Counter</h1> <section> <Viewer count={count} /> </section> <section> <Controller onClickButton={onClickButton} /> </section> </div> ); } export default App;const Controller = ({ onClickButton }) => { return ( <div> <button onClick={() => { onClickButton(-1); }} > -1 </button> <button onClick={() => { onClickButton(-10); }} > -10 </button> <button onClick={() => { onClickButton(-100); }} > -100 </button> <button onClick={() => { onClickButton(100); }} > +100 </button> <button onClick={() => { onClickButton(10); }} > +10 </button> <button onClick={() => { onClickButton(1); }} > +1 </button> </div> ); }; export default Controller; App.jsx에서 onClickButton이 count, setCount 함수를 모두 사용하고 있을텐데요, 이것이 Controller.jsx로 넘어갈 때에는 아래와 같이 넘어가나요(value) => { setCount(13 + value);//count:13일때 };아니면 App.jsx에서 onClickButton 함수를 호출하여 App.jsx의 count, setCount를 사용하는 것인가요? 너무 기초적인 질문을 드려 죄송합니다ㅠㅠ
-
미해결GraphQL - REST API를 대체할 기술
Node.js 서버 Docs 불러오기 안됨
선생님 안녕하세요.. Node.js 프로젝트 생성 및 초기설정 따라하고 있는데 문제가 발생하여 글 남깁니다.. 영상 속 코드를 모두 따라친 후 알타이어에 reload Docs를 했는데 Introspection request failed with: 400이러한 에러와 함께 docs가 불러와지지않았습니다. 그래서 수업 노트에 올려주신 코드를 그대로 복붙해 다시 실행해보았는데도 여전히 동작하지 않습니다.. 버전이 많이 바뀌면서 강의속 코드가 동작하지 않는것인지.. 구글링도 해보고 여러 방법을 시도해보았는데도 해결되지 않아 혹시 해결 방법을 알 수 있을까 하여 문의남깁니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
싸이월드 과제 쪽이 궁금합니다.
혼자할때 요런식으로 진행했는데 강의를 보니 아예 다르게 하시더라구요 피그마 여백쪽을 margin 으로 일일히 계산했는데 틀린방법일까요?weight 100% 주면서 쉽게쉽게 하시길래 보면서 제 생각에는 미리 div들 따로 해놔서 maring 굳이 줄 이유가 없는것일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
댓글 내용 수정 중 문제 / inputs 리팩토링 중 질문
안녕하세요~ 포트폴리오 과제하다가 질문 생겨 남겨요 첫번째는 댓글 내용 수정할 때 댓글 내용을 지우다가 다 지워지면 수정 전 원래 댓글 내용으로 도로 바뀌는 문젠데요댓글부분 리팩토링 끝마치고나서 발견해서 처음엔 뭘 잘못했나? 했는데 계속 보니 그냥 value에서 defaultValue를 대체하여 작성해주던 아래 부분 때문인 것 같더라고요value={ props.inputs.contents !== "" ? props.inputs.contents : props.el?.contents ?? "" }수정을 시작할 땐 props.inputs.contents === ""이니까 댓글 내용인 props.el?.contents를 불러와서 띄워주고, 지우는 중엔 state가 빈 문자열이 아니니까 props.inputs.contents대로 표시되다가 댓글 내용을 전부 지우면 props.inputs.contents가 다시 빈 문자열이 되어서 바로 기존 댓글 내용을 띄워버려요아예 댓글 내용을 지우고 싶어도 지울수가 없게 되어버리는데 어떻게 바꾸면 될까요? 좀 생각해봤는데 감이 안와서요 혹시 나중에 고치는 내용이 나오나요 두번째는 이번 포트폴리오 과제의 댓글부분 리팩토링 진행하다가 궁금했던 건데요// BoardCommentWrite.container.tsx // ... const onClickWrite = async (): Promise<void> => { // ... // setWriter(""); // setPassword(""); // setContents(""); setInputs( (prev) => Object.fromEntries( Object.keys(prev).map((key) => [key, ""]), ) as typeof prev, ); // ... }댓글 작성 끝날때 writer, password, contents를 비워줄 수 있도록 빈 문자열로 초기화시켜주던 걸 이런식으로 바꾸었는데 리팩토링 마치고 나서 잘 돌아가긴 했는데요위 부분을 너무 어거지로 바꾼 것 같아서 좀 그래요...사실setInputs({ writer: "", password: "", contents: "" })그냥 이렇게 하는게 여기선 가장 좋은 방법인 것 같긴 한데, 더 많은 state들을 묶는 경우도 있다고 생각하면 것도 좀... 그래서요이번 댓글 부분 코드에서는 setInputs({ writer: "", password: "", contents: "" }) 이렇게 하는게 가장 적당할까요? 그리고 더 많은 걸 초기화해야한다고 치면 어떻게 하는게 좋을까요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
CPU 코어 갯수 만큼 워커를 생성할때 마스터 프로세스를 포함하지 않는 이유가 궁금합니다.
마스터 프로세스가 종료되면 워커들도 함께 강제 종료된다고 생각했습니다. 그래서 해당 코드에서 워커들을 실행한 후 마스터 프로세스의 작업이 마무리되면 프로세스도 종료될 것이라고 예상했습니다. 그러나 찾아본 결과, 마스터 프로세스는 워커들이 작업을 마무리할 때까지 대기하는 것으로 이해했습니다.그렇다면 마스터 프로세스가 하나의 코어를 사용하고 있다고 생각되는데, 워커들을 생성할 때 CPU 코어 수(numCPUs)만큼 생성하는 이유가 궁금합니다. 마스터 프로세스가 하나의 코어를 계속 점유하는 것은 아니라는 것은 알고 있지만, 코어 갯수만큼 워커를 만드는 것이 보편적이라고 들어서 질문드립니다.const cluster = require("cluster"); const http = require("http"); const numCPUs = require("os").cpus().length; if (cluster.isMaster) { // CPU 개수만큼 워커를 생산 for (let i = 0; i < numCPUs + 5; i += 1) { cluster.fork(); } } else { // 워커들 실행 // ... }
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제
dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제가 발생하고 있는데 원인을 잘 모르겠습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
에러서 요렇게만 해보세요
npm -v , node -v 로 버전 확인 후 package.json의 engine에서 node, npm 버전 수정파이썬을 설치.- 설치시 ADD PATH 인가에 체크packge.json > dependencies에서 bcrypt 삭제npm install 설치 후 bcryptjs 추가 설치npm install bcryptjs --save
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
antd Menu 질문
안녕하세요 강사님혹시 메뉴가 한개만 있는데도 불구하고 "..." 이라는 메뉴 아래에 "나의 favorite" 으로 생겼습니다.굳이 "..." 라는 메뉴 아래에 "나의favorite"이 생기지 않고, "Home" 오른쪽에 "나의 favorite" 을 바로 생성하고 싶은데, 이런경우 어떻게 해결 하면 될까요? [NavBar] [NavBar][NavBar.js]import React, { useState } from 'react'; import LeftMenu from './Sections/LeftMenu'; import RightMenu from './Sections/RightMenu'; import { Drawer, Button } from 'antd'; import Icon from '@ant-design/icons'; import './Sections/Navbar.css'; function NavBar() { const [visible, setVisible] = useState(false) const showDrawer = () => { setVisible(true) }; const onClose = () => { setVisible(false) }; return ( <nav className="menu" style={{ position: 'fixed', zIndex: 5, width: '100%' }}> <div className="menu__logo"> <a href="/">Logo</a> </div> <div className="menu__container"> <div className="menu_left"> <LeftMenu mode="horizontal" /> </div> <div className="menu_rigth"> <RightMenu mode="horizontal" /> </div> <Button className="menu__mobile-button" type="primary" onClick={showDrawer} > <Icon type="align-right" /> </Button> <Drawer title="Basic Drawer" placement="right" className="menu_drawer" closable={false} onClose={onClose} visible={visible} > <LeftMenu mode="inline" /> <RightMenu mode="inline" /> </Drawer> </div> </nav> ) } export default NavBar[LeftMenu.js]import React from 'react'; import { Menu } from 'antd'; function LeftMenu(props) { return ( <Menu mode={props.mode}> <Menu.Item key="mail"> <a href="/">Home</a> </Menu.Item> <Menu.Item key="favorite"> <a href="/favorite">나의 Favorite</a> </Menu.Item> </Menu> ) } export default LeftMenu
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
docker-MongoDB 설치시 window용으로 설치 문의
노션에서 보니 우분투랑 mac만 있어서 설치에 어려움을 겪고 있네요 ㅜㅜ 혹시 window버전으로 설치를 한다면 수업에 지장이 있을까요?
-
해결됨대용량 채팅 TPS 처리를 위한 웹소켓 통신 만들며 학습하기
학습자료는 어디서 받나요?
학습자료는 어디서 받나요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
강의에 사용한 js파일들 받을수 있을까요?
현재 개정3판 노드 강의를 듣고 있는데 강의에서 사용하시는 js파일들 받을수있을까요?아니면 이미 올려두신곳이 있다면 알려주세요!
-
미해결Node.js로 웹 크롤링하기
headless 궁금한게 있어요!
const browser: Browser = await puppeteer.launch({ headless: true, args: ['--remote-debugging-port=9222', '--no-sandbox', '--disable-setuid-sandbox'] }); const page: Page = await browser.newPage(); 크롤링 만들고 있습니다!헤드리스를 true로 해봐도, 아예 없애봐도, 아래 args 를 이것저것 달아봐도크롤링을 시작하면 아래 창과 크롬은 안뜨나 화면에 이렇게 크게 빈화면이 나옵니다.. 저만 그런가요? 이거 없애는 방법이 뭘까요 ㅠㅠ
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
몽고DB
몽고db질문입니다. 코드를 따라해보는중 몽고DB에서 데이터부분이 안들어 왔습니다. 어떤부분이 문제인지 궁금합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?
logout할 때, server로 요청을 보내서 authUser middleware를 통과하도록 하는 이유?handleLogout function에서 local storage의 accessToken을 삭제시키고, store의 user 정보만 initial state, 그리고 isAuth 등을 false로 바꾸면 그만일텐데, 왜 server에 요청을 보내는 과정이 필요할까요!?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
No routes matched location Error Component Stack error 질문입니다.
질문 있어서 남깁니다.메인페이지에서 Link를 타고 upload, list 들어가서 화면이 로드 돼야하는데 돼지 않고 하얀바탕으로 돼면서 Error표시 없이 No routes matched location "/list" Error Component Stack가 표시 됍니다. 어떤문제이고 해결 방법이 무엇인지 궁금합니다.Ps. 질문이 이해 안가실것 같아서 스샷 올려놨습니다.
-
미해결지금 당장 NodeJS 백엔드 개발 [사주 만세력]
.env.template 복사하랬는데
saju_db_dev로 연결되있고 거기엔 users 데이터 없어요prod로 바꾸니 로그인 되네요
-
미해결지금 당장 NodeJS 백엔드 개발 [사주 만세력]
m2 인데 workbench 버전 8.0.34로 받앗습니다.
더 낮은버전은 계속 바로 꺼지더군요..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
webkit-text-size-adjust 오류
왜 이러는지 알 수 있을까요? 찾아봐도 모르겠습니다... '-webkit-text-size-adjust' is not supported by Chrome, Chrome Android, Edge 79+, Firefox, Safari. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+.