inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

build 에러 Error occurred prerendering page

미해결

Next + React Query로 SNS 서비스 만들기

Error occurred prerendering page "/newpost". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: document is not defined at 46593 (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/app/newpost/page.js:2:59980) at __webpack_require__ (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/.next/server/webpack-runtime.js:1:146) at F (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:6049) at /Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8464 at W._fromJSON (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:8902) at JSON.parse (<anonymous>) at L (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:5770) at t (/Users/gyeongdeokpark/Documents/01.GitHub/codeblog/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:36:12155) ✓ Generating static pages (5/5) > Export encountered errors on following paths: /newpost/page: /newpost npm run build시에 발생하는 에러입니다. 각종 사이트에서는 14버전에서 에러가 발생하고 있다고 하는 글 들만 있고 해결방법을 찾지 못했습니다.. gpt에서는 클라이언트 사이드에서 실행되어야 하는 코드가 서버 사이드에서 실행되서 그렇다고 하는데 잘해결이 안되고 있습니다. npm run dev시에는 에러없이 잘 실행됩니다. "use client"; import React, { ChangeEventHandler, useState } from "react"; import LexicalEditor from "@/app/newpost/LexicalEditor"; function Page({ props }: any) { const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const onChangeTitle: ChangeEventHandler<HTMLInputElement> = (e) => { setTitle(e.target.value); }; const onSubmit = (e: any) => { e.preventDefault(); console.log("제목 : ", title); console.log("내용 : ", content); }; return ( <form className="postForm" onSubmit={onSubmit}> <div className="postForm__titleInputSection"> <input className="postForm__titleInput" type="text" name="title" value={title} onChange={onChangeTitle} placeholder={"제목을 입력하세요."} /> </div> <div className="postForm__editorWrapper"> <LexicalEditor /> </div> <button>작성하기</button> </form> ); } export default Page; 깃허브 링크 입니다. https://github.com/littleduck1219/codeblog/blob/main/src/app/newpost/page.tsx

  • react
  • next.js
  • react-query
  • next-auth
  • msw
Gyeongdeok PARK 댓글 2 좋아요 0 조회수 2047

nginx 후 Front(502 Bad Gateway), back(welcome to nginx) 라고만 나오는 문제

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 선생님 front, back nginx 한 뒤로 둘다 https라고 바뀌고 인증서도 있긴한데, Front(502 Bad Gateway)라고 나오고 back(welcome to nginx) 라고만 나오는 상태입니다. (설치는 Nginx Ubuntu20보고 했습니다 https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard ) 문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다. 0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process. 질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소( MemoryStore )를 사용할 때 MemoryStore 가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,, 문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다. ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log 2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored 2024/01/24 12:19:54 [notice] 420260#420260: signal process started 질문2)찾아보니 Nginx 설정 파일 내에 서 api.luckyhaejin.com 이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다. 질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,? 현재 설정된 내용) front=> /etc/nginx/nginx.conf => server관련 (글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,) front/pacakage.json에서 start부분에 3060 잘 되어있음 front => /etc/nginx/nginx.conf front/config/config.js에서 backUrl설정 잘 되어있음 back => /etc/nginx/nginx.conf back => app.js(사진이 보기 편하실거같아서 코드랑 둘다올려욧) const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'https://luckyhaejin.com', credentials: true })); } else { app.use(morgan('dev')); } app.use('/', express.static(path.join(__dirname, 'uploads'))); app.use(express.json()); app.use(express.urlencoded({extended:true})); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, //자바스크립트로 접근하지못하게 secure: true, //일단 false로 하고 https적용할 땐 ture domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(3065, () => { console.log('서버 실행 중'); }); back => /etc/nginx/nginx.conf 사용중인 Os) macOS

  • react
  • redux
  • node.js
  • express
  • next.js
댓글 2 좋아요 0 조회수 1120

내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다

미해결

처음 만난 리액트(React)

