inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

NestJS, 섹션35. 모듈 네스팅. Paginate Comments API 만들기 강의 잘림

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요. 강의: NestJS REST API 백엔드 완전 정복 섹션: 35 모듈 네스팅 동영상: Paginate Comments API 만들기 위에 적은 강의 동영상의 끝부분이, 의도치 않게 잘린 것 같습니다. 마지막인 5:56 시간에서, 말씀하는 도중에 강의가 끝나버립니다. 확인해 주시면 감사하겠습니다.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
yavathar 댓글 4 좋아요 1 조회수 508

postman 에러

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

안녕하세요. 현재 7강 듣고 있는데요, node.js run하고 postman에 이름, 이메일, 패스워드 넣어서 요청하면 에러 뜨고 종료가 됩니다... 이유가 뭔가요?

  • react
  • node.js
Kwon 댓글 1 좋아요 0 조회수 307

세션5 상품 목록 컴포넌트 처리

미해결

코드로 배우는 React 19 with 스프링부트 API서버

import axios from "axios" import { API_SERVER_HOST } from "./todoApi" // api server host const host = `${API_SERVER_HOST}/api/products` // 외부 보낼것 만들기 비동기 통신 export const postAdd = async (product) => { // 객체지정 const header = {headers: {'Content-Type':'multipart/form-data'}} // product와 header 같이 보내기 const res = await axios.post(`${host}/`, product, header) return res.data } export const getList = async (pageParam) => { try{ const {page, size} = pageParam const res = await axios.get(`${host}/list`, {params: {page:page, size:size}}) return res.data } catch (error) { console.error('Error in getList:', error); throw error; } } productsApi.js 위 코드이고 import React, { useState, useEffect } from 'react'; import useCustomMove from '../../hooks/useCustomMove'; import { API_SERVER_HOST } from '../../api/todoApi'; import { getList } from '../../api/productsApi'; const initState = { dtoList: [], pageNumList: [], pageRequestDTO: null, prev: false, next: false, prevPage: 0, nextPage: 0, current: 0 } // 서버에 주소가 바뀌면 상수값만 바꿔줄려고 선언한것 const host = API_SERVER_HOST function ListComponent(props) { // 커스텀 훅 사용해서 이동 refresh: 갱신 const {moveToList, moveToRead, page, size, refresh} = useCustomMove() // 목록 데이터 가져오기 const [serverData, setServerData] = useState(initState) // 데이터 가져오기 const [fetching, setFetching] = useState(false) useEffect(() => { setFetching(true) // 데이터 가져오는 중 자동으로 처리되기 때문에 // 서버데이터가 처리가 되면 getList({page,size}).then(data => { console.log("data>>>>>>>", data); setFetching(false) setServerData(data) }) }, [page,size,refresh]); return ( <div className="border-2 border-blue-100 mt-10 mr-2 ml-2"> {/* fetching일때는 FetchingModal 호출하고 그렇지 않으면 아무것도 안보여준다. */} {fetching? <FetchingModal/> :<></>} <div className="flex flex-wrap mx-auto p-6"> {serverData.dtoList.map(product => <div key= {product.pno} className="w-1/2 p-1 rounded shadow-md border-2" onClick={() => moveToRead(product.pno)} /* 링크 만들어주고 썸네일 이미지 만들어서 보여주는 기능 */ > <div className="flex flex-col h-full"> <div className="font-extrabold text-2xl p-2 w-full ">{product.pno}</div> <div className="text-1xl m-1 p-2 w-full flex flex-col"> <div className="w-full overflow-hidden "> <img alt="product" className="m-auto rounded-md w-60" src={`${host}/api/products/view/s_${product.uploadFileNames[0]}`} /> </div> <div className="bottom-0 font-extrabold bg-white"> <div className="text-center p-1"> 이름: {product.pname} </div> <div className="text-center p-1"> 가격: {product.price} </div> </div> </div> </div> </div> )} </div> </div> ); } export default ListComponent; ListComponent.js 파일인데 import React from 'react'; import ListComponent from '../../components/products/ListComponent'; function ListPage(props) { return ( <div className="p-4 w-full bg-white"> <div className="text-3xl font-extrabold"> Products List Page </div> <ListComponent/> </div> ); } export default ListPage; ListPage.js 파일입니다 터미널에 에러도 뜨지 않고 서버에서 데이터를 못가져오는데 postman으로 서버 테스트를 했을때는 잘 되는데요 서버에서 클라이언트로 연동되는 부분에서 문제가 생긴건지 list를 가져오지를 못하고 있습니다 ㅠ 왜 그런건지 알 수 있을까요 ㅠ 오타도 아닌거 같고..

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
jkshin 댓글 3 좋아요 0 조회수 320

