안녕하세요, 페러렐 라우트 모달파트에서 모듈 에러가 발생하여 질문드립니다. tailwind css와 관련된 모듈을 설치한 적도 없고tailwind css코드를 작성한 적도 없는데 계속이러한 에러가 발생합니다...node_modules를 지웠다가 설치해도 안되고tailwind css와 관련된 패키지가 설치되어있는지 찾아봤지만 발견할 수 없었습니다 ㅠ 아래 코드가 page.modules.css 코드입니다..container { width: 100dvw; height: 100dvh; display: flex; flex-direction: row; background-color: #fff; } .left { display: flex; justify-content: center; align-items: center; flex: 1; } .right { display: flex; flex-direction: column; justify-content: center; flex: 1; } .right h1 { font-weight: bold; font-size: 64px; margin: 48px 0; } .right h2 { font-weight: bold; font-size: 31px; margin-bottom: 32px; } .right h3 { font-weight: bold; font-size: 17px; margin-bottom: 20px; margin-top: 40px; } .signup { width: 300px; height: 40px; border-radius: 20px; padding: 0 16px; font-size: 15px; background-color: rgb(29, 155, 240); color: white; border: none; display: flex; align-items: center; justify-content: center; } .signup:hover { background-color: rgb(26, 140, 216); } .login { width: 300px; height: 40px; border-radius: 20px; padding: 0 16px; font-size: 15px; color: rgb(29, 155, 240); border: 1px solid rgb(207, 217, 222); display: flex; align-items: center; justify-content: center; } .login:hover { background-color: rgba(29, 155, 240, 0.1); }

@ElementCollection와 @EntityGraph사용법에 대해서 잘 숙지 하였습니다. 한가지 질문이 있습니다. JPA사용시 일반적으로 쓰이는 @OneToMany, @ManyToOne, @ManyToMany를 대신해서 @ElementCollection으로대체하여 사용이 가능할까요?왠지 될거같은생각이 들긴하는데....   

강의 듣기전부터 프리티어는 사용하고 있었는데yarn add --dev eslint-config-prettier이걸 입력한이후 저장시 프리티어 간격조정이 자동으로 안됩니다format on save 다 체크 되있는 상태이고 다른폴더에선 프리티어가 되지만 yarn add --dev eslint-config-prettier 이걸 입력한 폴더만 간격 조정이 안먹는 데 이유가 뭘까요

Nextjs에서는 <Image /> 컴포넌트로 서버에서 이미지를 최적화 해주는 기능이 있는데,LogoutButton 컴포넌트에서는 기존의 <img> 태그를 사용하신 이유가 있는지 궁금합니다!사이즈가 작기 때문에 서버에 최적화를 맡기는 부담을 줄이기 위함일까요??

브라우저 콘솔에  Image with src "/_next/static/media/zlogo.f72788b6.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.Read more: https://nextjs.org/docs/api-reference/next/image#priority  와 같은 warning이 뜨길래 공식문서와 블로그 글을 참고해 봤는데 이미지 로딩의 우선권을 주는 기능인 것 같던데요  그냥 유저가 이미지가 들어가 있는 페이지에 접속했을때, 빠른 로딩 우선권을 주는 거라고 생각하면 되는 걸까요?

안녕하세요 정환님! 강의 듣다가 궁금한 점이 생겨서 질문드립니다.curDate가 변경되면 diary에서 현재 연도와 월에 해당하는 일기만 보여주려고 가공하는 부분입니다. 강의 13분 37초 쯤에서 useEffect 는 현재 연도와 월의 가장 첫번째 날짜를 구한다고 하시고 코드를 작성하시는데 firstDay의 new Date 내에서 curDate.getMonth() 에서 왜 +1을 하지 않아도 현재 월을 잘 받아오는건가요? (JS 에서 월이 0부터니까 +1을 한다고 알고 있었는데요..!)위의 headText 에서랑 increaseMonth 에서는 모두 +1 을 해서 현재 월을 받아왔는데 useEffect 내에서는 왜 +1을 안했는데도 정상적으로 받아왔는지 궁금합니다 !

해당 강의에서 postgresql 설치와 노드버전 18.17.0 환경에서nest-prisma의 폴더를 다운 받은 후 npm i -> npx prisma migrate dev 까지는 순조롭게 진행되었으나 npm run start:dev에서 Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 }에러가 발생했습니다 구글링을 해보니 레디스 서버가 구동이 안된 것 같다고 나오기도하고 서버쪽을 잘 몰라 질문 드립니다.env 파일 입니다DATABASE_URL="postgresql://postgres:비번@localhost:5432/zcom?schema=public" REDIS_URL=redis://localhost:6379 COOKIE_SECRET=cookienyamnyam 

