묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
Next에서 자동 로그인 구현
안녕하세요 😃 현재 Next.js 사용해 프로젝트 진행중인데 한번 로그인하면 웹에 재접속 시 자동으로 로그인 처리되도록 하고 싶습니다. 현업에서는 어떤 방식으로 진행하는지 궁금합니다! 답변 주시면 정말 정말 감사합니다!!
-
미해결
css position absolute설정 시 space-between이 실행되지 않습니다.
cssbody { height: 97vh; display: flex; justify-content: center; align-items: center; background-color: #f3f3f5; } .sedow { box-shadow: 0 0px 20px 5px rgba(128, 128, 128, 0.1); } .insedow { color: rgba(128, 128, 128, 0.7); } .white-color { color: #ffffff; } .font-weight-lg { font-weight: 600; } .screen-first { height: 170mm; width: 90mm; background-color: #ffffff; margin: 50px; border-radius: 40px; position: relative; } .screen-second { height: 170mm; width: 90mm; background-color: wheat; margin: 50px; border-radius: 40px; } .screen-first-icon_box { display: flex; justify-content: space-between; margin: 50px 25px 0; } .screen-first_profile_box { display: flex; justify-content: center; margin-top: 30px; } .screen-first_profile { height: 80px; width: 80px; background-color: orange; border-radius: 50%; box-shadow: 0 0px 15px 10px rgba(255, 180, 40, 0.3); } .screen-first_profile_name { text-align: center; font-size: x-large; font-weight: 750; margin-top: 40px; } .screen-first_profile_genre { text-align: center; font-weight: 600; color: rgba(128, 128, 128, 0.7); margin-top: 15px; } .screen-first_button-box { margin-top: 35px; display: flex; justify-content: center; } .screen-first_button-box_button1 { padding: 12px 32px; border-radius: 30px; background-color: black; color: #ffffff; margin-right: 5px; } .screen-first_button-box_button2 { padding: 12px 20px; border-radius: 30px; background-color: #ffffff; color: rgba(128, 128, 128, 0.7); margin-left: 5px; font-weight: 550; } .fa-heart { color: black; } .screen-first_song-list { justify-content: center; align-items: center; flex-direction: column; margin-top: 20px; margin-left: 15px; margin-right: 15px; } .screen-first_song-list_profile { display: flex; align-items: center; padding: 15px 25px; position: relative; border-radius: 20px; } .screen-first_song-list_profile_img { display: flex; align-items: center; justify-content: center; height: 45px; width: 45px; background-color: tomato; border-radius: 10px; } .screen-first_song-list_profile_text { margin-left: 15px; } .fa-ellipsis-vertical { color: rgba(128, 128, 128, 0.7); position: absolute; right: 20px; } .screen-first_song-list_profile_text_title { margin-bottom: 5px; font-size: small; } .fa-chart-simple { color: #ffffff; } .screen-first_music-player { display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 5px; } .screen-first_music-player { background-color: #222222; padding: 15px 30px; margin: 10px 15px; border-radius: 50px; } .screen-first_music-player_text_singer { margin-bottom: 7px; } .fa-pause { margin: 0 20px; } 추가로 reset.css 2.0도 적용하여 사용하고 있습니다./* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/style.css" /> <script src="https://kit.fontawesome.com/3373615a5c.js" crossorigin="anonymous" ></script> </head> <body> <div class="screen-first"> <div class="screen-first-icon_box"> <i class="fa-solid fa-arrow-left fa-lg"></i> <i class="fa-solid fa-magnifying-glass fa-lg"></i> </div> <div class="screen-first_profile_box"> <div class="screen-first_profile"></div> </div> <h1 class="screen-first_profile_name">Tyler, The Creator</h1> <h4 class="screen-first_profile_genre">Rap, Hip-Hop</h4> <div class="screen-first_button-box"> <div class="screen-first_button-box_button1">Shuffle</div> <div class="screen-first_button-box_button2 sedow"> <i class="fa-solid fa-heart fa-lg"></i> 212 971 </div> </div> <ul class="screen-first_song-list"> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile sedow"> <div class="screen-first_song-list_profile_img"> <i class="fa-solid fa-chart-simple fa-xl"></i> </div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> <li class="screen-first_song-list_profile"> <div class="screen-first_song-list_profile_img"></div> <div class="screen-first_song-list_profile_text"> <h4 class="screen-first_song-list_profile_text_title insedow font-weight-lg" > Tyler, the Creator </h4> <h2 class="screen-first_song-list_profile_text_singer font-weight-lg" > EARFQUAKE </h2> </div> <i class="fa-solid fa-ellipsis-vertical fa-xl"></i> </li> </ul> <div class="screen-first_music-player"> <div class="screen-first_music-player_text"> <div class="screen-first_music-player_text_singer insedow"> Tyler, The Creartor </div> <div class="screen-first_music-player_text_title white-color font-weight-lg" > NOVEMBER </div> </div> <div> <i class="fa-solid fa-backward-step fa-lg white-color"></i> <i class="fa-solid fa-pause fa-2xl white-color"></i> <i class="fa-solid fa-forward-step fa-lg white-color"></i> </div> </div> </div> <!-- <div class="screen-second"></div> --> </body> </html> 이상하게 position absolute시에만 space-between이 작동하지 않습니다. 아무리 고민해보아도 원인을 파악할 수 없어 질문드립니다. ㅜㅜ
-
해결됨따라하며 배우는 리액트 A-Z
이 강의 수강 도중 오류가 발생했어요!
파란색 선으로 표시한 부분의 코드를 치니까 에러 때문에 막혀서 진행을 전혀 못하고 있습니다. 구글링 해봤는데도 해결이 안 되네요. 친구가 로더 문제 같다고 해서 바벨을 지우고 재설치해봤지만 변화가 없었습니다. 혹시 해결 방법을 제시해주실 수 있을까요?.. ㅠㅠ
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
Controller
안녕하세요. 강의 너무 잘 듣고 있습니다. 강의를 진행하는 중 데이터 오류가 계속 나서 다른분들은 이런 문제가 없는지 찾아봤는데 비슷한 질문을 올리셨던 분은 없어서 이렇게 질문을 드립니다. 1. HelloController.java에서 매핑을 import 하고 하단 public String hello 그리고 helloMvc <<이부분을 타이핑해도 인식을 못하고 있습니다. 2. 위의 영향인지 hello.html 파일 내부에서 ${data}도 단순히 문자열로 취급이 되고 있습니다. 어떻게 해결 할 수 있을까요? hello-template 등으로 localhost:8080/hello-template.html을 실행헀을 경우 문제 없이 실행이 됩니다. 물론 다른것들은 잘 안되구요...
-
미해결해킹 대회를 위한 시스템 해킹 프로토스타 완벽 풀이집
원하는 스택 바꾸기 강의 질문이요
그 멍청한 질문인 것 같은데 버퍼의 크기가 64면 그냥 A를 64개 넣으면 그 다음 modified스택에 도착하는거 아닌가요??
-
미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
msgs.map is not a function
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. import { useState, useEffect, useRef } from "react"; import { useRouter } from "next/router"; import MsgItem from "./MsgItem"; import MsgInput from "./MsgInput"; import fetcher from "../fetcher"; import useInfiniteScroll from "../hooks/useInfiniteScroll"; const MsgList = (smsgs, users) => { const { query: { userId = "" }, } = useRouter(); const [msgs, setMsgs] = useState(smsgs); const [editingId, setEditingId] = useState(null); const [hasNext, setHasNext] = useState(true); const fetchMoreEl = useRef(null); const intersecting = useInfiniteScroll(fetchMoreEl); const onCreate = async (text) => { const newMsg = await fetcher("post", "/messages", { text, userId }); if (!newMsg) throw Error("something wrong"); setMsgs((msgs) => [newMsg, ...msgs]); }; const onUpdate = async (text, id) => { const newMsg = await fetcher("put", `/messages/${id}`, { text, userId }); if (!newMsg) throw Error("something wrong"); setMsgs((msgs) => { const targetIndex = msgs.findIndex((msg) => msg.id === id); if (targetIndex < 0) return msgs; const newMsgs = [...msgs]; newMsgs.splice(targetIndex, 1, newMsg); return newMsgs; }); doneEdit(); }; const onDelete = async (id) => { const receivedId = await fetcher("delete", `/messages/${id}`, { params: { userId }, }); setMsgs((msgs) => { const targetIndex = msgs.findIndex((msg) => msg.id === receivedId + ""); if (targetIndex < 0) return msgs; const newMsgs = [...msgs]; newMsgs.splice(targetIndex, 1); return newMsg; }); }; const doneEdit = () => setEditingId(null); const getMessages = async () => { const newMsgs = await fetcher("get", "/messages", { params: { cursor: msgs[msgs.length - 1]?.id || "" }, }); if (newMsgs.length === 0) { setHasNext(false); return; } setMsgs((msgs) => [...msgs, ...newMsgs]); }; useEffect(() => { if (intersecting && hasNext) getMessages(); }, [intersecting]); return ( <> <MsgInput mutate={onCreate} /> {userId && <MsgInput mutate={onCreate} />} <ul className="messages"> {msgs.map(x => ( <MsgItem key={x.id} {...x} onUpdate={onUpdate} onDelete={() => onDelete(x.id)} startEdit={() => setEditingId(x.id)} isEditing={editingId === x.id} myId={userId} user={users[x.userId]} /> ))} </ul> <div ref={fetchMoreEl} /> </> ); }; export default MsgList; -------- 에러 error - components/MsgList.js (72:14) @ MsgList TypeError: msgs.map is not a function 이유가 뭘까요 대체...
-
미해결디지털 포렌식 (Digital Forensic) 전문가 과정
FTK Toolkit 설치과정에서 Local Timezone 에러
Local Evidence Time Zone 에서 메뉴들이 뜨지가 않아서 설치를 못하고있어요..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
포스트맨에서 Success 나오는데 서버로가면 값이 안나와요ㅠ
포스트맨에서 값을 전송했는데 서버에가면 값들을 제대로 못받아오는데 무엇이 잘못되었을까요..ㅠ //index.js const express = require('express') const app = express() const port = 5000 const bodyParser = require('body-parser'); const config = require('./config/key'); const { User } = require("./models/User"); //application/x-www-form-urlencoded app.use(express.urlencoded({extended: true})); //application/json app.use(express.json()); const mongoose = require('mongoose') mongoose.connect(config.mongoURI,{ useNewUrlParser: true,useUnifiedTopology:true,useCreateIndex:true,useFindAndModify:false }).then(() =>console.log('MongoDB Connected...')) .catch(err =>console.log(err)) app.get('/', (req, res) => res.send('Hello SOSO!!!!!!!!!!!!!!!~~')) app.post('/register',(req,res) => { //회원가입할때 필요한 정보들을 client에서 가져오면 // 그것들을 데이터베이스에 넣어준다. const user = new User(req.body) user.save((err, userInfo) =>{ if(err) return res.json({success: false,err}) return res.status(200).json({ success: true }) }) }) app.listen(port, () => console.log(`Example app listening at http://localhost:${port}!`)) //User.js const mongoose = require('mongoose'); const bcrypt = require('bcrypt'); const saltRounds = 10; const userSchema = mongoose.Schema({ name: { type: String, maxlength:50 }, email: { type: String, trim:true, unique:1 }, password:{ type: String, minlength: 5 }, lastname:{ type:String, maxlength:50 }, role: { type:Number, default:0 }, image:String, token: { type:String }, tokenExp: { type:Number } }) userSchema.pre('save',function( next ){ var user = this; if(user.isModified('password')){ //비밀번호 암호화시킨다. bcrypt.genSalt(saltRounds, function(err, salt) { if(err) return next(err); bcrypt.hash(user.password, salt, function(err, hash){ if(err) return next(err); user.password = hash; next(); }) }) } else{ next(); } }) const User = mongoose.model('User',userSchema) module.exports = { User } req.body 찍어보면 빈객체로 나와요
-
미해결자바 ORM 표준 JPA 프로그래밍 - 기본편
오류가발생했는데 도와주세요
실전예제1 - 요구사항 분석과 기본 매핑 강의입니다. 문제가 무엇인지 찾을려고 해도 힘드네요.. 답변 부탁드립니다.ㅜㅜ
-
미해결실전 리액트 프로그래밍
프로젝트 생성하시고 나서가 궁금합니다
강사님께서는 매 실습을 create-react-app으로 프로젝트를 생성하시는거 맞으시죠? 지금 저도 실전 리액트프로그래밍 개정판 책과 강사님의 강좌를 같이 보며 따라가고있는데, create-react-app으로 프로젝트 생성하고 있습니다. 책 20p에 index.html, index.js, package.json파일을 제외한 나머지 파일은 데모앱을 위한 파일이기 때문에 마음대로 수정하거나 삭제해도 괜찮다고 하셔서 대부분 지우고 사용하고 있는데, 항상 같이 다운되는 node-modules는 삭제하면 안되는 거같아서 여쭤봅니다. 그래서 항상 node-modules는 저의 모든 프로젝트 폴더마다 있는데, 강사님의 파일창에는 2-virtual-dom처럼 package.josn도 없고 .js파일들만 이쁘게 있어서, node-modules까지 다 삭제하고 해도되는지, node-modules는 하나만 설치하고 다같이 사용하시는건지... 프로젝트 생성부터 같이 해보지 않고, 항상 미리 세팅이 되신 상태에서 바로 시작하셔서 항상 궁금하다가 여쭤봅니다... ㅜㅜ 답변 부탁드려요
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
질문 있습니다~!
안녕하세요! 수업 너무 잘들었습니다~ 코딩일레븐님께 배운 코드를 사용하려고 하는데 window.onload가 중복으로 사용하면 최하단에 있는것만 실행이 되더라고요 ㅠ 구글링 해도 제가 js 이해가 짧아서 안되네요;;; 해당 강의에서 배운 스크롤바에 앞선 강의에서 배운 커서와 버튼 효과도 같이 주려면 어떻게 해야하나요? 바쁘시겠지만 문의 드리겠습니다~항상 감사합니다!
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
kakao in not definded 오류 문제
선생님, 강의 재미있게 잘 듣고 있습니다. 그런데 아래와 같이 kakao is not defined라고 뜨는 오류가 발생했는데요, kakao development 사이트에서 소스를 긁어볼 때 기존 선생님이 타고가신 링크와 다른 부분이 있어 kakao.API.request 라는 구문을 나에게 보내기라는 항목으로 가지고 왔긴 했습니다. 어떤 문제가 있을지 궁금하고 긁어온 소스코드가 다른 부분이 있는데 추가로 수정해야 할 것은 없는지 질문 드립니다. 담백한 강의가 정말 일품입니다!
-
미해결프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
autocomplete-python traceback output: 가 뜹니다
autocomplete-python traceback output: Traceback (most recent call last): File "C:\Users\User\.atom\packages\autocomplete-python\lib\completion.py", line 8, in <module> =print('hello') 를 입력하고 싶은데, pri를 쓰면 위와 같은 메세지가 뜹니다.. 고급설정가서 시스템 설정 - path 편집에서 C:\Users\User\AppData\Local\Programs\Python\Python310 으로 저장도 했고, 재부팅도 했는데 여전히 문제가 발생합니다..ㅠㅠ 어떻게 해야하나요?ㅠㅠ