inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

UI 재사용성 질문

해결됨

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

export const Row = styled.div` display: flex; flex-direction: row; width: 100%; justify-content: space-between; padding: 0 24px; margin: 8px 0; `; <Row style={{ justifyContent: "start" }}> <InputFieldSmall style={{ marginRight: "16px" }}> <Input placeholder="07250" /> </InputFieldSmall> <ButtonBlack>우편번호 검색</ButtonBlack> </Row> 안녕하세요! 컴포넌트 재사용성에 관하여 질문드리고 싶은게 있습니다! 1일차 게시글 작성 UI 만들기 과제를 진행하던 중 CSS 스타일을 재사용 하기 위해서 Row라는 컴포넌트를 만들었습니다. UI상 justify-content속성에 space-between 또는 flex-start 같이 약간만 변하는 부분이 존재해서 inline-stlye을 사용하였습니다. 제공 해주신 레퍼런스 코드에는 inline-style을 사용하지 않으셨는데 inline-style을 사용하는 것은 좋지 않은 방식인가요?

  • nodejs
  • node.js
  • graphql
  • react
  • seo
  • next.js
  • Next.js
aphopis 댓글 1 좋아요 0 조회수 412

Nextjs gh-pages 배포

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요~ Nextjs 강의 부분까지 수업을 마쳤습니다. 선생님께서 nextjs & typescript로 제작하신 블로그 부분을 gh-pages를 사용해서 배포해보려는데 디렉토링 부분이나 렌더되는 부분이 기존의 react 부분과 달라 질문 드립니다. baseurl 설정은 어디서 해야할까요? deploy 방식은 동일한 건가요? 혹시 위의 질문 말고도 다른점이 있을까요?

  • Next.js
  • tdd
  • typescript
  • redux
  • next.js
  • react
soon 댓글 1 좋아요 0 조회수 1959

SSG 설명에서 나온 Disable cache 의 다른 렌더링방식들과 비교

해결됨

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

안녕하세요! SSG 관련 설명해주실 때 개발자도구에서 Disable cache를 하면서 static 데이터가 이미 들어와있고 etag가 여전히 그대로인 것으로 캐시와 상관 없이 해당 static 데이터가 영향을 주는 것을 확인해주셨는데요. 그렇다면 SSR, CSR에서 Disable cache 했을시 위의 현상과 다른게 있나요 ... ? SSR은 서버에서 계속 보낼테니 cache랑 상관 없을 것 같고 ... CSR도 JS 파일을 들고 있을테니 이 역시 상관 없을 것 같아서요...! 혹시 CSR 특징에서 언급해주신 'JS 캐시 가능' 과 관련이 있다면 브라우저가 JS 캐시를 어떻게 활용하는지도 궁금합니다! 감사합니다!

  • seo
  • next.js
  • vercel
  • Next.js
  • vercel
  • csr
  • ssg
  • csr
  • ssr
  • ssg
극복밤송 댓글 2 좋아요 2 조회수 665

배포 후 로그인 인증이 안됩니다..

미해결

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 현재 강의대로 배포중인 상태입니다. 회원가입도 잘 되어서 로그인도 되는데 로그아웃이란 커뮤니티 생성 시 401 (Unauthorized)에러가 뜹니다.. 로컬에서는 아무런 문제 없이 잘 작동하고 있습니다. 아무리 찾아봐도 어떤 문제가 있는지를 모르겠습니다 ㅠㅠ

  • nodejs
  • node.js
  • postgresql
  • react
  • typescript
  • docker
  • 클론코딩
  • Next.js
  • next.js
  • 클론코딩
김규혁 댓글 1 좋아요 0 조회수 349

searchbar 포트폴리오 리뷰 질문

해결됨

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

