inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

조건문, 반복문, 커스텀 훅 사용 전에 Hook 사용 시 에러 미발생

해결됨

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

안녕하세요 강사님 조건문, 반복문에서 또는 커스텀 훅을 사용하기 전에 Hook을 사용하였을 때는 함수 컴포넌트 외부에서 호출했을 때 오류가 발생하는 것 처럼 별다른 오류가 발생하지 않는데 말씀하신 내용으로는 권장사항인걸까요? 조건문, 반복만에서 Hook 호출 시 import { useState } from "react"; const HookExam = () => { //const state = useState(); if (true) { const state = useState(); console.log(state); } for (let i=0; i<1; i++) { const state = useState(); console.log(state); } return <div>HookExam</div> }; export default HookExam; 커스텀 훅 만들기 전에 Hook 호출 시 import { useState } from "react"; function getInput() { const [input, setInput] = useState(""); const onChange = (e) => { setInput(e.target.value); console.log(e.target.value); }; return [input, onChange]; } const HookExam = () => { const [input, onChange] = getInput(); return ( <div> <input value={input} onChange={onChange}/> </div> ); }; export default HookExam; 함수 컴포넌트 외부에서 Hook 호출 시

  • javascript
  • react
  • node.js
강프로그래머 댓글 2 좋아요 0 조회수 180

[17-3. Redux로 데이터 관리]에서 Store에 슬라이스 리듀서 추가하기 질문합니다.

미해결

실무 중심! FE 입문자를 위한 React

Redux 공식 사이트의 튜토리얼에 따르면, 슬라이스에서 리듀서를 익스포트 하고 스토어에 리듀서를 다음 예제와 같이 등록하는 데.. // surveySlice.js ... 생략 ... export default surveySlice.reducer; // surveySlice 리듀서를 익스포트 하고서.. // /stores/index.js import surveyReducer from './survey/surveySlice'; export default configureStore({ reducer: { survey: surveyReducer // 리듀서 등록 } }) 강사님 같은 경우는 아래와 같이 리듀서 등록에 직접 surveySlice를 추가했는데 리덕스 튜토리얼과 차이가 뭔가요?? import {surveySlice} from './survey/surveySlice'; export default configureStore({ reducer: { survey: surveySlice // 슬라이스 등록 } })

  • react
  • redux
  • node.js
  • swr
Codingbear 댓글 1 좋아요 0 조회수 206

이 로그는 히카리 설정 누락인가요 ?

미해결

실전! Querydsl

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 여기에 질문 내용을 남겨주세요. 영한님 query dsl 환경설정을 마쳤습니다.. clean 과 build 수행가능하고.. 어플리케이션 run을해보면 Database JDBC URL [Connecting through datasource 'HikariDataSource (HikariPool-1)'] Database driver: undefined/unknown Database version: 2.3.232 Autocommit mode: undefined/unknown Isolation level: undefined/unknown Minimum pool size: undefined/unknown Maximum pool size: undefined/unknown 로그가나오는데 나머지 로그를 봐서는 문제없어 보이는데 이게 뭔지 궁금합니다 구글링해보니 히카리 설정을 안줬다고 해서 hikari: maximum-pool-size: 10 connection-timeout: 5000 connection-init-sql: SELECT 1 validation-timeout: 2000 minimum-idle: 10 idle-timeout: 600000 max-lifetime: 1800000 이렇게 설정을 줘봤는데 똑같은 로그가 나와서... 궁금해서 질문드립니다.. 이거환경설정 정말 ㅋㅋㅋ 손많이가네용..

  • java
  • jpa
김우철 댓글 2 좋아요 1 조회수 606

문자열 풀 작동방식 및 추가 질문

미해결

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

[질문 내용] 여기에 질문 내용을 남겨주세요. 처음에 클래스가 로드될 때, 코드를 훑어보며 문자열 리터럴을 사용하면, 미리 문자열 풀에 문자열 리터럴에 대한 인스턴스를 생성하고, 중복이 발견되면 문자열 풀을 살펴보며 중복이 있으니 문자열 풀에 인스터를 생성하지 않는다. 그리고 나중에 로드된 후, 실행될 때는 String 클래스 변수에 문자열 풀에 해당하는 참조값을 주기때문에, 여러 String클래스 변수가 같은 리터럴을 가진다면, 같은 참조값을 가져 ==연산자에서 비교하면 true가 나온다. 맞나요? 클래스가 로드되는 시점에 코드를 훑어보며, 문자열 풀에 "12345"라는 인스턴스가 있다고 가정하고, 나중에 코드가 실행될때 중간에 String str = "123" +" 45";라는 코드가 있으면, 새로운 객체를 만들어 str에 참조값을 넣어주는건가요? 아니면 문자열 풀에 같은 문자열이 있으니까 문자열 풀에 해당하는 인스턴스의 참조값을 주나요?

  • java
  • 객체지향
진우 댓글 1 좋아요 0 조회수 94

다음으로에서 언급하신 데이터베이스는 업데이트 되어 있나요?

미해결

김영한의 실전 자바 - 기본편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 다음으로에서 언급하신 데이터베이스는 업데이트 되어 있나요?

  • java
  • 객체지향
노은영 댓글 1 좋아요 0 조회수 175

TestString6 질문

미해결

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

[질문 내용] 여기에 질문 내용을 남겨주세요. 이렇게 풀어도 될까요? 문자열의 길이를 1~n 개로 바꿔가며 테스트해도 맞긴한데, 강의랑 풀이가 좀 달라서 잘 맞게 풀었나 의문이 들긴 합니다 .

  • java
  • 객체지향
진우 댓글 1 좋아요 0 조회수 97

제네릭을 사용하실 때 콤마

해결됨

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

제네릭을 사용하실 때 콤마는 제네릭과 JSX의 혼동방지 제네릭 구문을 명확히 해서 코드의 가독성 높임 TSX 파일에서 사용할 때 하는 일반적인 관례 로 인한 이유가 맞을까요?

  • react
  • typescript
  • dom
  • ui
  • vanilla-js
oridori2705 댓글 2 좋아요 0 조회수 185

[필수실습 12-3] *출력 놀이 응용 질문

해결됨

기초 탄탄! 독하게 시작하는 Java - Part 1 : 절차적 프로그래밍

안녕하세요, 저는 "기초 탄탄! 독하게 시작하는 Java - Part 1 : 절차적 프로그래밍" 강의를 수강중인 학생입니다. 제목과 동일하게 "[필수실습 12-3] *출력 놀이 응용 질문" 강의에서 여쭤보고 싶은 내용이 있어서 질문 드립니다. 질문 내용 → 제가 해결을 위해 시도한 절차 역시, 3중 for문처럼 지양해야 할 1순위에 해당하는지 여쭤보고 싶습니다. 내용은, 작업 순서 - 설명 - 코드 순으로 배치했습니다. <작업 순서> // 1번 작업 줄넘김 // 2번 작업 공백 찍기 // 3번 작업 별 찍기 // 조건 == 공백 + 별 == 줄의 개수 for문만 사용해서 풀어야 한다고 생각하고 고민한 결과, 1번 for문 속에서 공백을 출력하는, 1번 for문(별을 찍기 전, 공백을 출력하는 로직) / 별을 출력하는, 2번 for문(기존 삼각형 별 찍기 로직)의 구성으로 해결했습니다. 이 또한, 지양해야 되는 코드인지 궁금합니다. (이 코드는 3중 for문과 유사한 코드인가요) <코드> (for문 부분만 넣었습니다.) // 작업 1번 for (int i = 0; i < 5; i++) { // 작업 2번 + [1번 for문] (공백을 4번 ~ 0번까지 출력하기 위한 for문) for (int k = 4; i < k; k--) { System.out.print("\t"); } // 작업 3번 + [2번 for문] (*을 1번 ~ 5번까지 출력하기 위한 for문) for (int j = 0; j < i + 1; j++) { System.out.print("*\t"); } System.out.print("\n"); } 이상입니다 긴 글 읽어주셔서 감사합니다.

  • java
k5until30 댓글 2 좋아요 0 조회수 160

안녕하세요! 테스트 질문입니다

해결됨

스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판

강의에서는 인기글을 테스트할때 DataInitializer클래스에서 아래와 같은 코드를 사용했습니다. void createComment(Long articleId, long commentCount) { while(commentCount-- > 0) { commentServiceClient.post() .uri("/v1/comments") .body(new CommentRequest.Create(articleId, "content",null, 1L)) .retrieve(); } } 이렇게 사용해봤더니 카프카에 전달이 되지 않더라구요 void createComment(Long articleId, long commentCount) { while (commentCount-- > 0) { CommentRequest.Create request = new CommentRequest.Create(articleId, "content", null, 1L); try { // 요청 로깅 추가 ObjectMapper objectMapper = new ObjectMapper(); System.out.println("Request body: " + objectMapper.writeValueAsString(request)); commentServiceClient.post() .uri("/v1/comments") .body(request) .retrieve() .toBodilessEntity(); // 응답 처리 추가 } catch (Exception e) { System.out.println("Error: " + e.getMessage()); } } } 이렇게 사용해야 인기글 서비스에서 아래처럼 로그가 찍히는걸 확인했습니다. 어디를 확인해야할까요 .. 몇시간째 해결을 못해서 질문드려요!! [HotArticleEventConsumer.listen] received message = {"eventId":136009554918850560,"type":"COMMENT_CREATED"

  • java
  • mysql
  • spring-boot
  • kafka
  • redis
qheogus55 댓글 2 좋아요 0 조회수 245

[16-2. 설문 리스트 컴포넌트 구현] Table 의 key 설정은 rowKey 속성을 사용합니다.

해결됨

실무 중심! FE 입문자를 위한 React

[16-2. 설문 리스트 컴포넌트 구현] Table 의 key 설정은 rowKey 속성을 사용합니다. rowKey 속성을 사용하여 key로 지정할 컬럼을 지정합니다. // primary key is id return <Table rowKey="id" />; // or return <Table rowKey={(record) => record.id} />;

  • react
  • redux
  • node.js
  • sass
  • swr
Codingbear 댓글 0 좋아요 0 조회수 109

최신버전 node.js 관련 문의

미해결

실무 중심! FE 입문자를 위한 React

최신 버전 node.js 를 설치 하고 진행하니 create-react-app 에서 자꾸 문제가 생기는거 같습니다. 이부분에 대해 어떻게 진행해야하나요??

  • react
  • redux
  • node.js
  • sass
  • swr
dlwhdgus482 댓글 2 좋아요 0 조회수 415

소스트리에 새로운 커밋이 뜨지않아요

미해결

직접 활용할 수 있는 Git과 Github - 기초부터 협업까지

비쥬얼 스튜디오에서 아무리 수정해도 강의에서는 그냥 바로 소스트리에 추적이 되어서 커밋이 뜨는데 저는 이렇게 save all을 눌러줘야 커밋이 떠요 왜그런가요?? 제가 뭘 잘못하는건가요?

  • git
  • github
escho94 댓글 1 좋아요 0 조회수 362

카카오맵API 지도 관련

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

.category-item에서 width를 24%로 해야 4등분이 되고 25%로 하면 3등분이 됩니다. 이건 제가 질문하려는 내용과 뭔가 관련이 있는 것 같아서 말씀드리는거고 css #map에서 height를 픽셀로 안하면 지도가 나오지도 않고 픽셀로 해도 지도가 일부분만 나옵니다. 지도자체를 인용하는거는 문제가 없어보이는데 왜 안나올까요? @font-face { font-family: 'ChosunCentennial'; src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/ChosunCentennial.woff2') format('woff2'); font-weight: normal; font-style: normal; } *{ padding: 0; margin: 0; box-sizing: border-box; } html{ font-size: 10px; font-family: 'ChosunCentennial'; } nav{ background-color: white; } .nav-container{ padding: 1rem 0; display: flex; flex-direction: row; justify-content:space-between; align-items: center; } .nav-title{ font-size: 3rem; } .nav-contact{ font-size: 2.5rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .category-title{ font-size: 3.5rem; } .category-item{ width: 24%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: orange; cursor: pointer; } .inner{ padding: 0 1.5rem; } @media all and (min-width: 1024px){ .inner{ max-width: 1024px; margin: 0 auto; } } /*카카오맵 css*/ body{ height: 100vh; } nav{ height: 59px; } main{ padding-top: 1.5rem; height: calc(100%-59px); display: flex; flex-direction: column; } #map{ flex-wrap: 1; width: 100%; height: 100px; }

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
거북이 댓글 1 좋아요 0 조회수 191

검은 화면

미해결

자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비

몇몇 강의가 검은 화면에서 목소리만 나오는데 왜이런건가요?

  • java
  • 코딩-테스트
정민준 댓글 3 좋아요 0 조회수 235

31강 UserServiceV2 오류

미해결

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

31강에서 BookService 클래스에 강의와 똑같이 코드를 작성하였는데 실행하면 UserServiceV2 오류가 발생합니다. UserRepository의 Optional<User> 형식을 받지 못해서 생기는 오류인 것 같은데, 어떻게 수정해야 하나요? error: incompatible types: Optional<User> cannot be converted to User User user = userRepository.findByName(name); ^ UserServiceV2.java @Transactional public void deleteUser(String name) { //SELECT * FROM user WHERE name = ? User user = userRepository.findByName(name); if (user == null) { throw new IllegalArgumentException(); } userRepository.delete(user); } BookService.java @Transactional public void loanBook(BookLoanRequest request){ //1. 책 정보 가져오기 Book book = bookRepository.findByName(request.getBookName()).orElseThrow(IllegalArgumentException::new); //2. 대출 기록 정보 확인하여 대출 중인지 확인 //3. 대출 중이면 예외 발생 if(userLoanHistoryRepository.existsByBookNameAndIsReturn(book.getName(), false)){ throw new IllegalArgumentException("진작 대출되어 있는 책입니다."); } //4. 유저 정보 가져오기 User user = userRepository.findByName(request.getUserName()) .orElseThrow(IllegalArgumentException::new); //5. 유저 정보와 책 정보 기반 UserLoanHistory 저장 userLoanHistoryRepository.save(new UserLoanHistory(user.getId(), book.getName())); } UserRepository.java package com.group.libraryapp.domain.user; import org.springframework.data.jpa.repository.JpaRepository; import java.util.Optional; public interface UserRepository extends JpaRepository<User, Long> { Optional<User> findByName(String name); } 우선 오류를 없애기 위해 UserRepository에서 Optional을 빼고 null처리를 하도록 수정하였는데, 실행 시 오류는 없지만 웹UI로 테스트하면 서버 내부 오류가 발생했다고 뜹니다. 어떻게 수정해야 제대로 처리되는지 모르겠습니다. 추가로 이렇게 수정하였을 때, 이후 코드를 작성할 때 Optional 형식이 아니어서 발생하는 다른 오류가 없는지도 궁금합니다. UserRepository.java package com.group.libraryapp.domain.user; import org.springframework.data.jpa.repository.JpaRepository; import java.util.Optional; public interface UserRepository extends JpaRepository<User, Long> { User findByName(String name); } BookService.java @Transactional public void loanBook(BookLoanRequest request){ //1. 책 정보 가져오기 Book book = bookRepository.findByName(request.getBookName()).orElseThrow(IllegalArgumentException::new); //2. 대출 기록 정보 확인하여 대출 중인지 확인 //3. 대출 중이면 예외 발생 if(userLoanHistoryRepository.existsByBookNameAndIsReturn(book.getName(), false)){ throw new IllegalArgumentException("진작 대출되어 있는 책입니다."); } //4. 유저 정보 가져오기 User user = userRepository.findByName(request.getUserName()); if(user == null){ throw new IllegalArgumentException(); } //5. 유저 정보와 책 정보 기반 UserLoanHistory 저장 userLoanHistoryRepository.save(new UserLoanHistory(user.getId(), book.getName())); } UserServiceV2.java @Transactional public void deleteUser(String name) { //SELECT * FROM user WHERE name = ? User user = userRepository.findByName(name); if (user == null) { throw new IllegalArgumentException(); } userRepository.delete(user); }

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
woddnjs 댓글 1 좋아요 0 조회수 72

다른 폴더의 커밋내역도 함께 뜹니다.

해결됨

Git & GitHub, 원리부터 차근차근 - 근본깃

안녕하세요! 강의 보면서 공부하고 있습니다! 예제 보여주시면 저도 폴더를 만들어서 같은 예제 상황을 만들어서 똑같이 따라고 하고 있는대요! git diff 나 git log 명령어 등을 사용했을 때 해당 폴더가 아닌 다른 폴더 커밋과 차이점이 같이 나와서요~ 위 캡쳐 이미지를 보시면 제가 브랜치 연습을 위해 만든 branch01폴더에서 rectangle 파일을 만들고 git diff 명령어를 사용했을 때, diff를 연습할 때 만든 diff_commit 폴더의 rectangle 상태를 보여주고 있습니다. 위 캡쳐는 git log했을 때인데요! 오늘이 10일인데 전날 연습했던 다른 폴더의 커밋 내역들까지 보입니다. git bash는 해당 폴더에서 오른쪽 마우스로 git bash here를 눌러 새 창을 열어서 사용했습니다. 이번 영상 7분 18초 쯔음보면 커밋 2개가 조회 된다고 하는데 전 어제 것 까지 13개 커밋 내역이 나오는 상황입니다. 어떤 점이 문제 일까요? 답변 부탁드립니다. 감사합니다.

  • git
  • github
sun 댓글 3 좋아요 0 조회수 179

Ch15-5. 라우터 적용에서 최근 react-router 설정과 달라서 수정했습니다.

해결됨

실무 중심! FE 입문자를 위한 React

react-router v7을 설치하고 다음과 같이 수정하여 처리하였습니다. function MainLayout() { return ( <Layout style={{ minHeight: '100vh' }}> <Layout> <Sider collapsible> <div className="logo" style={logoStyle} /> <Menu theme="dark" mode="inline" defaultSelectedKeys={['m1']}> <Menu.Item key="m1">설문조사관리</Menu.Item> </Menu> </Sider> <Layout> <Header style={{ padding: 0, background: 'white' }}>HEADER</Header> <Content> <Outlet /> {/* chidren 대신 아울렛 사용 */} </Content> </Layout> </Layout> </Layout> ); } function App() { return ( <> <Routes> <Route path="/" element={<MainLayout />}> <Route index element={<h1>Home Page</h1>} /> <Route path="list" element={<ListPage />} /> <Route path="builder" element={<BuilderPage />} /> </Route> </Routes> </> ); }

  • react
  • redux
  • node.js
  • sass
  • swr
Codingbear 댓글 0 좋아요 0 조회수 214

iTerm으로 폴더 만드는 부분에 대해 질문이 있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 현재 맥북을 사용중이고 강의영상처럼 iTerm으로 명령어를 작성해서 폴더를 만들고 비주얼스튜디오까지 열기부분에서 저는 외장하드를 연결해서 배경화면에 있는 외장하드폴더 안에 짐코딩강의라는 폴더 안에 react-test 라는 폴더를 만들어 사용할려고 하는데 이렇게 되면 명령어를 어떻게 작성하면 되는지 궁금합니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 1 좋아요 1 조회수 114

안녕하세요. 이 로드맵 과정은 스프링 부트를 주로 활용하나요?

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) - 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) - 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 아니오 [질문 내용] 여기에 질문 내용을 남겨주세요. 제가 친형걸로 이걸 들으려고 하는데 이 로드맵 전반적인 과정은 스프링인지 스프링부트인지 알고 싶어서 이렇게 질문드립니다.

  • java
  • spring
  • mvc
  • spring-boot
[SQL 실전반 13기] Toby 댓글 1 좋아요 0 조회수 75

git 명령어를 찾을 수 없다고 하는데 git을 따로 설치해야 하는건가요?

미해결

실무 중심! FE 입문자를 위한 React

PS D:\reactWorkspace\memo-project> git reset --hard git : 'git' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + git reset --hard + ~~~ + CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\reactWorkspace\memo-project>

  • react
  • redux
  • node.js
  • sass
  • swr
정혜림 댓글 1 좋아요 0 조회수 1097

인기 태그

인프런 TOP Writers

주간 인기글