inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

타입스크립트의 generic 강의 마지막 요약해주시는 부분에서

해결됨

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

안녕하세요 멘토님 항상 강의 잘 듣고 있습니다. 좀 사소한 질문일 수도 있으나, 알고 싶은 부분이라 질문 글을 쓰게 되었습니다. 타입스크립트의 generic 강의 1:06:10 쯤 섹션 수업 내용 요약해주실 때 container를 가급적 최소한 사용하라고 말씀하신 부분에서 궁금한게 있습니다. 예를 들어보자면, 게시글 작성 컴포넌트 폴더에서 만약 기존에는 container-persenter 방식으로 만들어놨다가 BoardWrite.container.tsx BoardWrite.presenter.tsx BoardWRite.queries.ts ... 이렇게 리스트가 있는 상태에서 React-hook-form 이나 custom-hook 을 사용하여 리팩토링을 하고나서 container의 내용이 거의 확 줄게되면 container 파일의 코드를 presenter랑 합치고 container 파일은 삭제하는게 좋다 라는 말씀이실까요? 그렇다면 리팩토링후 container 파일을 삭제하고 presenter에 합쳤다고 가정할 경우 BoardWrite.presenter.tsx BoardWRite.queries.ts ... 이렇게 남게 되는데요 그러면 BoardWrite.presenter.tsx 라는 파일 명을 presenter로 그대로 둬도 상관없는지, 현업에서도 container가 따로 없어도 presenter라는 파일 명으로 보편적으로 놔두는지 궁금합니다. 그리고 container와 presenter를 보편적으로 합치는 기준이 둘을 합쳐도 70~80줄 이내일 경우에 합치는 것인지도 궁금합니다. 감사합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
FRONTEER 댓글 1 좋아요 0 조회수 264

포트폴리오 중고마켓 유저 포인트에 관한 뮤테이션/쿼리에 관해서

해결됨

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

안녕하세요. 수업 잘 듣고 있습니다. 중고마켓 포토폴리오 과정에서 질문이 있습니다. 캐시를 충전하고 받은 rsp 인자로 받은 데이터들을 활용해서 createPointTransactionOfLoading 뮤테이션을 만드는게 맞나요? 받은 데이터들 사용해서 impUid를 넣어봐도 잘 안되네요 포인트를 충전하고, 그 데이터들로 어떤 뮤테이션을 보내고, 어떤 쿼리를 받아야하는거죠..?

  • react
  • node.js
  • seo
  • graphql
  • next.js
ju han 댓글 1 좋아요 0 조회수 342

게시글 등록 레퍼런스 코드 질문

해결됨

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

레퍼런스 코드 파일 실행시켜봤는데 컴포넌트 정렬이 안맞습니다. 무슨 이유인지를 못찾겠습니다..

  • react
  • node.js
  • seo
  • graphql
  • next.js
vndnrha95 댓글 1 좋아요 0 조회수 750

nextjs에서 cra처럼 사용 질문입니다

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

CRA 환경에서는 클라이언트 사이드로 렌더링 되는건데요 NEXTJS에서 서버사이드렌더링 없이 CRA처럼 CRS만으로도 구현할수 있나요? 이럴 경우에는 getStaticPros, getServerSideRedering 을 사용안하면 무조건 CRS가 되는건가요? seo 적용안하고 CRS로 하고 싶을 경우 강의에서 말씀하신 [_app] 에 next-seo를 추가하지 않고 getStaticPros, getServerSideRedering 없이 그냥 작업하면 모든 페이지가 CRS가 되는거죠 ? 그런데 루트에 [_app], [_ document] 이 파일은 무조건 실행이 되더라구요 이것의 정체는 무엇인지 궁금합니다 CRS인데 NEXT를 사용하려는 이유가 첫번째, 사이트를 만들때 사용자페이지, 관리자페이지 구분을 두고 사용자페이지는 SSR , 관리자페이지는 CSR을 적용하려고 하고 두번째, 코드스프리팅이 지정해줄 필요없이 자동적으로 모두 되어 있어서 NEXTJS를 사용하려고 합니다

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
샤크 댓글 1 좋아요 1 조회수 810

mysql_secure_installation password 질문이요

미해결

[리뉴얼] React로 NodeBird SNS 만들기

... 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도 다시 설정했는데 자꾸 이 오류가 나오네요.. 혹시 해결 방법이 있을까요?

  • react
  • redux
  • node.js
  • express
  • next.js