안녕하세요! 제로초님! 보너스 강의까지 잘 챙겨보고 있습니다. 매번 감사합니다! 제 질문은..!server action 함수쪽에서 fetch config 객체에 credentials 을 include로 해줘야 쿠키(세션)를 API 요청 시 같이 태워서 보낼 수 있다고 설명해주셨는데, 혹시 이것이 next-auth 로부터 도움을 받는 것일까요?강의 수강 후, next 14로 프로젝트를 구현하고 있는데, fetch 할 때, credentials 를 include 해주었음에도 불구하고, 브라우저 application 탭에서 확인 할 수 있는 쿠키가 태워지지 않아서요. 해당 쿠키는 서버에서 로그인 시에 set-cookie 해준 쿠키이고, 프론트엔드는 localhost, 서버는 ec2에 배포된 서버입니다. 그래서 현재는 server action 함수내에서 next.js에서 지원해주는 cookie() 를 이용해서 fetch config 객체 내 headers 에 직접 쿠키를 넣어주고 있는데, 강의에서는 credentials 만으로 API 요청시 쿠키(세션)을 잘 태워서 보내주고 있는 것 같아 질문을 남기게 되었습니다.

안녕하세요 선생님 상황) 리덕스 실제 구현하기 부분을 따라하던 도중 configureStore.js에서 createStore 단어 가운데에 취소선이 생기면서 @reduxjs/toolkit의 configureStore로 대체를 권장한다고 뜨는 상황입니다.import {createStore} from 'redux'; import reducer from '../reducers'; const configureStore = () => { const store = createStore(reducer); store.dispatch({ type:'CHANGE_NICKNAME', data:'luckyhaejin' }); return store; }; 사용 중인 OS, 버전)저는 맥 OS사용자이며, 사용하고 있는 버전은 아래와 같습니다.{ "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.2.1", "antd": "^4.2.1", "next": "^9.5.5", "next-redux-wrapper": "^6.0.2", "prop-types": "^15.8.1", "react": "^16.14.0", "react-dom": "^16.14.0", "react-redux": "^7.2.9", "redux": "^4.2.1", "styled-components": "^6.1.1" }, "devDependencies": { "eslint": "^8.56.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0" } }  상황) 그래서 @reduxjs/toolkit과 관련한 문제 같아 react, react-dom 버전을 최신버전인 18로 바꾸고 next도 최신 버전인 14버전으로 바꾼 뒤 @reduxjs/toolkit을 설치하고 @reduxjs/toolkit 방식으로 대체하라는 메세지 안의 redux 링크를 참고하여 코드를 수정해보았습니다. https://redux.js.org/introduction/why-rtk-is-redux-today 하지만 제가 맞게 작성한건지 잘 모르겠고, 이렇게 제가 짠 코드로 변경을 하게되면 강의를 보며 따라하기가 어려워질 것 같아서 다시 원래 에러가 난 상태로 되돌린 상태입니다. 질문)reduxjs/toolkit을 적용하여 작성한 아래 코드가 맞게 작성된건지 궁금합니다.  질문)깃에서 reduxjs/toolkit을 사용한 코드를 강의 순서대로 적용하고 싶어서 찾아보았으나, 섹션2 코드가 순서대로 적용된게 아니라 한번에 올라온것 같아서, 혹시 강의 순서대로 @reduxjs/toolkit을 적용한 코드가 있다면 어떻게 해야 그 코드를 순서대로 볼 수 있는지 궁금합니다. 만약 강의 순서대로 적용한 코드가 없고 섹션별로 나눠져 있다면 섹션 순서대로 코드를 보는 방법이 궁금합니다. 수정 전)reducers/index.jsconst initialState = { user: { isLoggedIn:false, user:null, signUpData:{}, loginData:{} }, post: { mainPosts:[] } }; export const loginAction = (data) => { return { type: 'LOG_IN', data } } export const logoutAction = () => { return { type: 'LOG_OUT' } } // 이전 상태, 액션 => 다음상태 const rootReducer = (state = initialState, action) => { switch(action.type) { case 'LOG_IN': return { ...state, user: { ...state.user, isLoggedIn: true, user:action.data } }; case 'LOG_OUT': return { ...state, user: { ...state.user, isLoggedIn: false, user:null } }; default: return state; } }; export default rootReducer; 수정 후)reducers/userSliceimport {createSlice} from '@reduxjs/toolkit' const userSlice = createSlice({ name: 'user', initialState: { isLoggedIn: false, user:null }, reducers: { login(state, action) { isLoggedIn: true, user:action.payload; }, logout(state) { isLoggedIn: false, user:null } } }) export const {login, logout} = userSlice.actions; export default userSlice.reducer;reducers/postSliceimport {createSlice} from '@reduxjs/toolkit' const postSlice = createSlice({ name: 'post', initialState: { mainPosts:[] }, reducers: { } }); export default postSlice.reducer;   수정 전)store/configureStore.jsimport {createWrapper} from 'next-redux-wrapper'; import {createStore} from 'redux'; import reducer from '../reducers'; const configureStore = () => { const store = createStore(reducer); store.dispatch({ type:'CHANGE_NICKNAME', data:'luckyhaejin' }); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper;수정 후)store/configureStore.jsimport { createWrapper } from 'next-redux-wrapper'; import { configureStore } from '@reduxjs/toolkit'; import userReducer from '../reducers/userSlice'; import postReducer from '../reducers/postSlice' const makeStore = () => { const store = configureStore({ reducer: { user: userReducer, post: postReducer } }); return store; }; const wrapper = createWrapper(makeStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper;   

