묻고 답해요

개발자 도구에서 응답이 확인이 안됩니다.

미해결

Vue.js 끝장내기 - 실무에 필요한 모든 것

안녕하세요. 복습겸 다시 정주행 중에 문제점이 발생해서 질문드립니다. 아래 스샷 처럼 중복 제목으로 작성 했을 때 네트워크 패널 상태인데요.. 콘솔로는 400에러가 발생했다고 나타나며 console.log 로도 잘 나옵니다. 그런데 네트워크 패널에서 posts 요청에서 204 코드가 나오고 400 에러코드 사항은 안나옵니다;; preview나 Response 탭에서는 Faild to load response data 라는 문구가 나타나구요. 정상 등록 때도 마찬가지입니다.글은 등록 되지만 response 부분이 똑같으며 posts 요청에 204 응답 코드만 올뿐 201 코드는 오질 않습니다. 왜이러는걸까여?? 작성 api 만들때부터 이러네요;; 이전엔 응답이 잘 왔습니다;;

• javascript
• vuejs
• vuex

thymeself 설정과 관련된 질문입니다.

미해결

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

강의 정말 잘 듣고 있습니다. application.yml spring: thymeleaf: name: thymeleaf/* prefix: classpath:templates/ suffix: .html cache: false datasource: #띄어쓰기 2칸 url: jdbc:h2:tcp://localhost/~/jpashop #4칸 username: sa password: driver-class-name: org.h2.Driver jpa: show-sql: true hibernate: ddl-auto: update properties: hibernate.format_sql: true http://localhost:8080 를 실행하면 아래와 같은 에러가 나네요. ㅠ 혹시몰라서 yml에서 name도 설정 했는데, 어떤게 잘못 됬는지 모르겠습니다. 확인해주시면 감사드리겠습니다. 감사합니다! This application has no explicit mapping for /error, so you are seeing this as a fallback. Sun Oct 04 21:53:58 KST 2020 There was an unexpected error (type=Internal Server Error, status=500). Error resolving template [home], template might not exist or might not be accessible by any of the configured Template Resolvers org.thymeleaf.exceptions.TemplateInputException: Error resolving template [home], template might not exist or might not be accessible by any of the configured Template Resolvers at org.thymeleaf.engine.TemplateManager.resolveTemplate(TemplateManager.java:869) at org.thymeleaf.engine.TemplateManager.parseAndProcess(TemplateManager.java:607) at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1098) at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1072) at org.thymeleaf.spring5.view.ThymeleafView.renderFragment(ThymeleafView.java:362) at org.thymeleaf.spring5.view.ThymeleafView.render(ThymeleafView.java:189) at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1372) at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1118) at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1057) at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:943) at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006) at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:898) at javax.servlet.http.HttpServlet.service(HttpServlet.java:626) at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:883) at javax.servlet.http.HttpServlet.service(HttpServlet.java:733) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:100) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:93) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:94) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:201) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:202) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:97) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:541) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:143) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:78) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343) at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:374) at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65) at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:868) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1590) at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1130) at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:630) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.base/java.lang.Thread.run(Thread.java:832)

• spring-boot
• spring
• 웹앱
• JPA
• java

dashboard 문제.

대세는 쿠버네티스 (초급~중급편)

삭제된 글입니다

• kubernetes
• docker

2:41 초 부분부터

해결됨

페이스북 클론 - full stack 웹 개발

원래는 오렌지색 박스두개가 있었는데 wrap class 만들고 그안에 box 클래스 만들어서 .wrap.class는 색깔이 빨간색으로 나오게 지정했잖아요 여기까진 이해가 가는데 왜 기존에 있던 오렌지색 div태그는 안보이나요?

• python
• django
• javascript
• linux
• HTML/CSS
• 클론코딩

질문

미해결

포토샵 기본기 하루 5분, 3주 만에 끝내기

레이어 한곳에 패턴을 만들지않고 왜 복사하나요 어차피 합칠거면 그냥 한곳에 해도되지않나요?

• photoshop

수강기간문의

미해결

Azure 기초 (AZ-900)

다른강의와 다르게 이 강의는 수강기간이 정해져 있는데 아직 강의 내용에 대한 이해가 부족해 시간이 더 필요합니다. 혹시 수강기간을 더 늘려주실 수 있나요?

• azure

TickRoom 함수

해결됨

[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part7: MMO 컨텐츠 구현 (Unity + C# 서버 연동 기초)

안녕하세요 TickRoom 함수에 람다 함수를 room.Update(); 로 넣어주셨는데 room.Push(room.Update); 를 넣어야 lock이 실행되는게 아닌지 궁금합니다~! static void TickRoom(GameRoom room, int tick = 100) { var timer = new System.Timers.Timer(); timer.Interval = tick; timer.Elapsed += ((s, e) => { room.Update(); }); timer.AutoReset = true; timer.Enabled = true; _timers.Add(timer); }

• C#
• unity

setTimeout이 여러번 실행 될 수 있나요?

미해결

인터랙티브 웹 개발 제대로 시작하기

강의 그대로 했는데, setInterval처럼 정해진 시간마다 다시 반복이 되어서... 스크립트 한번 확인 부탁드려도 될까요? let timeId ; const btn = document.querySelector('.btn') function play (){ console.log('setIimeOut') } timeId = setTimeout( play, 4000); btn.addEventListener('click',function(){ clearTimeout(timeId); })

• 인터랙티브-웹
• javascript
• HTML/CSS

Create_page 작성하고 갤러리에서 사진 불러올 때

미해결

Flutter 입문 - 안드로이드, iOS 개발을 한 번에 (with Firebase)

안드로이드폰으로 실행하면 잘 구동되는데 아이폰으로 실행하면 갤러리로 이동하지 않고 계속 디바이스 연결이 끊긴다고 나오는데 어떻게 해결해야되나여..?

• android
• Flutter
• ios

에러가 뜹니다 ㅠㅠ

미해결

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

강의 따라하면서 같이 코드 작성하고있었습니다! 이번강의에서 config를 할때 분명 @autowired랑 @repository @service를 삭제 하고 @bean으로 할당을 하였는데 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'requestMappingHandlerMapping' defined in class path resource [org/springframework/boot/autoconfigure/web/servlet/WebMvcAutoConfiguration$EnableWebMvcConfiguration.class]: Invocation of init method failed; nested exception is java.lang.IllegalStateException: Ambiguous mapping. Cannot map 'helloController' method hello.hellospring.controller.HelloController#helloApi(String) to {GET /hello-string}: There is already 'helloController' bean method hello.hellospring.controller.HelloController#helloString(String) mapped. at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1794) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:594) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:516) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:324) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:322) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:202) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:897) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:879) ~[spring-context-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:551) ~[spring-context-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:143) ~[spring-boot-2.3.4.RELEASE.jar:2.3.4.RELEASE] at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:758) ~[spring-boot-2.3.4.RELEASE.jar:2.3.4.RELEASE] at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:750) ~[spring-boot-2.3.4.RELEASE.jar:2.3.4.RELEASE] at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:397) ~[spring-boot-2.3.4.RELEASE.jar:2.3.4.RELEASE] at org.springframework.boot.SpringApplication.run(SpringApplication.java:315) ~[spring-boot-2.3.4.RELEASE.jar:2.3.4.RELEASE] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1237) ~[spring-boot-2.3.4.RELEASE.jar:2.3.4.RELEASE] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1226) ~[spring-boot-2.3.4.RELEASE.jar:2.3.4.RELEASE] at hello.hellospring.HelloSpringApplication.main(HelloSpringApplication.java:10) ~[classes/:na] at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:na] at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:64) ~[na:na] at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:na] at java.base/java.lang.reflect.Method.invoke(Method.java:564) ~[na:na] at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:49) ~[spring-boot-devtools-2.3.4.RELEASE.jar:2.3.4.RELEASE] Caused by: java.lang.IllegalStateException: Ambiguous mapping. Cannot map 'helloController' method hello.hellospring.controller.HelloController#helloApi(String) to {GET /hello-string}: There is already 'helloController' bean method hello.hellospring.controller.HelloController#helloString(String) mapped. at org.springframework.web.servlet.handler.AbstractHandlerMethodMapping$MappingRegistry.validateMethodMapping(AbstractHandlerMethodMapping.java:636) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.web.servlet.handler.AbstractHandlerMethodMapping$MappingRegistry.register(AbstractHandlerMethodMapping.java:603) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.web.servlet.handler.AbstractHandlerMethodMapping.registerHandlerMethod(AbstractHandlerMethodMapping.java:318) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping.registerHandlerMethod(RequestMappingHandlerMapping.java:378) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping.registerHandlerMethod(RequestMappingHandlerMapping.java:75) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.web.servlet.handler.AbstractHandlerMethodMapping.lambda$detectHandlerMethods$1(AbstractHandlerMethodMapping.java:288) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at java.base/java.util.LinkedHashMap.forEach(LinkedHashMap.java:723) ~[na:na] at org.springframework.web.servlet.handler.AbstractHandlerMethodMapping.detectHandlerMethods(AbstractHandlerMethodMapping.java:286) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.web.servlet.handler.AbstractHandlerMethodMapping.processCandidateBean(AbstractHandlerMethodMapping.java:258) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.web.servlet.handler.AbstractHandlerMethodMapping.initHandlerMethods(AbstractHandlerMethodMapping.java:217) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.web.servlet.handler.AbstractHandlerMethodMapping.afterPropertiesSet(AbstractHandlerMethodMapping.java:205) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping.afterPropertiesSet(RequestMappingHandlerMapping.java:189) ~[spring-webmvc-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.invokeInitMethods(AbstractAutowireCapableBeanFactory.java:1853) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1790) ~[spring-beans-5.2.9.RELEASE.jar:5.2.9.RELEASE] ... 22 common frames omitted Process finished with exit code 0 이렇게 에러가뜹니다 ㅠㅠ 이미 bean이 존재한다고 에러가 뜨는 것 같습니다 ㅠㅠ 그래서 혹시몰라서 이번강의에서 config파일 삭제하고 이전강의까지의 코드 형태로다가 autowired랑 service기타등등을 다시 control+z로 되돌려서 다시 시행해보았는데 같은 에러가 뜹니다

• java
• MVC
• spring-boot
• spring

[맥OS] 수업에서 나온 아나콘다 맥 명령어, 오늘 시점에서 유효한 것 입니다.

미해결

파이썬 입문 및 웹 크롤링을 활용한 다양한 자동화 어플리케이션 제작하기

conda create --name test1 python=3.8 ⇒ 파이선 3.8 버전으로 test1 가상 환경을 만든다. source activate test1 ⇒ test1 가상환경 활성화 및 이동 conda deactivate ⇒ test1 비활성화 및 base로 돌아 옴 conda info —envs ⇒ 가상환경 리스트 출력 conda list ⇒ 가상환경 내 설치 소프트웨어 리스트 출력 conda clean -a ⇒ 캐쉬 및 로그 파일 삭제 conda update conda ⇒ 아나콘다 업데이트 conda remove -name(-n) "이름" --all ⇒ 가상환경 삭제

• python
• 웹-크롤링

lastIndexOf()에 대한 질문입니다

미해결

윤재성의 Node.js 서버 프로그래밍 과정

lastIndexOf()가 뒤에서부터 값을 찾고 그 값의 위치를 앞에서부터 찾아서 반환을 해주는거라고 하셨는데 그럼 indexOf()랑 다를게 있나요..??

• nodejs

sort 문의

미해결

[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part1: C# 기초 프로그래밍 입문

어려울수 있다고 해서 열의를 가지고 안보고 첫번째 , 두번째 수와 크기를 비교하여 swap해서 자리교체 해서 정렬 했는데 static void Sort(int[] scores) //정렬 { int temp = 0; for (int i = 0; i < scores.Length-1; i++) { for(int j= i+1; j<scores.Length; j++) { if(scores[i] > scores[j]) { temp = scores[i]; scores[i] = scores[j]; scores[j] = temp; } } } foreach(int score in scores) { Console.Write($"{score} "); } } 강사님 말씀대로 방식은 여러개라면 이렇게 해도 맞는거죠?

• C#

맥 os 강의 재생 오류

해결됨

파이썬 입문 및 웹 크롤링을 활용한 다양한 자동화 어플리케이션 제작하기

안녕하세요. 다름이아니라 맥 os 버전으로 따로 올려주신 영상들이 현재 개인정보보호 설정에 의해 Vimeo에서 재생할 수 없다고 뜨네요..! 사파리랑 크롬브라우저로 시도해봤는데 안 되는 걸 보면 영상이 막힌 것 같은데 혹시 체크해주실 수 있으실까요?

• python
• 웹-크롤링

CASE를 활용한 테이블 피봇 리트코드 문제 질문

미해결

[백문이불여일타] 데이터 분석을 위한 중급 SQL

강의와 관련있는 질문 을 남겨주세요. &bull; 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등) &bull; 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색 을 해주세요. (중복 질문을 자제해주세요.) &bull; 서비스 운영 관련 질문은 인프런 우측 하단 &lsquo;문의하기&rsquo; 를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달 에도 요령이 필요합니다. &bull; 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요. &bull; 강의실 페이지 (/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다. &bull; 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재 해주세요. &bull; 수업 특정 구간에 대한 질문은 꼭 영상 타임코드 를 남겨주세요! 구체적인 질문 일수록 명확한 답을 받을 수 있어요. &bull; 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요. &bull; 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요 . &bull; 정확한 질문 내용과 함께 코드 를 적어주시거나, 캡쳐 이미지 를 첨부하면 더욱 좋습니다. 기본적인 예의 를 지켜주세요. &bull; 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. &bull; 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. &bull; 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용 은 스팸 처리 등 제재를 가할 수 있습니다. 안녕하세요. CASE를 활용한 테이블 피봇 리트코드 문제풀이 영상을 보다 질문이 생겨서 글 남깁니다. SUM(CASE WHEN month = 'Jan' THEN revenue ELSE NULL END) AS Jan_Revenue SUM이면 month가 Jan일 때 revenue들을 더한 값들이 나와야하는 것 아닌가요? 어떻게 하나하나 출력이 되는지 잘 이해가 되지 않습니다. 감사합니다.

• sql

전체적인 테이블 구조를 알 수 있을까요?

미해결

[리뉴얼] React로 NodeBird SNS 만들기

ERD와 함께 보는게 이해하기 편할것 같은데 혹시 이미지 첨부해주실수 있으신가요?

• express
• nodejs
• redux
• react
• Next.js

컴포넌트 스캔 파트 문의

미해결

스프링 핵심 원리 - 기본편

1. @Component는 붙이고, @Autowired는 붙이지 않아도 자동으로 DI가 작동해서 테스트에서 에러가 나지 않아요... 어떻게 작동하는 것일까요? --> 그 다음 챕터 강의로 해결했습니다 2. @Configuration을 "스프링 빈이 싱글톤을 유지하도록 추가 처리를 한다"는 부분이 어떤 의미인지 궁금합니다. 다른 Component 계열 어노테이션들(ex. @Service)도 별도 옵션을 두지 않으면 싱글톤 빈을 만든다고 이해했는데 아닌가요?

• spring
• oop

리셋 css 적용 시 사소한 문제가 있습니다.

미해결

실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)

영상 아래의 /*reset*/ 을 복사하여 붙여 넣으면 img {vertical-align: middle;}인해 영상 11분 59초에 나오는 paddig-top 15px 때문에 가운데로 오지 않고 로고가 아래로 쳐지게 됩니다.

