묻고 답해요

2-3 진행 중 에러 발생

미해결

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

2-3 강의 중 12분 쯤에 Send를 누르면 200 OK가 떠야한다고 하셨는데 저는 500 에러가 발생합니다! package com.jyujyu.review.api; import com.jyujyu.review.service.TestService; import lombok.AllArgsConstructor; import lombok.Getter; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; @AllArgsConstructor @RestController public class TestEntityApi { private final TestService testService; @PostMapping("/test/entity/create") public void createTestEntity( @RequestBody CreateTestEntityRequest request ) { testService.create(request.getName(), request.getAge()); } @AllArgsConstructor @Getter public static class CreateTestEntityRequest { private final String name; private final Integer age; } } package com.jyujyu.review.api; import com.jyujyu.review.service.TestService; import lombok.AllArgsConstructor; import lombok.Getter; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; @AllArgsConstructor @RestController public class TestEntityApi { private final TestService testService; @PostMapping("/test/entity/create") public void createTestEntity( @RequestBody CreateTestEntityRequest request ) { testService.create(request.getName(), request.getAge()); } @AllArgsConstructor @Getter public static class CreateTestEntityRequest { private final String name; private final Integer age; } } package com.jyujyu.review.repository; import com.jyujyu.review.model.TestEntity; import org.springframework.data.jpa.repository.JpaRepository; public interface TestRepository extends JpaRepository<TestEntity, Long> { // Long -> TestEntity에 @Id가 있는 필드의 자료형을 작성한다. } package com.jyujyu.review.model; import jakarta.persistence.*; import lombok.Getter; @Getter @Table(name = "test") @Entity public class TestEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; public TestEntity(String name, Integer age) { this.name = name; this.age = age; } public TestEntity() { } public void changeNameAndAge(String name, Integer age) { this.name = name; this.age = age; } } plugins { id 'java' id 'org.springframework.boot' version '3.2.2' id 'io.spring.dependency-management' version '1.1.4' } group = 'com.jyujyu' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } repositories { mavenCentral() } configurations { compileOnly { extendsFrom annotationProcessor } } dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' testImplementation 'org.springframework.boot:spring-boot-starter-test' compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' implementation 'org.springframework.boot:spring-boot-starter-data-jpa' runtimeOnly 'com.h2database:h2' } tasks.named('test') { useJUnitPlatform() } server.port=8081 spring.h2.console.enabled=true spring.h2.console.path=/h2-console spring.h2.console.settings.web-allow-others=true spring.datasource.driver-class-name=org.h2.Driver spring.datasource.url=jdbc:h2:mem:rss spring.datasource.username=sa spring.jpa.hibernate.ddl-auto=create spring.jpa.show-sql=true 알려주신대로 코드를 작성하고 포스트맨에서 Send를 눌러도 500 Internal Server:Error 라고 뜨네요 ㅠ 원인을 찾아봐도 안보여서 여쭙습니다..! 참고로 포트는 8081이 맞습니다 혹시 파일 필요하실까봐 링크 첨부했습니다 https://drive.google.com/file/d/1W65YQNY5rOGjWuqr-ntff7_QuTWz4eDw/view?usp=sharing

• spring
• git
• docker
• spring-boot
• jpa
• github

홈 화면 화살표 버튼 눌렀을때 1월에서 2월로 안 가고 3월로 갑니다 나머지 달은 잘 작동합니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 또 이렇게 질문을 해서 죄송합니다. 마지막 강의까지 다 듣고 배포까지 했는데 갑자기 홈 화면에 오른 화살표를 클릭을 하면 지금 1월 인데 누르면 3월로 이동 됩니다. 그런데 1월에서 2월 넘어갈때만 그래요 뒤로 가는건 잘 작동합니다. 홈 강의 다시 보고 틀린거 있나 확인했는데 못 찾아서 이렇게 연락드려요 https://github.com/jeain/Diary

• javascript
• react
• node.js

리액트 셀렉트 박스 질문드려요

미해결

import React, { useState } from 'react'; import { Button } from "../../ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogClose } from "../../ui/dialog"; import { Input } from "../../ui/input"; import SelectBox from "./SelectBox"; function UserRegistrationButton() { const [id, setId] = useState(''); const [name, setName] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [ip, setIp] = useState(''); const [selectedAuthority, setSelectedAuthority] = useState(""); const items = [ { value: '1', label: '일반' }, { value: '2', label: '마스터' }, ]; const handleDataChange = (newData) => { setSelectedAuthority(newData); }; const handleSubmit = () => { console.log({ id, name, password, confirmPassword, ip, selectedAuthority }); }; return ( <Dialog> <DialogTrigger asChild> <Button className="w-full">사용자 등록</Button> </DialogTrigger> <DialogContent className="w-full max-w-2xl"> <DialogHeader> <DialogTitle className="text-variant-h4-bold">사용자 등록</DialogTitle> </DialogHeader> <div className="grid gap-5 py-3"> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 아이디 </div> <Input id="userId" className="col-span-8" value={id} onChange={e => setId(e.target.value)} /> </div> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 이름 </div> <Input id="name" className="col-span-8" value={name} onChange={e => setName(e.target.value)} /> </div> </div> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="text-sm grid col-span-2 content-center"> 비밀번호 </div> <Input id="password" className="col-span-8" type="password" value={password} onChange={e => setPassword(e.target.value)} /> </div> <div className="grid grid-cols-10 w-full"> <div className="text-sm grid col-span-2 content-center"> 비밀번호 확인 </div> <Input id="confirmPassword" className="col-span-8" type="password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} /> </div> </div> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 권한 </div> <SelectBox className="col-span-8" items={items} onDataChange={handleDataChange} /> </div> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 접속 IP </div> <Input id="IP" className="col-span-8" value={ip} onChange={e => setIp(e.target.value)} /> </div> </div> </div> <DialogFooter> <div className='flex justify-center gap-5'> <DialogClose asChild> <Button onClick={handleSubmit} size="xxl">등록</Button> </DialogClose> <DialogClose asChild> <Button variant="secondary" size="xxl">취소</Button> </DialogClose> </div> </DialogFooter> </DialogContent> </Dialog> ); } export default UserRegistrationButton; import React, { useState, useEffect } from 'react'; import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, } from '../../ui/select'; interface SelectBoxProps { className?: string; items: { value: string; label: string }[]; onDataChange: any; } const SelectBox: React.FC<SelectBoxProps> = ({ className, items, onDataChange }) => { const [selectedValue, setSelectedValue] = useState(""); const sendDataToParent = (payload) => { onDataChange(payload); console.log(payload, selectedValue) }; return ( <Select> <SelectTrigger className={className}> <SelectValue placeholder="권한을 선택하세요." /> </SelectTrigger> <SelectContent> {items.map(item => ( <SelectItem key={item.value} value={item.value} onClick={() => sendDataToParent(item.label)}> {item.label} </SelectItem> ))} </SelectContent> </Select> ); }; export default SelectBox; 제 코드인데요 현재 shadcn/ui를 쓰면서 진행중인데요 셀렉트 박스가 하위컴포넌트이고 상위 컴포넌트로 셀렉트 박스가 선택한 값을 보내고 싶은데 할 수 있는 방법 다 해도 안되더라고요 현재 코드는 콜백함수를 이용하여 데이터를 호출하려고 했는데 실패했습니다. 이럴 때는 무조건 리덕스나 리코일 같은 전역으로 상태관리를 해서 값을 주는 방법 밖에는 없나요 ? 아니면 다른 방법이 있으면 알려주세요