Vue.js 적용 방법

미해결

웹 애니메이션의 새로운 표준, Web Animations API

안녕하세요. 강의 정말 재밌게 보았습니다 :) 강의를 듣고 Vue2에 적용하려 하니 해당 에러가 발생합니다. js를 import해서 사용하는 것 만으로는 제약이 있는 것인가요..? 😥 😥

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • frontend
  • web-animations-api
  • vue
  • scroll
siwoobaksa 댓글 1 좋아요 0 조회수 304

이번 final 과제 피드백 부탁드립니다!

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 강의 잘 듣고 있습니다! 이번 과제 코드 피드백 부탁드립니다! 고맙습니다. <화면> <html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>SignUp</title> <link rel="stylesheet" href="./final.css"> <script defer src="./final.js"></script> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <span id="header__title">코드캠프 회원가입</span> </div> <div class="wrapper__body"> <div class="wrapper__text"> <input type="text" id="email" placeholder="이메일을 입력해 주세요."> <span class="errorMsg email">이메일이 올바르지 않습니다.</span> <input type="text" id="name" placeholder="이름을 입력해 주세요."> <span class="errorMsg name">이름이 올바르지 않습니다.</span> <input type="text" id="pw1" placeholder="비밀번호를 입력해 주세요."> <span class="errorMsg pw1">비밀번호를 입력해주세요.</span> <input type="text" id="pw2" placeholder="비밀번호를 다시 입력해 주세요."> <span class="errorMsg pw2">비밀번호를 입력해주세요.</span> </div> <div class="wrapper__phone" oninput="phone()"> <input type="text" id="num1" maxlength="3"> - <input type="text" id="num2" maxlength="4"> - <input type="text" id="num3" maxlength="4"> </div> <div class="wrapper__certification"> <div class="cert__number"> <span id="certNum">000000</span> <button class="chkBtn" disabled="true">인증번호 전송</button> </div> <div class="cert__time"> <span id="certTimer">3:00</span> <button class="chkBtn" disabled="true">인증완료</button> </div> </div> <div class="wrapper__select"> <div class="select__locale"> <select id="locale"> <option selected disabled>지역을 선택하세요</option> <option value="서울">서울</option> <option value="경기">경기</option> <option value="인천">인천</option> </select> <span class="errorMsg locale">지역을 선택해주세요.</span> </div> <div class="select__gender"> <label for="woman"> <input type="radio" name="gender" id="woman"> 여성 </label> <label for="man"> <input type="radio" name="gender" id="man"> 남성 </label> </div> <span class="errorMsg gender">성별을 선택해주세요.</span> </div> </div> <div class="divideLine"></div> <div class="wrapper__check"> <!-- <button class="submit" disabled="true">가입하기</button> --> <button class="submit">가입하기</button> </div> </div> </body> </html> <css> *{ box-sizing: border-box; margin: 0; } html, body{ width: 540px; } .chkBtn{ width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; color: #0068FF; background-color: #FFF; cursor: pointer; } .chkBtn.active { width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; background-color: #0068FF; color: #FFF; cursor: pointer; } .errorMsg{ width: 100%; color: red; font-size: 10px; display: flex; flex-direction: column; align-items: center; visibility: hidden; } .wrapper{ width: 100%; height: 100%; padding: 60px 80px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25); } .wrapper__header{ width: 100%; font-size: 32px; font-weight: 700; color: #0068FF; padding-bottom: 60px; } .wrapper__body{ width: 100%; } .wrapper__text > input{ width: 100%; height: 60px; margin-top: 20px; font-size: 16px; font-weight: 400; border: 1px solid #D2D2D2; border-radius: 7px; padding: 18px; } .wrapper__phone{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .wrapper__phone > input{ width: 100px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; } .wrapper__certification { width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } #certNum, #certTimer{ color: #0068FF; font-size: 18px; padding-right: 20px; } .cert__time{ padding: 20px 0; } .wrapper__select{ width: 100%; display: flex; flex-direction: column; align-items: center; } .select__locale{ width: 100%; display: flex; flex-direction: column; justify-content: center; } #locale{ width: 100%; height: 60px; border: 1px solid #D2D2D2; border-radius: 7px; color: #797979; font-size: 16px; font-weight: 400; padding: 18px; } .select__gender{ width: 140px; display: flex; justify-content: space-between; padding-top: 30px; } .divideLine{ width: 100%; border: 1px solid #E6E6E6; margin: 20px 0; } .wrapper__check{ width: 100%; display: flex; justify-content: center; } .submit { width: 100%; height: 60px; font-size: 18px; font-weight: 400; color: #0068FF; background-color: #FFF; border: 1px solid #0068FF; border-radius: 7px; } <js> const submit = document.querySelector('.submit'); // 가입하기 const numberChk = document.querySelector('.cert__number .chkBtn'); // 인증번호 전송 const timeChk = document.querySelector('.cert__time .chkBtn'); // 인증완료 let time = 180; // 180초, 인증 시간 let isStarted = false; // email const emailChk = () => { let email = document.getElementById('email').value; if(email.includes('@') === true){ let isEmail = email.split('@')[1].includes('.'); if(isEmail === false){ document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.querySelector('.errorMsg.email').value = ''; return false; } else { document.querySelector('.errorMsg.email').style.visibility = 'hidden'; return true; } } else { document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.getElementById('email').value = ''; return false; } } // name const nameChk = () => { let name = document.getElementById('name').value; if(name.length === 0){ document.querySelector('.errorMsg.name').style.visibility = 'visible'; return false; } else { document.querySelector('.errorMsg.name').style.visibility = 'hidden'; return true; } } // pw const pwChk = () => { let pw1 = document.getElementById('pw1').value; let pw2 = document.getElementById('pw2').value; if(pw1 && pw2){ if(pw1 === pw2){ document.querySelector('.errorMsg.pw1').style.visibility = 'hidden'; document.querySelector('.errorMsg.pw2').style.visibility = 'hidden'; return true; } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; document.querySelector('.errorMsg.pw1').innerHTML = '비밀번호가 일치하지 않습니다.' document.querySelector('.errorMsg.pw2').innerHTML = '비밀번호가 일치하지 않습니다.' return false; } } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; return false; } } // phone const phone = () => { let num1 = document.getElementById('num1').value; let num2 = document.getElementById('num2').value; let num3 = document.getElementById('num3').value; if(num1.length === 3) { document.getElementById('num2').focus(); if(num2.length === 4) { document.getElementById('num3').focus(); } } if(num1.length === 3 && num2.length === 4 && num3.length === 4){ numberChk.classList.add('active'); certification(); } } const certification = () => { // 인증번호 numberChk.disabled = false; numberChk.addEventListener('click', e => { let randomNumber = String(Math.trunc(Math.random() * 1000000)).padStart(6, '0') document.getElementById('certNum').innerText = randomNumber; // 타이머 if(isStarted === false){ isStarted = true; timeChk.disabled = false; let timer = setInterval(() => { if(time >= 0){ let min = Math.trunc(time / 60); let sec = String(time % 60).padStart(2,'0'); document.getElementById('certTimer').innerText = `${min}:${sec}`; time--; } else { clearTime(timer); } }, 100) timeChk.addEventListener('click', e => { if(time >= 0){ alert('인증이 완료 되었습니다.'); clearTime(timer); submit.disabled = false; } }) } }) } const clearTime = (timer) => { timeChk.classList.remove('active'); numberChk.classList.remove('active'); document.getElementById('certNum').innerText = '000000'; document.getElementById('certTimer').innerText = '0:00'; timeChk.disabled = true; numberChk.disabled = true; isStarted = false; clearInterval(timer); } const checkValidation = () => { emailChk(); nameChk(); pwChk(); if(emailChk() && nameChk() && pwChk()) { return true; } else { return false; } } // 검증 submit.addEventListener('click', e => { checkValidation(); if(checkValidation()){ alert('코드캠프 가입을 축하합니다.'); } });

  • react
  • node.js
  • seo
  • graphql
  • next.js
개발하는 알파카 댓글 1 좋아요 0 조회수 222

함수에 대해 질문있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

자바스크립트 함수가 조금 어려운데 함수는 그냥 관련된 코드들을 작성할 때 사용하나요? 예를 들어 input으로 어떠한걸 한다면 input 함수를 만들어서 이 함수안에는 input과 관련된 코드들을 작성한다고 보면되는건가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 1 좋아요 0 조회수 178

vuex 실행시 새로고침해야지만 리스트에 나타나는 현상

미해결

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

안녕하세요! 강의 듣으며 코드 작성중에 있는데 vuex로 코드를 작성하게 되면서 props데이터를 삭제하고 store.js로 mutation로 app.js에 있는 methodsf를 옮기게 되면서 새로고침해야지만 리스트가 추가/삭제되는 현상이 나타나고 있습니다. 다시 삭제했다가 작업해도 마찬가지네요.. 코드양이 너무 방대해서 올리기는 어려울것 같고 혹시 버전차이에 문제일수도 있나요? vue devtools에는 실시간으로 나타나는걸로 보입니다...

  • javascript
  • vue.js
  • es6
  • vuex
손승현 댓글 2 좋아요 1 조회수 439

리액트 복습하기

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요. 선생님 강의에 따라서 투두 리스트까지 완강하였는데요. 복습시 이번에 만들어본 프로젝트를 보지 않고 만들 수 있을 때까지 연습해보는 식으로 나아가면 될까요??

  • javascript
  • react
  • node.js
윤토벤 댓글 1 좋아요 0 조회수 402

default.tsx를 넣는대신 modal의 타입을 ?로 하면안되나요?

미해결

Next + React Query로 SNS 서비스 만들기

modal이 없는 상황의 오류를 해결하기위해 제로초님이 default.tsx라는 파일을 소개해줬는데요, 그냥 layout.tsx에서 애초에 Probs를 정의할때 type Probs= modal?:reactNode로 하면 안될까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김창훈 댓글 1 좋아요 0 조회수 248

실전사이트 제이쿼리소스

미해결

웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

초반에 제이쿼리 소스를 넣을때 둘 중 하나만 언더바가 생겨요 ㅠㅠ

  • HTML/CSS
  • javascript
  • jquery
  • 웹-디자인
댓글 1 좋아요 0 조회수 161

export default 관련한 질문

해결됨

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

안녕하세요 Modules 단계를 듣다가 궁금한 점이 생겨서 여쭤봅니다. export default {} 를 해야 import 를 할 수 있는 것으로 이해 하였습니다. 그런데 TodoHeader.vue 의 경우 스크립트 단을 아예 만들지 않아서 export default {} 가 없는데 어떻게 App.vue 에서는 TodoHeader를 import 할 수 있는 걸까요? 제가 예상하기로는 export default 단위 블록 안에 아무 내용이 없으면 생략 가능한 것 아닐까 라는 생각을 해보았는데 혹시 맞을까요?

  • javascript
  • vue.js
  • es6
  • vuex
hk 댓글 2 좋아요 0 조회수 397

msw patch

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 msw patch 관련해서 여쭤보고싶은게 있습니다! 제로초님 강의를 응용해서 프로젝트에 msw로 데이터들을 테스트 하고있습니다 handler에서 /users란 엔드포인트로 get요청후 데이터들을 받아온뒤 다시 수정이 필요해 patch handler를 생성했습니다. mutation을 통해서 patch 요청은 성공한거같은데 기존의 get으로 받아온 user데이터들을 수정하고 싶다면 어떻게 할수있을지 여쭤보고싶습니다 ! const mutation = useMutation({ mutationFn: async (e: FormEvent) => { e.preventDefault(); const updatedUser = { userId: product.userId, nickName: product.nickName, userFileUrl: product.userFileUrl, techStack: product.techStack, position: product.position, employmentStatus: product.employmentStatus, year: product.year, links: product.links, alarmStatus: product.alarmStatus, content: product.content, softSkill: product.softSkill, }; fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/users`, { method: "PATCH", body: JSON.stringify(updatedUser), }); }, }); import { bypass, http, HttpResponse } from "msw"; import { hotPeople, peoples, users } from "./peopleData"; export const handlers = [ http.get("/peoples/hot/:tag", () => { return HttpResponse.json(hotPeople); }), http.get("/peoples", ({ request, params }) => { return HttpResponse.json(peoples); }), http.get("/users", () => { return HttpResponse.json(users); }), http.patch("/users", async ({ request }) => { return HttpResponse.text("success?"); }), ]; export default handlers;

  • react
  • next.js
  • react-query
  • next-auth
  • msw
댓글 1 좋아요 0 조회수 217

로그인 모달창 새로고침 시 배경 메인 페이지 사라지는 현상

미해결

Next + React Query로 SNS 서비스 만들기

로그인 버튼을 클릭하면 우선 '/login' 주소로 이동했다가 'i/flow/login'으로 이동하기 때문에 이때 '/login'에서 배경이 메인 컴포넌트를 보여줘야 메인 페이지가 바탕이 되고로그인 모달 창을 띄운다는 점은 이해했습니다. 따라서 app/(beforeLogin)/login/page.tsx 에서 Main 컴포넌트를 보여주도록 했습니다. export default function Login() { const router = useRouter(); router.replace("/i/flow/login"); return <Main />; } 문제는 '/i/flow/login' 에서 새로고침하면 모달 창은 그대로지만 배경은 메인 페이지가 아닙니다. 이때 아래와 코드와 같이 따로 Main 컴포넌트를 불러오면 새로고침 시, 배경은 메인 페이지로 잘 나옵니다.그런데 강의와 깃허브 코드를 보니 LoginModal 컴포넌트만 보여주고 있습니다. LoginModal 컴포넌트만 있어도 app/(beforeLogin)/page.tsx에서 Main 컴포넌트를 보여주고 있으므로 app/(beforeLogin)/layout.tsx에서 Main 컴포넌트가 {children}에 할당된다고 생각했습니다. 따라서 아래 코드에서 Main 컴포넌트가 없어도 배경은 메인 페이지가 나온다고 생각했습니다. 아래 코드와 같이 Main 컴포넌트가 있으면 새로고침 시, 메인 페이지가 배경이 되고 그 위에 로그인 모달창이 띄워지지만 Main 컴포넌트가 없으면 새로고침 시, 메인 페이지가 빈 페이지가 나옵니다. 여기서 Main 컴포넌트를 넣어서 해결해도 되는건지 의문이 들었습니다. 아래 코드에서 Main 컴포넌트를 넣지 않으면 Main 페이지가 어떻게 배경으로 보여지는 건지 알고 싶습니다! import LoginModal from "@/app/(beforeLogin)/@modal/(.)i/flow/login/page"; import Main from "@/app/(beforeLogin)/_component/Main"; export default function Page() { return ( <> <LoginModal /> <Main /> </> ); }

  • react
  • next.js
  • react-query
  • next-auth
  • msw
 키키 댓글 1 좋아요 0 조회수 278

[공유] cy.visit() failed trying to load;

미해결

2시간으로 끝내는 프론트엔드 테스트 기본기

위 화면처럼 connect ECONNREFUSED::1:54382등 locahost에 접근할 수 없다고 나오면 cypress.config.ts에서 baseurl 설정해야합니다. ( https://parkparkpark.tistory.com/186) import { defineConfig } from "cypress"; export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", setupNodeEvents(on, config) { // implement node event listeners here }, }, });

  • react
  • jest
  • 소프트웨어-테스트
  • Cypress
  • storybook
  • chatgpt
류준열 댓글 2 좋아요 4 조회수 424

Transform 적용시 슬래시가 //개로 표기 되는데 괜찮은걸까요?

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

응답에서 슬래시가 // 두개로 표기되고 슬래시// 두개가 포함된 image 값을 그대로 복사해서 웹에서 테스트했을때 이미지는 정상적으로 확인됩니다. //두개 표기되는게 문제있는건 아닌걸까요?

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
박훈정 댓글 3 좋아요 0 조회수 377

코드 작성 순서

미해결

인터랙티브 웹 개발 제대로 시작하기

안녕하세요 선생님~ 수업 잘 듣구있습니다 ㅎㅎㅎ door-opened 클래스를 add하고 remove하는 순서로 생각했는데 코드 작성 흐름이 거꾸로 역순으로 가는 이유가 있을까요...?^^;;;

  • HTML/CSS
  • 인터랙티브-웹
  • javascript
Hyeyeon Kim 댓글 1 좋아요 0 조회수 299

100vw 관련 질문

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 웹을 위한 모던 CSS 단위 이해 및 정리 14:10에서 100vw를 하면 전체가 차지 되야 하는데 흰색 테두리가 있는 걸로 보아 100%꽉 채우지 않은 것 같아서요. 제가 예전에 어디서 배운 것 같기는 한데 정확하게 개념이 기억이 안나서 설명 부탁드립니다...!

  • HTML/CSS
  • javascript
  • es6
temp12312 댓글 2 좋아요 0 조회수 372

canvas의 도형에 원하는 이미지들을 넣고 싶습니다.

미해결

const COLORS = [ "#394fb8", "#554fb8", "#605ac7", "#2a91a8", "#2e9ab2", "#32a5bf", "#81b144", "#85b944", "#8fc549", "#e0af27", "#eeba2a", "#fec72e", "#bf342d", "#ca3931", "#d7423a", ]; export class Polygon { constructor(x, y, radius, sides) { this.x = x; this.y = y; this.radius = radius; this.sides = sides; this.rotate = 0; } animate(ctx, moveX) { ctx.save(); const angle = PI2 / this.sides; const angle2 = PI2 / 4; ctx.translate(this.x, this.y); this.rotate += moveX * 0.008; ctx.rotate(this.rotate); for (let i = 0; i < this.sides; i++) { const x = this.radius * Math.cos(angle * i); const y = this.radius * Math.sin(angle * i); i == 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); ctx.save(); ctx.fillStyle=COLORS[i] ctx.translate(x, y); ctx.rotate((((360 / this.sides) * i + 45) * Math.PI) / 180); ctx.beginPath(); for (let j = 0; j < 4; j++) { const x2 = 160 * Math.cos(angle2 * j); const y2 = 160 * Math.sin(angle2 * j); j == 0 ? ctx.moveTo(x2, y2) : ctx.lineTo(x2, y2); } ctx.fill(); ctx.closePath(); ctx.restore(); } ctx.restore(); } } 지금은 COLORS 배열을 이용해 fillstyle의 색을 넣었는데, 색상 대신 특정 이미지들을 넣고싶습니다. ctx.fillstyle = colors[i] 를 어떤 식으로 바꿔야할까요..?

  • javascript
  • canvas
  • html
  • css
ㄴㄹㅇㄹㄴㄹㅇ 댓글 1 좋아요 0 조회수 337

[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.

미해결

[React 2부] 고급 주제와 훅

안녕하세요. 아래 질문에 대한 답글을 보고 …rest에 대해 이해를 했는데요. https://www.inflearn.com/questions/1186424 몇 가지 궁금한 점이 생겨 질문 드립니다! 강의에서 나온 방식이 1번 어트리뷰트로 버튼 컴포넌트에 인자를 전달하는 것 맞을까요? App.jsx <Button styleType={"brand"} onClick={() => console.log("TODO: 주문하기 클릭")} > 주문하기 </Button> Button.jsx const Button = ({ styleType, block, ...rest }) => { let className = 'Button'; if (styleType) className += ` ${styleType}`; if (block) className += ` block`; return <button className={className} {...rest}/> }; export default Button; 위 App.jsx의 Button에 대한 JSX 코드를 JS 코드로 변환하면 아래와 같이 변환 되나요? onClick은 어떤 식으로 변환되는지 궁금합니다. createElement( Button, // 함수 { styleType: "brand" }, // props onClick: () => console.log("TODO: 주문하기 클릭") // children "주문하기 , 결제하기" // children ) onClick도 …rest 나머지 매개변수 구문에 들어갔는데, 개발자 도구에서 props를 보면 onClick은 onClick이라는 프롭스에 맵핑 되어 있습니다. rest 객체에 children, onClick 속성이 포함되어 있어서 내부적으로 구분해주는 것인가요? 아래처럼 작성 하는 게 2번 태그 안에 인자를 전달하는 방식 맞을까요? <Button styleType={"brand"} onClick={() => console.log("TODO: 주문하기 클릭")} children={"주문하기"} > </Button> 감사합니다.

  • react
  • React-Context
  • react-hooks
  • react-router
  • react-component
현지원 댓글 2 좋아요 1 조회수 418

반발력을 0으로 해도 계속 튕겨져나갑니다..ㅜ

미해결

Three.js로 1인칭 3D 웹사이트 만들기

안녕하세요 늘 좋은강의 감사합니다. playerContactMaterial 에서 restitution을 0으로 뒀는데도 캐릭터가 엄청 튕겨지네요 ㅜ player의 cannonMaterial도 playerCannonMaterial로 변경했는데 똑같이 엄청 통통 튕겨다닙니다... 그래서 궁금해서 그냥 defaultContactMaterial의 반발력을 0으로 두고 전부 defaultMaterial을 적용해봐도 똑같이 전부 통통 튕겨 다니네요... 영상에서도 보면 부딪힐 때 캐릭터가 뒤로 튕겨져 나가는거 보니 어쩔수 없는 현상인걸까요??...

  • javascript
  • 인터랙티브-웹
  • 포트폴리오
  • three.js
  • 3d
sue01014 댓글 2 좋아요 0 조회수 334

인기 태그

인프런 TOP Writers

주간 인기글