그랩마켓 자바스크립트 적용하기 -2 편에서 다 되는데 농구공 그림이 안떠요 <html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="header"> <div id="header-area"> <img src="images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images/banners/banner1.png"> </div> <h1>판매되는 상품들</h1> <div id="product-list"> </div> </div> <div id="footer"></div> </body> <script> var product = [{ name : '농구공', price : 10000, seller : '조던', imagUrl : '/images/products/basketball1.jpeg' },{ name : '축구공', price : 50000, seller : '메시', ImageUrl : '/images/prodocts/soccerball1.jpg' },{ name : '키보드', price : 10000, seller :'그랩', ImageUrl : '/images/prodocts/keyboard.jpg' }]; document.querySelector("#product-list").innerHTML = '<div class="product-card>'+ "<div>" + '<img class="product-img" src="images/products/basketball1.jpeg" />' + "</div>" + '<div class="product-contents">' + '<span class="product-name">농구공 1호</span>' + '<span class="product-price">50000원</span>' + '<div class="product-seller">' + '<img class="product-avatar" src="images/icons/avatar.png" />'+ "<span>그랩</span>" + "</div>" + "</div>" + "</div>" </script> </html>

질문있습니다. const modelListData = ['model1', 'model2', 'model3'] const [rowData, setRowData] = useState([]) useEffect(() => { setRowData(modelListData) }, [modelListData])위 처럼 작성을 한 후에 테스트를 돌리면 그냥 터미널이 멈춰 버립니다...그런데 setRowData(modelListData)이걸 주석처리 하거나 배열이 아닌 타입의 값을 넣을 경우에는 테스트가 제대로 동작합니다. 혹시 test코드에 뭔가를 작성을 해주어야 할까요? ㅠㅠ테스트 코드는 아래처럼 작성하고 돌려보았습니다.describe('모델리스트 컴포넌트 및 기능 테스트', () => { test('테스트 왜 안됨?', () => { render(<ModelList />) }) }) 그런데 터미널은 여기서 아무리 기다려도 다음으로 넘어가지 않습니다. 단 setRowData에 배열이 아닌 타입의 값을 넣을 경우에는 무리없이 잘돌아갑니다 ㅜㅜ RERUN  src/modelManager/components/ModelList.tsx x2 · src/__test__/modelList.test.tsx (1)   · 모델리스트 컴포넌트 및 기능 테스트 (1)     · 테스트 왜 안됨?    

