묻고 답해요

섹션 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

WSL 설치

미해결

Airflow 마스터 클래스

WSL 설치시 하위시스템이 이미 설치되어있습니다. 라고 나오는데 Ubuntu 22.04.1 LTS는 없네요. 이미지 다운 어떻게 받아서 설치하나요?

• python
• 데이터-엔지니어링
• airflow

식별 관계랑 비식별 관계

해결됨

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

안녕하세요 강의 끝까지 잘봤습니다!!! 강의 시청 후 포트폴리오용 프로젝트 설계 중에 식별 관계에 대해 의문이 생겨서 질문합니다! 우선 식별 관계로 구성 시 자식 테이블에 데이터를 넣기 전에 부모 테이블에 데이터가 필수적으로 존재해야 한다고 알고 있습니다. 이는 개발자가 실수로 데이터를 입력하는 것을 막아줌으로써 데이터 정합성을 DB에서도 체크할 수 있지만, 만약 요구사항이 변경된다면 테이블의 데이터와 구조를 모두 변경해야하는 불상사가 발생할 수 있다고 알고 있습니다. 그렇다면 굳이 식별 관계로 설정할 필요가 있나요?? 그냥 전부 비식별 관계로 설정하면 안될까요? 포트폴리오에 올릴 프로젝트를 만드는 중이라 정석대로 식별 관계로 설정해야 하나 싶은데, 아직 뭐가 뭔지 잘 모르는 상태에서 괜히 복잡하게 식별 관계로 설정하는게 맞는건가 잘 모르겠어서요ㅜㅜ

• javascript
• node.js
• docker
• rest-api
• nestjs

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

시트 이름 지정하려는데 title 명령이 안 먹혀요

미해결

파이썬 무료 강의 (활용편4) - 업무자동화 (RPA)

기본 명령어인 것 같은데 어째서 title만 어트리뷰트가 없다고 에러 뜰까요? 프로그램을 껐다 켜봐도 이렇습니다.. 파이선 3.8.6 버전 쓰고 있고 비주얼 스튜디오 코드는 1.83.1 버전 쓰고 있는 것 같네요

• rpa
• 파이썬
• openpyxl
• python
• python3

react, redux, node.js 추천서

미해결

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

• react
• redux
• node.js

apply axis 관련 질문

해결됨

[리뉴얼] 처음하는 파이썬 데이터 분석 (쉽게! 전처리, pandas, 시각화 전과정 익히기) [데이터분석/과학 Part1]

섹션7-2 5분 2초 apply부분에 apply(func, axis = 0)으로 하면 왜 '영어' 행이 하나 더 생기나요?

• python
• pandas

채팅방을 만든 브라우저에서 모두 나갔을 경우 문의드립니다.

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

채팅방에 모두 나가기를 했는데요, 이상하게 채팅방을 만든 브라우저에서는 방이 바로 없어지지않고, 새로고침을 해야 제거가되는데 이러면 안되는건가요..?

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

mac 환경에서 실습할 경우

해결됨

Airflow 마스터 클래스

안녕하세요 mac 환경에서 강의를 수강하려고 합니다. 이러한 경우 wsl 설치 없이 다음 강의로 넘어가면 될까요??

• python
• 데이터-엔지니어링
• airflow

theme 적용이 되지 않습니다.

해결됨

실전 프로젝트로 배우는 데이터 앱 만들기 with Python & Streamlit

theme 적용시, 강사님께서 말씀해주신 것처럼 작업 폴더에 .streamlit 폴더를 만들고, 그 안에 config.toml 파일을 만들어 테마 적용을 했지만, 아래의 문구가 발생하며, 태마가 적용이 되지 않습니다. The page that you have requested does not seem to exist. Running the app's main page. 어떤 이유 인지 알려주세요.

• python
• streamlit

완전탐색 1090번 시간초과

미해결

2주만에 통과하는 알고리즘 코딩테스트 (2024년)

