inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

클래스 vs 인라인 스타일 성능 질문

해결됨

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

안녕하세요. 좋은 강의 감사합니다! 26. 클래스와 스타일을 다루는 가장 강력한 방법 – classList, style, 그리고 리플로우까지 에서 인라인 스타일로 스타일을 바꾸면 리플로우/리페인트가 자주 발생할 수 있어 성능에도 안 좋을 수 있다고 설명하셨는데요. 예시로 들어주신 코드에서는 어차피 자바스크립트 엔진이 싱글 스레드라 클래스든 인라인 스타일이든 모두 반영된 후에, 리플로우/리페인트가 발생하기 때문에 성능적으로는 유의미한 차이가 없을 것 같은데요. 좀 더 구체적인 설명을 해주실 수 있을까요? ChatGPT 답변도 같이 첨부합니다. https://chatgpt.com/share/69181628-34d0-8007-8e81-02401c649370

  • HTML/CSS
  • javascript
  • react
  • dom
  • frontend
hans 댓글 2 좋아요 0 조회수 109

StatefulWidget 실습 에러가 발생합니다.[해결완료]

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 오타가 있었네요 ^^;; 해결 되었습니다. 안녕하세요. StatefulWidget 생성해보기 강의의 코드를 그대로 작성했는데요. 첨부 사진과 같은 에러가 발생합니다. 코드 이상은 없는듯 한데, 저장하니 에러가 발생합니다.

  • flutter
  • 클론코딩
rimmomos 댓글 1 좋아요 0 조회수 83

[재질문][그랩님 답변 부탁드립니다]101강

미해결

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

그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 에서 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 이어 아래의 추가 사진2 에서 보시다시피 502 Bad Gateway가 발생 하여 어떻게 해결 할 수 있는지 에 대해 알고 싶어서 질문 드립니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와 무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다. 이어서 중간에 아래 사진 과 같은 절차 를 겪었었는데요, 필요할 것 같아 참고 로 스샷을 첨부합니다. axios 설치 후 grab-market-mobile에서 npm start하니 다른 프로세스에의해 포트 8081이 사용 되고 있는데 8082 포트를 대신 쓸거냐는 질문 에서 y or n 하라는데 y하게 되었는데요 , 이 다음에 어떻게 해야 그랩님 강의와 똑같이 잘 작동할 수 있을까요? 더불어서 또 다른 에러가 발생하는데요, 또 다른 에러는 cmd에서 ngrok http 8080 입력 후 포워딩 주소 를 크롬브라우저에 복사 후 붙여넣으면 , 이전 밑에 질문에서는 정상 작동되었으나 지금 은 아래와 같이 바뀐 에러 가 발생 하였습니다. 해결법을 모르기에 아래에 사진을 첨부합니다. 꼭 답변 부탁 드립니다. 그랩님의 답변 부탁 드립니다.

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

[ typoooo ] 1장. 작전3: Spring Batch Listener

미해결

죽음의 Spring Batch: 새벽 3시의 처절한 공포는 이제 끝이다.

JobListener 를 구현하면서 동적으로 executionContext 를 밀어 넣을때 설명이 내가 이해한게 맞다면 오타가 발생한 듯 하다. 이렇게 InfiltrationPlanListener를 JobBuilder 의 listener() 메서드로 등록해주면 beforeStep() 메서드에서 동적으로 생성한 데이터를 각 Step에서 참조할 준비가 완료된다. 해당 문구의 작업은 JobExecutionListener 로 동작한 부분으로 beforeStep 이 아닌 beforeJob 에 의해서 동적으로 생성되는게 맞지 아니한가?!

  • java
  • spring
  • spring-boot
  • spring-batch
  • backend
이상민 댓글 2 좋아요 1 조회수 66

