4-3 아코디언 컴포넌트 만들기 실습 코드를 찾을 수 가없습니다 . 4-2코드 링크가 4-3 페이지에 들어있던데 수정부탁 드릴게여!

저는 왜이렇게 나오는걸까요...코드 여러번 재작성 해도 저렇게 나옵니다..ㅠ background-color 넣었을땐 정상적으로 나옵니다..왜 저러는건가요..?그리구 .outerbox 코드에 "outerbox": Unknown word. 가 발생합니다.

네이버 영화 평점 axios cheerio 를 이용하여 현재 기준으로 해보려고 하는데... 평점 출력이 안됩니다.개발자 도구 보고, 맞게 태그 지정을 한거 같은데요 ㅠㅠ

 밑에 질문글이 있어서 똑같이 해봤는데 계속 안되네요 ㅠ..ㅠ db접속까지는 되는데 backend에서 접속이 계속 안됩니다... 살려주세요

강의 내용과 거리가 먼 질문이지만 제가 채팅 프로젝트를 만드는데 현재 ec2에서 docker로 배포를 하면서 진행 중인데 배포시 힙 메모리 부족으로 서버가 열리지 않아 기존 t2.micro에서 t3.small로 인스턴스 유형을 변경하니 서버가 정상적으로 실행이 됩니다. 다음은 스왑을 적용한 t2.micro와 t3.small 인스턴스에서의 램 상황입니다.보시다시피 기존 t2.micro일 때 는 swap메모리의 크기와 상관없이 거의 사용하지 않는데 swap메모리는 hdd에서 끌어다 쓰다보니 swap메모리를 사용하는데 제한이 있는건가요??다음은 힙메모리 초과로 서버가 열리지 않을 때 입니다.<--- Last few GCs ---> [18:0x7f6622d90300] 21689 ms: Scavenge (reduce) 481.9 (490.6) -> 481.5 (491.1) MB, 15.1 / 0.0 ms (average mu = 0.143, current mu = 0.005) allocation failure; [18:0x7f6622d90300] 22102 ms: Mark-sweep (reduce) 482.2 (491.1) -> 481.9 (491.9) MB, 349.1 / 0.0 ms (+ 121.4 ms in 21 steps since start of marking, biggest step 21.3 ms, walltime since start of marking 503 ms) (average mu = 0.231, current mu = 0.312) <--- JS stacktrace ---> FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory npm ERR! path /home/app npm ERR! command failed npm ERR! signal SIGABRT npm ERR! command sh -c nest start --watch npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2023-07-07T09_03_12_827Z-debug-0.log

안녕하세요 그랩님! 바로 이전 질문에서 저와 동일한 현상으로 질문 주신것에 답변(하기 스크린샷)대로 변경을 해보았습니다.그랬더니 이번엔 그랩마켓 내의 '상품업로드'를 통해 등록한 키보드2 이미지만 뜨고 이전에 등록한 제품들은 깨져서 보이지 않아 이럴경우엔 어떻게 해결해야 할지 문의드립니다!

안녕하세요 드디어 강의 완강했습니다!!^^ 뒷부분 부터는 퀴즈가 없어서 비교적 빨리 수강했네요.강의 후에 해봐야 할 것들을 생각해보았는데 조언을 듣고 싶어서 질문남깁니다.일단은 지금 것 했던 "나만의 ~~프로젝트"를 리팩토링(성능/안정성/가독성/로직개선)하고 api기능추가, 테스트코드 작성, DB쿼리성능개선등을 해보고자합니다.전부 다 하려면 시간이 오래걸리겠지만(ㅠ) 마지막에 취업준비강의에서 말씀하신 3년차개발자로 생각되기 위해선 해야할게 많은 것 같습니다..ㅎㅎ(3년차 같은 신입을 뽑는다니!!ㅠㅠ)그래서 일단 목표는 실제 현업에서 하는 것처럼 코드를 작성해보고자 하는데요, 막상 하려니 좀 막막하네요.질문은:지금 제 생각은 현업에서 쓰는 좋은 코드를 보고 어떤 식으로 설계했는지 테스트코드는 어떻게 작성했는지 등등 참고하고 분석하고 공부해서 제 나름대로 프로젝트를 리팩토링해보고 싶은 생각입니다. 그게 가장 실력도 늘 것 같구요. 그래서 혹시 관련 코드나 책이나 자료등이 있으면 추천해주시면 감사하겠습니다.아! 그리고 백엔드 심화강의에서 마이크로큐와 await의 관계를 굉장히 감명깊게 들었습니다. 비동기과정이 정말 헷갈렸는데 속이 시원해졌습니다.ㅎㅎ 혹시 이런 자바스크립트 원리나 cs관련내용도 추천해주실만한 책이나 자료 있으면 알려주시면 감사하겠습니다.일단 방향은 이렇게 잡았는데 조언해주시면 참고하겠습니다!!끝으로 제가 지금것 들었던 개발강의중 가장 자세하고 친절하고 이해도 잘되고 재밌는 강의였습니다!!퀴즈 할때나 버그나 에러날때 힘들긴 했지만, 그래도 개발이 점점 더 재밌어지고 더 잘하고 싶네요. 궁금한 것있으면 또 질문해도 되겠죠?^^;;; 감사합니다!!  

