묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.13) New 페이지 구현하기 1. UI 마지막 부분 관련 질문
26분 50초 경에메인 컨테이너가 화면 끝까지 안 내려온다는 이유로index.css의 body에 display: flex;를 설정해주셨는데제 화면에서는 display: flex;를 안 적어줘도 메인 컨테이너가 끝까지 내려오고display:flex; 를 쓴 것과 안 쓴 것의 차이가 없습니다.지금 React의 버전이 올라가서 달라진 걸까요?노트북은 LG gram 쓰고 있습니다.display: flex; 체크 되어 있는 버전display: flex; 체크 안 된 버전
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
promise.all
안녕하세요. promise.all([]) 자바스크립트는 병렬로 실행할수 없는데promise.all 을 사용하면 병렬이 가능한건가요 ?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
input 관련 문의
express 로 GraphQL 사용하였을 때 코드는 아래와 같습니다.const typeDefs = `#graphql input CreateBoardInput { writer: String title: String contents: String } type Mutation { createBoard(createBoardInput: CreateBoardInput!): String } `; const resolvers = { Mutation: { createBoard: (parent, args, context, info) => { ... return "게시글 등록 성공" } }위 내용을 Nest.js - GraphQL 에 적용하였을 때 아래와 같이 구현했습니다.@Mutation(() => String) createBoard( @Args('createBoardInput') createBoardInput: CreateBoardInput, ): string { // 1. 브라우저에서 보내준 Data 확인하기 console.log(createBoardInput.writer); console.log(createBoardInput.title); console.log(createBoardInput.contents); // 2. DB접속 후, 데이터 저장 => 데이터 저장했다고 가정 // 3. DB에 저장된 결과를 브라우저에 응답(response) 주기 return '게시글 등록 성공'; } @InputType() export class CreateBoardInput { // export 추가 및 클래스 이름 변경 @Field(() => String) writer: string; @Field(() => String) title: string; @Field(() => String, { nullable: true }) contents: string; }@InputType() 데코레이터: CreateBoardInput 클래스에 @InputType() 데코레이터를 적용하여, 이 클래스가 GraphQL 스키마에서 입력 타입으로 적용되게 되는데요.InputType 데코레이터의 경우 class 파일 위에 존재해야 한다고 합니다.지금처럼 InputType이 늘어날때마다 class 를 추가하나요?실무에서는 어떻게 사용하나요?
-
미해결포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편
Header 스타일링 강의 logo
안녕하세요. 강의 잘 듣고 있습니다강의 중간에 로고 이미지를 교체하시는데 Header 교안에 첨부된 이미지가 없습니다어디서 확인할 수 있을까요?
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
계속 헷갈리네요. 이게 맞나요?
🚨질문 작성법 및 안내사항질문 작성법섹션 4. Promise 객체안녕하세요.수강 중에 계속 헷갈려서 적어봤는데, 이게 맞나요?Promise가 resolve, reject를 콜백 함수로 사용.setTimeout에서 resolve(value+10)으로 호출.resolve는 Promise의 state를 성공? 으로 바꾸고 resolve= value+10 으로 변환workA는 Promise를 반환 ...(객체?).then을 통해 promise의 resolve 프로퍼티 반환?반환된 값을 바로 매개변수 사용?(???)(resA) => {내용}; 을 콜백 함수로 이용.workA(10).then((resA) => {내용}); Promise는 미리 정의된 객체고 new Promise로 promise에 생성? 한 거죠?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
이상한 부분이 있어서 문의드립니다.
섹션3. Advanced Trigger 에서Animation Toggle(1) 강좌에서 문의드립니다. 첫번째 왼쪽에는 프로그래스 스크롤트리거를 넣었는데요,아래 소스에서 trigger: '.scroll-content' 에서 대상을 넣을걸로 알고 있는데요,마크업 구조상에 .scroll-content 라는 이름의 클래스명이 없는데 이건 어디서 나온걸까요<nav class="lnb"> <div class="progress"></div> <ul> <li> <div class="dot"></div> <span>Home</span> </li> <li> <div class="dot"></div> <span>About</span> </li> <li> <div class="dot"></div> <span>Product</span> </li> <li> <div class="dot"></div> <span>Portfolio</span> </li> <li> <div class="dot"></div> <span>Contact Us</span> </li> </ul> </nav> <div id="container"> <section class="section section01"><h2>section1</h2></section> <section class="section section02"><h2>section2</h2></section> <section class="section section03"><h2>section3</h2></section> <section class="section section04"><h2>section4</h2></section> <section class="section section05"><h2>section5</h2></section> </div> ScrollTrigger.create({ trigger: '.scroll-content', start: 'top top', end: 'bottom bottom', animation: gsap.from('.progress',{scaleY:0,transformOrigin:'center top',ease:'none'}), scrub: true, })
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
layout tab 설정 문의.
탭 설정 관련 문의 드립니다.현재 디렉토리는 아래 이미지와 같은 구조이고, 하단의 스크립트처럼 Tab 설정에는 Home / Profile / setting 3가지가 명시 된 상태인데 이전 미션에서 작성한 mission.tsx가 하나의 탭으로 잡히고 있습니다.RN 구조상 (tabs) 디렉토리 하단에 파일들이 자동으로 탭으로 잡히는 구조인지, 별도의 설정으로 뺄 수 있는지 알수 있을까요?? export default function TabLayout() { return ( <Tabs screenOptions={{ tabBarActiveTintColor: "black", headerShown: false, }} > <Tabs.Screen name="index" options={{ title: "Home", }} /> <Tabs.Screen name="my" options={{ title: "Profile", }} /> <Tabs.Screen name="setting" options={{ title: "setting", }} /> </Tabs> ); }
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물앨범 3-3 에서 express@5 설치 후 app.get('/*', callback) 에서 문제가 발생합니다.
npm i express 로 express 를 설치 후 강의와 같이 코드를 작성했지만 ..app.get('/*', (req, res) => {...}); 에서 오류가 발생합니다.TypeError : Missing parameter name at 2: https://git.new/pathToRegexpError 가 발생합니다.구글에서 검색하여 보니 Express v5에서 '/*' 형식은 맞지 않는 것으로 보입니다.따라서 아래와 같이 코드를 정규식으로 변환하니 제대로 실행 되었습니다.app.get(/^\/(.*)/, (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); 혹시 정규식 말고 다른 수정 방법이 있는지 알고 싶습니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
1. 동물 앨범 만들기 1-1 에서 template 배열 선언후 왜 문자열로 합치기를 했나요?
template 변수를 빈 배열 리터럴 초기화한 후 배열에 push() 메서드를 사용하여 생성된 이미지 요소를 삽입하는 것이 맞다 봅니다. 나중에 출력 시 join() 메서드로 문자열 출력하는 것이 좋겠네요... 🙂const API_URL = 'https://animal-api-two.vercel.app/'; const $content = document.querySelector('div.content'); let template = []; const getData = async () => { let res = await fetch(API_URL); try { if (res) { let data = await res.json(); data.photos.forEach((elm) => { template.push(`<img src="${elm.url}" alt="${elm.name}" />`); }); $content.innerHTML = template.join(' '); } } catch (err) { console.log(err); } }; getData(); ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드
nav 에 sign in 라인
안녕하세요 선생님수업 잘 듣고 있습니다.강의를 듣는 도중에 sign in 왼쪽선이랑아래 hero 섹션에서 제일 오른쪽 꽃이미지 왼쪽선이랑미세하게 안맞는데 피그마에서는 선이 딱 맞더라구요이것도 딱 맞게 조정할 수 있는 방법이 있나요?
-
미해결React 완전 끝내기: useHoooooook
React 완전 끝내기: useHoooooook / seCallback 사용 배경 / name 변수가 무엇인지 알수있을까요?
name 이 선언되어있지않아서 실행시 에러가납니다
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
배포 강의에서 Blocked request 경우, vite.config.js 파일도 수정해야되나요?
안녕하세요!강의 듣다가 최종 배포에서 질문이 있습니다. 강의에서는 vite.config.js 파일 내용 수정은 없는 것 같은데요아래 순서로 했는데 홈페이지 메인화면에서Blocked request. This host ("5d39-218-159-221-155.ngrok-free.app") is not allowed.To allow this host, add "5d39-218-159-221-155.ngrok-free.app" to server.allowedHosts in vite.config.js.에러가 뜨는데요vite.config.js 파일 수정을 해야되나요? 프론트, 백앤드 서버 실행cmd 창에서 ngrok http 5173 입력index.js 파일에서 아래와 같이 수정 app.use(cors({ //origin: "http://localhost:5173", origin: "https://5d39-218-159-221-155.ngrok-free.app", credentials: true, })); ngrok 에러는 아래와 같아요 08:36:45.923 KST GET /favicon.ico 403 Forbidden
-
미해결클린업 JavaScript: 점프업!
안녕하세요 선생님 다음 강의는 무엇이죠?
안녕하세요 선배님 혹시 계획중이신 강의가 무엇이 있는지 알수있을까요?
-
해결됨진짜! 자바스크립트(Javascript) - 기초부터 고급까지
코드 샌드박스 소스 입력시 콘솔이 계속 반응하는것 같아요.
안녕하세요 코드 샌드박스 소스 입력시소스를 입력할때마다 console.log()가 계속 반응하는 것같은데소스입력할때마다 반응하는 것을 멈출수 있을가요? 혹시.. 코드샌드박스 적응이 아직 안되었으면.. 비쥬얼 코드로 공부해도 큰 문제없을가요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
조건부 렌더링을 위해 인스턴스를 매번 생성하는 것의 장단점이 궁금합니다.
조건부 렌더링을 통해 다음과 같이 url에 따라 특정 컴포넌트를 생성하는 방법을 이해했습니다.const render = () => { const path = this.state.currentPage; $app.innerHTML = ""; if (path.startsWith("/city")) { renderHeader(); renderCityDetail(); } else { renderHeader(); renderRegionList(); renderCityList(); } };이 경우, 컴포넌트가 추가될 때마다 this.setState에 추가된 컴포넌트의 setState를 추가로 호출해야 하는 번거로움도 사라진 것 같습니다. 하지만, 상세 페이지와 메인 페이지를 계속 왔다갔다 할 경우, 공통으로 호출되는renderHeader() 와 다른 렌더링 함수가 호출되고 인스턴스가 계속 생성이 될 것 같습니다. 이렇게 인스턴스가 계속 생성이 되면, 메모리 효율이 좋지 않을 것 같은데, React나 Vue 같은 도구에서는 이런 문제를 해결해주고 있나요? 아니면, 이 정도는 크게 신경 안써도 될 정도로 미비한 건지 궁금합니다.
-
미해결JavaScript 베이스캠프
마지막 과제 API 접속이 안 됩니다.
https://test.api.weniv.co.kr/mall접속이 안 됩니다.
-
미해결애플 웹사이트 인터랙션 클론!
스크롤 속도에 따른 messageA_opacity_out
강사님처럼 똑같이 코드를 작성했음에도 불구하고 스크롤을 천천히 내리면 opacity가 0까지 잘 적용이되는데 스크롤을 빨리내리면 opacity가 0으로 빠지다가 그상태로 남아서 씬2까지 넘어가요.혹시 왜그런지 알 수 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect 의존성배열
의존성 배열에 보통 배열이나 객체를 넣지 않는 게 좋다고 어디서 본거 같은데 useState으로 만든 객체나 배열은 상관이 없고 const a = {a: 1, b:2} 이런 거나 const b = []; 이렇게 초기화 된 것들만 넣지 말라고 하는 것인가요? 맞다면 이유는 const a 랑 const b는 리렌더 될 때마다 참조 값이 바뀌고 useState으로 만든 것은 리렌더링이 되어도 set 함수가 쓰이지 않는 이상 참조 값이 바뀌지 않아서 그런 건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[12.6) 폰트, 이미지, 레이아웃 설정하기] 이미지 설정 관련해서 질문 있습니다.
제 얕은 지식으로는 svg 파일이 png 파일보다 용량이 더 적어서 좋다고 알고 있는데어떤 이유로 이미지를 svg 파일 말고 png 파일로 진행하시는 이유가 있는지 궁금합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[12.6) 폰트, 이미지, 레이아웃 설정하기] 이미지 설정 관련해서 질문 있습니다.
제 얕은 지식으로는 svg 파일이 png 파일보다 용량이 더 적어서 좋다고 알고 있는데어떤 이유로 이미지를 svg 파일 말고 png 파일로 진행하시는 이유가 있는지 궁금합니다!