useSignInWithPassword에 넘기는 콜백 VS mutate의 두번째 인자 사용

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요, 선생님. 강의 잘 듣고 있습니다:) 먼저 클린코드 작성 방법까지 알려주시면서 생각없이 따라 치지 않게 해주셔서 감사합니다. 이번 챕터에서 useSignInWithPassword 에 넘기는 콜백을 통해 성공, 에러 등의 처리를 진행하셨습니다. 이걸 보고 이전에 진행했던 프로젝트 리팩토링 부분이 생각나서 잠시 보고왔는데, 당시에는 mutate 함수에서 자체적으로 제공하는 두번째 인자로 콜백을 넘겨주는 기능을 활용했더라구요. mutate: (variables: TVariables, { onSuccess, onSettled, onError }) => void 선생님이 알려주신 방식과 이 방식의 차이점을 알고 싶습니다. 그리고 차이가 없다면 어떤 방식이 조금 더 효율적일지 선생님 의견이 궁금합니다. 이 방식을 사용했을 때 콜백 타입 정의는 제대로 이루어집니다. 다만, 이렇게 하면 협업 시 코드 스타일 통일이 안될 것 같다는 생각이 들긴 합니다. 읽어주셔서 감사합니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
wonza4372 댓글 2 좋아요 0 조회수 103

spring batch 오픈소스

미해결

죽음의 Spring Batch: 새벽 3시의 처절한 공포는 이제 끝이다.

킬구형 ㅎㅇ 요즘 형 spring-batch 오픈소스 이슈에서 잘 보고 있어. 진짜 형 대단한 거 같아. 형 그런데 나는 궁금한 게 있어 일단 이번에 나도 간단한 오타 수정으로 기여를 하기는 했는데 나도 이슈를 한번 찾아보고 싶은데 감이 안 잡혀서 형은 보통 이슈를 어떻게 찾는지, 아니면 오픈소스를 볼 때 팁 같은 게 있는지 궁금해.

  • java
  • spring
  • spring-boot
  • spring-batch
  • backend
퓨퓨 댓글 2 좋아요 1 조회수 113

저 강의 들으면서 작성한 코드를 github에 올려도 되나요?

해결됨

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

안녕하세요. 좋은 강의 들으며 많은 것을 배우고 있어서 감사히 생각하고 있습니다. 그런데 강의 들으면서 작성한 코드 (예를 들면 감정 일기장 코드)를 제 github repository에 public으로 올려도 되나요? 답변해주시면 감사합니다.

  • javascript
  • react
  • node.js
  • 카카오공채-개발
김동욱 댓글 2 좋아요 0 조회수 102

사업자 등록 번호가 없는 경우는 어떻게 하죠?

미해결

스프링 부트와 리액트로 구현하는 소셜 로그인

사용자 등록 번호가 없습니다. 거의 대부분의 수강생이 없을거라고 생각 되는데 이 경우는 어떻게 해야하는지 설명 부탁드립니다.

  • react
  • java
  • spring-boot
  • jpa
  • spring-security
박도현 댓글 2 좋아요 0 조회수 284

리액트 컴포넌트 분리 기준

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요! 한입 타입스크립트부터 강의 잘 듣고 있습니다. 현재 퍼블리셔로 일하고 있는데요, 선택자형 CSS( .container .section { ... } ) 방식에 익숙하다 보니, reset-password 와 forget-password 처럼 UI가 거의 동일한 페이지에서 쓰이는 컴포넌트들을 분리해서 쓰고 싶다는 생각이 듭니다. 예를 들어, function PageTitle({ children }: { children: ReactNode }) { return <div className="text-xl font-bold">{children}</div>; } 이런 식으로 스타일 관점에서 컴포넌트를 분리하는 것 은 리액트 환경에서는 지양되는 방식인지 궁금합니다.

  • react
  • typescript
  • react-query
이민혁 댓글 2 좋아요 0 조회수 185

자바 로드맵 선택 질문

미해결

김영한의 실전 자바 - 중급 2편