import { ReactNode } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; interface ButtonProps { children?: ReactNode; onClick: (e: any) => void; type?: "link" | "button"; url?: string; } const StyledButton = styled.button<ButtonProps>` outline: none; border: none; display: flex; align-items: center; justify-content: center; `; function Button({ children, onClick, type = "button", url }: ButtonProps) { const RealButton = <StyledButton onClick={onClick}>{children}</StyledButton>; const RealLink = ( <StyledButton onClick={() => {}}> <Link to={url!}>{children}</Link> </StyledButton> ); return <div></div>; } export default Button;강의를 보고 진행하던중에 RealLink에서 타입오류나 가서 확인을 해보니button onClick이 없으면 styled componenet에서 에러를 내는 것 같습니다. 링크로 쓰면 onClick이벤트를 전달해주면 안될 것 같은데 ()=>{} 이처럼 의미없는 함수를 넘겨주면 될까요

s3를 퍼블릭으로 두는것은 좋지 않다고 생각하는데,CDN 주소로 접근하는거면 s3는 private으로 하고 사용할수 있도록 설정이 가능할까요?

안녕하세요 그랩님저번 강의부터 jsx문법으로 상품상세 페이지 아이디 반영하는 부분 부터 문제가 발생하였는데 당시에는 그냥 + index 형식으로 진행해서 문제가 없었는데 계속 Link to부분 이문제가 발생하고있습니다.아래 코드 올려드립니다. 다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!

안녕하세요 그랩님!강의 4:40~4:50 경 axios의 주소를 포스트맨 ulr에서 저희가 구축한 서버 url인 http://localhost:8080/products 로 변경하고 보니 아래와 같이 상품목록이 보이지 않아 개발자 도구를 켜서 확인해보니 에러발생 : AxiosError /Failed to load resource: net::ERR_CONNECTION_REFUSED 라고 뜨고 있는 상황입니다.. >> 이부분은 해결 되었습니다!추가로 잘 작동하였던 서버도 하기와 같이 GET http://localhost:8080/ 404 (Not Found) 오류가 뜨고 있는데 구글링으로 검색해 보아도 문제 해결이 되지 않아 문의글 남겨드립니다..ㅠㅡㅜhttp://localhost:8080/products 경로로 접근시엔 화면이 잘 뜨는데 왜 8080까지의 메인화면에서는 'cannot get' 이란 오류가 뜨는지 알 수 있을까요? 

학습 자료(노션)에 포트폴리오 리뷰가 안 보입니다.

aws-sdk는 따로 설치를 안해도 괜찮도 하셔서 설치를 안했습니다. 하지만 Cannot find module 'aws-sdk' 에러가 발생합니다. 

안녕하세요..강의 자료나 강의 때 사용하는 소스는 어디서 받을 수 있을까요?아무리 찾아봐도 없네요.알려주세요 ^^감사합니다.

항상 좋은 강의 감사합니다.다름이 아니라 혹시 강의 들으면서 같이 볼만한 책이나 교재 같은게 있을까요? 

const products 에서 products는 result.data.products를 담기 위해 선언한 products 이므로 위에서 선언한const [products, setProducts] 에서의 products 와 다른 것이 맞나요?또 setProducts() 안에 들어가는 products를 넣은 것은 const[products, setProducts] 에서의 products에 const products에서의 products를 대입하기 위해 넣은 것으로 보면 되나요?즉, const products = result.data.products;setProducts(products); 를 setProducts(result.data.products); 라고 해도 문제가 없는 건가요?

main/index.js에서 컴포넌트 함수명(MainPage)와 App.js에서 import 하는 함수명(MainPageComponent)가 달라도 괜찮은 이유가 뭔가요?혹시 한 js파일에서는 export를 한 개의 컴포넌트만 할 수 있어서 그런건가요?(컴포넌트는 여러개 만들어도 문제가 괜찮던데 export를 2번 쓰니까 빨간줄이 생겨요.)

