173만명의 커뮤니티!! 함께 토론해봐요.
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
스택 부분 class Stack { head=null; tail=null; length=0; push(value) { if (this.head) { this.tail.next = new Node(value); this.tail.next.prev = this.tail; this.tail = this.tail.next; } else { this.head = new Node(value); this.tail = this.head; } this.length++; return this.length; } pop() { let value = this.tail?.value; if (!this.tail) { // 값 존재 x return null; } if (this.tail === this.head) { // 값이 하나 this.head = null; this.tail = null; } else { // 값이 여러개 this.tail = this.tail.prev; this.tail.next = null; } this.length--; return value; } } class Node { next = null; prev = null; constructor(value) { this.value = value; } } const stack = new Stack(); stack.push(1); stack.push(3); stack.push(5); stack.push(2); console.log(stack.push(4)); // length 리턴 5 console.log(stack.pop()); // 4 console.log(stack.pop()); // 2 console.log(stack.pop()); 큐 부분 class Queue { head = null; tail = null; length = 0; enqueue(value) { if (this.head) { this.tail.next = new Node(value); this.tail.next.prev = this.tail; this.tail = this.tail.next; } else { this.head = new Node(value); this.tail = this.head; } this.length++; return this.length; } dequeue() { let value; if (!this.head) { return null; } if (this.head === this.tail) { // 한 개 value = this.head.value; this.head = null; this.tail = null; } else { // 여러 개 삭제 value = this.head.value; this.head = this.head.next; this.head.next.prev = null; } this.length--; return value; } } class Node { prev = null; next = null; constructor(value) { this.value = value; } } const queue = new Queue(); queue.enqueue(1); // 1 queue.enqueue(3); // 3 queue.enqueue(5); // 5 queue.enqueue(2); // 2 queue.enqueue(4); // 4 console.log(queue.enqueue(7)); // 7 console.log(queue.dequeue()); // 1 console.log(queue.dequeue()); // 3 console.log(queue.dequeue()); // 5 console.log(queue.dequeue()); // 2 console.log(queue.dequeue()); // console.log(queue.dequeue()); // console.log(queue.dequeue()); // 큐 부분에서 콘솔 로그로 찍어 봤을 때 deque가 1,3,5,2 까지 진행 되고 그 이후에 this.head.next .prev = null; ^ TypeError: Cannot set properties of null (setting 'prev') 이런 에러가 발생하는데 이유가 궁금합니다.
samkookji12
2025-01-07T13:54:59.111Z
댓글 1
좋아요 0
조회수 151
미해결
생활코딩 - 자바스크립트(JavaScript) 기본
찾아봐도 안 보여서요
23326
2025-01-07T12:15:27.225Z
댓글 1
좋아요 0
조회수 245
미해결
처음 만난 리액트(React)
안녕하세요, 챕터 05 강의를 듣고 실습 중에 있었는데요. local 3000에서는 이런 에러 메시지가 뜨고, 터미널에서는 이런 메시지가 뜹니다. CommentList.jsx index.js 헷갈리는 부분이 많은데 설명 부탁드립니다!
dlwlgur37
2025-01-07T11:39:45.573Z
댓글 2
좋아요 0
조회수 224
미해결
Next.js App router 기반 Chat GPT 만들기
// db/index.ts 코드 내용 import { neon } from '@neondatabase/serverless'; import { drizzle } from 'drizzle-orm/neon-http'; import * as schema from './schema'; const sql = neon(process.env.DATABASE_URL!); const db = drizzle(sql, {schema}); export default db; // action/signup.ts 내용 "use client"; import bcrypt from "bcryptjs"; import { getUserByEmail } from "@/data/user"; import { SignUpSchema } from "@/schemas/auth"; import { user } from "@/db/schema"; import db from "@/db"; import { redirect } from "next/navigation"; export const signUp = async(_:any, formData:FormData) => { //1. 필드 중요성 const validatedFields = SignUpSchema.safeParse({ name: formData.get("name"), email: formData.get("email"), password: formData.get("password") }) if(!validatedFields.success){ return { errorMessages: "잘못된 입력값이 있습니다.", }; } //2. 존재하는 사용자인지 체크 const {email, name, password} = validatedFields.data; //4. 성공 여부 반환 try { const existingUser = await getUserByEmail(email); if(existingUser){ return { errorMessages: "이미 가입된 사용자입니다.", }; } const hasehdPassword = await bcrypt.hash(password, 10); //3. db에 insert await db.insert(user).values({name, email, password: hasehdPassword}); } catch(error) { console.error(error) return {errorMessage: "알 수 없는 오류가 발생했습니다."}; } redirect("/login"); }; 회원가입 마무리 코드를 다 입력하고 저장한 뒤에 사이트를 확인했는데, 이런 오류가 납니다. DATABASE URL이 잘못됐나 싶어서 다시 확인해봤지만 이상이 없었습니다. 이전 강의인 회원가입 유효성 검사 기능 제작까지 문제가 없었는데, 문제 해결이 되지 않아 질문 남겨봅니다....
react typescript next.js tailwindcss zustand chatgpt
이다민
2025-01-07T10:45:44.788Z
댓글 2
좋아요 0
조회수 215
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요, 해당과같이 Dynamic page에서는 full route cache가 사용되지 않는다고 설명해주셨습니다. 이때, 첫번째 요청에서는 리퀘스트 메모이제이션과 데이터캐시가 당연히 아무것도 없기때문에 백엔드 서버에서 받아온 응답을 데이터캐시에 저장, 그리고 같은 내용을 중복방지를 위해 리퀘스트 메모이제이션에 캐싱하는거까진 알겠습니다. 그런데 두번쨰 요청에서는 같은 요청인데 리퀘스트 메모이제이션에서 MISS가 아닌 HIT을 해야하지 않나요? 왜 같은 요청인데 리퀘스트 메모이제이션은 MISS가 되고 데이터캐시에서 HIT을 하게되고 또다시 리퀘스트 메모이제이션에 SET을 하게 되는걸까요?
codingforfun
2025-01-07T01:37:39.868Z
댓글 2
좋아요 0
조회수 211
미해결
Next.js App router 기반 Chat GPT 만들기
제가 수업을 기반으로 작성한 코드는 다음과 같습니다. import { NextResponse } from "next/server"; export async function POST(request: Request, {params}: {params: {testId: string}}){ const userData = await request.json(); console.log("server user data", userData); console.log("server param", params.testId); return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); } "use client"; export default function Page({params} : {params: {id:string}}){ const handlerSubmit = async (e:React.FormEvent) => { const response = await fetch('/api/test/1234', { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({name: 'test name', email: 'test email'}), }); console.log(e); const data = await response.json(); console.log("response data", data); } return (<>다이나믹 라우트 페이지: {params.id} <button type="submit" onClick={handlerSubmit}> 전송 </button> </>); } 에러 메시지는 다음과 같습니다. ✓ Compiled /dashboard/[id] in 1716ms (597 modules) Error: Route "/dashboard/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at id (c:\study\chatgpt-clone\next-tutorial\app\dashboard\[id]\page.tsx:21:36) 19 | 20 | > 21 | return (<>다이나믹 라우트 페이지: {params.id} | ^ 22 | <button 23 | type="submit" 24 | onClick={handlerSubmit}> GET /dashboard/12345 200 in 2989ms ✓ Compiled /favicon.ico in 406ms (331 modules) GET /favicon.ico 200 in 543ms ✓ Compiled /api/test/[testId] in 337ms (614 modules) server user data { name: 'test name', email: 'test email' } Error: Route "/api/test/[testId]" used `params.testId`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at testId (c:\study\chatgpt-clone\next-tutorial\app\api\test\[testId]\route.ts:6:39) 4 | const userData = await request.json(); 5 | console.log("server user data", userData); > 6 | console.log("server param", params.testId); | ^ 7 | 8 | return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); 9 | } server param 1234 POST /api/test/1234 200 in 1402ms 응답은 잘 되는데, 동기? 비동기? 이쪽부분에서 문제가 있는 것 같습니다.. ㅠㅠ 영상이랑 똑같이 따라한 것 같은데.. 뭐가 문제인건지 감이 안잡히네요 ㅠㅠ (혹시 추가로 필요한 코드가 있다면 말씀해주세요 ㅠㅠ )
react typescript next.js tailwindcss zustand chatgpt
수하
2025-01-06T19:53:04.641Z
댓글 2
좋아요 0
조회수 294
해결됨
입문자를 위한, ES6+ 최신 자바스크립트 입문
현재 짐코딩님의 자바스크립트와 리액트를 구입해 열심히 듣고 있습니다. 궁금한점이 강의를 듣고 나중에 혼자서도 코드를 작성할줄 알아야 실력이 느는데 자바스크립트 강의를 다 보고 자바스크립트로 혼자 만들어 보는게 좋을까요? 나중에 혼자서도 생각하는 것을 코드로 작성을 할만큼 실력을 키우려면 어떻게 공부를 해야좋을지 조언부탁드리겠습니다.
부드러운 족제비
2025-01-06T17:03:38.131Z
댓글 2
좋아요 0
조회수 157
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
import { ChangeEvent, useState } from "react"; // 리팩토링 const Board = () => { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [isActive, setIsActive] = useState(false); const onChangewriter = (event:ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); if (event.target.value !== "" && title && content) return setIsActive(true); setIsActive(false); }; const onChangeTitile = (event:ChangeEvent<HTMLInputElement>) => { setTitle(event.target.value); if (writer && event.target.value && content) return setIsActive(true); setIsActive(false); }; const onChangeContent = (event:ChangeEvent<HTMLInputElement>) => { setContent(event.target.value); if (writer && title && event.target.value) return setIsActive(true) setIsActive(false); }; const onClickSubmit = (event:MouseEvent<HTMLButtonElement>) => [ console.log(writer), console.log(title), console.log(content), alert("게시물 등록이 완료되었습니다"), ]; return ( <> 작성자 : <input type="text" onChange={onChangewriter} /> <br /> 제목 : <input type="text" onChange={onChangeTitile} /> <br /> 내용: <input type="text" onChange={onChangeContent} /> <br /> <button onClick={onClickSubmit} style={{ backgroundColor: isActive === true ? "yellow" : "none" }} > 등록 </button> </> ); }; export default Board;
react react-native 하이브리드-앱 graphql next.js
이 규성
2025-01-06T12:58:11.880Z
댓글 2
좋아요 0
조회수 141
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
import { ChangeEvent, useState } from "react"; // 리팩토링 const Board = () => { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [isActive, setIsActive] = useState(false); const onChangewriter = (event:ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); if (event.target.value !== "" && title && content) return setIsActive(true); setIsActive(false); }; const onChangeTitile = (event:ChangeEvent<HTMLInputElement>) => { setTitle(event.target.value); if (writer && event.target.value && content) return setIsActive(true); setIsActive(false); }; const onChangeContent = (event:ChangeEvent<HTMLInputElement>) => { setContent(event.target.value); if (writer && title && event.target.value) return setIsActive(true) setIsActive(false); }; const onClickSubmit = (event:MouseEvent<HTMLButtonElement>) => [ console.log(writer), console.log(title), console.log(content), alert("게시물 등록이 완료되었습니다"), ]; return ( <> 작성자 : <input type="text" onChange={onChangewriter} /> <br /> 제목 : <input type="text" onChange={onChangeTitile} /> <br /> 내용: <input type="text" onChange={onChangeContent} /> <br /> <button onClick={onClickSubmit} style={{ backgroundColor: isActive === true ? "yellow" : "none" }} > 등록 </button> </> ); }; export default Board;
react react-native 하이브리드-앱 graphql next.js
이 규성
2025-01-06T12:56:24.522Z
댓글 1
좋아요 0
조회수 77
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
class LinkedList { length = 0; head = null; tail = null; add(value) { if (this.head) { this.tail.next = new Node(value); this.tail.next.prev = this.tail; this.tail = this.tail.next; } else { this.head = new Node(value); this.tail = this.head; } this.length++; return this.length; } search(index) { return this.#search(index)[1]?.value; } #search(index) { let count = 0; let prev; let current = this.head; while(count < index) { prev = current; current = current?.next; count++; } return [prev, current]; } remove(index) { const [prev, current] = this.#search(index); if (prev) { prev.next = current.next; this.length--; return this.length; } else if(current){ // index = 0 일 떄 current = current.next; this.length--; return this.length; } if (current.next === null) { // index = tail this.tail = current.prev; current.prev.next = null; this.length--; } // 삭제 대상 없을 때 아무것도 안함. } } class Node { next = null; prev = null; constructor(value) { this.value = value; } } const li = new LinkedList(); li.add(1); li.add(2); li.add(3); li.add(4); li.add(5); console.log(li.add(6)); console.log(li.remove(5)); console.log(li.remove(4)); console.log 찍었을때는 오류 없이 나온거 같은데 잘 구현 했나 궁금합니다!
samkookji12
2025-01-06T11:01:00.564Z
댓글 1
좋아요 0
조회수 188
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
create-react-app my app 실행 시 아래와 같은 에러가 뜹니다. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: my-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-debug-0.log npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
2025-01-06T07:33:35.153Z
댓글 2
좋아요 0
조회수 385
해결됨
백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편
안녕하세요, Foo님! 좋은 강의 감사드립니다. 타임리프와 같이 SSR의 경우 AJAX 통신도 어려울 뿐더러 브라우저와 모바일 환경에서 필요한 API(엄밀히 말하면 Controller)를 각각 환경에 맞게끔 개발해야하는 단점이 있다. 반면에 CSR으로 FE를 설계하면 JSON만으로 통신하게 되어 하나의 API만 작성하면된다. 라고 이해하면 될까요? 스마트폰에서도 반응형 웹의 경우 기존 브라우저에서의 html과 동일하게 이뤄지니 같은 API로 처리할 수 있는게아닌가요? (모바일 앱과 모바일에서 보는 브라우저의 차이가 있는건가요?)
HTML/CSS javascript bootstrap
티티티
2025-01-06T07:17:37.539Z
댓글 1
좋아요 1
조회수 178
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
아랫분들처럼 강의를 사두고 이제야 수강하다가 쿠폰 관련한 공지를 늦게 보게 되었는데요. 혹시 아직 쿠폰 발급이 가능할까요?
react node.js seo graphql next.js
은파랑
2025-01-06T00:54:59.200Z
댓글 2
좋아요 0
조회수 314
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
4분 20초에 input 태그에 줄바꿈되는 단축키가 뭔가요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
rumi du
2025-01-05T13:30:07.846Z
댓글 1
좋아요 0
조회수 172
해결됨
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
const shoesClick = () => { const intersects = raycaster.intersectObjects( gltf.scene.children, true ); }; 강의에서는 위와 같이 raycaster.intersectObject 메서드 호출시에 scene에 children을 넘겨주시는데 클릭 이벤트의 eventObject 를 넘겨주지 않았는데도 raycaster에 마우스 방향을 set 가능한가요?
javascript react typescript 인터랙티브-웹 three.js webgl react-three-fiber
grs0412
2025-01-05T13:12:19.446Z
댓글 2
좋아요 0
조회수 219
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.8강) edit 컴포넌트 작성할때 저는 diary 컴포넌트처럼 edit 컴포넌트 안에 useParams 훅 호출해서 import { useParams } from "react-router-dom"; const Edit = () => { const params = useParams(); return <div>{params.id}Edit</div>; }; export default Edit; 이렇게 설정해줘야 route 설정할때도 id에 따른 페이지가 잘 보이던데 저만 그런가요 아니면 강의에선 스킵이 된건가여
삘쏘굿
2025-01-05T12:54:38.199Z
댓글 1
좋아요 0
조회수 109
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
링크는 chapter16으로 되어있는데 클릭하면 chapter14 입니다.
강프로그래머
2025-01-05T08:50:22.724Z
댓글 2
좋아요 0
조회수 83
미해결
Next + React Query로 SNS 서비스 만들기
1.next auth core를 설치하는 이유가 있을까요 ? prisma를 사용중인데 beta 버전을 설치하면 prisma adapter와 호환성이 안된다고 하는데 4버전을 사용해도 될까요? 4버전 사용시 export const {auth} 와 같은 코드가 호환될까요? 그리고 middleware 에서 session이 아닌 getToken 으로 토큰을 불러와도 상관 없을까요 ?
react next.js react-query next-auth msw
hm_stom
2025-01-05T05:42:02.551Z
댓글 2
좋아요 0
조회수 219
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요. 강의를 통해 gsap을 입문한 학생입니다. 현재 강의는 스크롤 시 실선이 나타나는데 점선으로 나타내고 싶습니다. 현재 강의에서의 설정부분인데 pathLength = document.querySelector(element).getTotalLength(); gsap.set(element,{ strokeDasharray:pathLength, strokeDashoffset:pathLength, }) strokeDasharray 설정 부분에 dashArray 간격이 16을 넣었더니 이미 실선이 그려진채로 나오더라구요. 드래그하면서 실선이 그려져야하는데... 실선이 아닌 점선으로도 구현할 수 있는지 궁금합니다
javascript 애니메이션 인터랙티브-웹 gsap scrolltrigger
ssooya90
2025-01-05T05:22:22.791Z
댓글 1
좋아요 1
조회수 205
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님 강의 잘 듣고 있습니다! 1.8 연산자 2 에서 수업을 듣고 저 혼자 해보는 중에 선생님께서 작성하신 문법과 다르게 작성한 식에서 정답이 출력 되었습니다. 제가 적은 문법이 추후에 다른 문법이나 개발을 하는데 충돌이 나거나 에러가 날 수 있는 경우가 생길 지 여쭤보고 싶어서 문의 남깁니다! 제가 적은 식은 아래와 같습니다. console 에 찍힌 값 : 10 입니다. var1 = null; var2 = 10; var3 = 30; console.log((var4 = var1 ?? var2));
이윤주
2025-01-05T04:34:32.007Z
댓글 1
좋아요 0
조회수 80