• react

groupby 경고 질문

해결됨

5분빨리 퇴근하자! 파이썬 데이터 분석, 시각화, 웹 대시보드 제작하기

groupby를 사용하면 에러는 아니고 경고가 뜹니다. FutureWarning: The default of observed=False is deprecated and will be changed to True in a future version of pandas. Pass observed=False to retain current behavior or observed=True to adopt the future default and silence this warning. chatGPT: 이 경고는 Pandas의 value_counts() 메서드를 사용할 때 발생하는 것으로 보입니다. 이 경고는 현재 버전의 Pandas에서는 observed 매개변수의 기본값이 False 이지만, 향후 버전에서는 True 로 변경될 것이라는 것을 알려주는 것입니다. 즉, 향후에는 observed=False 를 명시적으로 지정하지 않으면 경고가 표시될 것입니다. 이러한 경고를 피하려면 value_counts() 를 호출할 때 observed=False 를 명시적으로 전달하면 됩니다. 예를 들어: import pandas as pd # 예제 데이터프레임 생성 df = pd.DataFrame({'Category': ['A', 'B', 'A', 'C', 'B', 'A']}) # value_counts() 호출 시 observed 매개변수 명시 counts = df['Category'].value_counts(observed=False) print(counts) 이렇게 하면 경고가 발생하지 않습니다. 하지만 향후 Pandas 버전에서는 이러한 변경이 기본 동작이 되므로 observed 매개변수를 사용하여 코드를 업데이트하는 것이 좋습니다. -> 근데 이게 무슨 말인지 모르겠습니다! 뭐... 대충 업데이트 할 건데, 오류가 생길 수 있으니 미리 대비를 해라~ 이런 거 같은데 정확히 무슨 뜻인지 모르겠습니다!

