inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

섹션 7 GraphQL 관련 질문 드립니다

해결됨

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

안녕하세요 섹션 04-05-graphql-mutation-product 따라하고 있는데 도중에 저런 에러 메세지가 떴습니다. 디버깅 하려고 해도 Network 부분에 message 부분이 안 뜨네요ㅠ 검색해보니 쿠키 및 인터넷 기록 삭제해보라고 나오는데.. 삭제해도 해결이 안 되고요ㅠㅠ 어떻게 해야 해결될까요? 도움 부탁드립니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
edo020424 댓글 2 좋아요 0 조회수 287

코딩테스트 10일정도 남았습니다..

해결됨

2주만에 통과하는 알고리즘 코딩테스트 (2024년)

코딩센세님.. 현재 10강까지 들었습니다.. 남은 10일동안 강의 다 듣고 그동안 문제 열심히 다 풀면 싸피 합격할 수 있을까요..? 솔직히 떨어질 거 같아서 너무 슬픕니다... ... 흑흑

  • python
  • 코딩-테스트
  • 알고리즘
댓글 2 좋아요 1 조회수 542

앱 구조에 대해서

미해결

따라하며 배우는 리액트 네이티브 기초

혹시 expo를 설치를 했는데 구조가 너무 달라서 질문드립니다! app.js 파일도 없고 component hooks script폴더들이 있는데 어떤식으로 사용이되는 파일인지 모르겠습니다

  • react
  • react-native
  • expo
댓글 2 좋아요 0 조회수 641

extracted2 파일 생성이 안됩니다

미해결

실리콘밸리 엔지니어가 가르치는 파이썬 기초부터 고급까지

가장 마지막 부분 코드를 똑같이 따라했는데 왜 extracted2 파일이 생성되지 않는지 모르겠습니다

  • python
  • 알고리즘
ithannag 댓글 2 좋아요 0 조회수 202

현재 네이버 코드가 바뀐거 같습니다.

미해결

Selenium 기본 과정

현재 네이버 플레이스 페이지에서 펼쳐서보기 -> 더보기로 바뀌었는데 이부분 대처할수 있는 방법이 있을까요?

  • python
  • selenium
조현승 댓글 2 좋아요 0 조회수 423

스프링 DB2 테스트 - 데이터 롤백 오류

미해결

스프링 DB 2편 - 데이터 접근 활용 기술

findItems()에서 "itemA", "itemB"가 남아있다는 오류가 발생합니다. jdbc:h2:tcp://l ocalhost/~/testcase 로 접속해서 select 해 보면 데이타가 없는데, =jdbc:h2:tcp:// localhost/~/test 로 접속해서 select하면 "itemA", "itemB" 가 남아있습니다.(삭제하고 다시 실행해도....). TestDataInit을 실행하는거 같네요?? @Bean @Profile("local") public TestDataInit testDataInit(ItemRepository itemRepository) { return new TestDataInit(itemRepository); } 링크 :: https://drive.google.com/file/d/1HD2gxtYhL8B5fZ3KazZ148-4x66PPCuo/view?usp=sharing

  • spring
  • mvc
  • jpa
  • querydsl
  • spring-data-mybatis
  • spring-jpa
jfk6725 댓글 2 좋아요 0 조회수 310

스프링DB 2 :: 테스트 - 데이터 베이스 연동 오류 (원하는 답변이 아닙니다)

미해결

스프링 DB 2편 - 데이터 접근 활용 기술

Lombok의 @Data 가 @Getter, @Setter, @RequiredArgsConstructor, @ToString, @EqualsAndHashCode 를 만들어주는 애노테이션이라는 건 잘 압니다. 제 질문은 왜 스프링DB 2 :: 테스트 - 데이터 베이스 연동 테스트의 save에서 오류가 발생 했었는데, @Getter, @Setter를 @Data 로 바꾼 행위만으로 오류가 발생하지 않게 된 이유를 알려달라는 겁니다. @Getter, @Setter 만 설정하는게 잘 못 된거라면 그 이유가 뭐냐는 걸 문의한겁니다. https://www.inflearn.com/questions/1258907/%EC%8A%A4%ED%94%84%EB%A7%81db-2-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%97%B0%EB%8F%99-%EC%98%A4%EB%A5%98

  • spring
  • mvc
  • jpa
  • querydsl
  • spring-data-mybatis
  • spring-jpa
