inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

개인프로젝트를 하던 와중에 next-auth 관련 질문입니다.

미해결

Next + React Query로 SNS 서비스 만들기

auth.ts 관련 코드입니다. export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/login", }, events: { // signOut(data) { // console.log(data); // }, }, callbacks: { session: async ({ session }) => { console.log("session", session); return session; }, }, providers: [ CredentialsProvider({ name: "credentials", async authorize(credentials) { const { email, password } = credentials; const res = await axios.post( `${process.env.NEXT_PUBLIC_LOCAL_API_URL}/api/login`, // `${process.env.NEXTAUTH_URL}/api/login`, { email, password, } ); let setCookie = res.headers["set-cookie"]; let stringCookie; setCookie && setCookie.map((item) => (stringCookie = item)); if (setCookie && stringCookie) { const parsed = cookie.parse(stringCookie); cookies().set("connect.sid", parsed["connect.sid"], parsed); // 브라우저에 쿠키 심기 } if (!res.data) { return null; } const data = res.data; if (data) { return { email: data.email, nickName: data.nickName, area: data.area, location: data.location, distance: data.distance, ...data, }; } else { return null; } }, }), GitHubProvider({}), NaverProvider({}), GoogleProvider({}), ], secret: process.env.NEXTAUTH_URL, }); auth.ts에서 log를 찍어보았을 때는 auth.ts를 아예 타지 않습니다. (로그인 submit 을 했을 시 ) 또한 현재 오류 Network에서 이와 같은 오류가 계속 발견되어서 그리고 쿠키에는 아무것도 담기지 않습니다. 분명 몇 일 전까지만 해도 잘되던 녀석이었는데 갑자기... 이러한 오류로 안됩니다. package의 버전은 아래와 같습니다. "@auth/core": "0.19.0", "next-auth": "^5.0.0-beta.3", 이러한 부분은 왜 계속 오류가 나는 것인지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
jaeyong Kim 댓글 1 좋아요 0 조회수 409

어떤 경우 cascade 를 적용해도 되는지 이해가 되지 않습니다.

미해결

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

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예 [질문 내용] 스프링 cascade 활용도 측면에서 궁금한 것이 있습니다. 영한님 - 인프런 (inflearn.com) 이 질문을 남겼었던 수강생입니다! 잠깐 상황을 요약하면 Program 과 Review 그리고 User 가 다대 1 1대 다 로 묶여 있는 상황입니다. program 에서 program.addReview 메서드를 활용하기 위해 cascade type 을 적용하였었습니다. 하지만 영한 님은 이부분의 코드는 별로 좋은 코드가 아니다! cascade 옵션 질문 - 인프런 (inflearn.com) 를 참고해서 보아라. 라고 하셨습니다. 위 질문의 요약은 강의에서 Order 는 OrderItem 을 개인 소유 하나, Order 와 Delivery 는 Delivery 가 여러 곳에서 참조할 수 있으므로 개인 소유 하지 않는다. 라고 읽었습니다. 참조 하는 것과 Cascade Type .all 이 무슨 관계가 있는지 모르겠습니다. 6줄요약하면: Delivery 와 Review 는 여러 곳에서 참조할 수 있으므로 CascadeType all 을 붙이지 말라고 하신 것 같은데 여러 곳에서 참조가능성이 있으면 CascadeType all 을 왜 붙이지 말아야 하는지 궁금합니다. 단순히 계속 코드를 보며 추적해야 하는 것 때문인가요?? 이 부분이 와닿지 않습니다. 혹시 실제 예를 들어 설명해주실수 있나요??

  • java
  • jpa
dionisos198 댓글 2 좋아요 0 조회수 467

use client 사용하는 컴포넌트 질문

미해결

Next + React Query로 SNS 서비스 만들기

제로초님 안녕하세요. 강의 잘 보고 있습니다. 강의를 보는 도중 궁금한점이 생겨 질문을 남깁니다 (강의 후반부에 설명해 주셨을지도 있지만...) 저는 React, Next13 버전으로만 개발을 해보았고, Next14를 배우기 위해 강의를 듣고 있는데 Next13에서는 기본이 클라이언트 컴포넌트이고 필요한 경우에만 'use server' 를 사용해 ssr을 구현했던 것으로 기억합니다. 그런데 Next 14에서는 기본이 서버 컴포넌트이고 필요한 경우에만 'use client'를 사용하시는 것 같습니다. 어떤 경우에 use client를 적용해야하는지 기준을 잘 모르겠어서 제로초님은 어떤경우에 use client를 사용하시는지 궁금합니다. 제가 생각하기에는 상태관리가 필요하거나 hook을 사용해야하는 컴포넌트의 경우 'use client'를 적용해서 사용하는 것 같은데 그런 특별한 경우를 제외하고는 모두 서버 컴포넌트를 쓰는게 맞나요??

  • react
  • next.js