기존 생성했던 npx create-react-app my-app 명령어로 생성했던 my-app 실제 경로로 들어가서 폴더 삭제하고 npm uninstall -g create-react-app npm install -g create-react-app npx create-react-app my-app 수행 시 C:\Program Files\nodejs>npx create-react-app my-app Need to install the following packages: create-react-app@5.0.1 Ok to proceed? (y) y npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. node:fs:1380 const result = binding.mkdir( ^ Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\my-app' at Object.mkdirSync (node:fs:1380:26) at module.exports.makeDirSync (C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\fs-extra\lib\mkdirs\make-dir.js:23:13) at createApp (C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:257:6) at C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:223:9 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errno: -4048, code: 'EPERM', syscall: 'mkdir', path: 'C:\\Program Files\\nodejs\\my-app' } Node.js v20.11.0 에러가 발생합니다. 어떻게 조치해야할까요 ??

  • HTML/CSS
  • javascript
  • react
댓글 2 좋아요 1 조회수 1702

(실습) ORM 적용 - HTTP Response 처리

미해결

실전! FastAPI 입문

from typing import List from fastapi import FastAPI, Body, HTTPException, Depends from pydantic import BaseModel from sqlalchemy.orm import Session from database.orm import ToDo from database.connection import get_db from database.repository import get_todos from schema.response import ListToDoResponse, ToDoSchema app = FastAPI() @app.get("/") def heath_check_handler(): return {"ping": "pong"} todo_data = { 1: { "id": 1, "contents": "실전! FastAPI 섹션 0 수강", "is_done": True, }, 2: { "id": 2, "contents": "실전! FastAPI 섹션 1 수강", "is_done": False, }, 3: { "id": 3, "contents": "실전! FastAPI 섹션 2 수강", "is_done": False, }, } @app.get("/todos", status_code=200) def get_todos_handler( order: str | None = None, session: Session = Depends(get_db), ) -> ListToDoResponse: todos: List[ToDo] = get_todos(session=session) if order and order == "DESC": return ListToDoResponse( todos=[ToDoSchema.from_orm(todo) for todo in todos[::-1]] ) return ListToDoResponse( todos=[ToDoSchema.from_orm(todo) for todo in todos] ) @app.get("/todos/{todo_id}", status_code=200) def get_todo_handler(todo_id: int): todo = todo_data.get(todo_id) if todo: return todo raise HTTPException(status_code=404, detail="ToDo Not Found") class CreateToDoRequest(BaseModel): id: int contents: str is_done: bool @app.post("/todos", status_code=201) def create_todo_handler(request: CreateToDoRequest): todo_data[request.id] = request.dict() return todo_data[request.id] @app.patch("/todos/{todo_id}", status_code=200) def update_todo_handler( todo_id: int, is_done: bool = Body(..., embed=True) ): todo = todo_data.get(todo_id) if todo: todo["is_done"] = is_done return todo raise HTTPException(status_code=404, detail="ToDo Not Found") @app.delete("/todos/{todo_id}") def delete_todo_handler(todo_id: int): todo = todo_data.pop(todo_id, None) if todo: return raise HTTPException(status_code=404, detail="ToDo Not Found") from typing import List from pydantic import BaseModel class ToDoSchema(BaseModel): id: int contents: str is_done: bool class Config: orm_mode = True class ListToDoResponse(BaseModel): todos: List[ToDoSchema] from typing import List from sqlalchemy import select from sqlalchemy.orm import Session from database.orm import ToDo def get_todos(session: Session) -> List[ToDo]: return list(session.scalars(select(ToDo))) from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker DATABASE_URL = "mysql+pymysql://root:todos@127.0.0.1:3306/todos" engine = create_engine(DATABASE_URL, echo=True) SessionFactory = sessionmaker(autocommit=False, autoflush=False, bind=engine) def get_db(): session = SessionFactory() try: yield session finally: session.close() from sqlalchemy import Boolean, Column, Integer, String from sqlalchemy.orm import declarative_base Base = declarative_base() class ToDo(Base): __tablename__ = 'todo' id = Column(Integer, primary_key=True, index=True) contents = Column(String(256), nullable=False) is_done = Column(Boolean, nullable=False) def __repr__(self): return f"ToDo(id={self.id}, contents={self.contents}, is_done={self.is_done})" 에러가 납니다. 파이썬 콘솔 <input>:1: PydanticDeprecatedSince20: The from_orm method is deprecated; from schema.response import ToDoSchema from datagbase.orm import ToDo Traceback (most recent call last): File "C:\Program Files\JetBrains\PyCharm 2023.3.2\plugins\python\helpers\pydev\pydevconsole.py", line 364, in runcode coro = func() ^^^^^^ File "<input>", line 1, in <module> File "C:\Program Files\JetBrains\PyCharm 2023.3.2\plugins\python\helpers\pydev\_pydev_bundle\pydev_import_hook.py", line 21, in do_import module = self._system_import(name, args, *kwargs) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ModuleNotFoundError: No module named 'datagbase' from database.orm import ToDo todo = ToDo(id=100, contents="test", is_done=True) ToDoSchema.from_orm(todo) <input>:1: PydanticDeprecatedSince20: The from_orm method is deprecated; set model_config['from_attributes']=True and use model_validate instead. Deprecated in Pydantic V2.0 to be removed in V3.0. See Pydantic V2 Migration Guide at https://errors.pydantic.dev/2.5/migration/ Traceback (most recent call last): File "C:\Program Files\JetBrains\PyCharm 2023.3.2\plugins\python\helpers\pydev\pydevconsole.py", line 364, in runcode coro = func() ^^^^^^ File "<input>", line 1, in <module> File "C:\Users\manag\pyProject\todos\Lib\site-packages\typing_extensions.py", line 2499, in wrapper return arg(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\pydantic\main.py", line 1126, in from_orm raise PydanticUserError( pydantic.errors.PydanticUserError: You must set the config attribute from_attributes=True to use from_orm http://localhost:8000/docs#/default/get_todos_handler_todos_get 접속시 터미널 INFO: 127.0.0.1:56312 - "GET /docs HTTP/1.1" 200 OK INFO: 127.0.0.1:56312 - "GET /openapi.json HTTP/1.1" 200 OK 2024-01-23 16:06:15,108 INFO sqlalchemy.engine.Engine BEGIN (implicit) 2024-01-23 16:06:15,109 INFO sqlalchemy.engine.Engine SELECT todo.id, todo.contents, todo.is_done FROM todo 2024-01-23 16:06:15,109 INFO sqlalchemy.engine.Engine [cached since 826.5s ago] {} 2024-01-23 16:06:15,113 INFO sqlalchemy.engine.Engine ROLLBACK INFO: 127.0.0.1:56312 - "GET /todos HTTP/1.1" 500 Internal Server Error ERROR: Exception in ASGI application Traceback (most recent call last): File "C:\Users\manag\pyProject\todos\Lib\site-packages\uvicorn\protocols\http\h11_impl.py", line 404, in run_asgi result = await app( # type: ignore[func-returns-value] ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\uvicorn\middleware\proxy_headers.py", line 84, in call return await self.app(scope, receive, send) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\fastapi\applications.py", line 1054, in call await super().__call__(scope, receive, send) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\applications.py", line 123, in call await self.middleware_stack(scope, receive, send) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\middleware\errors.py", line 186, in call raise exc File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\middleware\errors.py", line 164, in call await self.app(scope, receive, _send) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\middleware\exceptions.py", line 62, in call await wrap_app_handling_exceptions(self.app, conn)(scope, receive, send) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\_exception_handler.py", line 64, in wrapped_app raise exc File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\_exception_handler.py", line 53, in wrapped_app await app(scope, receive, sender) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\routing.py", line 762, in call await self.middleware_stack(scope, receive, send) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\routing.py", line 782, in app await route.handle(scope, receive, send) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\routing.py", line 297, in handle await self.app(scope, receive, send) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\routing.py", line 77, in app await wrap_app_handling_exceptions(app, request)(scope, receive, send) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\_exception_handler.py", line 64, in wrapped_app raise exc File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\_exception_handler.py", line 53, in wrapped_app await app(scope, receive, sender) File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\routing.py", line 72, in app response = await func(request) ^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\fastapi\routing.py", line 299, in app raise e File "C:\Users\manag\pyProject\todos\Lib\site-packages\fastapi\routing.py", line 294, in app raw_response = await run_endpoint_function( ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\fastapi\routing.py", line 193, in run_endpoint_function return await run_in_threadpool(dependant.call, **values) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\starlette\concurrency.py", line 40, in run_in_threadpool return await anyio.to_thread.run_sync(func, *args) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\anyio\to_thread.py", line 56, in run_sync return await get_async_backend().run_sync_in_worker_thread( ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\anyio\_backends\_asyncio.py", line 2134, in run_sync_in_worker_thread return await future ^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\anyio\_backends\_asyncio.py", line 851, in run result = context.run(func, *args) ^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\src\main.py", line 48, in get_todos_handler todos=[ToDoSchema.from_orm(todo) for todo in todos] ^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\typing_extensions.py", line 2499, in wrapper return arg(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^ File "C:\Users\manag\pyProject\todos\Lib\site-packages\pydantic\main.py", line 1126, in from_orm raise PydanticUserError( pydantic.errors.PydanticUserError: You must set the config attribute from_attributes=True to use from_orm

  • python
  • 리팩토링
  • orm
  • FastAPI
  • pytest
네오스카이 댓글 2 좋아요 0 조회수 1267

강의자료(ppt) 요청

해결됨

팀 개발을 위한 Git, GitHub 입문

좋은 강의 감사합니다. 강의자료 부탁드립니다. skyglory@gmail.com

  • git
  • github
  • 버전관리시스템
skyglory 댓글 2 좋아요 0 조회수 212

Section 2 / 4강 / 3:23초 질문

해결됨

빠르게 git - 핵심만 골라 배우는 Git/Github

master에서 test2.txt가 있었고 my_branch로 새로운 브랜치를 만든 경우 master에 있는 text2.txt가 my_branch로도 자동추가되나요? 섹션2의 4강 3:23 초에서 my_branch 2개의 커밋과 2개의 txt파일이 들어있는 걸 보고 질문드립니다 !

  • git
  • github
  • 버전관리시스템
OojOo 댓글 1 좋아요 0 조회수 184

localhost로 브라우저에 보여주는 방법은 뭔가요?

해결됨

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

로컬에서 테스트로 브라우저 실행하는 방법이 궁금합니다~!

  • 블로그
  • github
sugmug 댓글 1 좋아요 0 조회수 232

Deploy를 계속 실패합니다.

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

github에 코드를 푸시하고 action을 확인했을 때 나머지는 정상적으로 수행되는데 Deploy to EB에서 에러가 발생합니다.

  • aws
  • docker
  • github
김인범 댓글 4 좋아요 3 조회수 1417

ReviewDto 객체 사용 이유

해결됨

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

리뷰 목록 페이지를 조회할 때 마지막에 ReviewDto 객체로 변환해서 반환을 하는데 이렇게 하는 이유가 무엇인지 궁금합니다

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
haha 댓글 2 좋아요 0 조회수 335

강의자료 부탁드립니다!

해결됨

팀 개발을 위한 Git, GitHub 입문

강의자료 부탁드립니다! janyjeon@naver.com

  • git
  • github
  • 버전관리시스템
janyjeon 댓글 2 좋아요 0 조회수 223

로그인 모달 리다이렉트를 다른 방식으로 구현했는데 문제 없을까요?

해결됨

Next + React Query로 SNS 서비스 만들기

강의에서 알려주신 router.replace() 를 사용하지 않고 // @/app/(beforeLogin)/@modal/(.)login/page.tsx import { redirect } from "next/navigation"; export default function Login() { redirect("/i/flow/login"); } 기존의 이 코드를 인터셉트 라우팅으로 줘서 홈페이지 -> 인터셉트 라우팅된 /login -> 인터셉트 라우팅된 /i/flow/login 으로 이동하도록 폴더를 구성해서 구현해 봤습니다. 이 방식으로 구현해도 문제 없을까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
둘기 댓글 1 좋아요 2 조회수 607

TravisCI에서 계속 에러가 납니다....

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

일단 ElasticbeanStalk에서는 상태가 Travis연결 시도 전에는 Pending, 연결 시도 후에는 No data가 뜹니다. 제 .travis.yml 파일 코드는 다음과 같습니다 sudo: required language: generic services: - docker before_install: - echo "start creating an image with dockerfile" - docker build -t minseokkim6823/docker-react-app -f Dockerfile.dev ./ script: - docker run -e CI=true minseokkim6823/docker-react-app npm run test -- --coverage deploy: provider: elasticbeanstalk edge: true region: "ap-northeast-2" app: "docker-react-app" env: "Docker-react-app-env-1" bucket_name: "elasticbeanstalk-ap-northeast-2-845428038664" bucket_path: "docker-react-app" on: branch: master access_key_id: $AWS_ACCESS_KEY secret_access_key: $AWS_SECRET_ACCESS_KEY 이 결과 travis ci 에서 이런 결과가 계속나옵니다..... 무엇이 문제 일까요?

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
김민석 댓글 1 좋아요 0 조회수 375

onSnapshot 함수 unsubscribe 에 대해서 질문이 있습니다

미해결

제가 궁금한건 다른 페이지에 있을 때에도 스냅샷 함수를 가동시켜 비용이 계속해서 발생하는 것을 막기위해 온스냅샷 함수를 unsubscribe, 구독취소하는 코드인데요 어째서 제가 읽기에는 unsubscribe = ~ 온스냅샷함수 ~ . . . return () => unsubscribe함수 실행 useEffect cleanup기능으로 언마운트시 온스냅샷함수를 정지하려는데 다시 온스냅샷함수를 실행? 제가 어떻게 잘못 이해하는건지 모르겠어요 .. ㅠㅠ export default function Timeline() { const [tweets, setTweet] = useState<ITweet[]>([]); let unsubscribe: Unsubscribe | null = null; const fetchTweets = async () => { const tweetsQuery = query( collection(db, "tweets"), orderBy("createdAt", "desc"), limit(25) ); unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => { const tweets = snapshot.docs.map((doc) => { const { tweet, createdAt, userId, username, photo } = doc.data(); return { tweet, createdAt, userId, username, photo, id: doc.id, }; }); setTweet(tweets); }); }; useEffect(() => { fetchTweets(); return () => { unsubscribe && unsubscribe(); }; }, []); }

  • firebase
  • typescript
  • react
  • onsnapshot
  • unsubscribe
  • useEffect
  • cleanup