• python
• pandas
• seaborn
• plotly
• matplotlib
• data-visualization
• streamlit

Admin-Variable 에서 변수 마스킹

해결됨

Airflow 마스터 클래스

Admin-Variable 에서 변수 입력을 보고있는데요, 공식 홈페이지를 뒤져도 저 리스트가 보이지 않는데 혹시 사이트 url 을 알수 있을까요?

• python
• 데이터-엔지니어링
• airflow

SPA, MPA, 리액트 Hooks 등의 개념 어디서 참고하시나요?

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

강사님 SPA, MPA, SSR , CSR과 리액트 Hooks 등의 개념에 대해 찾다보면 참고 문서와 링크 없고, 내용에 틀린부분도 있어보이는 블로그가 종종 있더라구요. 이러한 경우 강사님은 어디서 주로 찾으시는지 궁금합니다.

• javascript
• react
• node.js

print()

해결됨

5분빨리 퇴근하자! 파이썬 데이터 분석, 시각화, 웹 대시보드 제작하기

파이썬에서는 print() 구문이 굉장히 중요하다고 들었는데, 주피터랩에서는 print 없이 df만 써도 표가 나오는 이유는 왜인가요? print(df)를 했을 때는 표가 아니라 글로 나오네요.! 차이가 궁금해서 질문 남깁니다.

• python
• pandas
• seaborn
• plotly
• matplotlib
• data-visualization
• streamlit

로고가 안보여요

해결됨

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

로고가 안보여서 여기저기 파일 들쑤셔보니깐 오류문구가 뜨는걸 발견했습니다. 이게 로고가 안보이는 이유인지는 잘 모르겠는데 오류가 보이니 고치고 싶은데 어떻게 고치는지 모르겠습니다. gpt도 유용한 정보를 안주네요 허허...

• 블로그
• github

pip로 패키지를 설치했음에도 import 오류가 납니다. 어떻게 해야 할까요?

해결됨

실무에서 사용하는 클라우드 보안 프로그래밍 (AWS, Python, Terraform)

기존 질문이 삭제되어 헷갈리실 다른 분들을 위해 자문자답 형태로 남겨둡니다. Python의 경우 어느 곳에서 다운로드 받느냐에 따라 다양한 경로에 다양한 버전이 생길 수 있습니다. 첨부해주신 사진을 봤을 때, /usr/bin/python3 를 통해 boto3를 import 하시려면, /usr/bin/pip3 를 통해 boto3를 다운로드 해주셔야 될 것 같습니다.( /usr/bin/python3 를 입력해서 실행했을 때와 python3 를 입력했을 때 버전을 비교해보시면 좋습니다.) 간단한 해결 방법으로는 /usr/bin/python3 가 아닌 그냥 python3 로 실행해주시면 될 것 같습니다. 만약 해결되지 않는다면, 현재 boto3가 설치된 경로에 있는 Python 실행 파일을 통해 파일을 실행해주시면 됩니다. 이런 번거로운 절차가 귀찮으시면, 1.3. Python 실행 단축키 설정 을 참고하셔서 실행 설정을 해주시고, vscode에서 cmd + shift + p 입력 후, Python: Select Interpreter 를 입력해주신 후에 실행하고 싶은 Python3 경로를 선택해주시면 됩니다. 또는, 우측 하단에 아래 그림과 같이 나오는 부분에서 버전을 클릭하시면 위 그림이 나오게 됩니다. 이후에는 cmd + enter 를 통해 쉽게 실행 가능합니다! 해보시고 안되시면 다시 말씀 부탁드리겠습니다.

