174만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수업 노트에 제시된 "Sort 메서드 관련 아티클" 하이퍼링크를 클릭하면 404: 잘못된 링크입니다. 메뉴를 통해 정상적인 페이지로 접근하세요. 라고 뜨면서 아무런 내용도 보이지 않습니다. 다른 페이지로 넘어가거나 홈으로 넘어가려고 해도 같은 오류가 뜨는데, 어떤 경로로 접속해야 해당 아티클을 확인할 수 있는 것인가요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의에서는 React에서 DOM을 흉내 낸 Virtual Dom을 사용하여, 업데이트를 Virtual Dom에 다 모은 후에 한번에 반영하여 DOM을 1회 수정해 시간적인 측면에서 성능을 개선한다라고 설명해주셨다고 이해했는데, Virtual DOM을 수정하는 것이 DOM을 수정하는 것보다 시간이 빠른 이유는 뭔가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
html, body { margin: 0px; width: 100%; background-color: rgb(246, 246, 246); } 우선 해당 스타일을 body 뿐만 아니라 html 까지 포함 시키는 이유가 궁금합니다. width에 100%를 주었는데, 그 이유와 height에는 100%를 주지않은 이유가 궁금합니다. 자식 요소들의 너비/높이에 %를 준다면 부모 요소의 너비/높이를 기준으로 삼는다는데, 최상위 태그인 html의 너비/높이에 %를 주면 그 기준이 무엇인지도 궁금합니다.
해결됨
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
첫 강의 수강하면서 모르는 부분이 조금 있어 기본기를 더 다져야 할것 같아서 미뤄두었는데 제 수준 정도면 강의 듣는데 지장이 없을까요? html -> 시멘틱태그, class,id 등등 태그 특성이해 css -> flex, transition, animation, flex 등등 기초부분 가능
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
안녕하세요, 저는 회사에서 next.js로 포팅하여 개인적으로 좀 공부하고 있는 학생입니다. 현재 2강 할 일 관리 앱을 보면서 저희 회사의 작업 방식을 함께 생각해봤는데 저희 회사는 꼭 필요한 부분 (iron-session을 이용하여 세션을 가져온다거나)을 제외하고는 죄다 클라이언트 컴포넌트로 바꿔서 사용하고 있습니다. 그래서 이 작업을 진행하면서도 클라이언트 컴포넌트로 모두 바꾸어 진행한다면 어떨까라고 생각이 들었었는데 과제에서는 최소한의 컴포넌트만 클라이언트 컴포넌트로 바꾸라고 하신 이유가 궁금합니다. 감사합니다!
해결됨
React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계
안녕하세요 강의 잘 듣고 있습니다 강의에서 index.html 부분을 설명해주실 때 최신 문법의 js를 사용하고 있어 babel이 jsx를 구버전 js로 컨버팅하는 역할을 수행한다고 설명을 해주셨는데요 node js 로 서버를 호스팅하지 않더라도 로컬 경로의 html이 크롬에서 렌더 되서 보이더라구요 브라우저는 chrome을 사용하고 있는데, 이건 그냥 최신 브라우저들이 jsx를 지원하고 있다고 이해하면 될까요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
현재 완벽한 프론트엔드 부트캠프와 고농축 백엔드 부트캠프 둘다 수강중입니다. 두 강의 소스코드 전체를 보내주시면 감사하겠습니다. doomco@naver.com
해결됨
카카오 면접관이 알려주는 문서기반의 프레임워크 통신 패턴을 위한 GraphQL
안녕하세요 평소에 hong님 강의를 수강하고 잇는 수강생입니다. 다름이 아니라 기존에 나눠주신 resolvers.js파일에는 새로 적어야 하는 코드에 대한 자료가 없습니다. 제가 못찾은 걸수도 있는데 현재로서는 보이지가 않습니다.
해결됨
React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)
'81강. [Pain] 대규모 삭제 작업 시 발생하는 수많은 요청을 하나로 묶기' 에 관하여 실습 자료가 없는데 혹시 의도된 것일까요?
미해결
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
선생님 공유해주신 핸드북에 링크가 몇개 잘못되었어요 8.호이스팅 , 17. spread와 rest 두개가 에러가 나네요 나오지 않습니다. ㅠㅠㅠ
해결됨
React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)
62강 실습 자료로는 ' [Solution] Stale-While-Revalidate: 사용자에게는 캐시를, 뒤에서는 갱신을' 에 관한 내용이 나와야하는데, 현재는 '[Pain] 수동으로 관리하던 전역 로딩/에러 상태가 로직을 오염시킬 때' 로 나와있습니다. 62강 실습 자료 교체 부탁드립니다.
해결됨
카카오 면접관이 알려주는 문서기반의 프레임워크 통신 패턴을 위한 GraphQL
안녕하세요 hong님 강의를 수강하고 있는 수강생입니다. 다름이 아니라 코드 자료들은 따로 안보이는데, 직접 일시정지하고 쳐야하는 건가요? 아니면 제가 못찾은 걸까요?? 강의 일시정지 하고 코드를 치기엔 조금 힘들거 같아서 그렇습니다!
해결됨
"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part 2 - 스트림 아키텍처와 하드웨어 통제기
안녕하세요. AI 딸깍의 시대를 1~4 구매하여 수강 중에 있습니다. 강의를 듣다보니, 의문이 들어서 문의드립니다. AI로 딸깍하니, 얕은 수준으로 다루게 되니 원리를 이해하자를 이야기하고자 해당 강의가 있는 것 같습니다. 실무에서는 라이브러리나 프레임워크로 개발을 진행하게 되는 것 같습니다. 원리를 이해하면 개발을 조금 더 잘하게 된다? AI에 명령을 내릴 때 조금 더 잘 내릴 수 있다? 아니면 장애가 터졌을 때 이유를 알 수 있다? 그것도 아니라면 개발 시 장애를 미리 예측하여 대응할 수 있다로 봐야할까요? 보면서 궁금하여 문의드립니다.
해결됨
"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1 - V8과 코어 해체기
안녕하세요. 현재 Node.js를 학습한 뒤 NestJS를 공부하고 있습니다. 부족한 CS 지식과 Node.js의 내부 동작 원리를 보완할 수 있을 것 같아 강의를 수강하고 있는데, NestJS 학습과 개인 프로젝트를 병행하다 보니 강의를 모두 시청하는 데 많은 시간을 투자하기가 어려운 상황입니다. 그래서 가능하다면 강의 노트를 중심으로 학습하여 시간을 조금 더 효율적으로 활용하고 싶습니다. 혹시 강의 노트만으로도 핵심 내용을 충분히 습득할 수 있을까요? 아니면 영상 강의를 통해서만 얻을 수 있는 중요한 설명이나 실무적인 인사이트가 많은 편인지 궁금합니다. 만약 강의에서만 얻을 수 있는 내용이 많다면 시간을 조금 더 내서라도 영상을 함께 수강하려고 합니다. 의견 부탁드립니다.
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
카카오 로그인 후 이메일을 입력하고 몽고DB에 이메일과 refresh token이 저장된 것 까지 확인은 했는데 쿠키가 생성되지 않고 있네요. 강사님 네이버메일로 소스코드링크를 보냈습니다.
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
이메일 입력 후 contitnue 버튼을 누르면 JWT auth error invalid token 오류가 나네요. 몇시간째 보고 있는데 원인을 찾지 못하겠네요. 전체 소스 코드를 같이 첨부하고 싶은데 할 수 가 없네요. 일단은 EmailInfoForm 소스만 올려 봅니다. backend는 .env 빼고 소스를 특별하게 수정한 부분이 없습니다. 브라우저 application 데이터도 클리어 해보고 했지만 소용이 없네요. 확인 부탁드립니다. "use client"; import {useState} from "react"; import {MailIcon} from "../ui/Icons"; import {validateEmail} from "@/lib/validation"; import clientApi from "@/lib/api/clientApi"; import {useRouter, useSearchParams} from "next/navigation"; export default function EmailInfoForm() { const router = useRouter(); const searchParams = useSearchParams(); const accessToken = searchParams.get("access_token") ?? ""; const [email, setEmail] = useState(""); const [error, setError] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); const handleFormSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => { e.preventDefault(); if (isSubmitting) return; setError(""); //이메일 검증 const validationError = validateEmail(email); if (validationError) { setError(validationError); return; } //확인 대화 상자 const confirmed = window.confirm( "한 번 입력한 이메일은 변경할 수 없습니다. 이 이메일로 저장할까요?", ); if (!confirmed) return; setIsSubmitting(true); try { const res = await clientApi("/auth/update-email", { method: "PATCH", body: JSON.stringify({email: email.trim()}), headers: { Authorization: `Bearer ${accessToken}`, }, }); if (!res.ok) { const errorData = await res.json().catch(() => null); throw new Error( (errorData && errorData.error) || "이메일 업데이트에 실패하였습니다.", ); } router.replace("/"); router.refresh(); } catch (e) { setError( e instanceof Error ? e.message : "이메일 업데이트에 실패하였습니다.", ); } }; return ( <> <form className="flex flex-col gap-5" onSubmit={handleFormSubmit}> <div className="flex flex-col gap-2"> <label htmlFor="email" className="text-sm font-medium text-foreground" > Email Address </label> <div className="relative"> <MailIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /> <input id="email" type="email" placeholder="Enter your email" className="h-11 w-full rounded-lg border-none bg-secondary pl-10 pr-4 text-sm text-foreground placeholder-muted-foreground outline-none focus:ring-2 focus:ring-primary" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> </div> {error && ( <p className="text-sm font-medium text-destructive">{error}</p> )} <div className="grid grid-cols-2 gap-3"> <button type="button" className="h-11 rounded-lg bg-secondary text-sm font-medium text-secondary-foreground transition-colors hover:opacity-90" > Cancel </button> <button type="submit" className="h-11 rounded-lg bg-primary text-sm font-medium text-primary-foreground transition-colors hover:opacity-90" > Continue </button> </div> </form> </> ); }
미해결
포트폴리오 어나더레벨 | 합격하는 이력서 작성법
현재 경력 기술서는 큰돌님이 말씀하신 것과 비슷하게 하나의 이슈에 대한 문제, 분석, 해결 과정, 결론 및 소감 형태로 나열되어 있습니다. 여기서 문제점이, 이슈가 많을수록, 내용이 많을수록 비대해지더라구요.. 한, 두 줄 내로 줄여도 이슈가 많으니 페이지는 자꾸 늘어나고 있습니다. 경력기술서 내용을 포트폴리오에 넣어 분산시켜야 할지, 굵직한 이슈만 적어야할지, 방향에 대해 고민이 됩니다. 경력기술서의 존재 이유?(면접관이 왜 보는지, 어떤 부분을 중심으로 보는지 등) 같은게 궁금합니다.
해결됨
"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1 - V8과 코어 해체기
강의 2강에 대한 노트에 대한 질문입니다. 💡 [CS 및 실무 적용 Point: MSA와 BFF 아키텍처] 현대의 마이크로서비스 아키텍처(MSA)에서 Node.js는 특히 BFF(Backend For Frontend) 패턴의 핵심 기술로 사용됩니다. 브라우저의 DOM을 다루던 언어적 특성을 살려 클라이언트(React, Vue 등)의 요청을 쉽게 파싱하고, 이식된 운영체제 제어 능력(http, fs)을 통해 백엔드의 여러 마이크로서비스(Java, Python 등)로 비동기 네트워크 요청을 뿌린 뒤, 그 결과를 모아 빠르게 클라이언트에게 반환하는 완벽한 미들웨어 역할을 수행합니다. 해당 설명에서 BFF로 NodeJs를 유용한 이유는 I/O 입출력 특출나기 때문에, BFF로 사용하면, API 요청을 받아서 마이크로 서비스에 통신 요청을 보내는 용도로 사용한다는 건가요? 한번 더 거쳐가면 더 성능이 안 좋은 거 아닌가요? 아니면 원래 SpringBoot로 개발되었던 웹 사이트를 NodeJs로 구현한다면 더 좋다는 의미일까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
우선 이전 질문/답변을 통해서 eslint 설정 파일명이 바뀐것을 알게되었습니다. 문제는 강의의 코드와 저의 코드가 다르다는 점인데, 이정환 강사님께서 설정하신 그대로 따라간다면 rules: { "no-unused-vars": "off", "react-prop-types": "off", }, 이 코드만 추가하면되는걸까요? 강의에서는 rules 프로퍼티가 이미 있고 해당 객체 내부에 react-refresh/only-export-components ~가 있는데 제 코드에는 rules 자체가 없습니다. 26-07-01 기준 현재 vite 프로젝트의 eslint.config.js 파일 코드 export default defineConfig([ globalIgnores(["dist"]), { files: ["**/*.{js,jsx}"], extends: [ js.configs.recommended, reactHooks.configs.flat.recommended, reactRefresh.configs.vite, ], languageOptions: { globals: globals.browser, parserOptions: { ecmaFeatures: { jsx: true } }, }, }, ]);
해결됨
"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part 2 - 스트림 아키텍처와 하드웨어 통제기
// 3. 작업 종료 알림: end 이벤트를 통해 댐 바닥 확인 streamRead.on("end", async () => { console.log("\\n✅ [종료] 댐 바닥 도착. 모든 데이터 복사 완료!"); // 메서드: 더 보낼 물이 없다고 선언하고 파이프 닫기 절차 진입 // finish 이벤트: 쓰기 파이프가 논리적으로 완벽히 닫혔음을 보장 streamWrite.on("finish", async () => { // 쓰기 파일 디스크립터(번호표) 운영체제에 반환 (메모리 누수 방지) await fileHandleWrite.close(); console.timeEnd("복사_소요_시간"); console.log( `📊 요약: 총 ${chunkCount}회 펌프질, ${pauseCount}회 비상 정지(메모리 방어 성공)`, ); // 메서드: 실험용 임시 파일 삭제 클린업 (unlink) await fs.unlink(SOURCE_FILE); await fs.unlink(DEST_FILE); }); streamWrite.end(); // 메서드: 사용이 끝난 읽기 파일 디스크립터(번호표) 운영체제에 반환 await fileHandleRead.close(); 읽기 스트림과 쓰기 스트림을 종료하는 3번 단계에서 쓰기 스트림을 end 하기 전에 .on finish를 등록을 해야 콘솔에서 요약을 볼 수 있었습니다. 클로드는 레이스 컨디션이 발생해서 그렇다고 하는데 어떤 부분에서 경합이 일어났는지 잘 모르겠습니다.