dsfsdf 댓글 2 좋아요 0 조회수 663

ec2 배포후 질문입니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요! 현재 강의자료의 백엔드 서버와 데이터 베이스 도커를 통해 연결까지 하고, 다른 질문글들을 참고로 하여 Dockerfile의 작성까지 완료한 후, pm2 restart all 으로 다시 시작까지 하였지만 아래와 같은 에러가 발생하고 있습니다. 에러만 보면 현재 DB와 연결이 잘 되고 있지 않는것이 문제라고 판단이 되지만, 강사님이나 저와 비슷한 에러가 있던 분들이 계시다면 해결법을 알고 계실까 하여 질문을 남깁니다. topSub는 물론, 회원가입과 로그인도 불가능한 상황입니다. 코드도 같이 첨부하겠습니다. docker-compose.yml version: "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: true Dockerfike -client FROM 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 -server FROM 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", }] }

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
김민종 댓글 1 좋아요 0 조회수 444

router 관련 질문입니다.

미해결

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

안녕하세요. 항상 잘 듣고 있는 학생입니다. 다름이 아니라 '상세 메세지 보기' 버튼 클릭 시window.location.href 을 사용해서 상세 페이지로 이동하게 구현 하셨는데, next/router 말고 window.location이 사용된 이유가 있을까 문득 궁금해서 질문 남깁니다. 외부 URL로 이동하는 건 아니고 상세 페이지에서 back버튼은 next/Link를 사용하셔서, 혹시 window.location 방법이 서버사이드 측면에서 기능적 이점이 있는 걸까요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • next.js
이준영 댓글 1 좋아요 0 조회수 405

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> </> ); }

  • react
  • node.js
  • seo
  • graphql
  • next.js
ju han 댓글 2 좋아요 0 조회수 433

자동 줄바꿈

미해결

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

6:15초 쯤 자동으로 줄바꿈 되는거 같은데 이런건 어떻게 하는건가요?

  • next.js
iesg 댓글 1 좋아요 0 조회수 397

userMiddleware와 authMiddleware를 언제 언제 넣어주는지 헷갈리네요.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

제가 코드를 이해한걸로는 userMiddleware 는 클라이언트에서 보낸 token의 쿠키에 jwt를 이용하여 해당 user를 찾고 res.locals.user에 글로벌하게 담는 역할을 하는것 같고, authMiddleware 는 res.locals.user가 존재 하는지 체크 하는것 같은데 언제 언제 사용하고 사용 하지 말아야 할지 도통 감이 안잡히네요 ㅠ

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
rhkdtjd_12 댓글 1 좋아요 0 조회수 382

포트폴리오 리뷰 - container/presenter 파일 분리 레이아웃 깨짐 문제

해결됨

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

포트폴리오 리뷰 - container/presenter 파일 분리 레퍼런스 코드를 클론후 빌드했을때 http://localhost:3000/boards 페이지 접근시 우측 날짜 시간쪽이 겹쳐서 나오는 것 같습니다. 단순 CSS 문제라고 보면 되나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
Jun 댓글 1 좋아요 0 조회수 495

파이어베이스 vs AWS

해결됨

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

배포에서 대표적인 클라우드 서비스로 AWS, GCP, Azure 를 알려주셨는데요 혹시 파이어베이스도 같은 묶음으로 봐도 될까요?? 파이어베이스는 AWS처럼 사용할 수 없나요?? 파이어베이스는 DB, 서버 용으로만 배우는게 좋을까요??

  • react
  • node.js
  • seo
  • graphql
  • next.js
lar888 댓글 1 좋아요 0 조회수 892

context 질문 있습니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {} 에서 ({ children }: { children: React.ReactNode }) 질문입니다. 뒤에 타입 부분이 헷갈리는데, ({ children }: { children: React.ReactNode }) 하지 않고 ({ children }: React.Node} 이렇게 하면 왜 안되는건가요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
김진우 댓글 1 좋아요 0 조회수 287

CreateBoardComment

해결됨

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

안녕하세요 createBoardComment 만들려고 mutation CreateBoardCommet doc을 보고 하고 있는데 createBoardCommentInput과 boardId:ID! 를 두개다 써야되는데 어떻게 해야 되는지 알수 있을까요? 또한 밑에 createBoardComment도 필요하다 하는데 어떻게 써야되는건가요? 감사합니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
ooo 댓글 1 좋아요 0 조회수 339

안녕하세요 server에서 res.json과 res.send에 대해 궁금하네요

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

