묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
반응형 관련해서 질문드립니다.
안녕하세요. 강사님강의 완강하고 반응형 작업을 테스트 해보던 중에 잘 풀리지 않는 점이 있어 문의 드립니다.아래 코드에서 반응형 matchMedia 로 해상도 별로 나눠서 작업하려던 중에 pin이 끝나고 bottom 영역이 반쯤 올라왔을때 개발자모드에서 기기 툴바를 사용해 모바일 사이즈로 전환해 버리면 pin된 영역이 틀어지는 현상이 발생합니다. 이전 가로와 높이값을 그대로 유지하고... 원인과 이유를 알 수 있을까요?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TEST</title> <style> * {margin: 0; padding: 0;} .wrap { overflow: hidden; } .top { height: 400px; } .center { position: relative; overflow: hidden; width: 100vw; height: 100vh; background: purple; } .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; border-radius: 40px; background: yellow; } .bottom { height: 2000px; background: gray; } .box { width: 200px; height: 200px; background: orange; } </style> </head> <body> <div class="wrap"> <div class="top"></div> <div class="center"> <div class="bg"></div> </div> <div class="bottom"> <div class="box"></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> <script> ScrollTrigger.create({ trigger: '.wrap .center', start: 'top top', end: "+=2000", animation: gsap.to('.wrap .bg', {width: '100%', height: '100%', borderRadius: 0}), pin: true, scrub: true, invalidateOnRefresh: true, markers: true, }) const wrapper = document.querySelector('.wrap'); const box = document.querySelector('.box'); const mm = gsap.matchMedia(wrapper); mm.add('(max-width: 1024px)',()=>{ gsap.to(box,{ backgroundColor: '#000', }) console.log('m'); }) mm.add('(min-width:1025px)',()=>{ gsap.to(box,{ rotation: 360, duration: 2, repeat: -1, ease:'none' }) console.log('pc'); }) window.addEventListener('resize', ScrollTrigger.update) // window.addEventListener('resize', ScrollTrigger.refresh) </script> </body> </html>
-
미해결
puppeteer 네이버 로그인
안녕하세요. 제가 프로그램을 만들고 있습니다.네이버 로그인을 puppeteer로 자동화를 하려고 하고있습니다.하지만 네이버에서 매크로 프로그램으로 로그인을 하는것을 막고 있습니다 ㅠㅠ로그인을 자동화 시키려하면 캡챠로 넘어가서 다른 방법이 있는지 알아보는 와중복사 붙여넣기 기능을 하면 된다고 구글링을 통해 봤습니다.하지만 복사 붙여기능또한 네이버 로그인에서는 안되게 막아놓은것 같습니다.. 혹시 네이버 로그인 자동화를 구현하신 분 있는 멋진분을 찾습니당.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
relation option "nullable : false" 로 설정했는데, 테이블에 insert가 되고 있습니다.
안녕하세요 선생님~위와 같이 세팅해서user/profile로 post 요청을 보내면 500 에러가 나야하는걸로 알고 있는데,이처럼 잘 들어가 버리네요ㅜ`users` 로 get요청을 보내도 profile이 null이 들어간 상태로 조회됩니다.개발환경 버전도 올려드립니다~
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
CSS 적용 안되는 현상
위와 같이 코드를 작성하였습니다만, body 부분의 css가 적용이 안됩니다.여기서 제가 궁금한 것은 .html 파일 위의 <!DOCTYPE html>을 삭제하면 body값이 100%에 맞게 보여지는데, 왜 이렇게 적용 되는지 잘 모르겠습니다..<!DOCTYPE html>의 태그 같은 경우는 문서 형식을 선언하는것으로 알고있는데..해당 코드의 존재 유무에 따라 CSS 적용이 되다 안되다가 하는지 잘 모르겠습니다.. 답변 주시면 감사드리겠습니다!!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
docker-compose yaml 파일 깃 업로드
안녕하세요 코팩님 nestjs/config 모듈과 process.env 를 이용해서 환경변수 파일을 작성하고 환경변수를 불러오고 하잖아요. 그런데 docker-compose.yaml 파일에도 db password나 이런게 존재하는데, docker-compose 파일은 깃허브에 보통 포함을 안 하나요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
map 함수에서 cannot read properties of undefined 에러 발생
강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?
-
미해결만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
npm 대신 yarn
안녕하세요! npm 대신 yarn 사용하는게 더 좋은가요??
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
지뢰 힌트 사라짐(대괄호)
function openAround(rI, cI) { // 주변 공간 확인 setTimeout(() => { // stack overflow 방지 (콜백큐에 저장) const count = open(rI, cI); if (count === 0) { openAround([rI - 1], [cI - 1]); // 대괄호 적용 시 아래 사진처럼 됨 openAround(rI - 1, cI); openAround(rI - 1, cI + 1); openAround(rI, cI - 1); openAround(rI, cI + 1); openAround(rI + 1, cI - 1); openAround(rI + 1, cI); openAround(rI + 1, cI + 1); } }, 0) }위 코드로 실행시키면 지뢰 좌측만 힌트 숫자가 사라집니다.대괄호로 인수가 배열로 되었을 때 함수가 어떻게 작동되는지 궁금합니다.
-
해결됨진짜! 자바스크립트(Javascript) - 기초부터 고급까지
var 변수의 문제점 설명하실 때 질문 있습니다.
function testShadowing() { let x = 5; if (true) { let x = 10; console.log(x); } console.log(x); } testShadowing()위와 같이 let으로 x 변수를 2번 할당했는데, 실제 메모리에는 어떻게 할당이 되나요?블록 스코프라고 하더라도 함수 스코프 안에서 블록 스코프가 만들어 질 것으로 생각이 되는데(뇌피셜입니다.), 이미 함수 스코프에서 x라는 변수명을 사용하고 있어서 블록 스코프에서 x는 자바 스크립트 엔진에서 어떻게 받아들이고 실제 메모리에 어떤 식으로 메모리 할당을 하는지 궁금합니다.
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
findOne 사용 이유
강의 8:23에 createChat 함수의 리턴값으로 save 함수에서 반환된 chat을 사용하지 않고 findOne 함수를 통해 조회한 chat을 사용하신 이유가 궁금합니다!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
오픈그래프 태그
배포 후 링크 공유하는데 오픈 그래프 태그가 나타나지 않습니다.ㅜㅜ
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
css 적용 중 강의대로 적용되지 않아 질문 드립니다
맛집 지도 뼈대 잡고 반응형 처리하기 -> 파트를 들으며 수강 중이었는데요, 버튼들이 이렇게 4,4개로 정렬되지 않아서 질문 드립니다.width: 25%를 했을 땐 위와 같이 정렬되고 (모든 너비에서 똑같습니다) 24%를 하면 4개 4개로 되긴 하는데 너무 찝찝해서요.. 분명 똑같이 따라 친 것 같은데 강의를 다시 돌려보아도 찾기가 힘드네요.. 아래에 제 css와 html 코드를 올려두겠습니다 ㅠㅠ<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>맛집지도</title> <meta name="author" content="동네코딩" /> <meta name="description" content="맛집지도 서비스" /> <meta name="keywords" content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버" /> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="inner"> <div class="nav-container"> <h1 class="nav-title">맛집지도</h1> <button class="nav-contact">Contact</button> </div> </div> </nav> <main> <section id="category"> <div class="inner"> <div class="category-container"> <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2> <div class="category-list"> <button class="category-item">한식</button> <button class="category-item">중식</button> <button class="category-item">일식</button> <button class="category-item">양식</button> <button class="category-item">분식</button> <button class="category-item">구이</button> <button class="category-item">회/초밥</button> <button class="category-item">기타</button> </div> </div> <!-- 카테고리 --> </div> </section> <div id="map"> <!-- 카카오지도 --> </div> </main> </body> </html> @font-face { font-family: "KyoboHandwriting2020A"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff") format("woff"); font-weight: normal; font-style: normal; } * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 10px; font-family: "KyoboHandwriting2020A"; } nav { background-color: rgb(212, 210, 210); } .nav-container { padding: 1rem 0; display: flex; flex-direction: row; /* row로 결정되어있는데 가시적으로 적어줌 */ justify-content: space-between; align-items: center; } .nav-title { font-size: 3rem; } .nav-contact { font-size: 2.5rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .category-title { font-size: 3.5rem; } .category-item { width: 25%; height: 5rem; background:none; border:none; font-family: inherit; font-size: 1.6rem; } .inner { padding: 0 1.5rem; } @media all and (min-width: 1024px) { .inner { max-width: 1024px; margin: 0 auto; } }
-
미해결리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트
비디오 상세페이지
Cannot read properties of undefined (reading '0') TypeError: Cannot read properties of undefined (reading '0') at http://localhost:3000/static/js/src_pages_Video_tsx.chunk.js:40:31선생님 이런 에러가 나옵니다 값을 읽어오지 못하는거 같은데 어떻게 해야 할까요? 코드는 선생님꺼 복붙해서 했습니다이전 강의까지는 잘 됐는데 이번 강의에서 이런 에러를 만났습니다 확인부탁드립니다 console.log(videoId)는 undefind 나옵니다그리고 주소창에는http://localhost:3000/video/[object%20Object] 이렇게 나옵니다
-
미해결처음 만난 리액트(React)
미니 블로그 npm start 시 Cannot read properties of null 에러
안녕하세요 블로그 만드는 과정에서 에러가 떴는데 이유를 모르겠어서 질문 드립니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
섹션26 FileIntercepter적용문의
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.코드팩토리 통합 링크https://links.codefactory.aiFlutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
섹션26 FileIntercepter적용 질의
분명 postman으로 FormData로 설정하신후title,content,image를 보내셨는데 어떻게Nestjs에서 @Body()로 받을수 있나요 Http요청이니 req.body 형식으로 접근 가능한게 아닐까요??
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
configService와 process.env
안녕하세요 코팩님!class 작성 시에 다른 class를 상속하여 작성하는 경우 있잖아요nestjs/passport를 이용해서 구글 oauth 로그인을 구현하려고 합니다.import { PassportStrategy } from '@nestjs/passport'; import { Strategy } from 'passport-google-oauth20'; import { Injectable } from '@nestjs/common'; import { ConfigService } from '@nestjs/config'; @Injectable() export class GoogleStrategy extends PassportStrategy(Strategy, 'google') { constructor(private readonly configService: ConfigService) { super({ clientID: this.configService.get('GOOGLE_CLIENT_ID'), clientSecret: this.configService.get('GOOGLE_CLIENT_SECRET'), callbackURL: 'http://localhost:3000/auth/google/callback', scope: ['email', 'profile'], }); }이 경우에super() 호출 전에 this를 참조하려고 해서 에러가 발생합니다.이런 경우에는 불가피하게 그냥 @Injectable() export class GoogleStrategy extends PassportStrategy(Strategy, 'google') { constructor() { super({ clientID: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, callbackURL: 'http://localhost:3000/auth/google/callback', scope: ['email', 'profile'], }); }이렇게 직접 환경변수를 적어주는 방법 밖에는 없을까요?
-
미해결[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
콜백 큐와 테스크 큐
테스크 큐와 콜백 큐는 같은 의미인 가요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
map foreach 매개변수 이름은 product, index아니여도 되네요
그냥 첫번째 매개변수가 대상이고 두번째 매개변수는 index취급하는건가요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman으로 만든 주소는 만든사람 본인만 들어가지는건가요
다른 사람은 못보는걸까요