안녕하세요, 강사님. 현재 자바 중급 2편을 이번 주 내로 수강 완료할 예정인 수강생입니다. 인프런에 올라와 있는 ‘김영한의 자바 공부법 로드맵’에서는 자바 고급 1, 고급 2를 뒤로 미루고 스프링 강의로 먼저 넘어가는 흐름을 추천해 주셨는데, 영상으로 올려주신 ‘김영한의 실전 자바 로드맵’에서는 자바 고급 1은 6강까지, 자바 고급 2는 전부 수강한 뒤 스프링으로 넘어가는 것이 최적이라고 말씀해 주셔서 두 로드맵 중 어떤 흐름을 따르는 것이 좋을지 고민되어 질문드립니다. 저의 목표는 다음과 같습니다. 올해 안에 「스프링 핵심 원리 - 기본편」까지 들어가는 것 스프링을 활용해서 직접 무언가를 개발해 보는 것 다만, 스프링을 빨리 배우고 싶으면서도 자바 기본기와 객체 지향에 대한 공부를 소홀히 하고 싶지는 않아서 인프런 로드맵처럼 자바 고급 1, 2를 건너뛰고 스프링으로 넘어가도 괜찮은 선택인지 확신이 서지 않습니다. 제 상황에서는 어느 로드맵 흐름을 따르는 것이 더 좋을지,자바 고급 1, 2를 어느 정도까지 수강한 뒤 스프링으로 넘어가는 것이 좋을지 추천해 주실 수 있을까요?

  • java
  • 객체지향
  • 코딩-테스트
  • 알고리즘
배승준 댓글 2 좋아요 0 조회수 154

OAuthAttributes와 CustomOAuth2User의 차이

미해결

스프링 부트와 리액트로 구현하는 소셜 로그인

OAuthAttributes와 CustomOAuth2User 간의 차이가 궁금합니다. OAuthAttribute는 google로부터 받은 사용자 정보를 우리가 원하는 대로 확장 가능하게 하는 DTO라고 말씀해주셨고, CustomOAuth2User도 google로부터 받은 데이터 외에 별도의 사용자 정보를 추가하는 용도라고 말씀해주셨는데, 두 설명이 같은 의미처럼 느껴집니다. 두 클래스가 어떤 차이가 있는 건가요?

  • react
  • java
  • spring-boot
  • jpa
  • spring-security
박도현 댓글 2 좋아요 0 조회수 129

혹시 리액트네이티브 관련해서 좋은 참고서도 있을까요??

미해결

React Native with Expo: 제로초에게 제대로 배우기

강의 내용과는 별개로, 개인적으로 공부를 더 하고 싶은 부분이 있어 도움을 요청드립니다. 현재 출퇴근 시간에 활용할 목적으로 실습보다는 내용이나 이론이 탄탄한 개발 서적을 찾고 있습니다. 예를 들면, JS Deep Dive 처럼 언어의 원리나 깊은 내용을 다루는 책을 선호합니다. 강의 영상이나 소리 대신 책으로 글을 읽으며 내용을 훑어보고, "이런 기능도 있구나, 이럴 땐 이렇게 하는구나" 하며 지식을 확장 하는 용도로 활용하고 싶습니다. 혹시 추천해주실 만한 서적이 있을까요?

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
찬우 이 댓글 1 좋아요 0 조회수 140

마리아 db 설치중 포트를 이미 사용중이라고 합니다

미해결

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

TCP Port를 이미 쓰고있어서 다른 포트로 바꾸라고 하는데 포트를 바꿔도 문제가 없나요?

  • react
  • typescript
  • spring-boot
  • jpa
  • jwt
dbwjddms36 댓글 2 좋아요 0 조회수 143

Custom 레프직토리 형식

미해결

실전! 코틀린과 스프링 부트로 도서관리 애플리케이션 개발하기 (Java 프로젝트 리팩토링)

안녕하세요 강사님 취준생으로써 강의 들으면서 궁금한 점 질문 드립니다. 1.CustomRepository형식 과 Impl 형식이 보통 어떨때 자주 쓰이는 지 궁금해서 질문 드립니다. 2.JPA 에서 작성한 것들을 Querydsl 로 바꿀때가 그럼 ByXxx 에서 조인조건이 두개이상 들어가면 무조건 Querydsl 자바코드로 바꾸어 주는 게 좋을까요?

  • java
  • spring
  • kotlin
  • spring-boot
  • 리팩터링