jfk6725 댓글 1 좋아요 0 조회수 266

8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다.

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

8.2에서 보이는 site안에 page파일과 7.6에서 보이는 page파일의 코드가 다른거 같습니다. 깃허브에는 7.7 챕터가 따로 있던데... 혹시 그 브랜치에 site안의 page파일을 그대로 사용하면 될까요??

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
임민규 댓글 1 좋아요 2 조회수 210

5.6 실습코드 오류질문

미해결

[개정판] 파이썬 머신러닝 완벽 가이드

이렇게 nan으로 다 뜨는데 이유가 무엇일까요.. 이렇게 에러가 뜹니다. 참고로 주신 코드 그대로 돌렸습니다ㅠ

  • python
  • 머신러닝
  • 통계
김도형 댓글 3 좋아요 0 조회수 716

스프링DB 2 :: 테스트 - 데이터 베이스 연동 오류

미해결

스프링 DB 2편 - 데이터 접근 활용 기술

추가 질문입니다. @Data 보다는 @Getter @Setter를 쓰는게 좋다고 하셔서 @Getter @Setter를 쓰고 별도 생성자도 만들었는데....... @Getter @Setter를 @Data로 변경 햤을 때 오류가 발생하지 않는 이유를 알려주세요. https://www.inflearn.com/questions/1258907/%EC%8A%A4%ED%94%84%EB%A7%81db-2-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%97%B0%EB%8F%99-%EC%98%A4%EB%A5%98

  • spring
  • mvc
  • jpa
  • querydsl
  • spring-data-mybatis
  • spring-jpa
jfk6725 댓글 1 좋아요 0 조회수 269

is not valid JSON 에러 ..!

미해결

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

