Netlify 배포 가능할까요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
혹시 넷플릭스로 Netlify 배포 가능할까요?
- react
- redux
- tdd
- typescript
- next.js
- 소프트웨어-테스트
달콤한 고양이
댓글 1
좋아요 0
조회수 574
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
Hydration 개념.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
질문 가이드 📖 강의에서 이해가 안가는 부분이 있나요? 강사님께서 hydration이라고 언급하셨는데 정확히 어떠한 개념인지 설명해주실 수 있나요?? Next.js 공부 1년동안 했는데도 개념이 모호하네요.. 😅 좋은 퀄리티의 강의 감사합니다.
- react
- typescript
- next.js
- next.js13
유시온
댓글 2
좋아요 1
조회수 807
33-01-jest 실습 도중 에러가 발생합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
콘솔 메시지 jest.config.js package.json 라이브러리들을 전부 설치하고 버전도 맞춰 보았는데 "Cannot use import statement outside a module" 이 에러가 뜨면서 테스트가 진행이 되지 않습니다. 무슨 문제인지 모르겠습니다.
- react
- node.js
- seo
- graphql
- next.js
park tae young
댓글 1
좋아요 0
조회수 542
코드지갑 저장할 떄 오류가 나요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
오류가 생기는 이유는 무엇인가요?
- react
- node.js
- seo
- graphql
- next.js
현준인뒈요
댓글 1
좋아요 0
조회수 332
CSS 첫번째 과제 관련 질문입니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
html css 안녕하세요! 얼마 전부터 강의 결제해서 보고 있는 코린이입니다. 언제나 도움 많이 받고 있습니다. css 첫번째 과제로 웹페이지 구현하던 중 질문이 생겼는데요, 전화번호 사이에 들어가는 '-' 부호는 어떻게 코드를 작성하면 될지 알 수 있을까요? 픽셀 크기가 지정되어있어 뭔가 코드를 쓰는 것 같기는 한데 감이 안 오더라구요ㅠㅠ 그리고 지금까지 구현한 내용도 이 김에 검토 받고 싶습니다! 확인해주시면 감사하겠습니다 :)
- react
- node.js
- seo
- graphql
- next.js
edo020424
댓글 1
좋아요 0
조회수 312
엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
선생님 안녕하세요. 좋은강의 너무 감사드립니다! 다름이 아니라 이번 강의에서 MapSection.tsx에서 const MapSection = () => { const { initializeMap } = useMap(); const onLoadMap = (map: NaverMap) => { initializeMap(map); }; return ( <> <Map onLoad={onLoadMap} /> // 이부분 <Markers /> // 이부분 </> ); }; export default MapSection; 이런식으로 return값에 위에 Map 컴포넌트, 아래에 Markers컴포넌트가 왔잖아요. 그래서 저는 맵위에 마커들을 덮어씌우는(?)형식으로 나오게 될 줄 알았습니다. 그런데 결과를 보니, 이렇게 map div밑에 자식으로 들어가있더라구요. 어떻게 이렇게 되는지 설명해주시면 감사하겠습니다!!
- seo
- next.js
- vercel
- csr
- ssg
- ssr
google_user
댓글 1
좋아요 1
조회수 414
onLoad함수 (script태그의 onLoad X)
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
Map.tsx에서 //Map.tsx if (onLoad) { onLoad(map); } 이 구문은 왜 쓰인걸까요?? MapSection.tsx 에서 Map을 부르는 부분을 봐도 // MapSection.tsx import Map from "./Map"; const MapSection = () => { return ( <Map onLoad={() => { console.log("load!"); }} /> ); }; export default MapSection; 별다른 기능을 하는 것 같지는 않아서요. onLoad를 정의하고 있는 Map.tsx의 Props에서도 type Props = { mapId?: string; initialCenter?: Coordinates; initialZoom?: number; onLoad?: (map: NaverMap) => void; }; 변수로 NaverMap을 받기만 하고 별다른 기능은 하는 것 같지가 않은데, 혹시 onLoad가 어떤 기능을 하고있는지 알려주실 수 있을까요?? ++ 추가로, const map = new window.naver.maps.Map(mapId, mapOptions); 이렇게 했을 때, 어떻게 <div id={mapId} style={{ width: "100%", height: "100%" }} /> 이 태그에 Map이 들어가는지 궁금합니다!
- seo
- next.js
- vercel
- csr
- ssg
- ssr
google_user
댓글 1
좋아요 1
조회수 446
dynamic에 대한 질문
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
NoSSR도 useEffect와 같이 실행되는 건가요? 선생님 안녕하세요. 좋은강의 너무 잘 듣고있습니다. 감사합니다. 윈도우 크기를 변경했을 때, width의 값이 같이 변경되는게 신기해서 질문드립니다. useEffect안의 math.random()의 값이 변경되는 타이밍에 window의 width값도 같이 변경되더라구요. 제 생각에는, 랜덤값이야 useEffect안에서 setData를 통해 계속 바꿔주고 있으니 변경되는게 맞다고 생각했지만, window값은 처음 값을 받아오면 새로고침을 해주기 전까지는 값이 변경되지 않을줄 알았거든요. 그런데 랜덤값이 변경될 때 값이 같이 변경되더라구요. 그래서 혹시 이게 dynamic이 useEffect와 같은 역할을 한다면, window크기를 변경할 때마다 width의 값이 바로바로 바껴야 할 텐데, 그건 또 아니고 랜덤값이 바뀔때 같이 바뀌니까, 이게 어떤식으로 실행되는건지 알고싶어서 질문드립니다. import { NextPage } from "next"; import dynamic from "next/dynamic"; import { useEffect, useState } from "react"; // import NoSSR from "@/components/section1/NoSSR"; const NoSSR = dynamic(() => import("@/components/section1/NoSSR"), { ssr: false, }); const Example: NextPage = () => { const [data, setData] = useState(0); useEffect(() => { const delayInSeconds = 10; new Promise<number>((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ).then((result) => setData(result)); console.log("NoSSR : ", NoSSR); }); return ( <main> <h1>Client - Side data fetching</h1> <p>값 : {data}</p> <NoSSR /> </main> ); }; export default Example; 위 코드는 강의 보면서 따라치고, 궁금해서 로그를 찍어본 코드입니다. 딜레이를 10초로 주고, 그 안에서 윈도우 크기를 계속 바꿔봤는데, 윈도우 크기를 바꾼다고 해서 바로바로 변경되는 게 아니라, 10초가 지나고 랜덤값이 바뀔 때, 같이 바뀝니다.
- seo
- next.js
- vercel
- csr
- ssg
- ssr
google_user
댓글 1
좋아요 1
조회수 470
types.ts 파일 생성이 안됩니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
설치 항목을 전부 설치하고 다시 설치하고 주소도 바꿔서 해봤는데 types.ts 파일이 생성되지 않는 이유를 알려주세요 ㅠㅠ
- react
- node.js
- seo
- graphql
- next.js
productechcenter
댓글 1
좋아요 1
조회수 340
Vercel 배포된 사이트에서 캐시 비우기
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
Vercel로 배포한 사이트에서 캐시 비우기가 잘 안되는거 같아요. Next.js 앱 단 외에 Vercel쪽에서도 캐싱이 되는건가요? 만약 그렇다면 "캐시 비우기" 버튼 구현을 어떻게 하면 될까요? 강의 너무 유익하고 잘 들었습니다 😊
- react
- typescript
- next.js
- next.js13
JIN
댓글 1
좋아요 2
조회수 2011
typscript 설치과정중 질문드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 typescript 설치과정에서 말씀주신대로 다 따라했는데 안되네요 ㅜㅜ 제가 따라한 부분은 일단 node_modules 지우고, yarn.lock 파일 지우고 말씀주신대로 17.0.2 버전으로 변경다했습니다. 그리고 난후에 tsconfig.json 빈파일로 만들고 yarn install 후 yarn dev 하면 다음과 같이 yarn add --dev @types/react 명령어 입력하라고 나오는데 어떻게 해야할지 모르겠네요.. ㅜㅜ package.json.lcok 파일도 지워봤는데 똑같습니다 tsconfig.json파일을 지우면 괜찮은데 tsconfig.json만 빈파일로 만들면 에러가 나오네요
- react
- node.js
- seo
- graphql
- next.js
정민기
댓글 1
좋아요 0
조회수 263
별점 수정 초기화를 막고 싶습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수정 버튼을 클릭하면 기존 값의 작성자와 내용이 작성되어 있는데 별점도 똑같이 유지 시키고 싶어서 다음과 같이 작성 했습니다. <S.Star onChange={props.setStar} value={props.star !== 0 ? props.star : props.el?.rating ?? 0} /> 별점을 선택하고 댓글 등록하기 클릭하면 함수를 통해 setStar(0) 초기화도 해주었고 수정 아이콘을 클릭했을 때 기존 등록한 별점도 유지되게 했는데 수정하기 버튼을 클릭하면 별점이 0으로 수정이 됩니다. 여기서 어느 부분을 건들어야 할지 모르겠어요.
- react
- node.js
- seo
- graphql
- next.js
초무
댓글 2
좋아요 0
조회수 400
리액트 쿼리 SSR 부분 질문있습니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강의 프로젝트를 제로초님 깃헙 코드 참고해서 리액트 쿼리로 다시 만들어 보는중인데요 회원가입 페이지에 SSR 적용하는 과정에서 다음과 같은 에러가 납니다. 코드를 보면 //pages/signup.tsx export const getServerSideProps = async (context: GetServerSidePropsContext) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } const response = await loadMyInfoAPI(); if (response.data) { return { redirect: { destination: '/', permanent: false, }, }; } return { props: {}, }; }; // api/user.ts export function loadMyInfoAPI() { return axios.get('/user').then((response) => response.data); } // routes/user.js router.get('/', async (req, res, next) => { try { if (req.user) { const fullUwerWithoutPassword = await User.findOne({ where: { id: req.user.id }, attributes: { exclude: ['password'] }, include: [ { model: Post, attributes: ['id'] }, { model: User, as: 'Followings', attributes: ['id'] }, { model: User, as: 'Followers', attributes: ['id'] }, ], }); res.status(200).json(fullUwerWithoutPassword); } else { res.status(200).json(null); } 로그인안한 상태에서 유저 정보를 불러오면 null이 반환되서 에러가 나는거 같은데요 const response = await loadMyInfoAPI(); if (response.data) { return { redirect: { destination: '/', permanent: false, }, }; } 이부분을 지우고 다음과 같이 바꿔주면 export const getServerSideProps = async (context: GetServerSidePropsContext) => { const cookie = context.req ? context.req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if (context.req && cookie) { axios.defaults.headers.Cookie = cookie; } return { props: {}, }; }; 에러가 사라지는데 지워도 상관없는건가요??
- react
- redux
- node.js
- express
- next.js
ㅇㅅㅇ?
댓글 1
좋아요 0
조회수 417
process.env.REACT_APP_MOVIE_DB_API_KEY를 찾지 못하고 있어요
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
.env 생성하고 axios.js에서 process.env.REACT_APP_MOVIE_DB_API_KEY를 찾지 못하고 있어요 process.env.REACT_APP_MOVIE_DB_API_KEY=00000000
- react
- redux
- tdd
- typescript
- next.js
- 소프트웨어-테스트
달콤한 고양이
댓글 3
좋아요 0
조회수 641
삭제하기 기능 구현 레퍼런스 코드는 없을까요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시글 상세 화면에서 삭제하기 기능을 구현해주세요. 이부분에 대한 레퍼런스 코드가 깃허브에 등록된 내용에는 나오지 않는데 알고 싶습니다
- react
- node.js
- seo
- graphql
- next.js
손성오
댓글 2
좋아요 0
조회수 504
css in js 관련 질문드립니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 현재 리액트 초반부 강의 수강중에 있습니다. 포트폴리오 코딩중에 있는데 css in js 에서 일반적인 css에서 처럼 전체선택자 *를 사용하여 box-sizing: border-box; 로 하고싶은데 검색하봐도 방법이 나오지 않습니다.. css in js 에서 전체선택자는 어떤식으로 사용할 수 있을까요? MDN 처럼 css in js 관련 아카이브가 따로 있을까요?
- react
- node.js
- seo
- graphql
- next.js
티몬
댓글 1
좋아요 0
조회수 277
section27 퀴즈 질문입니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
등록 시 화면 페이지는 바뀌는데 바뀌자마자 위와 같은 오류가 떠서 계속 찾아보는데 혼자는 해결하기 어려워 여쭤봅니다 ㅠㅠ 어디가 틀린 걸까요? mutation은 제대로 된 걸 확인했는데 fetch가 안 되네요. 폴더 구조는 05/boards/new index.js 05/boards/products/[productId] index.js import { useState } from "react"; import { useMutation, gql } from "@apollo/client"; import { useRouter } from "next/router"; const CREATE_PRODUCT = gql` mutation createProduct( $seller: String $createProductInput: CreateProductInput! ) { createProduct(seller: $seller, createProductInput: $createProductInput) { _id number message } } `; export default function ProductRegPage() { const router = useRouter(); const [seller, setSeller] = useState(); const [name, setName] = useState(); const [detail, setDetail] = useState(); const [price, setPrice] = useState(); const [createProduct] = useMutation(CREATE_PRODUCT); const onClickRegister = async () => { try { const result = await createProduct({ variables: { seller, createProductInput: { name, detail, price, }, }, }); console.log(result); router.push(`/05/boards/products/${result.data.createProduct._id}`); } catch (error) { alert(error.message); } }; const onChangeSeller = (event) => { setSeller(event.target.value); }; const onChangeName = (event) => { setName(event.target.value); }; const onChangeDetail = (event) => { setDetail(event.target.value); }; const onChangePrice = (event) => { setPrice(parseInt(event.target.value)); }; return ( <div> 판매자: <input type="text" onChange={onChangeSeller} /> 상품명: <input type="text" onChange={onChangeName} /> 상품내용: <input type="text" onChange={onChangeDetail} /> 상품가격: <input type="text" onChange={onChangePrice} /> <button onClick={onClickRegister}>상품 등록</button> </div> ); } import { useQuery, gql } from "@apollo/client"; import { useRouter } from "next/router"; const FETCH_PRODUCT = gql` query fetchProduct($productId: ID) { fetchProduct(productId: $productId) { seller name detail price } } `; export default function ProductDetailPage() { const router = useRouter(); console.log(router); const { data } = useQuery(FETCH_PRODUCT, { variables: { productId: router.query.productId }, }); console.log(data); return ( <div> <div>판매자:{data ? fetchProduct?.seller : "loading..."}</div> <div>상품명:{data ? fetchProduct?.name : "loading..."}</div> <div>상품내용:{data ? fetchProduct?.detail : "loading..."}</div> <div>상품가격:{data ? fetchProduct?.price : "loading..."}</div> </div> ); }
- react
- node.js
- graphql
- next.js
희주
댓글 1
좋아요 0
조회수 257
.eslintrc.js module 키워드에 빨간밑줄
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위와 같은 에러가 생기는데 규칙을 검사하는 건 문제가 없긴합니다. 에러 내용을 번역해서 봤는데도 무슨 말인지 잘 모르겠고 어떻게 해결해야하는지 감도 안옵니다..
- react
- node.js
- seo
- graphql
- next.js
joka
댓글 1
좋아요 0
조회수 295
다음 영상에서는 메뉴좀 크게보이게 해주세요.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
노트북에서 보면 프로젝트 디렉토리 폴더/파일들이 너무 작아서 안보이네요.
- react
- typescript
- next.js
- next.js13
doonee
댓글 2
좋아요 1
조회수 484
27:25초에 나의그래프큐엘셋팅 파일로 이동하는방법
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
27:25초에 나의그래프큐엘셋팅 파일로 바로 이동해지는데 어떻게 하는걸까요
- react
- node.js
- seo
- graphql
- next.js
손성오
댓글 1
좋아요 0
조회수 233
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv