묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리렌더링 구분
리렌더링이 되고 있다고 설명하는 화면 리렌더링이 발생하지 않는다는 화면 제가 보엔 둘 다 하이라이팅이 되고 있는 것 같은데 어느 부분을 봐야 리렌더링이 안된다고 느낄 수 있을까요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
getStringedDate month , date 변환 질문
안녕하세요! 이정환님 강의 정말 재미있게 잘 보고 있습니다. 😊 New 페이지 구현하기 2.기능 강의 중에const getStringedDate = (targetDate) => { let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if(month < 10) { month = `0${month}`; } if(date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; }로 날짜 변환 함수로 강의에서 언급 해주셨는데요! 혹시 이건 어떨까요?const getStringedDate = (targetDate) => { return `${targetDate.getFullYear()}-${String(targetDate.getMonth() +1).padStart(2,0)}-${String(targetDate.getDate()).padStart(2,0)}`; }결과는 동일하게 나올 수 있을 것 같아 상관은 없지만 보통 저런 경우에는 조건문을 애용하시는 편이실까요? 어떤 방식으로 짜는 것을 더 선호 하시는지 정말 호기심에 질문을 드립니다! 😆
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
기존 mock data는 그룹이 따로 만들어지는데 뭔가 잘못된 건가요?
이게 제 console인데요아래 mock data는 자기들끼리 따로 그룹지어서 나오는데 선생님 콘솔에는 그냥 다 개별로 나오거든요...뭐가 문제일까요? import { useReducer, useRef } from "react"; const mockData = [ { id: 1, createDate: new Date().getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createDate: new Date().getTime(), emotionId: 2, content: "2번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; } } function App() { const [data, dispatch] = useReducer(reducer, [mockData]); const idRef = useRef(3); const onCreate = (createDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createDate, emotionId, content, }, }); }; return ( <> <button onClick={() => { onCreate(new Date().getTime(), 1, "Hello"); }}> 일기 추가 테스트 </button> </> ); } export default App; 제 코드도 첨부해봅니다,,,
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
카운터앱 기능구현하기 - 스테이트 리프팅이 헷갈립니다.
강의 설명 중 10분06초 부분 에서 설명해주신 " State Lifting (State끌어올리기 ) "이라는 개념이 아직 애매모호해서 좀더 확실하게 설명 부탁드려도 될까요 ?부모컴포넌트에서 state관리 해야하는 건 인지하고 있습니다. ( 단방향으로 흘러가는 React의 특성 때문에 ) 끌어올린다? 라는 키워드가 확실하게 팍! 하고 이해하기가 조금 어렵네요 ...
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Header 컴포넌트에 div 말고 애초에 button은 안 되나요?
궁금한 점이 2가지 있는데요1. Header 컴포넌트에 div 말고 애초에 button를 넣으면 안 되나요?Header.jsxconst Header = ({ title, leftChild, rightChild }) => { return ( <header className="Header"> <button className="header_left">{leftChild}</button> <div className="header_center">{title}</div> <button className="header_right">{rightChild}</button> </header> ); };App.jsx<Header title={"Header"} leftChild={"Left"} rightChild={"Right"} />이런 식으로 헤더 컴포에 처음부터 버튼 태그를 넣으면 될 것 같은데 왜 div로 감싸는 건가요?음.. 그냥 css 편의상 이유일까요? 2. 저는 css를 배울 때 처음에 charset "utf-8"; 을 항상 입력하라고 배웠는데 리액트 강의에서는 항상 안 사용하시더라구요. 리액트에서는 원래 안 쓰는건가요, 아니면 그냥 강의에서는 굳이 필요없어서 쓰지 않는건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 만들기 1탄 피드백 부탁드립니다.
안녕하세요! 싸이월드 만들기 1탄 피드백 부탁 드립니다. 과제 완성 후 레퍼런스 코드를 참고해서 확인도 하였는데 궁금한 점이 있습니다.figma에 있는 '오늘의 기분' select 박스 화살표 모양을 따라해 보고 싶어 아이콘을 사용했는데 아래 코드에서 select 태그 위에 아이콘이 잘 겹치도록 하는 부분이 어려운 것 같습니다. 이렇게 두 요소를 겹치도록 할 때 크기, 위치 같은 요소를 어떻게 계산하여 맞게 지정할 수 있을까요?<!DOCTYPE html> <html lang="ko"> <head> <title>정현아님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title> <link href="./styles/index.css" rel="stylesheet"> <script src="https://kit.fontawesome.com/f9748babc2.js" crossorigin="anonymous"></script> </head> <body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> <div class="today"> <!-- 각각의 span 박스를 만들어서 관리 --> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div> <div class="wrapper__left__body"> <div class="left__body__header"> <div class="left__body__header__gray"></div> <div class="left__body__header__line"></div> </div> <div class="left__body__profile"> <div class="left__body__profile__content"> <i class="fa-regular fa-face-smile"></i> 이름 </div> <div class="left__body__profile__content"> <i class="fa-solid fa-envelope"></i> Phone </div> <div class="left__body__profile__content"> <i class="fa-solid fa-phone"></i> E-mail </div> <div class="left__body__profile__content"> <i class="fa-solid fa-star"></i> 인스타그램 </div> </div> <div class="left__body__body"></div> <div class="left__body__footer"> <div class="left__body__footer__title"> 오늘의 기분 </div> <div class="left__body__footer__box"> <select class="left__body__footer__select"> <option selected="true">기쁨 😊</option> <option>슬픔 😢</option> <option>화남 😠</option> <option>행복 🥰</option> </select> <span class="left__body__footer__icon"><i class="fa-regular fa-square-caret-down"></i></span> </div> </div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body> </html>* { box-sizing: border-box; margin: 0px; /*위 옆 공백 제거*/ } .background { width: 1024px; height: 600px; /* background-color: bisque; */ background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; /*위 오른쪽 아래 왼쪽 - 시계방향*/ } .outerbox { width: 808px; height: 544px; /* background-color: tomato; */ background-image: url("../images/outerbox.png"); } .wrapper{ display: flex; flex-direction: row; /* background-color: rebeccapurple; */ padding: 32px 0px 0px 32px; } .wrapper__left { width: 208px; height: 472px; /* background-color: bisque; */ display: flex; flex-direction: column; } .wrapper__left__header { width: 100%; height: 30px; /* background-color: aqua; */ display: flex; flex-direction: row; justify-content: center; align-items: center; } .today { font-size: 9px; } .wrapper__left__body { width: 100%; height: 100%; /*형제 속성을 제외한 나머지만 가져감*/ /* background-color: steelblue; */ border: 1px solid grey; border-radius: 15px; background-color: white; display: flex; flex-direction: column; align-items: center; padding: 20px 30px; } .left__body__header { width: 100%; display: flex; flex-direction: column; } .left__body__header__gray { width: 148px; height: 133px; background-color: grey; } .left__body__header__line { border-top: 1px dotted black; margin: 12px 0px; /*상하여백 좌우여백*/ } .left__body__profile { width: 100%; display: flex; flex-direction: column; } .left__body__profile__content { height: 12px; font-size: 10px; /* margin: 0px 0px 8px 0px; */ margin-bottom: 10px; color: #999999; } .left__body__footer { /* padding: 110px 0px 0px 0px; */ width: 100%; margin-top: 100px; } .left__body__footer__title, .left__body__footer__select { font-size: 11px; } .left__body__footer__box { position: relative; margin-top: 5px; } .left__body__footer__select { width: 141px; appearance: none; } .left__body__footer__icon { position: absolute; width: 18px; height: 18px; top: 2px; right: 2px; pointer-events: none; /* 아이콘을 클릭해도 뒤의 select가 반응하도록 설정 */ } .wrapper__right { width: 524px; height: 472px; /* background-color: violet; */ }
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
크롬에서 user id를 인풋에 입력하고 등록하면 404 에러처리 페이지가 뜹니다.
제로초님 깃헙 소스코드 복사해서 실행한 파일로 크롬에서 실행했는데, input 폼에 id 넣고 등록을 누르면 404 에러 페이지가 뜹니다.사파리 브라우저는 문제 없이 돌아가고 크롬브라우저에서만 이렇게 됩니다. 어떤 문제인가요?에러 메세지도 안떠서 당황스러운데 이런건 구글링 해봐도 잘 안찾아지는데 앞으로 이런 문제는 어떻게 검색해야 찾을 수 있을까요 ?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
질문 userSchema 의 timestamps: true
userSchema의 timestamps: true를 하면 createdAt과 updatedAt이라는 두 개의 필드가 자동으로 생성된다고 하는데 createdAt 필드를 직접 작성한 이유가 있나요 ?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제 피드백 부탁드립니다.
안녕하세요!회원가입 과제 피드백 부탁 드립니다! 그리고 추가적으로 궁금한 점이 있는데figma 처럼 라디오버튼의 기본 색상을 회색으로 변경할 수 있을까요?css 파일에서 반복되어 사용되는 속성, 값들이 있는데 이런 값들은 공통적으로 사용하는 것이 구조적으로 좋을까요?예) 아래 코드에서 .inputEmail과 .input에 설정하는 css 값들이 유사하지만 분리해서 작성 아래는 과제 관련 코드입니다! 미리 답변 감사합니다.<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet"> </head> <body> <div class="background"> <div class="signup"> <h2 id="title">회원 가입을 위해<br>정보를 입력해주세요<br></h2> <div> <span><br>* 이메일<br><br></span> <input class="inputEmail" type="text"> </div> <div> <span><br>* 이름<br><br></span> <input class="input" type="text"> </div> <div> <span><br>* 비밀번호<br><br></span> <input class="input" type="password"> </div> <div> <span><br>* 비밀번호 확인<br><br></span> <input class="input" type="password"> </div> <br><br> <div class="radioGender"> <div> <input type="radio" name="gender">여성 </div> <div> <input type="radio" name="gender">남성 </div> </div> <br><br> <div> <input class="agreement" type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <br> <hr id="line"> <br> <div> <button class="signupBtn">가입하기</button> </div> </div> </div> </body> </html>* { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; } .background { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px 0px #0068FF40; display: flex; justify-content: center; align-items: center; } .signup { width: 470px; display: flex; flex-direction: column; } .signup span { color: #797979; } .inputEmail { width: 100%; border: none; border-bottom: 1px solid #0068FF; } .input { width: 100%; border: none; border-bottom: 1px solid #CFCFCF; } .radioGender { display: flex; justify-content: center; align-items: center; gap: 30px; accent-color: #D2D2D2; } .agreement { font-size: 14px; } .signupBtn { width: 100%; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFFFFF; color: #0068FF; font-size: 18px; } #title { font-size: 32px; color: #0068FF; } #line { width: 100%; height: 1px; border: none; background-color: #E5E5E5; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
styled.span / styled.input "CSS 자동완성"
확장프로그램 설치, "vscode-styled-components"ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡimport styled from에서 경로 쓸 때 백틱금지🤬
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
schema.gql 질문 드립니다.
entity 등으로 생성된 tpye 에서 강의에서 사용된 코드로 예시를 들면# product.entity.ts @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag], { nullable: true }) productTags: ProductTag[];위와같이 nullable 을 사용하여#schema.gql type Product { productId: String productName: String! description: String! productPrice: Int! isSoldout: Boolean! productSalesLocation: ProductSalesLocation productCategory: ProductCategory user: User productTags: [ProductTag!] }productTags: [ProductTag!] 와 같이 할 수 있었습니다.위에서 productTags: [ProductTag!]를 productTags: [ProductTag] 와같이 변경 해보려고합니다.방법이 있나요?@Field(() => [ProductTag, { nullable: true }], { nullable: true })에러는 발생하지 않지만 안됩니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
서버 재실행시 Many to Many
yarn start:dev 를 할 경우Many to Many 로 자동으로 생성되는 table이자꾸 문제를 일으키네요. 서버 재 실행시 기존에 만들어진 중간테이블 강의에서는 상품_상품태그 테이블이 되겠네요.해당 테이블을 삭제후 실행하지 않으면 에러발생시키네요.원인을 찾아보면 아래 코드의 주석된 custom join table 이 문제였는데요.기본 @JoinTable 사용시 문제는 사라집니다. // @JoinTable({ // name: 'PRODUCT_TO_PRODUCT_TAG', // 원하는 중간 테이블명 // joinColumn: { // name: 'PRODUCT_ID', // Product 엔티티 ID를 참조하는 컬럼명 // referencedColumnName: 'productId', // Product 엔티티의 실제 ID 컬럼명 (기본값은 PrimaryColumn 이름) // }, // inverseJoinColumn: { // name: 'PRODUCT_TAG_ID', // ProductTag 엔티티 ID를 참조하는 컬럼명 // referencedColumnName: 'productTagId', // ProductTag 엔티티의 실제 ID 컬럼명 // }, // }) @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) @Field(() => [ProductTag], { nullable: true }) productTags: ProductTag[]; 질문 1. 위의 문제를 해결할 수 있는 방법입니다.질문 2.DB 컬럼에는 UPPER_CASE (SCREAMING_SNAKE_CASE) 로 작성하지 않나요?그렇기 때문에 custom / 각 컬럼마다 @Column({ name: 'BOARD_TITLE', type: 'varchar', length: 50, nullable: false, }) @Field(() => String) boardTitle: string;위와 같이 컬럼명을 하나하나 지정해줬습니다.typeorm 또는 요즘 실무 컨벤션에서는 강의에서처럼 카멜표기법으로 사용하나요?Node 강의지만 Java기준 스프링 기본설정에서 카멜케이스조차도 스네이크로 자동 변환하는데 말이죠!msa 구조에서는 테이블은 공통된걸 사용할수도 있으니 궁금해서 질문 드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
챕터 17 배열 강의 듣는 중에 궁금한게 있습니다.
위처럼 콘솔찍었을때,22번째 콘솔에서 arrC 배열 요소를 보면 0번쨰 인덱스에 "hellooo?"가 출력됩니다. 그러나 그다음 콘솔에서는 0번째 인덱스가 1로 찍힙니다.29번째 줄에서 arrC 배열의 0번째 인덱스를 "hellooo?"로 수정한 것이 22번째줄 콘솔에서 보여지는 것 같은데, 실질적인 값은 무엇인지, 이런건 자바스크립트 자체 오류인건지 아니면 원리가 따로 있는지 궁금합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.5 path 경로에 "/diary/:id" 입력시...
스크린샷에서 보는 것처럼 잘못된 페이지라고 나옵니다. "/diary"만 입력하면 문제없는데 id만 입력하면 경로를 찾지 못하는 것 같습니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
.eslintrc.cjs 파일
실습 준비 환경 만들 때, ESLint 설치까지는 완료했는데 좌측에 .eslintrc.cjs 파일이 저에겐 뜨지 않습니다 ㅠㅠ 어디서 열어야하나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
vsc 에서 npm init 설치시 오류
PS C:\Users\user\Documents\prepare\front> npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See npm help init for definitive documentation on these fieldsand exactly what they do.Use npm install <pkg> afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.package name: (front)PS C:\Users\user\Documents\prepare\front> 터미널을열고 저도 패키지 네임 다음 react-nodebird-front를 작성하고 싶은데 어떤방법이 있을까요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
배포에 대해서 질문있습니다
만든파일을 배포하는 과정에 대해 질문이 있습니다.배운기술들로 다른것을 만들어서 ngrok에 배포하는것이 아닌 다른방법으로 배포하고 싶습니다. 상황은 이렇습니다. ・2대의 데스크톱이있습니다.・한대의 데스크톱이 서버의 역할을합니다.・또다른 데스크톱은 클라이언트 역할을합니다. vite와 node.js로 만든경우 vscode로 npm run dev하는것이 아닌 java에서 war파일을 만들어서 war파일만 교체하면되는것처럼 배포 가능한 하나의 번들형태로 만드는방법이 있나요?아니면 vite와 node.js만의 배포하는방법이있나요? 제가 배포를 경험해본 방법이 java에서 Maven으로 war파일을 만들어서 tomcat에 넣어서 사용하는방법밖에 몰라서 node.js는 어떤방법으로 로컬데스크톱에서 실행하게 하는지 궁금합니다.frontend폴더와 backend폴더가 따로 있는데 하나로 로컬데스크톱에 배포하는 방법이 있나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
완성 전에 배포
완성전에 확인차 배포를 했는데 완성 후 그냥 vercel만 입력하면 빌드까지 되는건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
섹션 5. React.js 개론 - 구동원리에서 강의와 제 코드가 다릅니다
안녕하세요 강의 잘 듣고 있습니다현재 섹션 5. React.js 개론 - 구동원리를 듣고 있는데 import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( <StrictMode> <App /> </StrictMode>, )강의에 있는 코드와 제 main.jsx의 코드가 달라서요.. 전부 똑같이 설치했는데 달라도 괜찮은건가요?
-
미해결실무 중심! FE 입문자를 위한 React
어려워요 뭔소리죠 대체
반복문 뭔 소린지 모르겠어요 뭔가 영상이 짤린 느낌
