windows 에서 vanila-extract 의 문제점은 구체적으로 어떤 것일까요? https://github.com/vanilla-extract-css/vanilla-extract/issues/1086해당 이슈가 맞는지 궁금합니다!

SSR 방식에 서버 컴포넌트와 클라이언트 컴포넌트를 둘 다 적절히 사용하는 것인가요??서버 컴포넌트는 데이터 페칭, 보안, 캐싱, JS 번들크기 감소와 같은 장점이 있고 event와 hook을 사용하지 못한다는 특징도 이야기해주셨는데, 그렇다면 데이터를 받아서(페칭해서) 클라이언트 컴포넌트에 데이터를 뿌려주는 느낌으로 조합해서 사용하는 건가요??서버컴포넌트는 event를 사용하지 않으므로, TTI를 개선하기 위해 나온 개념은 아닌거죠???

33-05 강의에서 test에서 자꾸 이 오류가 뜹니다apis.jsimport { graphql } from "msw"; const gql = graphql.link("http://mock.com/graphql") export const apis = [ gql.mutation("createBoard", (req, res, ctx) => { const { writer, title, contents } = req.variables.createBoardInput return res( ctx.data({ createBoard: { _id: "qqq", writer, title, contents, __typepname: "Board", }, }) ); }), // gql.query("fetchBoards", () => {}) ]; jest.setup.jsimport { server } from "./src/commons/mocks/index" beforeAll(() => server.listen()); afterAll(() => server.close()); index.test.tsx import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import StaticRoutingMovedPage from "../../pages/section33/33-05-jest-unit-test-mocking"; import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, } from "@apollo/client"; import fetch from "cross-fetch"; import mockRouter from "next-router-mock"; jest.mock("next/router", () => require("next-router-mock")); it("게시글이 잘 등록되는지 테스트 하자!", async () => { const client = new ApolloClient({ link: new HttpLink({ uri: "http://mock.com/graphql", fetch, }), cache: new InMemoryCache(), }); render( <ApolloProvider client={client}> <StaticRoutingMovedPage /> </ApolloProvider> ); fireEvent.change(screen.getByRole("input-writer"), { target: { value: "맹구" }, }); fireEvent.change(screen.getByRole("input-title"), { target: { value: "안녕하세요" }, }); fireEvent.change(screen.getByRole("input-contents"), { target: { value: "방가방가" }, }); fireEvent.click(screen.getByRole("submit-button")); await waitFor(() => { expect(mockRouter.asPath).toEqual("/boards/qqq"); }); }); 도와주십쇼 ㅠㅠ

안녕하세요. test를 하던 중 오류가 발생하여 문의드립니다.지금 현재 코드를import { setupServer } from "msw/node"; import { apis } from "./apis"; export const server = setupServer(...apis); 위에처럼 입력해 놓은 상태입니다. 하지만 테스트 실행 시아래와 같이 발생합니다. Cannot find module 'msw/node' from 'src/commons/mocks/index.js' Require stack: src/commons/mocks/index.js jest.setup.js > 1 | import { setupServer } from "msw/node"; | ^ 2 | import { apis } from "./apis";추가적으로 지금 jest관련 페이지에서Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src\commons\mocks\index.js` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to include this file - Create a new TSConfig that includes this file and include it in your parserOptions.project See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--위와 같은 오류가 발생합니다. 해결 부탁드립니다! 

Next.js로 Google Cloud Platform에 App Engine 서비스 배포를 진행하고 있습니다.문제는 production ( 실 서비스 )와 development ( 개발용 )으로 나누어서.env.development, .env.production의 두개의 환경변수를 가지고있습니다.배포 시 실서비스 에서는 .env.production을 사용하도록개발용 에서는 .env.development를 사용하도록 설정하려는데 이것저것 만져보아도 production만 사용하는 문제가 발생해버리네요. 현재 프로젝트구조와 설정코드는 이렇습니다.project ├── local └── Dockerfile └── docker-compose.yml ├── resource └── .next └── ... (Next.js 빌드 파일) └── node_modules └── package.json └── dev_app.yaml └── prd_app.yaml └── .env.development └── .env.production └── next.config.js └── ... (기타 Next.js 프로젝트 파일) 여기서 package.json의 script설정은 다음과 같습니다.{ dev: "next dev", start: "next start", lint: "next lint", deploy: "npm run build && gcloud app deploy --project='production' -q --appyaml=prd_app.yaml", deploy:dev: "npm run build:dev && gcloud app deploy --project='development' -q --appyaml=dev_app.yaml", build: "dotenv -e .env.production next build", build:dev: "dotenv -e .env.development next build" }  next.config.js는 특별히 건드리지 않았습니다.dev_app.yaml, prd_app.yaml파일은 서비스명만 각각 설정해 주었습니다.runtime: nodejs20 # or another supported version service: development 질문 1.현재 app engine 업로드된 용량, 로직을 보니 빌드파일이 아닌 프로젝트 그대로 들어가는 것 같습니다.빌드는 환경변수파일도 정상적으로 분기되는데 앱엔진에서 해당문제가 발생하는 것으로보아혹시 Next.js에서 빌드된 파일로 app engine에 배포할 수 있는지 궁금합니다.질문 2.빌드파일만 올릴수 없다 라고 하더라도 프로젝트 그대로 올리면서 환경변수를 분기할 방법이 있는지 궁금합니다.정말 문서건 블로그건 구글서칭, 깃허브검색, GPT 모두 끈질기게 시도해봤지만능력부족 탓인지 성공하지 못했습니다..능력자분들께서 도움주시면 잊지않겠습니다!!

에러 종류: 위와 같은 환경에서 error: password authentication failed for user "postgres" 로 추정되는 에러 발생아마 서버 연결시 인증 문제로 보입니다.작동 절차: docker-compose up 입력,server 파일로 이동, npm run dev 실행. 에러 발생+1)POSTGRES_HOST_AUTH_METHOD: trust로 설정하고 서버 새로 만들어도 동일한 에러가 발생하여 무슨 문제일지 잘 모르겠네요.. 도움 주시면 감사하겠습니다.+2) 아래에 터미널의 전체 에러 코드 남깁니다.C:\Users\tukim\Desktop\reddit-clone-app\server>npm run dev > server@1.0.0 dev> nodemon --exec ts-node ./src/server.ts[nodemon] 3.0.1[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: ts,json[nodemon] starting ts-node ./src/server.tsserver running at https://localhost:4000error: ����� "postgres"�� password ������ �����߽��ϴ� at Parser.parseErrorMessage (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:369:69) at Parser.handlePacket (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:188:21) at Parser.parse (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\parser.ts:103:30) at Socket.<anonymous> (C:\Users\tukim\Desktop\reddit-clone-app\server\node_modules\pg-protocol\src\index.ts:7:48) at Socket.emit (node:events:513:28) at Socket.emit (node:domain:489:12) at addChunk (node:internal/streams/readable:324:12) at readableAddChunk (node:internal/streams/readable:297:9) at Socket.Readable.push (node:internal/streams/readable:234:10) at TCP.onStreamRead (node:internal/stream_base_commons:190:23) { length: 107, severity: 'ġ��������', code: '28P01', detail: undefined, hint: undefined, position: undefined, internalPosition: undefined, internalQuery: undefined, where: undefined, schema: undefined, table: undefined, column: undefined, dataType: undefined, constraint: undefined, file: 'auth.c', line: '329', routine: 'auth_failed'}

 싸이월드 실습 4탄 하는 중인데LOTTO 부분에 "특히 버튼과 숫자박스 부분"이 왜 세로로 다닥다닥 붙어있을까요..ㅠgame__container 부분에 flex-direction: column; align-items: center; justify-content: space-between; padding: 20px;가 들어있고lotto__text부분에도display: flex; flex-direction: column; align-items: center; justify-content: space-between;를 넣어봤으나 아무 변화가 없었습니다 ㅠgame.html:<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span> </div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div class="word__result" id="result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle"> 버튼을 누르세요. </div> <div class="lotto__text"> <div class="number__box"> <div class="number1">3</div> <div class="number1">5</div> <div class="number1">10</div> <div class="number1">24</div> <div class="number1">30</div> <div class="number1">34</div> </div> <button class="lotto_button">Button</button> </div> </div> </div> </body> </html>game.css:* { box-sizing: border-box; margin: 0px } html, body{ width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; /* 박스가 wrapper안에 game__container 두개 총 세개*/ align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title{ color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title { font-size: 15px; font-weight: 900; } .game__subtitle { font-size: 11px; } .word__result { font-size: 11px; font-weight: 700; } .word__text { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox { width: 130px; height: 24px; border-radius: 5px; } .search { font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .number__box{ width: 130px; height: 24px; border-radius: 5px; background-color: #FFE400 ; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .lotto__text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .number1{ font-size: 10px; font-weight: 700px; margin: 5px; } .lotto_button { font-size: 11px; font-weight: 700; width: 62px; height: 24px; }

소스코드에서 _buildmanifest.js에 들어가보면 모든 경로가 표시되던데이러면 관리자 페이지의 모든 경로도 볼 수 있어서 어느정도 앱 규모(?)를 알 수 있다는 건데이거 보안적으로 괜찮은걸까요?관리자 페이지는 따로 만들어야 하는 건지 아니면 slug 경로를 이용해서 안 보이게 해야하는 건지 갑자기 머리가 복잡해지네요😂다른 분들은 어떻게 하시는지 궁금합니다.

도커 다운받는 링크 복사 할때 공백 생겨서 필요 하신분 쓰시라고 링크 올려 두겠습니다.https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04

제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?

안녕하세요 제로초님 강의를 다 듣고 개인 프로젝트를 하고 있는 사람입니다. 궁금한게 하나 있는데 SSR 페이지로 간 후에 뒤로가기 하면 스크롤 위치가 초기화되던데 이거 막는방법이 있나요? SSR 페이지가 아니면 스크롤이 그 위치 그대로 있더라고요 항상 SSR 페이지 갔다가 뒤로가기 하면 스크롤이 최상단으로 초기화되서 그런데 혹시 막을 수 있는 방법 있을까요?ㅜ

개인 토이 프로젝트를 하나 하고 있는데요,  혹시 next.js에서 도메인 라우팅 하는 방법이 있나요? 문제가 뭐냐면 제가 만든 토이 프로젝트가 있는데  http://www.hubfoodlink.com 으로 접속해서 해당 정보를 클릭하면 리엑트 컴포넌트 모달창이 띄워지는데,  http://hubfoodlink.com 으로 접속하면 접속은 되는데 정보 클릭 시 리엑트 컴포넌트 모달창이 안뜨고 An unexpected error has occurred. 라고 떠서 문제가 발생되네요 ㅠ  아니면 http://hubfoodlink.com 접속시 www을 붙여서 http://www.hubfoodlink.com접속이 되게 하는 방법이 있을까요? 물론 강의와 관련없는 질문이긴한데 몇일간 찾아보고 고민해봐도 해결되지 않아서 염치불구하고  질문을 올려봅니다.   죄송합니다 ㅠ

안녕하세요. 노드버드 강의 보면서 제가 맡은 프로그램을 짜보고 있습니다. 다름이 아니라, mysql 디비에서 라우팅해서 관련 데이터가 포스트맨으로 넘어오는거까지 확인이 되었는데요, 프론트엔드 부분에서 statusView 페이지에서 관련 데이터 받아와서 뿌리는 테스트 코드를 작성해봤는데, 아무런 반응이 없습니다. 테스트 코드는 다음과 같습니다. 크롬창에서 localhost:3000/statusView 들어가보면 Hello Town1 List만 나오고 console.log(test) 이부분은 undefined로 나옵니다. getInitialProps가 동작을 했다면 console.log('aaaaaa')가 나왔어야 하는데 이건 출력이 안되더군요. 참고로, 백앤드 서버는 실행한 상태에서, 새로 폴더를 만들어서 react, react-dom, next  만 설치한 상태에서 pages 폴더를 만들고 statusView 페이지에 위에 코드를 넣어보니 이때는 또 데이터가 잘 넘어 옵니다. 어디서 부터 디버깅을 해야할지 막막해서 두서없지만 질문 올립니다.