KMC 댓글 2 좋아요 0 조회수 88

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

해결됨

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

그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 에서 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 이어 아래의 추가 사진2 에서 보시다시피 502 Bad Gateway가 발생 하여 어떻게 해결 할 수 있는지 에 대해 알고 싶어서 질문 드립니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와 무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다. 그랩님의 답변을 기다립니다.

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

응시권 문의

미해결

개발 역량 + 자격증까지, Java로 PCCP 자격증 준비하기

응시권을 신청하면 올해 무조건 시험 신청을 해야하는건가요? 사용기간이 있는걸까요?

  • java
  • 코딩-테스트
  • 알고리즘
  • data-structure
baeksong.kwon 댓글 2 좋아요 0 조회수 105

감정일기장 최종완성본 링크는 어디에있나요??

해결됨

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

감정일기장 최종완성본 링크는 어디에있나요??

  • javascript
  • react
  • node.js
  • 카카오공채-개발
yuljeonjw 댓글 2 좋아요 0 조회수 79

Video Player 프로젝트에 대한 추가 질문

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

선생님 강의 너무 잘 듣고 있습니다. video_player 프로젝트 관련 내용 모두 확인했고, 여기에 하나만 간단하게 비디오에서 나가기 버튼 을 추가해보았습니다. 일단 제가 작성해본 코드부터 공유하겠습니다. 테스트 상 로고화면으로는 잘 돌아갑니다. _VideoPlayerState 의 dispose() 함수도 정상적으로 실행돼요. 다만 로직이 실제 앱에서 실행되어도 충분히 괜찮은 로직일지, 혹은 더 안전한 방법이나 기타 필요한 수정사항이 있다면 알려주시면 감사하겠습니다. _HomeScreenState 내부 class _HomeScreenState extends State<HomeScreen> { // bool showVideo = false; XFile? video; @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black87, body: video == null ? _VideoSelector(onLogoTap: openPicker) : _VideoPlayer( video: video!, onImageIconPressed: openPicker, onExitIconPressed: exitPlayer, // 나가기 버튼 함수 ), ); } void openPicker() async { // setState(() => showVideo = true); /// ImageSource.gallary: 사진 앱에 저장된 이미지/비디오 파일 선택 /// ImageSource.camera: 디바이스가 즉시 촬영한 이미지/비디오 파일 선택 const source = ImageSource.gallery; /// pickVideo(): 사용자 비디오 파일을 선택 final picked = await ImagePicker().pickVideo(source: source); // print(picked); setState(() => video = picked); } /// ↓↓ 여기에 비디오에서 나가기 로직 추가 void exitPlayer() { setState(() { // print('info: exitIconButton 클릭'); video = null; }); } } _VideoPlayerState 내부 class _VideoPlayerState extends State<_VideoPlayer> { late VideoPlayerController _videoPlayerController; bool showButton = true; // ... /// 위젯 상태 제거 @override void dispose() { _videoPlayerController.dispose(); print('info: 비디오 플레이어 종료 중..'); super.dispose(); } @override Widget build(BuildContext context) { final VideoPlayerValue videoPlayer = _videoPlayerController.value; // final position = videoPlayer.position; // final duration = videoPlayer.duration; return Center( child: AspectRatio( aspectRatio: videoPlayer.aspectRatio, child: GestureDetector( onTap: () => setState(() => showButton = !showButton), child: Stack( children: <Widget>[ VideoPlayer(_videoPlayerController), /// 영상 화면 커버 if (showButton) Container( width: double.infinity, height: double.infinity, color: Colors.black.withAlpha(128), ), /// 재생/중지와 뒤로&앞으로 버튼 if (showButton) _PlayButton( isPlaying: videoPlayer.isPlaying, onReversePressed: onReversePressed, onPlayPressed: onPlayPressed, onForwardPressed: onForwardPressed, ), /// 하단 슬라이더 if (showButton) _BottomSlider( position: videoPlayer.position, duration: videoPlayer.duration, onSliderMoved: onSliderMoved, ), /// 화면 상단 버튼 if (showButton) _TopButtons( // ← 여기를 2개의 버튼으로 확장 onExitPressed: widget.onExitIconPressed, onImagePressed: widget.onImageIconPressed, ), ], ), ), ), ); } _TopButtons 내부 class _TopButtons extends StatelessWidget { final VoidCallback onImagePressed; final VoidCallback onExitPressed; const _TopButtons({ required this.onExitPressed, required this.onImagePressed, }); @override Widget build(BuildContext context) { return Positioned( left: 4, right: 4, top: 0, // Row로 감싸고 왼쪽에 '나가기' 버튼 추가 child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <IconButton>[ // 나가기 버튼 IconButton( onPressed: onExitPressed, icon: Icon(Icons.chevron_left, color: Colors.white), ), // 다른 영상 선택 버튼 IconButton( onPressed: onImagePressed, icon: Icon(Icons.photo_camera_back, color: Colors.white), ), ], ), ); } }

  • flutter
  • 클론코딩
  • video_player
Ryu 댓글 0 좋아요 0 조회수 71

lovable cloud 에서 카카오 로그인이 지원이 안됩니다.

해결됨

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

[진도] 실용적인 도구 만들기 1: 개인 비용 관리 앱 (Supabase, 로그인 기능) [질문] 강의에서는 supabase 를 사용해서 카카오 로그인을 추가 했으나 현재 lovable 에서는 업데이트가 되어서 ai 로 명령시 supabase 를 추가로 연결 하지 않고 자동 Lovable Cloud 기능을 탑재합니다. 이경우 카카오 기능 추가를 명령하면 아래와 같이 지원이 안된다고 나옵니다. 그럼 supabase 추가로 연결 해야하나요? 카카오 로그인은 Lovable Cloud에서 기본 지원하지 않습니다. 현재 사용 가능한 소셜 로그인은 다음과 같습니다: 지원되는 소셜 로그인: Google ✅ (현재 활성화됨) GitHub Facebook Apple Discord Twitter Slack Spotify 카카오 로그인을 원하시면 커스텀 OAuth 구현이나 카카오 REST API를 직접 연동해야 하는데, 이는 복잡한 작업입니다. 추천 방안: 구글 로그인 사용 (대부분의 한국 사용자가 구글 계정 보유) 이메일/비밀번호 로그인 사용 카카오 로그인은 Lovable Cloud에서 기본 지원하지 않습니다. 현재 사용 가능한 소셜 로그인은 다음과 같습니다: 지원되는 소셜 로그인: Google ✅ (현재 활성화됨) GitHub Facebook Apple Discord Twitter Slack Spotify 카카오 로그인을 원하시면 커스텀 OAuth 구현이나 카카오 REST API를 직접 연동해야 하는데, 이는 복잡한 작업입니다. 추천 방안: 구글 로그인 사용 (대부분의 한국 사용자가 구글 계정 보유) 이메일/비밀번호 로그인 사용

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
winwin 댓글 2 좋아요 0 조회수 182

제로초님께서는 Nativewind는 사용안하지는지 궁금합니다.

미해결

React Native with Expo: 제로초에게 제대로 배우기

React/Next.js 프로젝트에서 Tailwind를 많이 사용하는 추세인데, 이와 매우 유사한 React Native 의 Natviewind 라는게 있더군요. Nativewind를 사용하면 기존 Tailwind에서 처럼 className으로 빠르게 스타일링할 수 있고 웹과 모바일 간 일관된 스타일 코드를 유지할 수 있는 장점이 있는 것 같습니다. React Native 기초 강의이므로 기본 React Native CSS 사용을 통해 구현하는 방식을 보여주신 것인지 궁금합니다.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
JI HUN LEE 댓글 2 좋아요 1 조회수 370

인기 태그

인프런 TOP Writers

주간 인기글