• HTML/CSS
• 웹 디자인
• 반응형-웹

홈페이지 링크 부탁드립니다.

미해결

Python 부트캠프

초반에 나오는 페이지를 볼 수 있는 방법 부탁드려요ㅠㅠ

• python

scroll-section 1에서 2로 넘어갈때 잠깐 텍스트들이 뜹니다

미해결

애플 웹사이트 인터랙션 클론!

(() => { let yOffset = 0; // window.pageYOffset 대신 쓸 변수 let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합 let currentScene = 0; // 현재 활성화된(눈 앞에 보고있는) 씬(scroll-section) let enterNewScene = false; // 새로운 scene이 시작된 순간 true const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d') }, values: { messageA_opacity_in: [0, 1, { start: 0.1, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.3, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.5, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.7, end: 0.8 }], messageA_translateY_in: [20, 0, { start: 0.1, end: 0.2 }], messageB_translateY_in: [20, 0, { start: 0.3, end: 0.4 }], messageC_translateY_in: [20, 0, { start: 0.5, end: 0.6 }], messageD_translateY_in: [20, 0, { start: 0.7, end: 0.8 }], messageA_opacity_out: [1, 0, { start: 0.25, end: 0.3 }], messageB_opacity_out: [1, 0, { start: 0.45, end: 0.5 }], messageC_opacity_out: [1, 0, { start: 0.65, end: 0.7 }], messageD_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], messageA_translateY_out: [0, -20, { start: 0.25, end: 0.3 }], messageB_translateY_out: [0, -20, { start: 0.45, end: 0.5 }], messageC_translateY_out: [0, -20, { start: 0.65, end: 0.7 }], messageD_translateY_out: [0, -20, { start: 0.85, end: 0.9 }] } }, { // 1 type: 'normal', // heightNum: 5, // type normal에서는 필요없음 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2'), messageA: document.querySelector('#scroll-section-2 .a'), messageB: document.querySelector('#scroll-section-2 .b'), messageC: document.querySelector('#scroll-section-2 .c'), pinB: document.querySelector('#scroll-section-2 .b .pin'), pinC: document.querySelector('#scroll-section-2 .c .pin') }, values: { messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.6, end: 0.65 }], messageC_translateY_in: [30, 0, { start: 0.87, end: 0.92 }], messageA_opacity_in: [0, 1, { start: 0.25, end: 0.3 }], messageB_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], messageC_opacity_in: [0, 1, { start: 0.87, end: 0.92 }], messageA_translateY_out: [0, -20, { start: 0.4, end: 0.45 }], messageB_translateY_out: [0, -20, { start: 0.68, end: 0.73 }], messageC_translateY_out: [0, -20, { start: 0.95, end: 1 }], messageA_opacity_out: [1, 0, { start: 0.4, end: 0.45 }], messageB_opacity_out: [1, 0, { start: 0.68, end: 0.73 }], messageC_opacity_out: [1, 0, { start: 0.95, end: 1 }], pinB_scaleY: [0.5, 1, { start: 0.6, end: 0.65 }], pinC_scaleY: [0.5, 1, { start: 0.87, end: 0.92 }] } }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3'), canvasCaption: document.querySelector('.canvas-caption') }, values: { } } ]; function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { if (sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } else if (sceneInfo[i].type === 'normal') { sceneInfo[i].scrollHeight = sceneInfo[i].objs.container.offsetHeight; } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; if (totalScrollHeight >= yOffset) { currentScene = i; break; } } document.body.setAttribute('id', `show-scene-${currentScene}`); } function calcValues(values, currentYOffset) { let rv; // 현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; if (values.length === 3) { // start ~ end 사이에 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd) { rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1]- values[0]) + values[0]; } else if (currentYOffset < partScrollStart) { rv = values[0]; } else if (currentYOffset > partScrollEnd) { rv = values[1]; } } else { rv = scrollRatio * (values[1]- values[0]) + values[0]; } return rv; } function playAnimation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; switch (currentScene) { case 0: // console.log('0 play'); if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.42) { // in objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.62) { // in objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.82) { // in objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`; } break; case 2: // console.log('2 play'); if (scrollRatio <= 0.32) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.67) { // in objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } else { // out objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } if (scrollRatio <= 0.93) { // in objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } else { // out objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } break; case 3: // console.log('3 play'); break; } } function scrollLoop() { enterNewScene = false; prevScrollHeight = 0; for (let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { enterNewScene = true; currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); } if (yOffset < prevScrollHeight) { enterNewScene = true; if (currentScene === 0) return; // 브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일) currentScene --; document.body.setAttribute('id', `show-scene-${currentScene}`); } if (enterNewScene) return; playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); // DOMContentLoaded : HTML구조만 로드되면 바로 실행, 실행타이밍 빠름 window.addEventListener('load', setLayout); window.addEventListener('resize', setLayout); })(); 보통스크롤영역이 있는 scroll-section1에서 2로 넘어갈때 순간적으로 텍스트들과 핀이 잠깐 떳다가 사라집니다. 이게 처음 새로고침했을때만 나타나고 한번 지나가고나면 안나타납니다. 그리고 이렇게 이 부분은 원래 이렇게 다음섹션으로 넘어갈때 침범하는게 맞는건가요?

• HTML/CSS
• 웹 디자인
• javascript
• 인터랙티브-웹
• svg
• 클론코딩