묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 실습 4탄 질문이요 ㅠㅠ
싸이월드 실습 4탄 하는 중인데LOTTO 부분에 "특히 버튼과 숫자박스 부분"이 왜 세로로 다닥다닥 붙어있을까요..ㅠgame__container 부분에 flex-direction: column; align-items: center; justify-content: space-between; padding: 20px;가 들어있고lotto__text부분에도display: flex; flex-direction: column; align-items: center; justify-content: space-between;를 넣어봤으나 아무 변화가 없었습니다 ㅠgame.html:<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <div class="number1">3</div> <div class="number1">5</div> <div class="number1">10</div> <div class="number1">24</div> <div class="number1">30</div> <div class="number1">34</div> </div> <button class="lotto_button">Button</button> </div> </div> </div> </body> </html>game.css:* { box-sizing: border-box; margin: 0px } html, body{ width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; /* 박스가 wrapper안에 game__container 두개 총 세개*/ align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title { font-size: 15px; font-weight: 900; } .game__subtitle { font-size: 11px; } .word__result { font-size: 11px; font-weight: 700; } .word__text { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox { width: 130px; height: 24px; border-radius: 5px; } .search { font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .number__box{ width: 130px; height: 24px; border-radius: 5px; background-color: #FFE400 ; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .lotto__text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .number1{ font-size: 10px; font-weight: 700px; margin: 5px; } .lotto_button { font-size: 11px; font-weight: 700; width: 62px; height: 24px; }
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
비동기를 동기로 처리하는 이유
비동기 함수를 왜 굳이 동기처럼 실행시키기 위해 await을 사용하는 건가요?처음부터 함수를 만들때 동기로 만들면 되는거 아닌가요?동기, 비동기가 잘이해가 안가네요..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
tailwindcss 라이브러리 받은 후 실행이 안됩니다.
npm i -D postcss autoprefixer tailwindnpx tailwindcss init -p 모두 작업을 마치고 /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [], } index.css@tailwind base; @tailwind components; @tailwind utilities; npm run dev 를 돌리면,node:internal/process/promises:246triggerUncaughtException(err, true /* fromPromise */);[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/WebStudy/WebDevelement/React/fullstack-react/front): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'라는 오류가 뜹니다.원인파악이 어려운데 문의드립니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
이미지가 안떠요...
13분 정도까지 했는데 이미지가 안뜨네요... 이유가 무엇인지 아시나요?
-
미해결
input 태그 한글 작성시 '마지막 글자 밀림' 오류와 '문자열 마무리' 오류
안녕하세요 !! 다름이 아니라 현재 제가 일반 브라우저가 아닌 C#기반으로 돌아가는 웹을 작업중인데요input 태그에 한글 작성시 '마지막 글자 밀림'오류와 '문자열 마무리'오류가 발생되어 혹시 해결 방법을 아시는 분이 있을까 하여 글 남깁니다..! 제발 도와주세요 감사합니다 !
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
mysql_secure_installation 정책에 관해
제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강의자료 pdf에서 우분투에서 도커 다운받는 링크 복사할때
도커 다운받는 링크 복사 할때 공백 생겨서 필요 하신분 쓰시라고 링크 올려 두겠습니다.https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04
-
미해결
socket.io 실행
안녕하세요채팅을 구현하기위해 socket.io를 썼는데 통신이 안되는 것같습니다 io에 주소를 제대로 넣었고 서버 on 마다 클라이언트에서 emit으로 작성했는데 작동하지 않습니다 이유가 무엇일까요? // server 파일의 코드입니다 require('dotenv').config(); const { createApp } = require('./app'); const { appDataSource } = require('./models/index'); const startServer = async () => { const app = createApp(); const PORT = process.env.PORT; await appDataSource .initialize() .then(() => { const server = app.listen(PORT, () => { console.log(`🟢server is listening on ${PORT}🟢`); }); const io = require('socket.io')(server, { cors: { origin: true, credentials: true, }, }); const { socketMessage } = require('./middlewares/socket.io'); socketMessage(io); }) .catch((err) => { console.log(`❌Failed server connect❌`); appDataSource.destroy(); }); }; startServer(); // server의 socket 파일의 코드입니다 const jwt = require('jsonwebtoken'); const chatDao = require('../models/chatDao'); const { catchAsync } = require('../utils/error'); const socketMessage = (io) => { io.use((socket, next) => { const token = socket.handshake.headers.authorization; if (!token) { return next(new Error('Authentication error')); } jwt.verify(token, process.env.SECRET_KEY, async (err, decoded) => { if (err) { return next(new Error('Authentication error')); } userId = decoded.userId; next(); }); }); io.on('connection', (socket) => { console.log('A User Connected.'); socket.on( 'create_room', catchAsync(async (postId, callback) => { const room = await chatDao.createRoom(userId, postId); socket.join(room.raw.insertId); callback(room.raw.insertId); }) ); socket.on( 'enter_room', catchAsync(async (roomId, callback) => { socket.join(roomId); callback(roomId); }) ); socket.on('new_text', async (content, roomId, callback) => { await chatDao.createChat(userId, content, roomId); socket.to(roomId).emit('new_text', content); callback(content); }); socket.on('disconnect', () => { console.log('접속이 해제되었습니다', socket.id); clearInterval(socket.interval); }); socket.on('error', (error) => { console.error(error); }); socket.on('send', (data) => { console.log(data); socket.emit('reply', { data, }); }); socket.interval = setInterval(() => { socket.emit('news', 'Hello Socket.IO'); }, process.env.SOCKET_INTERVAL || 1000); }); }; module.exports = { socketMessage }; // client 코드입니다import React, { useState, useContext } from 'react'; import io from 'socket.io-client'; import './chat.css'; import { MenuContext } from '../../components/Nav/MenuProvider'; const Token = localStorage.getItem('accessToken'); const socket = io.connect('http://192.168.0.194:4000', { withCredentials: true, extraHeaders: {Authorization: `Bearer ${Token}` } appDataSource.destroy(); }), }); socket.on('connection', () => { console.log('Connected to server'); }); const Chat = () => { const [roomId, setRoomId] = useState([]); const [searchData, setSearchData] = useContext(MenuContext); const handleCreateRoom = event => { event.preventDefault(); socket.emit('create_room', searchData, ({ searchData, roomId }) => { console.log(`Joined room ${roomId}`); setRoomId(roomId); }); }; const handleJoinRoom = roomId => { socket.emit('enter_room', roomId, roomId => { console.log(`Joined room ${roomId}`); setRoomId(roomId); }); }; const handleNewText = content => { socket.emit('new_text', content, roomId, content => { console.log(`Sent message: ${content}`); }); }; const handleNewText = content => { socket.emit('new_text', content, roomId, content => { console.log(`Sent message: ${content}`); }); }; const onCheckEnter = e => {if (e.key === 'Enter') { handleNewText(); } }; return ( <div className="h-screen pt-36"> <button onClick={handleCreateRoom}>테스트</button> <button onClick={() => handleJoinRoom(roomId)}>테스트2</button> <input id="input-text" type="text" onKeyDown={onCheckEnter} /> <button onClick={handleCreateRoom}>제출</button> </div> ); }; export default Chat;
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
mysql_secure_installation password 질문이요
... Failed! Error: SET PASSWORD has no significance for user 'root'@'localhost' as the authentication method used doesn't store authentication data in the MySQL server. Please consider using ALTER USER instead if you want to change authentication parameters.구글링도하고 mysql다시깔아서 local password도 다시 설정했는데 자꾸 이 오류가 나오네요.. 혹시 해결 방법이 있을까요?
-
미해결쿠버네티스 101 - 클라우드/서버 개발 첫걸음
개발 환경에 소개해주신 것들은 직접 설치 하라는 의미인건가요?
개발 환경 강의에서 VS 에서 Google Cloud Code 이외 설치 영상은 없는데처음에 소개해줄 때 알아서 설치하라는 말씀이신가요? Google Cloud Code 익스텐션 설치 후 where.exe minicube 입력 시정보: 제공된 패턴에 해당되는 파일을 찾지 못했습니다.라고 떠서요.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
강의에 나오는 문법이 적용되지 않습니다
MongooseError: Model.prototype.save() no longer accepts a callback이 오류가 떠서 확인해보니 Mongoose6부터 callback 문법이 사용되지 않는다고 합니다버전을 바꾸는 것은 시도 하지 않았고.then .catch or async await 로 바꾸고 싶은데수 시간 시도해보다가 안되서 글 남깁니다. callback 구문을 보고 .then .catch or async await이 방식으로 바꾸는 법을 알고 싶습니다.이 부분에서만 에러가 발생하는지는 모르겠으나stack Overflow에 적어봤는데 역시 답을 얻을 수 없더라구요app.post("/login", (req, res) => { User.findOne({ email: req.body.email }, (err, user) => { if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다.", }); } user.comparePassword(req.body.password, (err, isMatch) => { if (!isMatch) return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다." }); user.generateToken((err, user) => { if (err) return res.status(400).send(err); res.cookie("x-auth", user.token).status(200).json({ loginSuccess: true, userId: user._id }); }); }); }); });
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
image 파일에서 vscode로 드래그 앤 드롭을 처리할 수 없다고 합니다
압축을 푼뒤 진행해도 에러가 납니다The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.라고 나오고요 hexeditor를 깔아도 해결이 안됩니다찾아보니 50mb를 넘는 자료를 vs코드에서 지원을 못한다고 하는데요 참고로 집에 컴퓨터가 없어 pc방 컴퓨터로 배우는 중입니다
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
비동기 방식에서의 에러처리
안녕하세요! 어제 유투브에서도 질문드렸었는데 잘 이해가 가지 않아 다시 질문드립니다.184p server1-1.jsconst http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }); res.write('<h1>Hello Node!</h1>'); res.end('<p>Hello Server!</p>'); }); server.listen(8080); server.on('listening', () => { console.log('8080번 포트에서 서버 대기 중입니다!'); }); server.on('error', (error) => { console.error(error); });어제 이 부분 에러처리를 try/catch로 하면 안되는건지 질문드렸었는데 server함수가 비동기로 진행되는거라 try/catch 적용하면 안된다고 답변받았었습니다. 186p server2.jsconst http = require('http'); const fs = require('fs').promises; http.createServer(async (req, res) => { try { const data = await fs.readFile('./server2.html'); res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }); res.end(data); } catch (err) { console.error(err); res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' }); res.end(err.message); } }) .listen(8081, () => { console.log('8081번 포트에서 서버 대기 중입니다!'); });그런데 바로 뒤에서 async를 사용하여 비동기임이 확실한데도 try/catch로 에러처리를 하신 부분이 나와서 잘 이해가 안갑니다..뒷부분에서는 왜 try/catch를 적용해도 되는건지 궁금합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
노션과제에 대한 질문있습니다
혹시 과제 풀이를 볼수 있는곳이 있을까요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
populate 문제(cats schema 오류) 해결법
강의대로 따라 했으나, 아래와같은 오류 나는경우 해결법 입니다.ERROR [ExceptionsHandler] Schema hasn't been registered for model "comments".Use mongoose.model(name, schema)다른 문의글 보면 답변으로 버전 문제라고 버전을 내리라고 하시는데 , 좀 이상한 답변이라는 생각에진짜 몇시간동안 헤매다가 해결했습니다. 현재기준 최신버전"@nestjs/common": "^9.0.0", "@nestjs/mongoose": "^9.2.1", "mongoose": "^6.9.0",에서 아래와 같이 해결 했습니다. 주석참조.export class CatsRepository { constructor( @InjectModel(Cat.name) private readonly catModel: Model<Cat>, // 해당 라인 추가, 참고로 강의에선 Comments 인데 저는 Cat과 같이 단수형으로 만들어서 Comment 입니다. @InjectModel(Comment.name) private readonly commentModel: Model<Comment>, ) {} async findAll() { const result = await this.catModel .find() // populate 파라미터 변경 .populate({ path: 'comments', model: this.commentModel }); return result; } ... }다른 누군가에게 도움이 되기를
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
nextTick, promise 우선순위
강의 부분 : 3-6강 5:46초영상에는 nextTick이 promise보다 우선해서 console에 찍히게 되는데, 제가 직접코드를 실행시켜보니 promise가 nextTick보다 먼저 console로 찍혔습니다. 우선순위가 어떤것이 맞는 것인가요??코드setImmediate(()=>{ console.log('immediate');})process.nextTick(()=>{ console.log('nextTick');});setTimeout(()=>{ console.log('timeOut');},0);Promise.resolve().then(()=>console.log('promise')); 출력결과혹시 몰라 여러번 컴파일 했는데도 결과가 같게 나옵니다:)
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
우분투에서 작업시 윈도우로 mysql 설치하는 것에 관해서
제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?
-
미해결Node.Js 활용하기
최신 mysql 에 node.js 가 연결되지 않는 문제 해결 방법(session 9 - session store-mysql)
"mysql -u root -p"해서 mysql을 들어가고, 다음과 같은 명령어를 실행해봅니다.ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '0000'그리고 app_session_mysql.js를 다시 실행하면 session table이 만들어진 것을 확인할 수 있습니다."왜 최신 mysql에서 저렇게 해야 sessions table이 자동으로 만들어 지는가?"는 인터넷에 찾아보면 나와있습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
mysql 데이터베이스 연결 안되는 문제 Unable to connect to the database
yarn start:dev 실행 하고 나면 아래와 같이 나오면서 에러가 뜨고 있어요 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...아래 코드도 정상적으로 기입 했는데, 계속 접속 오류로 연결이 되지가 않습니다.import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo' import { Module } from '@nestjs/common' import { GraphQLModule } from '@nestjs/graphql' import { TypeOrmModule } from '@nestjs/typeorm' import { BoardsModule } from './apis/boards/boards.module' import { Board } from './apis/boards/entities/board.entity' @Module({ imports: [ BoardsModule, GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', port: 3306, username: 'root', password: 'test1234', database: 'myproject03', entities: [Board], synchronize: true, logging: true, }), ], // controllers: [AppController], // providers: [AppService], }) export class AppModule {} 현재 brew 확인시 Mysql 서버도 정상적으로 켜져 있는것을 확인 할 수 있어요 디비버에서도myproject03 이라고 정확하게 만들었습니다.선생님의 강의하고 다른부분을 못 찾았는데,데이터 베이스가 연결이 안될 때는 어느부분을 더 점검 해 봐야 할지요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
react-router-dom link클릭시 이동이 안되는 오류
안녕하세요 강사님해당 상품을 클릭했을때 url은 바뀌지만 상품상세페이지로 화면은 바뀌지 않는 오류가 발생했습니다(새로고침하면 화면이 바뀌긴 합니다)다른 수강생들의 비슷한 질문답변을 참고하여 <React.StrictMode>를 지워도보고 react-router-dom 버전도 5.2.0이고 Route path도 "/products/:id"라고 적었는데 여전히 오류가 해결되지 않습니다https://github.com/kanghanju/grab-market-client/commit/01c0657f4f64398b47493c1b2c3b44836bf1a785#여기는 Link태그 해당 수업코드 파일입니다!
