173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
getImageUrl을 얻는 방식을 강의 방식이 아닌 getPublicUrl을 사용해서 얻으려면 어떻게 해야 하나요?
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
queue : enqueue, dequeue, peek class Node { prev = null; next = null; constructor(value) { this.value = value; } } class Queue { length = 0; head = null; tail = null; enqueue(value) { // stack.push와 동일 const newNode = new Node(value); if (this.length == 0) { this.head = newNode; this.tail = newNode; } else { newNode.prev = this.tail; this.tail.next = newNode; this.tail = newNode; } this.length++; return this.length; } dequeue() { let rslt; // head.next의 prev를 null로 설정 & head 업데이트 if (this.length > 0) { if (this.length == 1) { rslt = this.head.value; this.head = null; this.tail = null; } else { rslt = this.head.value; this.head.next.prev = null; this.head = this.head.next; } this.length--; } return rslt; } peek() { return this.head?.value; } get length() { return this.length; } } const queue = new Queue(); queue.enqueue(1); queue.enqueue(3); queue.enqueue(5); queue.enqueue(4); queue.enqueue(2); console.log(queue.length); // 5 console.log(queue.dequeue()); // 1 console.log(queue.length); // 4 console.log(queue.peek()); // 3 console.log(queue.dequeue()); // 3 console.log(queue.peek()); // 5 console.log(queue.dequeue()); // 5 console.log(queue.peek()); // 4 console.log(queue.dequeue()); // 4 console.log(queue.dequeue()); // 2 console.log(queue.length); // 0 console.log(queue.dequeue()); // undefined console.log(queue.peek()); // undefined stack : push, pop, top class Node { prev = null; next = null; constructor(value) { this.value = value; } } class Stack { length = 0; head = null; tail = null; push(value) { // 비어있으면 head = tail = newNode // 그 외엔 tail에다 추가 후 tail 업데이트 const newNode = new Node(value); if (this.length == 0) { this.head = newNode; this.tail = newNode; } else { newNode.prev = this.tail; this.tail.next = newNode; this.tail = newNode; } this.length++; return this.length; } pop() { // tail.prev를 tail로 업데이트 // 비어있거나 하나만 있으면 undefined 반환 let rslt = this.tail?.value; this.tail = !this.tail ? null : this.tail.prev; this.length = this.length - 1 < 0 ? 0 : this.length - 1; return rslt; } top() { return this.tail?.value; } get length() { return this.length; } } const stack = new Stack(); stack.push(1); stack.push(3); stack.push(5); stack.push(4); stack.push(2); console.log(stack.length); // 5 console.log(stack.pop()); // 2 console.log(stack.length); // 4 console.log(stack.top()); // 4 console.log(stack.pop()); // 4 console.log(stack.top()); // 5 console.log(stack.pop()); // 5 console.log(stack.top()); // 3 console.log(stack.pop()); // 3 console.log(stack.pop()); // 1 console.log(stack.length); // 0 console.log(stack.pop()); // undefined console.log(stack.top()); // undefined
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
const start2 = async () => { try { let result = await Promise.all([workA(), workB(), workC()]); result.forEach((res) => console.log(res)); } catch { console.log(err); } }; 해당 코드에서 반환된 프로미스 객체는 배열의 형태로 result 변수에 저장되는 건가요?
해결됨
한 입 크기로 잘라먹는 Next.js
파라미터를 받아서 특정 도서 상세페이지로 이동하는 [id].tsx에서 이전에 사용하던 export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (q) { url += `/search?q=${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } } 이 코드에서 아래와 같은 방식도 가능할까요? export default async function fetchBooks(q?: any): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (typeof q === "string") { url += `/search?q=${q}`; } else if (typeof q === "number") { url += `/${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } }
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
reactQuery의 queryFn : ['users'] supabase의 channel의 const channel = supabase.channe l("online_users", { 부분 users와 online_users의 쓰임새를 모르겠습니다. queryFn : ['users', userId]를 하면 useEffect의 의존성 배열처럼 userId의 값에 따라 실행되는게 맞나요? 그럼 'users'는 뭔가요? 구조가 잘 와닿지 않습니다.ㅜㅜ const channel = supabase.channe l("online_users", { 도 " online_users"라는 이름값을 다른곳에서 사용할 때 쓰임새가 있는건가요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 선생님! 해당 수업에서 On-Demand-ISR을 적용하기 위해 page/api/revalidate.ts 파일에 재 생성을 요청하는 handler 함수를 정의를 했습니다. // 강의에서 작성한 handler 코드 export default async function handler( req: NextApiRequest, res: NextApiResponse ) { try { // 인덱스 페이지를 요청받을 때 revalidate 되도록 하기 await res.revalidate("/"); // 재 생성이 잘 완료되었다는 걸 리턴함 return res.json({ revalidate: true }); } catch (err) { // 재생성 실패 했을 떄 실행할 코드 res.status(500).send("실패"); console.error(err); } } 현재 강의에서는 직접 localhost:3000/api/revalidate 를 입력해 수동으로 페이지를 재 생성했는데, 만약 인덱스 페이지 접속할 때마다 자동으로 페이지를 재 생성하고 싶으면 useEffect 훅을 사용하면 될까요? 아래는 제가 작성한 코드입니다! useEffect(() => { fetch("/api/revalidate") .then((res) => res.json()) .then((data) => { if (data.revalidate) { console.log("페이지가 성공적으로 재생 성되었습니다."); } }); }, []);
해결됨
Azure Native로 나만의 GPT 만들기
조금씩이지만 열심히 따라서 구현을 해 보려고 하지만 모르는게 너무 많아 조금은 힘드네요 그래도 강의 내용이 스텝 바이 스텝으로 상세해 아주 큰 도움이 됩니다 저희 중요 업무는 고객 요구 사항들 (텍스트/ 이미지)이 기록되어 있는 문서를 참조로 현재 개발된 디자인이 모든 요구 사항들을 다 잘 지켜서 개발이 완료된 건지를 체크하는 일입니다 기존에 일일히 하나하나 체크를 하다 보니 시간도 너무 오래 걸리고 일부 경험 많은 엔지니어의 경우 기존 경험에 의존해 체크가 누락되는 경우도 발생이 되고 있습니다 이에 고객 요구 사항들을 AI (gpt-4o)에게 학습시키고 완료된 디자인 문서를 프로프팅 창에 입력해 자동으로 미지원 항목을 체크해 알려주는 기능을 만드는 것이 목표입니다 이를 위해 프롬프트 창에 디자인 문서 (텍스트/ 파워포인트/ PDF/ JPG 등) 멀티모달 프롬프팅이 되어야 디자이너 스스로 자기가 만든 디자인 파일의 셀프 체크가 가능하기에 gpt-4o를 선택해서 구현을 할려고 합니다 여기서 중요한건 비교를 해야 하는 고객 요구 사항을 어떻게 gpt-4o에게 학습시키는지에 대해 잘 몰라 난감해서 문의 드립니다 가장 효과적인 학습 방법에 대한 조언을 주실 수 있으실지요? 사내 전용 우리 회사만의 GPT라면 비교 자료도 나만의 자료가 되는게 필요해서 문의 드립니다 답변 부탁 드리겠습니다 감사합니다
해결됨
입문자를 위한 자바스크립트 기초 강의
XMLHTTPRequest실습 수업을 듣고 따라는데 사진이 나타나지 않아요ㅜ 다른 이유가 있을까요? js작성한 코드는 아래 사진이 다 입니다.
미해결
Vue.js 끝장내기 - 실무에 필요한 모든 것
안녕하세요~ 끝장내기 수업 정도나 이상의 긴호흡의 강의는 출시하지 않으실 예정이신지 궁금 합니다!
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
리액트 쿼리를 사용하면 결국 client side fetching이 됩니다. nextjs13부터 server side fetching이 가능해지고 suspense를 활용한 data streaming은 데이터펫칭에서 새로운 패러다임을 제시했다고 생각합니다. 굳이 리액트 쿼리를 사용할 이유가 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두를 수정, 삭제하는 강의를 보면서 버튼을 클릭할 때, 제가 누른 버튼이 어떤 버튼인지 알 수 없기 때문에 이벤트 객체를 이용해야 한다고 생각했습니다. 내가 클릭한 버튼의 아이디를 수정, 삭제하는 함수의 인수로 전달해야 한다고 생각해서 아래와 같은 코드로 작성해야한다고 생각했습니다. const onChageCheckBox = (e) => { onUpdate(e.target.id); }; const deleteHandler = (e) => { onDelete(e.target.id); }; 하지만 강의에서는 아래 코드처럼 알려주셔서요! const onChageCheckBox = () => { onUpdate(id); }; const deleteHandler = () => { onDelete(id); }; 이벤트 객체를 사용하지 않고 id만으로 함수가 실행되는 점이 이해가 가지 않아 질문 드립니다. 더불어 이벤트 객체를 사용해서 코드를 작성하는 방법도 있는지 질문 드립니다. 항상 좋은 강의해주셔서 감사합니다!
미해결
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
import { Test } from '@nestjs/testing'; import { UsersService } from '../users.service'; import { IContext } from 'src/commons/interfaces/context'; import { Request, Response } from 'express'; // 주로 DB 작업할 때 가짜DB 만들 때 사용함 class MockUsersService { mydb = []; create({ email, password, name, age }): string { this.mydb.push({ email, password, name, age }); const token = 'token'; return token; } } describe('UsersResolver', () => { let usersService: UsersService; beforeEach(async () => { const usersModule = await Test.createTestingModule({ providers: [ UsersService, { provide: UsersService, useClass: MockUsersService, }, ], }).compile(); usersService = usersModule.get<UsersService>(UsersService); }); describe('fetchUser', () => { it('유저 정보 찾기', () => { const mockRequest: Request & { user?: { id: string } } = { user: { id: '12345' }, } as Request & { user: { id: string } }; const mockResponse: Response = {} as Response; const mockContext: IContext = { req: mockRequest, res: mockResponse, }; expect(mockContext.req.user).toStrictEqual({ id: '12345' }); }); }); describe('createUser', () => { it('유저 등록하기', async () => { const mockToken = 'token'; const mockUser = { email: 'aaa@aaa.com', password: '1234', name: '정중식', age: 12, }; const result = await usersService.create({ ...mockUser }); // 반환 값이 mockToken과 일치하는지 확인 expect(result).toBe(mockToken); }); }); }); 강의에서는 app.controller.spec랑 똑같이하시면됩니다~ 하고 넘어가셔서 챗지피티랑 손잡고 짜봣는데요.. 어떤가요? 맞게했나요?.. 개념도 생소하고 코드짜는게 넘 어렵네요.. 챗지피티 이자식은 목업클래스 안만들어주고 지름길 같은 jest.fn()같은 메서드로 목업함수 만들어주고.... 선생님 답변기다리겠씁니다!
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
백엔드를 이 강의로 처음 알아가고 있는데 . Horizontal Scaling 가 정확히 뭔지모르겠어요 설명해주시는 것중에서 Redis , in-memory 등 서버들이 같은정보를 바라보고서 사용자 정보를 우리가 판단 한다.. 이게 무슨말인지 아예 와닿질않아요 설명 해주실 수 있을까요
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
수강생 참고자료 및 완성본 다운로드 => 다운로드 해도 소스 텍스트가 없습니다. ㅜㅜ 못 찾는건지 모르겠는데...찾지못해서 일일이 치고 있어요. 소스텍스트가 어디있는지 알려주세요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
container 중앙으로 이동시킬때 .container { background: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px; } 라고 하셨는데 가운데 정렬하게 될때 , margin: 0 auto; 하는것과 어떤차이가 있을까요 ??
해결됨
한 입 크기로 잘라먹는 Next.js
On-Demand ISR 사전 렌더링 방식을 보면서 현재 대부분의 SSR로 구현 되어 있는 어플리케이션을 좀 더 최적화 할 수 있겠다는 생각을 했습니다! 여기서 질문은 API Router를 생성해서 revalidate할 경로를 작성해서 해당 경로의 페이지를 On-Demand ISR 처리되도록 구현해주셨는데요..! 실제로 비지니스 로직을 작성할 때는 많은 페이지들이 존재하는데, 이럴때는 API Router에서 "/" 인덱스 페이지 경로를 하드코딩한 부분을 동적으로 받을 수 있게 처리해서 백엔드 서버와 통신 시, 정상응답을 받았을 때, 해당 API Router를 호출하게 하면 되는걸까요..?! 추가로, 페이징 기능 같은 페이지가 있는 경우에는 어떤식으로 On-Demand ISR을 적용하는지도 궁금합니다..!! 바쁘시겠지만 답변 해주시면 감사하겠습니다 😀 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
미해결
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
썸네일 이미지가 뜨지 않습니다! 그리고 css도 안먹힙니다. 더불어 if (!data) { return <DiaryContainer></DiaryContainer>; } 위의 코드가 없으면 화면이 웹드라우저에 뜨지 않습니다. import { DiaryContainer, ResultTitle, Divider, CardContainer, CardTitle, CardContent, ActionListItem, } from "./CommonStyles"; import { LoadingOutlined, CheckCircleTwoTone, HeartTwoTone, SmileTwoTone, MessageTwoTone, SoundTwoTone, } from "@ant-design/icons"; import { Image } from "antd"; import styled from "styled-components"; const ThumbnailImage = styled(Image)` max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; display: block; `; const DiaryDisplay = ({ data, isLoading }) => { if (isLoading) { return ( <DiaryContainer> 불러오는중... <LoadingOutlined /> </DiaryContainer> ); } if (!data) { return <DiaryContainer></DiaryContainer>; } return ( <DiaryContainer> <ResultTitle>{data.title}</ResultTitle> <Divider /> <CardContainer> <CardTitle> <CheckCircleTwoTone twoToneColor="#FF9AA2" style={{ marginRight: "6px" }} /> 요약 </CardTitle> <CardContent>{data.summary}</CardContent> </CardContainer> <ThumbnailImage src={data.thumbnail} alt="Thumbnail" fallback="데이터:image/png;base64,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" /> <Divider /> <CardContainer> <CardTitle> <HeartTwoTone twoToneColor="#FFB7B2" style={{ marginRight: "6px" }} /> 감성일기장 </CardTitle> <CardContent>{data.emotional_content}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SmileTwoTone twoToneColor="#FFDAC1" style={{ marginRight: "6px" }} /> 내가 느낀 감정 </CardTitle> <CardContent>{data.emotional_result}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <MessageTwoTone twoToneColor={"#B5EAD7"} style={{ marginRight: "6px" }} /> 심리 분석 </CardTitle> <CardContent>{data.analysis}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SoundTwoTone twoToneColor="#C7CEEA" style={{ marginRight: "6px" }} /> GPT 조언 </CardTitle> <CardContent> {data.action_list.map((action, index) => ( <ActionListItem key={index}>{action}</ActionListItem> ))} </CardContent> </CardContainer> </DiaryContainer> ); }; export default DiaryDisplay; 코드는 이렇습니다. 썸네일은 원래 본 강의의 깃허브에서 내려받은 코드로도 안돼서 고친 것입니다. 원래코드도 이미지가 안떳습니다 ㅠㅠ 어떻게 문제를 해결할 수 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
백엔드를 " https://api.example.com" 프론트엔드를 " https://example.com " 이렇게 배포했습니다. 그런데 백엔드 서버는 example.com 이 주소에서 api 요청만 가능하고, https://api.example.com/graphql 은 주소창에 검색해도 접속 못하게 하고 싶습니다. 어떻게 해야할까요?
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
안녕하세요. 강의 도중 클로저를 설명해주셨는데 의문점이 있습니다. 익명 함수를 실행할 때 i를 인자로 넣어주고, 함수 내부에서는 j로 그 값을 받습니다. 그런데 setTimeout의 2번째 인자로 j가 아닌 i를 넣어주었는데도 올바르게 실행됩니다. 익명 함수 내부에서의 i는 어디서 가져오고, j로 바꾸지 않아도 올바르게 작동하는지 궁금합니다. for (var i = 0; i < 6; i++) { (function (j) { console.log(i); setTimeout(() => { drawBall(balls[j], $result); }, 1000 * (i + 1)); })(i); }
해결됨
한 입 크기로 잘라먹는 Next.js
레이아웃 컴포넌트의 경우 여러 페이지에 공통적으로 들어가야 하는 것이기 때문에, _app.tsx에 넣어야 하는 것은 이해했습니다. 그리고 모든 페이지에 들어가는 레이아웃이 아닌 특정 페이지만 들어가는 레이아웃의 경우에 정환님 같은 경우에는 getLayout이라는 메서드를 해당 레이아웃을 필요로 하는 페이지 컴포넌트 함수에 메서드로 주시고 _app.tsx에서는 그 메서드를 불러오게끔 하셨는데요. 제가 머리가 나빠서인지는 모르겠지만, 뭔가 이런 메서드로 레이아웃을 관리하니까 이해하기 어렵고 뭔가 직관적으로 다가오는 느낌이 없어서 힘들더라구요.. 그래서 그냥 router와 if문을 이용해서 특정 페이지의 경우에만 searchable 레이아웃이 나오게 하고, 아닌 경우에는 그냥 페이지를 리턴하도록 하는 게 저한테는 뭔가 더 직관적..? 으로 다가오는데 이런 식으로 사용해도 되는지 궁금해서 여쭈어봅니다.. (코드는 밑에 같이 써놓았습니다!) export default function App({ Component, pageProps }: AppProps) { const router = useRouter(); const isSearchableLayoutPage = router.pathname === '/' || router.pathname === '/search'; return ( <GlobalLayout> {isSearchableLayoutPage ? ( <SearchableLayout> <Component {...pageProps} /> </SearchableLayout> ) : ( <Component {...pageProps} /> )} </GlobalLayout> ); }