진석님 안녕하세요!  현재 forms.py에서 admin form 커스터마이징 해서 사용하고있습니다. A라는 모델에 group / code 필드가 있고, group : code = 1 : N 관계입니다.(FK처리는 안해놓은 상태입니다.) group과 code 모두 select widget으로 구성해놨는데, code 필드의 구성을 group 선택할 때 마다 다르게 지정하고싶습니다. 혹 구글에 검색할 수 있는 키워드라도 알 수 있을까요?  좋은 강의 제공해주셔서 프로젝트 순항중에 있습니다. 언제나 감사합니다 :)

뭐가 문제일까요 똑같이 작성한 거 같은데 자꾸 빨간줄이 생겨요ㅜㅜ

모달이 작동하지않아서 혹시 몰라서 카페에 올라와있는 소스코드를 덮어씌어도 모달이 뜨질않습니다.. 분명 데이터는 등록되는데 result값도 제대로 들어오는데도 불구하고 뜨질않더라구요.. 아래코드는 카페에 올라와있는 코드를 제 프로젝트에 인식시켜본 코드입니다. import React, {useState} from 'react'; import ResultModal from "../common/ResultModal"; import {postAdd} from "../../api/todoApi"; import userCustomMove from "../../hooks/userCustomMove"; const initState = { title:'', content: '', dueDate: '' } const AddComponent = () => { const [todo, setTodo] = useState({...initState}) const [result, setResult] = useState(null) //결과 상태 const {moveToList} = userCustomMove() //useCustomMove 활용 const handleChangeTodo = (e) => { todo[e.target.name] = e.target.value setTodo({...todo}) } const handleClickAdd = () => { //console.log(todo) postAdd(todo) .then(result => { console.log(result) setResult(result.TNO) //결과 데이터 변경 setTodo({...initState}) }).catch(e => { console.error(e) }) } const closeModal = () => { setResult(null) moveToList() //moveToList( )호출 } return ( <div className = "border-2 border-sky-200 mt-10 m-2 p-4"> {/* 모달 처리 */} {result ? <ResultModal title={'Add Result'} content={`New ${result} Added`} callbackFn={closeModal}/>: <></>} <div className="flex justify-center"> <div className="relative mb-4 flex w-full flex-wrap items-stretch"> <div className="w-1/5 p-6 text-right font-bold">TITLE</div> <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-500 shadow-md" name="title" type={'text'} value={todo.title} onChange={handleChangeTodo} > </input> </div> </div> <div className="flex justify-center"> <div className="relative mb-4 flex w-full flex-wrap items-stretch"> <div className="w-1/5 p-6 text-right font-bold">CONTENT</div> <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-500 shadow-md" name="content" type={'text'} value={todo.content} onChange={handleChangeTodo} > </input> </div> </div> <div className="flex justify-center"> <div className="relative mb-4 flex w-full flex-wrap items-stretch"> <div className="w-1/5 p-6 text-right font-bold">DUEDATE</div> <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-500 shadow-md" name="dueDate" type={'date'} value={todo.dueDate} onChange={handleChangeTodo} > </input> </div> </div> <div className="flex justify-end"> <div className="relative mb-4 flex p-4 flex-wrap items-stretch"> <button type="button" className="rounded p-4 w-36 bg-blue-500 text-xl text-white " onClick={handleClickAdd} > ADD </button> </div> </div> </div> ); } export default AddComponent; 

@RestController @Log4j2 @RequiredArgsConstructor @RequestMapping("/api/todo") @CrossOrigin("*") //cors 허용 public class TodoController { ... }http://localhost:3000/todo/read/33 호출시 cors에러@CrossOrigin("*") 로 일단 처리했습니다.

제로초님은 항상 _component 폴더를 만드시는데 이런 폴더를 만들지 않고 그냥 컴포넌트를 만드는건 어떻게 생각하시나요??어차피 폴더내에서는 page라는 파일만 페이지로 라우팅이 되기 때문에 별 상관없을 것 같습니다. 단순히 취향차이로 보면 될까요?? ex) as is src/app/search/_component/Tab.tsxto be src/app/search/Tab.tsx

