묻고 답해요
167만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
질문) 질문있습니다^^
속 저는 접속이 안되네요
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
yarn 설치는 어떻게 해야하나요ㅠ
환경세팅 영상에서 yarn 설치가 필요하면 요청해주세요해서.. 요청드려요!!+_+
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
주소창에 url 쿼리로 userId를 작성한 후 수정을 하려면 500번 에러가 나타납니다
userId=roy 까지 치고 새글 생성 시 roy로만 추가하는 것까지 완료되었는데 수정을 하고나서 완료버튼을 누르면 콘솔에 에러가 떠요 catch 부분에 console.log을 찍어서 messages의 Update 부분에서 오류가 났다는 것까지는 발견했는데 구글에 검색해봐도 어떻게 해결해야 할지 잘 모르겠습니다 ㅠㅠ 사진이 좀 많은데... 감사합니다! console에 찍힌 에러 MsgList.js MsgItem.js messages.js fetcher.js
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
DELETE시 params.id 데이터 타입
// onDelete in MsgList.js ... console.log(typeof id) // number const receivedId = await fetcher("delete", `/messages/${id}`, { params: { userId }, }); // delete handler in messages.js const targetIndex = msgs.findIndex((msg) => msg.id === id); console.log(typeof msg.id, typeof id) // number, string 안녕하세요, 강의에서와는 달리 제 코드에서는 DELETE시 처음부터 서버에서 에러가 발생하여 디버깅 해보니 DELETE 핸들러에서 msg.id는 숫자인데 params.id는 문자열로 들어오고 있습니다. 클라이언트 onDelete에서 보내는 id를 typeof 로 출력해보면 타입이 숫자여서 이해가 어렵습니다. 강의와 똑같이 코드 작성한 것 같은데 어디서 비롯된 문제인지 파악이 어려워 질문 남깁니다. 감사합니다.
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
pages > index.js에서 궁금한 로직이 있는데요!
import React from 'react'; import MsgList from '../components/MsgList'; import fetcher from '../fetcher'; export default function Home({ smsgs, users }) { return ( <> <h1>SIMPLE SNS</h1> <MsgList smsgs={smsgs} users={users} /> </> ); } export const getServerSideProps = async () => { const smsgs = await fetcher('get', '/messages'); const users = await fetcher('get', '/users'); return { props: { smsgs, users } }; }; 안녕하세요! 강의를 보다가 pages에 있는 index.js에 궁금한 로직이 있습니다. getServerSideProps 함수에서 return 값이 어떻게 위 Home 리액트 컴포넌트에 props로 넘어갈 수 있는건가요? 궁금합니다!! ㅎㅅㅎ
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
안녕하세요! 환경세팅을 깃허브에서 그대로 따라 쳤는데 이상하게 에러가 발생합니다.
안녕하세요! 에러가 발생해서 여쭤보겠습니다. 환경세팅을 한 후에 yarn run client를 실행하면 아래와 같은 에러코드가 발생하는데 어떠한 이유에서 발생하는지 모르겠습니다... 코드는 그대로 똑같이 치고 강사님의 git파일들과도 비교했는데 에러가 발생합니다 ㅠㅠ PS C:\Users\Desktop\Toy Projects> yarn run client yarn run v1.22.11 $ yarn workspace client start internal/modules/cjs/loader.js:888 throw err; ^ Error: Cannot find module 'C:\Users\諛뺣???AppData\Roaming\npm\node_modules\yarn\bin\yarn.js' at Function.Module._resolveFilename ㅂ(internal/modules/cjs/loader.js:885:15) at Function.Module._load (internal/modules/cjs/loader.js:730:27) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) at internal/main/run_main_module.js:17:47 { code: 'MODULE_NOT_FOUND', requireStack: [] } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-
해결됨풀스택 리액트 토이프로젝트 - 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 이유가 뭘까요 대체...
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
확장 프로그램
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 데이터의 값이 예쁘게 보이지 않아 질문을 올리게 되었습니다. 7 : 22에 교수님의 data는 펼쳐볼수도 있고 예쁘게 정리가 되어 있는데 저의 data는 그냥 나열만 되어 있어서 브라우저에서 보는 확장 프로그램에 대한 문제가 아닌가 라는 생각을 하게 되어서 질문을 하게 되었습니다.
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
TypeError: Cannot read property 'nickname' of undefined
저도 똑같은 에러가 발생하여 MsgItem이나 MsgList 전부 깃허브에 올려주신 코드 그대로 복붙도 해보았는데, 그래도 안됩니다. MacOS 사용중입니다. 왜 안되는지 모르겠습니다..
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
onupdate 매개변수
onupdate 함수의 매개변수를 (id, text) 로 넣어주었더니! 수정 버튼을 클릭 했을 때 내용이 바뀌지 않더라구요 그래서 혹시나해서 매개변수를 (text, id) 로 변경했더니 수정 기능이 제대로 작동 했습니다. 매개변수 순서가 바뀌면 문제가 있는걸까요??
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
yarn add를 했을 때 node_modules가 2개가 한꺼번에 생성이 되었는데 파일 경로가 잘못되어있었습니다!
해결했습니다!
-
해결됨mongoDB 기초부터 실무까지(feat. Node.js)
age가 숫자인지 다시 체크하는 이유
안녕하세요! 좋은 강의 잘 듣고 있습니다. 다름이 아니라 질문이 있어 글을 남깁니다. 이미 User.js에서 age: Number로 설정해두었기 때문에 숫자 외의 것이 들어온다면 catch문에서 제대로 에러 처리가 될 것 같은데, 따로 라우트 내에서 age가 숫자인지 아닌지를 다시 체크하는 이유가 궁금합니다. 감사합니다!
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
에러가 뜨는데 다 고쳐도 원인을 모르겠어요.
깃헙에있는 강사님 소스 내용으로 다 덮어씌어도 똑같은 에러가 뜹니다 ㅠㅠ..
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
id 넘겨주는 부분 bind
아이디를 넘겨주는 곳에서 bind로 id 값을 바인딩 해주면 어떨까요? {isEditing ? <MsgInput mutate={onUpdate.bind(null, id)} text={text} /> : text} <button onClick={startEdit.bind(null, id)}>Fix</button>
-
미해결[개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발
@JsonFilter("UserInfo") 를 사용하면 ResponseEntity<List<User>>를 못쓰나요?
@JsonFilter("UserInfo") 를 사용해서 기존에 개발했던 아래 함수를 호출 하니 에러가 발생합니다. 모델쪽에 JsonFilter를 사용하면 컨트롤러쪽에 MappingJacksonValue는 반듯이 사용해야 하는 건가요? @GetMapping("/users")public ResponseEntity<List<User>> retrieveAllUsers(){
-
해결됨[개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발
API란
안녕하세요 선생님! 웹 백엔드 개발자를 희망하는 대학생입니다. 선생님의 강의를 들으며 api를 설계하고 있는데 궁금증이 생겼습니다. 이전 까지 학습했던 spring 기반 웹 공부는 사용자의 요청에 따라 SSR를 통해 view를 응답해주는 것으로 알고 있는데 api는 uri와 http 메소드를 통해 json으로 응답해주는 것으로 알고 있습니다. 궁금한 점은, 프로그래머가 아닌 일반 사용자가 view 에서가 아닌 api를 통해 json 형식으로 회원가입, 조회를 하지 않는거 같은데 api는 언제 쓰이는지 궁금합니다. 단순 개발자의 편의를 위해? 너무 두서가 없네요ㅠㅠ 아직 api의 감이 안잡혀서 그런거같습니다.. 본질적으로 왜 쓰이는지에 대해서 인지를 하고 학습을 하면 더 유용할 것 같습니다. 감사합니다^^
-
미해결[개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발
spring security
java.lang.NoSuchMethodError: org.springframework.plugin.core.PluginRegistry.of([Lorg/springframework/plugin/core/Plugin;)Lorg/springframework/plugin/core/PluginRegistry; pom.xml에 시큐리티만 추가했을뿐인데 저렇게 에러가 터지네요 현재 스프링부틑 2.4x를 사용중입니다. 스웨거는최신 3.0사용중입니다.
-
미해결[개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발
HATEOAS질문드립니다
UserControll쪽에 최신으로 올려주신 package com.example.restfulwebservice.user;import org.springframework.data.crossstore.ChangeSetPersister;import org.springframework.hateoas.CollectionModel;import org.springframework.hateoas.EntityModel;import org.springframework.hateoas.server.mvc.WebMvcLinkBuilder;import org.springframework.http.ResponseEntity;import org.springframework.web.bind.annotation.*;import org.springframework.web.servlet.support.ServletUriComponentsBuilder;import javax.validation.Valid;import java.net.URI;import java.util.ArrayList;import java.util.List;import static org.springframework.hateoas.server.mvc.WebMvcLinkBuilder.linkTo;import static org.springframework.hateoas.server.mvc.WebMvcLinkBuilder.methodOn;@RestControllerpublic class UserController { private UserDaoService service; //생성자를 통한 의존성 주입 public UserController(UserDaoService service) { this.service = service; } @GetMapping("/users") public List<User> retrieveAllUsers() { return service.findAll(); } // 전체 사용자 목록 @GetMapping("/users2") public ResponseEntity<CollectionModel<EntityModel<User>>> retrieveUserList2() { List<EntityModel<User>> result = new ArrayList<>(); List<User> users = service.findAll(); for (User user : users) { EntityModel entityModel = EntityModel.of(user); entityModel.add(linkTo(methodOn(this.getClass()).retrieveAllUsers()).withSelfRel()); result.add(entityModel); } return ResponseEntity.ok(CollectionModel.of(result, linkTo(methodOn(this.getClass()).retrieveAllUsers()).withSelfRel())); } //우리는 id를 숫자로 해도 서버측에 전달 될 경우에는 -> String으로 된다 //id로 하면 자동으로 원하는 int에 맞게 찾아준다 //HETAOS를 적용하면 개발자의 양은 많아지지만 //내가 개발한 것을 보는 사용자입장에서는 더 많은 정보를 알 수 있다 // 사용자 상세 정보 @GetMapping("/users/{id}") public ResponseEntity<EntityModel<User>> retrieveUser(@PathVariable int id) { User user = service.findOne(id); if (user == null) { throw new UserNotFoundException("id-" + id); } EntityModel entityModel = EntityModel.of(user); WebMvcLinkBuilder linkTo = linkTo(methodOn(this.getClass()).retrieveAllUsers()); entityModel.add(linkTo.withRel("all-users")); return ResponseEntity.ok(entityModel); } //post, put 처럼 데이터 맵핑 할려면 파라미터에 request body로 형식을 적어줘야한다 @PostMapping("/users") public ResponseEntity<User> createUser(@Valid @RequestBody User user) { User saveUser = service.save(user); URI localtion = ServletUriComponentsBuilder.fromCurrentRequest() .path("/{id}") .buildAndExpand(saveUser.getID()) .toUri(); return ResponseEntity.created(localtion).build(); } @DeleteMapping("/users/{id}") public void deleteUser(@PathVariable int id) { User user = service.deleteById( id); if(user == null) { throw new UserNotFoundException(String.format("ID[%s] not found ", id)); } }}사용했는데 에러가 발생했습니다 ㅠㅠorg.springframework.beans.factory.NoUniqueBeanDefinitionException: No qualifying bean of type 'org.springframework.plugin.core.PluginRegistry<org.springframework.hateoas.client.LinkDiscoverer, org.springframework.http.MediaType>' available: expected single matching bean but found 3: relProviderPluginRegistry,linkDiscovererRegistry,entityLinksPluginRegistry
-
미해결[개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발
swagger 연동을 할려고 하는데 에러가 발생합니다
지금 현재 swagger 해보고 있는데 org.springframework.context.ApplicationContextException: Failed to start bean 'documentationPluginsBootstrapper'; nested exception is java.lang.NoClassDefFoundError: javax/validation/constraints/NotBlank 이런 에러가 발생했습니다 구글링 해보니 이거 버전 안맞다는 말이 많더라구요 버전은 강의를 보면서 하고 있어서 최신 버전을 했는데 다른 문제를 모르겠습니다 ㅠㅠ ㅇㄹㅇㄹㅇㄹ
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버
blazor ui업데이트 시기 질문
안녕하세요 binding 실습하다 궁금한 부분이 생겨 질문드립니다. 바인딩이 너무나 편리한 것은 몸소 체감했습니다. 이전에 MVC를 실습했을 땐 Controller 부분에서 View를 반환함으로서 View의 업데이트가 일어났는데 Blazor는 명시적으로 반환값이 없으니 언제 UI의 업데이트가 발생하는지 궁금합니다. 아래 코드처럼 OnInitialized() AddUser() KickUser() 등 override함수와 사용자 정의 함수가 호출된 다음 종료되는 시점에 자동적으로 UI 업데이트가 이뤄지는 건가요? @code { List<UserData> _users = new List<UserData>(); string _inputName; protected override void OnInitialized() { _users.Add(new UserData() { Name = "MINGU" }); _users.Add(new UserData() { Name = "FAKER" }); _users.Add(new UserData() { Name = "DEFT" }); } void AddUser() { _users.Add(new UserData() { Name = _inputName }); _inputName = null; } void KickUser(UserData userData) { _users.Remove(userData); } }