inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

term을 consol.log로 찍었을 때 나오는 게 이해가 안되어서 질문드립니다

미해결

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

const onChangeTerm = useCallback((e) => { setTerm(e.target.checked); console.log(term); setTermError(false); }, []); console.log(term); 이렇게 term의 consol.log를 찍어서 확인해 봤는데 setState는 비동기이기에 term의 초기값이 false라고 했을때 useState는 비동기이니 하면첫번째 term의 consol.log는 false true true false fasle true 이런식으로 진행되야 할꺼 같은데 실제로 로그 를 찍어보니까 onChangeTerm안에 있는 console.log(term)은 계속 false로 찍힙니다 이유가 무었인가요?

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

withAuth 질문

해결됨

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

중고마켓 게시글 작성하는 부분을 작업 하고 있는데 여기서 게시글작성은 회원만 등록 할 수 있는것을 파악하였습니다. 그래서 withAuth를 이용해서 분기처리를 하였는데 로그인 해도 로그인하라는 문구가 떠서 질문 드립니다. markets -> new -> index.tsx withAuth 어떤 식으로 해야 로그인 시 게시글 작성을 할 수 있을까요 , 또 로그인 안했을 시 빽쪽에서 막아놨기 때문에 게시글을 작성 할 수 없는걸까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
임프런 댓글 1 좋아요 0 조회수 272

mac m1 node 14버전 설치 에러

미해결

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

강의에서 14버전으로 사용하셔서 설치하려했더니 오류가 나서 오류 해결방법 공유합니다. $ arch -x86_64 zsh 해당 명령어 입력 한뒤 다시 nvm install 원하는 버전 입력하시면 됩니다! 위와 같은 명령어 입력시 셸이 Intel 아키텍처 환경으로 전환되어 node 버전이 낮은것도 잘 설치 됩니다!

  • next.js
김지원 댓글 1 좋아요 0 조회수 658

로비 채팅 구현 섹션에서

해결됨

파이썬/장고로 웹채팅 서비스 만들기 (Feat. Channels) - 기본편

안녕하세요 로비 채팅 구현 강의를 들으면서 구현 중인데 redis 서버도 정상적으로 잘 작동하고 스크립트도 정확하게 썼는데 계속 채팅을 입력하고 엔터를 누르면 새로고침(초기화)이 되네요 ㅠㅠ 어떤게 문제일까요? 아무리 문제를 해결해봐도 이상한점은 찾아볼수가 없네요

  • python
  • django
  • django-channels
오창인 댓글 1 좋아요 0 조회수 306

스타일 객체를 컴포넌트 바깥에 적으면 리랜더링을 줄일 수 있나요?

해결됨

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

회원가입 페이지 만들기(커스텀 훅) 강의를 듣던 중 질문 남깁니다. 스타일 객체를 컴포넌트 바깥에 적으면 리랜더링을 줄일 수 있나요? 강의에서 style props값을 넣어줄때 객체로 넣어주면 react는 {} === {} //false이기에 매번 다르게 인식해서 리랜더 돌기에 useMemo를 해주면 좋다고 들었습니다. 그런데, antd예시를 보니 style 객체를 컴포넌트 바깥에 두는 경우도 있더라구요. import { Button, Form, Input, } from 'antd'; const tailFormItemLayout = { wrapperCol: { xs: { span: 24, offset: 0, }, sm: { span: 16, offset: 8, }, }, }; const App = () => { const [form] = Form.useForm(); return ( <Form form={form} name="register" > <Form.Item name="agreement" valuePropName="checked" {...tailFormItemLayout} > <Checkbox> I have read the <a href="">agreement</a> </Checkbox> </Form.Item> </Form> ); }; export default App; 이처럼 stlye에 담길 객체를 App 컴포넌트 바깥에 넣어두면 App이 랜더링되는 것과는 별개로 전역 선언된 거니까 리랜더 문제가 없는건 아닐까 궁금하여 문의 남깁니다. 한마디로 App이 호출되서 랜더링 될때 tailFormItemLayout는 바깥에 선언되어있으니 리랜더 될 일이 없지 않을까..? 강의 잘 듣고 있습니다. 현명한 질문을 한 건지 모르겠네요. 답변기다리겠습니다. 감사합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
김소진 댓글 1 좋아요 0 조회수 271

