173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
지금 강의에서 리뷰 리스트를 조회하는 api를 서버액션으로 작성해도 상관없는건가요? 예를 들어 직접 리뷰 리스트 DB에 접근해서 데이터를 가져오고 반환해주고, 페이지 컴포넌트에서는 단순히 const data = await getReview(); 를 작성해서 불러오는 방법처럼 말이죠 이 질문의 의도는 어떤 상황에서 서버액션을 써야하고, 어떤 상황에서 fetch를 써야하는지 아직 감이 잡히지 않아 질문드립니다! 강의를 보면서 서버액션은 Form에만 사용해야하는구나..라고 생각이들어서 혼란이 생겼던 것 같습니다.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
navList.forEach((li, index)=>{ const roma = ['I', 'II', 'III']; const arabic = ['1','2','3'] const linkAddr = ['naver.com','google.com','inflearn.com']; // button 링크 주소 li.addEventListener('click',()=>{ if(!playing) { next = index; if(li.classList.contains('active')) return; for(let i=0;i < navList.length; i++) { navList[i].classList.remove('active'); } li.classList.add('active'); const addr = /*html*/`location.href='http://${linkAddr[next]}'`; // button 속성 값 const tl = gsap.timeline() .add(leave[current].play()) .add(titleLeave.play(),'-=1') .set('.title h1',{text:`toystory ${roma[index]}`}) .set('.title p',{text:`토이스토리 시즌 ${arabic[index]}`},'<') .add(enter[next].play()) .add(titleEnter.play()) tl.eventCallback('onComplete',()=>{ const btnLink = document.querySelector('.title button'); // button 요소 가져오기 btnLink.setAttribute('onclick',addr); // button의 onclick 속성 추가 current = next; playing = false; }) playing = true; } }) }) window.addEventListener('load',()=>{ const tl = gsap.timeline() .add(enter1.play()) // enter 타임라인 실행 .add(titleEnter.play()) tl.eventCallback('onComplete', () => { const btnLink = document.querySelector('.title button'); //처음 실행시 button에 속성값 추가 btnLink.setAttribute('onclick',"location.href='http://naver.com'"); //처음 실행시 button에 속성값 추가 playing = false; }) // page03()[1].play() // leave 타임라인 실행 })
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요. 4강 토이스토리 practice에서 강의 중 선생님께서 "WATCH NOW" 버튼의 href?값을 페이지에 따라 변경할 수 있다고 하셨는데요. gsap을 이용해서 변경할 수 있는 방법이 있는 건지요? 아님 자바스크립트 함수 안에서 직접 세팅하는 걸까요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이런 화면만 계속 뜨는데 뭐가 문제일까요?..
미해결
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 단축키도 중간에 이야기 해주시면 안될까요? 물론 직접 찾아보면서 하긴하지만 잘 안나오는 경우도 있고 그때마다 영상 멈추고 찾아보는거보다 강사님께서 알려주시면 좋을듯해서요..
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
function solution(m, arr) { arr.sort((a, b) => a[0] + a[1] - (b[0] + b[1])); let answer = 0; for (let discount = 0; discount < arr.length; discount++) { //할인이 적용되는 상품 let discountPrice = arr[discount][0] / 2 + arr[discount][1]; let budget = m - discountPrice; let temp = 1; for (let undiscount = 0; undiscount < arr.length; undiscount++) { //할인이 적용된 상품은 제외 if (discount === undiscount) continue; let price = arr[undiscount][0] + arr[undiscount][1]; budget -= price; //예산을 초과하는 경우 if (budget >= 0) temp++; if (budget < 0) budget += price; } answer = Math.max(answer, temp); } return answer; }
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
function solution(n, arr) { let answer = 0; //모든 학생이 짝이 되는 경우 for (let mento = 1; mento <= n; mento++) { for (let mentee = 1; mentee <= n; mentee++) { //자기자신과 짞을 될수 없음 if (mento === mentee) continue; //시험별 멘토 멘티 등수 let mentoGrade, menteeGrade; let isPossible = true; //시험별 멘토 멘티 등수 비교 for (let test = 0; test < arr.length; test++) { mentoGrade = arr[test].indexOf(mento); menteeGrade = arr[test].indexOf(mentee); if (mentoGrade >= menteeGrade) { isPossible = false; break; } } //모든 시험에서 멘토 등수가 멘티 등수보다 낮은 경우 가능한 경우 if (isPossible) answer++; } } return answer; }
미해결
React Native with Expo: 제로초에게 제대로 배우기
만들어보고 있는 앱을 실 기기에 설치해서 테스트 해볼 일이 있어 apk 파일을 추출하려 합니다. 백엔드 url이 http 라 app.json android 내에 useClearTextTraffic true 도 추가해주었습니다. "usesCleartextTraffic": true eas.json 내 build 에 release 를 추가하였고, "release": { "android": { "buildType": "apk" } } eas build --platform android --profile release 명령어를 통해 빌드 했습니다. 생성된 apk 를 실 기기에 설치 후 실행 했을 때 api 호출을 통해 데이터를 받아와서 뿌려주는 부분에 데이터가 하나도 나오고 있지 않습니다. 설치 된 development build 를 에뮬레이터에서 실행해보아도 마찬가지로 데이터가 하나도 나오지 않고, catch 부분에서 에러도 콘솔에 찍히지 않고 있습니다.ㅠㅠ npm run android 실행 후 s > a 입력해서 expo go 환경에서 확인해봤을 땐 데이터도 잘 받아와지는데 혹시 어느 부분을 확인해봐야할까요? npm ls react ├─┬ @expo/vector-icons@14.1.0 │ └── react@19.0.0 deduped ├─┬ @react-native-community/datetimepicker@8.4.1 │ └── react@19.0.0 deduped ├─┬ @react-native-kakao/core@2.4.0 │ └── react@19.0.0 deduped ├─┬ @react-native-kakao/user@2.4.0 │ └── react@19.0.0 deduped ├─┬ @react-navigation/bottom-tabs@7.4.6 │ └── react@19.0.0 deduped ├─┬ @react-navigation/drawer@7.5.7 │ ├─┬ react-native-drawer-layout@4.1.12 │ │ └── react@19.0.0 deduped │ ├── react@19.0.0 deduped │ └─┬ use-latest-callback@0.2.4 │ └── react@19.0.0 deduped ├─┬ @react-navigation/elements@2.6.3 │ ├── react@19.0.0 deduped │ └─┬ use-sync-external-store@1.5.0 │ └── react@19.0.0 deduped ├─┬ @react-navigation/native@7.1.17 │ ├─┬ @react-navigation/core@7.12.4 │ │ └── react@19.0.0 deduped │ └── react@19.0.0 deduped ├─┬ expo-blur@14.1.5 │ └── react@19.0.0 deduped ├─┬ expo-font@13.3.2 │ └── react@19.0.0 deduped ├─┬ expo-image@2.4.0 │ └── react@19.0.0 deduped ├─┬ expo-linear-gradient@14.1.5 │ └── react@19.0.0 deduped ├─┬ expo-linking@7.1.7 │ └── react@19.0.0 deduped ├─┬ expo-router@5.1.4 │ ├─┬ @radix-ui/react-slot@1.2.0 │ │ ├─┬ @radix-ui/react-compose-refs@1.1.2 │ │ │ └── react@19.0.0 deduped │ │ └── react@19.0.0 deduped │ ├─┬ @react-navigation/native-stack@7.3.25 │ │ └── react@19.0.0 deduped │ └─┬ react-native-is-edge-to-edge@1.2.1 │ └── react@19.0.0 deduped ├─┬ expo-status-bar@2.2.3 │ ├─┬ react-native-edge-to-edge@1.6.0 │ │ └── react@19.0.0 deduped │ └── react@19.0.0 deduped ├─┬ expo@53.0.20 │ ├─┬ expo-asset@11.1.7 │ │ └── react@19.0.0 deduped │ ├─┬ expo-keep-awake@14.1.4 │ │ └── react@19.0.0 deduped │ └── react@19.0.0 deduped ├─┬ react-dom@19.0.0 │ └── react@19.0.0 deduped ├─┬ react-native-gesture-handler@2.24.0 │ └── react@19.0.0 deduped ├─┬ react-native-gifted-charts@1.4.63 │ ├─┬ gifted-charts-core@0.1.65 │ │ └── react@19.0.0 deduped │ └── react@19.0.0 deduped ├─┬ react-native-reanimated@3.17.5 │ ├─┬ react-native-is-edge-to-edge@1.1.7 │ │ └── react@19.0.0 deduped │ └── react@19.0.0 deduped ├─┬ react-native-safe-area-context@5.4.0 │ └── react@19.0.0 deduped ├─┬ react-native-screens@4.11.1 │ ├─┬ react-freeze@1.0.4 │ │ └── react@19.0.0 deduped │ └── react@19.0.0 deduped ├─┬ react-native-svg@15.11.2 │ └── react@19.0.0 deduped ├─┬ react-native-web@0.20.0 │ └── react@19.0.0 deduped ├─┬ react-native-webview@13.13.5 │ └── react@19.0.0 deduped ├─┬ react-native@0.79.5 │ ├─┬ @react-native/virtualized-lists@0.79.5 │ │ └── react@19.0.0 deduped │ └── react@19.0.0 deduped └── react@19.0.0 npm ls react-native ├─┬ @expo/vector-icons@14.1.0 │ └── react-native@0.79.5 deduped ├─┬ @react-native-async-storage/async-storage@2.1.2 │ └── react-native@0.79.5 deduped ├─┬ @react-native-community/datetimepicker@8.4.1 │ └── react-native@0.79.5 deduped ├─┬ @react-native-kakao/core@2.4.0 │ └── react-native@0.79.5 deduped ├─┬ @react-native-kakao/user@2.4.0 │ └── react-native@0.79.5 deduped ├─┬ @react-navigation/bottom-tabs@7.4.6 │ └── react-native@0.79.5 deduped ├─┬ @react-navigation/drawer@7.5.7 │ ├─┬ react-native-drawer-layout@4.1.12 │ │ └── react-native@0.79.5 deduped │ └── react-native@0.79.5 deduped ├─┬ @react-navigation/elements@2.6.3 │ └── react-native@0.79.5 deduped ├─┬ @react-navigation/native@7.1.17 │ └── react-native@0.79.5 deduped ├─┬ expo-apple-authentication@7.2.4 │ └── react-native@0.79.5 deduped ├─┬ expo-blur@14.1.5 │ └── react-native@0.79.5 deduped ├─┬ expo-constants@17.1.7 │ └── react-native@0.79.5 deduped ├─┬ expo-image@2.4.0 │ └── react-native@0.79.5 deduped ├─┬ expo-linear-gradient@14.1.5 │ └── react-native@0.79.5 deduped ├─┬ expo-linking@7.1.7 │ └── react-native@0.79.5 deduped ├─┬ expo-router@5.1.4 │ ├─┬ @expo/metro-runtime@5.0.4 │ │ └── react-native@0.79.5 deduped │ ├─┬ @react-navigation/native-stack@7.3.25 │ │ └── react-native@0.79.5 deduped │ └─┬ react-native-is-edge-to-edge@1.2.1 │ └── react-native@0.79.5 deduped ├─┬ expo-status-bar@2.2.3 │ ├─┬ react-native-edge-to-edge@1.6.0 │ │ └── react-native@0.79.5 deduped │ └── react-native@0.79.5 deduped ├─┬ expo-symbols@0.4.5 │ └── react-native@0.79.5 deduped ├─┬ expo-system-ui@5.0.10 │ └── react-native@0.79.5 deduped ├─┬ expo-web-browser@14.2.0 │ └── react-native@0.79.5 deduped ├─┬ expo@53.0.20 │ ├─┬ expo-asset@11.1.7 │ │ └── react-native@0.79.5 deduped │ ├─┬ expo-file-system@18.1.11 │ │ └── react-native@0.79.5 deduped │ └── react-native@0.79.5 deduped ├─┬ react-native-gesture-handler@2.24.0 │ └── react-native@0.79.5 deduped ├─┬ react-native-gifted-charts@1.4.63 │ ├─┬ gifted-charts-core@0.1.65 │ │ └── react-native@0.79.5 deduped │ └── react-native@0.79.5 deduped ├─┬ react-native-reanimated@3.17.5 │ ├─┬ react-native-is-edge-to-edge@1.1.7 │ │ └── react-native@0.79.5 deduped │ └── react-native@0.79.5 deduped ├─┬ react-native-safe-area-context@5.4.0 │ └── react-native@0.79.5 deduped ├─┬ react-native-screens@4.11.1 │ └── react-native@0.79.5 deduped ├─┬ react-native-svg@15.11.2 │ └── react-native@0.79.5 deduped ├─┬ react-native-webview@13.13.5 │ └── react-native@0.79.5 deduped └─┬ react-native@0.79.5 └─┬ @react-native/virtualized-lists@0.79.5 └── react-native@0.79.5 deduped npm ls expo ├─┬ @react-native-community/datetimepicker@8.4.1 │ └── expo@53.0.20 deduped ├─┬ @react-native-kakao/core@2.4.0 │ └── expo@53.0.20 deduped ├─┬ expo-apple-authentication@7.2.4 │ └── expo@53.0.20 deduped ├─┬ expo-blur@14.1.5 │ └── expo@53.0.20 deduped ├─┬ expo-build-properties@0.14.8 │ └── expo@53.0.20 deduped ├─┬ expo-constants@17.1.7 │ └── expo@53.0.20 deduped ├─┬ expo-dev-client@5.2.4 │ ├─┬ expo-dev-launcher@5.1.16 │ │ └── expo@53.0.20 deduped │ ├─┬ expo-dev-menu-interface@1.10.0 │ │ └── expo@53.0.20 deduped │ ├─┬ expo-dev-menu@6.1.14 │ │ └── expo@53.0.20 deduped │ ├─┬ expo-manifests@0.16.6 │ │ └── expo@53.0.20 deduped │ ├─┬ expo-updates-interface@1.1.0 │ │ └── expo@53.0.20 deduped │ └── expo@53.0.20 deduped ├─┬ expo-font@13.3.2 │ └── expo@53.0.20 deduped ├─┬ expo-haptics@14.1.4 │ └── expo@53.0.20 deduped ├─┬ expo-image@2.4.0 │ └── expo@53.0.20 deduped ├─┬ expo-linear-gradient@14.1.5 │ └── expo@53.0.20 deduped ├─┬ expo-router@5.1.4 │ └── expo@53.0.20 deduped ├─┬ expo-splash-screen@0.30.10 │ └── expo@53.0.20 deduped ├─┬ expo-symbols@0.4.5 │ └── expo@53.0.20 deduped ├─┬ expo-system-ui@5.0.10 │ └── expo@53.0.20 deduped ├─┬ expo-web-browser@14.2.0 │ └── expo@53.0.20 deduped └─┬ expo@53.0.20 ├─┬ expo-asset@11.1.7 │ └── expo@53.0.20 deduped ├─┬ expo-file-system@18.1.11 │ └── expo@53.0.20 deduped └─┬ expo-keep-awake@14.1.4 └── expo@53.0.20 deduped
해결됨
한 입 크기로 잘라먹는 Next.js
중첩된 라우팅에서 다른 레이아웃 혹은 레이아웃을 사용하고싶지 않을 때 어떻게 제어할 수 있는지 궁금합니다. 현재 소스를 보면 (with-searchbar) search book ... 와 같은 형태로 되어있는 것을 알 수 있는데요 만약에 search가 1 depth 라고 했을 때, search 페이지 아래에 예를 들어 detail-search 라는 주소를 가진 페이지가 있다고 가정할 때 (with-serachbar) serach detail-search 파일 구조 및 중첩된 라우터 구조가 위와 같이 되잖아요? 이 때 detail-search는 with-searchbar 대신 가령 with-detail-serachbar 라던가, 아예 with-searchbar 레이아웃을 사용하고 싶지 않을 수 있잖아요? 이럴 때 어떻게 해야하는지 궁금합니다 😀
미해결
실무 중심! FE 입문자를 위한 React
강의에서 나온대로 다 따라 갔는데 아무것도 안됩니다. 콘솔창에서는 const [surveyData, setSurvey] = useRecoilState(surveyState).questions; 에서 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) 라는 에러 뜹니다
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요~ 강의에서 사용하는 api 2개 다 접속이 안되네요 1번은 외부 서버라 안될수 있는데, 2번은 서버가 죽은 건가요? koreanjson.com http://main-example.codebootcamp.co.kr/graphql
해결됨
Slack 클론 코딩[실시간 채팅 with React]
settings/ts 폴더 front로 바꿔서 진행할 경우 셋팅 강의 하나도 들을 필요없이 바로 섹션2부터 진행해도 되는건가요?
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요! 좋은 Next.js 강의 덕분에 열심히 배워나가고 있는 학생입니다. 😀 다름이 아니라 revalidateTag를 사용했을 때, 첫 번째 인수로 전달한 태그 값을 가지는 데이터 캐시가 재검증된다고 이해했는데요! 제가 revalidateTag의 인수와 data fetch에 사용되는 옵션의 태그 값을 다르게 세팅해봤는데도 갱신이 되어서요. 제가 잘못 이해한 걸까요..?? 이 부분이 이상해서 질문 남깁니다. 아래는 제가 작성한 코드입니다! createReviewAction export async function createReviewAction(formData: FormData) { const bookId = formData.get('bookId')?.toString(); const content = formData.get('content')?.toString(); const author = formData.get('author')?.toString(); if (!bookId || !content || !author) { return; } // JSON.stringify 객체를 문자열 형태로 직렬화 해서 보내줘야 함 try { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review`, { method: 'POST', body: JSON.stringify({ bookId, content, author }), }, ); revalidateTag(`revew-${bookId}`); // 일부로 오타 냄 } catch (error) { console.error(error); return; } } ReviewList 컴포넌트 async function ReviewList({ bookId }: { bookId: string }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review/book/${bookId}`, { next: { tags: [`review-${bookId}`] } }, ); if (!response.ok) { throw new Error(`Review fetch faild: ${response.statusText}`); } const reviews: ReviewData[] = await response.json(); return ( <section> {reviews.map((review) => ( <ReviewItem key={`review-item-${review.id}`} {...review} /> ))} </section> ); }
해결됨
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
안녕하세요 프로그래밍 시작하기 : 웹 입문 (Inflearn Original) 강의를 듣고 있는 수강생입니다. 혹시 출처를 남기고 공부한 내용을 요약해서 블로그에 게시해도 될까요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 강의를 구매 후 듣다가 일이 생겨서 오랜만에 다시 공부하려고 하는데 커리큘럼을 다시 보니 처음에 html, css 강의 순서대로 나오다가 js가 나오고 또 섹션04부분에서 다시 css가 나오고 또 js가 나오더라구요 그래서 이 부분이 헷갈리는데 그냥 처음부터 순서대로 강의를 들으면 될까요?
미해결
Vue.js 시작하기 - Age of Vue.js
해당 강의 덕분에 vue에 대해 알아가고 있는 중입니다. vue composition api는 어느 강좌에서 확인이 가능할까요~?
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 2-3강 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Cursor에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 좋은 질문 예시 [진도] 2주차 5강 - React 컴포넌트 생성까지 완료 [질문] Cursor에서 버튼 컴포넌트 생성 시 에러 발생 상황: 2주차 실습 중 버튼 컴포넌트를 만들려고 하는데 프롬프트: "빨간색 버튼 컴포넌트 만들어줘" 에러 메시지: [스크린샷 첨부] 시도해본 것: GPT에게도 물어봤는데 같은 에러 발생 어떻게 해결하면 될까요?
미해결
따라하며 배우는 리액트 네이티브 기초
안녕하세요 react-navie 강의중 18강 보고 있는데요 svg 잘 설치 되어있고, 이미지도 잘 넣었는데 저는 이미지 스타일 편집하는게 안보이고 svg 파일 클릭을 하면 svg 파일 모양만 보이고 있어서 svg 테스트시 화면에 이미지 너무 크게 보입니다. 툴에서 어떻게 설정하면 svg 스타일이 보일까요?
해결됨
React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!
Notion에 있는 코드말고, Github Repository는 따로 없나요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요! 지금까지 수업을 윈도우 노트북으로 듣고 있었습니다. 그런데 노트북에 문제가 생겨 새로운 노트북으로 구매 후 파일을 옮기려고 하는데 이번에 구매한 노트북 운영체제 맥os입니다. 간편하게 옮기고 빠르게 실행 할 수 있는 방법이 있을까요?? 일단 node, npm, yarn까지 다운 받은 상태 입니다.
