묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
혹시 백엔드에 관련하여 강의를 올리실 생각이 있으실까요?
혹시 백엔드에 관련하여 강의를 올리실 생각이 있으실까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
input과 select 태그에 value 값 설정
안녕하세요 5.8) State로 사용자 입력 관리하기 1 에서 input과 select 태그에 value 값을 설정해주셨는데, 초기값을 설정해줄 필요가 없는 경우에는 value 값을 생략해도 괜찮은가요?
-
미해결AI 시대에 살아남기: Supabase로 백엔드 뚝딱!
감사히 잘 듣겠습니다.
수파베이스에 대한 갈증이 있었는데 타 플랫폼도 그렇고 한국강좌가 없어서 많이 아쉬워하고 있었는데요 인프런에 2만2천원짜리 강의하나밖에 없어서 그것을 듣긴했는데 그것만으론 많이 아쉬움을 느끼고 있던차에 이 강의가 나왔다는 메일을 받고 정말 기뻐서 바로 결제했습니다 수파베이스를 활용해서 만들고싶은 것들이 잔뜩 머릿속에 있거든요 감사히 잘 듣겠습니다.
-
미해결SEO 최적화 랜딩페이지 솔루션 & 노출전략: 바이브코딩으로 완성 with Nextjs
갑자기 유료화 되는데 이거 시간 지나면 다시 풀리나요?
커서 ai가 갑자기 결제해야된다는 식으로 창이 뜨는데 시간 지나면 다시 무료로 써지나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[e.target.name]: e.target.value 문법을 자바스크립트 객체 챕터에서 배웠었나요?
내용 하나하나 기록하면서 수업 듣고 있었는데..말씀 중에[e.target.name]: e.target.value,이렇게 객체를 생성하면서 프로퍼티의 key 값에 대괄호에 변수 이름을 넣어서 생성하는 부분이 있다고 하셔서 기존글을 계속 뒤져봤는데 자바스크립트 객체 챕터에서 예시가 안보여서 혹시 어디 부분의 어느 예시로 알려주셨는지 알고 계신분이 계시면 공유좀 부탁드립니다....
-
해결됨제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]
readFileSync
readFileSync 메서드는 동기적인 메서드라 이벤트 루프에서 막혀서 파일을 읽어오는동안 스레드를 멈춰서 실무에선 잘 사용 안 하지 않나요? 단순히 서버의 흐름 이해를 돕기위한 코드 정도로 이해해도 될까요? 혹시 이 강의는 express와 서버의 개념만 이해하고 넘어가는 정도의 강의일까요? 실무적인 관점의 강의는 파트 2라고 보면 될까요 아님 파트1 파트2 모두 실무적인 관점의 코드는 작성하지 않고 넘어가나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Context 관련 상태관리도구 질문있습니다!
안녕하세요! 회사에서 프론트엔드업무도 맡게되어 강사님 강의로 잘 배우고 있습니다!😍😍 Context=props driling을 방지하려고 데이터를 꺼내쓰는 저장소를 만든다고 이해했습니다.만약 Context.Provider로 "최상위 컴포넌트"를 감싸주면 그게 "전역" 저장소 역할을 하는거 아닌가요?!.. Redux나 zustand? 같이 전역저장소 역할을 하는 툴들이 있다고 하던데조사해보니 value={{todos,b,c]} 일때 redux는 구독이라는 개념으로 todos의 "길이변화"를 감지해서 "특정 컴포넌트만 리렌더링" 시킬수있다..? 이런 정밀한 작업의 차이밖에 없는걸로 이해돼서요! 좀더나은 Provider로 이해됐습니다. 로그인 정보라던가 현재 선택한 메뉴정보, 장바구니정보 이런데이터들을 담기위해 앱최상단에 Provider로 감싸는건 안좋은 방법일까요? 굳이 Redux나 zustand같은 툴들을 사용하는 이유나 적절한 사용법이 궁금합니다!
-
미해결실무 중심! FE 입문자를 위한 React
자료 Git Source 주소 ??
survey-pie 코드 .. 404...error 입니다. 딱 1년 만에 이 강의 들으려고 왔는데... 흐음.. (요즘 트랜드..리액트 버전이나... 암튼... 자료 , 강의는 업데이트 되고 있나요?종종..수정해서 올리는 강의를 본적이 있어서..) 암튼..주속 확인 부탁드립니다.
-
미해결실무 중심! FE 입문자를 위한 React
교육자료 소스 바로 실행시..
안녕하세요문의드립니다. 일단 제공해 주신 소스를 풀어서실행을 해 보았습니다.(당연히 npm i...관련 module 설치 하고요)터미널: npm run start를 실행하면 위와 같은 화면만 나오네요.그리고 개발자 도구 내용을 보면 index.tsx ? .. 소스상에 파일이 없는데 궁금합니다.일단 실행이 해서 개발 완료된 화면을 보고자 합니다.실행하기 전에 선행 작업있나요?(각 확장프로그램..등... )가이드를 봐도 내용이..(제가 못찾은 건지.)설명 부탁드립니다.
-
미해결실무 중심! FE 입문자를 위한 React
교육자료 소스 바로 실행시..
안녕하세요문의드립니다. 일단 제공해 주신 소스를 풀어서실행을 해 보았습니다.(당연히 npm i...관련 module 설치 하고요)터미널: npm run start를 실행하면 위와 같은 화면만 나오네요.그리고 개발자 도구 내용을 보면 index.tsx ? .. 소스상에 파일이 없는데 궁금합니다.일단 실행이 해서 개발 완료된 화면을 보고자 합니다.실행하기 전에 선행 작업있나요?(각 확장프로그램..등... )가이드를 봐도 내용이..(제가 못찾은 건지.)설명 부탁드립니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
tailwind 설치 명령어 관련 질문
안녕하세요! 강의 노션에서는이렇게 나와있는데 npx tailwindcss init만으로는 tailwind.config.js만 설치되고, postcss.config.js는 설치가 안되는 게 아닌가요? npx tailwind init -p 명령어를 사용해야 하는지 여쭤보고 싶습니다! 그리고 위 두 명령어만 입력해서 tailwind를 사용하려고 하니 에러가 떠서 찾아보니까Vite가 postcss.config.js 읽다가 autoprefixer 플러그인을 불러오려고 했는데, 프로젝트에 autoprefixer 패키지가 설치되어 있지 않아서 터진 거야.라고 하더라구요npm install -D tailwindcss@3이 아니라 npm install -D tailwindcss@3 postcss autoprefixer 이 명령어를 사용해야 한다고 해서 사용해보니 에러가 해결된 상태입니다.노션에 적혀있는 명령어와 달라서 여쭤봅니다! npm install -D tailwindcss@3 postcss autoprefixernpm install -D taiㅇindcss@3 postcss autopnpm install -D tailwindcss@3 postcss autoprefixerrefixer
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
넥스트 버젼 질문
안녕하세요 강의를 사놓고 조금 듣고 네이티브 공부를 하다가 다시 공부를 하려고합니다 강의상에서는 넥스트를 9버젼을 쓰는데 최신 버젼을 쓰는걸 추천하실까요? 아니면 구버젼 그대로 쓰는걸 추천하실까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Live Server 실행 후 브라우저 자동 활성화 방법
안녕하세요 강의 잘 듣고 있습니다.비주얼 스튜디오 Live Server 확장 다운받고 'Open with Live Server'을 눌러서 실행을 했는데 브라우저(크롬)가 자동으로 켜지지 않습니다.실행을 하고 직접 주소를 입력하면 접속은 됩니다. 어떻게 하면 자동으로 활성화 되게 할 수 있을까요?
-
미해결얄코의 가장 쉬운 리액트(React)
화면표시 잘못된것같아요! 화면오류?
🛑 질문은 이곳이 아닌, 노션 페이지에 해주세요!!질문 방법 보기: https://youtu.be/2OQoqcQMxhA노션 페이지 링크: https://yalco.notion.site/157ff6b3a35780918b5af38738e7758c?pvs=4 5:50 부분 화면 표시가 잘못된것같습니다.Color count: {colors.length} 인데 위에 const numbers = [1, 2, 3, 4, 5]; 로 표시되어져있어요.
-
해결됨한입 챌린지 7기 - React.js
Day 19 미션 안내 질문
Day 19 미션 안내에서 '요구사항 2'의 State 생성 요구사항 중 action.type이 INIT인 경우에는 어떤 액션을 구현 하면 될까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인시 401 Unauthorized 오류가 뜹니다
로그인시 401 Unauthorized 오류가 떠서리덕스 액션을 봤더니 LOG_IN_FAILURE에 error 내용이 비어 있었습니다.routes/user.jsconst express = require("express"); const bcrypt = require("bcrypt"); const { User, Post } = require("../models"); const passport = require("passport"); const router = express.Router(); router.post("/login", (req, res, next) => { console.log("🧾 req.body:", req.body); passport.authenticate("local", (err, user, info) => { if (err) { console.error(err); return next(err); } if (info) { return res.status(401).send(info.reason); } return req.login(user, async (loginerr) => { if (loginerr) { console.error(loginerr); return next(loginerr); } const fullUserWithoutPassword = await User.findOne({ where: { id: user.id }, attributes: { exclude: ["password"], }, include: [ { model: Post, }, { model: User, as: "Followings", }, { model: User, as: "Followers", }, ], }); return res.status(200).json(fullUserWithoutPassword); }); })(req, res, next); }); router.post("/", async (req, res, next) => { try { const exUser = await User.findOne({ where: { email: req.body.email, }, }); if (exUser) { return res.status(403).send("이미 사용중인 아이디입니다."); } const hashedPassword = await bcrypt.hash(req.body.password, 12); await User.create({ email: req.body.email, nickname: req.body.nickname, password: hashedPassword, }); res.status(201).send("ok"); } catch (error) { console.error(error); next(error); } }); module.exports = router; 세션 쿠키가 잘 전달이 안된건가 싶어서 req.body를 서버 터미널로 찍었더니 req.body: undefined 로 나왔습니다.로그인 폼에서 데이터를 잘못 넘겨준건가 해서 확인해봤더니 loginForm.js const onSubmitForm = useCallback(() => { console.log(email, password); dispatch(loginRequestAction({ email, password })); }, [email, password]);데이터도 잘 넘겨준 것 같고sagas/user.jsfunction logInAPI(data) { return axios.post("/user/login", data); } function* logIn(action) { try { const result = yield call(logInAPI, action.data); yield put({ type: LOG_IN_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: LOG_IN_FAILURE, error: err.response.data, }); } }사가쪽도 문제가 없어보여서 프론트 쪽 문제는 아닌 것 같고 백엔드쪽 문제 같은데 도저히 어디서 문제가 생긴건지 모르겠습니다.app.jsconst express = require("express"); const cors = require("cors"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const db = require("./models"); const passportConfig = require("./passport"); const passport = require("passport"); const dotenv = require("dotenv"); dotenv.config(); const app = express(); db.sequelize .sync() .then(() => { console.log("db 연결성공"); }) .catch(console.error); passportConfig(); app.use( cors({ origin: "*", credentials: false, }) ); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, }) ); app.use(passport.initialize()); app.use(passport.session()); app.get("/", (req, res) => { res.send("hello express"); }); app.get("/api", (req, res) => { res.json([ { id: 1, content: "hello", }, { id: 2, content: "hello2", }, { id: 3, content: "hello3", }, ]); }); app.get("/api/posts", (req, res) => { res.json([ { id: 1, content: "hello", }, { id: 2, content: "hello2", }, { id: 3, content: "hello3", }, ]); }); app.use("/post", postRouter); app.use("/user", userRouter); app.listen(3065, () => { console.log("서버 실행 중!"); }); passport/local.jsconst passport = require("passport"); const { Strategy: LocalStrategy } = require("passport-local"); const { User } = require("../models"); const bcrypt = require("bcrypt"); module.exports = () => { passport.use( new LocalStrategy( { usernameField: "email", passwordField: "password", }, async (email, password, done) => { try { console.log("입력값:", email, password); const user = await User.findOne({ where: { email }, }); console.log("찾은 유저:", user && user.email); if (!user) { return done(null, false, { reason: "존재하지 않는 이메일입니다!" }); } const result = await bcrypt.compare(password, user.password); if (result) { return done(null, user); } return done(null, false, { reason: "비밀번호가 틀렸습니다." }); } catch (error) { console.log(error); return done(error); } } ) ); }; passport/index.jsconst passport = require("passport"); const local = require("./local"); const { User } = require("../models"); module.exports = () => { passport.serializeUser((user, done) => { done(null, user.id); }); passport.deserializeUser(async (id, done) => { try { const user = await User.findOne({ where: { id } }); done(null, user); } catch (error) { console.error(error); done(error); } }); local(); }; 백엔드 코드를 첨부하였습니다.터미널에 나온 콘솔 내용입니다.local.js파일에서도 콘솔("입력값:","찾은 유저:" )을 찍었는데 터미널에 찍힌 콘솔은 req.body만 찍혔습니다..
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
eslint설정 관련입니다.
안녕하세요.지금 리액트 따라하기 하면서 보고있는데eslint 부분 설정에서저는 eslintrc.cjs란 파일이 없고 eslint.config.js란 파일만 있는데 rules 상에서는 처음에 no-unsed-vars는 error로 되있어서 off로 바꿔줬는"react/prop-types": "off" , 부분은 어떡해 추가해 줘야 하는지요.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
todolist에서 useReducer를 사용할때 UPDATE에서 오류가 생깁니다
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다! 영상과 똑같이 코드를 작성하였을 때, 렌더링 되는 화면이 모두 날아갔습니다. 이때 이렇게 return 을 추가하니 정상작동하게 되었는데 이유가 궁금합니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm.ps1 파일로 인한 npm i randomcolor 안되는 문제
npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1+ npm i randomcolor+ ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 왜 이러죠... npm.ps1 파일을 찾아봣는데 없어요....
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
eslintrc.cjs 파일이 eslint.config.js 와 같나요?
eslintrc.cjs 파일이 eslint.config.js 와 같은 건가요? 같은 아이콘의 파일을 받았는데 eslint.config.js라고 되어있어서 여쭈어봅니다