예제 문제는 잘 풀리는데 백준에 제출하니까 시간초과가 뜹니다 강의 자료랑 큰 차이는 없어 보이는데 어느 부분을 고쳐야 시간 안에 계산 가능할까요? #include <iostream> #include <cstdlib> using namespace std; int main(int argc, char **argv) { int n; int minX, minY, maxX, maxY; cin >> n; int arr[n][2]; for(int i=0; i<n; i++){ cin >> arr[i][0] >> arr[i][1]; } minX = arr[0][0]; maxX = arr[0][0]; minY = arr[0][1]; maxY = arr[0][1]; for(int i=1; i<n; i++){ if(arr[i][0]>maxX){ maxX = arr[i][0]; } else if(arr[i][0]<minX){ minX = arr[i][0]; } if(arr[i][1]>maxY){ maxY = arr[i][1]; } else if(arr[i][1]<minY){ minY = arr[i][1]; } } int arr_answer[n]; int arr_dis[n]; for(int i=minY; i<=maxY; i++){ for(int j=minX; j<= maxX; j++){ for(int l=0; l<n; l++){ int subY= 0, subX=0; subY = i-arr[l][1]; subX = j-arr[l][0]; arr_dis[l] = abs(subX) + abs(subY); } int sum = 0; for(int k=0; k<n; k++){ sum+=arr_dis[k]; if(i==minY && j ==minX){ arr_answer[k] =sum; } else if(sum < arr_answer[k]){ arr_answer[k] = sum; } } } } for(int i=0; i<n; i++){ cout << arr_answer[i] << " "; } return 0; }

• python
• 코딩-테스트
• 알고리즘

동시성 부분 추가 공부하면서 헷갈리는 부분 질문 드립니다.

해결됨

넓고 얕게 외워서 컴공 전공자 되기

안녕하세요 선생님! 동시성과 병렬성 관련해 기초가 약해 해당 강의를 들으면서 OS 부족한 부분을 많이 알게되어 도움이 많이되고 있습니다. 다름이 아니라 해당 강좌 범위는 벗어나지만.. 구글링해도 명확하게 해결되지 않아 질문 드립니다. 동시성을 구현하는 방법으로 멀티쓰레드 나 코루틴 방법으로 구현을 할 수있고 멀티쓰레드 방법에서 쓰레드 전환 간 context switch가 많기 때문에 오버헤드도 많아 Coroutine 방법을 많이 쓰고 또한 유저가 이벤트루프(스케쥴링)을 app에서 관리한다는 측면에서 디버그가 유용하다 정도로 이해하고 있습니다. 많은 블로그에서 멀티쓰레드보다 코루틴을 소개하면서 동시성 구현시 코루틴을 더 상위(혹은 좋은) 방법으로 서술이 많이 되어 있더라구요. I/O작업이 빈번할 경우 코루틴이 더 유리하다는 이해가 됩니다. 싱글스레드 + async 싱글스레드 멀티스레드 + async 멀티스레드 2개의 구현방법이 레이어가 다르다(thread와 task)보니 4가지 경우의 수를 적용할 수 있는데 실제 동시성을 적용해야되는 상황이면 어떻게 판단하고 최적의 구현방법(4가지 중 선택)을 적용할 수 있을까요? (파이썬 스택을 쓰고 있으며 GIL도 이해하고 있는 상태입니다.) 다시한번 해당 강의와 조금 벗어난 질문드려 죄송합니다. ( _ _ )

• python
• 동시성
• 병렬성

이거 소스코드 어디서 다운 받아요?

미해결

지금 당장 NodeJS 백엔드 개발 [사주 만세력]

소스코드 대체 어디서 다운 받나요??

• node.js
• jwt

크롤링 기사 기간 설정

해결됨

[신규 개정판] 이것이 진짜 크롤링이다 - 실전편 (인공지능 수익화)

안녕하세요 뉴스크롤링에서 크롤링 하고자 하는 뉴스의 기간을 정해주려면 response = requests.get(" https://search.naver.com/search.naver?where=news&sm=tab_jum&query=검색어 ") 위 코드의 " " 안에 뉴스기간을 옵션으로 설정하여 검색한 페이지의 URL을 긁어서 넣어주면 되는걸지요? 감사합니다.

• python
• 웹-크롤링

몽구스 쿼리 remove 에러 문제

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

Room.remove 이 부분에서 계속해서 TypeError: Room.remove is not a function 발생하길래 docs를 살펴봤는데 deleteMany나 deleteOne만 있더라구요! 현재 코드를 deleteMany로 수정해서 잘 동작이 됩니다! 그런데 remove가 deleteOne이나 deleteMany로 분리된것은 꽤 오래전 일이라서 docs를 봐도 왜 나는 remove가 안되는데 불과 몇개월 전에 코드에서는 remove가 잘 돌아간건지 궁금해서 질문 남깁니다!! ㅜㅜ

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