안녕하세요!mac에서 백엔드 서버 세팅 중 에러가 발생해 해결했던 방법을 남깁니다. 강의 수강 중 섹션 4 [백엔드 서버 세팅하기] 강의에 맞춰 아래와 같이 진행하였습니다.postgresql 설치pgAdimin 세팅github nest-prisma repository 클론nest-prisma 디렉토리에서 npm i && npm run migrate:devnpm run start:dev 실행 시 아래 에러 발생Error: connect ECONNREFUSED 127.0.0.1:6379구글링을 해보니 redis 설치 및 redis-server 명령어를 실행하라고 해 따라했더니 에러가 사라졌습니다.제가 중간에 세팅 과정을 잘못 했거나 위 해결 방법이 틀린건지도 모르겠지만 혹시 도움이 될까 해서 남깁니다.

안녕하세요. useState()를 사용하지 않고,단지 data로 받아서data.map(suggestion) => ( ... )이렇게 처리해도 되는지 궁금합니다.컴포넌트의 return 내부에서는 상태가 변경될 일이 없을 것 같아서 말입니다.

아래와 같은 에러가 발생하여 application.properties를 application.yml로 바꾸어봤지만 같은에러가납니다.***************************APPLICATION FAILED TO START***************************Description:Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.Reason: Failed to determine a suitable driver classAction:Consider the following: If you want an embedded database (H2, HSQL or Derby), please put it on the classpath. If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active). 아래 코드는 application.yml내용입니다.spring: datasource: driver-class-name: org.mariadb.jdbc.Driver url: jdbc:mariadb://localhost:3306/apidb username: apidbuser password: apidbuser jpa: hibernate: ddl-auto: update properties: hibernate: format_sql: true show-sql: true logging: level:debug아래코드는 build.gradle 내용입니다. buildscript { ext { queryDslVersion = "5.0.0" } } plugins { id 'java' id 'org.springframework.boot' version '3.0.13' id 'io.spring.dependency-management' version '1.1.4' } group = 'org.mail' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' testCompileOnly'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' runtimeOnly 'org.mariadb.jdbc:mariadb-java-client' annotationProcessor 'org.projectlombok:lombok' testAnnotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation "com.querydsl:querydsl-jpa:${queryDslVersion}:jakarta" annotationProcessor( "jakarta.persistence:jakarta.persistence-api", "jakarta.annotation:jakarta.annotation-api", "com.querydsl:querydsl-apt:${queryDslVersion}:jakarta") } tasks.named('bootBuildImage') { builder = 'paketobuildpacks/builder-jammy-base:latest' } tasks.named('test') { useJUnitPlatform() } compileJava.dependsOn('clean')맨위에 에러 난 후 이하 반복적인 에러가 발생하지만 값을 가져오는데는 이상이없습니다.프론트에서 호출해도 정상적으로 데이터가 호출됩니다.그래서 quertdsl에 관한내용을 지우고 해봤는데 에러가 사라졌습니다. 혹시 querydsl 에 관한 이슈가 있는걸까요? 검색을 해봤지만 발견할 수가 없었습니다. java.lang.NullPointerException: Cannot read field "generatedClass" because "data" is null 

App - state값을 배열로 헀는   이에럭 뜨는데 콘솔로 찍어보면 프롭으로 넘긴 값이 객체로 들어오던데 왜그러는걸까요?