묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
inline css
혹시 4번째 줄에서 inline css style을 적용할 때 {} 중괄호로 한번 더 감싸는 이유가 무엇인가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
DiaryItem
import { useState, useRef } from "react"; const DiaryItem = ({ author, emotion, created_time, content, id, onDelete, onEdit, }) => { const [isEdit, setIsEdit] = useState(false); const [localContent, setLocalContent] = useState(content); // 본문 수정 시 수정 전 콘텐츠 띄우기 const localContentInput = useRef(); const toggleIsEdit = () => { setIsEdit(!isEdit); }; const handleDelete = () => { if (window.confirm(`${id}번째 일기를 삭제하시겠습니까?`)) { onDelete(id); } }; const handleQuitEdit = () => { setIsEdit(false); setLocalContent(content); }; const handleEdit = () => { if (localContent.length < 5) { localContentInput.current.focus(); return; } onEdit(id, localContent); }; return ( <div className="DiaryItem"> <div className="info"> <span> 작성자 : {author} | 감정점수 : {emotion} </span> <br /> <span className="date">{new Date(created_time).toLocaleString()}</span> </div> <div className="content"> {/* 수정 중 콘텐츠 vs 수정 전 콘텐츠 */} {isEdit ? ( <textArea ref={localContentInput} value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div> {/* 수정 중 버튼 vs 수정 전 버튼 */} {isEdit ? ( <> <button onClick={handleQuitEdit}>수정 취소</button> <button onClick={handleEdit}>수정 완료</button> </> ) : ( <> <button onClick={handleDelete}>삭제하기</button> <button onClick={toggleIsEdit}>수정하기</button> </> )} </div> ); }; export default DiaryItem;위는 제가 수업을 보며 따라친 DiaryItem.js인데 실행을 시키면 수정하기 버튼을 눌렀을 때 원래 콘텐츠가 textArea에 뜨지 않고 수정이 되지 않습니다. 하지만 소스코드에 올려진 DiaryItem.js를 복붙했을 때는 또 됩니다. 몇 번이나 두 파일을 비교했지만 잘못된 점을 찾아낼 수가 없었는데 도와주세요 ㅠㅠ
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
삼항연산자
34번째 줄에서 {content}를 빈 태그로 감싸는 이유가 뭔가요? 어차피 content는 문자열 아닌가요?
-
미해결생활코딩 - 자바스크립트(JavaScript) 기본
무한루프
크롬 콘솔창에 작성하다가 무한루프가 돌기 시작했는데,이 때 어떻게 탈출할 수 있나요..?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
data가 이상하게 나옵니다
저는 그랩 님처럼 개발자 도구에서 data가 깔끔하게 정리 돼서 나오지 않습니다 어떤 부분이 잘못된 걸까요?
-
미해결[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
code runner 설치했는데 실행이 안됨
code runner 설치했고 node.js 도 설치 했는데 화면이 저렇게 나오고 Hello World가 표시가 안됩니다. 저장도 했는데 뭐가 문제인지 모르겠습니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
defaultProps
Counter.js의 defaultProps를 설정했는데도 count 값이 0으로 설정되지 않아 질문드립니다.각각 App.js랑 Counter.js 입니다.// import logo from './logo.svg'; // import "./App.css"; // inline 스타일 적용 시 필요 없음 import MyHeader from "./MyHeader"; import MyFooter from "./MyFooter"; import Counter from "./Counter"; function App() { let name = "김학준"; const style = { App: { backgroundColor: "black", // Camel case }, h2: { color: "red", }, bold_text: { color: "green", }, }; const counterProps = { a: 1, b: 2, }; return ( // <div className="App"> // <div style={style.App}> <div> <MyHeader /> <Counter {...counterProps} /> {/* <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> */} {/* <h2>안녕 리액트 {name}</h2> */} {/* <h2 style={style.h2}>안녕 리액트 {name}</h2> */} {/* <b id="bold_text">React.js</b> */} {/* <b style={style.bold_text}>React.js</b> */} {/* <MyFooter /> */} </div> ); } export default App; import React, { useState } from "react"; // React의 메소드 const Counter = ({ initialValue }) => { // console.log("counter 호출!"); console.log(initialValue); const [count, setCount] = useState(initialValue); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; return ( <div> <h2>{count}</h2> <button onClick={onIncrease}>+</button> <button onClick={onDecrease}>-</button> </div> ); }; Counter.defaultProps = { initialValue: 0, }; export default Counter;
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useState
9번째 줄에서 useState(0)이라는 값이 배열을 반환하는 것이죠?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
inline 스타일 적용
inline 스타일을 적용할 때 div의 속성 className을 제거하는 이유가 무엇인가요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
가운데 문자 출력 이렇게 풀어도 될까요?
function solution (str){ let strArr = str.split(""); let length = strArr.length; let answer = ''; answer = length/2 !== Math.round(length/2) ? strArr[Math.round(length/2)-1] : strArr[length/2 -1] + strArr[length/2]; return answer;} console.log(solution("good"));
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
error 가 발생합니다
저는 콘솔 창에서 함수가 안 나오고 에러가 나오는데 어떤 부분이 문제인 건가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npx
강의에서 설치돼 있지 않은 패키지를 딱 한번만 쓰고 싶을 때 npx를 사용한다고 했는데 이게 무슨 말씀인지 좀 더 자세하게 설명해주실 수 있나요?
-
해결됨타입스크립트 입문 - 기초부터 실전까지
[참고] 섹션1-3 [자바스크립트에 타입이 있을 때의 첫 번째 장점] - why-ts undefined
섹션1-3 강의명 [자바스크립트에 타입이 있을 때의 첫 번째 장점] 중 why-ts의 app.js에서 axios.get(url)의 response 를 User type으로 정의하였습니다. Promise<User>이때, response가 아닌 response.data가 User type이므로 자동완성을 따라가면 undefined 문제가 발생합니다.이미 많은 질문이 나왔고 답변으로도 말씀하셨듯 필요성을 인지하기엔 충분하므로 수강하시는 분들은 단순 참고 바랍니다.🙏
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
코드 오류 (06-03)
06-03 클래스 전략 패턴수업에서 선생님과 코드를 똑같이 입력했는데 오류(공중 몬스터 not defined)가 납니다. 어떤 부분이 문제일까요? class 공중부품 { run = () => { console.log("날아서 도망가자!!"); } } class 지상부품 { run = () => { console.log("뛰어서 도망가자!!"); } } class Monster { power = 10; 부품; constructor(qqq){ this.부품 = qqq; } attack = () => { console.log("공격하자!!"); console.log("내 공격력은" + this.power + "야!!!"); }; run = () => { this.부품.run();class 공중부품 { run = () => { console.log("날아서 도망가자!!"); } } class 지상부품 { run = () => { console.log("뛰어서 도망가자!!"); } } class Monster { power = 10; 부품; constructor(qqq){ this.부품 = qqq; } attack = () => { console.log("공격하자!!"); console.log("내 공격력은" + this.power + "야!! }; } const mymonster1 = new Monster(new 공중부품()); mymonster1.attack(); mymonster1.run(); const mymonster2 = new Monster(new 지상부품()); mymonster2.attack(); mymonster2.run();
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Promise의 resolve
왼쪽이 어떻게 오른쪽과 같을 수 있나요? resolve가 콜백함수라서 그런 건가요? 맞다면 좀 더 자세하게 설명해주세요.
-
미해결[웹 개발 풀스택 코스] 순수 자바스크립트 기초에서 실무까지
POST요청 undefined
63_dom_crud_multiple.html 강좌에서 POST를 통해 유저가 입력한 값을 테이블에 넣어주려 하는데 undefined값이 전달되네용.. 왜 이렇게 전달될까요..?POST부분의 코드입니다
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm randomcolor
해당 화면 3번째 줄에서 randomColor() 말고 randomColor라고 쓰면 왜 안되는 건가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
date를 인식 못하는 문제
엔티티@Entity() @ObjectType() export class Reservation { @PrimaryGeneratedColumn('uuid') @Field(() => String) reservationId: string; @Column({ nullable: false }) @Field(() => Date) startDate: Date; @Column({ nullable: false }) @Field(() => Date) endDate: Date; @Column({ nullable: false }) @Field(() => Int) usersNumber: number; @Column({ nullable: false }) @Field(() => Int) lengthOfStay: number; @Column({ nullable: false }) @Field(() => Int) price: number; @ManyToOne(() => Member) @JoinColumn({ name: 'memberId' }) @Field(() => Member) member: Member; @ManyToOne(() => Campground) @JoinColumn({ name: 'campgroundId' }) @Field(() => Campground) campground: Campground; @ManyToOne(() => Tent) @JoinColumn({ name: 'tentId' }) @Field(() => Tent) tent: Tent; @DeleteDateColumn() deletedAt: Date; } 데이터 생성 DTO@InputType() export class CreateReservationInput extends OmitType( Reservation, ['reservationId', 'member', 'campground', 'tent'], InputType, ) { @Field(() => String) memberId: string; @Field(() => String) campgroundId: string; @Field(() => String) tentId: string; } 위 코드에 graphQL 요청시 에러가 발생합니다.mutation { createReservation ( createReservationInput: { startDate: "2023-01-01" endDate: "2023-06-06" usersNumber: 5 lengthOfStay: 10 price: 5 memberId: "lhw3542" campgroundId: "d35d3972-5c07-47d7-94a2-23c784f0a27e" tentId: "3ae33a7c-c898-4b66-b110-02b4f8c96398" } ) { reservationId startDate endDate usersNumber lengthOfStay price member { memberId } campground { campgroundId } tent { tentId } } } Field 'startDate' doesn't have a default value날짜 형식을 읽지 못하는 것 같은데 무엇이 잘못된 걸까요?아래와 같이 DTO에 직접 써줘도 인식을 못하고 있습니다. @Field(() => Date) startDate: Date; @Field(() => Date) endDate: Date;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
join한 테이블 조회시 컬럼이 겹치는 문제
아래와 같은 코드에서 memberID를 조건으로 데이터를 조회하면 join된 campground와 member 각각에 member 컬럼이 다 있어 조건으로 넣어준 memberId를 어디서 찾아야 하는지 typeORM에서 인식하지 못하는 것 같습니다. 때문에 아래와 같은 에러가 나오는거 같습니다. 어떻게 해결해야 할까요?result = await this.dibsRepository.find({ where: { member: { memberId }, }, relations: ['campground', 'member'], });QueryFailedError: Column 'memberId' in where clause is ambiguous
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
선생님 혹시 폴더/파일 다 만드는 건가요??
선생님 혹시 .json 폴더안에 작성한 .html, .css, .js 파일 넣으면 될까요 ??