묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
이미지 업로드 시 배열로
공부하던중 응용해보고 싶어서 업로드 하는 이미지들을 배열에 담아보려고 이런 스키마를 추가하여 여러가지 방법을 찾아가면서 시도를 해보다가 몇일째 진행이 안되어서 수업 내용에서는 벗어나지만 선생님께 도움 요청 드립니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시글 등록 레퍼런스 코드 질문
레퍼런스 코드 파일 실행시켜봤는데 컴포넌트 정렬이 안맞습니다.무슨 이유인지를 못찾겠습니다..
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
mysql_secure_installation password 질문이요
... Failed! Error: SET PASSWORD has no significance for user 'root'@'localhost' as the authentication method used doesn't store authentication data in the MySQL server. Please consider using ALTER USER instead if you want to change authentication parameters.구글링도하고 mysql다시깔아서 local password도 다시 설정했는데 자꾸 이 오류가 나오네요.. 혹시 해결 방법이 있을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
ec2 배포후 질문입니다.
안녕하세요!현재 강의자료의 백엔드 서버와 데이터 베이스 도커를 통해 연결까지 하고, 다른 질문글들을 참고로 하여 Dockerfile의 작성까지 완료한 후, pm2 restart all 으로 다시 시작까지 하였지만 아래와 같은 에러가 발생하고 있습니다.에러만 보면 현재 DB와 연결이 잘 되고 있지 않는것이 문제라고 판단이 되지만, 강사님이나 저와 비슷한 에러가 있던 분들이 계시다면 해결법을 알고 계실까 하여 질문을 남깁니다.topSub는 물론, 회원가입과 로그인도 불가능한 상황입니다. 코드도 같이 첨부하겠습니다.docker-compose.ymlversion: "3" services: db: image: postgres:latest container_name: reddit-postgres restart: always ports: - "5432:5432" environment: POSTGRES_USER: "${DB_USER_ID}" POSTGRES_PASSWORD: "${DB_USER_PASSWORD}" volumes: - ./data:/var/lib/postgresql/data server: build: context: ./server container_name: clone-reddit-server restart: always ports: - "4000:4000" volumes: - /app/node_modules - ./server:/app client: build: context: ./client container_name: clone-reddit-client ports: - "3000:3000" volumes: - /app/node_modules - ./client:/app stdin_open: trueDockerfike -clientFROM node:16-alpine ENV PORT 3000 WORKDIR /usr/src/app COPY package*.json ./ RUN npm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp" RUN npm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips" RUN npm install COPY ./ ./ ENV NODE_ENV production RUN npm run build:production CMD ["npm", "run", "start:production"]Dockerfike -serverFROM node:14.14.0-alpine WORKDIR /app COPY ./package.json ./ RUN npm install COPY . . RUN npm install pm2 -g RUN npm install ts-node -g RUN pm2 install typescript # CMD ["npm", "run", "dev"] CMD ["pm2", "start", "src/server.ts", "--watch"] # CMD ["pm2", "start", "ecosystem.config.js", "--env", "production", "--watch"] # CMD ["npm", "run", "dev"]ecosystem.config.js//client module.exports = { apps: [{ name: "clone-reddit-client", script: "npm run start:production", }] } //server module.exports = { apps: [{ name: "clone-reddit-server", script: "npm run start:production", }] }
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
3분 쯤 catch함수에 console.error가 안되네요
타이핑은 똑같이 했습니다.. catch함수 빼면 나머지는 동작됩니다
-
해결됨웹 게임을 만들며 배우는 React
useMemo를 사용하는 케이스에 대해
강좌에서는 함수의 결과값을 렌더링에 쓰는 경우만 useMemo를 적용했는데요props나 state를 렌더링에 사용하는경우에도 모두 useMemo를 적용해야 하나요?useCallback같은 경우는 렌더링에 사용하는 함수에 대해 모두 적용하면 되는데useMemo는 어떤경우에 적용해야하는지 헷갈리네요
-
미해결따라하며 배우는 리액트 네이티브 기초
계속 npx react-native run-ios 가 안됩니다ㅠㅠ
현재 계속 이런 창이 뜨는데요..엑스포로 실습할 때는 잘만 되다가 거의 다 와서 run-ios 까지 하니까 여기서부터 이렇게 뜨고 잘 안되네요최대한 방법을 스스로 찾아보려고 했는데 혹시 해결방법이 있을까요?npx react-native run-ios --simulator='iPhone 14 Pro (16.0)'이렇게는 잘 됐습니다!
-
미해결처음 만난 리액트(React)
목소리 너무 좋습니다
마음이 안정 됩니다 너무 설명도 잘하고 쉽고 유료강의보다 5천억만배 최강으로 최고 입니다
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
바로 res.json()을 리턴할 경우
안녕하세요 선생님 위의 코드는 잘 작동하지만 두번째 코드는 프로미스 객체자체를 반환하던데 어떤 차이가 있나요? 둘 다 res.json()을 콘솔에 띄우는 코드 아닌가요??let response = fetch("https://jsonplaceholder.typicode.com/posts") .then((res) => {return res.json();}).then((jsons) => {console.log(jsons);});==================================let responses = fetch("https://jsonplaceholder.typicode.com/posts").then( (res) => { console.log(res.json()); });
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
baskets.push할때
안녕하세요. 강의를 진행하는데 서버가 죽은것같아 직접 배열을 만들어서 예제를 진행중입니다.그런데 자꾸 문제가 생기네요,,첫번째 클릭에서는 객체가 localStorage에 저장이 되는데 그 이후부터 진행이 안됩니다. 이유가 무엇일까요,,이모션 부분은 제외하고 전달드립니다ㅜ import styled from "@emotion/styled"; import { Modal } from "antd"; interface IBasketsProps { id: number; writer: string; product: string; price: number; } const myBasket = [ { id: 100, writer: "짱구", product: "액션가면 인형", price: 30000 }, { id: 200, writer: "철수", product: "과외", price: 40000 }, { id: 300, writer: "훈이", product: "도시락", price: 50000 }, { id: 400, writer: "맹구", product: "시냇물 돌", price: 2000000 }, ]; export default function BasketHomework() { const onClickBtn = (basket: IBasketsProps) => () => { const baskets: IBasketsProps[] = JSON.parse( localStorage.getItem("baskets") ?? "[]" ); console.log(baskets); const alreadyIn = baskets.filter((el) => el.id === basket.id); if (alreadyIn.length === 1) { Modal.warning({ content: "이미 찜한 상품입니다." }); return; } baskets.push(basket); localStorage.setItem("baskets", JSON.stringify(basket)); }; return ( <> <CardWrapper> {myBasket.map((el, index) => ( <Card key={index}> <Product>{el.product}</Product> <Writer>{el.writer}</Writer> <Price>{el.price}</Price> <button onClick={onClickBtn(el)}>장바구니 담기</button> </Card> ))} </CardWrapper> </> ); }
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
userMiddleware와 authMiddleware를 언제 언제 넣어주는지 헷갈리네요.
제가 코드를 이해한걸로는 userMiddleware는 클라이언트에서 보낸 token의 쿠키에 jwt를 이용하여 해당 user를 찾고 res.locals.user에 글로벌하게 담는 역할을 하는것 같고,authMiddleware는 res.locals.user가 존재 하는지 체크 하는것 같은데언제 언제 사용하고 사용 하지 말아야 할지 도통 감이 안잡히네요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 리뷰 - container/presenter 파일 분리 레이아웃 깨짐 문제
포트폴리오 리뷰 - container/presenter 파일 분리레퍼런스 코드를 클론후 빌드했을때http://localhost:3000/boards 페이지 접근시우측 날짜 시간쪽이 겹쳐서 나오는 것 같습니다.단순 CSS 문제라고 보면 되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
파이어베이스 vs AWS
배포에서 대표적인 클라우드 서비스로 AWS, GCP, Azure 를 알려주셨는데요혹시 파이어베이스도 같은 묶음으로 봐도 될까요?? 파이어베이스는 AWS처럼 사용할 수 없나요??파이어베이스는 DB, 서버 용으로만 배우는게 좋을까요??
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
antd로 회원가입 폼을 만들때 질문입니다
<Form.Item label="아이디" name="username" rules={[{ required: true, message: "Please input your username!" }]} //rules을 통해 유효성검사로직이 들어가 잇다 //hasFeedback //username의 끝 부분에 체크표시? {...fieldErrors.username} > <Input />위의 코드에서 {...fieldErrors.username} 은 spread한 것을 하나의 오브젝트로 {validateStatus: "error", help: "User with this username already exists."} 이렇게 구성되어 있는걸로 이해가 되는데 form.item에서는 각 항목마다 쉼표도 없이 그냥 띄어쓰기로 속성을 정의하는데 {...fieldErrors.username}이렇게 표현한 것이 어떻게 바로 속성으로 적용되는지 궁금해서 질문드립니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
최적화하기 11분 50초
import React from "react"; import { useNavigate } from "react-router-dom"; import MyButton from "./MyButton"; const DiaryItem = ({ id, emotion, content, date }) => { const navigate = useNavigate(); const goDetail = () => { navigate(`/diary/${id}`); }; const goEdit = () => { navigate(`/edit/${id}`); }; const strDate = new Date(parseInt(date)).toLocaleDateString(); return ( <div className="DiaryItem"> <div onClick={goDetail} className={[ "emotion_img_wrapper", `emotion_img_wrapper_${emotion}`, ].join(" ")} > <img src={process.env.PUBLIC_URL + `assets/emotion${emotion}.png`} /> </div> <div className="info_wrapper" onClick={goDetail}> <div className="diary_date">{strDate}</div> <div className="diary_content_preview">{content.slice(0, 25)}</div> </div> <div className="btn_wrapper"> <MyButton text={"수정하기"} onClick={goEdit} /> </div> </div> ); }; export default React.memo(DiaryItem); // 왜 렌더링 계속 되지?ㅡㅡㅡㅡㅡ 안녕하세요 강사님!최적화 하는 과정에서 DiaryItem 에 React.memo를 적용시켰는데도 렌더링이 계속됩니다ㅜ혹시 useNavigate 부분 코드때문에 그럴까요?구글링해보니까'원인은 react-router가 V6로 업그레이드 되면서 URL이 변경 될 경우 useNavigate함수를 계속 재생성하도록 변경 되었다는것을 알게 되었습니다.'이런 글을 읽어서요,, 답변부탁드립니다! 강의 잘 듣고 있습니다. 좋은 강의 감사합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정하기로 들어가서 작성완료를 누르면 일기가 사라지는 현상
안녕하세요 질문이 있는 데요어플리케이션 툴에서는 이력은 그대로 남아 있는데새로 일기 작성하고 수정화면에서 수정하고 작성완료 누르면 UI적으로 일기가 사라지는 데 문제를 알고 싶습니다.그리고 빌드하고 배포시에 사진첨부처럼 터미널에 이렇게 나오는 현상은 문제가 없는건지요?답변 부탁드립니다.긱에 올리는 중에 긱이 서툴러서 ignore파일과readme파일이 예전거와 충돌? 비슷한게 생긴것 같은데 양해 부탁드립니다.https://github.com/k-songs/Syal
-
미해결(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
매칭되는 action이 없을 때 반환값이요
강의에서는 매칭되는 action이 없을 때에도 새로운 객체를 반환하도록 작성 되어 있는데action이 없으면 re-render를 할 필요가 없으니 기존 객체를 반환해야 하는 게 아닌가요?새로운 객체를 반환하는 이유를 알고 싶습니다~
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
context 질문 있습니다.
안녕하세요export const AuthProvider = ({ children }: { children: React.ReactNode }) => {}에서 ({ children }: { children: React.ReactNode }) 질문입니다.뒤에 타입 부분이 헷갈리는데, ({ children }: { children: React.ReactNode }) 하지 않고 ({ children }: React.Node} 이렇게 하면 왜 안되는건가요?
-
미해결처음 만난 리액트(React)
== 와 ===
const post = data.find((item) => { return item.id == postId; });이 코드에서 왜 == 를 ===로 바꿔줬을 때는 data를 찾지 못하는 걸까요?postId 와 item.id 모두 int 값 아닌가요?
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
Azure pipeline을 구축시 환경 변수 설정하는 위치
항상 강의 감사하게 듣고 있습니다.해당 강의에는 azure CI/CD 내용은 없지만 구축해서 사용하려고 합니다.그런데 docker를 구동할때 여러 환경변수(azure_account_name, azure_account_key, DEBUG, ALLOWED_HOST 등)들을 옵션으로 설정하게 되는데, azure에서 pipeline을 구축할 경우 해당 변수들을 어떻게 설정하는지 모르겠습니다.dev.azure.com에서 Pipelines->Variables 에서 설정하면 되는 것으로 알고 있었는데 변수가 전혀 먹지를 않네요.어떻게 해야 할런지요?참고로 yml을 사용하지 않고 classical하게 GUI로 설정하고 있습니다. 추가로 collectstatic을 별도의 bash shell이나 command line을 통해서 하는게 좋은 건지, dockerfile 내부에서 하는게 좋은 건지 말씀부탁드리겠습니다.고맙습니다.