묻고 답해요

#9.1 이미지 최적화 / css backgroundImage url 최적화 관련 질문

해결됨

한 입 크기로 잘라먹는 Next.js

강의를 잘 듣던 도중에 궁금증이 생겨 질문드립니다. #9.1 이미지 최적화 강의를 듣고 나서 생긴 궁금증입니다. 여러 img태그를 next에서 제공하는 Image 태그로 교체함으로써 웹사이트의 이미지를 최적화시킬 수 있다는 점은 잘 이해했습니다. 하지만 이렇게 된다면 이전 강의에서 배운 도서 상세 페이지에서 도서의 표지를 검은색 배경으로 깔기 위해 사용했던 div 태그 내의 css ( BackgroundImage: url(...) ) 부분이 가져오는 이미지는 최적화가 전혀 되지 않을 것 같다는 생각이 들었습니다. 열심히 최적화를 해 봐야 저 부분에서 풀 사이즈의 이미지를 중복해서 가져온다면 성능에 다시 악영향이 갈 것 같다고 생각하였고, 나름의 답을 생각해 보았는데, 어떤 답이 맞는 것인지 잘 모르겠어 이렇게 질문드립니다. 배경 부분도 Image 태그로 불러운 다음 css를 적절하게 사용해 똑같이 배경 느낌으로 만들어 준다. css url로 가져온 이미지는 자주 가져오지 않으므로 최적화하지 않아도 큰 영향은 없다. 사실 고민을 해 보아도 이 두가지 밖에 떠오르지 않아 둘 중에 답이 있는 것인지, 아니라면 어떤 방법을 적용하는 것이 좋은 방법일지 질분드립니다.

• react
• typescript
• next.js

