173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 예전부터 궁금했던게 있습니다. 이번 사전렌더링 강의에서 계속 설명하는 유저-브라우저-서버 개념 에서 서버란 무엇인가요? 단순히 csr은 서버에서 빈껍데기를 먼저주고, 초기접속속도가 느리고, ssr은 빈껍데기가아니라 이미 렌더링된 html을 서버에서 받아서 그대로 렌더링하고... 이런 개념들은 CSR과 SSR 차이만 검색해도 수많은 블로그와 개념이 나오고, 항상 많이 들어왔고 면접준비했을때도 수없이 외워서 알겠습니다만 여기서 항상 의문이 있었는데요. 여기서 말하는 서버란 대체 무엇인가요? 제가 알고있던 서버라는것은 백엔드서버였는데, 이 서버라는 개념이 어려웠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 강의 너무 잘 보고 있습니다. 너무 이해하기 쉽게 알려주셔서 열심히 듣고 있는데 state부분에 대해 궁금해서 질문을 드립니다. state는 그럼 글자가 변한다거나 어떤한 것이 변경되는것처럼 이런 상태들이 변하게 할때 state를 사용한다라고 이해하고 이럴때 state를 사용하면 되는건가요?
해결됨
입문자를 위한 자바스크립트 기초 강의
function handleTodoItemClick(clickedId){ todoArr = todoArr.map(function(aTodo){ return aTodo.todoId !== clickedId ? aTodo : { ...aTodo, todoDone: !aTodo.todoDone } }) displayTodos() saveTodos() } 여기서 클릭하지 않은 할일은 그냥 그대로 반환한다는 것까진 이해했습니다만, !연산자를 통해 클릭한 할일의 경우 어떻게 되는건지, 삼항연산 중 '거짓일 경우의 결과' 부분이 이해가 안갑니다.ㅠ
해결됨
[풀스택 입문] Firebase보다 10배 좋은 Supabase
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14) 할인 쿠폰코드를 적용하려니까 신규 발급이 제한되었거나 발급 수량이 초과된 쿠폰이라고 하네요 ㅠ
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
이렇게 나오고 안보여요...ㅜㅜ 이런 질문이 없는데.. 저만 그런걸까요?
미해결
한 입 크기로 잘라먹는 Next.js
Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ id: string | string[]; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 평소에는 잘 빌드되었는데 '라우트 세그먼트 옵션'을 학습하던 도중 빌드를 진행하니 해당 오류가 발생하였습니다. 원인을 찾아보려 시간을 사용하였는데도 해결하지 못해 질문 남깁니다. ㅠㅠ .next/type/app/book\[id]/page.ts 코드 import { notFound } from "next/navigation"; import style from "./page.module.css"; export default async function Page({ params, }: { params: { id: string | string[] }; }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}` ); if (!response.ok) { if (response.status === 404) { notFound(); } return <div>오류가 발생했습니다...</div>; } const book = await response.json(); const { id, title, subTitle, description, author, publisher, coverImgUrl, } = book; return ( <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> ); }
해결됨
아무도 알려주지 않는 WebRTC를 사용한 P2P통신
아래글은 너무 감사해서 남기는 글입니다. 정말 취업도 힘들고 프로젝트 하면서 제가 p2p 통신은 어떡해 하는지 노드중심 통심 등등 rtc 등등 어디서 배우는지 정말 궁금했습니다. 치지직 통신을 보고 저는 와 이분이 알려주는구나 싶어서 정말 감사한 마음으로 보았지만 생각하는 로직이랑 정말 달라서 조금은 실망 하였지만, 이번 강의는 제가 원하는걸 그대로 볼 수 있는 기회를 얻었던것 같습니다. 정말 감사합니다. 전이거 하고싶어서 개발 공부를 했습니다. 니콜x스 님의 rtc 따라만들기 나 해외꺼를 봐도 너무 클론코딩 위주라서 젼혀 이해가 안돼었고 브라우저에 따라서 보안적인문제등등 에의해서 화면공유또한 만은 에러가 발생하여 힘들었는데 드디어 4년제 + 취업준비기간 2년이상의 원한이풀립니다. ㅜㅜ
미해결
자바스크립트 비기너: 튼튼한 기본 만들기
안녕하세요 선생님 강의 잘 보고있습니다! 제목에 작성한 강의의 7:56초에 "obj에 프리미티브 값으로 설정된 값을 반환"한다는 부분인데요. 이전 강의에서도 오브젝트는 [[primitiveValue]] 가지지 않는다고 하셨는데, valueOf()를 쓰면 프리미티브 값을 반환한다는 표현이 잘 이해가 가지 않아서 질문드렸습니다. 저는 저 상황에서 참조값을 반환하는 것으로 알고있는데 혹시 JS 내부적인 처리 이후 평가된 값으로 생각해서 프리미티브 값이라고 표현을 하신걸까요...?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 css를 공부중인데 선택자에 대해 질문이 있습니다 * {color: white}, body {color: white} 이렇게 전체선택자와 body선택자 둘다 글자 색상을 흰색으로 했는데 전체선택자도 모든 태그의 글자색이 흰색이 되고 body도 모든 글자색이 흰색이 되는데 이 두개의 차이점이 헷갈립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
다른 분들의 질문에 대한 답변에서 "사전 렌더링 방식에서 서버가 주는 것은 전체 HTML이 아닌 그 페이지의 HTML이다"와 같은 표현이 많이 보여서 질문 드립니다. 페이지 이동 시 시뮬레이션을 설명하면서 사용하신 컴포넌트 교체 , 컨텐츠 렌더링 과 같은 표현들을 미루어 보았을 때, 아래와 같은 작업이 이루어질 것이라고 생각했는데요, 접속 요청 -> 웹 서버가 HTML을 반환 페이지 이동 -> 해당 HTML의 돔 트리 수정 수화 과정 역시 HTML을 리액트가 핸들링할 수 있도록 하는 작업(리액트 문서 참고)이기 때문에 초기 렌더링 시에만 일어난다고 이해했습니다. 페이지 이동 시마다 HTML을 새로 생성하는 것인지, 또 수화의 정확한 의미는 무엇인지 공부할수록 헷갈리게 되어 질문 남기게 되었습니다. 제가 잘 이해한 것이 맞을까요?
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
안녕하세요, 3칸씩 건너뛸 수 있을 경우도 설명을 해주셨는데, 이때 d[0]이 1이라는 게 잘 이해가 되지 않습니다. d[1] = 1, d[2] = 2, d[3] = 4 로 초기 셋팅을 해두고 4부터 루프를 돌아야 하는 게 아닌가요? 감사합니다:)
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 Edit페이지 구현하기 강의 부분에서 16:52 부분에 아직 Edit 컴포넌트가 return하기 전인 상태이다. 그래서 마운트 되기 전이기 때문에 nav("/", {replace: true}) 동작할 수 가없다 라는 게 무슨 말인가요? 이 Edit 즉 이 수정페이지로 처음에 화면이 나타난다(마운트)는 이해가 가는데 왜 nav가 실행을 할 수 가없나요? 조금 쉽게 설명을 부탁드리겠습니다 ㅜㅜ
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 "부트캠프에서 만든 완벽한 프론트엔드 코스" 강의를 구매해서 열심히 듣고 있습니다. 강의소개에서 웹 프론트엔드 부트캠프 부분에 CRUD에 충실한 여행자 게시판 '트립토크'와 숙박상품을 구매할 수 있는 여행플렛폼이라고 나오는데 그렇다면 이 강의에 이 여행 플랫폼을 만드는 내용도 있나요?
미해결
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
커서를 따라다니는 나비 화면에서 mousemove 이벤트에만 커서가 움직이고, 마우스휠(wheel 이벤트)을 할 경우에는 나비 이미지가 움지이지 않아 대략 아래와 같이 패턴으로 마우스 휠의 경우에도 움직임을 추가해 봤습니다. 그런데 wheel 이벤트의 경우에는 나비가 커서 위치에 제대로 붙지 않고, 마우스를 조금이라도 움직여야 제대로 위치를 잡더라고요. 마우스 휠 이벤트일 때 어떻게 보완하면 좋은지 조언 부탁드립니다. const cursor = document.querySelector('.box'); let x = 0; let y = 0; window.addEventListener('mousemove', function(e){ x = e.pageX; y = e.pageY; cursorMove(); }); window.addEventListener('wheel', function(e){ x = e.pageX; y = e.pageY; cursorMove(); }); function cursorMove() { cursor.style.transform = `translate(${x}px , ${y}px)`; }
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
"[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의" 를 수강하고 배포 부분을 이 강의를 수강하고 있는 수강생입니다. 고농축 강의에서 만든 포트폴리오를 aws에서 배포했을때에, CORS 에러가 다음과 같이 나는 문제가 있는데 어떻게 해결해야할까요? 찾아보니 백엔드에서 CORS 를 허용해야하거나 프론트에서 프록시를 사용하라고 되어있는데 어떻게 해결해야할지 모르겠네요
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Home.jsx 에서 import { useSearchParams } from "react-router-dom"; const Home=()=>{ const [params, setParams]=useSearchParams(); console.log(params.get("value")); return <div>Home</div>; }; export default Home; 이렇게 작성했는데 사진과 같이 빨간색 글씨가 뜨는데 어디가 틀린걸까요?? 출력에는 문제가 없습니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 해당 강의는 react-rounter-dom v6.22 이던데 혹시 v7로 강의 업데이트 예정이실까요? 정환님이 말아주시는 리라돔 v7 강의는 어떨지 하여 기대감에 여쭤봅니다!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정페이지, 새일기작성페이지, 등 새로고침하면 404 에러가 뜹니다 ㅠㅠ vercel : https://emotion-diary-ochre-six.vercel.app/ 확인 부탁드립니다 ㅠㅠ
미해결
자바스크립트 비기너: 튼튼한 기본 만들기
안녕하세요 강의 잘 듣고있습니다. 1:56초쯤에서 헷갈리는 부분이 있어서 질문드립니다. var total도 표현식이라고 말씀하셨는데요. 제가 기존에 알고있는 개념은 "값으로 평가될 수 있는 문"을 표현식이라고 알고있습니다. 따라서 var total은 "표현식이 될 수 없는 문"으로 이해하고 있었는데, 혹시 제가 잘못 이해하고 있는걸까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const inputRef = useRef() const onSubmit = () => { if(input.name === "" ){ console.log(inputRef.current) inputRef.current.focus() } } return ( <div> <div> <input ref={inputRef} name="name" value={input.name} onChange={onChange} type="text"/> </div> <div> <input ref={inputRef} name="birth" value={input.birth} onChange={onChange} type="date" /> </div> <div> </div> <div> <textarea ref={inputRef} name="bio" value={input.bio} onChange={onChange} > </textarea> </div> <button onClick={onSubmit}>제출</button> </div> ) 위와같은 코드에서 onSubmit함수내 console.log(inputRef.current)를 해보면 무조건 bio만 출력됩니다. 또한 포커스도 어떤 경우에서든 bio가 있는 textarea쪽으로만 포커싱이 됩니다. 어떤 이유에서 이러한 현상이 발생되는지 궁금합니다.