• python
• aws
• Terraform
• devsecops

강의자료부탁드립니다

해결됨

팀 개발을 위한 Git, GitHub 입문

강의 잘 보겠습니다 강의자료 부탁드립니다 whdudgms123@naver.com

• git
• github
• 버전관리시스템

웹사이트 ip주소 확인 어떻게 하는지 질문 드립니다.

해결됨

포트폴리오 초간단 배포하기

안녕하세요 강의 듣고 제가 직접 실습 해본 것 관련해서 질문 드립니다. http://raw.githack.com 으로 호스팅을 해봤는데요, 여기로 호스팅을 한 웹 사이트의 ip주소는 어떻게 확인할 수 있나요?

• linux
• github
• nginx

섹션5의 2번째 강의 질문-setMap 비동기 처리 이유

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

제가 이해한 바가 맞는지 질문드립니다. 질문1. 마커를 찍을 시: 1. 주소를 좌표로 변환 2. 해당 좌표를 마커로 지도에 표시 의 처리 순서가 보장되어야 하므로, async await를 이용한 비동기처리를 해준 것이 맞나요? 질문 2. 비동기처리를 해주기 전에도 마커는 잘 찍혔는데, 그 말은 즉 주소를 좌표로 변환하고-> 좌표를 마커로 표시하는 순서로 코드가 실행되었다는 것 아닌가요? 그렇다면 api가 비동기적으로 이루어진다는 말이 잘 와닿지 않아서 질문드립니다. 감사합니다!

• HTML/CSS
• javascript
• aws
• git
• mysql
• rest-api
• github

mac 터미널 git log 바로출력

해결됨

모두의 깃 & 깃허브

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 혹시나 강사님 처럼 터미널에서 git log 바로 출력되는 방법 찾으시는 분 있을까봐 글 남깁니다. mac에서는 git로그 기본 출력이 vi로 설정되어 있어 터미널에서 바로 확인하기 매우 불편하다.터미널에 로그를 바로 출력하기 위해서는 기본 출력을 vi에서 cat으로 변경해주면 된다.아래 명령어 그대로 터미널에 복사해주세요.git config --global core.pager cat 출처 : https://mangu.tistory.com/91

• git
• github

외부 파이썬 함수 수행하기 관련 질문 드립니다.

미해결

Airflow 마스터 클래스

안녕하세요. 좋은 강의 감사히 잘 들었습니다. 강의에서 궁금한 점이 있어서 질문 드립니다. 1) 첫 번째 질문 강의 제목 : 외부 파이썬 함수 수행하기 환경 구성 : macOS, Docker, Airflow 2.7 문의 내용 : 강의 초반에 언급한 환경변수로 설정하는 방법 상세 내용 : 강의 후반에 알려주신 내용은 방법을 이해했습니다. 다만 초반에 알려주신 항목 중 sys.path 는 명시적 구현이라 쉽게 가능했으나, 환경변수 쪽은 찾아봐도 쉽게 이해가 안 돼서 질문하게 됐습니다. 복습하면서 여러 방법을 알면 좋을 것 같아서 질문 드립니다. 2) 두 번째 질문 강의 제목 : 없음 환경 구성 : Docker 설치 시 생성하는 디렉터리 이외에 추가 디렉터리 생성 후 볼륨 마운트. 예를 들어 utils 라는 디렉터리를 생성 후 docker-compose.yaml 의 volumes 에 ${AIRFLOW_PROJ_DIR:-.}/utils:/opt/airflow/utils 를 추가 할 경우 문의 내용 : 추가로 디렉터리 생성할 경우 plugins 디렉터리 외에서 py 파일을 읽어야 하는 경우 상세 내용 : 첫 번째 질문과 유사하게 환경변수에 관한 질문일 것 같습니다. 새로운 디렉터리를 생성해서 작업할 때 경로를 인식 시켜야 하는데, sys.path 로만 하는 것은 번거로운 것 같아서 어떤 방식으로 접근을 하면 좋을지 조언을 듣고 싶습니다. 간략하게 정리하면 plugins 디렉터리 이외의 환경도 같이 사용을 하는 방법이 궁금합니다. 3) 세 번째 질문 강의 제목 : 없음 환경 구성 : 1, 2와 동일 문의 내용 : 새로운 패키지 설치 할 때 설치 방법 및 운영 관리 노하우 상세 내용 : docker compose 할 때 yaml 에 PIPADDITIONAL_REQUIREMENTS 부분에 설치할 패키지 목록을 입력해서 설치를 하고 있습니다. 이렇게 해도 되는 것 같긴한데, 나중에 더 많은 패키지를 설치하게 될 경우 좋지 않은 형태라고 생각이 들었습니다. 실제로 현업에서 업무를 하실 때 다양한 패키지를 어떤 식으로 설치 및 운영 관리 하시는지 궁금합니다. 감사합니다. 다른 강의도 기대하겠습니다.