김수환 댓글 1 좋아요 0 조회수 392

에뮬레이터에 화면 흰색만나오는 문제

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

import { API_URL } from "./config/constants.js"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import Carousel from "react-native-reanimated-carousel"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then((result) => { const products = result.data.products; setProducts(products); }) .catch((error) => { console.log("error :", error); }); axios .get(`${API_URL}/banners`) .then((result) => { const banners = result.data.banners; setBanners(banners); }) .catch((error) => { console.log("error :", error); }); }, []); return ( <GestureHandlerRootView> <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem={(obj) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}` }} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.headline}>판매되는 상품들!</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.soldout === 1 && <View style={styles.productBlur} />} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, }); 어떤 오류메세지도 뜨지않고, 에뮬레이터에 화면이 출력되지않는 문제가 발생합니다. Carousel을 적용하기전에는 화면 잘 출력되었는데, Carousel을 적용하니 화면이 출력되지않네요.. Error: PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details. 이러한 오류가 발생해서 GestureHandlerRootView 태그로 최상단에 묶어주니 저 오류는 사라졌는데, 애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다. 서버는 잘 연결되어있는걸 확인햇습니다.. 뭐가문제일까요

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
sehun910124 댓글 2 좋아요 1 조회수 344

buildkit 관련 문의

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

Docker Engine v24.0.7 을 사용중입니다. 아래의 다른 분들처럼 DockerEngine 에서 설정으로 넣어도 적용 및 restart 해도 강의와 다른결과가 나옵니다.

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
KS Han 댓글 2 좋아요 2 조회수 476

피미 인디언 당뇨병 예측 관련 질문

해결됨

[개정판] 파이썬 머신러닝 완벽 가이드

교수님 안녕하십니까 교수님의 수업을 정말 즐기면서 듣고있는 AI빅데이터 전공 대학생입니다. 교수님의 강의 피마 인디언 당뇨병 예측 편을 보고 여태 배운 것을 백분 활용하여 제 방식대로 따로 모델을 구현을 해보았는데요. 먼저 임신횟수와 Outcome을 제외한 나머지 column들에 있는 0 값들은 모두 결측치로 판단하고 평균 값으로 대체하였습니다. RandomForestClassifier 알고리즘을 사용하고 GridSearchCV 함수를 통해 best estimator를 추출였습니다. 정밀도와 재현율이 동시에 높으면 좋지만 재현율이 증가하면 정밀도가 하락하는 현상(trade-off) 때문에 둘 중 하나를 선택해야 했고 이 피마 인디언 당뇨병 데이터 셋 같은 경우 병의 발견 목적으로 모델을 제작한다고 했을 때 실제로 당뇨병인데 모델이 당뇨병이 아니라고 예측하는 것이 치명적이라고 생각하여 정밀도 보다는 재현율을 중점적으로 보았습니다. 그리하여 precision_recall_curve 함수를 통해 최적의 재현율과 F1_score얻은 threshold 값을 추출하였습니다. 제가 얻은 값은 오차 행렬 [[72 28] [ 4 50]] 정확도: 79.22% , 정밀도: 64.10% , 재현율 92.59%, F1_Score: 75.76% 임계값: 0.32212471005503873 입니다. 오차 행렬을 보았을때도 한쪽에 치우쳐있는 불균형도 없다고 판단하였고 정밀도와 재현율 f1_score도 괜찮게 나왔다고 판단했습니다. 임계값을 0.32212471005503873로 주었을 때 roc_auc_score는 0.82296이라는 1에 꽤나 근접한 수치를 얻었습니다. 질문1: 이런식으로 모델을 찾아가는 방식이 옳은 방식인지 궁금합니다. 질문2: 제가 선택한 모델을 사용한다고 한다면 매번 RandomClassifier로 fit한 model을 Binarizer을 통해서 threshold 값을 매번 지정해주어야 하는건가요? 애초에 처음 모델을 fit할 때 임계값을 제가 부여는 못하는 것일가요?

  • python
  • 머신러닝
  • 통계
신봉균 댓글 1 좋아요 1 조회수 365

docker_compose시

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

Learn React를 바꿔도 바로바로 적용이 안됩니다. docker-compose.yml은 아래와 같이 작성했습니다 version: "3" services: react: build: context: . dockerfile: Dockerfile.dev ports: - "3000:3000" volumes: - /usr/src/app/node_modules - ./:/usr/src/app stdin_open: true

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
김민석 댓글 1 좋아요 0 조회수 335

선생님 혹시 Next.js 13에서의 React-query는 어떻게 생각하실까요?

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

안녕하세요 선생님! 좋은 강의 정말 감사하게 듣고 있습니다. 선생님의 강의를 듣다보니, Next.js 13의 Data Fetching 방법이 React Query과 유사함을 느꼈습니다. (주니어라 부족함이 있어 실제론 유사하지 않을 수도 있지만..!) Next 13의 데이터 패칭 방법이 react 에서 React Query를 사용하여 서버 API의 데이터를 일정 시간동안 fresh 상태로 갖고 있는것 stale한지 chach로 체크하는 것 모두 흡사 하다고 느꼈습니다. React Query의 가장 큰 강점은 클라이언트-서버간의 데이터 동기화가 가장 큰 장점이라고 생각하는데 만약 Next 13의 데이터 패칭 방법을 사용한다면 번거로운 React Query의 보일러코드들을 사용하지 않아도 React Query의 장점을 그대로 살려 쉽게 사용할 수 있을 것 같아보입니다! 따라서, Next 13에선 React Query가 무한스크롤 외에 사용할 일이 거의 없을 것만 같아보이는데...! 어떻게 생각하실지 의견이 궁금합니다...! next 13과 react query 조합은 앞으로 거의 사용하지 않게 되는 걸까요? 선생님의 고견을 나눠주시면 감사하겠습니다~! 바쁘실텐데 번거롭게 해드려서 죄송합니다! 감사합니다!

  • react
  • next.js
  • next.js13
  • react-query
밀크티 댓글 3 좋아요 2 조회수 1978

Dockerfile Dockerfile.dev

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

Dockerfile.dev에서는 CMD 사용하고 Dockerfile에서는 RUN을 사용하는데 차이점이 뭘까요? Dockerfile.dev에서도 RUN 사용하면 안되나요?

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
haruharu 댓글 1 좋아요 0 조회수 497

502 Bad Gateway

해결됨

작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지

2024/01/15 15:08:24 [error] 22#22: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 192.168.64.1, server: , request: "GET / HTTP/1.1", upstream: "http://172.18.0.2:8000/", host: "192.168.64.7" 위와 같은 오류가 발생하는데 문제가 무엇인지 모르겠습니다.

  • python
  • django
  • docker
댓글 0 좋아요 0 조회수 489

인기 태그

인프런 TOP Writers

주간 인기글