묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결정말 쉽게 풀어보는 코딩 테스트 top 기본 문제 (with 자바)
새로운 풀이법 문의
public List<String> solve(String s) { List<String> result = new ArrayList<>(); if (s == null) return result; for (int i = 0; i < s.length(); i++) { String newStr = s.substring(0, i) + s.substring(i + 1); if (isValid(newStr) && !result.contains(newStr)) { result.add(newStr); } } return result;} 위와 같이 풀어보았는데 같은 결과가 나옵니다. 강사님의 substring 과 isValid를 이용했습니다. 엄청 단순해졌는데,, 혹시 이 풀이에 문제가있을까요 그런데 신기한게 해당 문제로 검색해서 다른풀이들을 보면 모두 강사님처럼 DFS로 풀었습니다. 저처럼 잘모르는 사람이 쉽게 가보려고 얍삽이?를 쓴것처럼 한 경우는없습니다. 왜그런것인가요?
-
해결됨윤재성의 Vue.js 프로젝트를 통한 실무 개발 과정
module.exports는 어떤 의미인지 궁금합니다!
module.exports는 어떤 의미인지 궁금합니다. module.exports에 할당을 하는 것인가요?
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part1: C# 기초 프로그래밍 입문
비주얼 스튜디오 테마
사용하시는 비주얼 스튜디오 테마는 studiostyles같은 곳에서 다운로드하신 건가요, 아니면 키워드마다 하나하나 직접 설정하신 건가요? 혹시 다운로드 받으신 것이면 어디서 구하셨는지 알 수 있을까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
useInput.js 훅스 문제
제가 따로 제로초님의 강의를 참고해 다른 웹을 실습겸 개발하는데 문제가 있어 질문드립니다. 저는 useInput 훅스를 사용하는 부분에서 문제가 있습니다. 제로초님의 useInput.js파일을(chaper 3) 똑같이 사용하였습니다. PostForm과 비슷한 DataForm을 생성하였는데 아래는 DataForm의 일부 입니다. 여기서 문제는 onChange 부분으로 setTitle(e.target.value)로 값을 넘기면 useInput.js파일에서 TypeError: Cannot read property 'value' of undefined 에러를 보입니다. 하지만 setTitle(e)로 넘기면 문제가 발생하지 않습니다. 즉 useInput.js 파일의 const handler = useCallback((e) => { setter(e.target.value); }, []); 부분에서 e가 object의 형태가 아닌 그냥 value의 값을 받는다는 것입니다. 저는 DataForm과 PostForm의 형태가 비슷하다고 생각되는데 이런 일이 일어나는 이유가 궁금합니다. 이로 인해 setTitle(''); setContent(''); 도 사용하지를 못합니다. 아래는 PostForm.js의 일부분 입니다. const DataForm = () => { const [title, setTitle] = useInput(''); const [content, setContent] = useInput(''); const onChangeTitle = useCallback((e) => { setTitle(e.target.value); }, []); const onChangeContent = useCallback((e) => { setContent(e.target.value); }, []); return ( <Form onFinish={onSubmitForm}> <Form.Item value={title} onChange={onChangeTitle} > <Input /> </Form.Item> <Form.Item value={content} onChange={onChangeContent} placeholder="description" > <Input.TextArea /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); };
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
config, plugin 함께 사용하는 것...
최근 이 둘을 같이 사용하였는데, 에러가 엄청 발생하고, 심지어 eslint, prettier가 conflict가 나면서 에러가 지워지지 않았습니다. 그래서 다시 강의를 듣다가 prettier 문서를 다시 읽어보았는데, eslint-config-prettier를 통합 방법으로 추천하고, plugin은 generally not recommended라고 표현하더라구요. https://github.com/prettier/eslint-config-prettier eslint-config-prettier 문서를 읽어보아도, 뭔가 plugin과 같이 쓰면 config가 끈 rule이 다시 abled된다고 합니다. 어떻게 사용하죠?
-
미해결현존 최강 크롤링 기술: Scrapy와 Selenium 정복
window scrapy 설치 오류 관련 질문드립니다.
visual studio를 다운받은 이후 워크로드 창에서 python 개발을 선택해서 설치해야 하나요? 아니면 단순히 visual studio 설치 이후 cmd창을 켜서 pip install scrapy를 실행하면 되는걸까요?
-
미해결모던 자바스크립트(javascript) 개발을 위한 ES6 강좌
로또 번호 생성기 풀이
const SETTING = { name: 'LUCKY LOTTO!', count: 6, maxNumber: 45, }; function getRandomNumber({ count, maxNumber }) { let lottoSet = new Set(); const minNumber = 1; for (let i = 0; i < count; ) { // 두 값 사이의 난수 생성 && Math.random()이 0이 출력될 확률이 낮지만 가능해서 보완 코딩 처리. const num = parseInt(Math.random() * (maxNumber - minNumber) + minNumber); if (!lottoSet.has(num)) { lottoSet.add(num); i++; } } return lottoSet; } const colorSet = getRandomNumber(SETTING); // console.log(colorSet.values()); let cnt = 1; colorSet.forEach((v) => { console.log(cnt++, v); });
-
미해결뇌를 자극하는 윈도우즈 시스템 프로그래밍
강의 ppt는 어디서 받을 수 있나요 ?
안녕하세요. 강의 잘 수강하고있습니다. ppt는 어디서 받을 수 있나요?
-
미해결애플 웹사이트 인터랙션 클론!
scroll-section-3에서 reload 했을 때 원래 자리를 찾지 못합니다.
안녕하세요. 코드를 재구성하면서 따라가고 있는데 마지막 scroll-section-3에서 문자가 보이는 화면에서 새로고침을 했을 때, pageYOffset이 제자리에 있지 않고 위로 이동하는 현상이 발생합니다. 디버깅을 한다고 했는데 도저히 모르겠어서 질문드립니다. 도움 주시면 감사하겠습니다. # index.html <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>AirMug Pro</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet"> </head> <body class="before-load"> <div class="loading"> <svg class="loading-circle"> <circle cx="50%" cy="50%" r="25"></circle> </svg> </div> <nav class="global-nav"> <div class="global-nav-links"> <a href="#">Rooms</a> <a href="#">Ideas</a> <a href="#">Stores</a> <a href="#">Contact</a> </div> </nav> <nav class="local-nav"> <div class="local-nav-links"> <a href="#" class="product-name">AirMug Pro</a> <div class="local-nav-right"> <a href="#">Overview</a> <a href="#">Specification</a> <a href="#">Purchase</a> </div> </div> </nav> <div class="container"> <div class="scroll-section" id="scroll-section-0"> <div class="sticky-elem sticky-elem-canvas"> <canvas id="video-canvas-0" width="1920" height="1080"></canvas> </div> <h1>AirMug Pro</h1> <div class="sticky-elem main-message" id="main-message-a"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet, quisquam. </div> <div class="sticky-elem main-message" id="main-message-b"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, mollitia. </div> <div class="sticky-elem main-message" id="main-message-c"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, dolorem. </div> <div class="sticky-elem main-message" id="main-message-d"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati cumque, vitae iste aperiam tempora impedit. Voluptatem nobis nihil deleniti sint! </div> </div> <div class="scroll-section" id="scroll-section-1"> <p class="description"> <strong>AirMug Pro</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta commodi illo voluptates quae, reiciendis laborum quam beatae similique recusandae itaque. Exercitationem, aspernatur quidem, qui alias eveniet aliquid neque numquam labore voluptates, harum ipsum error quam magni voluptatibus atque repellat pariatur assumenda deleniti quaerat reprehenderit. Tempore quaerat soluta praesentium esse error id a quod voluptate minima asperiores maxime repudiandae nobis molestias ipsam unde sunt consectetur quidem modi tempora enim, quas voluptas ad. Amet eveniet quas inventore excepturi tempore nisi ullam sed iusto harum, voluptatum earum libero, dolorum omnis. Voluptatum, sit. Repellendus explicabo aut, modi dolorum nihil delectus nam minus mollitia quaerat. </p> </div> <div class="scroll-section" id="scroll-section-2"> <div class="sticky-elem sticky-elem-canvas"> <canvas id="video-canvas-1" width="1920" height="1080"></canvas> </div> <div class="sticky-elem desc-message" id="desc-message-a"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, quidem unde? Delectus optio architecto consectetur accusantium fugiat odit animi doloremque. <div class="pin"></div> </div> <div class="sticky-elem desc-message" id="desc-message-b"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, consequuntur? Suscipit ut maiores voluptatem, pariatur in consequatur sapiente delectus iure odio ipsa soluta atque modi! <div class="pin"></div> </div> <div class="sticky-elem desc-message" id="desc-message-c"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolore ut sunt, inventore distinctio saepe sit! Iure fugit neque, ducimus enim rem odit maiores consectetur. <div class="pin"></div> </div> </div> <div class="scroll-section" id="scroll-section-3"> <p class="mid-message"> <strong>Retina Mug</strong><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione. </p> <canvas class="image-blend-canvas" id="video-canvas-2" width="1920" height="1080"></canvas> <p class="canvas-caption"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium unde molestiae aliquam sit, incidunt rerum aliquid sunt animi quasi provident sapiente obcaecati autem maiores ex libero minima tempore? Cumque eligendi recusandae sint tenetur ducimus iusto, excepturi ullam in veritatis maxime, libero dolores eveniet dolor odit reiciendis aliquam itaque? Distinctio, corporis dolorem. Delectus iure asperiores, quia veritatis modi sequi aperiam iusto nulla, et ea non nihil consectetur, eos nemo. Obcaecati perferendis ut assumenda distinctio est nam autem deleniti. Culpa beatae recusandae et incidunt iste dolorem error quia, fugit dicta in, tenetur dolore ad ab? Tenetur, eius. Mollitia beatae esse quibusdam nam doloremque fuga architecto rerum rem? Minus quae praesentium iusto rem maxime tempora hic distinctio, est non laborum ipsam cupiditate quis, quod totam at itaque perspiciatis repudiandae nesciunt vero officiis natus doloribus inventore unde? Dolores amet molestiae cupiditate aliquam ratione doloribus enim libero odio maiores atque inventore doloremque officia consequuntur ut, pariatur quis dolorum fugiat. Placeat dolore earum aperiam odit beatae perspiciatis, at provident pariatur recusandae neque facilis exercitationem officia unde consectetur quam assumenda. Ex vero quis fugit magnam, excepturi, voluptates debitis ipsum dolorem iste incidunt natus laboriosam dolores quibusdam. Accusantium numquam facere ullam quos totam nam aliquid magni delectus laudantium! </p> </div> </div> <footer class="footer">Copyright by Whi</footer> <script src="main.js"></script> </body> </html> # main.js class Website { constructor() { this.enterNewScene = false; this.acc = 0.1; this.delayedYOffset = 0; this.rafState = false; this.rafId; this.sceneInfo = [ { type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0'), localNav: document.querySelector('.local-nav'), canvas: document.querySelector('#video-canvas-0'), context: document.querySelector('#video-canvas-0').getContext('2d'), messageA: document.querySelector('#main-message-a'), messageB: document.querySelector('#main-message-b'), messageC: document.querySelector('#main-message-c'), messageD: document.querySelector('#main-message-d'), videoImages: [], }, 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_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}], canvas_opacity: [1, 0, {start: 0.9, end: 1.0}], canvas: [0, 299, {start: 0, end: 1}], }, }, { type: 'normal', scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1'), } }, { type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2'), canvas: document.querySelector('#video-canvas-1'), context: document.querySelector('#video-canvas-1').getContext('2d'), messageA: document.querySelector('#desc-message-a'), messageB: document.querySelector('#desc-message-b'), messageC: document.querySelector('#desc-message-c'), pinA: document.querySelector('#desc-message-a .pin'), pinB: document.querySelector('#desc-message-b .pin'), pinC: document.querySelector('#desc-message-c .pin'), videoImages: [], }, values: { 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_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}], messageA_translateY_in: [20, 0, {start: 0.25, end: 0.3}], messageB_translateY_in: [30, 0, {start: 0.6, end: 0.65}], messageC_translateY_in: [30, 0, {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}], pinA_scaleY: [0.5, 1, {start: 0.25, end: 0.3}], pinB_scaleY: [0.5, 1, {start: 0.6, end: 0.80}], pinC_scaleY: [0.5, 1, {start: 0.87, end: 0.92}], canvas_opacity: [1, 0, {start: 0.9, end: 1.0}], canvas: [0, 959, {start: 0, end: 1}], } }, { type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3'), canvas: document.querySelector('#video-canvas-2'), context: document.querySelector('#video-canvas-2').getContext('2d'), images: [], }, values: { rect1X: [0, 0, {start: 0, end: 0}], rect2X: [0, 0, {start: 0, end: 0}], rectStartY: 0, blendHeight: [0, 0, {start: 0, end: 0}], canvas_scale: [0, 0, {start: 0, end: 0}], }, } ] this.prepareVideoImages(); this.addEventListener(); } setLayout() { for (let idx = 0; idx < this.sceneInfo.length; idx++) { const info = this.sceneInfo[idx]; if (info.type === 'sticky') { info.scrollHeight = info.heightNum * window.innerHeight; } else { info.scrollHeight = info.objs.container.offsetHeight; } info.objs.container.style.height = `${info.heightNum * window.innerHeight}px`; } let totalScrollHeight = 0; this.currentScene = 0; for (let idx = 0; idx < this.sceneInfo.length; idx++) { totalScrollHeight += this.sceneInfo[idx].scrollHeight; if (totalScrollHeight > this.yOffset) { this.currentScene = idx; break; } } document.body.setAttribute('id', `show-scene-${this.currentScene}`); const heightRatio = window.innerHeight / 1080; this.sceneInfo[0].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; } scrollLoop() { if (this.enterNewScene) { return } this.prevScrollHeight = 0; for (let idx = 0; idx < this.currentScene; idx++) { this.prevScrollHeight += this.sceneInfo[idx].scrollHeight; } if (this.yOffset > this.prevScrollHeight + this.sceneInfo[this.currentScene].scrollHeight) { this.enterNewScene = true; this.currentScene += 1; // TODO: REFACTOR this.prevScrollHeight = 0; for (let idx = 0; idx < this.currentScene; idx++) { this.prevScrollHeight += this.sceneInfo[idx].scrollHeight; } } else if (this.yOffset < this.prevScrollHeight) { this.enterNewScene = true; this.currentScene -= 1; this.prevScrollHeight = 0; for (let idx = 0; idx < this.currentScene; idx++) { this.prevScrollHeight += this.sceneInfo[idx].scrollHeight; } } document.body.setAttribute('id', `show-scene-${this.currentScene}`); this.playAnimation(); this.enterNewScene = false; } playAnimation() { const sceneScrollHeight = this.yOffset - this.prevScrollHeight; const sceneScrollRatio = sceneScrollHeight / this.sceneInfo[this.currentScene].scrollHeight; const objs = this.sceneInfo[this.currentScene].objs; const values = this.sceneInfo[this.currentScene].values; let imgIdx; let canvasHeightRatio; let canvasWidthRatio; let canvasRescaleRatio; switch (this.currentScene) { case 0: imgIdx = Math.round(this.calcValues(values.canvas, sceneScrollRatio)); canvasHeightRatio = window.innerHeight / objs.canvas.height; canvasWidthRatio = window.innerWidth / objs.canvas.width; canvasRescaleRatio = canvasHeightRatio; if (canvasWidthRatio > canvasHeightRatio) { canvasRescaleRatio = canvasWidthRatio; } objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${canvasRescaleRatio})`; // objs.context.drawImage(objs.videoImages[imgIdx], 0, 0); if (sceneScrollRatio < 0.22) { objs.messageA.style.opacity = this.calcValues(values.messageA_opacity_in, sceneScrollRatio); } else { objs.messageA.style.opacity = this.calcValues(values.messageA_opacity_out, sceneScrollRatio); } if (sceneScrollRatio < 0.42) { objs.messageB.style.opacity = this.calcValues(values.messageB_opacity_in, sceneScrollRatio); } else { objs.messageB.style.opacity = this.calcValues(values.messageB_opacity_out, sceneScrollRatio); } if (sceneScrollRatio < 0.62) { objs.messageC.style.opacity = this.calcValues(values.messageC_opacity_in, sceneScrollRatio); } else { objs.messageC.style.opacity = this.calcValues(values.messageC_opacity_out, sceneScrollRatio); } if (sceneScrollRatio < 0.82) { objs.messageD.style.opacity = this.calcValues(values.messageD_opacity_in, sceneScrollRatio); } else { objs.messageD.style.opacity = this.calcValues(values.messageD_opacity_out, sceneScrollRatio); } if (sceneScrollRatio > 0.85) { objs.canvas.style.opacity = this.calcValues(values.canvas_opacity, sceneScrollRatio); } break; case 1: break; case 2: imgIdx = Math.round(this.calcValues(values.canvas, sceneScrollRatio)); canvasHeightRatio = window.innerHeight / objs.canvas.height; canvasWidthRatio = window.innerWidth / objs.canvas.width; canvasRescaleRatio = canvasHeightRatio; if (canvasWidthRatio > canvasHeightRatio) { canvasRescaleRatio = canvasWidthRatio; } objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${canvasRescaleRatio})`; // objs.context.drawImage(objs.videoImages[imgIdx], 0, 0); if (sceneScrollRatio < 0.35) { objs.messageA.style.opacity = this.calcValues(values.messageA_opacity_in, sceneScrollRatio); objs.messageA.style.transform = `translate3d(0, ${this.calcValues(values.messageA_translateY_in, sceneScrollRatio)}%, 0)`; objs.pinA.style.transform = `scaleY(${this.calcValues(values.pinA_scaleY, sceneScrollRatio)})`; } else { objs.messageA.style.opacity = this.calcValues(values.messageA_opacity_out, sceneScrollRatio); objs.messageA.style.transform = `translate3d(0, ${this.calcValues(values.messageA_translateY_out, sceneScrollRatio)}%, 0)`; objs.pinA.style.transform = `scaleY(${this.calcValues(values.pinA_scaleY, sceneScrollRatio)})`; } if (sceneScrollRatio < 0.67) { objs.messageB.style.opacity = this.calcValues(values.messageB_opacity_in, sceneScrollRatio); objs.messageB.style.transform = `translate3d(0, ${this.calcValues(values.messageB_translateY_in, sceneScrollRatio)}%, 0)`; objs.pinB.style.transform = `scaleY(${this.calcValues(values.pinB_scaleY, sceneScrollRatio)})`; } else { objs.messageB.style.opacity = this.calcValues(values.messageB_opacity_out, sceneScrollRatio); objs.messageB.style.transform = `translate3d(0, ${this.calcValues(values.messageB_translateY_out, sceneScrollRatio)}%, 0)`; objs.pinB.style.transform = `scaleY(${this.calcValues(values.pinB_scaleY, sceneScrollRatio)})`; } if (sceneScrollRatio < 0.94) { objs.messageC.style.opacity = this.calcValues(values.messageC_opacity_in, sceneScrollRatio); objs.messageC.style.transform = `translate3d(0, ${this.calcValues(values.messageC_translateY_in, sceneScrollRatio)}%, 0)`; objs.pinC.style.transform = `scaleY(${this.calcValues(values.pinC_scaleY, sceneScrollRatio)})`; } else { objs.messageC.style.opacity = this.calcValues(values.messageC_opacity_out, sceneScrollRatio); objs.messageC.style.transform = `translate3d(0, ${this.calcValues(values.messageC_translateY_out, sceneScrollRatio)}%, 0)`; objs.pinC.style.transform = `scaleY(${this.calcValues(values.pinC_scaleY, sceneScrollRatio)})`; } if (sceneScrollRatio > 0.85) { objs.canvas.style.opacity = this.calcValues(values.canvas_opacity, sceneScrollRatio); } break; case 3: canvasHeightRatio = window.innerHeight / objs.canvas.height; canvasWidthRatio = window.innerWidth / objs.canvas.width; canvasRescaleRatio = canvasHeightRatio; if (canvasWidthRatio > canvasHeightRatio) { canvasRescaleRatio = canvasWidthRatio; } const recalculatedInnerWidth = window.innerWidth / canvasRescaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasRescaleRatio; if (!values.rectStartY) { values.rectStartY = objs.canvas.offsetTop + (objs.canvas.height - objs.canvas.height * canvasRescaleRatio) / 2; values.rect1X[2].start = (window.innerHeight / 2) / this.sceneInfo[this.currentScene].scrollHeight; values.rect1X[2].end = values.rectStartY / this.sceneInfo[this.currentScene].scrollHeight; values.rect2X[2].start = (window.innerHeight / 2) / this.sceneInfo[this.currentScene].scrollHeight; values.rect2X[2].end = values.rectStartY / this.sceneInfo[this.currentScene].scrollHeight; } objs.canvas.style.transform = `scale(${canvasRescaleRatio})`; objs.context.fillStyle = 'white'; objs.context.drawImage(objs.images[0], 0, 0); const whiteRectWidth = 0.15 * recalculatedInnerWidth; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; objs.context.fillRect( parseInt(this.calcValues(values.rect1X, sceneScrollRatio)), 0, parseInt(whiteRectWidth), objs.canvas.height); objs.context.fillRect( parseInt(this.calcValues(values.rect2X, sceneScrollRatio)), 0, parseInt(whiteRectWidth), objs.canvas.height); if (sceneScrollRatio < values.rect1X[2].end) { objs.canvas.classList.remove('sticky'); } else { objs.canvas.classList.add('sticky'); objs.canvas.style.top = `-${(objs.canvas.height - objs.canvas.height * canvasRescaleRatio) / 2}px`; if (!values.blendHeight[1]) { values.blendHeight[0] = 0; values.blendHeight[1] = objs.canvas.height; values.blendHeight[2].start = values.rect1X[2].end; values.blendHeight[2].end = values.blendHeight[2].start + 0.2; } const blendImageheight = this.calcValues(values.blendHeight, sceneScrollRatio); objs.context.drawImage( objs.images[1], 0, objs.canvas.height - blendImageheight, objs.canvas.width, blendImageheight, 0, objs.canvas.height - blendImageheight, objs.canvas.width, blendImageheight); if (values.blendHeight[2].end < sceneScrollRatio) { if (!values.canvas_scale[0]) { values.canvas_scale[0] = canvasRescaleRatio; values.canvas_scale[1] = 0.5; values.canvas_scale[2].start = values.blendHeight[2].end values.canvas_scale[2].end = values.canvas_scale[2].start + 0.2; } objs.canvas.style.transform = `scale(${this.calcValues(values.canvas_scale, sceneScrollRatio)})`; if (values.canvas_scale[2].end < sceneScrollRatio) { objs.canvas.classList.remove('sticky'); objs.canvas.style.marginTop = `${0.4 * this.sceneInfo[this.currentScene].scrollHeight}px`; } else { objs.canvas.style.marginTop = 0; } } } break; } } calcValues(data, currPos) { let result; const [startVal, endVal, valRange] = data; const { start: startRange, end: endRange } = valRange; if (currPos <= startRange) { result = startVal; } else if (endRange <= currPos) { result = endVal; } else { result = startVal + (endVal - startVal) * (currPos - startRange) / (endRange - startRange) } return result; } prepareVideoImages() { let imgElem; for (let idx = 0; idx < 300; idx++) { imgElem = new Image(); imgElem.src = `./video/001/IMG_${6726 + idx}.JPG`; this.sceneInfo[0].objs.videoImages.push(imgElem); } let imgElem2; for (let idx = 0; idx < 960; idx++) { imgElem2 = new Image(); imgElem2.src = `./video/002/IMG_${7027 + idx}.JPG`; this.sceneInfo[2].objs.videoImages.push(imgElem2); } let imgElem3; const imgPaths = ['./images/blend-image-1.jpg', './images/blend-image-2.jpg'] for (const imgPath of imgPaths) { imgElem3 = new Image(); imgElem3.src = imgPath; this.sceneInfo[3].objs.images.push(imgElem3); } } loop() { this.delayedYOffset = this.delayedYOffset + (this.yOffset - this.delayedYOffset) * this.acc; if (!this.enterNewScene) { if (this.currentScene === 0 || this.currentScene === 2) { const sceneScrollHeight = this.delayedYOffset - this.prevScrollHeight; const sceneScrollRatio = sceneScrollHeight / this.sceneInfo[this.currentScene].scrollHeight; const values = this.sceneInfo[this.currentScene].values; const objs = this.sceneInfo[this.currentScene].objs; let imgIdx = parseInt(this.calcValues(values.canvas, sceneScrollRatio)); if (objs.videoImages[imgIdx]) { objs.context.drawImage(objs.videoImages[imgIdx], 0, 0); } } } this.rafId = requestAnimationFrame(this.loop.bind(this)); if (Math.abs(this.yOffset - this.delayedYOffset) < 1) { cancelAnimationFrame(this.rafId) this.rafState = false; } } checkMenu() { if (this.yOffset > 44) { this.sceneInfo[0].objs.localNav.classList.add('local-nav-sticky'); } else { this.sceneInfo[0].objs.localNav.classList.remove('local-nav-sticky'); } } addEventListener() { window.addEventListener('load', () => { document.body.classList.remove('before-load'); this.setLayout(); debugger; // this.sceneInfo[0].objs.context.drawImage(this.sceneInfo[0].objs.videoImages[0], 0, 0); this.yOffset = window.pageYOffset; console.log('yoffset', this.yOffset) let tempYOffSet = this.yOffset; let tempScrollCount = 0; if (tempYOffSet > 0) { let siId = setInterval(() => { window.scrollTo(0, tempYOffSet); tempYOffSet += 5; tempScrollCount++; if (tempScrollCount > 20) { clearInterval(siId); } }, 20) } window.addEventListener('scroll', () => { this.yOffset = window.pageYOffset; this.scrollLoop(); this.checkMenu(); if (!this.rafState) { this.rafId = requestAnimationFrame(this.loop.bind(this)); this.rafState = true; } }) document.querySelector('.loading').addEventListener('transitionend', (e) => { document.body.removeChild(e.currentTarget); }) }) } } const website = new Website(); # style.css html { font-size: 12px; font-family: 'Noto Sans KR', sans-serif; } body { overflow-x: hidden; position: relative; margin: 0; } div, span, article, section, header, footer, aside, p, ul, li, fieldset, legend, label, a, nav, form { box-sizing: border-box; } body * { overflow-x: hidden; } body.before-load { overflow: hidden; } .before-load .global-nav, .before-load .local-nav, .before-load .container, .before-load .footer { display: none; } .loading { position: fixed; display: flex; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; opacity: 0; background: white; transition: 2.0s; } .before-load .loading { opacity: 1; } @keyframes loading-circle-ani { 0% { stroke-dashoffset: 157; } 75% { stroke-dashoffset: -147; } 100% { stroke-dashoffset: -157; } } @keyframes loading-spin { 100% { transform: rotate(360deg); } } .loading-circle { width: 54px; height: 54px; animation: loading-spin 3s infinite; } .loading-circle circle { stroke: black; stroke-width: 4; stroke-dasharray: 157; stroke-dashoffset: 0; fill: transparent; animation: loading-circle-ani 3s infinite; } div { box-sizing: border-box; } a { text-decoration: none; color: black; } .global-nav { position: absolute; width: 100%; top: 0; left: 0; height: 44px; z-index: 5; } .global-nav-links, .local-nav-links { display: flex; align-items: center; justify-content: space-between; max-width: 1000px; margin: 0 auto; padding: 0 1rem; height: 100%; } .local-nav { position: absolute; width: 100%; left: 0; top: 50px; height: 55px; z-index: 6; border-bottom: 1px solid #888888; } .local-nav-sticky { position: fixed; top: 0; background: rgba(255, 255, 255, 0.1); backdrop-filter: saturate(180%) blur(15px); } .local-nav-right a { margin-left: 2em; } .product-name { font-size: 1.3rem; font-weight: 700; } .footer { position: relative; bottom: 0; height: 45px; width: 100%; background: orange; display: flex; align-items: center; justify-content: center; } .scroll-section { position: relative; padding-top: 50vh; width: 100%; margin: 0 auto; } .scroll-section h1 { font-size: 3rem; top: -10vh; text-align: center; position: relative; } .main-message { top: 45vh; font-size: 1.3rem; text-align: center; margin: 0 auto; opacity: 0; } .sticky-elem { position: fixed; left: 0; width: 100%; display: none; } .sticky-elem-canvas { top: 0; height: 100%; } .sticky-elem-canvas canvas { position: absolute; left: 50%; top: 50%; } .description { font-size: 1.3rem; max-width: 1000px; margin: 0 auto; padding: 0 1rem; } .description strong { font-size: 3em; float: left; margin-right: 0.5em; } .mid-message { font-size: 1.4rem; text-align: center; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; } .mid-message .strong { font-size: 3em; font-weight: 600; } .image-blend-canvas.sticky{ position: fixed; top: 0; } #scroll-section-3 { display: flex; flex-direction: column; align-items: center; } .canvas-caption { font-size: 1.2rem; color: rgb(41, 37, 37); max-width: 1000px; margin: 0 auto; margin-top: -10vh; padding: 0 1rem; padding-bottom: 3rem; } .desc-message { font-size: 1rem; width: 20%; } #desc-message-a { left: 40%; top: 30%; } #desc-message-b { left: 40%; top: 25%; } #desc-message-c { left: 40%; top: 10%; } #show-scene-0 #scroll-section-0 .sticky-elem { display: block; } #show-scene-1 #scroll-section-1 .sticky-elem { display: block; } #show-scene-2 #scroll-section-2 .sticky-elem { display: block; } .pin { height: 10rem; width: 1px; background: black; } @media (min-width: 1024px) { html { font-size: 14px; } #scroll-section-0 h1 { font-size: 9vw; } .main-message { font-size: 4vw; } .description { font-size: 2rem; } .description strong { font-size: 6rem; } #scroll-section-2 .main-message { font-size: 6vw; } #scroll-section-2 .b { top: 20%; left: 53%; } #scroll-section-2 .c { left: 55%; } .main-message small { font-size: 1.5vw; } .desc-message { width: 20%; } .mid-message { font-size: 4vw; } .canvas-caption { margin-top: -8rem; padding: 0; font-size: 2rem; } }
-
해결됨공공데이터로 파이썬 데이터 분석 시작하기
지도 표현 관련 문의를 드립니다.
1. Folium에서 사용하고 있는 지도의 종류는 무엇이고, 다른지도(네이버 나 다음지도)로 변경하여 사용할 수 있는지 문의드립니다 2. 다른좌표계에서 위경도 좌표계로 변경 하거나 위경도 좌표계에서 다른죄표계로 변경을 할 수 있는 함수가 있는지요 ?
-
미해결따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
src, public 폴더가 생기지 않는 문제
npx create-react-app my-app실행 이후에도 src, public 폴더가 생기지 않는 경우, 아래 명령을 실행하고 다시 리엑트 앱을 생성하니 문제가 해결었습니다. 비슷한 문제를 겪으시는 분이 계실까봐 공유합니다. rm -rf `which create-react-app`
-
해결됨스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
안녕하세요. MemoryMemberRepository 이부분에서 궁금한게 있습니다.
영상을 보면서 따라하다가 MemoryMemberRepository 이부분에서 놓쳐서 @Repository 를 입력하지 못하여 넘어갔습니다. 에러가 발생하여 검색으로 찾다가 @Service("MemberRepository") 넣으면된다 라는 글을 보았고 잘 돌아갔습니다. 둘의 차이를 알고싶습니다.
-
미해결데브옵스(DevOps)를 위한 쿠버네티스 마스터
토커 컨테이너 실행 연습문제 에러
jenkins 이미지를 다운로드하고 실행하였는데 실행 후 바로 에러가 발행한건지 Status가 Exited로 변경됩니다. 어떻게 확인해야할까요? CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES c4c241092b13 jenkins "/bin/tini -- /usr/l…" 7 seconds ago Exited (1) 7 seconds ago
-
미해결따라하면서 배우는 고박사의 유니티 기초
수업데이터가 어디에 있는지 알수 있을까요?
수업 데이터가 어디있는지 못찾겠어요. 어디에 수업데이터가 있나요? 강의 상단에 수업데이터가 있다고 답글에는 달려있는데.. 못찾겠네요.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
withCredentials:true 설정 해도 로그인 후에 쿠키가 없어여
안녕하세요 zerocho 님saga/index.js 와 back/app.js 에 withCredentials: true 설정을 한뒤 로그인 test 를 했는데여 어플리케이션 tabb에 쿠키가 없어여 한번 봐주실수 있나여?그리고 로그인시 쿠키 공유가 되면 그다음에 바로 로그인 유지 부터 구현해도 될까여?알려주시면 감사여 git: https://github.com/hyunsokstar/react-nodebird note: http://terecal-hyun.co.kr/skilnote1/myshortcut/react-nodebird/90
-
해결됨스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
테스트 시 트랜잭션 관련 트러블 ㅜ
안녕하세요. 선생님. "스프링 통합 테스트" 강의 따라하던 중입니다. @Transactional 없이 하면 회원가입() 메소드 정상적으로 잘 실행되는데, @Transactional 을 살려서 Run하면, "Could not roll back JDBC transaction" 이 포함된 메시지가 나오고 정상 실행을 못합니다. What can I ...? ㅜ 메시지 전문은 다음 포스트에서 보실 수 있습니다. 비공개 포스트로 비번이 kyh.spring 입니다. https://sk7168.tistory.com/5
-
미해결공공데이터로 파이썬 데이터 분석 시작하기
질문드립니다.
안녕하세요 선생님 :)) 다름이 아니라 folium marker의 popup창에 dataframe을 표현하고 싶은데요! 단지 png 파일이 아닌 json 파일을 이용해서 불러오고 싶은데 https://python-visualization.github.io/folium/quickstart.html - 여기서 Vincent를 이용하는 방법을 따라해봤는데 잘 되지가 않습니다ㅠㅠ https://github.com/DongHunOh/Danghun_memory/tree/master 여기에 Json 파일 있습니다! 배곧 - 연도별 나이 인구수 비교(PNG -> Json), df_bg.json(csv -> Json) 시켰습니다. 둘 다 해봤는데 되지 않아서,, 이런 경우 어떻게 하면 좋을까요?
-
미해결[기초스피치] 14년차 아나운서에게 배우는 말 잘하는 방법!
목의 떨림
안녕하세요! 복식호흡할 때 복부에 숨이 차오르는 건 되게 잘 되는 것 같아요! 그런데 배로 숨을 들이마셔도 손으로 목젖에 갖다 대보면 울리는 느낌이 있는데 잘못하고 있는걸까요?? 복식호흡하면서 목소리를 최대한 낮게 내리면 목젖이 아래로 내려가면서 울림이 느껴지는데 잘못된건지 알려주세요~~ 그리고 코로 숨을 마시면서 하는 복식호흡과 입으로 숨을 마시면서 하는 복식호흡의 차이는 단순히 단번에 들이킬 수 있는 호흡량의 차이인지 아니면 다른 장점이 있는지도 궁금합니다 !
-
해결됨코로나맵 개발자와 함께하는 지도서비스 만들기 1
ms edge 브라우저에서 geolocation이 작동하지 않는거 같아요
ms edge를 이용해서 개발을 하고 있는데요 위 빨간 박스 부분에서 에러가 나더군요 보안상의 이유로 ms edge에서는 작동이 안되는거 같습니다 검색을 해보니 ms edge 브라우저에서는 지원을 하지만 https로 접속 할 겨우에만 지원을 하는거 같더라고요 아무래도 서버 ssl 인증문제 같은데 크롬 기반인 ms edge도 사용자수가 점점 많아 지는 분위기속에 이 부분도 보완을 해주셨음 좋겠습니다..
-
미해결Flutter 입문 - 안드로이드, iOS 개발을 한 번에 (with Firebase)
설치과정에서 오류가 나옵니다ㅜㅜ
강의를 들으면서 flutter 을 설치하는 과정에서 오류가 나니 기운이 쫙빠지네요ㅜㅜ stackoverflow나 구글링해봐도 해결책을 못찾아 질문을 올립니다.. Android studio 는 원래 설치했다가 재설치를 했었어요. C:\Program Files\Android\Android Studio C:\Users\사용자파일\.AndroidStudio4.0 C:\Users\사용자파일\AndroidStudioProjects 이런 경로로 설치를 했어요. 강의대로 flutter 홈페이지에서 1.22.2버전을 Download 폴더에 설치한 후 flutter_console.bat 파일을 실수로 열고 C:\Program Files\flutter 경로로 이동을 했어요 환경변수는 Path에 C:\Program Files\flutter\bin 두개 다 추가했고요 안돼서 추가로 flutter 변수를 생성해서 C:\Program Files\flutter\bin로 추가했어요. Android Studio Plugins 에서 Dart, Flutter 설치 후에 IDE restart 했었고 Start a new Flutter project가 떠서 정상적으로 설치가 된줄 알았습니다. 하지만 flutter_console.bat 파일에서 flutter doctor 명령을 실행해보니 밑에와 같은 오류가 나왔어요. Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, v1.22.2, on Microsoft Windows, local ko-KR) [✓] Android toolchain - develop for Android devices (Android SDK 30.0.1) [✓] Android Studio (version 4.1.0) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] Connected devices ! No devices available ! Doctor found issues in 2 categories. Android studio SDK Tools에서는Android SDK Build Tools, Android Emulator, Android SDK Platform Tools, Android SDK Tools(Obsolete)의 Tools가 설치되어있어요.Android Studio Settings 에서 Flutter Path 경로를 설정해야한다고해서 Languages & Frameworks 경로에 들어가보니Dart 와 Flutter 언어가 뜨지 않습니다. flutter_console.bat 파일에서 flutter doctor --android-licenses 명령을 실행한 후에 모든 licenses를 y버튼을 눌러서 설치도 했어요. 하지만 여전히 오류가 납니다ㅜㅜFirebase를 연동한 project가 있어서 Android Studio를 삭제하니가 껄그러운데 설치했다가 재설치한게 문제인걸까요?jdk 는 13 버전쯔음 됩니다. 저에게 답변을 주세요ㅠㅠ
