묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결MERN 스택으로 만드는 지도서비스(+ TypeScript)
카카오 맵 api
안녕하세요 혹시 앞으로 강의를 진행하는데 카카오 api를 사용해도 큰문제는 없을까요
-
미해결[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
window.event 문제가 있어요
섹션2. 훈훈한 Javascript에서 JS로 HTML태그 생성 강의 듣고 있습니다. 강의 초반부터 window.event.keyCode === 13을 조건문으로 활용하여 엔터키 입력을 감지하는 코드가 있는데.. 저 같은 경우 event 부분에 가로줄이 그어지면서마우스를 올려 문구를 확인해보면'event' is deprecated. 라는 메시지가 나옵니다. 경고 메시지만 출력되고 작동에 이상이 없다면 상관이 없지만,키 입력 시 마다 브라우저의 콘솔창에 undefined가 뜨고 엔터키 또한 마찬가지입니다. 구글링을 좀 해보니, event를 이용한 키 코드 체크를 하는 것이 권장되지 않는다고 하는데.. 다른 방법이 있나요? 구글링으로 찾은 포스팅들은 이해가 되지 않아서.. 도와주세요.
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable문제 없어보이는데 계속 저 에러가 발생하네요npm run build 만 입력하면 production이 아니니까 타야할거같은데 환경변수를 집어넣어주면 에러가 발생안하고 안넣어주면 에러가 발생합니다. const path = require("path"); const webpack = require("webpack"); const childProcess = require("child_process"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const isProduction = process.env.NODE_ENV === "production"; module.exports = { mode: "development", entry: { mainSrc: "./app.js", }, output: { path: path.resolve("./dist"), filename: "[name].js", }, module: { rules: [ { test: /\.css$/, use: isProduction ? [MiniCssExtractPlugin.loader, "css-loader"] : ["style-loader", "css-loader"], }, { test: /\.(png|jpg|gif|svg)$/, type: "asset/resource", }, { test: /\.js$/, loader: "babel-loader", exclude: "/node_modules/", }, ], }, plugins: [ new webpack.BannerPlugin({ banner: ` Build Date : ${new Date().toLocaleString()} Commit Version : ${childProcess.execSync("git rev-parse --short HEAD")} Author : ${childProcess.execSync("git config user.name")} `, }), new webpack.DefinePlugin({ TWO: "1+1", TWO_STRING: JSON.stringify("1+1"), "api-domain": JSON.stringify("http://dev.api.domain.com"), }), new HtmlWebpackPlugin({ template: "./src/index.html", templateParameters: { env: process.env.NODE_ENV === "development" ? "개발용" : "운영", }, minify: process.env.NODE_ENV === "production" && { collapseWhitespace: true, removeComments: true, }, }), new CleanWebpackPlugin(), ...(process.env.NODE_ENV === "production" && [ new MiniCssExtractPlugin({ filename: "[name].css", }), ]), ], };
-
미해결사물인터넷 통신은 내 손에 (Arduino, MQTT, Nodejs, MongoDB, Android,VS Code)
MQTT 설치후 토픽 설정시 에러
C:\Program Files\mosquitto>mosquitto_sub -d -t /testError: 대상 컴퓨터에서 연결을 거부했으므로 연결하지 못했습니다. 제어판 > 서비스 > 모스키토 브로커 서비스 실행해주시면 됩니다.
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
8.6 투두 수정하기) 오류 관련 질문
안녕하세요 선생님 강의 보면서 똑같이 코드를 입력했는데그 이후에 새로고침 하고 체크박스를 누르니까 이런 오류가 발생하네요혹시 무슨 오류인지 알 수 있을까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
react-infinite-scroller에 overflow style 사용하기
안녕하세요. 중고마켓 리스트를 무한스크롤로 구현 중에 있는데요.부모 요소를 감싸서 overflow로 스크롤을 주면 height값이 먹혀서 데이터를 20개 가져오고 나서는 더이상 스크롤을 내릴 수가 없네요. 이건 ListWrap인 스크롤 컴포넌트의 부모요소를 없앨때 이구요. 이건 ListWrap을 넣었을 때 저렇게 값이 나옵니다. 어떻게 해야할까요? 아니면 무한스크롤은 아래처럼 overflowscroll을 넣고 구현이 안되는건가요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
ubuntu안에 있는 mysql db데이터
안녕하세요 제로초님, 로컬상에서 mysql workbench 처럼ec2인스턴스 ubuntu내에 있는 mysql db 데이터들을 시각화해서 관리할 수 있는 툴 같은 건 혹시 없을까요?데이터들을 수정하고 싶을때 query문으로 직접 관리하는 것이 일반적인지 문의드립니다!
-
미해결Do it! Node.js 프로그래밍 입문
22강 연락처 추가하기 - css 파일 경로 지정
모듈화한 _header.ejs 파일에서 css 지정경로가 왜href="/css/style.css" 가 되는지 궁금합니다. _header.ejs 파일은 views폴더의 하위 폴더인 include안에 저장되어 있는데, 만약 css 파일의 상대경로를 지정하려면href="../../public/css/style.css"가 되어야 하지 않나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자바스크립트 배열 email split 콘솔 내용 복사 후 주석처리
안녕하세요 자바스크립트 배열 중에 email split 따라하면서 콘솔에 있는 내용 복사해서 vb Code에 붙혀 넣고 주석처리 했습니다.근데 주석 뒤에 "codecamp": Unknown word. 라고 나타납니다. 이건 왜 그런가요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
사용자 데이터를 localstorage에 저장해도 되나요??
안녕하세요 선생님!선생님 강의를 정말 잘 듣고 있는데요! 강의에 대한 질문은 아니지만 다른 곳에 물어볼 곳이 없어서 선생님께 여쭤봅니다. 제가 이번에 백앤드분들과 프로젝트를 준비하고 있는데 로그인 과정에서 jwt토큰을 사용한다고 합니다. 그런데 access토큰을 누구나 볼 수 있는 localstorage에 저장해도 되나요? 구글에 찾아보니 쿠키에 담는게 가장 안전하다고 하는데 쿠키에 담으면 서버에 보낼시 쿠키에 담긴 토큰을 꺼내서 헤더에 넣어서 서버에 보내야 되나요?? 강의 2회 반복중인데 처음에는 너무 어려웠지만 지금은 리액트에 대해 많이 배웠습니다. 항상 좋은 강의 감사합니다!!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
git push -> git pull 후에 build 문의
안녕하세요~ backUrl을 수정하여 소스코드가 변동되었으니 github에 commit push를 한 뒤, 우분투 서버에 접속하여 front에서 다시 git pull을 할 경우, 우분투 서버 front에서 build를 또 진행 해야하나요?그리고, 이전에 강의에서 vim으로 .env를 만든것들도 다시 만들어야할까요?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
Error: 16 UNAUTHENTICATED: Failed to retrieve auth metadata with error: invalid_grant: Invalid JWT Signature. 에러 발생
4강 - 챗봇 어플리케이션 만들기#3 구조 설명 & textQuery Route 만들기 강의를 듣고 있던 상황입니다.강의 내용을 따라 postman에서 주소 지정 후 send 버튼을 클릭하면,비주얼 스튜디오 코드 터미널 창에 아래와 같은 에러가 발생합니다.Error while processing text query: Error: 16 UNAUTHENTICATED: Failed to retrieve auth metadata with error: invalid_grant: Invalid JWT SignaturedDialogflow 와 google cloud에 작성된 데이터 모두 확인 시 문제가 없어 보이는데,어느 부분을 더 참고 해봐야 할까요? 참고로 console.log(req.body.text)입력 시, text의 값은 제대로 출력됩니다. router.post("/textQuery", async (req, res) => { console.log(req.body.text); const request = { session: sessionPath, queryInput: { text: { // The query to send to the Dialogflow agent text: req.body.text, // The language used by the client (en-US) languageCode: languageCode, }, }, }; try { const responses = await sessionClient.detectIntent(request); console.log("Detected intent"); const result = responses[0].queryResult; console.log(` Query: ${result.queryText}`); console.log(` Response: ${result.fulfillmentText}`); res.send(result); } catch (error) { console.error("Error while processing text query:", error); res.status(500).json({ error: "Internal server error" }); } });
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallBack 강의 질문
이전 강의인 Reacr.memo 에서 리액트가 기존 prop 과 신규 prop 을 얕은비교(주소값 비교)로 진행하기 때문에, 새로운 객체로 업데이트(생성, 수정, 삭제)로 인해서 수정된 객체 값((새로운 주소값))이 state() 값으로 할당되어 다르게 인식하기 때문에 react.memo 에서 직접 사용자가 비교할 수 있게 따로 로직을 만들었습니다.그런데 이번 강의에서는 단순히 생성, 수정, 제거 함수를 useCallback 으로 제어했을때,react.memo에 직접 prop 값을 비교한 로직은 왜 지우는건가요?state 데이터를 핸들링하는 함수들은 변하지 않음으로 mount 할때만 useCallback을 쓰는건 알겠는데, 이게 왜 state 객체 주소값이랑 연관이 있는지 모르겠어요 ㅜㅜ
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React.memo object props 값 이외에 함수 비교
리액트는 주소값 비교로 object 를 비교 하려면 따로 로직을 짜주어야 하는데,이 강의에서 editor 또한 memo 로 컴포넌트 최적화 하려 했지만 안되던데 따로 이전 prop 값과 이후 prop 값을 비교해줘야 하나요? 만약 그렇다면, 왜 react는 prop 으로 전달된 함수는 변하지 않음에도 변했다고 인식하는지가 궁금하고 어떻게 비교해야하는지 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
프로젝트 중간에 프레임워크와 언어를 변경할수 있나요?
안녕하세요.현재 업데이트 된 강의를 보면서 프로젝트를 만들고 있습니다.그런데 중간에 typescript를 사용하기로 해서 잘라먹는 타입스크립트도 같이 결제 해서 들을려고 합니다.하지만 타입스크립트 강의는 vite를 사용하지 않는거 같아서 타스를 적용하기 전에 질문드립니다. vite로 프로젝트 만들고 있는 중간에 타입스크립트를 사용할수 있게 변경할 수 있나요?vite를 안쓰고 잘라먹는 리액트 강의를 들으면 따라가기 불가능 할까요?혹시 타스 강의도 업데이트 할 예정이 있으신가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.
tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.아래는 제 package.json 인데, 특정 버전으로 진행해야 하나요? "dependencies": { "axios": "^0.26.1", "classnames": "^2.3.1", "dayjs": "^1.11.4", "env-cmd": "^10.1.0", "next": "12.1.4", "react": "18.0.0", "react-dom": "18.0.0", "react-icons": "^4.4.0", "sharp": "^0.30.7", "swr": "^1.3.0" }, "devDependencies": { "@types/node": "17.0.23", "@types/react": "17.0.43", "@types/react-dom": "17.0.14", "eslint": "8.12.0", "eslint-config-next": "12.1.4", "postcss-preset-env": "^7.4.3", "tailwindcss": "^3.0.23", "typescript": "4.6.3" }
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
라이프사이클 질문!
안녕하세요 라이프 사이클에대해서 궁금하게 있어 질문 드립니다.처음에 컴포넌트가 빌드 되었을때(초기랜더링) 마운트 되었다 라고 표현하고, 이미 빌드가 된 컴포넌트에서 반응형 state로 인해 리랜더링이 되면 업데이트,그리고 컴포넌트가 제거되면 언마운트라고 알고 있습니다 !혹시 그렇다면 업데이트가 이루어질때 컴포넌트가 리랜더링 되는데, state가 초기화 되지 않는걸 보면 컴포넌트가 삭제되지 않고 리랜더링 되는것 같다는 추측을 하고 있습니다.만약 그렇다면 컴포넌트가 어떻게 삭제되지 않고 리랜더링을 진행 할 수 있는건가요 ?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
남겨주신 Counter App 데모사이트
남겨주신 Counter App 데모사이트가 잘못된것 같아요 링크로 이동하면 자바스크립트 강의 자료가 나오네요
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
프론트 ip로 들어갈때 연결이 안됩니다....
지금 빌드까지 마친 상황이고 sudo npx pm2 start npm -- start 이후 sudo npx pm2 monit을 하엿는데 이러한 에러가 나옵니다.https://github.com/jinhwansong/blog 다른 분들의 이야기를 보면 비슷한 에러가 나는거 같기는 한데 답을 모르겟어요 ㅠㅠ