주영민 댓글 1 좋아요 0 조회수 271

_lib 폴더는 어떤 용도인가요?

해결됨

Next + React Query로 SNS 서비스 만들기

_lib 폴더는 어떤 용도로 구분되어져 있는 폴더일까요??

  • react
  • next.js
  • react-query
  • next-auth
  • msw
주니어에요 댓글 1 좋아요 0 조회수 476

import 절대경로 설정 방법 질문 드립니다!

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

조은님 안녕하세요 🙂 강의 잘 보았습니다! 강의를 보다가 문득 궁금한 점이 있는데요! import 문 통해서 절대경로로 파일을 불러올 때, 전역에 있는 tsconfig.json 내에서 파일별로 일일이 수동 설정을 해주어야하는 걸로 아는데 조은님께서는 자동으로 @가 붙여진 형태로 불러와지는 거 같아서요! 혹시 따로 설정 어떻게 하셨는지 여쭤봐도 괜찮을까요?

  • react
  • typescript
  • next.js
  • next.js13
killyou18 댓글 1 좋아요 0 조회수 334

3.2버전 gradle 설정에 대한 문제

해결됨

실전! Querydsl

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 여기에 질문 내용을 남겨주세요. 이게 현재 프로젝트 이고 plugins { id 'java' id 'org.springframework.boot' version '3.2.3' id 'io.spring.dependency-management' version '1.1.4' id 'com.ewerk.gradle.plugins.querydsl' version '1.0.10' } group = 'study' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' runtimeOnly 'com.mysql:mysql-connector-j' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'com.github.gavlyukovskiy:p6spy-spring-boot-starter:1.9.0' //test 롬복 사용 testCompileOnly 'org.projectlombok:lombok' testAnnotationProcessor 'org.projectlombok:lombok' //Querydsl 추가 implementation 'com.querydsl:querydsl-jpa:5.1.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt:5.1.0:jakarta" annotationProcessor "jakarta.annotation:jakarta.annotation-api" annotationProcessor "jakarta.persistence:jakarta.persistence-api" } tasks.named('test') { useJUnitPlatform() } clean { delete file('src/main/generated') } //querydsl 추가 시작 def querydslDir = file('build/generated/querydsl') querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java.srcDir querydslDir } configurations { querydsl.extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations.querydsl } 현재 gradle설정인데 Querydsl 설정과 검증 부분에서 막혔어요 클린해서 q파일 지우고 테스트 코드 런하면 아래 에러가 나타나고 error: Attempt to recreate a file for type study.querydsl.entity.QHello 이후에 q파일이 생성 된 후에는 error: Could not find class file for 'study.querydsl.entity.Hello'. 에러가 반복되네요.. https://www.inflearn.com/questions/1086099 다른분들 설정파일 따라해도 안됩니다..

  • java
  • jpa
먼산 댓글 2 좋아요 3 조회수 2675

No overload matches this call.

해결됨

Next + React Query로 SNS 서비스 만들기

z-com\src\app\(beforeLogin)\_component\SignupModal.tsx 파일에서 useFormState(OnSubmit, {message: null }); 해당 부분에서 Type error: No overload matches this call. Overload 1 of 2, '(action: (state: { message: string; } | undefined) => { message: string; } | Promise<{ message: string; } | undefined> | undefined, initialState: { message: string; } | undefined, permalink?: string | undefined): [state: ...]', gave the following error. Argument of type '(prevState: any, formData: FormData) => Promise<{ message: string; } | undefined>' is not assignable to parameter of type '(state: { message: string; } | undefined) => { message: string; } | Promise<{ message: string; } | undefined> | undefined'. Target signature provides too few arguments. Expected 2 or more, but got 1. Overload 2 of 2, '(action: (state: { message: string; } | undefined, payload: FormData) => { message: string; } | Promise<{ message: string; } | undefined> | undefined, initialState: { message: string; } | undefined, permalink?: string | undefined): [state: ...]', gave the following error. Type 'null' is not assignable to type 'string'.ts(2769) 에러가 발생합니다. 제로초님 github 파일 3-2에 있는 부분을 복붙해서 하고 있는데 에러가 발생했습니다. 타이핑 에러는 아닌 것 같습니다. 찾아보니 함수에 들어오는 매개변수의 타입이 예상한 타입과 일치하지 않을 때 발생한다고 하여서 message의 type을 any로 바꿔보아도 에러가 납니다 .. React 버전은 18버전이고 nextjs 는 14.0.4 버전입니다. 어떤 부분을 수정해야 할지 모르겠습니다...

  • react
  • next.js
  • react-query
  • next-auth
  • msw
