inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

섹션 31 댓글 기능 구현 과제 관련 질문

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 섹션 31 댓글 기능 구현 과제 중 궁금한 점이 있어 질문 남깁니다 댓글 리스트의 수정 아이콘 클릭 시 사진과 같은 화면이 나오도록 했고, 댓글 등록하기 presenter component를 재사용 했습니다 댓글 리스트 presenter 파일입니다 export default function CommentListUI(props) { return ( <S.Wrapper> {props.data?.fetchBoardComments.map((item) => ( <S.CommentListWrapper key={item._id}> {props.isEdit && props.commentId === item._id ? ( <CommentWriteUI></CommentWriteUI> ) : ( <S.Comment_Container> <S.profile_icon src="/02/profile_icon.png"></S.profile_icon> <S.Content_container> <S.Name_Star_container> <S.Text style={{ fontWeight: "600" }}>{item.writer}</S.Text> <S.ReviewStar_container style={{ marginLeft: "16px" }}> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> </S.ReviewStar_container> </S.Name_Star_container> <S.Text style={{ marginTop: "-15px", fontWeight: "500" }}> {item.contents} </S.Text> <S.Text style={{ fontSize: "12px", fontWeight: "400", color: "#BDBDBD", }} > {getDate(item.createdAt)} </S.Text> </S.Content_container> <S.Icon_container> <S.Icon style={{ backgroundImage: `url("/createComment.png")` }} onClick={() => props.onClickTEST(item._id)} ></S.Icon> <S.Icon style={{ backgroundImage: `url("/clear.png")` }} onClick={() => props.onClickDelete(item._id)} ></S.Icon> </S.Icon_container> </S.Comment_Container> )} </S.CommentListWrapper> ))} </S.Wrapper> ); } 삼항연산자를 사용해 나오는 화면을 다르게 했습니다 isEdit 변수는 수정하기 아이콘 클릭 시 true로 바뀌고, 삼항연산자 조건에 isEdit 변수만 사용하니 수정 아이콘을 클릭하지 않은 다른 댓글 리스트가 사라지면서 재사용한 댓글 등록 presenter 파일만 화면에 나와서 조건은 위와 같이 작성했습니다 여기서 문제는 수정 아이콘을 클릭해 나오는 댓글 등록 창은 container 파일에 작성한 함수가 작동하지 않는 것입니다 댓글 리스트 container 파일입니다 export default function CommentList() { const { data } = useQuery(FETCH_COMMENTS); const [deleteBoardComment] = useMutation(DELETE_COMMENTS); const onClickDelete = async (item) => { const pw = prompt("비밀번호를 입력해주세요."); try { await deleteBoardComment({ variables: { pw: pw, boardCommentId: item, }, refetchQueries: [{ query: FETCH_COMMENTS }], }); alert("삭제되었습니다."); } catch (error) { alert(error.message); } }; // 수정하기 아이콘 클릭 시 화면 변화 const [isEdit, setIsEdit] = useState(false); const [commentId, setCommentId] = useState(); const onClickTEST = (item) => { setIsEdit(true); setCommentId(item); }; // console.log(commentId); return ( <CommentListUI data={data} onClickDelete={onClickDelete} onClickTEST={onClickTEST} isEdit={isEdit} commentId={commentId} ></CommentListUI> ); } 댓글 등록 container 파일입니다 const [updateBoardComment] = useMutation(UPDATE_BOARD_COMMENT); const onClickUpdate = () => { // updateBoardComment({ // variables: { // updateBoardCommentInput: { // contents: contents, // rating: 0 // }, // password: pw, // boardCommentId: // } // }) console.log("Test"); }; return ( <> <CommentWriteUI onChangeWriter={onChangeWriter} onChangePw={onChangePw} onChangeContents={onChangeContents} onClickUpdate={onClickUpdate} ></CommentWriteUI> </> ); } onClickUpdate 함수는 댓글 작성 presenter 파일의 등록하기 버튼에 연결되어 있습니다 상세 페이지 로딩 시 나오는 댓글 등록창은 버튼 클릭 시 콘솔이 제대로 나오는데 댓글 리스트 수정 아이콘을 눌러 나오는 댓글 등록창에서는 버튼을 눌러도 콘솔 자체가 나오지 않습니다 댓글 과제 가이드를 확인해서 어떻게 수정하면 좋을지는 알았지만, 궁금한 점이 해소되지 않네요 궁금한 점은 삼항연산자, map 등 기능의 속성을 제대로 알지 못한 채 사용한 문제인지 코드 자체를 잘못 작성한 것인지 추가로 rating(별점) 데이터 활용법에 대한 힌트를 얻고 싶습니다 rating 값 1 = 별 1개 인가요? rating 숫자 데이터가 별과 어떻게 연결되는지 잘 모르겠습니다 부족한 점이 많아 질문이 너무 길어졌네요 항상 감사합니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
zero.1.0.one.xx 댓글 2 좋아요 0 조회수 613

.gitignore 에 포함할 파일

해결됨

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

gradlew gradlew.bat application.properties 파일들이 깃헙에 올라가도 상관이 없나요? 기본적으로 지금 .gitignore에 적혀있는 파일들 제외하고는 다 깃헙에 올라가도 괜찮은걸까요? HELP.md .gradle build/ !gradle/wrapper/gradle-wrapper.jar !**/src/main/**/build/ !**/src/test/**/build/ ### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans .sts4-cache bin/ !**/src/main/**/bin/ !**/src/test/**/bin/ ### IntelliJ IDEA ### .idea *.iws *.iml *.ipr out/ !**/src/main/**/out/ !**/src/test/**/out/ ### NetBeans ### /nbproject/private/ /nbbuild/ /dist/ /nbdist/ /.nb-gradle/ ### VS Code ### .vscode/

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
alice 댓글 1 좋아요 0 조회수 1036

Cannot find module 'msw/node' from 'src/commons/mocks/index.js'

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요. test를 하던 중 오류가 발생하여 문의드립니다. 지금 현재 코드를 import { setupServer } from "msw/node"; import { apis } from "./apis"; export const server = setupServer(...apis); 위에처럼 입력해 놓은 상태입니다. 하지만 테스트 실행 시 아래와 같이 발생합니다. Cannot find module 'msw/node' from 'src/commons/mocks/index.js' Require stack: src/commons/mocks/index.js jest.setup.js > 1 | import { setupServer } from "msw/node"; | ^ 2 | import { apis } from "./apis"; 추가적으로 지금 jest관련 페이지에서 Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\commons\mocks\index.js` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to include this file - Create a new TSConfig that includes this file and include it in your parserOptions.project See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run-- 위와 같은 오류가 발생합니다. 해결 부탁드립니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
dlwjdgus3217 댓글 2 좋아요 0 조회수 1279

Spring Initializr 스프링 버전

해결됨

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

강의에서 Spring Boot 3.0.6 버전 선택하라고 하시는데 지금 Spring Initializr 사이트에 3.0.6 버전이 없네요. 어떤 걸 선택하면 될까요?

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
alice 댓글 1 좋아요 0 조회수 283

강의내용 따라가고있는데 에러가 발생되었습니다. 혹시 몰라 깃헙 코드도 가져와서 해봤는데 동일한 오류이고 js:818에 대한 레퍼런스도 부족해서 문의 남깁니다 ㅠㅠ

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

imsang-gyu@limsanggyu-MacBookPro nodejs-docker-app % docker run -p 5000:8080 limsanggyu/nodejs internal/modules/cjs/loader.js:818 throw err; ^ Error: Cannot find module '/nodemon' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15) at Function.Module._load (internal/modules/cjs/loader.js:667:27) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) at internal/main/run_main_module.js:17:47 { code: 'MODULE_NOT_FOUND', requireStack: [] }

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
임상규 댓글 1 좋아요 0 조회수 354

질문

해결됨

포트폴리오 초간단 배포하기

안녕하세요 자바는 사용해본적은 없어서 문의드립니다. 저는 파이썬기반 flask를 사용중인데, 리눅스 서버에 어떻게 올려야하나요? flask 는 빌드가 필요가 없는것 같은데요, 1, 프로그램 을 리눅스서버에 올리면 되나요? 일단 프로그램을 올린후 , nginx 웹서버와 상관없이 작동이 되는 건가요?

  • linux
  • github
  • nginx
고규형 댓글 2 좋아요 1 조회수 459

2-4 수정중 오류

미해결

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

안녕하세요 쥬쥬님 강의 너무 잘 듣고 있습니다 제가 따라가는건 잘했는데 지금 AGE 부분이 프라이머리 키로 지정이 되어있는 것 같은데 어디서 부터 잘못된건지 모르겠습니다...

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
Lian 댓글 1 좋아요 0 조회수 342

강의에 사용하신 두 github 계정 다 이메일이 같으신가요?

해결됨

팀 개발을 위한 Git, GitHub 입문

이번 강의 들으면서 궁금한 게 있는데요. 강의에 아래의 두 github 계정(느낌상 하나는 주계정, 또 하나는 부계정) 쓰시는 걸로 아는데, 이 두 github 계정 다 이메일 같으신가요? 예전에는 어땠는지는 몰라도 요즘은 이메일 하나당 하나의 github 계정만 만들 수 있어서 말입니다. 보니까 아래의 두 github 계정 다 한참 전에 만드신 것 같은데, 예전에는 하나의 이메일로 여러 개의 github 계정을 만들 수 있었나요? 주계정: https://github.com/milooy 부계정: https://github.com/jayjinjay

  • git
  • github
  • 버전관리시스템
Jiho Yoon 댓글 2 좋아요 0 조회수 583

슬랙 초대 부탁드립니다.

해결됨

코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 강의 잘 듣고 있습니다. slack 초대 부탁드립니다. dtc3229@gmail.com

  • git
  • github
  • 버전관리시스템
임세현 댓글 1 좋아요 1 조회수 326

react, redux, node.js 추천서

미해결

안녕하세요 react, redux, node.js를 활용하여 웹 앱 개발을 하려고 하는데 react의 경우 class형과 함수형 두 가지의 타입으로 개발이 되고 있더군요 그래서 함수형 react의 참고서를 찾아봤는데 참고할만한 교재를 선택하기에 어려움이 있어서 질문 드립니다. 혹시 추천해주실만한 참고서가 있을까요?

  • react
  • redux
  • node.js
ymca1036 댓글 1 좋아요 0 조회수 343

안녕하세요 수업자료 부탁드립니다.

해결됨

팀 개발을 위한 Git, GitHub 입문

안녕하세요 강의 잘보았습니다. 복습을 위해 강의자료 요청드립니다 smin58810@gmail.com 좋은 강의 감사합니다 ~

  • git
  • github
  • 버전관리시스템
김민식 댓글 2 좋아요 0 조회수 395

1-6 생성자 오류

미해결

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

TestRequestBody 부분을 똑같이 작성했는데 No Creators, like default construct, exist): cannot deserialize from Object value (no delegate- or property-based Creator. 라고 오류가 생성돼서 아래처럼 코드를 바꿨더니 실행이되는데 이유를 모르겠습니다 public static class TestRequestBody { String name; Integer age; public void setName(String name) { this.name = name; } public void setAge(Integer age) { this.age = age; } public TestRequestBody () {} //Request Body 방식을 사용하기 위해서는 생성자를 꼭 만들어야한다 // public TestRequestBody(String name, Integer age) { // this.name = name; // this.age = age; // } }

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
경현 댓글 2 좋아요 1 조회수 274

[input 속성 및 state 관리] 사용자 입력 처리하기

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. 사용자 입력 처리하기 강의 관련 질문입니다. input 태그를 통해 사용자 입력을 받고, 상태 관리하면, 상태에 사용자의 입력이 반영되는 게 한 단계씩 늦는 것 같습니다. (그 이유가 useState가 비동기적으로 처리된다고 들은적이 있는 것 같은데, 정확히 이해가 가지 않아서 질문드립니다.) 아래 코드의 handleOnChange함수에서, Q1) e.target.name, e.target.value은 제깍제깍 실시간으로 반영이 되는데, input state는 한 단계 늦게 반영이 됩니다. 이런 현상이 발생하는 이유는 무엇이고, 이건 개발하는데 문제가 되지 않는 이유는 뭔지? 가 궁금합니다! import { useState } from 'react'; const DiaryEditor = () => { const [input, setInput] = useState({ author: '', content: '', emotion: 1, }); const handleOnChange = (e) => { console.log(e.target.name); console.log(e.target.value); setInput({ ...input, [e.target.name]: e.target.value }); console.log(input); }; const handleSubmit = () => { console.log(input); alert('오늘의 일기가 저장되었습니다!'); }; return ( <div className='DiaryEditor'> <h2>오늘의 일기</h2> <div> <input name='author' value={input.author} onChange={handleOnChange} /> <p>{input.author}</p> </div> <div> <textarea value={input.content} name='content' onChange={handleOnChange} /> <p>{input.content}</p> </div> <div> <span>감정 지수 : </span> <select onChange={handleOnChange} name='emotion' value={input.emotion} > <option value={1}>1</option> <option>2</option> <option>3</option> <option>4</option> <option value={5}>5</option> </select> </div> <div> <button onClick={handleSubmit}>저장하기</button> </div> </div> ); }; export default DiaryEditor; Q2) 위처럼 input이란 state는 한단계씩 늦게 반영이 되는데, select태그의 value 속성을 주는 목적은 무엇인가요?? 인풋의 value 속성은 실시간으로 인풋의 값과 상태를 동기화해주는 목적으로 사용한다고 생각했는데, state가 곧바로 변하지 않는거면, 이 인풋의 value 속성은 무용지물인 것 아닌가라는 생각이 들어 질문드립니다. <select onChange={handleOnChange} name='emotion' value={input.emotion} > Q3) useState의 초기값은 반드시 빈문자열등으로 인자를 전달하는 게 나은가요? 아무 인자도 전달하지 않으면 어떤 잠재적인 에러 발생 가능성이 있는건가요?

  • javascript
  • react
moon 댓글 1 좋아요 0 조회수 618

알림이 1초마다 두 개씩 뜹니다.

해결됨

처음 만난 리액트(React)

분명히 코드를 그대로 따라 쳤는데 1초에 두 번씩 알림이 나오는 경우도 존재하나요? Warning: Each child in a list should have a unique "key" prop. 오류도 떴습니다. 각각 notification.jsx, notificationList.jsx 코드입니다 import React from "react" const styles = { wrapper: { margin: 8, padding: 8, display: 'flex', flexDirection: 'row', border: '1px solid grey', borderRadius: 16 }, messageText: { color: 'black', fontSize: 16 } } class Notification extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ) } } export default Notification import React from 'react' import Notification from './notification' const reservedNotifications = [ { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, ] var timer class NotificationList extends React.Component { constructor(props) { super(props) this.state = { notifications: [] } } componentDidMount() { const { notifications } = this.state timer = setInterval(() => { if(notifications.length < reservedNotifications.length) { const index = notifications.length notifications.push(reservedNotifications[index]) this.setState({ notifications: notifications }) } else { clearInterval(timer) } }, 1000) } render() { return ( <div> {this.state.notifications.map(v => { return <Notification message={v.message}/> })} </div> ) } } export default NotificationList

  • HTML/CSS
  • javascript
  • react
이서현 댓글 1 좋아요 4 조회수 1154

2-3 진행중 에러

미해결

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

안녕하세요 강의 잘 듣고 있습니다. 2-3 DELETE 과정 중 500에러가 발생하는 데 이유가 뭘까요?

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
Lian 댓글 1 좋아요 0 조회수 298

useTransition 질문입니다!

미해결

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

강의의 useTransition을 사용한 부분에서 input 태그의 value를 deferedFilter로 설정하고 handleChange 내의 setFilter를 제거해도 문제가 없나요? 아니면 input에서 다루는 value와 Words를 렌더링하기 위한 filter value를 따로 관리해야 하나요? 이렇게 해도 문제가 없는지 궁금합니다!

  • react
김도현 댓글 2 좋아요 1 조회수 425

Instance has not sent any data since launch.

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

Instance has not sent any data since launch. -> 이 에러만 뜨고있어요 ㅠㅠ 왜 EC2를 못킬까요..?

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
meyou1218 댓글 1 좋아요 0 조회수 835

Elastic Beanstalk에 No Data로 나옵니다..

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

traivs에서는 아래와 같이 빌드에 성공했어요. 하지만 No Data라고 뜨는데 어떻게 해야할까요..

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
meyou1218 댓글 1 좋아요 0 조회수 1012

수업자료 요청

해결됨

팀 개발을 위한 Git, GitHub 입문

수업자료 요청 kimjongsae@gmail.com ppt 등....

  • git
  • github
  • 버전관리시스템
김종세 댓글 3 좋아요 -1 조회수 382

인기 태그

인프런 TOP Writers

주간 인기글