A 장비에서 mqtt 메시지를 보낼 때 B 서버에서 메시지를 받기 위해서 서버에 mosquitto를 설치하고, mosquitto-client를 설치했습니다.그리고 mosquitto.conf 파일에서 아래 두 부분을 추가를 했습니다.listener 1883 allow_anonymous true그리고 서버에서 tcp 포트를 열었습니다.# iptables -I INPUT 1 -p tcp --dport 1883 -j ACCEPT아래 명령어로 설정을 저장하고iptables-save > /etc/iptables.rules아래 명령어로 방화벽에서 1883포트도 열었습니다.firewall-cmd --permanent --zone=public --add-port=1883/tcp그리고 재가동을 했습니다.firewall-cmd --reloadsudo systemctl status mosquitto.service로 조회를 해 보면 Active 상태가 active(running)으로 되어있습니다. 이렇게 한 후 서버에서 mosquitto -v를 실행하면 브로커가 실행이 되고1688558540: mosquitto version 2.0.11 starting 1688558540: Using default config. 1688558540: Starting in local only mode. Connections will only be possible from clients running on this machine. 1688558540: Create a configuration file which defines a listener to allow remote access. 1688558540: For more details see https://mosquitto.org/documentation/authentication-methods/ 1688558540: Opening ipv4 listen socket on port 1883. 1688558540: Opening ipv6 listen socket on port 1883. 1688558540: mosquitto version 2.0.11 running 1688558540: New connection from ::1:58012 on port 1883. 1688558540: New client connected from ::1:58012 as auto-E1654EA0-1FC2-B13F-C9A5-5162C4E11F43 (p2, c1, k60). 1688558540: No will message specified. 1688558540: Sending CONNACK to auto-E1654EA0-1FC2-B13F-C9A5-5162C4E11F43 (0, 0) 1688558540: Received SUBSCRIBE from auto-E1654EA0-1FC2-B13F-C9A5-5162C4E11F43 1688558540: topic (QoS 0) 1688558540: auto-E1654EA0-1FC2-B13F-C9A5-5162C4E11F43 0 topic 1688558540: Sending SUBACK to auto-E1654EA0-1FC2-B13F-C9A5-5162C4E11F43같은 서버에서 아래와 같이 토픽을 보내면mosquitto_pub -h localhost -t test -m "hello world"[root@localhost ~]# mosquitto_sub -t test hello worldsub에서 메시지가 정상적으로 출력이 됩니다.동일 서버에서는 mosquitto 실행도 잘 되고, publish, subscribe 모두 적용이 잘 됩니다. 그런데 문제는 다른 서버에서 발송을 할 때 메시지가 출력이 안됩니다.위의 설정대로 포트를 열고 메시지를 보냈는데 서버쪽에서는 sub를 실행해 놓고 있어도 메시지를 받지를 못하고 있습니다.그래서 port가 열려있는지 로컬에서 확인을 해 보니 아래와 같이 포트가 열려있지 않았습니다. ✘ username@usernameui-MacBookPro  ~  nc -vz xxx.xxx.xxx.xxx 1883 nc: connectx to xxx.xxx.xxx.xxx port 1883 (tcp) failed: Operation timed out 문제가 포트가 정상적으로 안열려서 문제가 생긴 것 같은데 위에서 포트를 열었던 방법이 잘못된 걸까요?netstat -lntp로 열려있는 포트를 확인해보면 아래와 같이 열려있다고 나오는데..Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name tcp 0 0 127.0.0.1:1883 0.0.0.0:* LISTEN 126689/mosquitto 제가 놓치고 있는 부분이 어떤 부분인지.. 아니면 잘못 설정한 부분이 어떤 부분인지 알 수 있을까요??몇일동안 이 부분때문에 씨름하다가 문의 드립니다.

useEffect의 두번째 파라미터에는 useState로 인해 할당된 변수인 time만 쓸 수 있는건가요?function TimerComponent() { const [time, setTime] = React.useState(0); const cnt = 0; React.useEffect(function() { setTime(time+1); }, [cnt]); return ( <div> <h3>{time}초</h3> <button onClick={function() { cnt++; }}>1씩 올려주세요.</button> </div> ); }이런식으로 사용이 안되는건가요?

안녕하세요. 항상 좋은 강의를 해주셔서 감사합니다.다름이 아니라 글 작성시 콘솔에 ADD_POST_REQUEST에 대한 리듀서 작동은 확인했으나 그 뒤에 addPost 사가가 작동하지 않는 것에 대해 질문이 있습니다.위 문제는 watchAddPost()가 정상적으로 ADD_POST_REQUEST에 대한 이벤트를 캐치하지 못 해서 다음 과정이 진행되지 않는 것이라고 생각합니다. 다만 콘솔에서는 이에 대한 것도 뜨지 않아 해당 오류를 해결하기 어려워 질문 드립니다.다음은 제가 작성한 코드입니다. ()@/component/PostFrom.jsconst PostForm = () => { const dispatch = useDispatch(); const { imagePaths, addPostDone } = useSelector((state) => state.post); const [text, onChangeText, setText] = useInput(""); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); ... }@/reducer/post.jsexport const initialState = { mainPosts: [...], ... addPostLoading: false, addPostDone: false, addPostError: null } export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); const dummyPost = (data) => ({ id: 2, content: data, User: { id: 1, nickname: "윤섭", }, Images: [], Comments: [], }); const reducer = (state: initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log("REDUCER: ADD_POST_REQUEST"); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: console.log("REDUCER: ADD_POST_SUCCESS"); return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; ... } }@/sagas/post.jsimport { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE, } from "@/reducers/post"; // add post function addPostAPI(data) { return axios.post("/api/post"); } function* addPost(action) { try { // const result = yield call(addPostAPI); yield delay(1000); console.log("SAGA: addPost"); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } export default function* postSaga() { yield all([fork(watchAddPost), fork(watchAddComment)]); }아래는 ADD_POST_REQUEST 이후 아무런 반응이 없는 스크린샷입니다.