jun Kim 댓글 1 좋아요 0 조회수 1320

중고마켓 찜하기 토글 기능 데이터 값 저장법

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요. 현재 찜하기 기능을 추가하는 작업을 진행중입니다. 전체적으로 설명드리면 찜하기 Hook을 만들고 ProductDetail 컴포넌트에 Hook의 리턴 값을 보내어 작업하였습니다. 찜하기 API의 결과 값으로 off시 0, on 시 1을 출력하여 그 값을 state에 저장하여 상품디테일 컴포넌트로 리턴하여 작업하는 중입니다. 그런데 state의 초기값을 토글의 결과값을 가져와서 넣어주어야 하는데 어떻게 해야할지 잘 모르겠습니다. 제가 생각해본 방법으론 상품 컴포넌트에서 state를 새로 만들어 가져온 pick의 변수를 set에 담았더니 랜더링이 많아진다면서 오류가 떴습니다. 혹시 제가 작업하는 방향이 틀린 것인지 궁금하고, 어떻게 문제를 해결해야할지 잘 몰라 질문 드립니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
김태연 댓글 1 좋아요 0 조회수 256

Link와 클라이언트사이드 렌더링

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 제로초님. 이제 막 Next 강의 시작해서 기초부터 보고 있는데 이해가 되지 않는 부분이 있어 질문드립니다. next/link에 관한 부분인데요. 공식문서보니까 next/link 사용시에 클라이언트 사이드 라우팅이 된다고 하는데 그 말인 즉슨 link에 해당하는 페이지 컴포넌트의 자바스크립트를 미리 받아놓고 사용자가 Link로 이동할 때 클라이언트에서 페이지를 생성한다는 뜻으로 이해했는데요. 그럼 이동하는 페이지 컴포넌트에 console.log("하이")가 있으면 클라이언트, 즉 브라우저에 console.log가 출력되어야하는 거 아닌가요? 하지만 제 예상과 다르게 Link로 이동한 페이지 컴포넌트의 console.log는 서버에 출력되네요. 1. "use client"를 명시하지 않은 컴포넌트는 모두 서버에서 렌더링 되는 컴포넌트다 2. Link로 이동하면 클라이언트 사이드 렌더링을 한다. 이 두 가지 개념이 어떻게 공존할 수 있는지, 위에 설명드린 케이스와 함께 잘 이해가 되지 않네요ㅜ

  • react
  • next.js
  • react-query
  • next-auth
  • msw
jin l 댓글 2 좋아요 0 조회수 364

portfolio review 코드 말고 수업 예제 코드는 없을까요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

컴퓨터를 교체해서 앞에 수업했던 파일들이 다 날아갔는데 강의 뒷부분에서 재활용 되는 경우가 있더라구요.. 깃허브에는 포폴용 과제만 샘플 코드가 제공되는 것 같아서 혹시 수업 파일도 올려주실 수 있으실까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
점투 댓글 1 좋아요 1 조회수 223

강의자료 부탁드립니다

미해결

프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)

rokoppa@gmail.com 입니다. 감사합니다~!

  • python
댓글 1 좋아요 0 조회수 223

VSCode 확장프로그램은 어떤 것을 사용하셨나요?

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

안녕하세요 강의 잘 들었습니다. 혹시 VSCode에 어떤 확장프로그램들을 사용하셨는지 궁금합니다. 강의 듣다보면, 자동완성 되는 부분들이 있는데, 제 환경에서는 그런 VSCode UI가 안뜨더라구요. 감사합니다.

  • react
  • typescript
  • next.js
  • next.js13
