inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

다시 질문 드립니다 ㅠㅠ CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html> /* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: inline; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; border-radius: 50%; animation: loading 1s linear infinite; } .loading span:nth-child(1) { animation-duration: 0s; background-color:crimson; } .loading span:nth-child(2) { animation-duration: 0.2s; background-color:dodgerblue; } .loading span:nth-child(3) { animation-duration: 0.4s; background-color:royalblue; } @keyframes loading { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(0.5); } } 이렇게 작성했는데 go live 화면에선 이렇게 뜨고 애니메이션이 안나와요.. ㅠㅠ 뭐가 문제일까요??? 몇주동안 안되요..

  • HTML/CSS
  • jquery
SH 댓글 1 좋아요 0 조회수 362

도형 로딩 애니메이션 질문입니다

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html> /* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; } .loading span:nth-child(1) {} .loading span:nth-child(2) {} .loading span:nth-child(3) {} 지금 이 상태인데 화면에 아무것도 나타나지 않습니다. 이렇게 뜨는데 뭐가 문제일까요?

  • HTML/CSS
SH 댓글 3 좋아요 1 조회수 256

도형 로딩 애니메이션 질문입니다

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

이렇게 뜨는데 뭐가 문제일까요.. go live 화면에서도 안보이고 문제가 뭔지 모르겠어요 ㅠ

  • HTML/CSS
  • jquery
댓글 1 좋아요 1 조회수 175

중급편 완강 후 스프링

해결됨

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

방금 중급편 오픈 예정 글을 보고 왔습니다! 혹시 중급편에서 예외처리와 제네릭 컬렉션에 관해서 공부 후에 고급편 듣지 않고 바로 스프링으로 넘어가도 되나요?!

  • java
  • 객체지향
박병천 댓글 1 좋아요 0 조회수 398

연관관계 편의메서드 개인질문

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 있긴한데 좀 다릅니다 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 연관관계 편의메서드와 관련된 질문입니다. public void setMember(Member member) { this.member = member; member.getOrders().add(this); } public void addOrderItem(OrderItem orderItem) { orderItems.add(orderItem); orderItem.setOrder(this); } public void setDelivery(Delivery delivery) { this.delivery = delivery; delivery.setOrder(this); } 공부하던 도중 일대다, 다대일, 일대일 연관관계 매서드가 모두 다른 것을 발견했습니다. 제 궁금증은 다대일에서는 왜 meber.getOrders().add(this)로 세팅하고 일대일이나 다대일에서는 orderItem.setOrder(this)로 세팅하는지 궁금한 것 입니다. 커뮤니티에 관련 질문을 찾던 도중 jpa 기본편을 보시라고 하셨는데 위치를 못 찾겠습니다. 알려주시면 감사하겠습니다. 추가로 제가 자바의 List의 메소드에 대한 이해가 부족해서 모르는가 싶기도 한데 그게 맞을까요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
이용준 댓글 3 좋아요 0 조회수 558

수업 소스 다운로드 어디서 받을수 있나요?

해결됨

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영상 수업 소스 다운로드는 어디서 받을수 있나요? 영상 수업 동일하게 코딩해도 오류가 나거나 정상적으로 출력되지 않아..

  • HTML/CSS
  • 인터랙티브-웹
  • 반응형-웹
동주 댓글 1 좋아요 1 조회수 431

현재 강의 Express 프레임워크 사용하기 를 듣고 있는데요

해결됨

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

이전 강의인 그랩 마켓 서버 구축하기 에서는 node_modules가 없었는데 이번 강의부터는 생성 되어있습니다. 생성 과정을 건너뛰셨다면 어디서 확인할 수 있는지는 강의에 포함시켜주시는게 맞는거 같습니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
최지혁 댓글 2 좋아요 2 조회수 323

세타 조인이 안되요

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요?예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 강의 내용과 그대로 세타조인을 따라 했는데 query나온 것을 보니 cross join이 없어요 그리고 left join도 처음 sql에서는 left join이 나오는데 번역된 sql에서는 left join이 생략되는데 jpa가 최적화를 한 것일까요?

  • java
  • jpa
서민우 댓글 1 좋아요 0 조회수 490

Domain model패턴에서 생성메서드 로직 구현시 setter문제 질문있습니다.

해결됨

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

이 부분이 생성메서드 부분인데요.. 대부분 setter를 사용하여 서비스계층에서 해야 할 로직을 엔터티 내에서 처리하고 있는데 영한 선생님께서 강조하시는 setter를 열어두지 않는다면(필요에 따라서는 열어두라고 하셧는데...) 어떤식으로 처리하는지 도저히 감이 잡히지 않네요..ㅜ 이 부분 설명해주시는 강의 챕터가 따로 있을까요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 244

props에 대해 궁금한 점이 있습니다.

미해결

처음 만난 리액트(React)

우선 좋은 강의를 무료로 제공해 주신다는 점에 매우 감사드립니다 🙂 다름이 아니라 props에 대해 궁금한 점이 있어서 글 남깁니다. function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); } 만약 위와 같이 코드를 작성했다고 하면, 이 컴포넌트를 사용할 때 아래와 같이 사용할 것으로 예상됩니다. root.render( <React.StrictMode> <SampleComponent name={'kim'} age={12} /> </React.StrictMode> ); 근데 만약 코드가 매우 길어지고, props로 넘겨야 하는 것들이 많아진다고 가정해 보겠습니다. 예를 들어 props.name props.age props.university props.profilePhoto props.grade etc... 이런 경우에는 도대체 props로 어떤 것들을 넘겨 주어야 하는지 굉장이 헷갈리는 상황이 발생할 것 같은데 이를 해결하기 위한 방법이 있을지 궁금합니다. ++ 제가 찾아본 바로는 아래와 같이 코드를 작성하면 된다고 합니다. function SampleComponent({name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> </div> ); } 그런데 이 방식을 사용하게 되면 children은 어떻게 넘겨 줄 수 있는지가 궁금합니다. 그냥 아래와 같이 처리하면 되는 것일까요? function SampleComponent({children, name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> <div>{children}</div> </div> ); } 또한, 이 방식이 맞는 방식이라면, 굳이 아래 코드와 같이 props를 사용하시는 이유가 무엇인지도 궁금합니다. function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }

  • HTML/CSS
  • javascript
  • react
David Heo 댓글 1 좋아요 1 조회수 405

inherit와 100%의 차이가 궁금합니다.

해결됨

중상급 퍼블리싱을 위한 CSS3의 모든 것

안녕하세요 선생님, ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 를 듣다가 궁금한 점이 생겨 질문 드립니다. 10:32 분에 보여지는 .dropdown { width: 150px'} .dropdown-btn { width:inherit;} 14:50 분 .tour-item { width:400px;} .tour-photo img { width:100%;} 둘다 부모 자식관계라 부모의 크기를 따라가는 것도 이해가 되었는데 inherit 과 100% 는 그럼 같은 기능을 가진 코드일까요? 두 가지 방식 모두 사용할 수 있다는 것을 소개해주신건지, 아님 특정 상황에 각각의 사용법이 있는지 궁금합니다.

  • HTML/CSS
tnrud2668 댓글 2 좋아요 1 조회수 364

회원가입-status 201 Ok- 리다이렉트 안되는 현상

미해결

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

일전에 동일한 문제로 질문 올렸는데, 혹시나 제 코드에 발견되지 않은 오타나 문제가 있을까하여 제로초님 깃에서 다운받은 ch4폴더로 실행해도 동일한 문제 발생합니다. MacOs: Ventura 13.6.4 크롬브라우저로 보고있습니다. DB연결문제는 Postgresql은 버전을 낮춰서 Homebrew로 설치하고, Username을 맥os 유저네임으로 변경하니까 다행히 연결이되었습니다. 그런데 여전히, 회원가입후 리다이렉트 안되는 현상과 심지어 회원가입 된 Postgresql 테이블에 User정보도 잘 들어가있고, 회원가입된 유저의 id,비번으로 로그인해도 로그인도 안됩니다. package.json 버전정보: 클라이언트에서 리턴받은 값: 서버에서 나오는 console: 무엇이 문제일까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
라푼젤 댓글 5 좋아요 0 조회수 864

어플리케이션 서비스와 도메인 서비스의 구성

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

안녕하세요. OSIV 강의 후반부 내용에서 규모가 비교적 큰 프로젝트에서는 도메인 계층과 더불어 그 앞단에 애플리케이션 계층을 추가하는걸 고려해보라고 말씀주신 내용이 있었는데요. 이게 제가 찾고 있는 해답이 아닐까 싶어 조금 더 자세히 알고 싶어 질문 드립니다. 질문이 조금은 장황해도 너그러히 이해주시면 감사드리겠습니다. 최근에 개인 프로젝트를 수행해보면서 제가 학습해온 개념들(JPA, DDD, MSA)이 중점적으로 다루는 내용이 다르다보니 프로젝트 구성에서 혼란을 겪어오고 있습니다. 현재 개인 프로젝트 패키지 구조는 제가 느끼기에 가장 와닿았던 controller - application - domain - repository로 나뉘어 개발하고 있습니다. 이때 application 계층의 역할은 하나의 요구사항(가입, 해지 등)을 해결하기 위해 필요한 하위 계층의 애플리케이션 서비스들을 호출하는 facade를 구성합니다. 또, domain에서는 도메인 객체와 더불어 해당 도메인의 애플리케이션 서비스를 통해 비즈니스적 처리를 추상화하여 표현하고, 데이터 핵심 데이터 처리를 repository에 위임하도록 구성했습니다. 다만 이해가 안 갔던건 트랜잭션을 처리 계층에 대한 내용인데요. 제가 본 msa 도서에서는 facade에서 수행되는 애플리케이션 서비스 각각이 서로 다른 도메인 처리이므로 application 계층이 아닌, domain 메소드 단위로 트랜잭션이 구성되어야한다더라구요. 그런데 사실 제가 개발하고 있는 프로젝트는 MSA 구조가 아니고, 여러 에그리거트가 복합된 구조이기에 위 구조와 사상을 가지고 개발하기 어렵다는 생각이 들었습니다. 또한, 서로 다른 도메인의 애플리케이션 서비스간에 호출관계에서도 어려움을 겪었는데요. 예를 들어, 두 user가 하나의 group을 구성하는 서비스를 만들 때도 groupService라는 group에 종속된 애플리케이션 서비스에서 두 사용자 정보를 불러오는 userService 주입하자니, 서로 상이한 서비스간에 불필요한 의존성이 생기고, 같은 레벨의 서비스를 참조하는 것이 어색하다고 느껴졌습니다. 그래서 facade 계층에서 두 서비스를 주입하여 그룹생성 절차를 처리하자니 한 트랜잭션에 처리되어야한다고 생각하는 그룹 생성 처리 절차에서 회원, 그룹 서비스의 트랜잭션이 분리되니 이상하다고 생각했습니다. 드디어 본격적인 질문인데요. 혹시 영한님께서 말씀하신 애플리케이션 계층이 이렇게 도메인에 종속된 두 개 이상의 서비스가 함께 쓰여야 할 때 쓰이는 것이 맞을까요? 맞다면 controller - application - domain - repository 의 계층구조에서 facade가 들어가던 application에 해당 복합(?) 서비스를 구현하고, 해당 서비스에 대한 dto객체정도들만 구현하면 되는걸까요? 3. 굳이 어플리케이션 계층이 필요로 하지않은 하나의 도메인에만 종속된 기능들을 호출구조를 어떻게 가야할까요? 애플리케이션 계층을 도입한 상황에서 controller에서 domain 계층을 바로 호출하는 것은 일관성이 없어보이고, 또 일관성을 맞추기위해 application 계층에서 도메인 계층으로 BYPASS하는 객체를 만드는 것도 비효율적으로 보이긴합니다. 각각의 케이스에 어떻게 가는게 좋을까요?

  • java
  • spring
  • spring-boot
  • jpa
인생은회전목마 댓글 2 좋아요 0 조회수 742

영속성 컨텍스트 질문

미해결

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

9:57 보시면 51 라인 Account account = accountRepository.findByEmail(email); 이 순간 account 객체는 Persistent 상태이고, 이 코드 이후로 account 이건 다시 detach 상태가 되는데 63라인 accountService.completeSignUp(account); 이 코드로 인하여 다시 Persistent 로 상태가 만들어진다고 생각하면 될까요 ?? (왜냐하면 accountService.completeSignUp(account);에는 트랜잭션어노테이션이붙어있어서)

  • java
  • spring
  • spring-boot
  • jpa
  • thymeleaf
H K 댓글 2 좋아요 0 조회수 267

리액트 연동 오류

미해결

처음 만난 리액트(React)

안녕하세요. 실습 따라하는데 리액트 연동이 안된건지 버튼이 페이지에 안뜨는데 코드를 비교해도 뭐가 문제인지 모르겠어요

  • HTML/CSS
  • javascript
  • react
b_b28 댓글 1 좋아요 1 조회수 837

강의자료

해결됨

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

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

  • java
  • spring
  • mvc
  • spring-boot
whdk333 댓글 2 좋아요 1 조회수 310

HelloSpringApplication 실행 시 입력상자

미해결

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

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] HelloSpringApplication 실행 시 아래와 같은 입력 상자가 뜨는데 이유가 뭔가요?

  • java
  • spring
  • mvc
  • spring-boot
우기 댓글 1 좋아요 0 조회수 365

The `punycode` module is deprecated

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 주소 따라 들어가면 왜 이렇게 되는지 잘 모르겠어요... ㅠㅠ

  • HTML/CSS
  • javascript
  • react
영이 댓글 2 좋아요 1 조회수 564

마지막 파트 기술적 준수 사항 관련 질문

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

■ 질문 남기실 때 꼭! 참고해주세요. btn 태그 안에 span 태그를 마지막에 a링크로 바꾸셨는데 별도로 구성하기 할 때도 동일하게 적용되는 사항일까요?

  • HTML/CSS
  • jquery
  • 웹-디자인
현빈 댓글 1 좋아요 2 조회수 162

Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다.

해결됨

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

Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다. $ npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: react-scripts@5.0.1 npm ERR! Found: typescript@5.3.3 npm ERR! node_modules/typescript npm ERR! typescript@"^5.3.3" from the root project npm ERR! peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3 npm ERR! node_modules/fork-ts-checker-webpack-plugin npm ERR! fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1 npm ERR! node_modules/react-dev-utils npm ERR! react-dev-utils@"^12.0.1" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! 1 more (tsutils) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! npm ERR! Conflicting peer dependency: typescript@4.9.5 npm ERR! node_modules/typescript npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-03-02T03_03_34_358Z-eresolve-report.txt 관련한 안내 좀 부탁합니다.

  • react
  • next.js
  • vitejs
억수 댓글 2 좋아요 0 조회수 422

인기 태그

인프런 TOP Writers

주간 인기글