172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
next configuration에서 images.domains는 deprecated 되었음으로 remotePatterns를 사용하시길 권장드립니다. images : { remotePatterns: [ { protocol: 'https', hostname: 'shopping-phinf.pstatic.net', pathname: '**', } ] } https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
현재 강의를 너무 잘 듣고 있는 수강생입니다. 강의에 대한 내용은 아니지만 여쭤보고 싶은게 있어 질문을 드립니다. 감정일기 만드는 부분을 따라하면서 코드도 어느정도 이해는 하고 있지만 만약 혼자 이러한걸 만든다고 했을 때 예를 들어 Home 페이지 부분에서 해당 날짜에 작성된 리스트가 나오게 할려고 하면 getMonthlyData함수에 작성된 코드처럼 저렇게 생각도 하지 못할것같고 또 pivotData, data를 이용해야되니 매개변수를 넣으면 되겠다... 하는 이러한 생각도 하지 못할것같은데 어떤 식으로 공부를 하면 감정일기장 뿐만 아닌 다른것도 혼자서 코드를 작성할 수 있고 또 활용도 할 수 있을지 궁금합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 강사님 좋은 강의 감사드립니다. 빌드 기호에 관해 질문있습니다. 영상 19:05초에 App Router의 Static은 Page Router의 SSG와 같다고 하셨는데요. Page Router의 기호 App Router의 기호 보시는 바와 같이 Page Router의 Static과 App Router의 Static 문구가 같습니다. (prerendered as static content) 궁금한것은 1 App Router의 Static이 Page Router의 SSG와 같다면 왜 App Router Static 설명이 Page Router SSG인 (prerendered as static HTML) 설명이 아닌 Page Router의 Static과 동일한걸까요? (prerendered as static content) 즉 App Router의 (Static): prerendered as static HTML이어야 맞는 거 아닌가요? (Static) prerendered as static content 왜 인 걸까요? 헷갈리네요 ㅜㅜ 2. 기존 Page Route의 Static은 어떤 식으로 동작한 건가요? 그냥 정적인 페이지인건가요? 감사합니다!
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 자료가 있는 항목을 누르면 이렇게 아무것도 뜨지 않습니다 ㅜ
미해결
한 입 크기로 잘라먹는 Next.js
제가 예전에 단톡방 관련 공지를 본거같은데 강의 3개를 다 들어서 어떤강의에있는 공지였는지 못찾겠네요.. 입장 방법이나 조건이 따로있을까요??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션23인 검색 기능 구현 파트 이후로는 포트폴리오 강의가 제공되지 않고 있는데, 이 후의 중고마켓 웹사이트에 대한 포트폴리오 리뷰 강의는 제공되지 않고, 스스로 하되, 포트폴리오 리뷰 자료를 참고하면 되는 건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 강의 잘 듣고 있습니다. 강의를 듣다가 의문이 생겨 질문드립니다. 아래 두 코드는 모두 정상적으로 작동합니다. 그럼에도 불구하고, 두 번째 코드를 사용하는 이유는 혹시 나중에 onDelete 기능에 새로운 로직이 추가될 가능성에 대비하기 위해서인가요? 만약 이 기능이 Props로 전달받은 기능만을 사용한다면, 첫 번째 코드로 작성해도 괜찮은지 궁금하여 질문드립니다. <button onClick={() => {onDelete(id)} }>삭제</button> const onClickDeleteButton = () => { onDelete(id); } return ( //생략 <button onClick={onClickDeleteButton}>삭제</button> );
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
제가 API Server 구축에 더 관심이 가서... 세션 4까지 복습했는데, 바로 DRF로 넘어가도 될까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
현재 일기 관리 기능 구현하기2 부분의 강의를 보고 있는데 강의에서 const DiaryStateContext = createContext(); const DiaryDispatchContext = createContext(); 이렇게 createContext를 두번 작성이 되었고 또 DiaryStateContext는 value로 data를 DiaryDispatchContext는 value로 onCreate, onUpdate, onDelete 이렇게 각각 보내는데 왜 이렇게 두번작성을 하는 것인지 그리고 그냥 DiaryStateContext 이 부분에 value로 data와 onCreate, onUpdate, onDelete 이걸 같이 보내면 안되는건가요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요! 강의 잘 듣고 있습니다!!! 🙂 React Query 공식 문서에 나오는 페이지네이션 기능에 대해 궁금한 점이 있습니다. 제가 직접 시도해봤는데 어려워서 그런데, 혹시 이 기능을 강의에서 다룰 계획이 있으실까요? 선생님께서 설명을 잘해주셔서 강의가 있다면 정말 좋을 것 같습니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
예를들어 부트스트랩처럼 모달이나 반응형 디자인 같은거를 편리하게 해주는 기능들이요 그냥 다 직접 만들어야 하나요? 같이 쓸수있는게 있나요?
해결됨
한 입 크기로 잘라먹는 Next.js
강의에 나오는 JSON 데이터를 한 눈에 보기 힘드신 분들은 아래 확장 프로그램을 통해 JSON 데이터를 시각적으로 구조화해서 좀 더 보기 좋게 확인하실 수 있습니다. JSON Viewer https://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 공부를 하다가 index.css 파일과 App.css 이 두개가 조금 헷갈리더라구요. 예를 들어 App.css도 폰트를 적용하면 전부다 적용이 되고 index.css도 똑같이 되는데 그럼 index.css는 어떤부분일때 작성이 되고 App.css는 어떤부분일 때 작성이 되는것인지 궁금합니다
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
백엔드도 나온다면 완벽한 시리즈로 듣고 싶어서요
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
안녕하세요! 강의를 쭉 듣고, 배포 단계까지 왔는데 에러가 생겨서 진행이 안되어 문의드립니다! vercel에서 에러는 Failed to compile. src/app/[location]/page.tsx Type error: Type 'Props' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ location: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] Error: Command "npm run build" exited with 1 이며, 그전에도 Route "/[location]" used params.location . params should be awaited before using its properties. Learn more: 위와 같은 에러가 떴고, 이는 경로 및 쿼리 파라미터를 위한 객체에서 런타임 에러가 뜨는걸로 확인했습니다! 강의를 똑같이 따라갔는데, 위와 같은 에러가 나는게 의아하여 한번 문의드립니다! import HomeButton from "../components/HomeButton"; import { getForecast } from "../utils/getForecast"; type Props = { params: { location: string; }; searchParams: { name: string; }; }; export function generateMetadata({ searchParams }: Props) { return { title: `날씨 앱 - ${searchParams.name}`, description: `${searchParams.name} 날씨를 알려드립니다`, }; } export default async function Detail({ params, searchParams }: Props) { const name = searchParams.name; const res = await getForecast(params.location); return ( <> <h1>{name}의 3일 예보</h1> <ul> {res.forecast.forecastday.map((day) => ( <li key={day.date}> {day.date} / {day.day.avgtemp_c} </li> ))} </ul> <HomeButton /> </> ); } 크리스마스 쉬는날 연락드려, 죄송하며 빠른 답변 부탁드립니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새 강의도 쿠폰 받아서 잘 구매 하였습니다. 궁금한 것은 기존 강의를 다 듣고 새 강의를 수강해야 하는 것인지 기존 강의의 진도와 새 강의의 진도가 어느 부분인지 어떻게 바뀐 것 인지에 대해 이해가 안 가서 어떻게 해야하는지 알려주는 공지 또는 간단 영상이 필요할 것 같습니다. 기존 강의의 커리큘럼과 비슷하나 좀 바뀐 부분이 있을 것 같아서요. 기존 강의를 다 수강 후 복습 + 새로운 기술을 익힐 겸 새 강의를 수강하는 것이 맞는지, 아니면 기존 강의는 수강을 멈추고 새로운 강의를 다시 수강하면 되는 것인지 알려주시면 감사하겠습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
index.html에서 다룬 코드입니다. 경로를 바꿀때마다 vercel --prod로 프로젝트 갱신해서 배포했습니다. meta 태그에서 썸네일 이미지를 표현하는 og:image 프로퍼티와 컨텐츠에 썸네일을 하고 싶은 이미지를 src / assets 파일에 todayfeeling.png 로 저장해놨습니다. 탭 아이콘 표현은 절대 경로로 표현했을 때 비로소 적용이 되었습니다. (강의에서는 href="/favicon.ico"로 표현했지만 저는 강의랑 똑같이 했을 경우에 아이콘이 나타나지않아서 아래 코드와 같이 경로를 추가해서 아이콘을 띄웠습니다.) 썸네일 이미지 때문에 content ="/todayfeeling.png" content ="src/assets/todayfeeling.png" content ="/src/assets/todayfeeling.png" (블로그에 올린 이미지 주소) content ="https://velog.velcdn.com/images/foreveryejin/post/65845dd4-a999-4344-9fb4-3710b07f5a3d/image.png" content ="./src/assets/todayfeeling.png" 여러 경로를 바꿔가면서 해봤는데 안되더라구요. 그래서 다른 포털사이트에서 실제로 사용하는 meta 태그를 긁어와서 사용해봤는데 안되네요... 다른 기능들은 잘 작동하는데 이것만 말썽입니다..! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="src/assets/icon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>오늘 하루 감정</title> <meta property="og:title" content="오늘의 감정" /> <meta property="og:image" content="/todayfeeling.png" /> <meta property="og:description" content="예진이의 오늘의 감정 일기장" /> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> pc : 모바일 : 저의 깃헙 링크입니다! 확인 부탁드립니다. https://github.com/yyejin00/diary-with-emotions 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요, 수업 잘 듣고 따라가고 있습니다~~!! 다름이 아니라 , 아무래도 graphQL를 이용한것보다 취직하고싶은 회사에서 대부분 REST API를 사용하는거같아 혹시 fetch 또는 axios를 사용하는 방법은 강의에 추가할 계획이 없으실까요? 그리고 nextjs에서는 axios를 사용하는 대신에 fetch를 사용하는것이 맞을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 프로젝트에서 error.tsx 를 띄우는 예시로, 백엔드 서버를 종료하여 데이터를 받아오지 못하게 함으로써 error.tsx 가 표시되는 경우를 다루셨습니다. 이때, "백엔드 서버를 종료해서 데이터를 받아오지 못하게 함"을 "페이지가 렌더링되지 못하게 함"으로 이해해도 괜찮은지 궁금합니다. 이 질문을 드리게 된 이유는, 프로젝트에서 에러를 처리할 때 error.tsx 나 에러 페이지를 띄우는 것 외에도 다양한 방식으로 에러를 처리할 수 있기 때문입니다. 예를 들어, 에러 모달을 띄운다거나, 다른 페이지로 이동시키는 등의 방법도 있습니다. 그래서 error.tsx 가 어떤 종류의 에러에 대한 대비책인지 명확히 이해하고 싶습니다. 저는 error.tsx 가 예상치 못한 500번대 서버 에러와 같은 페이지나 컴포넌트 렌더링 실패 를 처리하는 페이지라고 이해하고 있는데, 제 이해가 맞는지 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 ! 해당 리액트 강의에서 했던 실습에서는 기능위주? 로 진행해서 궁금증이 생겼습니다 ! 만약 리액트를 사용해서 간단한 정보 공유 웹 사이트를 만든다면 텍스트의 양이 많아지는데 이런 경우에는 파일 내부에 내용을 작성하면 코드가 길어지니, 직접 api 제작하고, 연동하는 게 맞는 거겠죠!?