searchbar 포트폴리오 리뷰에서 props로 searchbar 컴포넌트에 refechBoardsComment넘겨서 searchbar 컴포넌트에서 refechBoardsComment이용하여 페이지네이션을 수정없이 lastpage를변경할 수 있는데 const { data: dataBoardsCount, refetch: refechBoardsCount } = useQuery<Pick<IQuery, "fetchBoardsCount">,IQueryFetchBoardsCountArgs>(FETCH_BOARDSCOUNT,{variables:{search:keyword}}); 이렇게 FETCH_BOARDSCOUNT에 variables 값의 search를 keyword(검색어)로 주어도 똑같이 작동하는데 이 방법이 refechBoardsComment props로 넘겨줄 필요없어 간단한거 같은데 refechBoardsComment이용한 것과 같은거 맞나요? 아님 refechBoardsComment를 이용한 것과 차이가 있는 건가요?

  • seo
  • node.js
  • nodejs
  • react
  • next.js
  • graphql
  • Next.js
Main 댓글 1 좋아요 0 조회수 403

section 04 퀴즈 질문입니다 ㅠ

해결됨

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

삭제하기 버튼을 눌럿을때 이런 에러가 뜨는데 이유를 모르겠습니다 ㅜㅠ

  • Next.js
  • node.js
  • graphql
  • react
  • next.js
  • seo
  • nodejs
호겸 댓글 1 좋아요 0 조회수 316

graphql 관련 질문이 있습니다.

해결됨

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

안녕하세요 수업 내용 중, graphql 실습 관련하여 궁금한 것이 있습니다. 실습 과정에서 createProduct API에 파라미터 값을 저장해서 보내려 하는 과정에서 mutation을 구성할 때 createProductInput 이라는 부분은 REST API의 다중 JSON 방식으로 보내는 것으로 해석하면 될까요? 그런데 해당 데이터를 fetchProduct 로 조회 시 다중 JSON과 같은 그림이 아닌, 그냥 같은 한 덩어리로 넘어오는데 왜 저장할 때는 다중 JSON과 같은 방식으로 넣고 조회 시에는 그냥 뭉쳐져서 조회 되는지 차이가 궁금합니다. (그럼 굳이 CREATE 시 다중 JSON과 같은 방식으로 넣는 이유가 궁금합니다) 그리고 중간에 createProductInput 을 사용하는 이유에 대해서 오해를 방지하기 위함이라고 말씀해주셨는데 키 값도 있는데 왜 오해를 불러 일으킨다는 것인지 잘 이해를 못했습니다. 질문 요약 첫 사진의 createProductInput 부분이 REST API의 다중 JSON 같은 방식이라고 보면 될까요? createProduct 로 값을 넣을 때는 이중 JSON과 같은 방식으로 파라미터를 넣고 API를 넘겨줬는데 데이터를 조회하면 그냥 1차원 JSON으로 넘어오는데 그럼 왜 굳이 createProduct 에서 이중 JSON 방식으로 구성해서 넣는 것인지 궁금합니다. createProduct 에서 createProductInput 로 한 번 더 감싸는 자세한 이유 (수업 중간에 number라는 키 값으로 보이는 것도 있는데 오해를 불러 일으킬 수도 있다는 말씀에서 왜 오해인지 자세히 이해를 못함) 입니다. 감사합니다.

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

맥용, prettier 단축키

해결됨

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요 vscode에서 Prettier 설치를 했는데 shift + option + f 단축키가 먹히질 않네요ㅠ 왜 그런 건지 알 수 있을까요..?

  • redux
  • react
  • tdd
  • typescript
  • next.js
  • Next.js
이은혜 댓글 1 좋아요 0 조회수 535

TypeORM 에러 및 middleware 설치 이후 cors 에러 문의드립니다.

미해결

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

