172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 강의 나름 열심히 듣고있는 수강생입니다..! 정환님 강의 React.js, typescript,다 수강하고 이어서 next.js 수강중입니다. 지금은 2.10) 사전 렌더링와 데이터페칭 보고있는데요. 리액트에서의 데이터 페칭 설명해주시면서 기억나시나요?? 물어보셨는데 혹시 정환님 React.js 강의에서 데이터페칭 설명해주신 부분이 있었나요?? ㅠㅠㅠ 제가 놓친건지.. 다시 찾아봐도 찾기가 힘들어서요.. 답변 부탁 드립니다.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
todo리스트 구현중 TodoItem.jsx에서 memo에 대해 강의를 보며 공부중입니다. 이렇게 console.log로 찍었는데 체크박스를 한 개만 찍어도 3가지 모두 다 console로 찍히는데 제대로 적용된 것 맞나요? 하이라이트를 켜도 색상이 비슷해서 구분이 잘 가지않습니다. 로그는 이렇게 찍힙니다. prev next = {"id":0,"isDone":false,"content":"React 공부하기","date":1764731042079}{"id":0,"isDone":true,"content":"React 공부하기","date":1764731042079} TodoItem.jsx?t=1764729548020:40 prev next = {"id":1,"isDone":false,"content":"빨래하기","date":1764731042079}{"id":1,"isDone":false,"content":"빨래하기","date":1764731042079} TodoItem.jsx?t=1764729548020:40 prev next = {"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079}{"id":2,"isDone":false,"content":"노래 연습하기","date":1764731042079} import { memo } from 'react'; import './TodoItem.css' function TodoItem({id, isDone, content, date, onUpdate, onDelete}) { const onChangeCheckbox = () => { onUpdate(id); } const onClickDeleteButton = () => { onDelete(id) } return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} readOnly checked={isDone} type="checkbox"/> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}> 삭제 </button> </div> ); } export default memo(TodoItem, (prevProps, nextProps) => { console.log("prev next = " + JSON.stringify(prevProps) + JSON.stringify(nextProps)) if(prevProps.id !== nextProps.id) return false if(prevProps.isDone !== nextProps.isDone) return false if(prevProps.content !== nextProps.content) return false if(prevProps.date !== nextProps.date) return false return true });
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님이 사용하시는 코드에서 오류가 났을때 빨간문자로 보이는 도움말? 은 무슨 플러그인을 사용하시는건가요?
해결됨
한 입 크기로 잘라먹는 Next.js
next.js 는 핸드북 없나요?
미해결
만들면서 배우는 리액트 : 기초
API 스펙이 변경되었네요! 제보 감사합니다. https://github.com/milooy/cat-jjal-maker/blob/main/answers/29-useEffect.html#L48 위 코드를 참고해서 fetchCat 함수를 변경해주세요. 위 답변해주신대로 소스를 변경해도 고양이 이미지가 엑박으로 뜨질 않습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 소개 영상에서는 디스코드 채널이 있는거 같은데요. 관련 링크가 없네요. 어디서 확인가능할까요?
해결됨
포트폴리오 어나더레벨 | 합격하는 이력서 작성법
안녕하세요. 큰돌님 유튜브도 보고있고 최근 개발 소식도 자주 접하고 있습니다. 최근에는 새로 내신 강의도 구매하여 수강을 하였습니다. 여기서 질문이 있습니다. 강의에서 "배포가 되어있는게 좋다"는 말이 있습니다. 포트폴리오나 사이드 프로젝트를 할 때 "배포의 중요성"이 중요한지 아니면 대체를 할 수 있는지 생각을 듣고 습니다. 요즘은 많은 오픈소스를 사용하는 것으로 알고있습니다. 그중에는 kafka, elasticsearch, redis 더 나아가 debezium, flink같은 것도 많습니다. 물론 이러한 것들은 대규모 트래픽이 발생하거나 많은 정보가 있을 때 사용하면 좋은 효율을 내고 있습니다. 보통 사이드 프로젝트 더 나아가서는 스타트업이나 중소기업까지도 트래픽이 적다면 구지 사용을 하지 않고 유지를해도 문제가 없을 수 있는 인프라 구조도 될 수 있다고 생각합니다. 하지만 기업들은 이러한 것을 요구합니다. 여기서 질문이 이런 인프라들은 배포를 할려면 비용이 상당히 많이 발생하고 유지가 힘든것으로 알고있습니다. 강의에서 말씀하신 인스턴스 최소 두대 또한 계속 유지하기에는 비용이 계속 누적이 될거라고 생각합니다. 물론 배포를 해놓고 그걸 보여주면 아주 best이고 현재의 상태를 잘 보여주고 느낄 수 있다고 생각합니다. 그런데 배포라는게 중요한것인지 의문이 들어 질문드렸습니다. 경력직에서 이직을 할때도 경력서에 쓰는 프로젝트 대부분이 배포는 현재 되있지만 실제적으로 그런 부분을 신경을 쓰지 않는 것(못하는것)으로 알고있어요. 그리고 회사에서도 막상 큰 회사일 수록 많은 트래픽을 받고있지만 인프라가 좋아 그거에 대해서 체감을 못하고 올바르지 않은 방향으로 나갈 수 있고 효율적인거보다 기능구현이 우선순위로 높게 배정됬을 수 도 있을 것 같아요. 반대로 큰 회사나 적은 회사든 어드민 부서는 존재하고 어드민 부서는 코어 부서보다 적은 트래픽을 받는 것 으로 알고있습니다. 그러면 이 때는 어떻게 어필을 하면 좋을 지 고민입니다. 이거에 대한 큰돌님의 생각을 의견을 듣고싶어 질문을 올렸습니다. 감사합니다.
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
안녕하세요 좋은 강의 재밌게 잘 시청하고 있습니다 V8에서 undefined, null 그리고 string을 어떻게 관리할까? 강의를 보다가 V8 문서를 찾아보게 되었습니다 영어로 된 문서를 번역을 해서 질문하는 글 이기에 번역이 어색하거나 틀릴 수 있으며, 전체 내용을 담지는 않았습니다! 강의 4분 26초에 LOAD_ROOT 함수 부분을 설명하시면서 힙 상수를 찾고 있다고 설명해주셨습니다 그 후 다음 단계에서 캐시를 하고 힙 상수를 찾고, 만약 해당 위치가 존재한다면 해당 위치를 반환하고, 그 위치가 없다면 새로운 힙 상수를 생성하고 캐싱을 한다고 해주셨습니다 그래서 실제로 저희가 자바스크립트에서 undefined를 사용할 때마다 캐싱해두었던 그 값을 찾기 때문에 해당 위치에 접근하여 사용할 수 있다 라고 이해를 했습니다 여기서 추가적으로 궁금했던것이 V8 문서를 보면, undefined , true 등 자바스크립트의 핵심 객체들은 반드시 먼저 존재해야 하고, read-only heap에 존재한다고 합니다 V8은 이들을 immovable immutable roots 라고 부른다고 합니다 정의되지 않은 객체의 주소를 참조하기 위해 찾아볼 필요 없이, 포인터가 0x61 이런식으로 끝나는지만 확인한다면, 정의가 되었는지, 되지 않았는지 알 수 있다면 좋을 것 같다 이것이 V8의 static root 를 달성하는 것이다 라고 설명되어 있습니다 지속적으로 사용되는 것들이기에 빠른 접근이 필수적이며, V8은 컴파일 시점에 이들을 생성한다고 나와있습니다 읽기 전용 힙을 모든 포인터 compression cage의 시작 부분에 배치하여 알려진 위치를 제공하며, 예를 들어 V8의 힙에 있는 모든 객체 중에서 undefined는 항상 가장 작은 압축 주소를 가지며, 0x61 바이트에서 시작한다고 합니다 V8을 컴파일 하기 위해서는 먼저 mksnapshot 이라는 V8 바이너리를 컴파일을 진행을 하고, 결과물로는 read-only heap 내의 모든 객체의 cage base 주소를 포함한다고 합니다 두 번째 단계로 libv8을 다시 컴파일하여, 플래그를 통해서 undefined를 참조할 때마다 문자 그대로 cage_base + StaticRoot::kUndefined 을 사용하도록 보장한다고 나와있습니다 d8이 실행되면 모든 read-only 객체는 메모리에서 고정된 위치를 가지며, 절대 이동하지 않는다고 합니다 이를 통해 d8 바이너리에서 undefined의 압축 주소가 0x61로 하드코딩되도록 만든다고 합니다 이 글을 읽으면서 들었던 생각은 위 과정을 통해 "undefined 같은 기본 객체들의 cage base로부터의 오프셋이 컴파일 시점에 결정 되어 있어서, 런타임에 배열에서 찾아볼 필요 없이 cage_base + 0x61 같은 계산식으로 바로 접근 할 수 있다" 라고 이해를 했습니다 여기서 컴파일 시점에 결정된 주소 라는 것이 4분 26초부터 말씀해주신 캐시 과정이 포함되는 것이 맞을까요? 아니면 강의 내용과는 상관이 없는 내용일까요? 참고한 글 링크는 아래에 걸어두겠습니다! https://v8.dev/blog/static-roots
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
sm : 640 이상 md : 768 이상 lg : 1024 이상 2xl : 1536 이상 은 설정하신건가요? 기본 설정인가요?
미해결
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
좋은 강의 해주셔서 너무 감사드립니다. 바이브 코딩 과정 너무 신기하고 재밌는데, 다만 컴포넌트 생성, provider, 스토리북 등 잘 만들어지긴 하던데 중간에 잘 만들어진건지 확인하는 과정이 없다보니 문제 생겼을때 어디서부터 어디까지 잘못 되었는지 잘 모르겠더라구요. 중간과정 확인 방법이 궁금합니다. 현재는 스토리북에서 버튼 스토리 생성했는데, 완성은 했는데 컴포넌트가 안보이고 빈 페이지로만 나옵니다. 기능은 스토리에 보입니다. page.tsx에서 컴포넌트 불러서 보면 잘 보이구요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 다름이 아닌 원래 잘 작동하던 크롬 콘솔창에 react-dev 툴을 설치 하라는 문구만 나오고 작동을 하지 않습니다. 툴 설치도 해봤는데 버튼을 클릭해도 아무 문구도 뜨지 않고 , 필터창에 문구가 써있나 싶어 확인도 해봤습니다. 혹시 다른 해결법이 있을까요??
미해결
한 입 크기로 잘라먹는 Next.js
generateStaticParams로 모든 book 상세페이지를 static page로 미리 생성했을 때, book 개수가 엄청 많으면 빌드가 더 오래걸리나요? 그리고, book 개수가 엄청 많으면 사이트 첫 접속이 느려지기도 하나요?
해결됨
포트폴리오 어나더레벨 | 합격하는 이력서 작성법
아래 글에서 "3개월 동안 실력을 확실히 업그레이드하고 팀 프로젝트까지 완성해 부트캠프가 필요 없을 정도로 성장할 수 있다"는 조언을 보았습니다. 실제로 3개월이라는 기간 동안 어떤 방식으로 준비해야 그 수준까지 도달할 수 있을지 강사님의 의견을 듣고 싶습니다. 학습 방향, 프로젝트 수행 전략, 일정 관리 등의 측면에서 어떻게 접근하면 가장 효과적으로 성장할 수 있을지 구체적인 조언을 부탁드리고 싶습니다.
해결됨
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
안녕하세요. 학습중에 cusor에서 figma 채널은 접속이 잘 되나, color.ts를 생성하기 위한 node에 접속이 안됩니다. (처음 사진의 노드 ID에서 - 붙인것은 연결 테스트 중에 한것이고, 실제 프롬프트 실행시는 두번째 사진 처럼 정상적으로 수정후에 실행 하였습니다.) 혹시 무료 버전에서는 node id에 접속이 안되는 것인지? 아니면 다른 문제가 있을까요? 참고로 url 정보 전체를 통해서 가져와 달라고도 요청해봤는데 여전히 해당 부분에만 접속을 못하는 것을 확인 하였습니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
@JoinColumn을 명시하는 경우가 있고 그렇지 않은 경우가 있는데 무슨 차이인가요? 단순히 아래처럼 컬럼 명을 명시해주기 위해서 @JoinColumn이 사용되는 걸까요? @JoinColumn({ name: 'author_id' })
해결됨
The 10x AI-Native Developer: 회사에서 AI로 압도적 성과를 내는 법
1주차 1-6까지 진도를 나갔습니다. 클로드 커맨드에 create-portfolio-entry.md 파일 까지 생성해서 커맨드를 통해서 My-First-Project 파일까지 생성되는것 확인했습니다. 그 후 blog글에 해당글을 보이게 할려는 연결동작까지는 영상에 없더군요 https://github.com/vercel/examples/tree/main/solutions/blog 위의 blog 템플릿에서 로컬 실행시에 블로그 글 클릭시 블로그 글 링크에서 404로 보이고있습니다. vercel에서 예제 잘못만든거겠지만, 해당 강의에서 클로드의 커맨즈를 통해서 자동으로 블로그글을 작성하고 화면에 어떻게까지 연결되는지 구조가 완성되면(프로젝트의 완성도) 좋을것같아서 의견을 드려봅니다. 클로드 커맨즈를 통해서 mdx파일까지만 생성하는걸로는 AI 자동화에 완벽성이 부족한것같습니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 을 듣고 있는데요 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 있습니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : 구체적인 에러 내용 [사진3] 스크롤은 적용이 안 된 것 같은데요, 상품이 2개 뿐이라 스크롤이 없는 건가요? [사진4] 사진 3 에 대한 구체적인 에러 ----> 어떻게 에러를 해결 할 수 있을까요 ? 안드로이드 스튜디오에서 상품 정보를 불러오지 못하는 것에 대해 서 어떻게 해결해야 할 지 차근 차근 잘 알려주셨으면 좋겠습니다 . 그리고 마지막 질문은 안드로이드 애물레이터가 잘 되는지 확인 하려면 grab-market-server에서 npm start를 해준 뒤 확인하면 되는건가요? 아니면 grab-market-mobile에서 npm start를 해준 뒤 a(=Open Android)를 누르면 되는 건가요? 아니면 둘다 동시에 npm start를 해주는 건가요? 그리고 아래에는 grab-market-mobile 폴더의 App.js 제 소스 코드를 아래에 첨부하겠습니다. import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView } from "react-native"; import BasketballImage from "./assets/products/basketball1.jpeg"; import Avatar from "./assets/icons/avatar.png"; import {API_URL} from "./config/constants"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]) React.useEffect(()=>{ axios.get(`${API_URL}/products`).then((result)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) },[]) return ( <View style={styles.container}> <ScrollView> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard}> <View> <Image style={styles.ProductImage} source={{uri: `${API_URL}/${product.imageUrl}`,}} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={Avatar} /> <Text style={styles.productSellerName} >{product.seller}</Text> </View> <Text style={styles.productDate}>{dayjs(product.createdAt).fromNow()}</Text> </View> </View> </View>); }) } </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: 32, }, productCard: { width: 320, borderColor: 'rgb(230,230,230)', borderWidth:1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, ProductImage :{ width: '100%', height: 210 }, productContents : { padding: 8 }, productSeller : { flexDirection: 'row', alignItems: 'center' }, productAvatar: { width:24, height:24, }, productFooter: { flexDirection: 'row', justifyContent:'space-between', alignItems: 'center', marginTop: 12, }, productName : { fontSize: 16 }, productPrice: { fontSize: 18, fontWeight: '600', marginTop: 8 }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems:"center", }, headline : { fontSize: 24, fontWeight: "800", marginBottom:24 } }); 그랩님의 답변을 기다립니다.
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
커서 UI 변경가 변경되서 강의 업데이트 해야 될 것같습니다.
해결됨
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
안녕하세요 노원두님 학습 잘 들었어요. 덕분에 AI 바이브코딩에 대해서 좀 더 깊이 알게 되었습니다. 본 강의 말고, [Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma) 강의에서는 "특별추가강의 - supabase"가 있던데, 여기에는 업데이트가 안되려나요? 이 부분만 별도로 들을려고 중복되는 내용 강의를 새로 다시 구매하기에는 가격이 좀 부담되서.. 아니면 별도 강의로 구성되어 들을 수 있는 지도 확인 부탁 드리며, 업데이트 해주시면 감사하겠습니다. 그리고 백엔드 관련하여 AI 바이브코딩 강의도 준비하고 계시는 지요? 프론트엔드 뿐만 아니라 관리자 페이지까지 설계할 수 있는 AI 바이브코딩으로 할 수 있는 강의가 있으면 꼭 듣고 싶습니다. 답변 부탁 드려요.
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
await render(<TextField className={'my-class'} />); expect(screen.getByPlaceholderText('텍스트를 입력해 주세요.')).toHaveClass( 'my-class', ); 이렇게 props를 넘겨줄때 동일하게 작은 따옴표로 넘겨주거나 expect에 들어가는 문자열을 작은 따옴표로 입력을 해야 테스트전 린트에서 잡히는 에러가 안나네요;;