[#보일러플레이트 코드 사용법 문의] 강의자료[보일러플레이트] 사용법에 대해서 문의 드려요

해결됨

[React / VanillaJS] UI 요소 직접 만들기 Part 1

안녕하세요! 보일러플레이트 코드를 다운받아 npm install 을 하면, route 관련 코드가 작성되어 있고, http://localhost:3000으로 브라우저를 들어가면 좌측 메뉴가 disabled 되어 클릭이 안되는 상태입니다. route 설정 코드가 보일러플레이트 코드에 일부 작성되어 있는데, route 설정 강좌를 시청 해야하는지 혹은 강좌 내용대로 코드를 다시 작성해야하는지 궁금합니다. routes.ts를 보면, children의 값이 null 인 부분이 확인됩니다. 아코디언 강좌를 예로 든다면, 아코디언 컴포넌트를 만들고, 여기 null 인 부분에 값을 넣는거 아닐까 생각이 드는데요 첨부된 보일러플레이트 코드를 어떻게 사용해야하는지 질문 드립니다. 감사합니다! :]

• react
• typescript
• dom
• ui
• vanilla-js

index.js를 수정 후 npm start를 하면 계속 포트running이라고 뜹니다

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강사님과 동일하게 index.js를 수정하고 terminal - new terminal을 하면 저는 경로가 계속 my-app의 상위 경로로 되어있어서 cd my-app을 해주고 npm start를 하는데 (이부분도 저는 왜 계속 이렇게 뜨는지 궁금합니다..my-app을 우클릭 후 터미널을 열면 되긴합니다만..) 이렇게 떠서 계속 새로운 포트를 추가해서 사용하게 됩니다..저도 강사님처럼 실습하고 싶은데 어떻게 하면 될까요..?

• HTML/CSS
• javascript
• react

22:03 do...while문 질문

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

22:03 do...while문 질문 제 생각으로는 printf문 출력 후 i++이 나와서 증가되고 while문 i에는 2가 들어가야 될거 같은데 잘못 이해하고 있나요... 선생님 말씀대로라면 while문 실행 후 증감이 되야 될거 같은데요

• python
• java
• c
• 정보처리기사

int check 변수 질문

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

비전공자 열심히 쫓아가는중입니다..^^; 21:00초대 int check=i 변수가 가 실행되는 시점이 잘 이해가 안갑니다. i 에 대입되는 값이 그대로 check에 들어가는 원리인가요? 홀수는 "현재숫자"만 출력되고 짝수는 "짝수입니다"까지 출력되구요?

• python
• java
• c
• 정보처리기사

4. 앱라우터 데이터페칭시 서버 에러 및 클라이언트-서버컴포넌트 수화 에러..

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! 강의 듣다가 에러가 발생해서 문의드립니다. 어디가 정확히 에러가 나는지 잘 모르겠어서, 어떻게 해결을 해야할지 모르겟네용... 클라이언트와 서버컴포넌트의 하이드레이션 과정에서 에러가 발생한다고 하는데요ㅠㅠ... 4ch 앱라우터 데이터 패칭 할 때 에러난건데, 서버 에러도 같이 뜹니다!! 아니면 서버의 문제라서 클라이언트-서버컴포넌트 하이드레이션까지 문제가 생긴걸까요?? ( 서버는 건드린 적이 없는데 ㅠㅠ ) < 에러 발생 내용 > hook.js:608 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. 아래 사진은 서버 vscode 터미널 사진입니당 ㅠ Invalid this.prisma.book.findMany() invocation in C:\Users\82106\Desktop\06_onebite-server-main\src\book\book.service.ts:27:35 24 } 25 26 async findAllBooks() { → 27 return await this.prisma.book .findMany( Error querying the database: FATAL: Tenant or user not found PrismaClientInitializationError: Invalid this.prisma.book.findMany() invocation in C:\Users\82106\Desktop\06_onebite-server-main\src\book\book.service.ts:27:35 at In.handleRequestError (C:\Users\82106\Desktop\06_onebite-server-main\node_modules\@prisma\client\runtime\library.js:122:7154) at In.handleAndLogRequestError (C:\Users\82106\Desktop\06_onebite-server-main\node_modules\@prisma\client\runtime\library.js:122:6188)

• react
• typescript
• next.js

H2 데이터베이스 초기화문제

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

package hellojpa; import jakarta.persistence.*; public class JpaMain { public static void main(String[] args) { EntityManagerFactory emf = Persistence.createEntityManagerFactory("hello"); EntityManager em = emf.createEntityManager(); //code EntityTransaction tx = em.getTransaction();//트랜잭션 생성 tx.begin(); try { Member member = new Member(); member.setId(4L); member.setName("유동곤7"); em.persist(member); tx.commit(); }catch (Exception e){ tx.rollback(); } finally { em.close(); } emf.close(); } } 위코드에서 member의 setId와 setName을 바꾸면 강의를 보면 DB에 데이터가 쌓이는것같은데 저는 아이디를 바꾸고 이름을바꿔도 기존 데이터가사라지고 새로운데이터로 바뀌게됩니다 . 뭐가문제일까요

• java
• jpa

소스코드는 어디서 받을수 있나요?

해결됨

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요. 강의영상의 코드를 다운받을수 있는곳이 있나요? 강사님 네이버 카페 가보니 코드로배우는리액트 자료실에 타입스크립트 추가되어 있는 yes24 링크인가요? 들어가봤는데 아닌것 같아서 여쭤봅니다..

• react
• spring-boot
• jpa
• jwt
• redux-toolkit

프록시 객체 질문 있습니다.

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

em.getReference()로 프록시 객체를 조회하면 영속성 컨텍스트에는 프록시 객체가 저장되는건가요?? 아니면 엔티티를 실제 사용하는 시점에 영속성 컨텍스트가 DB를 조회해서 실제 엔티티를 만드는데 이 엔티티가 영속성 컨텍스트에 저장되는건가요??

• java
• jpa

QueryDSL 관련 질문입니다.

미해결

@Getter @Setter @Entity @SuperBuilder @AllArgsConstructor @Table(name = "member") @NoArgsConstructor(access = AccessLevel.PROTECTED) public class Member extends BaseUpdateEntity { @Id @GeneratedValue(generator = "uuid2") private UUID id; private String email; private String password; @Column(columnDefinition = "INT") @Enumerated(value = EnumType.ORDINAL) private MemberStatus memberStatus; } @Getter @Setter @SuperBuilder @MappedSuperclass @NoArgsConstructor @EntityListeners(AuditingEntityListener.class) public abstract class BaseUpdateEntity extends BaseEntity { @LastModifiedDate private LocalDateTime updatedAt; @LastModifiedBy private String updatedBy; } @Getter @Setter @SuperBuilder @MappedSuperclass @NoArgsConstructor @EntityListeners(AuditingEntityListener.class) public abstract class BaseEntity { @CreatedDate @Column(updatable = false) private LocalDateTime createdAt; @CreatedBy @Column(updatable = false) private String createdBy; } public Page<AuthInfoDto> searchList(AuthSearchRequestDto requestDto) { JPAQuery<AuthInfoDto> query = queryFactory.select(Projections.fields( AuthInfoDto.class, member.email, member.memberStatus.as("status"), member.createdAt )).from(member) .where(searchCondition(requestDto)); // 검색 조건 설정 long totalCount = query.fetchCount(); List<AuthInfoDto> authInfoList = this.getQuerydsl().applyPagination(requestDto.getPageable(), query).fetch(); return new PageImpl<>(authInfoList, requestDto.getPageable(), totalCount); } 사용자 정보를 Pagination해서 출력하게끔 하려고 합니다. 문제가 되는 부분은 List<AuthInfoDto> authInfoList = this.getQuerydsl().applyPagination(requestDto.getPageable(), query).fetch(); 해당 코드 부분인데 단순히 query.fetch()를 해서 List를 추출하는 것은 되지만 Pagination을 적용하고자 하면 에러가 납니다. org.hibernate.query.SemanticException: Could not interpret path expression 'member.createdAt' 에러 내용은 위와 같습니다. QueryDSL 관련 gradle 정보도 같이 첨부합니다. // QueryDSL implementation 'com.querydsl:querydsl-core:5.0.0' implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' implementation 'com.querydsl:querydsl-apt:5.0.0:jakarta' implementation 'jakarta.annotation:jakarta.annotation-api' implementation 'jakarta.persistence:jakarta.persistence-api' annotationProcessor "com.querydsl:querydsl-apt:5.0.0:jakarta" annotationProcessor "jakarta.persistence:jakarta.persistence-api" annotationProcessor "jakarta.annotation:jakarta.annotation-api" 혹시 뭐가 문제일까요?? 도와주세요.

• querydsl
• java
• spring
• gradle

이전강좌 수강요청

해결됨

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

안녕하세요. 리액트 강좌를 아주 잘듣고 있는 학생입니다. 죄송하지만 이전 강좌를 다시 볼수 없을까요? 글내용을 수정하는 부분이 막혀서요 ㅠㅠ

• javascript
• react
• node.js

localhost ui 화면이 연결이 안돼요

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

저번에 실행했을 땐 잘 연결됐는데 지금은 이렇게 사진처럼 연결되지가 않네요.... 왜 이런건가요..? 서버도 실행한 상태에서 local 주소를 입력했는데 이렇게 된 상태입니다. 혹시 몰라 서버를 실행했을 때 에러가 뜨는 부분들을 다 캡쳐했습니다.

• java
• spring
• aws
• mysql
• spring-boot
• jpa

setup, teardown 동작 순서

미해결

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

안녕하세요! setup, teardown 강의를 보며 실습하고 있습니다. beforeAll 내에 console이 첫번째로 찍히다가 afterAll과 함께 사용할 경우에는 afterAll 바로 직전(마지막 바로 앞)에 찍히고 있습니다. (afterAll을 지울 경우에는 첫번째로 찍히고 있습니다.) beforeEach는 it을 실행하는 횟수만큼 실행되는거 같은데요. describe내에 선언한 beforeEach는 describe내에 호출한 it의 횟수만큼 실행되는게 맞는거 같은데 root의 beforeEach, afterEach도 it의 횟수만큼 실행되는게 맞을까요? 제가 사용한 코드와 출력화면 입니다. import { screen } from '@testing-library/react'; import React from 'react'; import TextField from '@/components/TextField'; import render from '@/utils/test/render'; beforeEach(() => { console.log('2. root - beforeEach'); }); beforeAll(() => { console.log('1. root - beforeAll'); }); afterEach(() => { console.log('5. root - afterEach'); }); afterAll(() => { console.log('6. root - afterAll'); }); describe('placeholder', () => { beforeEach(() => { console.log('3. placeholder - beforeEach'); }); afterEach(() => { console.log('4. placeholder - afterEach'); }); it('기본 placeholder "텍스트를 입력해 주세요."가 노출된다.', async () => { await render(<TextField />); const textInput = screen.getByPlaceholderText('텍스트를 입력해 주세요.'); expect(textInput).toBeInTheDocument(); }); it('placeholder prop에 따라 placeholder가 변경된다.', async () => { await render(<TextField placeholder="상품명을 입력해 주세요." />); const textInput = screen.getByPlaceholderText('상품명을 입력해 주세요.'); expect(textInput).toBeInTheDocument(); }); }); /** 실행 결과 2. root - beforeEach 3. placeholder - beforeEach 4. placeholder - afterEach 5. root - afterEach 2. root - beforeEach 3. placeholder - beforeEach 4. placeholder - afterEach 5. root - afterEach 1. root - beforeAll 6. root - afterAll */

• javascript
• react
• 소프트웨어-테스트
• vitest

MemberServiceTest 이게 왜 틀리죠?

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

package jpabook.jpashop.service; import jpabook.jpashop.domain.Member; import jpabook.jpashop.repository.MemberRepository; import org.assertj.core.api.Assertions; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.transaction.annotation.Transactional; //@ExtendWith(SpringExtension.class) //@SpringBootTest에 이미 정의됨.(중복) @SpringBootTest @Transactional class MemberServiceTest { @Autowired MemberService memberService; @Autowired MemberRepository memberRepository; @Test public void 회원가입()throws Exception{ //given Member member=new Member(); member.setUsername("kim"); //when Long savedId = memberService.join(member); //then Assertions.assertThat(member).isEqualTo(memberRepository.findOne(savedId)); } } junit 5 버전이라 이렇게 고쳤는데도 테스트에 실패합니다. setUsername은 구버전 MemberRepository에서 오류가 나서 Member의 name을 username으로 바꿨습니다. test/resources/application.yml에 spring: logging.level: org.hibernate.SQL:debug 이것도 넣어줬는데 안됩니다

• java
• spring
• 웹앱
• spring-boot
• jpa

구조 분해 할당에서 변수가 더 많이 존재하는 상황은 어떤 경우인가요??

해결됨

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

2.3) 구조분해할당 강의의 배열의 구조 분해 할당과 객체의 구조 분해 할당 모두 아래 코드의 four와 extra와 같이 추가적으로 존재하지 않는 변수를 만드셨는데요. 이렇게 할당 받을 값보다 할당 받을 변수가 더 많은 경우가 실제로도 사용이 되나요?? 사용이 된다면 어떤 목적으로 사용이 되나요? let arr = [1, 2, 3]; let [one, two, three] = arr; let person = { name: "이름", age: 24, }; let { name, age, extra, } = person;

• javascript
• react
• node.js

연관관계 매핑 기초에서

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

단방향 매핑만으로도 충분하고 필요할떄 양방향으로 설계하라고하셨는데 단방향 매핑만하고 JPQL로 역방향으로 조회가 가능하다는 말씀이신가요? 제가 이해한건 양방향으로 굳이 안하고 단방향으로 설계했을때 JPQL을 사용해서 역방향으로 조회가 가능하다?이말씀이신가요?

• java
• jpa

현업에서의 부하테스트 및 Ngrinder 설치

미해결

백엔드 개발자 성능 개선 초석 다지기

현업에서의 부하테스트와 Ngrinder 사용에 대해 질문드립니다. 현업에서는 부하테스트용 서버(e.g. Stage 서버)를 두고 해당 서버에 부하테스트를 하는지, 아니면 로컬에 띄워두고 간략하게 테스트를 하는지 궁금합니다. Ngrinder를 어떤 서버에 설치하는지 궁금합니다. 별도의 IDC 서버에 설치한 후, 팀 내 개발자가 모두 해당 Ngrinder를 사용해 부하테스트를 적용하는지, 아니면 Ngrinder는 로컬 컴퓨터(개인 노트북 등)에 설치 후 부하 테스트 대상 서버만 Stage 환경 등에 두고 해당 서버에 테스트를 하는지 궁금합니다.

• java
• mysql
• spring-boot
• cache
• index
• ngrinder

npx prisma db push실행시 에러

해결됨

한 입 크기로 잘라먹는 Next.js

아래와 같은 에러가 발생했는데 무슨 문제인지 알려주시면 감사하겠습니다. Error: Prisma schema validation - (get-config wasm) Error code: P1012 error: Environment variable not found: DATABASE_URL. --> schema.prisma:13 | 12 | provider = "postgresql" 13 | url = env("DATABASE_URL") | Validation Error Count: 1 [Context: getConfig]

• react
• typescript
• next.js

서버컴포넌트 데이터 페칭 관련 문의 드립니다.

해결됨

한 입 크기로 잘라먹는 Next.js

서버컴포넌트에서 필요한 컴포넌트마다 데이터를 페칭하면, 서버에서 받아온 상태에 대해서는 전역상태 관리를 할 필요가 전혀 없는건가요?

• react
• typescript
• next.js

어떤 툴을 써야할까요?

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

자바 ORM 표준 JPA 프로그래밍 - 기본편을 수강중인데 spring boot를 사용하니까 너무 달라서 시간이 많이 걸리네요 만약 인텔리제이가 아닌 이클립스를 사용한다고하면 어떤 툴을 사용해야 똑같이 설정이 가능한지 궁금합니다.

• java
• jpa