묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자도 이해할 수 있는 AWS 중급/실전 (보안, 가용성편)
퍼블릭 ip 자동 할당 질문
default vpc로 인스턴스를 생성했을 때는 퍼블릭 자동 할당 활성화를 해주지 않았던 것 같은데 default vpc의 경우에만 활성화를 해주지 않아도 자동 할당 되는건가요?
-
미해결Next + React Query로 SNS 서비스 만들기
재랜더링 최적화 문제
안녕하세요. 제가 직접 tailwind css v4를 이용해서 트위터 클론코딩을 진행하고 있는데SearchForm에서 입력이 이루어지면, SearchForm의 영향으로 인해서 다른 영역에서도 재랜더링이 일어나는 것 같습니다.먼저 묻고싶은 내용은 어떻게 하면 다른 영역은 재렌더링이 일어나지 않게 할까 입니다. 리엑트 개발자 도구로 렌더링이 일어날때 하이라이트 표시를 켰습니다. 이 때 SearchForm에 입력이 일어나면 위와같이 SearchForm만 아닌, 다른 영역에도 렌더링이 되는 모습이 보입니다. SearchForm 구성은 다음과 같이했습니다.최대한 현재 트위터의 입력 방식을 맞추어 보았습니다."use client"; import { useSearchParams } from "next/navigation"; import React, { useRef, useState, ChangeEventHandler, useEffect, memo, } from "react"; interface SearchFormProps { q?: string; } const SearchForm = () => { const [value, setValue] = useState(""); const inputRef = useRef<HTMLInputElement>(null); const searchParams = useSearchParams(); const search = searchParams.get("q"); const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => setValue(e.target.value); const handleClear = () => { setValue(""); inputRef.current?.focus(); }; useEffect(() => { setValue(search ?? ""); }, []); return ( <div className="relative w-inherit h-12 group min-w-0"> {/* Border 레이어 */} <div className={` absolute inset-0 border border-default-border rounded-full transition-all duration-75 group-focus-within:border-2 group-focus-within:border-twiiter-blue `} /> {/* 내부 요소 컨테이너 */} <div className="relative w-full h-full"> <form className="flex items-center w-full h-full px-4" autoComplete="off" onSubmit={(e) => e.preventDefault()} > {/* 검색 아이콘 (외부 div 기준 위치) */} <svg className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none" width={20} height={20} viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth={2} > <circle cx="11" cy="11" r="8" /> <line x1="21" y1="21" x2="16.65" y2="16.65" /> </svg> {/* Input */} <input ref={inputRef} type="search" placeholder="검색" value={value} onChange={handleChange} className=" w-full h-full pl-10 pr-10 bg-transparent text-base outline-none placeholder-gray-500 appearance-none " /> {/* Clear 버튼 (외부 div 기준 위치) */} {value && ( <button type="button" onClick={handleClear} className=" absolute right-3 top-1/2 -translate-y-1/2 w-7 h-7 flex items-center justify-center bg-gray-700 hover:bg-gray-800 rounded-full transition " tabIndex={-1} aria-label="Clear" > <svg width={16} height={16} viewBox="0 0 20 20" fill="white"> <path d="M10 8.586l4.95-4.95 1.414 1.414L11.414 10l4.95 4.95-1.414 1.414L10 11.414l-4.95 4.95-1.414-1.414L8.586 10l-4.95-4.95L5.05 3.636 10 8.586z" /> </svg> </button> )} </form> </div> </div> ); }; export default SearchForm; 이를 SearchHeader에 적용하였으며.import React from "react"; import SearchTab from "./SearchTab"; import SearchForm from "@/components/common/SearchForm"; const SearchHeader = () => { return ( <div className="w-[calc(100%-72px)] sm:pl-0 sm:max-w-[598px] fixed backdrop-blur-lg border-b-1 border-default-border bg-white/70 dark:bg-black/30"> <div className="w-full mt-2"> <SearchForm /> </div> <div className="w-full mt-1 h-[53px]"> <SearchTab /> </div> </div> ); }; export default SearchHeader; 최종적으로 /search 페이지에 이를 적용했습니다.import React from "react"; import Post from "../home/_components/Post"; import SearchHeader from "./_components/SearchHeader"; interface SearchPageProps { searchParams: Promise<{ q: string; f?: string; pf?: string }>; } const SearchPage = async ({ searchParams }: SearchPageProps) => { const { q } = await searchParams; return ( <main className="main-container"> <SearchHeader /> <div className="mt-[107px]"> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> <Post /> </div> </main> ); }; export default SearchPage; 관련된 layout.tsx는 다음과 같습니다.import Image from "next/image"; import Link from "next/link"; import React, { ReactNode } from "react"; import logo from "@/../public/twitter-logo.svg"; import SearchForm from "@/components/common/SearchForm"; import NavMenu from "./_components/NavMenu"; import LinkButton from "@/components/common/LinkButton"; import FollowCard from "./_components/FollowCard"; import TrendCard from "./_components/TrendCard"; import RightSection from "./_components/RightSection"; interface AfterLoginLayoutProps { children: ReactNode; modal: ReactNode; } const AfterLoginLayout = ({ children, modal }: AfterLoginLayoutProps) => { return ( <div className="overflow-y-scroll"> <div className="flex items-stretch"> <header className="flex items-end flex-col sm:flex-grow-1"> <section className="w-[72px] p-2 xl:p-0 xl:w-[275px] h-dvh"> <div className="flex flex-col w-inherit h-dvh fixed "> <Link href={"/home"}> <div className="w-14 h-14 rounded-[50%] flex justify-center items-center hover:bg-[rgba(15,20,25,0.1)]"> <Image src={logo} alt={"twitter logo"} width={40} height={40} /> </div> </Link> <NavMenu /> </div> </section> </header> <div className="flex items-start flex-col h-dvh flex-grow-1"> <div className="h-full w-[100%] sm:w-[600px] lg:w-[920px] xl:w-[990px] flex justify-between "> <main className="w-full sm:max-w-[600px] min-h-full h-fit border-l-1 border-r-1 border-default-border"> {children} </main> <div className="hidden lg:block lg:w-[290px] xl:w-[350px] h-fit relative"> <div className="flex flex-col w-inherit h-dvh fixed pt-1"> <RightSection /> </div> </div> </div> </div> </div> {modal} </div> ); }; export default AfterLoginLayout; SearchForm에 React.memo를 적용을 해보아도 변하지 않았습니다.(다른 영역, 예를 들어 main이 아닌 양 옆의 영역들에 대해서도 React.memo를 넣었지만 그래도 렌더링이 일어나고 있습니다.) 재랜더링 조건은 부모 컴포넌트가 재랜더링 되거나, props가 바뀌거나, state 변경이 일어났을 때인걸로 알고 있습니다.searchForm에서 Input만 영역에만 영향을 줘야할 것이 분명한데, 전체 영역에서 재랜더링이, 즉 layout.tsx에서 재랜더링이 일으키고 있는것 같습니다. (부모 영역) 혹시 렌더링이 어디까지 일어나는지 확인하는 (즉 최종 부모 컴포넌트까지) 방법이 있나요?그리고 이런 문제가 있을때 어떻게 최적화 할 수 있나요?p.s. 코드상 w-inherit 클래스가 이면 제가 직접 tailwind css utility에 추가하여 기능하도록 만들었습니다.+ 추가console.log()로 재랜더링이 일어나는지 확인해 보았는데 콘솔이 뜨지 않아 재랜더링이 아닌 다른 무슨 활성화(?) 인것 같아 보입니다... 하지만 SearchForm 입력 가지고 무언가 활성화 되는 것 자체가 조금 이해가 되지 않아서... 일단 재랜더링이라고 표현으로 남겨두었습니다...
-
해결됨은행 서버 프로젝트 실습을 통해 배우는 코틀린 마스터 클래스
return@logFor을 사용한 이유가 궁금합니다.
return@logFor ResponseProvider.success("SUCCESS") return @logFor ResponseProvider.success("SUCCESS")BankService.kt 의 메서드에서 return @logFor을 사용하는 이유를 잘 모르겠습니다 ㅠㅠ Logging.logFor이란 람다가 끝났다는 걸 바깥함수에 알려주고 이후 로직이 있다면 해당 로직들도 실행하기 위해서일까요? 코알못이라 흙흙
-
해결됨은행 서버 프로젝트 실습을 통해 배우는 코틀린 마스터 클래스
@Transactional.kt에 대한 효용성 질문
강사님 안녕하세요.코틀린을 자바처럼 쓴 제 자신을 혼내면서(?) 열심히 청강 중입니다. 강의에서 작성하신 Transactional.kt 코드를 보면스프링의 TransactionTemplate을 활용한 명시적 트랜잭션 제어 방식과 큰 차이점이 없어 보입니다. 코틀린 래핑방식으로 사용했을때 어떤 장점이 있는걸까요?제가 생각한 래핑 방식의 장점은 다음과 같습니다.코드 스타일, 네이밍, optional 옵션 추가 등에서 약간 더 자유로움예를 들어 여러 종류의 트랜잭션 처리 규칙(특정 로그, 메트릭, 롤백 조건 등)을한곳에 구현해서 공용유틸로 쓰기 좋고,내부 구현을 추후 TransactionTemplate, PlatformTransactionManager 등 다양한 방식으로 손쉽게 변경 가능 트랜잭션 코드에 특별히 넣어야 할 커스텀 공통로직"이 없다면, 웬만하면 @Transactional / TransactionTemplate만으로 충분하다는 생각입니다. 정답은 없고 팀의 규칙마다 다를것 같아요. 강사님 팀에서는 어떤 방식으로 사용중이신가요? 강의 찍어주셔서 감사합니다앗~!(개인적인 사견인데 말씀하시는 중에 '죄송합니다'는 안하셔도 될것 같아요~!)
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
input checked 질문합니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문내용: checked 초기에는 선택이 되지만checked가 해제된 상태로 돌아가지 않습니다. html <header> <input type="checkbox" id="trigger"> <label for="trigger"> <span></span> <span></span> <span></span> </label> <nav class="header__nav"> <ul class="header__nav-list"> <li><a href="#home" class="header__menu-link">HOME</a></li> <li><a href="#profile" class="header__menu-link">PROFILE</a></li> <li><a href="#projects" class="header__menu-link">WORKS</a></li> <li><a href="#resume" class="header__menu-link">RESUME</a></li> <li><a href="#contact" class="header__menu-link">CONTACT</a></li> </ul> </nav> <a href="#home" class="header__top-btn">TOP</a> </header>css .header__nav { position: fixed; top: 0; left: -100%; list-style: none; z-index: 1000; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } /*checked 안된상태*/input[id=trigger]:checked ~ nav.header__nav { transform: translateX(0); left:0 }input[id=trigger] { display: none; } label[for=trigger] { display: block; width: 25px; height: 24px; position: relative; cursor: pointer; } label[for=trigger] span { position: absolute; top: 0; left: 0; display: block; height: 2px; width: 100%; background: #FFD24C; transition: 0.3s; } label[for=trigger] span:nth-child(1) { top: 0; } label[for=trigger] span:nth-child(2) { top: 50%; } label[for=trigger] span:nth-child(3) { top: 100%; } /* 체크박스 선택 시 */ input[id=trigger]:checked + label[for=trigger] span:nth-child(1) { top: 50%; transform: rotate(45deg); } input[id=trigger]:checked + label[for=trigger] span:nth-child(2) { display: none; } input[id=trigger]:checked + label[for=trigger] span:nth-child(3) { top: 50%; transform: rotate(-45deg); }
-
해결됨이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발
./forest.png 파일은 어디서 다운 받을 수 있을까요?
./forest.png 파일은 어디서 다운 받을 수 있을까요? 보이지 않는 것 같습니다.
-
해결됨[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
작업형2 모의문제2
작업형2 모의문제2 7분 31초에 나오듯이 train, test에서 cols를 삭제하려는데 저는 계속 이런 에러가 발생합니다. 강사님께서 제공해주신 코드를 복붙해도 오류가 발생합니다. 왜 그런걸까요?
-
미해결비전공자도 이해할 수 있는 CI/CD 입문·실전
시크릿 값 확인
안녕하세요 강의 잘 보고 있습니다.settings에서 비밀값 설정시 다시 확인하고 싶을때는 어떻게 확인하나요? 공식 문서에서 찾아봐도 못찾겠네요
-
해결됨은행 서버 프로젝트 실습을 통해 배우는 코틀린 마스터 클래스
@Transactional.kt에 대한 효용성 질문
강사님 안녕하세요.코틀린을 자바처럼 쓴 제 자신을 혼내면서(?) 열심히 청강 중입니다. 강의에서 작성하신 Transactional.kt 코드를 보면스프링의 TransactionTemplate을 활용한 명시적 트랜잭션 제어 방식과 큰 차이점이 없어 보입니다. 코틀린 래핑방식으로 사용했을때 어떤 장점이 있는걸까요?제가 생각한 래핑 방식의 장점은 다음과 같습니다.코드 스타일, 네이밍, optional 옵션 추가 등에서 약간 더 자유로움예를 들어 여러 종류의 트랜잭션 처리 규칙(특정 로그, 메트릭, 롤백 조건 등)을한곳에 구현해서 공용유틸로 쓰기 좋고,내부 구현을 추후 TransactionTemplate, PlatformTransactionManager 등 다양한 방식으로 손쉽게 변경 가능 트랜잭션 코드에 특별히 넣어야 할 커스텀 공통로직"이 없다면, 웬만하면 @Transactional / TransactionTemplate만으로 충분하다는 생각입니다. 정답은 없고 팀의 규칙마다 다를것 같아요. 강사님 팀에서는 어떤 방식으로 사용중이신가요? 강의 찍어주셔서 감사합니다앗~!(개인적인 사견인데 말씀하시는 중에 '죄송합니다'는 안하셔도 될것 같아요~!)
-
미해결데이터 드리븐 그로스 마케팅 - 고객 중심의 문제 해결력 업그레이드
좋은 강의 너무 감사합니다 강의 교안 / 템플렛 요청 드립니다
안녕하세요 현직님FMC 메일 에서 처음 뵙고 인프런 강의까지 구매했습니다. 지금 강의 듣고 있는 중인데 정말.. 주니어 시절부터 들었으면 더 좋았을 것 같습니다 ㅜ링크드인도 구독하여 잘 보고 있고, 다른 책/강의도 나오면 꼭 보고싶습니다 🙂지금 이직을 준비하고 있는데, 좋은 결과 생기면 꼭 공유드리고 싶습니다![리뷰 작성 완료!] 강의 교안 + 템플렛 공유주시면 너무 감사하겠습니다.! (메일 확인했습니다! 감사합니다 :)오늘도 좋은 하루 보내세요 🙂
-
미해결RabbitMQ를 이용한 비동기 아키텍처 한방에 해결하기
DLQ 재시도 로직 처리후 DLQ에 unacked 1건이 남는거에 대해서
안녕하세요.예시 학습 중에 DeadLetterQueue 수동 재시도 관련해서 질문있습니다. http 호출 이후에 추가적으로 DLQConsumer가 호출되지는 않는데, 처리 후 RabbitMQ 콘솔 확인해보니 DLQ에 unacked 한 건이 남아 있었습니다. 제 생각에는 DLQConsumer에서 정상적으로 메시지 소비했으면 마찬가지로 ack 처리 해줘야 하는게 아닌가 싶은데, DLQ에 unacked 상태로 남기는게 의도된 경우가 있을수 있는건지 궁금합니다. order_completed_queue에서는 모두 처리되서 메시지가 보이지 않습니다. 예시 코드@Component @RequiredArgsConstructor public class OrderDLQConsumer { private final RabbitTemplate rabbitTemplate; @RabbitListener(queues = RabbitMQConfig.DLQ) public void process(String message) { System.out.println("DLQ Message Received: " + message); try { String fixMessage = "success"; rabbitTemplate.convertAndSend( RabbitMQConfig.ORDER_EXCHANGE, "order.completed.shipping", fixMessage ); System.out.println("DLQ Message Sent: " + fixMessage); } catch (Exception e) { System.err.println("### [DLQ Consumer Error] " + e.getMessage()); } } }
-
미해결고성능 JPA & Hibernate (High-Performance Java Persistence)
해당 내용에 대한 내용 요약
Hibernate Connection Lifecycle 수업은 해당 내용을 이해가 안되서 몇번 봤지만 결론적으로 디폴트 설정은 save할때 마다 오토커밋 때문에 성능저하가 발생한다. 그러므로 해당 설정 hibernate.connection.provider_disables_autocommit=true 을 통해서 오토커밋을 방지하면 성능이 향상되는걸로 이해 하였고, 일관성 있는 트렉젝션 처리로 @transactional로 관리 한다,, 라고 이해 하였습니다 맞을까요,,? 혹시 해당 내용이 아니면 댓글 부탁드립니다. 덕분에 공부는 많이 되네요,,!
-
미해결김영한의 실전 자바 - 기본편
추상 클래스의 접근 제어자 관련 질문
안녕하세요. 복습을 하면서 질문이 있어서 남겨드립니다. 지금 강의중에서 접근 제어자를 전부 public으로 하셨는데 순수 추상 클래스는 상속 용도로만 사용이 가능한데 public이 아닌 protected로 두는게 더 명확하지 않을까요?
-
미해결스프링 핵심 원리 - 고급편
스프링 빈은 프록시에 등록한후 사용된다고 하셨는데..
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용]@Import로 Aspect를 불러지 않으면, getClass에서 target=class hello.aop.internalcall.CallServiceV0으로 뜨는 이유가 궁금합니다. Aspect를 적용하든 안 하든 프록시로 등록되어야 되지 않을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
라벨이나 chip에 열 개 정도 컬러가 들어갈 때
안녕하세요. 서비스 특성 상, 리스트에 들어가는 chip 컬러가 엄청 다양하게 쓰입니다ㅜ 그럴 경우엔 어떻게 컬러를 묶으면 좋을까요?
-
미해결김영한의 실전 자바 - 고급 1편, 멀티스레드와 동시성
강의에서 말씀하신게 어느 강의에 있는지 궁금합니다
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문 전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용]스레드 풀 로그 관련 얘기하셨는데스프링 강의에서 엑츄에이터.그라파나 얘기를 한적 있다고 하는데 어느 강의에서 어느 부분인가요?
-
해결됨독하게 시작하는 C 프로그래밍
독하게 시작하는 c프로그래밍 구입했는데..
이번에 c언어 공부를 시작하기 위해 독하게 시작하는 c프로그래밍 강의 구입했습니다. 근데 책이 절판이네요ㅜㅜ 책 볼수 있는 방법 있을까요??
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
npm i 오류
안녕하세요, 선생님.프로젝트를 진행하면서 npm install을 실행했는데, 위와 같은 오류가 발생했습니다.이 오류는 npm이 특정 디렉토리를 만들 수 없다는 내용인데, 여러 가지 방법을 시도했지만 해결되지 않았습니다.node_modules 폴더와 package-lock.json 파일을 삭제한 후 다시 설치했으나 여전히 같은 오류가 발생하고 있습니다.npm cache clean --force 명령어로 캐시를 정리한 후에도 문제가 해결되지 않았습니다.혹시 이 문제를 해결할 수 있는 방법에 대해 조언을 주실 수 있을까요?감사합니다.
-
미해결JPA (ORM) 개발자를 위한 고성능 SQL (High-Performance SQL)
소스코드 DB 세팅 가이드가 필요합니다.
소스코드 너무 감사합니다.근데 돌려도 동작이 안되기 때문에 DB 세팅 가이드 같은게 있으면 좋겠네요.강의 내용은 좋은데 ..
-
미해결[AI] 프롬프트만으로 아이디어 구현하기_바이브코딩 입문
local host 접속이 안됩니다
local host 접속이 안됩니다. 막힌 것 같습니다