코딩강사 댓글 1 좋아요 0 조회수 380

[28강 오류 해결] https://loremflickr.com 외부 이미지 불러오기 오류

해결됨

Next + React Query로 SNS 서비스 만들기

Invalid src prop ( https://loremflickr.com/640/480?lock=5661426936971264 ) on `next/image`, hostname " loremflickr.com " is not configured under images in your `next.config.js` faker를 통해 https://loremflickr.com 에서 외부 이미지를 가져올 때 위 오류 발생하시는 분들은 next.config.js 또는 next.config.mjs에 아래와 같이 추가해주시면 됩니다. /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "loremflickr.com", port: "", pathname: "/640/480/**", }, ], }, }; export default nextConfig;

  • react
  • next.js
  • react-query
  • next-auth
  • msw
Next 댓글 0 좋아요 2 조회수 517

기존 react 에서 navigate 에 state 로 데이터를 전달했습니다.

해결됨

손에 익는 Next.js - 마이그레이션하기

안녕하세요. 현재 react 로 구성되어 있는 프로젝트를 next.js 로 마이그레이션 하기 위해 강의 신청해서 들었습니다. 마이그레이션 도중 질문이 있어서 글 남겨봅니다. 1) 기존 react 에서 navigate 의 state 값으로 전달하던 데이터 들이 있습니다. 전달된 데이터는 location state 로 가져와서 사용했구요. 2) next 12 버전 까지는 query 에 객체를 담아서 보낼수 있고 url 도 as 를 이용해서 제어할 수 있는걸 확인했습니다. 3) 하지만 13버전 이후부터 next/router -> next/navigate 로 변경되면서 query 객체, as 가 삭제되어진 걸로 확인되는데 페이지 이동시 데이터를 전달하러면 url 에 그냥 꼬라박는 방법 뿐인지 질문 드립니다.

  • react
  • next.js
  • vitejs
이정호 댓글 1 좋아요 0 조회수 737

부트스트랩, css

미해결

스프링과 JPA 기반 웹 애플리케이션 개발

프로젝트를 받아서 실행시켜보니 이런 메시지가 뜨면서 css가 적용되지 않은것을 확인 했습니다. 해결해 보기 위해서 링크도 추가해보고 했지만 여전히 바뀌지가 않네요 이럴경우는 어떻게 해야할까요..?

  • java
  • spring
  • spring-boot
  • jpa
  • thymeleaf
최정식 댓글 2 좋아요 0 조회수 374

기본환경설정(2-1), (Ctrl+)F5누르면 실행하지 않고 Select debugger라고 뜹니다.

미해결

프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)

안녕하세요. F5나 Ctrl+F5를 누르면 코드를 실행하지 않고 첨부한 캡쳐처럼 Select debugger 라고 뜹니다. 그리고 오른쪽의 세모를 클릭하면 실행합니다. 강의대로 그대로 따라했는데 제가 무언가 빠뜨린 게 있는 건가요? 어떻게 해야하죠? 감사합니다!

  • python
defoogle 댓글 3 좋아요 0 조회수 2276

안녕하세요 복습중인데 msw 404 (Not Found) 질문드립니다.

미해결

Next + React Query로 SNS 서비스 만들기