import { http, HttpResponse } from "msw"; const testData = [ { result: "success", userId: 2, nickname: "닉네임", favoriteCount: 223, viewCount: 336, position: "Backend", userFileUrl: "/Users/user/Desktop/pictures/userPicture.jpg", year: "경력없음", techStack: "react, java, ---", softSkill: "소통, 적극성, ---", links: "http://블로그주소", alarmStatus: true, content: "안녕하세요 구인 중입니다", }, ]; export const handlers = [ http.post("/api/post", () => { return HttpResponse.text(JSON.stringify("ok")); }), http.get("/api/get", ({ request }) => { console.log("request", request); return HttpResponse.json(testData); }), ]; export default handlers;"use client"; import { redirect } from "next/navigation"; export default function Home() { const handleClick = () => { fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/get`, { method: "get", }) .then((res) => console.log("res", res.json())) // JSON 형식으로 변환된 데이터를 가져옴 .then((data) => console.log("res?", data)); // JSON 데이터를 로그에 출력 }; return ( <> <div> <button onClick={handleClick}>test btn</button> <p>계정을 생성하세요</p> <form> <div> <> <label htmlFor="id">아이디</label> <input type="text" id="id" name="id" required /> </> <> <label htmlFor="name">이름</label> <input type="text" id="name" name="name" required /> </> <button type="submit">가입하기</button> </div> </form> </div> </> ); } browser.ts, handlers.ts, http.ts, MSWComponent.tsx, server.ts 는 제로초님과 다 동일하게 설정하였고 get부분에서 위와같이 하였는데 Unexpected token '<', "<!DOCTYPE "... is not valid JSON 라는 에러가 계속 발생합니다 ㅠㅠ 어떤부분이 문제일까요.. ! console.log("res", res.json())) 이부분에서 res만 콘솔로 확인하면 이렇게 나옵니다..!

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

스프링DB 2 :: 테스트 - 데이터 베이스 연동 오류

미해결

스프링 DB 2편 - 데이터 접근 활용 기술

저는 데이터를 새로 생성해서 테스트를 했는데, save와 finditems 두 군데 모두 오류가 발생합니다. 링크 :: https://drive.google.com/file/d/1i7i95iRprKTD08l5TuPj1iCOAVPDvNTT/view?usp=sharing save 오류 :: org.opentest4j.AssertionFailedError: expected: hello.itemservicedb.domain.Item@a2df0d5 but was: hello.itemservicedb.domain.Item@26d028f7 finditems 오류 :: org.opentest4j.AssertionFailedError: Expecting actual: [hello.itemservicedb.domain.Item@4cc26df, hello.itemservicedb.domain.Item@7848321e, hello.itemservicedb.domain.Item@f4f843f, hello.itemservicedb.domain.Item@7b5833ee, hello.itemservicedb.domain.Item@1e471884, hello.itemservicedb.domain.Item@27261190, hello.itemservicedb.domain.Item@543b0737] to contain exactly (and in same order): [hello.itemservicedb.domain.Item@6e46891d, hello.itemservicedb.domain.Item@48632f69, hello.itemservicedb.domain.Item@5fde1d64] but some elements were not found: [hello.itemservicedb.domain.Item@6e46891d, hello.itemservicedb.domain.Item@48632f69, hello.itemservicedb.domain.Item@5fde1d64] and others were not expected: [hello.itemservicedb.domain.Item@4cc26df, hello.itemservicedb.domain.Item@7848321e, hello.itemservicedb.domain.Item@f4f843f, hello.itemservicedb.domain.Item@7b5833ee, hello.itemservicedb.domain.Item@1e471884, hello.itemservicedb.domain.Item@27261190, hello.itemservicedb.domain.Item@543b0737]

  • spring
  • mvc
  • jpa
  • querydsl
  • spring-data-mybatis
  • spring-jpa
jfk6725 댓글 1 좋아요 1 조회수 294

테스트에서 select 로그가 노출안되는 이유

미해결

스프링 DB 2편 - 데이터 접근 활용 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 여기에 질문 내용을 남겨주세요. 테스트 케이스 중 save() 테스트와 updateItem()테스트에서 itemRepository.findById를 호출하는 부분이 있습니다. itemRepository.findById(item.getId()).get(); 이 경우 select 쿼리가 나가는 걸로 알고 있는데 로그에는 노출되지 않습니다. 1) save() 2) updateItem() 강사님 화면에도 노출되지 않던데 그 이유가 있을까요??

  • spring
  • mvc
  • jpa
  • querydsl
  • spring-data-mybatis
  • spring-jpa
djqwkfj43u 댓글 1 좋아요 0 조회수 268

8번문제 groupby로 sum하는 경우

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

Groupby로 Sum하는 경우, 영상처럼 f2, age, fi, f5, views 열만 나오는게 아니라 id, f3, f4 열도 데이터들이 합쳐져서 나오는데 왜 그런가요? 선생님은 숫자값이 적혀있는 열들만 합쳐져서 나오는데 저는 string 값도 더해져서 나오는 것 같습니다..

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
이재욱 댓글 1 좋아요 0 조회수 311

무한 스크롤 prefetch SSR 로그인 쿠키 관련 질문

해결됨

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

안녕하세요 제로초님, api/users/{id} 에서 Followers 데이터는 제가 상대방을 팔로잉 했고 로그인 정보 쿠키가 잘 전달되면 상대방의 팔로워 수와 관계없이 제가 팔로우 했다면 저의 userId만 배열에 담겨서 돌아오기 때문에 api/posts/followings 혹은 api/posts/recommends의 Comments 데이터도 이와 동일할 것이라고 생각했습니다. 추천 포스트는 prefetch를 진행하고( Suspense를 적용하지 않음) 팔로잉 포스트는 SSR을 할 때 서버에서 로그인 여부를 판단하는 쿠키를 함께 보내야 하기 때문에 prefetch에서는 next의 cookies를 사용해서 쿠키를 전달했습니다 . 하지만 Comments 배열에 로그인 유저가 아닌 다른 유저의 id도 함께 날라옵니다. 추천 포스트가 아닌 팔로잉 포스트는 useSuspenseInfiniteQuery를 사용했는데 로그인 유저의 id만 잘 전달받았습니다. 이게 Suspense 내부에 있어서 그런가 싶어서 Suspense를 걷어내고 prefetch만 사용했을 때도 동일하게 로그인 유저가 아닌 다른 유저의 id도 확인할 수 있었습니다. 왜 로그인 쿠키를 보내는데도 다른 유저의 정보도 날라오는지 궁금합니다. 어디가 잘못된 것일까요? useSuspenseInfiniteQuery를 사용한 팔로잉 포스트는 추천 포스트와 어떤점이 달라서 정상 작동한 것일까요? 추가) 이 글 작성하고 추천 포스트에도 useSuspenseInfiniteQuery를 적용했는데 팔로잉 포스트처럼 안 나오고 이전과 동일하게 다른 유저의 id도 함께 날라오는데 왜 그럴까요? 추천 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan2'도 함께 날라오는중 팔로잉 포스트 결과 현재 로그인 한 유저의 id는 'jihwan3' Comments에 'jihwan3'만 날라오는 중 Hearts도 jihwan3가 좋아요를 안 눌러서 비어있는 모습 page.tsx import { Suspense } from "react"; import { auth } from "@/auth"; import { Container } from "./_component/styled"; import HomeTab from "./_component/HomeTab"; import HomeTabProvider from "./_component/HomeTabProvider"; import PostForm from "./_component/PostForm"; import SuspenseDecider from "./_component/SuspenseDecider"; import Loading from "../_component/LoadingUI"; export default async function Home() { const session = await auth(); return ( <Container> <HomeTabProvider> <HomeTab></HomeTab> <PostForm me={session} /> <Suspense fallback={<Loading />}> {/* @ts-expect-error Server Component */} <SuspenseDecider /> </Suspense> </HomeTabProvider> </Container> ); } SuspenseDecider.tsx import { QueryClient, HydrationBoundary, dehydrate } from "@tanstack/react-query"; import getRecommendPosts from "../_lib/getRecommendPosts"; import getRecommendPostsServer from "../_lib/getRecommendPostsServer"; import PostDisplay from "./PostDisplay"; export default async function SuspenseDecider() { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["posts", "recommends"], queryFn: getRecommendPostsServer, initialPageParam: 0, getNextPageParam: (lastPage, pages) => lastPage.at(-1)?.postId, pages: 1, }); return ( <HydrationBoundary state={dehydrate(queryClient)}> <PostDisplay /> </HydrationBoundary> ); } getRecommendPostsServer.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; import { cookies } from "next/headers"; type Prop = { pageParam: number; }; const getRecommendPostsServer: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", headers: { Cookie: cookies().toString(), }, }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPostsServer; postDisplay.tsx "use client"; import { use } from "react"; import { TabContext } from "./HomeTabProvider"; import RecommendPosts from "./RecommendPosts"; import FollowingPosts from "@/app/(afterLogin)/home/_component/FollowingPosts"; export default function PostDisplay() { const { selectedMenu } = use(TabContext); if (selectedMenu === "recommend") { return <RecommendPosts />; } return <FollowingPosts />; } RecommendPosts.tsx "use client"; import { useEffect, Fragment } from "react"; import { InfiniteData, useInfiniteQuery } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getRecommendPosts from "../_lib/getRecommendPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function RecommendPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "recommends"], queryFn: getRecommendPosts, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ /* Optional options */ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, isFetching, hasNextPage, fetchNextPage]); if (!data) return null; // 이거 에러는...? type error인데.. -> InfiniteData로 해결 return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((post: IPost) => ( <Post key={post.postId} post={post}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "50px" }}></div> </> ); } getRecommendPost.ts import { QueryFunction } from "@tanstack/query-core"; import { Post as IPost } from "@/model/Post"; type Prop = { pageParam: number; }; const getRecommendPosts: QueryFunction<IPost[], [_1: string, _2: string], number> = async ({ pageParam }: Prop) => { const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { method: "get", credentials: "include", }); if (response.ok) return response.json(); else throw new Error(); }; export default getRecommendPosts; FollowingPosts.tsx "use client"; import { Fragment, useEffect } from "react"; import { useSuspenseInfiniteQuery, InfiniteData } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import getFollowingPosts from "../_lib/getFollowingPosts"; import Post from "../../_component/Post"; import { Post as IPost } from "@/model/Post"; export default function FollowingPosts() { const { isFetching, fetchNextPage, hasNextPage, data } = useSuspenseInfiniteQuery<IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number>({ queryKey: ["posts", "followings"], queryFn: getFollowingPosts, initialPageParam: 0, getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => lastPage.at(-1)?.postId, }); const { ref, inView } = useInView({ threshold: 0, delay: 100, }); useEffect(() => { if (inView) !isFetching && hasNextPage && fetchNextPage(); }, [inView, fetchNextPage, hasNextPage, isFetching]); if (!data) return null; return ( <> {data.pages.map((ele: IPost[], idx: number) => ( <Fragment key={idx}> {ele.map((ele) => ( <Post key={ele.postId} post={ele}></Post> ))} </Fragment> ))} <div ref={ref} style={{ height: "100px" }}></div> </> ); }

  • react
  • next.js
  • react-query
댓글 1 좋아요 0 조회수 288

현재 스프링db2편 학습하는 중인데요

해결됨

스프링 DB 2편 - 데이터 접근 활용 기술

영상에선 itemservice-db파일 기존의 코드를 수정해서 사용하라고 하셔서 그렇게 했는데요 거기에 깔려있는게 2.6.5입니다. id 'org.springframework.boot' version '2.6.5' 근데 강의 자료에선 이제 3.0이상을 쓰라고 하셔서요 이게 일단 거기 있는데로 2.65로 진행해도 되는건가요? 아님 spring.io가서 3.0을 다시 깔아야하나요 jpa까지 하다가 오류가 계속나서 처음부터 다시 시작하려고 하는데요 일단 영상 그래도 2.6.5으로 진행하고 싶은데 자료를 계속 보는데 전부 2.xx는 지원이 끊겨서 3.0으로 쓰라고 하셔서요 진짜 2.xx다 빼고 3.0이상으로 전부 바꿔야 하나요?

  • spring
  • mvc
  • jpa
  • querydsl
  • spring-data-mybatis
  • spring-jpa
  • spring-db
pyjava 댓글 1 좋아요 0 조회수 329

mockServiceWorker.js 파일이 프로젝트내에 포함되어 있어야 하나요?

해결됨

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에 "msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
bn.kim 댓글 2 좋아요 1 조회수 297

모의문제 작업1 데이터 불러오기

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

선생님 모의문제 1을 풀려고 하는데 데이터 members를 불러오는게 이해가 안돼서요ㅜㅜ 어떻게 저장한다는 걸까요..? data: members.csv 자체에는 저장하는게 없지 않나요?

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
olive h 댓글 1 좋아요 1 조회수 401

슬라이싱 할때

미해결

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

선생님! iloc같은경우 인덱스값은 그 앞에 까지 뽑기때문에 +1 해주는 범위까지 설정 해 주는것인데, 컬럼 번호 쓸때는 해당 없는거 같네요?! quiz 2번 푸는데 iloc로 메뉴~할인율 까지 할때 범위를 :3으로 하시길래요! 위에 설명할때는 iloc때 범위를 :로 나타낼 때 마지막을 포함하지 않는다고 하셨는데, 인덱스만 포함하지 않는게 맞는거죠?

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
moonwrd 댓글 1 좋아요 0 조회수 185

회원가입 과제 완료용

미해결

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

안녕하세요!! 과제 완료해서 피드백 부탁드리고자 올렸습니다! 앞으로 잘 부탁 드립니당~ <html> <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html> <css> * { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }

  • react
  • node.js
  • seo
  • graphql
  • next.js
개발하는 알파카 댓글 2 좋아요 0 조회수 301

인기 태그

인프런 TOP Writers

주간 인기글