보통 항상 프론트엔드에 보낼때 res.json으로 보내었는데 이번에는 res.send를 사용 하였는데 2개가 차이가 있을까요?

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
rhkdtjd_12 댓글 1 좋아요 0 조회수 452

Aws관련질문

미해결

[리뉴얼] React로 NodeBird SNS 만들기

강좌에서 aws 인스턴스를 2개를 사용해 프론트서버와 백엔드서버를 배포한것과는 다르게 프리티어 인스턴스 한개로 두개의 서버를 배포하려하는데 aws 서버 메모리가 부족할까요?

  • react
  • redux
  • node.js
  • express
  • next.js
bs44108 댓글 1 좋아요 0 조회수 397

안녕하세요.

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요. 현재 새로 나온 노드 교과서 이북과 현영님께서 주신 현물 책도 가지고 있는 상황에서 공부를 시작하려고 하는데 강의 결제 후 같이 보는건 어떨까요?? 공부하는데 돈은 아끼면 안된다고 생각하는 편이라 학습 효율이 가장 중요합니다. 예전에 유튜브로 하나만 구매하면 된다곤 하셨는데 둘 다 병행하면서 보면 어떨지 궁금합니다. 그리고 만약 하나를 선택 한다면 책, 강좌 중 뭐가 더 괜찮을지 혹은 개인의 성향 차이일지도 궁금합니다. 항상 좋은 강좌 감사합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
Milkyway 댓글 1 좋아요 1 조회수 294

프론트에서 useSWR로 받아온 data 콘솔로그로

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이걸 백엔드부분에서 콘솔로그를 출력안하고 프론트에서 로그출력하는 법은 없을까요?? 백엔드에서말고 프론트에서도 받아온 데이터 보고싶은데 콘솔로그하면 데이터가 안뜨고, undefined만 떠서요..

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
oridori2705 댓글 1 좋아요 0 조회수 335

메세지 목록 API 페이지네이션 처리 중 막혀서 질문드립니다.

미해결

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

안녕하세요. 매 회차마다 선생님 코딩 실력에 감탄하며 강의 듣고 있습니다. 지금 페이지네이션 API 만들고 썬더 클라이언트에서도 문제 없이 작동했는데 view 부분에서 setMessageList((prev) => [...prev, ...data.content]); 로 바꾸고 나서 처음 화면이 로드되면 API 호출이 두번 되면서 messageList에 데이터가 두번 저장됩니다. 그 이후 더보기 버튼 클릭시에는 size만큼 잘 불러오는데 처음 페이지 로딩때만 두번 나오는 이유를 모르겠습니다. useEffect 부분도 useEffect(() => { if (userInfo === null) return; fetchMessageList(userInfo.uid); }, [userInfo, messageListFetchtrigger, page]); 로 선생님 작성한 코드와 같은 것 같은데 틀린부분 있을까요? React Hook useEffect has a missing dependency: 'fetchMessageList'. Either include it or remove the dependency array. 이런 eslint 경고도 나옵니다. 강의 계속 돌려보다가 도저히 모르겠어서 질문 남깁니다 ㅠ - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • next.js
이준영 댓글 1 좋아요 0 조회수 528

수업질문 Unhandle Runtime Error해결 방법 문의드립니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 인덱스와 유저페이지만 안들어가지고 다른 페이지들은 들어가집니다. 구글링 해봐도 해결을 못해서 질문남겨봅니다. 혹시 어느 부분이 문제인지 알수 있을까요? 터미널 오류 warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload state { user: null, authenticated: false, loading: true } upstream image response failed for http://localhost:4000/images/qTXQHCjdvd.jpg 404 ImageError: "url" parameter is valid but upstream response is invalid at imageOptimizer (/Users/camoma1/Desktop/reddit-clone-app/client/node_modules/next/dist/server/image-optimizer.js:476:19) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async cacheEntry.imageResponseCache.get.incrementalCache (/Users/camoma1/Desktop/reddit-clone-app/client/node_modules/next/dist/server/next-server.js:264:72) at async /Users/camoma1/Desktop/reddit-clone-app/client/node_modules/next/dist/server/response-cache/index.js:83:36 { statusCode: 404 } 런타임 에러 Unhandled Runtime Error Error: Image with src "http://localhost:4000/images/qTXQHCjdvd.jpg" is missing required "width" property.

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
Cacamoli 댓글 1 좋아요 0 조회수 1341

인기 태그

인프런 TOP Writers

주간 인기글