안녕하세요, 강사님! 강의 듣던 도중 해결하지 못한 에러가 있어 조언해주실 수 있으신지 문의드립니다. 1 TypeORM에서 다음과 같은 에러가 뜹니다. Server running at http://localhost:4000 QueryFailedError: tables can have at most 1600 columns at PostgresQueryRunner.query (생략) { query: 'ALTER TABLE "posts" ADD "title" character varying NOT NULL', parameters: undefined, driverError: error: tables can have at most 1600 columns at Parser.parseErrorMessage (생략) { length: 100, severity: 'ERROR', code: '54011', detail: undefined, hint: undefined, position: undefined, internalPosition: undefined, internalQuery: undefined, where: undefined, schema: undefined, table: undefined, column: undefined, dataType: undefined, constraint: undefined, file: 'tablecmds.c', line: '6819', routine: 'ATExecAddColumn' }, length: 100, severity: 'ERROR', code: '54011', detail: undefined, hint: undefined, position: undefined, internalPosition: undefined, internalQuery: undefined, where: undefined, schema: undefined, table: undefined, column: undefined, dataType: undefined, constraint: undefined, file: 'tablecmds.c', line: '6819', routine: 'ATExecAddColumn' } <== 이 부분이 계속 반복됩니다 (반복적으로 테이블이 생성되는 듯) stackoverflow 를 찾아보니 oneToMany relation이 문제가 된다는 글을 봤는데... 제가 백앤드쪽 지식이 전무하다보니, oneToMany 데코레이터로 설정된 Entity를 어떻게 수정해야하는건지 잘 모르겠고, 강사님 코드와 동일하게 작성한 것 같은데 뭐가 문젠지 잘 모르겠습니다. 특히나 아래 코드 중, { length: 100, severity: 'ERROR', .... } 이 부분이 반복적으로 로그에 찍히는데 어떻게 해결해야할지 잘 모르겠습니다. 이 글 을 보니, nomarlization을 진행하라는데 이게 맞는 솔루션인가요? 백앤드 해보고 싶어서 아는 것 없이 무작정 따라하는 중인데, 지식이 부족해서 제대로 된 해결방법이 뭔지 알 수가 없네요.. 2 middleware 설치 전까지는 회원가입 기능이 잘 되었었는데, middleware 설치 이후로는, 로컬호스트 3000에서 cors 에러가 뜹니다. (아래 이미지 첨부) 로그인, 회원가입 기능 어떤것도 되지 않는 상태이고, token도 생성되지 않습니다. 일단 계속해서 강의를 듣고 있는데 에러 해결이 안되어 더이상 진도를 나갈 수가 없어서 문의남깁니다 ㅠㅠ Access to XMLHttpRequest at 'http://localhost:4000/api/auth/me' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. { "message": "Network Error", "name": "AxiosError", "stack": "AxiosError: Network Error\n at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:168:14)", "config": { "transitional": { "silentJSONParsing": true, "forcedJSONParsing": true, "clarifyTimeoutError": false }, "adapter": [ "xhr", "http" ], "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "maxBodyLength": -1, "env": {}, "headers": { "Accept": "application/json, text/plain, /" }, "baseURL": "http://localhost:4000/api", "withCredentials": true, "method": "get", "url": "/auth/me" }, "code": "ERR_NETWORK", "status": null } 나름대로 검색도 해보고, node_modules 싹 날리고 재설치해봤으나.. ㅠㅠ 답변 기다리겠습니다 감사합니다

  • Next.js
  • node.js
  • 클론코딩
  • postgresql
  • react
  • 클론코딩
  • nodejs
  • docker
  • next.js
  • typescript
sharonhana12 댓글 2 좋아요 0 조회수 824

제너레이터 함수 안 yield 구문 실행에대해 질문드립니다..

미해결

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

function* test() { yield 1; yield 2; } =============== const gen = test() =============== gen.next () { "value": 1, "done": false } 보통 제너레이터 함수를 설명할때, 개발자 도구에서 이런식으로 설명을 많이 하는것같은데... 설명만 보면 yield 구문실행을 위해선, next() 라는 함수를 사용해야된다는건 알겠습니다.. 근데 실제코드에서는 next() 함수를 실행하지않는데, 어떻게 yield 구문들이 실행되는지 이해가 안됩니다..

  • react
  • node.js
  • express
  • redux
  • nodejs
  • next.js
  • Next.js
핵빈스 댓글 1 좋아요 0 조회수 253

Wsl mysql 질문

미해결

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