• python
• 데이터-엔지니어링
• airflow

파이썬 face-recognition 모듈 설치 오류

미해결

pip를 통해서 face-recognition 모듈을 설치하려는데 아래 사진과 같은 오류가 계속 발생합니다. pip 버전은 제일 최신 버전 파이썬 버전은 3.11.4 인터넷 보니 CMake를 설치하래서 일단 CMake 버전은 3.28.1입니다 아 dlib도 pip말고 직접 설치하래서 했더니 밑에 빨간 글자를 제외하고 위에 'subprocess.CalledProcessError' 부분과 똑같은 오류가 발생하더군요 이걸로 계속 고통받다 마지막으로 질문해봅니다 ㅠ

• python
• 파이썬

깃&깃헙 브랜치 3개로 협업하기 (주니어개발자 팀프로젝트) -branch default 설정 관련

해결됨

30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub

깃&깃헙 브랜치 3개로 협업하기 (주니어개발자 팀프로젝트) -branch default 설정 관련 영상을 따라하다가 막히는 부분이 있어서 질문드립니다. 안내해주신 분 잘 따라가며 repository의 setting에 들어가서 branch를 눌러보니 defualt 설정하는 곳이 안 보여서 어떻게 해야할지 몰라 질문드립니다. 이렇게 branch protection rules 만 보이는 상태입니다.

• git
• github

마크다운 이미지가 잘 작동안합니다.

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

제시해주신 방식대로는 마크다운으로 작성하는 이미지가 링크를 작성하기까지만 하고 나오지 않는 경우가 대부분입니다. 이유는 모르겠네요. 잠깐 나왔었는데.. 또 안나옵니다. 이유가 있을까요. 조건과 지시를 다양하게 걸었더니 제대로 답변을 못하네요. ^^; 특히 일기를 제멋대로 쓰는 부분이 있습니다. 어떤때는 내가쓴것처럼 잘 쓰는데 어떤때는 제멋대로 씁니다. ㅎㅎ 그래도 이런 시도를 해볼수 있어서 좋습니다.

• HTML/CSS
• javascript
• react
• node.js
• chatgpt

안녕하세요 마지막 강의 질문 있습니다.

미해결

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

git actions에서 EB에 배포전에, docker hub에 이미지를 미리 배포하고, 그 배포된 docker image 파일을 EB에서 실행한다고한다면, 결국 Dockerrun.aws .json 파일만 EB에 배포하면 되는 것 아닌가요? - name: Generate deployment package run: zip -r deploy.zip . -x '*.git*' 해당 코드는 소스파일과 그외 파일까지 전부 압축해서 S3에 업로드하자나요? Dockerr.aws .json 파일만 첨부해서는 작동이 안되나요?

• aws
• docker
• github
• ci/cd
• travis-ci
• 데이터-엔지니어링

React Router가 설치가 안됩니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

npm i react-router-dom@6 로 설치하려하면 npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'lru-cache@10.1.0', npm WARN EBADENGINE required: { node: '14 || >=16.14' }, npm WARN EBADENGINE current: { node: 'v16.13.0', npm: '8.1.0' } npm WARN EBADENGINE } 라 뜨는데요, 현재 노드버전이 v16.13 이라 그런것같은데 이럴때는 어떻게 해야되나요?

• javascript
• react
• node.js

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