인자에 객체 값을 넣는 이유

해결됨

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

인자에 객체 값을 넣는 이유가 안전하기 때문이라고 하셨는데 정확히 어떤 부분이 안전한지 알려주실 수 있나요?

• javascript
• node.js
• express
• docker
• tdd
• rest-api
• nestjs

에러 발생 문의드립니다. - > 확인 공유

미해결

Node.js 노드 빠르게 훑어보기: 서버부터 DB까지

강의 감사드립니다~~~ main.html 에서 에러가 발생하는데요 에러메시지는 다음과 같습니다. Template render error: (C:\Users\Notebook\Desktop\Node_Study\my_app\views\main.html) [Line 15, Column 36] unexpected token: }} at Object._prettifyError (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\lib.js:32:11) at Template.render (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:442:21) at C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:301:27 at createTemplate (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:254:9) at handle (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:265:11) at C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:276:9 at next (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\lib.js:258:7) at Object.asyncIter (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\lib.js:263:3) at Environment.getTemplate (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:259:9) at Environment.render (C:\Users\Notebook\Desktop\Node_Study\my_app\node_modules\nunjucks\src\environment.js:295:10) 수업중 제가 놓친 부분이 없다면 main.html에서 마지막 작성 부분은 다음과 같은데요, 이것이 맞는지요? 이후로 main.html이 언급되는 부분이 강의에 없어서요~ 확인요청드립니다~ 강의 감사드립니다~~~ ====================== 마지막 강의에서 main.html이 보이고 거기에서 수정가능합니다. {% for writing in list %} <tr> <td><a href="/ detail/{{writing.id} }" class="btn">{{writing.title}}</a></td>

• node.js
• mongodb
• express

python pandas dataframe을 엑셀 vlookup처럼 활용하고 싶은데 쉽지 않습니다. 도와주세요

미해결

하고 싶은 것 일부 주문이 서비스 유형: 픽업임에도 배달메뉴코드로 생성되어 이를 찾고 싶습니다. (배달메뉴와 픽업메뉴 코드는 서로 다름) 엑셀 vookup을 사용해서 상품코드를 배달 메뉴 테이블에서 검색하고, 검색되지 않으면 오주문으로 판단하는 코드를 구현했습니다. 같은 프로그램을 파이썬을 통해 구현해보고 싶은데, 다른 dataframe에 없는 값을 찾아 행을 추가하는 과정이 어려워 조언을 구하고 싶습니다. 파이썬 코드 df_pickup = 픽업 주문내역 데이터 프레임 delivery_menu_code = df_delivery_menu["상품코드"] df_misorder = pd.DataFrame() # 픽업 주문내역에서 상품코드를 꺼내 해당 상품코드가 배달 메뉴 코드에 포함되어 있는지 확인 # 만약에 코드가 없으면 해당 row를 df_misorder에 추가 for idx, row in df_pickup.iterrows(): misorder = df_delivery_menu[delivery_menu_code.str.contains(row["상품코드"], na = False)] if len(misorder) != 0: df_misorder.concat(row) else: pass # 어떻게 추가해도 계속 0개로 나와서, 도와주시면 감사드리겠습니다! len(df_misorder)

• python
• pandas
• excel
• vlookup

자동 생성되는 괄호 넘어가는 단축키

미해결

프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)

중괄호 등을 통해서 코드를 작성할 때 중괄호가 [] 이렇게 두개 자동으로 생성되는데요. 이외에도 '' 등 두개씩 자동으로 만들어줘서 코드를 작성하는데는 편리한데 'LEE' 등 코드를 쓰고 EE에서 '를 넘어 가기 위해 방향키를 눌러줘야 하는 불편함이 있습니다. 혹시 빠르게 작성하기 위해 단투키 같은게 별도로 있을지 문의드립니다

• python

print(soup.a) 태그 값이 None으로 나옵니다.

미해결

파이썬 무료 강의 (활용편3) - 웹 스크래핑 (5시간)

태그 관련 내용이 반환이 안 되는데 어떻게 하면 될까요?

• python
• 웹-크롤링
• selenium
• 웹-스크래핑