오늘 하루 mysql 설정하는거때문에 다 날려먹으면서 혼자서 해보고있는데 우여곡절 끝에 WSL에 mysql까지 실행 성공시켜서 그안에 react-nodebird database가 있는건 확인했는데 윈도우에 깐 mysql-workbench랑 연동을 못하고있는데 크게 상관 없을까요 제로초쌤..?

  • Next.js
  • node.js
  • redux
  • nodejs
  • react
  • next.js
  • express
CJW 댓글 1 좋아요 0 조회수 522

react-netflix-clone 오류 문의

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요! react-netflix-clone의 메인 페이지에서 발생한 오류에 대해 문의 드립니다. 문의1) key={movies.id} 에 대해 "list should have a unique "key" prop" 오류가 발생합니다. Row.js ... <div id={id} className='row__posters'> {movies.map((movie) => ( <SwiperSlide> <img key={movie.id} style={{ padding: "25px 0" }} className={`row__poster ${isLargeRow && "row__posterLarge"}`} src={`https://image.tmdb.org/t/p/original/${ isLargeRow ? movie.poster_path : movie.backdrop_path }`} alt={movie.name} onClick={() => { imageClickHandler(movie) }} /> </SwiperSlide> ))} </div> MainPage.js 에서 Row 컴포넌트를 하나만 정의해도 동일한 오류가 발생합니다. 문의2) useEffect eslint warning이 안나게 하려면 어떻게 해야 하나요? useEffect(() => { fetchMovieData(); }, []); ==> warning WARNING in [eslint] src/components/Row.js Line 24:8: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps 문의3) autoprefixer warning이 안나게 하려면 어떻게 해야 하나요? warning WARNING in ./src/components/Banner.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/components/Banner.css) Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (75:5) autoprefixer: start value has mixed support, consider using flex-start instead Banner.css (제공 소스 그대로 적용함) .banner { color: white; object-fit: contain; height: 448px; } @media (min-width: 1500px) { .banner { position: relative; height: 600px; } .banner--fadeBottom { position: absolute; bottom: 0; width: 100%; height: 40rem; } } @media (max-width: 768px) { .banner__contents { width: min-content !important; padding-left: 2.3rem; margin-left: 0px !important; } .banner__description { font-size: 0.8rem !important; width: auto !important; } .info { text-align: start; padding-right: 1.2rem; } .space { margin-left: 6px; } .banner__button { font-size: 0.8rem !important; border-radius: 4px !important; } } .banner__contents { margin-left: 40px; padding-top: 140px; height: 190px; } .banner__title { font-size: 3rem; font-weight: 800; padding-bottom: 0.5rem; } .banner__description { width: 45rem; line-height: 1.3; padding-top: 1rem; font-weight: 500; font-size: 1rem; max-width: 400px; height: 80px; } .banner--fadeBottom { height: 7.4rem; background-image: linear-gradient( 180deg, transparent, rgba(37, 37, 37, 0.61), #111 ); } .banner__buttons { display: flex; flex-direction: row; } .banner__button { display: flex; flex-direction: row; justify-content: start; align-items: center; cursor: pointer; outline: none; border: none; font-size: 1rem; font-weight: 700; border-radius: 0.2vw; padding: 0.4rem 1.8rem 0.4rem 1rem; margin-right: 1rem; } .banner__button:hover { color: #000; background-color: rgba(170, 170, 170, 0.9); transition: all 0.2s; } .play { background-color: white; color: black; } .info { background-color: rgba(109, 109, 110, 0.7); color: white; } .info:hover { background-color: rgb(74, 74, 74); color: white; } .space { margin-left: 4px; }

  • redux
  • typescript
  • react
  • next.js
  • tdd
  • Next.js
컴공과 댓글 0 좋아요 0 조회수 488

_app.tsx 에러

해결됨

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

_app.tsx 로 바꾸고나서 <Component/>에서 에러가 나는데 어떻게 해야하나요...?

  • node.js
  • react
  • graphql
  • seo
  • nodejs
  • next.js
  • Next.js
jisu2775 댓글 2 좋아요 0 조회수 524

npm run dev 실행 오류

미해결

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

npm run dev 로 server.ts 실행시, 에러가 발생합니다. 찾아보니, db 연결 시 인증에 관련된 오류 같은데... 어떻게 해야할지 잘 모르겠습니다. 오타 꼼꼼히 확인하고 docker-compose도 다시 실행 해봤는데 해결이 되지 않네요. 제가 수업 듣기 전에 pg-admin을 설치했었는데, 그것과 관련 있는 걸까요?

  • nodejs
  • node.js
  • react
  • postgresql
  • typescript
  • 클론코딩
  • docker
  • 클론코딩
  • next.js
  • Next.js
히히 댓글 1 좋아요 0 조회수 579

error An unexpected error occurred: "/Users/leejeonghun/Desktop/ ... /class/package.json: Unexpected token } in JSON at position 670".

해결됨

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

멘토님 안녕하세요, 1) 웹페이지를 실행시키는 yarn dev 명령어를 입력했을때, 페이위 제목과 같은 에러가 떴는데 무엇이 문제일까요? 2) 인덱스와 홈.모듈.css 두 창을 비교 설명하시는 과정에서 강의 그대로 따라 했는데 저의 홈.모듈 창에는 title 이 아얘 뜨지 않았습니다. 이 경우는 혹시 제가 모르는 사이 리액트 17이 아니라 18이 깔려있어서 그런걸까요? 아니면 다른 문제일까요? (분명 리액트 17.0.2?로 수정해서 저장하고서 설치했었는데요ㅜㅜ)

  • node.js
  • seo
  • react
  • nodejs
  • next.js
  • graphql
  • Next.js