섹션 34 - 코드 포멧터와 린터 Component error

해결됨

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

섹션 34에서 15분대에 _app.tsx 소스 파일을 eslint 형식에 맞게 수정하는 중에 이 사진처럼 Component 부분에 에러가 발생하는데 어떤 이유에서 발생하는지 알고 싶습니다. 검색을 해보니깐 버전이 꼬여서 발생한거라고 하는데... 이해가 가지 않습니다 ㅠㅠ [ 상세 에러 ] 'Component' cannot be used as a JSX component. Its type 'NextComponentType<NextPageContext, any, {}>' is not a valid JSX element type. Type 'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' is not assignable to type 'ElementType'. Type 'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' is not assignable to type 'new (props: any) => Component<any, any, any>'. Construct signature return types 'Component<{}, any, any>' and 'Component<any, any, any>' are incompatible. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("c:/VsCodeProject/0.study/inflearn/codecamp-frontend/class/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

  • react
  • node.js
  • seo
  • graphql
  • next.js
병아리222 댓글 1 좋아요 0 조회수 347

figma 싸이월드 연결이 안됩니다.

해결됨

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

안녕하세요 https://www.figma.com/file/e0ebI5c2LtjNMR8acwU0JS/%E1%84%8A%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%AF%E1%86%AF%E1%84%83%E1%85%B3?node-id=0%3A1 올려주신 강의 따라하던중 notion에 공유해주신 내용중 싸이월드 만들기 1탄에 올려주셨던 figma url 연결시 "Figma is experiencing a temporary outage. We'll be back soon!" 와 같은 오류창이 뜹니다. url 연결 확인 부탁드려요~

  • react
  • node.js
  • seo
  • graphql
  • next.js
이숙영 댓글 1 좋아요 0 조회수 446

next/image

해결됨

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

안녕하세요 next/image 에 대한 질문이 있습니다 next/image(총 17분) 강의 영상 02:40 example 파일의 확장자가 jpg 인데 webp 으로 사용되는 부분이 궁금합니다. webp 를 꽤 많은 브라우저에서 지원해주긴 하지만 모든 브라우저에서 지원해주지는 않을텐데, 어떤 최적화를 수행하는걸까요? 사용자 브라우저를 체크해서 img 태그의 srcset 를 사용하는 것과 같이 최적의 확장자에 대한 추가 최적화(client) 이미지 자체의 최적화(server) + 1번 제가 생각해본 최적화는 2가지 정도인데.. 알려주시면 감사하겠습니다

  • next.js
김준호 댓글 1 좋아요 1 조회수 352

백엔드 구축실습

해결됨

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

실습이 불가능하다면 그냥 눈으로 보고 흐름만 이해하고 넘어가면 되나요? 따로 타이핑 하거나 파일, 터미널에서 설치해야되는것도 안하고 넘어가나요

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

JSEXP 문의드립니다.

해결됨

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

function ratingDetail(num) { // 여기에 코드를 작성하세요. let result; if (num >=90 && num <=100 ) { result = "A"; if (num >= 96) { result += "+"; } else if (num <= 93) { result += "-"; } else { } } else if (num >= 80 && num < 90) { result = "B"; if (num >= 86) { result += "+"; } else if (num <= 83) { result += "-"; } else { } } else if (num >= 70 && num < 80) { result = "C"; if (num >= 76) { result += "+"; } else if (num < 73) { result += "-"; } else { } } else if (num >= 60 && num < 70) { result = "D"; if (num >= 66) { result += "+"; } else if (num < 63) { result += "-"; } else { } } else if (num > 0 && num < 60) { result = "등급미달"; } else { result = "잘못된 값입니다"; } return result; } ratingDetail(60); output에 맞추다 보니 이렇게 코드가 길고 가독성이 떨어지게 되었습니다. if문을 중첩으로 사용하는 것 외의 다른 방법으로 코드를 최적화할 수 있는 방법이 궁금합니다. 커리큘럼 중 어느 부분을 찾아서 공부하고 응용하면 될까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
빙봉빙봉 댓글 1 좋아요 0 조회수 309

전체 예제 소스좀 올려주세요

미해결

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

실무 vue nuxt 사용 프론트 개발자입니다.. 다른건 다이해가 가는데 firebase admin 이부분 좀 소스코드예시를 파일로 올려주시면 안될까요? 아니면 깃허브에서 전체 예제 소스를 다운받을 수 있도록 해주시면 감사하겠습니다..

  • next.js
강지영 댓글 1 좋아요 0 조회수 465

next.js의 "_buildmanifest.js" 파일의 경로 유출(?)은 괜찮은 걸까요?

미해결

소스코드에서 _buildmanifest.js에 들어가보면 모든 경로가 표시되던데 이러면 관리자 페이지의 모든 경로도 볼 수 있어서 어느정도 앱 규모(?)를 알 수 있다는 건데 이거 보안적으로 괜찮은걸까요? 관리자 페이지는 따로 만들어야 하는 건지 아니면 slug 경로를 이용해서 안 보이게 해야하는 건지 갑자기 머리가 복잡해지네요😂 다른 분들은 어떻게 하시는지 궁금합니다.

  • next.js
웹나그네 댓글 1 좋아요 0 조회수 432

우분투 서버 빌드 오류

미해결

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

안녕하세요 제로초님 우분투 서버에서 npm run build를 하는데 처음에는 ModuleNotFoundError: Module not found: Error: Can't resolve 'immer' in '/home/ubuntu/react-nodebird/front/util' > Build error occurred Error: > Build failed because of webpack errors at build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918) at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:95:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the nodebird@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 이 오류가 떠서 다시 immer 설치 후에 git commit, git push, 우분투 서버에서 git pull을 하였습니다. 그 다음에는 굵게 표시한 에러로 바뀌었는데 ./util/produce.js Attempted import error: 'enableES5' is not exported from 'immer'. > Build error occurred Error: > Build failed because of webpack errors at build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918) at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:95:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the nodebird@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. util/produce 파일은 강의에 나온 파일과 똑같습니다! 오류가 왜 나는지 어떻게 해결해야 할지 모르겠어서 질문 남깁니다.. 감사합니다! immer 버전은 "immer": "^9.0.21", 입니다!!

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

React 기초 프로그램 설치 오류가 발생합니다...

해결됨

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

안녕하세요? 프로그램 설치 관련 질의 드린 gunaadatcom입니다. 권장하신 대로 ver2 강의에서 요구하는 대로 next.js에서 node.js 다시 다운받고 아래와 같이 다운로드를 진행하였으나 계속 애로가 나서 질의 한번 더 드립니다... npx create-next-app를 통해 폴더를 만들려고 하였으나 진행이 되질 않습니다. 확인 부탁 드립니다~~ ㅠ.ㅠ

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

수업 버전

해결됨

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

제가 듣는 수업이 ver1 인지 ver2 인지 어떻게 확인할까요 ?

  • react
  • node.js
  • seo
  • graphql
  • next.js
매력적인 토끼 댓글 2 좋아요 0 조회수 356

로그아웃 후 token

해결됨

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

안녕하세요. 몇 가지 질문 드리고자합니다. 로그아웃 후 client.clearStore() 통해서 로그인 정보를 지워주는 것으로 알고 있는데 accessToken이 지워지는건가요? 로그아웃 후 새로고침을 하면 위와 같은 코드가 동작하여 refreshToken이 남아 있어서 토큰을 재발급 받고 있습니다. 로그아웃을 할 때 refreshToken도 삭제할 수 있나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
용준 댓글 1 좋아요 0 조회수 469

SendGird가입

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

안녕하세요 api 인증키를 발급받기 위해 sendgrid를 가입하려고 하는데 가입이 되지 않아서 질문남깁니다!!

  • react
  • python
  • django
  • docker
chlendyd7 댓글 3 좋아요 1 조회수 1127

리랜더링과 useEffect의 상관관계가 궁금합니다

미해결

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

import { useState, useRef, useEffect } from 'react'; function VideoPlayer({ src, isPlaying }) { const ref = useRef(null); useEffect(() => { if (isPlaying) { ref.current.play(); } else { ref.current.pause(); } }); return <video ref={ref} src={src} loop playsInline />; } export default function App() { const [isPlaying, setIsPlaying] = useState(false); return ( <> <button onClick={() => setIsPlaying(!isPlaying)}> {isPlaying ? 'Pause' : 'Play'} </button> <VideoPlayer isPlaying={isPlaying} src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" /> </> ); } 위의 코드는 링크에 있는 리액트 공식 문서에 있는 코드입니다 https://react.dev/learn/synchronizing-with-effects useEffect에서 배열을 생략하면 맨처음에 실행되고 그이후는 리랜더링 될때마다 실행된다는데 이번 강좌에서 리액트는 변경하는 props와 state만 리랜더링한다고 하셨습니다 그럼 useEffect를 배열없이 사용하면 연결된 모든 자식 혹은 부모 컴포넌트에서 리랜더링되는 props와 state가 발견이 되면 useEffect가 작동되는 건가요?

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

섹션 4 React 기초 1강에서 notion 접속 방법을 모르겠습니다...

해결됨

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

안녕하세요? 열심히 수강 중인 직장인입니다. 섹션4 react 기초 1강에서 설명하시는 대로, node.js, npm, yarn까지는 설치가 완료되었습니다만, 그 후 notion이라는 곳에 접속하여 다른 사항들을 설치하고자 하였으나, notion 접속 방법을 모르겠습니다. 영상을 보고 강사님이 접속하신 곳 주소를 그대로 입력하여 접속 및 회원가입을 하였으나, 강사님이 영상에서 보시는 곳과는 사뭇 다른 곳이라 접속 방법 등을 문의코자 글 남깁니다. 빠른 답변 부탁 드립니다.

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

섹션 2 - 강력한 CSS의 "grid 속성" 강의에 오타가 있는 것 같습니다.

해결됨

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

섹션 2 - 강력한 CSS의 "grid 속성" 강의에서 15분 30초쯤에 보이는 grid 레이아웃이 그림 예시와 적용된 속성값이 다른 것 같습니다. grid-item에게 grid-column: 1 / 3; grid-row: 2 / 3; 속성을 주고 실행했을 경우 아래의 레이아웃으로 나눠지고 ex) HTML <div class="container"> <div class="item item1">box</div> <div class="item">box</div> // ... </div> CSS .container { box-sizing: border-box; border: 2px solid pink; display: grid; grid-template-columns: 200px repeat(3, 1fr); grid-template-rows: 1fr 2fr; } .item { font-size: 1.3em; font-weight: 500; border: 2px solid powderblue; } .item1 { grid-column: 1 / 3; grid-row: 2 / 3; } result) ㅁ ㅁ ㅁ ㅁ [ㅁ ㅁ]ㅁ ㅁ 강의에서 보여지는 레이아웃처럼 만드려면 grid-column: 1 / 4; grid-row: 2 / 3; 처럼 입력해 주어야 아래처럼 적용이 되었습니다. ex) CSS /* ... */ .item1 { grid-column: 1 / 4; /* 3 -> 4 */ grid-row: 2 / 3; } result) ㅁ ㅁ ㅁ ㅁ [ㅁ ㅁ ㅁ]ㅁ 제가 잘못 입력된 부분이 있는지 혹은 강의 내용의 값이 오타였던 건지 알고싶습니다.

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

인기 태그

인프런 TOP Writers

주간 인기글