// http.ts import { createMiddleware } from "@mswjs/http-middleware"; import cors from "cors"; import express from "express"; import { handlers } from "./handlers"; const app = express(); const port = 9090; app.use( cors({ origin: "http://localhost:3000", optionsSuccessStatus: 200, credentials: true, }) ); app.use(express.json()); app.use(createMiddleware(...handlers)); app.listen(port, () => console.log(`Mock server is ruuning on port: ${port}`)); // handlers.ts import { http, HttpResponse } from "msw"; const CalendarData = [ { id: 0, date: "2024-03-01", memo: [ { id: 0, text: "식사", }, { id: 1, text: "운동", }, ], }, { id: 1, date: "2024-03-02", memo: [ { id: 0, text: "연차", }, { id: 1, text: "회의", }, ], }, { id: 2, date: "2024-03-03", reservation: 0, canceled: 0, noShow: 0, memo: [], }, { id: 3, date: "2024-03-04", memo: [ { id: 0, text: "공부", }, { id: 1, text: "휴식", }, ], }, { id: 4, date: "2024-03-05", memo: [], }, { id: 30, date: "2024-03-31", memo: [ { id: 0, text: "파티", }, { id: 1, text: "운동", }, ], }, ]; export const handlers = [ http.get("http://localhost:3000/api/calendar", ({}) => { return HttpResponse.json(CalendarData); }), ]; // browser.ts import { setupWorker } from "msw/browser"; import { handlers } from "./handlers"; const worker = setupWorker(...handlers); export default worker; // MSWComponent.tsx "use client"; import { useEffect } from "react"; export const MSWComponent = () => { useEffect(() => { if (typeof window !== "undefined") { if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") { require("@/mocks/browser"); } } }, []); return null; }; // msw api 요청 함수 export async function getCalendarData() { const res = await fetch(`http://localhost:3000/api/calendar`, { next: { tags: ["calendar"], }, cache: "no-store", }); if (!res.ok) { throw new Error("Failed to fetch calendar data"); } return res.json(); } // layout.tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import PortalWrap from "@/components/PortalWrap/PortalWrap"; import Toast from "@/components/Toast/Toast"; import { MSWComponent } from "@/mocks/MSWComponent"; import SSRQueryClientProvider from "@/libs/ReactQuery/SSRQueryClientProvider"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={inter.className}> <MSWComponent /> <SSRQueryClientProvider> {children} <PortalWrap /> <Toast /> </SSRQueryClientProvider> </body> </html> ); } // .env NEXT_PUBLIC_API_MOCKING=enabled NEXT_PUBLIC_MODE=local // package.json { "name": "planner", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "mock": "npx tsx watch ./src/mocks/http.ts" }, "dependencies": { "@tanstack/react-query": "^5.14.6", "classnames": "^2.5.1", "date-fns": "^3.3.1", "next": "^14.0.3", "react": "^18", "react-dom": "^18", "react-icons": "^5.0.1", "react-transition-group": "^4.4.5", "sass": "^1.71.1", "zustand": "^4.5.2" }, "devDependencies": { "@mswjs/http-middleware": "^0.9.2", "@tanstack/react-query-devtools": "^5.25.0", "@types/cors": "^2.8.17", "@types/express": "^4.17.21", "@types/node": "^20.10.5", "@types/react": "^18", "@types/react-dom": "^18", "@types/react-transition-group": "^4.4.10", "autoprefixer": "^10.0.1", "cors": "^2.8.5", "eslint": "^8", "eslint-config-next": "14.1.2", "express": "^4.18.2", "msw": "^2.0.11", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" }, "msw": { "workerDirectory": "public" } } npm run mock 를 사용해서 터미널에 Mock server is ruuning on port: 9090 이 나오는것까지 확인되었는데 GET http://localhost:3000/api/calendar 404 (Not Found) 콘솔에 이렇게 오류가 나옵니다. 몇시간 동안 이것저것 수정해보고 했는데 어디서 잘못된건지 왜 요청을 못받아오는지 모르겠습니다ㅠ

  • react
  • next.js
  • react-query
  • next-auth
  • msw
밍끼 댓글 1 좋아요 0 조회수 902

환경변수 오류

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

환경변수 설정해서 입력하면 오류가 나타납니다

  • react
  • typescript
  • next.js
  • next.js13
댓글 1 좋아요 1 조회수 272

리액트 서버 실행 오류

해결됨

따라하며 배우는 리액트 A-Z[19버전 반영]

리액트 설치 npx create-react-app ./ 이후 리액트 최초 시작 시 npm run start가 작동하지 않습니다. 위와 같은 오류가 발생하여, 아래와 같은 해결 방법들을 실행해보았습니다. 하지만, 위의 코드를 모두 실행했음에도 동일한 오류가 계속해서 발생합니다. node.js와 npm의 버전은 이러합니다. 폴더는 현재 강의자료 코드 폴더 내에 study라는 새로운 폴더를 만들어, 그 안에 리액트를 설치했습니다. 프로젝트를 3번 정도 삭제하고 다시 설치했음에도 동일한 오류가 발생합니다. 어떻게 하면 좋을까요? 🥲 VSCode를 재시작하니 서버가 실행되었는데, App.js의 수정사항이 반영되지 않아 다시 VSCode를 재시작했더니 또 동일한 오류가 납니다...

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
남소희 댓글 2 좋아요 0 조회수 1186

인기 태그

인프런 TOP Writers

주간 인기글