173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
메인화면에서 SSR로 데이터를 받아오도록 구현한 상태입니다. (page router) 데이터가 많아서인지 페이지 접속 시 빈 화면이 출력되는데, 스켈레톤 UI를 적용해봐도 스켈레톤 UI가 표시되지 않습니다. 스켈레톤 UI는 CSR 환경에서만 사용할 수 있는 걸까요? 이런 경우에는 데이터를 CSR로 받아오고, 스켈레톤 UI를 적용하는 게 나을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
저도 이전에 미리 구매해놓고 공부하려는데 뒤늦게 확인했습니다. 리뉴얼된 버전으로 공부하고 싶은데, 쿠폰을 발급받을 수 있을까요?
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요 안녕하세요 버튼이 안 떠서 질문드립니다 오타는 없는 것 같은데 버튼이 안 나오네요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import './App.css' import Header from './components/Header'; import Editor from './components/Editor'; import { useState, useRef,useReducer } from 'react'; import List from './components/List'; const mockData=[ { id:0, isDone: false, content : "React 공부하기", date: new Date().getTime(), }, { id:1, isDone: false, content : "빨래하기", date: new Date().getTime(), }, { id:2, isDone: false, content : "노래 연습하기", date: new Date().getTime(), }, ]; function reducer(state,action){ switch(action.type){ case 'CREATE': return [action.data, ...state]; case 'UPDATE': return state.map((item)=>item.id===action.targetId?{...item, isDone: !item.isDone}:item); case "DELETE": return state.filter((item)=>item.id !==action.targetId); default: return state; } } function App() { // const [todos,setTodos]=useState(mockData); const [todos,dispatch]=useReducer(reducer,mockData); const idRef=useRef(3); const onCreate=(content)=>{ dispatch({ type:"CREATE", data:{ id:idRef.cureent ++, isDone:false, content: content, date: new Date().getTime(), }, }); }; const onUpdate=(targetId)=>{ dispatch({ type:"UPDATE", targetId:targetId }) }; const onDelete=(targetId)=>{ dispatch({ type:"DELETE", targetId:targetId }); }; return ( <div className="App"> <Header /> <Editor onCreate={onCreate} /> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} /> </div> ); } export default App 강의 10.2를 보던 중 '123'을 리스트에 추가하고 체크박스를 누르는 과정에서 체크박스와 삭제 버튼이 작동하지 않습니다. 기존에 있던 리스트들은 체크와 삭제가 다 되는데 추가된 리스트에 대해서만 작동하지 않는데 틀린 부분이 있는지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수정페이지에서 수정하기 버튼을 누르면 네트웨크에 이런 에러가 떠요 미리보기 { "errors": [ { "message": "Unknown type \"Sting\". Did you mean \"String\" or \"Int\"?", "locations": [ { "line": 1, "column": 67 } ], "extensions": { "code": "GRAPHQL_VALIDATION_FAILED", "exception": { "stacktrace": [ "GraphQLError: Unknown type \"Sting\". Did you mean \"String\" or \"Int\"?", " at Object.NamedType (/frontend-api-example/node_modules/graphql/validation/rules/KnownTypeNamesRule.js:57:29)", " at Object.enter (/frontend-api-example/node_modules/graphql/language/visitor.js:323:29)", " at Object.enter (/frontend-api-example/node_modules/graphql/utilities/TypeInfo.js:370:25)", " at visit (/frontend-api-example/node_modules/graphql/language/visitor.js:243:26)", " at Object.validate (/frontend-api-example/node_modules/graphql/validation/validate.js:69:24)", " at validate (/frontend-api-example/node_modules/apollo-server-core/src/requestPipeline.ts:536:14)", " at Object.<anonymous> (/frontend-api-example/node_modules/apollo-server-core/src/requestPipeline.ts:302:32)", " at Generator.next (<anonymous>)", " at fulfilled (/frontend-api-example/node_modules/apollo-server-core/dist/requestPipeline.js:5:58)", " at processTicksAndRejections (node:internal/process/task_queues:105:5)" ] } } } ] } 페이로드 09-03-boards/ [number] 페이지 코드 입니다 "use client"; //상세 import { useParams } from "next/navigation"; import { gql, useQuery } from "@apollo/client"; import Link from "next/link"; const FETCH_BOARD = gql` query fetchBoard($mynumber: Int) { fetchBoard(number: $mynumber) { number writer title contents } } `; export default function BoardsDetailPage() { const params = useParams(); //useQuery는 중괄호, uesMutation은 대괄호 const { data } = useQuery(FETCH_BOARD, { variables: { mynumber: Number(params.number) }, }); console.log(data); return ( <div> <div> {Number(params.number)}번 게시글 상세페이지 이동이 완료되었습니다. </div> <div>작성자: {data?.fetchBoard?.writer}</div> <div>제목: {data?.fetchBoard?.title}</div> <div>내용: {data?.fetchBoard?.contents}</div> <Link href={`/section09/09-03-boards/${params.number}/edit`}> 수정하러가기 </Link> </div> ); } 09-03-boards-write 코드 입니다 "use client"; import { useMutation, gql } from "@apollo/client"; import { useState } from "react"; import { useParams, useRouter } from "next/navigation"; const 나의그래프큐엘셋팅 = gql` # 타입적는곳 mutation createBoard( $mywriter: String $mytitle: String $mycontents: String ) { # 전달할 변수 적는 곳 createBoard(writer: $mywriter, title: $mytitle, contents: $mycontents) { _id number message } } `; //수정 const UPDATE_BOARD = gql` mutation updateBoard( $mynumber: Int $mywriter: String $mytitle: Sting $mycontents: String ) { updateBoard( number: $mynumber writer: $mywriter title: $mytitle contents: $mycontents ) { _id number message } } `; export default function BoardsWrite(props) { const router = useRouter(); const params = useParams(); console.log(params.number); const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const [나의함수] = useMutation(나의그래프큐엘셋팅); //수정 const [updateBoard] = useMutation(UPDATE_BOARD); //등록 const onClickSubmit = async () => { //여기서 그래프큐엘 요청하기 const result = await 나의함수({ //variables 이게 $역할을 함 variables: { mywriter: writer, mytitle: title, mycontents: contents, }, }); console.log(result); alert("등록이 완료되었습니다."); router.push(`/section09/09-03-boards/${result.data.createBoard.number}`); }; //수정 const onClickUpdate = async () => { //여기서 수정하기 하자!! const result = await updateBoard({ variables: { mynumber: Number(params.number), mywriter: writer, mytitle: title, mycontents: contents, }, }); console.log(result); alert("수정이 완료되었습니다."); router.push(`/section09/09-03-boards/${result.data.updateBoard.number}`); }; const onChangeWriter = (event) => { setWriter(event.target.value); }; const onChangeTitle = (event) => { setTitle(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; return ( <div> 작성자: <input type="text" onChange={onChangeWriter} /> <br /> 제목: <input type="text" onChange={onChangeTitle} /> <br /> 내용: <input type="text" onChange={onChangeContents} /> <br /> <button onClick={props.isEdit ? onClickUpdate : onClickSubmit}> {props.isEdit ? "수정" : "등록"}하기 </button> </div> ); }
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
[Nest] 39177 - 2025. 01. 23. 오후 2:27:12 LOG [RoutesResolver] CommonController {/common}: +1ms [Nest] 39177 - 2025. 01. 23. 오후 2:27:12 LOG [RouterExplorer] Mapped {/common/image, POST} route +0ms [Nest] 39177 - 2025. 01. 23. 오후 2:27:12 LOG [RoutesResolver] ChatsController {/chats}: +0ms /Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:153 throw new TypeError(`Missing parameter name at ${i}: ${DEBUG_URL}`); ^ TypeError: Missing parameter name at 9: https://git.new/pathToRegexpError at name (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:153:13) at lexer (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:171:21) at lexer.next (<anonymous>) at Iter.peek (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:188:32) at Iter.tryConsume (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:195:24) at Iter.text (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:213:26) at consume (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:285:23) at parse (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:320:18) at /Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:503:40 at Array.map (<anonymous>) yarn add하여 위 에러가 발생해서 찾아보니 express 5.0.0일때 나타나는 에러라고 하네요. 25년 1월기준 yarn add 커맨드 입력당시 nestjs 10.x.x -> 11.x.x로 되면서 발생한 에러라서 다운그레이드하니 해결되긴 했습니다. 다른 수강생들에게 도움이될까 하여 남깁니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입 포함된 버전을 설치한 후에도 타입에러가 계속 생기는데 버전이슈일까요.. "dependencies": { "@ant-design/icons": "^5.5.2", "@apollo/client": "^3.11.9", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "antd": "^5.21.6", "axios": "^1.7.7", "graphql": "^16.9.0", "lodash": "^4.17.21", "next": "12.1.0", "react": "17.0.2", "react-daum-postcode": "^3.2.0", "react-dom": "17.0.2", "react-infinite-scroller": "^1.2.6", "ts-node": "^10.9.2" }, "devDependencies": { "@eslint/js": "^9.18.0", "@graphql-codegen/cli": "^5.0.3", "@graphql-codegen/typescript": "^4.1.2", "@types/node": "17.0.2", "@types/react": "17.0.2", "@types/react-infinite-scroller": "^1.2.5", "eslint": "^9.18.0", "eslint-config-next": "15.1.4", "eslint-config-prettier": "^10.0.1", "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.37.4", "globals": "^15.14.0", "prettier": "^3.4.2", "typescript": "^5.7.3", "typescript-eslint": "^8.20.0" "react-infinite-scroller": "^1.2.6", 이고 "@types/react-infinite-scroller": "^1.2.5", 로 되어있습니다. ++ return ( <div style={{ height: '700px', overflow: 'auto' }}> <InfiniteScroll pageStart={0} loadMore={onLoadMore} hasMore={hasMorePosts} loader={ <div className='loader' key='loader'> Loading... </div> } useWindow={false} > {data?.fetchBoards?.map((el) => el ? ( <div key={el._id}> <span style={{ margin: '10px' }}>{el.title}</span> <span style={{ margin: '10px' }}>{el.writer}</span> </div> ) : null, ) ?? []} </InfiniteScroll> </div> ); 1. InfiniteScroll 'InfiniteScroll' cannot be used as a JSX component. Its instance type 'InfiniteScroll' is not a valid JSX element. Property 'refs' is missing in type 'InfiniteScroll' but required in type 'ElementClass' 3. loader Type 'Element' is not assignable to type ReactElement<unknown, string | JSXElementConstructor<any>> Types of property 'key' are incompatible. TYpe 'Key | null' is not assignable to type 'string | null'. Type 'number' is not assignable to type 'string'. 4. {data?.~</div>;})} Type 'void[] | undefined' is not assignable to type 'ReactNode'. 2. {data?.~</div>;})} Type 'void[] | undefined' is not assignable to type 'ReactNode'. (이하 생략) 이런 에러였었는데, 상단에 타입선언 해주고 모두 해결 되었습니다. import React, { ReactElement } from 'react'; declare module 'react-infinite-scroller' { interface InfiniteScrollProps { pageStart?: number; loadMore: () => void; hasMore?: boolean; loader?: ReactElement | null; useWindow?: boolean; children?: React.ReactNode; } export default function InfiniteScroll(props: InfiniteScrollProps): ReactElement; } 모듈이 덜 설치된건지 ㅠㅠ 왜 이런 에러가 생긴지 모르겠네요 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
24년 12월에 결제하여 수강 중입니다 올해 [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스 강의가 오픈 된 것을 보았는데, 강의 간 내용에 많은 차이 점이 있을까요? 신규 강의를 수강하려면 재결제 하는 방법밖에 없을까요..?
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
"devDependencies": { "@nestjs/cli": "^10.4.9", "@nestjs/schematics": "^10.2.3", "@types/express": "^4.17.17", "@types/jest": "^29.5.2", "@types/node": "^20.3.1", "@types/pg": "^8", "@types/supertest": "^6.0.0", "@yarnpkg/pnpify": "^4.1.3", "dotenv": "^16.4.7", "dotenv-cli": "^8.0.0", "jest": "^29.5.0", "source-map-support": "^0.5.21", "supertest": "^7.0.0", "ts-jest": "^29.1.0", "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "~5.3", "webpack": "^5.97.1" }, dotenv랑 dotenv-cli 설치하고 "start:dev": "dotenv -e .env nest start --watch", "start:debug": "dotenv -e .env -- yarn dlx @nestjs/cli start --debug --watch", 하면 정상적으로 동작합니다!
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
AWS HTTPS 적용하는 부분에서 과정대로 2번 따라했는데 똑같이 해당 에러가 나서 https로 접속이 안 되네요 ㅜㅜ 이유가 먼지 알 수 있을까요?!
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
질문 주실 때 항상 2가지를 지켜주세요. 오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기 HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기 만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 수업 내용에는 없는 질문이긴 한데ㅠㅠ SCSS 에서 @keyframes 사용은 어려운건가요? 구글링한 정보로는 적용이 안되서요ㅠㅠ
미해결
if (true) { let y = 'hi'; function test() { console.log(y); } } console.log(y); // ReferenceError: y is not defined test(); // hi 위 코드 실행 시 console.log(y)는 참조 에러, test()는 'hi'가 출력되어집니다. 제가 알기론 자바스크립트는 코드 블럭이 아닌 함수에 의해서 지역 스코프가 생긴다(함수 레벨 스코프)고 알고 있습니다. 따라서 if문(블록문) 내에 정의한 test 함수를 전역에서 호출해도 에러가 발생하지 않는 것이고요. let, const 키워드로 선언한 변수의 경우 블록 레벨 스코프를 가지기 때문에 전역에서 y 변수 참조 시 참조 에러가 발생하는 것도 이해할 수 있습니다. 제가 궁금한 것은 test 스코프의 상위 스코프는 전역 스코프가 아닌지? test 스코프의 상위 스코프가 if문 블록 스코프라면 전역에서 test함수 호출 시 참조에러가 발생해야하는거 아닌가요?(엄격 모드일 경우 참조에러 발생, 비엄격 모드일 땐 위 처럼 'hi'출력) 그렇다면 test 함수 내에서는 y를 참조할 경우 test 함수 내부에 y가 있는지 찾은 후 없기 때문에 스코프 체인에 따라 전역에 y가 있는지 찾고 이 경우에도 없기 때문에 참조에러가 발생해야하는 것이 아닌지? 어떻게 블록 레벨의 'hi'를 찾을 수 있는지? 입니다. 잘못된 개념이 있다면 알려주시면 감사하겠습니다 ㅜㅜ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 비슷한 유형의 질문글을 보고 늦었지만 문의드리게 되었습니다. 공지를 늦게 확인하여 쿠폰을 받지 못했는데 혹시 지금이라도 발급이 가능할까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드를 치고 control + s를 눌렀을 때 <button> 내부의 요소들이 정환님의 화면처럼 코드들이 세로 일렬로 되도록 세팅하고 싶은데 저는 가로 일렬로 배치가 돼요. 혹시 이 부분 세팅은 어떻게 하는지 알려주실 수 있으실까요?
해결됨
Next.js 시작하기
import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslintrc"; import prettierPlugin from "eslint-plugin-prettier"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, }); const eslintConfig = [ ...compat.extends("next/core-web-vitals"), ...compat.extends("plugin:prettier/recommended"), { files: ["**/*.js", "**/*.jsx"], plugins: { prettier: prettierPlugin, }, rules: { "no-undef": "error", "prettier/prettier": [ "error", { singleQuote: true, semi: true, tabWidth: 2, trailingComma: "all", printWidth: 80, bracketSpacing: true, arrowParens: "avoid", }, ], }, }, ]; export default eslintConfig;
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM 위 코드는 만료됬다고 나옵니다.
미해결
Vue.js 시작하기 - Age of Vue.js
하아 너무 답답하네요 레거시나 베타버전 다 설치해봤고, 충돌일까싶어서 한개씩만 설치도 해봤는데 안됩니다... 강의의 반만 따라가는 것 같아서 참 답답합니다... 어떻게 해결방법이 없을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
선생님 강의 5-3) 9분 10초를 보다가 궁금한 것이 있습니다~ generateStaticParams으로 지정했던 id값이 아닌 4번페이지에 접속했을 때 해당 페이지가 실시간으로 다이나믹하게 페이지가 생성되고 풀라우트캐시에 저장된다고 하셨는데요 풀라우트캐시는 static페이지에서만 동작한다고 알고 있고, [id]컴포넌트에서 fetch함수에 캐싱 옵션으로 'force-cache'을 설정한 것도 아닌데 어떻게 풀라우트 캐시가 동작할 수 있나요??
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 종강으로 얻은 타입스크립트 할인 쿠폰인데 입력하니까 이렇게 뜨는데 그럼 못받는건가요 ㅜㅜ
미해결
클린업 JavaScript: 베이스 빌드업!
안녕하세요, 선배님. 저는 현재 서버 개발 경력 1년, 클라이언트 개발 경력 6개월 나머지 유지 보수 경력들을 포함해 약 3년 차에 접어든 주니어 개발자입니다. 지금은 주로 서버 개발자로 활동하고 있지만, 최근 진로와 관련된 고민이 많아 선배님께 조언을 구하고자 이렇게 글을 드립니다. 제 성향은 백엔드 개발이 잘 맞는다고 느끼고 있지만, 프론트엔드 개발에 대한 관심이 점점 커지고 있습니다. 특히 서비스중이신 강의들을 들으면서 프론트엔드를 바라보는 시각이 완전히 달라졌고, 점점 더 매력을 느끼고 있는 상황입니다. 이제는 어느 정도 마음의 결정을 내려야 할 시점이라는 생각이 들어, 전문적으로 어떤 커리어를 선택해야 할지 고민하고 있습니다. 프론트엔드와 백엔드 모두 매력적인 분야이지만, 새로운 도전을 선택하는 것이 맞는지, 아니면 제가 잘 맞고 경험이 더 많은 백엔드에 집중하는 것이 맞는지 아직 명확히 판단하기 어렵습니다. 선배님의 경력을 살펴보니 주로 자바스크립트를 중심으로 다양한 개발 작업을 해오신 것으로 알고 있습니다. 서버 개발도 분명 경험하셨을 것 같고, 저와 비슷한 고민을 해보셨을 것 같아 더욱 궁금해졌습니다. 혹시 선배님께서도 과거에 프론트엔드와 백엔드, 혹은 특정 기술 스택 사이에서 고민하셨던 적이 있으셨나요? 그리고 그러한 고민 끝에 무엇이 선배님을 자바스크립트라는 언어로 전문성을 갖추고 커리어를 쌓게 만든 결정적인 요인이었는지 궁금합니다. 선배님의 선택 과정이나 기준이 저에게도 많은 영감을 줄 수 있을 것 같습니다. 혹시 선배님께서 제가 이런 결정을 내리는 데 참고할 수 있는 조언이나 방향성을 제시해 주실 수 있을까요? 선배님의 경험과 지혜를 조금이라도 나눠주신다면 큰 힘이 될 것 같습니다. 긴 글 읽어주셔서 감사드리고, 좋은 하루 보내시길 바랍니다. 감사합니다!
