aws 설정중 Connect to a database 메뉴는 어디에있나요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
여기까지 진행했습니다 이 메뉴는 어디에 있나요?
- react
- spring-boot
- jpa
- jwt
- redux-toolkit
박지영
댓글 1
좋아요 0
조회수 92
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
백엔드 api가 따로 있을 경우의 fetch 요청
미해결
Next + React Query로 SNS 서비스 만들기
Next.js에서 서버 컴포넌트는 서버에서 실행되기 때문에, useEffect 없이 컴포넌트 내부에서 직접 fetch 요청을 보낼 수 있는 것으로 알고 있습니다. 또한, 서버 액션은 백엔드 없이 Next.js 풀스택 환경에서 DB에 직접 접근할 때 주로 사용하는 것으로 이해하고 있습니다. 그렇다면, 별도로 백엔드가 존재하는 경우에도 서버 액션을 사용할 필요가 있나요? 그리고 실제로 현업에서도 백엔드가 따로 있을 경우에 서버액션을 사용하나요? 감사합니다!
- react
- next.js
- react-query
- next-auth
- msw
10rlatkdtn
댓글 2
좋아요 0
조회수 170
피그마 링크
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 ~ 수업 듣기 시작하고 싸이월드 만들기 1탄에서 피그마가 나오는데 예제자료를 보면서 할수 있는 피그마 링크가 어디에 있는지요 ?
- react
- react-native
- 하이브리드-앱
- graphql
- next.js
Lia
댓글 2
좋아요 1
조회수 83
return에 대해 질문있습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 return에 대해 질문이 있습니다. const sum = (a, b) => { return a + b } const result = sum(1, 2); console.log(result) 이렇게 간단한 코드에서는 a와 b가 더한 값이 반환되어 호출한 부분으로 전달되서 5가된다라고는 알고 있는데 투두리스트 예제에서 예를 들어 const onUpdate = (targetId) => { setTodos( todos.map((todo) => { if (todo.id === targetId) { return { ...todo, isDone: !todo.isDone, }; } return todo; }) ); }; 이렇게 return {...todo, isDone: !todo.isDone} 부분과 return todo 이 부분이 조금 이해가 되지 않는데 이 부분은 return을 왜 사용하였고 또 어디로 반환이 되는것인지 궁금합니다.
- javascript
- react
- node.js
부드러운 족제비
댓글 2
좋아요 0
조회수 110
kakao 로그인 구현중 에러
미해결
코드로 배우는 React 19 with 스프링부트 API서버
이렇게 에러가 뜨고 데이터베이스에 회원 가입이 안되고 있습니다ㅠ.ㅠ교제 423 페이지까지 작성하고 카카오로 로그인시 insert문이 실행되고 회원이 생성되어야 하는데 안되네요
- react
- spring-boot
- jpa
- jwt
- redux-toolkit
박지영
댓글 2
좋아요 0
조회수 165
[2-2]
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
홈스크린 부분에만 gray 배경이 적용되는데, 이게 뭐때문에 그런가요? 내 스크린이나, 설정 부분은 gray 배경이 없습니다 . 코드는 강의에서 제공된 코드를 다운받아 그대로 사용했습니다.
- javascript
- react
- react-native
- typescript
- react-query
박상원
댓글 2
좋아요 0
조회수 126
HTML 태그와 리렌더링 관계
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님 안녕하세요! 리액트 강의 완강 후, 리액트로 개인 프로젝트를 진행하던 중에 리렌더링 관련하여 궁금한 점이 생겨 질문드립니다. 컴포넌트가 리렌더링 되는 조건이 1. 부모 컴포넌트가 리렌더링 될 때 (props 포함) 2. 컴포넌트의 state가 변경되었을 때 이렇게 2가지라고 봤는데요! 문제상황 : Input의 state가 변경되면 Button이 재렌더링됨 부모-자식 관계가 아닌 형제관계인 <Input /> 컴포넌트와 <Button /> 가 서로 재렌더링을 유발하는 원인이 무엇일까 해서 질문드립니다. 실제 브라우저DOM에 커밋되지는 않고 각 컴포넌트 내부에서 console을 찍어봐도 나오지 않는 것을 보아하니 렌더링까지만 되는 것 같아요... (chrome react확장 프로그램에서 highlight됨) 제가 여러가지 케이스로 테스트 해 본 결과, (각 컴포넌트는 props도 받지 않고 내부 state만 있음) div 태그로 감싸져 있을 때 서로 재렌더링을 유발하는 것 같아 아무리봐도 이상해서요 ㅠㅠ 문제 발생코드 <div> <Input /> </div> <div> <Button /> </div> 수정한 코드 <Input /> <Button />
- javascript
- react
- node.js
기매리미
댓글 2
좋아요 0
조회수 124
tailwind css 설치 관련 문의
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
App.css 에 있는 내용 지우고, 다음인 App.jsx 수정하는 부분에서 막혔습니다. tailwind css 설치 사이트에 들어가면 다음과 같이 다른 부분이 존재하는데, 5번 부분에 있는 코드를 App.jsx에 넣으면 되는건가요?
- HTML/CSS
- javascript
- react
- node.js
- mongodb
어린 송어
댓글 1
좋아요 0
조회수 211
@VersionColumn() save 관련 질문
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
@VersionColumn() 관련하여 'save()함수가 몇번 불렸는지 기억한다' 라고 하셔서 save함수가 불린 횟수에 따라 1씩 증가하는 것으로 처음에 이해를 했었는데, 강의 영상과 조금 다르게 service & controller 나눠 작성하는 연습을 하다가 아래와 같이 title을 동일한 값으로 수정하는 코드를 작성했었습니다 async PatchUsers(id: string) { const user = await this.userRepository.findOne({ where: { id, }, }); if (!user) { throw new NotFoundException(); } console.log('Before save - Version:', user.version); if (user) { user.title = '수정하기'; } const newUser = await this.userRepository.save(user); console.log('After save - Version:', user.version); return newUser; } 이때 title이 이전과 동일하면 실제로 save함수는 실행이 되지만 DB상에 변화가 없기 때문에 @VersionColumn() 으로 정의한 version에는 변화가 없는 것 같은데 save함수의 실행횟수보다 db의 변화가 있는지에 초점을 맞춰서 생각하면 될까요 ?
- javascript
- typescript
- rest-api
- nestjs
- backend
zoezoe
댓글 2
좋아요 0
조회수 116
vite가 아니라 vscode에서 react를 하고 싶다면 기본세팅 외의 그외의 문법들은 동일하게 적용되는건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의를 듣고 따로 팀 프로젝트를 진행해야하는데 제목과 같이 vscode에서 진행을 하는데 기본 세팅을 따로 하고 그외의 문법들을 vscode에서 실행해서 프로젝트를 진행해도 무방한것인가요?
- javascript
- react
- node.js
댓글 2
좋아요 0
조회수 429
썸네일 리스트 페이지 만들기 함수 질문입니다.
해결됨
(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
function ThumbnailList() { const [testList] = useState(initialState: TESTS); return <div> {testList?.map(callbackfn: (test) => ( <img src={test?.info?.thumbImage} alt={test?.info?.mainUrl} key={test?.info?.mainUrl} />))} </div>; } useState 함수에 initialState:와 map 함수에 있는 callbackfn:이 있으면 문제가 생기는데 빼야 하는건가요? 아니면 문법이 버전때문에 다른건가요?
- react
- aws
- Google-Analytics
- cloudflare
- adsense
- 수익화
이선용
댓글 2
좋아요 0
조회수 137
logout 기능에서 req.cookies.token == undefined가 되는 문제
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
비슷한 질문이 있어서 5-2강까지 강의를 들어서 adminLogin까지 구현을 하였습니다. 앞의 4-6강에서 로그아웃을 시도하였을 때, 400 Bad Request : 이미 로그아웃된 상태로 나옵니다. 그래서 console.log(req.cookies.token)을 해보았을 때, undefined가 나옵니다. adminLogin을 진행하여 브라우저에 쿠키가 제대로 저장되었는지 확인해보았는데, localhost:5173에서도 localhost:3000에서도 cookie에 token값이 저장되어있었습니다. index.js에 cookie-parser 또한 존재하는 상태입니다. 질문을 올리기 전에 여러가지를 시도해보았는데, router.post () 에서는 req.cookies.token의 값을 undefined로 가져오고, router.get()에서는 정상적인 토큰값을 반환했습니다. 어떻게 해야 router.post () 에서도 req.cookies.token값을 가져올 수 있을까요? thunder client로 GET http://localhost:3000/api/auth/getCookie를 했을 때도 token은 undefined 값이 출력되었다가 브라우저에서 주소로 접근하니 token값이 정상적으로 출력되었습니다. 아래의 사진은 thunder client로 get 방식과 post 방식으로 보냈을 때의 차이를 담은 사진입니다. 브라우저에 cookie가 정상적으로 저장된 사진입니다. // index.js require("dotenv").config(); const express = require("express"); const mongoose = require("mongoose"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const userRoutes = require("./routes/user"); const app = express(); const PORT = 3000; app.use(cors({ origin: "http://localhost:5173", credentials: true, })); app.use(express.json()) app.use(express.urlencoded({extended : true})) app.use(cookieParser()); app.use("/api/auth", userRoutes); app.get("/", (req, res) => { res.send("Hello world"); console.log("token: " + req.cookies.token); }); app.post("/cookie", (req, res) => { console.log(req.cookies.token) res.send("api/auth"); }) mongoose .connect(process.env.MONGO_URL) .then(() => console.log("MongoDB와 연결이 되었습니다.")) .catch((error) => console.log("MongoDB와 연결에 실패했습니다: ", error)); app.listen(PORT, () => { console.log("Server is running"); }); // user.js const express = require("express"); const router = express.Router(); const bcrypt = require("bcrypt"); const User = require("../models/User"); const axios = require("axios"); const jwt = require("jsonwebtoken"); // const cookieParser = require("cookie-parser"); // router.use(express.json()) // router.use(express.urlencoded({extended : true})) // router.use(cookieParser()); router.post("/signup", async (req, res) => { try { const { username, password } = req.body; const existingUser = await User.findOne({ username }); if (existingUser) { return res.status(400).json({ message: "이미 존재하는 사용자입니다." }); } const hashedPassword = await bcrypt.hash(password, 10); const user = new User({ username, password: hashedPassword, }); await user.save(); res.status(201).json({ message: "회원가입이 완료되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); console.log(error); } }); router.post("/login", async (req, res) => { try { const { username, password } = req.body; const user = await User.findOne({ username }).select("+password"); if (!user) { return res.status("401").json({ message: "사용자를 찾을 수 없습니다." }); } if (!user.isActive) { return res .status(401) .json({ message: "비활성화된 계정입니다. 관리자에게 문의하세요." }); } if (user.isLoggedIn) { return res .status(401) .json({ message: "이미 다른 기기에서 로그인되어 있습니다." }); } const isValidPassword = await bcrypt.compare(password, user.password); if (!isValidPassword) { user.failedLoginAttempts += 1; user.lastLoginAttempt = new Date(); if (user.failedLoginAttempts >= 5) { user.isActive = false; await user.save(); return res.status(401).json({ message: "비밀번호를 5회 이상 틀려 계정이 비활성화되었습니다.", }); } await user.save(); return res.status(401).json({ message: "비밀번호가 일치하지 않습니다.", remainingAttempts: 5 - user.failedLoginAttempts, }); } user.failedLoginAttempts = 0; user.lastLoginAttempt = new Date(); user.isLoggedIn = true; // try { // const response = await axios.get("https://api.ipify.org?format=json"); // const ipAddress = response.data.ip; // user.ipAddress = ipAddress; // } catch (error) { // console.log("IP 주소를 가져오던 중 오류 발생: ", error.message); // } await user.save(); console.log("로그인 성공"); const token = jwt.sign( { userId: user._id, username: user.username }, process.env.JWT_SECRET, { expiresIn: "24h" } ); console.log(token); res.cookie("token", token, { httpOnly: true, secure: "production", sameSite: "strict", maxAge: 24 * 60 * 60 * 1000, }); console.log("쿠키 설정", ); const userWithoutPassword = user.toObject(); delete userWithoutPassword.password; res.json({ user: userWithoutPassword }); console.log("json 전달 후 종료"); } catch (error) { console.log("서버 오류: ", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.post("/logout", async (req, res) => { try { const token = req.cookies.token; console.log(token); if (!token) { return res.status(400).json({ message: "이미 로그아웃된 상태입니다." }); } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (user) { user.isLoggedIn = false; await user.save(); } } catch (error) { console.log("토큰 검증 오류: ", error.message); } res.clearCookie("token", { httpOnly: true, secure: "production", sameSite: "strict", }); res.json({ message: "로그아웃되었습니다." }); } catch (error) { console.log("로그아웃 오류: ", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.delete("/delete/:userId", async (req, res) => { try { const user = await User.findByIdAndDelete(req.params.userId); if (!user) { return res.status(404).json({ message: "사용자를 찾을 수 없습니다." }); } res.json({ message: "사용자가 성공적으로 삭제되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.post("/verify-token", (req, res) => { const token = req.cookies.token; if (!token) { return res .status(400) .json({ isValid: false, message: "토큰이 없습니다." }); } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); return res.status(200).json({ isValid: true, user: decoded }); } catch (error) { return res .status(401) .json({ isValid: false, message: "유효하지 않은 토큰입니다." }); } }); // router.get("/getCookie", async (req, res) => { // res.send(req.cookies.token) // console.log("getCookie's token : " , req.cookies.token) // }) // router.post("/postCookie", async (req, res) => { // res.send(req.cookies.token) // console.log("postCookie's token : ", req.cookies.token) // }) module.exports = router;
- HTML/CSS
- javascript
- react
- node.js
- mongodb
김주형
댓글 1
좋아요 0
조회수 172
이미지를 문의드립니다.
해결됨
UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
안녕하세요. "UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오" 강의를 재밌게 보고 있습니다. "완성" 폴더에 "원본"폴더에 있는 "yeskey"에 들어간 움직이는 이미지들을, 이미지 사이트에서 다운로드 받으신걸까요? 만약 그렇다면 다운 받으신 사이트의 주소를 알려주실 수 있을까요? 제 이메일 주소를 남깁니다. happinessboom@daum.net 입니다. 좋은 강의를 만들어 주셔서 감사합니다.
- HTML/CSS
- javascript
- jquery
- 반응형-웹
- media-query
happinessboom
댓글 4
좋아요 1
조회수 301
sublime text 설치 불가
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
하라는 데로 다 해도 그냥 안 깔리네요. 응용 프로그램 크롬으로 넘어가는 과정도 전혀 실행이 안되고요. 추측되는 요인 있으신 분 없으실까요?
- HTML/CSS
- javascript
문정언
댓글 1
좋아요 0
조회수 218
맥북을 사용중인데, 터미널이 다릅니다,,,,!
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
강의에서는 command prompt를 사용하셨는데, 맥북에서는 zsh와 bash 중 어떤 것을 사용해야 할까요?
- HTML/CSS
- javascript
- react
- node.js
- mongodb
어린 송어
댓글 2
좋아요 0
조회수 168
Chapter6 질문 드립니다
미해결
처음 만난 리액트(React)
학습을 잘 따라가는 중 아무 오류나 에러는 없는데 콘솔에는 에러가 나네요 ㅜㅜ 분명 코드도 똑같은데 이유를 잘 모르겠어 코드와 오류 사진 캡처 드립니다!
- HTML/CSS
- javascript
- react
댓글 2
좋아요 1
조회수 239
roughness이 안 먹혀요 ㅜ
미해결
떠먹는 Three.js
Material 수업강의 중 2:44초에 roughness이 안먹힙니다.. 빛반사가 안되는데 확인 부탁드려요 ㅜ <script async src="https://ga.jspm.io/npm:es-module-shims@2.0.10/dist/es-module-shims.js"></script> <script type="importmap"> { "imports":{ "three" : "https://cdn.jsdelivr.net/npm/three@0.174.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.174.0/examples/jsm/" } } import * as THREE from "three"; const $result = document.querySelector("#result"); // 1. Scene : 화면에서 보여주려는 객체를 담는 공간 const scene = new THREE.Scene(); // scene.add(요소) scene.background = new THREE.Color(0xffe287); // 2. Camera : 신을 바라볼 시점을 결정 const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(2, 2, 2); camera.lookAt(0, 0, 0); // 3. Renderer : Scene+Camera, 화면을 그려주는 역할 const renderer = new THREE.WebGLRenderer({ canvas: $result, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); // console.log(renderer); // document.body.appendChild(renderer.domElement) const light = new THREE.DirectionalLight(0xffffff); light.position.set(2, 4, 3); scene.add(light); const geometry = new THREE.BoxGeometry(1, 1, 1) const basic = new THREE.MeshBasicMaterial({ color: 0x2e6ff2, // wireframe: true, transparent: true, opacity: 0.5 }); // 가장 일반적으로 사용 됨. const standard = new THREE.MeshStandardMaterial({ color: 0xffaaaa, roughness: 0.2, }); const mesh = new THREE.Mesh(geometry, standard); scene.add(mesh); function animate() { // box.rotation.y += 0.01; // box.rotation.x += 0.01; // console.log(box.rotation.y); renderer.render(scene, camera); requestAnimationFrame(animate); } animate(); // 반응형을 위한 함수 window.addEventListener("resize", () => { // 1. 카메라의 종횡비 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); //카메라 업데이트 // 2. renderer의 크기 renderer.setSize(window.innerWidth, window.innerHeight); });
- HTML/CSS
- javascript
- three.js
댓글 1
좋아요 0
조회수 146
선생님 학습 방법 질문이 있습니다.
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
파이썬 기초 문법 학습 후 현재 강의를 듣는 중인데 2번 세션 맛보기 반복 숙달 어느정도까지 해야 다음 챕터로 넘어가는 것이 맞나요? 강의 이름은 맛보기인데 중요한 것 들 같아서 반복 숙달을 어느정도 까지 하는게 좋을 지 궁금합니다.
- react
- python
- django
- web-api
- htmx
lkh5040
댓글 2
좋아요 0
조회수 186
상태관리
해결됨
한 입 크기로 잘라먹는 Next.js
next는 자동적으로 캐시 저장기능이 있고 next에서도 DB 데이터가 필요한 페이지에서 직접 불러와서 사용하는 것을 권장한다 라고 말씀해주셨는데요 그러면 next는 보통 zustand, recoli, redux와 같은 상태관리 라이브러리를 사용하지 않는 것을 추천하시나요? 아니면 사용하는 것을 추천하시나요??
- react
- typescript
- next.js
Full Stack 개발자
댓글 2
좋아요 0
조회수 91
member.self-ex 코드 업로드요청
해결됨
[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]
깃허브 url에 member.self-ex 코드가 없습니다. 확인 후 업로드 부탁드려요 그리고, useEffect 제대로 써보기: 반복 작업 제거와 효과적인 클린업 3:43 이부분부터 몇초간 화면이 안보입니다..
- javascript
- react
- jquery
- typescript
- es6
- vanilla-javascript
희원
댓글 2
좋아요 0
조회수 136
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🧘♀️ [운동공간] 기획자/디자이너/앱 개발자를 찾습니다 띄띄