npm i -D prettier prettier-plugin-tailwindcss 명령어 실행하고 .prettierrc파일생성후 { "plugins": ["prettier-plugin-tailwindcss"] } 코드 작성후 저장하면 원래 적용되던 빈 줄 없애는 것도 적용 안되고 <div className="underline text-7xlfont-bold text-red-500 "> 이부분도 정렬이 안됩니다. format on save 체크되어 있고, default formatter도 prettier-code formatter로 되어 있습니다.
형님 안녕하십니까! 2장 작전2 내용 중에, collected_logs에 모아진 모든 로그파일 내용을 Resource[]에 담고, 이를 flatFileItemReader로 읽기를 위임하는 부분이 있습니다. 아래는 그 중 Resource[] 배열에 해당 로그 내용을 담는 부분입니다. private Resource[] getResources(String date) { try { //String userHome = System.getProperty("user.home"); String userHome = "C:/Users/gyrbs/OneDrive/Desktop"; String location = "file:" + userHome + "/collected_logs/" + date + "/*.log"; //경로 직접 주입이 아닌 Resolver를 통한 url구성은 백슬래쉬가 아닌 /로 해야 인식 PathMatchingResourcePatternResolver resolver = new PathMatchingResourcePatternResolver(); return resolver.getResources(location); } catch (IOException e) { throw new RuntimeException("Failed to resolve log files", e); } } 이에 대해서 gpt한테 몇가지를 물어보았는데, 먼저 배열에 읽어야할 내용을 담고 이를 filterReader로 읽는 과정이 Resource[] 배열에 읽어야할 모든 내용을 모두 저장하고, 이 저장한 내용을 reader가 받아서 청크지향처리라면 청크사이즈만큼 읽고 넘기고 아니면 지금과 같이 일괄적인 읽기를 진행하는 것으로 보였습니다. 그래서 만약에 읽어야할 내용이 매우 커지면 Resource[]라는 배열에 이 모든 내용을 넣기가 어려울 것이고, 강의에서 항상 강조해주시는 JVM무덤, 배치무덤이 되지않을까 하는 생각이 들었습니다. 그래서 이에 대한 방안을 gpt한테 한번 물어보았는데, public class StreamingMultiFileReader<T> extends AbstractItemStreamItemReader<T> { private Iterator<Path> fileIterator; private FlatFileItemReader<T> currentReader; private final Function<Path, FlatFileItemReader<T>> readerFactory; public StreamingMultiFileReader(Path dir, Function<Path, FlatFileItemReader<T>> readerFactory) throws IOException { this.fileIterator = Files.list(dir).iterator(); this.readerFactory = readerFactory; } @Override public T read() throws Exception { if (currentReader == null) { if (!fileIterator.hasNext()) { return null; // 모든 파일 처리 완료 } Path nextFile = fileIterator.next(); currentReader = readerFactory.apply(nextFile); currentReader.open(new ExecutionContext()); } T item = currentReader.read(); if (item == null) { // 파일 끝 currentReader.close(); currentReader = null; return read(); // 다음 파일로 넘어감 } return item; } } 이런 방법이 있다고 하는데(StreamingMultiFileReader로 deletegate 처리없이, 파일 하나하나씩 바로바로 처리해나가는 과정), 파일 하나하나씩 읽어들이면서 더이상의 파일이 없을때까지 순회하여 메모리부담은 없다고는 하였습니다. 혹시, 이 방법 말고도 청크지향처리를 이용해서 청크사이즈 만큼 파일, 혹은 파일 내부의 record를 읽고 넘기는, 그리고 이 과정을 모든 파일에 대해 순회하는 방식은 없을지 질문드려보고자 합니다! 실무에서 사용하는 방법이 궁금해서 질문드리게 되었습니다! 감사합니다.
안녕하십니까 형님! 2강 작전2 : 분산 서버 로그 처형 작전 관련해서, 실무적으로 어떠한 방향으로 접근하는 것이 좋을지 의문이 생겨서 질문 드려봅니다! 제가 윈도우 환경에서 실행하다보니, 자료에 기술된 cli를 윈도우 환경으로 바꾸는데 많은 비용을 소모하였습다. 특히 이번 내용의 경우, 단순 개행문자 및 OS간 인식문제를 넘어서, 명령어를 아예 윈도우 환경에 맞게 변경을 해야한다는 점에서 다소 힘이 많이 들었던 것 같습니다. 뿐만 아니라, 윈도우 cmd 환경에서의 실행을 고려해서 cmd -c의 명령어를 추가해준다든지, 리눅스의 mkdir -p가 먹히지 않으므로 mkdir를 &&로 이어서 실행하게끔 한다든지..(이러다보니 collected_logs 폴더도 최초부터 존재하지 않아야 정상 실행이 가능한 환경적 제약사항까지 고려해야 하였습니다) 전체적으로 환경의 차이를 많이 느끼고 그만큼의 비용도 일전보다는 훨씬 많이 소모된 느낌이 있었던 내용이었습니다. //-p 옵션은 윈도우에서 안먹힘..따라서 collected_logs라는 디렉토리 생성(mkdir)은 처음부터 존재하지 않아야 한다. //SystemCommandTasklet -> 반드시 cli 명령어 작성 필요 @Bean @StepScope public SystemCommadTasklet mkdirTasklet( @Value("#{jobParameters['date']}") String date) throws IOException { SystemCommandTasklet tasklet = new SystemCommandTasklet(); // //tasklet.setWorkingDirectory(System.getProperty("user.home")); //실행환경은 batch 명령어 작성환경에 상관없이 무조건 cmd //경로직접주임은 반드시 백슬래쉬 tasklet.setWorkingDirectory("C:\\Users\\gyrbs\\OneDrive\\Desktop"); String collectedLogsPath = "collected_logs\\" + date; String processedLogsPath = "processed_logs\\" + date; //String collectedLogsPath = String.format("collected_logs\\%s", date); //String processedLogsPath = String.format("processed_logs\\%s", date); String command = String.format("mkdir %s && mkdir %s", collectedLogsPath, processedLogsPath); // //tasklet.setCommand("mkdir", "-p", collectedLogsPath, processedLogsPath); //tasklet.setCommand("cmd", "/c", "mkdir", collectedLogsPath); tasklet.setCommand("cmd", "/c", command); tasklet.setTimeout(3000); // 3초 타임아웃 return tasklet; } @Bean @StepScope public SystemCommandTasklet scpTasklet( @Value("#{jobParameters['date']}") String date) { SystemCommandTasklet tasklet = new SystemCommandTasklet(); //tasklet.setWorkingDirectory(System.getProperty("user.home")); String rootDirectory = "C:\\Users\\gyrbs\\OneDrive\\Desktop"; tasklet.setWorkingDirectory(rootDirectory); String collectedLogsPath = String.format("collected_logs\\%s", date); StringJoiner commandBuilder = new StringJoiner(" && "); for (String host : List.of("localhost", "loan", "pay")) { //String command = String.format("scp %s:~\\logs\\%s.log .%s\\%s.log", // host, date, processedLogsPath, host); String src = String.format("logs\\%s.log", date); String dest = String.format("%s\\%s.log", collectedLogsPath, host); commandBuilder.add(String.format("copy %s %s", src, dest)); } //String src = String.format("logs\\%s.log", date); //String dest = String.format("%s\\%s.log", collectedLogsPath, "localhost"); tasklet.setCommand("cmd", "/c", commandBuilder.toString()); tasklet.setTimeout(10000); //10초 타임아웃 return tasklet; } 이런 느낀점이 많다보니, 이번 내용을 진행하면서, SystemCommandTasklet을 실무적으로 어떻게 활용하면 좋을지 의문점이 생겼습니다. 첫번째는, 단순히 배치를 실행하는 환경이 리눅스라면, 리눅스 환경은 어차피 한동안 안고쳐질거니까, 윈도우라면 그것대로 윈도우 배치 환경은 거의 변경이 없겠지?라는 생각으로 단순히 SystemCommandTasklet으로 구성해야겠네!라고 생각하는게 맞는지 일단 의문이 들었습니다. 배치라는게 이러한 환경적 독립성을 유지하지 않고, 배치실행환경에 맞게 일단 구성하는게 맞을까요? 물론 이 내용이 SystemCommandTasklet을 배우는데 중점이 있을 수 있겠지만, 이번에 꽤 많은 소모를 느껴서 질문드리게 되었습니다! 두번째로, SystemCommandTasklet이 아닌 Tasklet을 사용하여 아래와 같이 시스템에 의존하지 않고 모든 시스템에 적용이 가능한 Java API버전으로 구성하였는데, 빌드 성공하긴 했습니다. //-p 옵션은 윈도우에서 안먹힘..따라서 collected_logs라는 디렉토리 생성(mkdir)은 처음부터 존재하지 않아야 한다. //tasklet -> return (con, ch) @Bean @StepScope public Tasklet mkdirTasklet( @Value("#{jobParameters['date']}") String date) throws IOException { return ((contribution, chunkContext) -> { Path desktop = Paths.get("C:\\Users\\gyrbs\\OneDrive\\Desktop"); Path collected = desktop.resolve("collected_logs").resolve(date); Path processed = desktop.resolve("processed_logs").resolve(date); Files.createDirectories(collected); Files.createDirectories(processed); return RepeatStatus.FINISHED; }); } 이렇게 처음부터 시스템에 상관없는(상관없이 구동이 가능한) 로직을 구현하는게 유지보수적으로도 맞지 않을까..하는 생각이 들었습니다. 형님께서는 실무적으로 이를 적용할때 어떠한 방향으로 구성하시는지, 제가 지금 의문이 드는게 맞는것인지.. 궁금해서 질문드려봅니다!(아니면 만약 SystemCommandTasklet과 같이 시스템에 의존적인 구현이 필요하다면, 이 경우는 환경적으로 바뀔 가능성이 현저히 적다던가..이러한 특수적인 상황적 조건이 있을때 사용하실까요?) 제약사항이 생각보다 커져서 배꼽이 더 커지는 상황이었기에, 형님께 여쭤보고자 하였습니다! 감사합니다!
그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 을 듣고 있는데요 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 있습니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : 구체적인 에러 내용 [사진3] 스크롤은 적용이 안 된 것 같은데요, 상품이 2개 뿐이라 스크롤이 없는 건가요? [사진4] 사진 3 에 대한 구체적인 에러 ----> 어떻게 에러를 해결 할 수 있을까요 ? 안드로이드 스튜디오에서 상품 정보를 불러오지 못하는 것에 대해 서 어떻게 해결해야 할 지 차근 차근 잘 알려주셨으면 좋겠습니다 . 그리고 마지막 질문은 안드로이드 애물레이터가 잘 되는지 확인 하려면 grab-market-server에서 npm start를 해준 뒤 확인하면 되는건가요? 아니면 grab-market-mobile에서 npm start를 해준 뒤 a(=Open Android)를 누르면 되는 건가요? 아니면 둘다 동시에 npm start를 해주는 건가요? 그리고 아래에는 grab-market-mobile 폴더의 App.js 제 소스 코드를 아래에 첨부하겠습니다. import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView } from "react-native"; import BasketballImage from "./assets/products/basketball1.jpeg"; import Avatar from "./assets/icons/avatar.png"; import {API_URL} from "./config/constants"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]) React.useEffect(()=>{ axios.get(`${API_URL}/products`).then((result)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) },[]) return ( <View style={styles.container}> <ScrollView> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard}> <View> <Image style={styles.ProductImage} source={{uri: `${API_URL}/${product.imageUrl}`,}} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={Avatar} /> <Text style={styles.productSellerName} >{product.seller}</Text> </View> <Text style={styles.productDate}>{dayjs(product.createdAt).fromNow()}</Text> </View> </View> </View>); }) } </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: 32, }, productCard: { width: 320, borderColor: 'rgb(230,230,230)', borderWidth:1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, ProductImage :{ width: '100%', height: 210 }, productContents : { padding: 8 }, productSeller : { flexDirection: 'row', alignItems: 'center' }, productAvatar: { width:24, height:24, }, productFooter: { flexDirection: 'row', justifyContent:'space-between', alignItems: 'center', marginTop: 12, }, productName : { fontSize: 16 }, productPrice: { fontSize: 18, fontWeight: '600', marginTop: 8 }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems:"center", }, headline : { fontSize: 24, fontWeight: "800", marginBottom:24 } }); 그랩님의 답변을 기다립니다.
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
안녕하세요 노원두님 학습 잘 들었어요. 덕분에 AI 바이브코딩에 대해서 좀 더 깊이 알게 되었습니다. 본 강의 말고, [Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma) 강의에서는 "특별추가강의 - supabase"가 있던데, 여기에는 업데이트가 안되려나요? 이 부분만 별도로 들을려고 중복되는 내용 강의를 새로 다시 구매하기에는 가격이 좀 부담되서.. 아니면 별도 강의로 구성되어 들을 수 있는 지도 확인 부탁 드리며, 업데이트 해주시면 감사하겠습니다. 그리고 백엔드 관련하여 AI 바이브코딩 강의도 준비하고 계시는 지요? 프론트엔드 뿐만 아니라 관리자 페이지까지 설계할 수 있는 AI 바이브코딩으로 할 수 있는 강의가 있으면 꼭 듣고 싶습니다. 답변 부탁 드려요.
1. 현재 학습 진도 몇 챕터/몇 강을 수강 중이신가요? 4-6. 트랜잭션 실습 - 쿠폰 동시성 문제 해결 여기까지 이해하신 내용은 무엇인가요? 2. 어려움을 겪는 부분 똑같이 멀티스레드 환경인데 successCount 는 AtomicInteger로 세팅되어 있고, currentParticipants 는 AtomicInteger가 아닌 이유가 궁금합니다. 이렇게 되면 Java단에서부터 currentParticipants++할 때 동시성 문제가 발생하지 않을까요? 3. 시도해보신 내용 GPT에 물어보니 AttributeConverter 사용하면 JPA에서도 AtomicInteger를 쓸 수 있다고 합니다.
await render(<TextField className={'my-class'} />); expect(screen.getByPlaceholderText('텍스트를 입력해 주세요.')).toHaveClass( 'my-class', ); 이렇게 props를 넘겨줄때 동일하게 작은 따옴표로 넘겨주거나 expect에 들어가는 문자열을 작은 따옴표로 입력을 해야 테스트전 린트에서 잡히는 에러가 안나네요;;
안녕하세요 강사님 강의를 수강하는 학생입니다. 무한 스크롤링은 두 번째부터 보통 끝쪽 id 에 데이터를 기반으로 데이터를 불러오는 방식이 보통 커서 기반 페이지네이션과 큰 차이가 없는 건가요? (claude 나 ) 블로그 보면서 이것도 비슷한 개념인 거 같아서 질문 드립니다. @Entity @Table( name = "post", indexes = { @Index( name = "idx_post_board_created_id", columnList = "board_id, created_at DESC, post_id DESC" ), @Index( name = "idx_post_created_id", columnList = "created_at DESC, post_id DESC" ) } ) @Getter @NoArgsConstructor public class Post { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "post_id") private Long id; @ManyToOne(fetch = FetchType.LAZY) } 이렇게 엔티티에 인덱스를 만들어서 사용하는지 궁금합니다. 강의에서 처럼 SnowFlake도 보통 저렇게 인덱스를 만들어서 활용하는지도 궁금합니다.
(네트워크 필터 설정을 잘못했던 게 문제였습니다. 😂 감사합니다.) 안녕하세요, 이정환 강사님. 강의 잘 듣고 있습니다. (6.10) 비밀번호 재설정 구현 강의에서, 인증 메일 주소를 복사해서 붙여넣기 하니까 Network 탭에 해당 리퀘스트만 들어오고 'verify~'로 시작하는 리퀘스트는 없더라구요. 링크에 접속했을 때 리디렉션은 잘 됩니다. 200 ok인 걸로 봐서 정상 작동하는 것 같긴 한데, 문제가 있는 걸까요? 감사합니다.
