묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 훈훈한 Javascript
display:flex의 의미
제가 섹션4까지 듣고 카운트다운 코드를 다시 보며 복습하고 있는데 style.display = flex가 이 섹션 4까지의 코드에서 어떤 맥락으로 사용됐는지가 이해가 잘 가지 않아 이 부분을 여쭤보고 싶습니다. 자바 스트립트 관련 여러 문서들을 참고하니 자바스크립트에서 flex의 의미는 css에서와 크게 다르지 않게 요소의 display 속성(인라인or블록 요소인지 등등)을 설정한다는 것을 이해했습니다. 그러나 아래의 코드 부분을 보다가 의문이 생겼습니다. if (remaining <= 0) { container.style.display = 'none'; messageContainer.innerHTML = '<h3>타이머가 종료되었습니다.</h3>'; messageContainer.style.display = 'flex'; setClearInterval(); return; } else if (isNaN(remaining)) { container.style.display = 'none'; messageContainer.innerHTML = '<h3>유효한 시간대가 아닙니다.</h3>'; messageContainer.style.display = 'flex'; setClearInterval(); return; }display:none은 요소를 숨겨준다는 의미로 이해하기 쉬웠지만 display = flex의 뜻을 알고 보니 messageContainer.style.display = flex는 어떤 의미로 사용된 것인지 감이 잘 안 잡힙니다 ㅠㅜ. 위에 innerHTML에 값을 할당한 것으로 충분하다고 생각했는데 왜 flex가 선언되는지 이유를 알고 싶습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
트랜잭션 사용 유의점
안녕하세요. 지난번 질문에 빠른 답변감사합니다. 트랜잭션 공부 중 주의사항에 대한 블로그 글을 짧게 봤는데요, 트랜잭션은 꼭 필요한 최소의 코드에만 적용하는 것이 좋다는 내용이었습니다. 결제 부분만 트랜잭션을 사용하고 나머지 게시판, 채팅 등 다른 기능 구현시 굳이 트랜잭션 사용 안해도 되는거죠?
-
미해결생활코딩 - 자바스크립트(JavaScript) 기본
배열관련 질문드립니다.
아래와 같이 함수로 리턴 값을 배열로 출력했을 때 변수로 따로 선언하지 않고 사용하는 것을 지양하는 건가요? function get_members(){ return ['egoing', 'k8805', 'sorialgi'];}alert(get_members()[1]);
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
포트폴리오는 몇개가 좋을까요?
프론트 엔드 강의에 있는 포트폴리오 1개백엔드 강의에 있는 포트폴리오 1개이 강의에 총 포트폴리오가 2개 있는데2개 다 하는게 좋을까요?
-
해결됨[코드캠프] 시작은 프리캠프
안녕하세요
안녕하세요, 강사님!수업 너무 잘 듣고있습니다.다름이 아니라 제가 모르고 싸이월드 만들기 피그마에서 협업 요청 버튼을 눌렀는데 어떡하죠..?ㅠㅠ거절해주실 수 있나요..?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
[3D 텍스트효과(2)] GSAP을 위한 애니메이션 Timeline flow"기획", 이렇게 하면 될까요?
안녕하세요,애니메이션 Timeline을 기획(정의)하는 법(방식)?에 대해 문의드립니다! 섹션, "3D 텍스트효과(2)" 에서인터벌 단위로,duration, stagger, pause, 각각의 value 계산 법을 알려주셨는데요 강좌에서 나온 예시 SVG 이미지 보면서,저렇게 애니메이션을 정의하면 되겠다,인사이트를 얻었습니다. 문득, 범쌤께서는 어떻게 애니메이션 flow를 정의 하시는지,관점이나, 포인트가 궁금해졌습니다!(이미 강의에서 SVG 이미지로 보여주셨지만, 혹시 더 있을까봐서요,,,) 강의 내용처럼,애니메이션을duration,stagger,pause,delay 단위로 배치하면, GSAP을 적용하는데 용이 하다 라고 이해하면 될까요?! 블럭 맞추듯 척척, 애니메이션이 구현되는 과정이 신기하네요! 감사합니다!
-
미해결Node.js로 웹 크롤링하기
크롤링 자바스크립트 exe파일
안녕하세요!! 크롤링 강의 너무 잘들었습니다!!이 강의를 듣고 더 무언가를 해보고 싶어, 질문드립니다!!강의 내용 중 unsplash사이트에서 이미지를 가져오는 내용이 있는데요.이 코드를 돌리는데 명령어가 아닌 js파일을 exe실행 파일로 만든 후 exe파일을 눌었을 경우 코드가 실행되기 위해서 npm의 pkg를 사용하여 만들었는데 실행이 안되서요..ㅠ강의자님은 js파일을 exe실행 파일로 만들으셔서 사용하실 때 어떤 방법을 이용하시나요?!
-
해결됨[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습
혹시 심화강의는 계획이 있으신가요?
안녕하세요 강의 잘 듣고 있습니다 입문자들이 듣기에 참 좋은 강의 같아요 혹시 자바스크립트 입문자들을 위한 알고리즘 강의인데 이보다 높은 난이도를 수업하는 강의가 생길까요?
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
Basic 토큰을 API 서버가 받아서 어떤식으로 검증을 하는지 궁금합니다
안녕하세요 코드팩토리님!! Flow chart보다가 궁금증이 생겨서 질문드립니다~ 토큰 발급 과정에서 클라이언트가 "username:password" 정보를 인코딩 후 API 서버로 전송하면 API 서버는 Basic 토큰을 받아서 디코드 후 "username:password" 정보를 추출해서 사용자가 유효한지 검증한다고 하는데플로우 차트 보면 데이터베이스에 사용자 정보를 요청하지 않는데 API 서버가 어떤 방식으로 지금 이 사용자가 유효한지를 검증하는 건가요?
-
해결됨입문자를 위한 자바스크립트 기초 강의
배열 메소드 2편 질문 드립니다.
const tw = ['나연','사나','지효','다현']; tw.forEach(function( member, index ){ const p = document.createElement('p') p.textContent = `${index+1} 번째 멤버는 ${member}` document.body.appendChild(p); }) 위처럼 작성을 했는데요. 아래처럼 에러가 발생합니다. 제가 어디가 틀렸는지 감이 안 잡혀서요 ㅠUncaught TypeError: Cannot read properties of null (reading 'appendChild') // 크롬 버전 : 버전 118.0.5993.118(공식 빌드) (64비트)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
ElasticSearch 개념 내용은 어디서 볼 수 있나요?
ElasticSearch 개념을 학습할 수 있는 부분이 검색 섹션에 있을 거 같은데 보이지 않아 여쭤봅니다.
-
미해결애플 웹사이트 인터랙션 클론!
특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.
초반부 messageA_opacity_in 을 콘솔로 찍었는데요,partScrollStart보다 currentYOffset이 작을때는rv에 values[0] 즉 '0'을 리턴해야하는데,그러지 않고 -1부터 0까지 쭉 커지다가 css가 적용되는 구간부터 1로 점점 커집니다...const sceneInfo = [ { //0 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 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: [0, 1, { start: 0.1, end: 0.2}], messageB_opacity: [0, 1, { start: 0.3, end: 0.4}] } }, { //1 type:'normal', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-1') } }, { //2 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-2') } }, { //3 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-3') } } ];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; switch (currentScene){ case 0: let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset) objs.messageA.style.opacity = messageA_opacity_in console.log(messageA_opacity_in) break; case 1: break; case 2: break; case 3: break; } } 도와주세요 ㅠ
-
미해결Javascript ES6+ 제대로 알아보기 - 초급
프로토타입 체이닝에 대해서
프로토타입 체이닝에 대해서 보면서 느끼는건, 마치 객체지향의 오버라이딩과 같은 느낌이 들어서요!둘의 차이가 궁금합니다.
-
해결됨Javascript ES6+ 제대로 알아보기 - 초급
react 사용할 때 destructuring assignment라고 하는거 진짜 많이 사용 했는데 신기합니다.
const { name : name, age : age } = { name: '재남', age: 30 } console.log(name, age) 원래 이게 정석이었는데, shorthand properties 덕분에 축약 해서 사용 할 수 있게 된건지 몰랐네요. 감사합니다!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
map으로 배열을 만들지 않아도 괜찮을까요?
planet.forEach(planetName => { /* html */ $('.space').insertAdjacentHTML( 'beforeend', `<div class="solar_system" data-planet-name="${planetName}"> <div class="planet ${planetName}"> <div class="overlay"></div> <h2>${planetName}</h2> </div> </div>` ); });이렇게 처음부터 forEach로 요소를 만들어도 괜찮나요?
-
해결됨Javascript ES6+ 제대로 알아보기 - 초급
2023-10-30일 기준 Object Rest/Spread Properties 적용 됬나봐요. 짱신기
그냥 크롬 개발자 도구 켜서 해봤는데 됩니다!
-
미해결따라하며 배우는 타입스크립트 A-Z
소스코드 강의 항목에 링크가없습니다.
소스코드 링크가없는데 오류인가요? 확인한번부탁드립니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강좌가 현재 업데이트 되고 있는지가 궁금합니다 !
안녕하세요 이틀전에 강의 수강을 시작하여 너무나도 유익한 강의에 늘 놀라면서 듣고 공부하고 있는 학생입니다.현재 팔로우 시스템이 39강으로 마지막으로 올라와있는데 이후 40,41,42 등등에서 댓글 및 게시글 좋아요 같은 기능도 업데이트 예정인가요 ?혹은 이미 현재 파트 1 강좌는 끝이난 것인지 궁금합니다 !++++게시글과 댓글의 권환 관련 가드에서 auth모듈에 있는 Bearer토큰 을 활용하여 사용자의 id만 사용해서 권한을 사용할수 있을꺼라고 생각 드는데 맞을까요 ?게시글,댓글 가드를 따로 만드신게 코드를 깔끔하고 유지보수를 편하게 하기 위함인지 아니면 제가 생각한대로 bearer토큰만 사용한 가드로만 게시글과 댓글 까지 권한 확인을하면 다른 문제점이 있는지가 궁금합니다 !!++++현재 깃허브 코드에 채팅 가드 관련 코드는 빠져있는데 혹시 추가된 코드가 따로 있는지 알수 있을까요 ?혹은 채팅 관련 가드에 대한 코드가 빠진 이유가 있는지도 궁금합니다.!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요 리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 합니다
리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 하는데 로그인api를 호출 후 fetchUser를 호출하면 Unauthorized에러가 납니다 헤더에 토큰이 저장되지 않아서 그런걸까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
애니메이션 재생헤드를 처음으로...
안녕하세요 선생님 1.어제 질문드린 내용(forEach로 다중 요소에 중복 이벤트 걸기)은 마지막에 말씀해주신'gsap.to(item,{rotation:”+=360”}) 으로 작성해보세요 ' 코드로 해결을 하였습니다. 감사합니다.그런데 그전에'그럴경우 애니메이션이 종료 후 애니메이션의 재생헤드를 처음으로 돌려놓는 코드를 작성해 주시거나' 라고 말씀해주셨는데... 이게 어떻게 하는건지 도저히 모르겠어요..ㅜㅜㅜ예시코드를 시간되실때 한번 보여주셨음 해요..(아직 많이 부족합니다..이해 부탁드려요..ㅜㅜ)시간되실 때 천천히 해주셔도 됩니다.항상 똑부러지는 강의 잘 듣고 있습니다.감사합니다.