충실한 독수리 댓글 1 좋아요 0 조회수 1045

우분투에서 작업시 윈도우로 mysql 설치하는 것에 관해서

미해결

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

제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?

  • redux
  • react
  • node.js
  • nodejs
  • next.js
  • express
  • Next.js
CJW 댓글 2 좋아요 0 조회수 421

props.data?.fetchBoard?.writer 와 props.data?.fetchBoard.writer 차이

해결됨

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

BoardDetail.presenter.js 파일에서 데이터 가져올 때, props.data ?.fetchBoard?.writer로 가져오시는 데, props.data ?.fetchBoard.writer로 해도 오류 안 나고 잘 작동하는데 한 번 더 ?를 사용해서 확인하는 이유가 궁금합니다!

  • react
  • node.js
  • seo
  • nodejs
  • graphql
  • next.js
  • Next.js
구구 댓글 1 좋아요 1 조회수 445

Error: error: Unexpected token `< (jsx tag start)`

해결됨

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

수업 자료와 똑같이 코딩을 하였는데도 불구하고 해당 페이지로 접속을 하면 위와같은 오류가 출력됩니다. 무슨문제인지 알 수 있을까요..? ㅜㅠ

  • node.js
  • Next.js
  • graphql
  • nodejs
  • next.js
  • react
  • seo
권건우 댓글 1 좋아요 0 조회수 1243

_app.js 수정 이후 오류

해결됨

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

위와 같이 수정하고 난 후 yarn dev로 실행시켰는데 버튼이 안나옵니다..ㅠㅠ 뭐가 문제인지 모르겠습니다

  • node.js
  • graphql
  • react
  • next.js
  • seo
  • nodejs
  • Next.js
강정현 댓글 1 좋아요 0 조회수 416

getStaticProps.tsx 에서 getStaticProps함수 질문

해결됨

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

안녕하세요! getStaticProps.tsx 에서 데이터 모킹에 사용하는 getStaticProps함수에서 질문입니다. getStaticProps함수에서 return 하는 props 값과 위에 있는 Example 함수가 어떻게 연결이 되는지 궁금합니다. export 가 그 기능을 하는거 같은데(export를 지우니 연동이 안되는거 같아서...) import 문도 따로 없는데 이게 어떻게 가능한가요 ???

  • next.js
  • seo
  • ssr
  • vercel
  • csr
  • vercel
  • Next.js
  • ssg
  • csr
  • ssr
  • ssg
극복밤송 댓글 1 좋아요 4 조회수 624

인기 태그

인프런 TOP Writers

주간 인기글