묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결언리얼 엔진4 입문 (C++ 기반)
MyAnimInstance에 Speed의 property를 BlueprintReadOnly로 했는데 블루프린트에서 수정이 되나요?
MyAnimInstance에 Speed의 property를 BlueprintReadOnly로 했는데 수업 영상에서 볼 수 있듯이, 블루 프린트 화면?에서 애님 프리뷰 에디션에서 Speed를 수정할 수 있는데 BlueprintReadOnly에서 읽기만 가능하고 쓰기는 불가능하다는 의미가 아닌가요?
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
1-3-4강의 영상 3-4분 사이가 이상합니다, 입력하지 않은 코드가 갑자기 나와요 ㅡㅡ
1-3-4강의 영상 3~4분 사이가 이상합니다, 입력하지 않은 코드가 갑자기 나와요 ㅡㅡ 영상편집이 좀 이상합니다. 84번라인이 갑자기 변경됨
-
미해결딥러닝 CNN 완벽 가이드 - TFKeras 버전
선생님 크기 개념이 헷갈립니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 정리하자면, Kernel Size는 필터의 크기이고, Receptive Field는 이 필터가 한 번에 보게되는 이미지의 크기라고 봐도 될까요? 말하고보니 둘이 같은 것 같기도 하고 ... 괜히 헷갈리네욥 ..
-
미해결Slack 클론 코딩[실시간 채팅 with React]
Cannot find name 'SuggestionDataItem'.
SuggestionDataItem을 찾을 수 없다 나오는 데요 어디가 문제일까요? https://github.com/todayscoding/chatting_app/commit/be8f87bad5a5fb581f1dc76b817407ae50d9ce0c
-
미해결플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
반응형 헤더 네비게이션 공부중인데요. 궁금한것이 있어서요.
이미지로 올려 드릴께요^^
-
미해결Vue.js 시작하기 - Age of Vue.js
vuex와 route에 대해…
안녕하세요. vuex가 새로고침을 하면 state가 날아가버리기 때문에 action이나 mutation을 컴포넌트의 created훅에 넣어서 쓰고 있습니다. 이렇게 하면 해당 컴포넌트에는 문제 없이 state가 유지되는데, getters를 불러들인 뒤 해당 컴포넌트의 하위 컴포넌트에 props데이터로 넘겨주면, vue개발자 도구로 보기에는 분명히 값이 존재하는데 하위 컴포넌트에서는 값이 존재하지 않게 됩니다. console.log를 작동시켜 보면 빈 값이 나오네요. 하위 컴포넌트가 라우팅에 따라서 다르게 보여져야 할 부분이라 <router-view :gettersData="gettersData"/> 이런 식으로 넣었는데 혹시 router-view 태그는 props를 받지 못하는 건지 궁금합니다. 만약 문제 없이 받을 수 있다면, 혹시 router-view가 중첩되서 발생하는 문제가 아닐까 싶네요. 지금 컴포넌트 구조가... //parent comp<router-view/> //child comp <div></div> //repetitive comp<router-view :gettersData="gettersData"/> 이런 모양새라서 혹시 router-view 태그가 중첩 되면 안되는 건가 싶기도 하고 그렇네요. 질문을 요약해보자면, 1. Getters를 하위 컴포넌트의 props로 넘겨도 되는지? 2. Router-view 태그로도 props를 보낼 수 있는지? 3. router-view 태그를 부모와 자식 태그에서 중첩해서 사용해도 되는지? 정도가 될 것 같습니다. 감사합니다!
-
미해결스프링 시큐리티
AuthenticationException은 어떤 경우에 발생하는지
AccessDeniedException은 예시를 보여주셔서 예외가 발생하는 경우를 알겠는데 AuthenticationException은 어떤 경우에 발생하는지 잘 모르겠습니다 ㅜㅜ
-
미해결Slack 클론 코딩[실시간 채팅 with React]
로그인 후, navigate()로 채널로 이동시 페이지 에러 관련
에러의 연속이네요..ㅠㅠ 회원가입, 로그인은 전부 잘 되는데 로그인 후에 아래 코드대로라면 채널페이지가 나와야 하는데 if (data) { navigate('/workspace/channel'); return null; } 저 주소로 넘어가긴 하는데 넘어가서 아래 사진처럼 에러가 계속 뜹니다.. 참고로 위 사진처럼 에러 뜨기 전에는 you cannot render a <router> inside another <router>. you should never have more than one in your app. 이런 에러메세지가 나왔는데, 이건 라우터가 중복이라서 나오는거라고 해서 (그렇지만 저는 다른 파일에서도 'Routes'와 'Route'만 썼지, 'BrowserRouter'를 쓰진 않았는데.. 라우터 중복이라는 에러가 왜 나왔는지 모르겠네요) app.tsx파일에서 {BrowserRouter as Router} 를 지우니까 이 메세지는 안나오고 현재는 위 사진과 같이 메세지가 나옵니다.
-
미해결스프링 핵심 원리 - 기본편
request scope bean의 생성을 지연한다는 의미가 무엇일까요?
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용]안녕하세요 공부 중 궁금한 게 있어서 질문드립니다. 1. ObjectProvider.getObject()를 호출하는 시점까지 request scope bean의 생성을 지연한다고 설명해주셨는데요. provider를 사용하지 않는다면 스프링 어플리케이션을 실행하는 시점에 싱글톤 빈은 생성해서 주입이 가능하지만, request scope bean은 실제 고객 요청이 오지 않아 생성되지 않는 문제가 생기잖아요? 그런데 제가 조금 헷갈린 건 실제 고객 요청이 오기 전이라 request scope bean이 생성되지 않는데 왜 윗 문단처럼 request scope bean의 생성을 지연한다고 말씀하신걸까요?ㅠㅠ 궁금한 점은 고객이 요청하기 전에는 scope빈이 생성되지 않는데 그걸 왜 http 요청이 오기전까지 지연을 시키는 지 입니다... 감사합니다.
-
미해결자바 ORM 표준 JPA 프로그래밍 - 기본편
여러곳에서 한 테이블의 list가 필요한 경우엔?
만약 다음과 같이 여러곳에서 image라는 테이블을 참조한다면.. 그땐 어떻게 코드를 구현해야하는건가요?프로젝트와 이미지는 1:n관계지만 이를 일대다로도 다대일로도 구현할 수있잖아요?1. 만약에 다대일 양방향으로 구현 2. 일대다 단방향으로 구현 >>첫번째질문 : 어느것으로 해도 상관없나요? 근데 2번 방법을 지양하라고 하셨던 것 같아요 그래서 만약 1번 방법으로 한다고 가정할게요. 이미지 테이블같은경우 어떨땐 프로젝트의 이미지가 될수있고 (그러면 게시글의 이미지는 아닐테니 게시글_id값은 null이 되겠죠) 어떨땐 게시글의 이미지가 되겠죠..? >>두번째질문 : 근데 이 이미지가 게시글의 이미지인지 프로젝트의 이미지인지가 중요할까요..? >>세번째질문 : 만약에 중요하다면 enum을 사용하여 어떤 것의 이미지인지를 반환하는 메서드를 만들어주면되는건가요/?
-
미해결Kotlin으로 개발하는 Spring Boot Web MVC
jsonPath
안녕하세요 jsonPath 를 사용할떄 계속 타입 미스매치가 나오는데... 이건 시간이 지나면서 업데이트가 되면서 바뀐건가요??..
-
해결됨Django REST Framework 핵심사항
강의를 보고 응용해보는데 잘 안되어서 질문드립니다. simplejwt와 dj_rest_auth 이용
강의내용에 없는 질문인데, 강의를 보고, login도 해보고싶어져서 simple jwt와 dj_rest_auth를 이용해보고 있습니다. 로그인을 한 후, 토큰과 user정보를 받는데, 여기서 토큰은 냅두고, user정보에 data를 더 추가하고싶습니다. 제가 나타내고 싶은건 다음 코드처럼입니다. { "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjQ5NDEyNTQ1LCJpYXQiOjE2NDk0MTIyNDUsImp0aSI6ImIzMTA1MmM3OTQ0MzRlMTliN2FkOGM4ZmFhY2E2YTY0IiwidXNlcl9pZCI6MX0.kav5n-c1K5OnGIYlDE7dVlKn4V-08NHEv73V914E0nY", "refresh_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTY0OTQ5ODY0NSwiaWF0IjoxNjQ5NDEyMjQ1LCJqdGkiOiJhYWM4ODdkMGNlOWE0NzM5YmQxMDQ1ZTY2YjgxN2MyZCIsInVzZXJfaWQiOjF9.1qdC1du1CCpUpWlqfgI-bHOafJGbqQGKwzNXS3QRYWg", "user": { "pk": 1, "email": "test@naver.com" "nickname": "inlearn", "address": "Seoul", } } dj_rest_auth의 LoginSerializer를 수정해보려하는데 어디를 수정해야 할지 모르겠어서 질문드립니다.
-
해결됨Spring Cloud로 개발하는 마이크로서비스 애플리케이션(MSA)
Gateway 관련 질문이ㅛ
실습 따라서 하다가 문득 궁금해서 질문남깁니다. 이전 강의에서 말씀하셨는지 찾기어려워서 .. Cloud Gateway 애플리케이션을 Eureka Server에 등록하는 이유가 뭔가요? 인스턴스로 등록할 각 서비스들만 구독 시켜둬도 운영은 가능한게 아닌가요..? 직접 해보니fetch-registry, register-with-eureka 를 false 로 해도 되기는 하더라구요. 따로 적어둔거를 봤는데 fetch-registry, register-with-eureka 를 true로 하는 것이 유레카 서버로 부터 갱신된 인스턴스 정보들을 받기 위함이라고 적어두긴했는데 맞는건가요?
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
테스트 코드에서 오류가 발생했는데 아무리 찾아봐도 원인을 모르겠습니다..
=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예)[질문 내용]테스트 코드를 작성하고 실행하는데 제 테스트 코드를 못찾는 것 같습니다.. junit 잘 붙어있는데 왜 그러는 걸까요? 그리고 한글도 깨지는 것 같은데 원인을 모르겠습니다... 코드와 혹시몰라서 캡쳐본도 올립니다. java.lang.Exception: No tests found matching Method �쉶�썝媛��엯(jpabook.jpashop.service.MemberServiceTest) from org.junit.internal.requests.ClassRequest@41ab013 at org.junit.internal.requests.FilterRequest.getRunner(FilterRequest.java:40) at com.intellij.junit4.JUnit4IdeaTestRunner.startRunnerWithArgs(JUnit4IdeaTestRunner.java:50) at com.intellij.rt.junit.IdeaTestRunner$Repeater.startRunnerWithArgs(IdeaTestRunner.java:33) at com.intellij.rt.junit.JUnitStarter.prepareStreamsAndStart(JUnitStarter.java:235) at com.intellij.rt.junit.JUnitStarter.main(JUnitStarter.java:54)
-
해결됨[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part7: MMO 컨텐츠 구현 (Unity + C# 서버 연동 기초)
안녕하세요. 루키스님^^
안녕하세요^^ 루키스님 항상 열심히 사시느라 존경스럽다는 말을 먼저 서두에 넣고 싶네요. 바쁘신 와중에 질문글을 올리는게 너무나 죄송스럽습니다. 분명 기본적으로 알려주실껀 다 알려주셨지만 이런쪽으로 머리를 써본일이 적다보니 이동 관련하여 막힌 난관에 도무지 스스로 해결책을 찾을 방도가 없어 이렇게 실례를 무릎쓰고 글을 적게되었습니다 ㅠ 다름이 아니고 일단 영상을 하나 봐주세요. https://m.blog.naver.com/hyhc125/222695406876 현재 오라클 클라우드 서버에 두 인스턴스를 생성해 하나는 AccountServer, 하나는 GameServer로 돌리고 있고 DB는 오라클에서 제공해주는 ATB(자율구동데이터베이스)를 사용하고 있습니다. 영상을 보시면 케릭터가 이동 중에 몬스터를 관통하거나 혹은 케릭터와 몬스터가 한 좌표에 겹쳐지는 현상이 나타납니다. 제 생각엔 한 좌표에 동시에 몬스터와 케릭터가 진입(몬스터와 케릭터가 앞으로 이동 할 지점에 대하여 CanGo()로 검사를 하는데 두 개가 동시에 true가 되는 경우)을 하는게 원인같다고 판단은 했는데 막상 이에 대한 해결책을 찾자니 도무지 떠오르는 아이디어가 없어서 한참 고민하다가 루키스님께 조그마한 힌트라도 얻을 수 있을까 싶어 질문드리게 되었습니다. 이런 경우 어떻게 겹치지 않게 할 수 있을가요?
-
미해결[왕초보편] 앱 8개를 만들면서 배우는 안드로이드 코틀린(Android Kotlin)
이미지 이름 오류
drawable 폴더에 splash 이미지 파일이 있는데 왜 이미지뷰에서 스플래쉬이미지가 적용이 안될까요?
-
미해결모두를 위한 딥러닝 - 기본적인 머신러닝과 딥러닝 강좌
파이썬 3.10 버전 tensor flow 설치 문의
텐서 플로우를 설치하려고 보니 파이썬 3.10 버전에 대해서는 내용이 없네요, 혹시 참고할 만한 사이트가 있을까요??
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
스타트업 CEO 커뮤니티 부분 위에 가 너무 붙어있습니다.
선생님 강의를 보고 잘 따라한 거같은데 선생님이 하신 화면과 제가 한 화면이 너무 다릅니다 스타트업 CEO 커뮤니티 위에 부분이 너무 붙어있습니다. 패딩 탑을 주어야 될까요? 아니면 마진탑을 주어야할까요? <!--section : feature--> <section class="feature"> <div class="feature-inner"> <div class="headline-share"> <h1>스타트업 CEO 커뮤니티</h1> <p> 스타트 업 비즈니스 발전을 위한 다양한 서비스를 제공합니다. </p> </div> <div class="feature-content"> <div class="feature-mokeup"> <img src="images/feature-mockup-01.png"> </div> <div class="feature-about"> <img src="images/icon-num-01.png"> <h2>스타트업 메이트 CEO 평생 회원 자격</h2> <p> 스타트업 메이트 회원가입은 평생 무료입니다. 조직의 리더 곧, CEO에게 필요한 경영, 전략, 조직관리 등 최신 경향을 안내하고 스타트업메이트 CEO에게 영감과 창의적인 아이디어를 만들 수 있도록 지원합니다. </p> </div> </div> <div class="feature-content"> <div class="feature-about"> <img src="images/icon-num-02.png"> <h2>CEO 오프라인 모임 참석(월 2회)</h2> <p> 스타트 업메이트 CEO 회원들만의 오프라인 모임을 월 2회 진행합니다. 온라인에서 부족한 상호작용을 위해 오프라인 모임을 만들고 해당 오프라인 모임에서 다야한 업종의 CEO들과 고민을 나누는 자리가 됩니다. </p> </div> <div class="feature-mokeup"> <img src="images/feature-mockup-02.png"> </div> </div> <div class="feature-content"> <div class="feature-mokeup"> <img src="images/feature-mockup-03.png"> </div> <div class="feature-about"> <img src="images/icon-num-03.png"> <h2>조직관리를 위한 오프라인 멘토링</h2> <p> 스타트업 메이트에서는 오프라인 멘토링을 정기적으로 개최합니다. 스타트업 메이트 CEO 회원이면 누구나 참석 가능합니다. 오프라인 멘토링에서는 명사를 초빙하여 경영혁신과 조직관리 그리고 최신 경영 트랜드에 대한 강연을 진행합니다. </p> </div> </div> </div> </section> /* ################## feature ##################### */ .feature-inner { width: 1300px; margin: auto; } .feature-content { overflow: hidden; margin: 100px 0; } .feature-content > div { float: left; width: 50%; text-align: center; } .feature-about { padding: 0 70px; padding-top: 80px; } .feature-about h2 { font-size: 30px; }
-
미해결애플 웹사이트 인터랙션 클론!
화면이 다 로드되지 않은 상태에서 스크롤을 내리면 오류창이 발생합니다
현재 28강을 수강하고 있습니다. 오류가 언제부터 발생했는지는 모르겠는데, 어디서 발생했는지 도무지 못찾겠습니다 ㅜㅜ 화면이 다 로드된 상태에서는 스크롤 창을 움직여도 오류코드가 뜨지 않는데, 화면이 아직 다 로드되지 않은 상태에서 스크롤을 움직이면 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollHeight')라고 뜹니다 (() => { // 함수를 자동으로 호출하는 코드 // (function(){}) (); 동일 // 전역변수 사용을 최소화 하기 위해서 let yOffset = 0; //window.pageYOffset 대신에 사용할 변수 let prevScrollHeight = 0; //현재 스크롤 위치(yOffset)보다 이전에 위치한 scroll-section 들의 높이값의 합 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'), canvas: document.querySelector('#video-canvas-0'), context: document.querySelector('#video-canvas-0').getContext('2d'), videoImages: [] }, values: { videoImagesCount: 300, imageSequence: [0, 299], canvas_opacity: [1, 0, { start: 0.9, end: 1 }], 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 }] // translate의 %는 100%가 전체몸통 기준이다 //전체 scrollHeight을 1로 봤을 때, 0.1, 0.2, ...의 비율. 전체의 0.1의(10%) 구간을 0.3 ~ 0.4의 시점동안 실행한다 } }, { // 1 type: 'normal', // heightNum: 5, // type normal에서는 필요 없음 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1'), content: document.querySelector('#scroll-section-1 .description') } }, { // 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'), canvas: document.querySelector('#video-canvas-1'), context: document.querySelector('#video-canvas-1').getContext('2d'), videoImages: [] }, values: { videoImagesCount: 960, imageSequence: [0, 959], canvas_opacity: [1, 0, { start: 0.9, end: 1 }], messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.5, end: 0.55 }], messageC_translateY_in: [30, 0, { start: 0.72, end: 0.77 }], messageA_opacity_in: [0, 1, { start: 0.15, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], messageC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], messageA_translateY_out: [0, -20, { start: 0.3, end: 0.35 }], messageB_translateY_out: [0, -20, { start: 0.58, end: 0.63 }], messageC_translateY_out: [0, -20, { start: 0.85, end: 0.9 }], messageA_opacity_out: [1, 0, { start: 0.3, end: 0.35 }], messageB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], messageC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], pinB_scaleY: [0.5, 1, { start: 0.5, end: 0.55 }], pinC_scaleY: [0.5, 1, { start: 0.72, end: 0.77 }], pinB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], pinC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], pinB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], pinC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }] } }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3'), canvasCaption: document.querySelector('.canvas-caption') }, values: { } } ]; function setCanvasImages(){ let imgElem; for (let i =0; i < sceneInfo[0].values.videoImagesCount; i++){ imgElem = document.createElement('img'); imgElem.src = `../video/sample1/IMG_${6726 + i}.JPG`; sceneInfo[0].objs.videoImages.push(imgElem); } let imgElem2; for (let i =0; i < sceneInfo[2].values.videoImagesCount; i++){ imgElem2 = document.createElement('img'); imgElem2.src = `../video/sample2/IMG_${7027 + i}.JPG`; sceneInfo[2].objs.videoImages.push(imgElem2); } } setCanvasImages(); function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++){ if(sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; // 결과값을 scroll-section의 높이로 넣어줘야함 } 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; //처음 새로고침을 하고 아직 스크롤을 하지 않은 상태에서는 body에 show-scene-${currentScene}가 붙지않기 때문에 //load와 동시에 body에 show-scene-${currentScene}을 붙여주기 위한 코드 작업이 아래의 코드이다. //currentScene을 자동으로 세팅하는 코드 let totalScrollHeight = 0; for(let i = 0; i < sceneInfo.length; i++){ totalScrollHeight = totalScrollHeight + sceneInfo[i].scrollHeight; if(totalScrollHeight >= yOffset) { currentScene = i; break; } } document.body.setAttribute('id', `show-scene-${currentScene}`); const heightRatio = window.innerHeight / 1080; sceneInfo[0].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; //각 디바이스(노트북, 스마트폰, 패드 등) 크기에 맞게 스케일을 조정해주는 코드 // 기존 높이(1080) 대비 줄어들거나 늘어난 디바이스의 높이(window.innerHeight)에 맞춰 이미지의 스케일을 조정해준다 sceneInfo[2].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; } function scrollLoop(){ //몇번 째 scroll-section 이 눈앞에서 스크롤 중인지 판별하기 위한 함수 //scroll-section-0 + scroll-section-1 높이의 합보다 현재 스크롤의 YOffset의 크기가 클시 scroll-section-2가 시작됐다고 생각할 수 있다. enterNewScene = false; prevScrollHeight = 0; for (let i = 0; i < currentScene; i++){ prevScrollHeight = prevScrollHeight + sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight){ //여기에서 sceneInfo[currentScene]는 i와 동일한 역할을 해준다. enterNewScene = true; currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); } if (yOffset < prevScrollHeight) { if (currentScene === 0){ return; } enterNewScene = true; currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } if (enterNewScene) return; //씬이 바뀌는 순간 true일 경우 함수를 종료함 playAnimation(); } function calcValues(values, currentYOffset){ // 배열에 넣어놓은 values 값 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'); let sequence = Math.round(calcValues(values.imageSequence, currentYOffset)); objs.context.drawImage(objs.videoImages[sequence],0,0); //sequence에 해당 객체가 선택이 되고, x y값이 0 0으로 배정된다 objs.canvas.style.opacity = calcValues(values.canvas_opacity, currentYOffset); 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'); let sequence2 = Math.round(calcValues(values.imageSequence, currentYOffset)); objs.context.drawImage(objs.videoImages[sequence2],0,0); if (scrollRatio <= 0.25) { // 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.57) { // 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.83) { // 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; } } window.addEventListener('scroll',() => { yOffset = window.pageYOffset; scrollLoop(); }); window.addEventListener('load', function(){ setLayout(); sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0],0,0); }); // window.addEventListener('DOMContentLoaded', setLayout); 로 대체 할 수 있음. // DOMContentLoaded는 이미지 등은 제외하고 content 레이아웃만 로드되면 바로 실행됨. window.addEventListener('resize',setLayout); })();
-
미해결Slack 클론 코딩[실시간 채팅 with React]
회원가입하면 sleact체널을 기본으로 받잖아요
회원가입하면 그 회원가입한 계정에 들어가 있는 기본 sleact 체널에 이름을 백엔드 에서 어떤걸 수정해야 할가요?