묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
styled-components 적용 질문
import React from "react"; import PropTypes from "prop-types"; import Link from "next/link"; import { Input, Menu, Row, Col } from "antd"; import { useState, UseMemo } from "react"; import UserProfile from "../components/UserProfile"; import LoginForm from "../components/LoginForm"; import styled from "styled-components"; const { Search } = Input; const onSearch = (value) => console.log(value); const SearchInput = styled(Input.Search)` verticalalign: middle; width: 200px; marginleft: 10px; `; const items = [ { label: <Link href="/">노드버드</Link>, key: "mail", }, { label: ( <div> <Link href="/profile">프로필</Link> <SearchInput placeholder="input search text" enterButton="Search" onSearch={onSearch} /> </div> ), key: "profile", }, { label: <Link href="/signup">회원가입</Link>, key: "signup", }, ]; let tmp = "mail"; const AppLayout = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); const [current, setCurrent] = useState(tmp); console.log(current); const onClick = (e) => { console.log("click ", e); setCurrent(e.key); tmp = e.key; }; return ( <div> <Row> <Col span={12} offset={6}> <Menu mode="horizontal" onClick={onClick} selectedKeys={[current]} items={items} /> </Col> </Row> <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <UserProfile /> : <LoginForm />} </Col> <Col xs={24} md={12}> {children} </Col> <Col xs={24} md={6}> <a href="https://github.com/seroak" target="_blank" rel="noreferrer noopener" > Made by seooak </a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;제가 메뉴를 만들 때 ant 디자인 공식문서를 보고 const item에 요소를 작성해서 메뉴를 만드는 방식으로 코드를 작성했는데 이렇게 작서하니까 SearchInput에 styled 컴포넌트를 적용하는 것이 안됩니다 어떤 방식이 좋을까요?const SearchInput = styled(Input.Search)` verticalalign: middle; width: 200px; marginleft: 10px; `; const items = [ { label: <Link href="/">노드버드</Link>, key: "mail", }, { label: ( <div> <Link href="/profile">프로필</Link> <SearchInput placeholder="input search text" enterButton="Search" onSearch={onSearch} /> </div> ),맨위의 코드가 전체 코드이고 제가 궁금한 부분이 있는 코드는 아래에 있습니다
-
미해결[리뉴얼] 파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)
while 무한반복문 질문
문제를 풀며 가장 자연스럽게 익숙해지는 파이썬 기본: 반복문 익히기2 12:10while 1: 하면 무한반복이라 하셨는데요1은 참이고 0은 거짓이라고 해서 while 0:도 해보니 안되는것 확인했습니다 그런데 2나 3이나 "x" "a"이런것으로도 해보니 1처럼 다 무한반복이 되더라고요 이것들은 왜 그런 것인가요?
-
미해결Jenkins를 이용한 CI/CD Pipeline 구축
실습4)Docker Container 에 배포하기가 안됩니다.
안녕하세요 위와 같이 connect도 잘되고 젠킨스 서버에서 docker 서버도 ssh로 잘 접속이 되는데 몇 번을 다시 해도 똑같이 unstable 에러가 발생합니다. 어떻게 해결 할 수 있을까요?
-
미해결모든 개발자를 위한 HTTP 웹 기본 지식
캐시 지시어 전송 주체
서버에서 보내는 Cache-Control: no-cache와클라에서 보내는 Cache-Control: no-cache의 의미가 다를 것 같은데 구체적으로 어떻게 다른지 알 수 있을까요?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
Warning: Invalid hook call 오류
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.이런 오류가 뜨면서 브라우저 렌더링이 안됩니다. 1. 이걸 보면 호환문제는 아닌 것 같고, import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { Provider } from 'react-redux'; import store from './store'; import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <Provider store={store}> <BrowserRouter> <App/> </BrowserRouter> </Provider> </React.StrictMode> ); import './App.css'; function App() { return ( <div className="App"> </div> ); } export default App; import {createSlice, configureStore} from '@reduxjs/toolkit' //state 만들기 let hobby = createSlice({ name: 'hobby', initialState: 'dancing' }) //state 등록하기 export default configureStore({ reducer:{ hobby : hobby.reducer /*작명: createSlice만든거.reducer */ } }) import {useSelector} from "react-redux"; function Cart(){ let a = useSelector((state)=> state.hobby) console.log(a) return(a) } 전체 코드입니다. 2번처럼 hook 규칙을 어긴것도 아닌것 같고, 3번 중복 설치 문제일까요?? 정말 찾아도 찾아도 모르겠어요
-
미해결[핵집] 2025 빅데이터 분석기사(실기)_작업형 1·2·3유형
강의자료 요청드립니다
안녕하세요, 강의자료 요청드립니다.radiopc3@hanwha.com입니다.감사합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
localhost 연결 거부 ㅠㅠ
수업을 잘 따라갔는데 localhost를 연결할 수 없다고 계속 떠요ㅠㅠ 이유가 뭘까요ㅠ
-
해결됨실리콘밸리 엔지니어가 가르치는 파이썬 장고 웹프로그래밍
혹시 이런 부분을 코드자동 완성이나 suggestion 해주는 확장프로그램 아시나요?
return render(reqeust, "polls/detail.html", {"qustion": question}) 에서 키값인 question을 qustion으로 오타내서 애러가 났었거든요. vscode에서 이 부분을 자동 완성해주는 프로그램이 있을까요? import되는 부분이 아니라서, vscode입장에서 알기 어려울 것 같기도 하네요. 프로그램이 커지면, 이거 찾다가 시간 굉장히 보낼 것 같다는 두려움이 생기네요 ㅎ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수정하기 버튼이 동작이 안됩니다..
다른 것들은 다 작동이 되는데 수정하기 페이지에서 버튼을 눌러도 동작이 안됩니다 ㅜㅜ 콘솔에도 오류가 안 나오고 강의를 3번 처음부터 다시 봐도 뭐 때문에 동작을 안 하는지 모르겠습니다 ㅜㅜ
-
해결됨프로젝트로 배우는 React.js
에러 핸들링에서 토스트가 2개씩 뜹니다..
강의를 보면서 적용을 했는데toast가 2개씩 뜨고 2개씩 사라집니다..이 경우 어떻게 해야할까요?? .then(() => { addToast({ type: "success", text: "Successfully created", }); history.push("/admin"); }) .catch((e) => { addToast({ text: "We could not create blog", type: "danger", }); });
-
해결됨SQL 왕초보를 위한 해커랭크로 배우는 실전 SQL
6번문제
6번문제 이렇게 작성해도 정답인가요?select *From CITYwhere POPULATION > 100000AND COUNTRYCODE ='USA'
-
미해결워드프레스(WordPress) 완전정복
관리자페이지 로그인이 안됩니다!
안녕하세요 선생님. 알려주신대로 워드프레스 관리자 로그인을 시도했는데요, 아이디와 비밀번호를 입력하면 아래와 같은 화면으로 전환될 뿐 접속이 안되네요.틀린비밀번호를 입력했을 때는 아래와 같은 화면이 나옵니다.방법을 찾다가 해결이 안돼서 질문드립니다. 감사합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
리액트 섹션2 게시글 구현하기 강의를 듣는 중에 'TypeError: 정의되지 않은 속성 'me'을 읽을 수 없습니다.' 에러가 발생하였습니다.
Cannot read property 'me' of undefined 에러가 났는데 원인을 모르겠어서 질문드립니다.에러로 추정되는 코드 파일(PostCard.js, user.js, post.js)을 함께 첨부합니다.PostCard.jsimport React, { useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { Card, Popover, Button, Avatar } from 'antd'; import { RetweetOutlined, HeartOutlined, MessageOutlined, EllipsisOutLined, HeartTwoTone } from '@ant-design/icons'; import PostImages from './PostImages'; const PostCard = ({ post }) => { const { user } = useSelector((state) => state.user); const [liked, setLiked] = useState(false); const [commentFormOpened, setCommentFormOpened] = useState(false); const onToggleLike = useCallback(() => { setLiked((prev) => !prev); }, []); const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); const id = useSelector((state) => state.User.me?.id); return ( <div style={{ marginBottom: 20 }}> <Card cover={post.Images[0] && <PostImages images={post.Images} />} actions={[ <RetweetOutlined key="retweet" />, liked ? <HeartTwoTone twoToneColor="#eb2f96" key="heart" onClick={onToggleLike} /> : <HeartOutlined key="heart" onClick={onToggleLike} />, < MessageOutlined key="comment" onClick={onToggleComment} />, <Popover key="more" content={( <Button.Group> {id && post.User.id === id ? ( <> <Button>수정</Button> <Button type="danger">삭제</Button> </> ) : <Button>신고</Button>} </Button.Group> )}> <EllipsisOutLined /> </Popover>, ]} > <Card.Meta avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={post.content} /> </Card> {commentFormOpened && ( <div> 댓글 부분 </div>)} { /* <CommentFrom /> */ } { /* <Comment /> */ } </div> ); }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.object, Comments: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), }).isRequired, }; export default PostCard;user.jsexport const initialState = { isLoggedIn: false, me: null, signUpData: {}, loginData: {}, } export const loginAction = (data) => { return { type: 'LOG_IN', data, } } export const logoutAction = (data) => { return { type: 'LOG_OUT', } } const reducer = (state = initialState, action) => { switch (action.type) { case 'LOG_IN': return { ...state, isLoggedIn: true, me: action.data,. // }, }; case 'LOG_OUT': return { ...state, isLoggedIn: false, me: null, }; default: return state; } }; export default reducer;post.jsexport const initialState = { mainPosts: [{ id: 1, User: { id: 1, nickname: 'YeonSeong' }, content: '첫 번째 게시글 #해시태그 #이모티콘', Images: [ { src: 'https://item.kakaocdn.net/do/3b669cd3532e2e97f42dc388d8c29fcb41d1a2caccd0c566eab28b91e2e5d306',}, { src: 'https://item.kakaocdn.net/do/3b669cd3532e2e97f42dc388d8c29fcb7f9f127ae3ca5dc7f0f6349aebcdb3c4',}, { src: 'https://item.kakaocdn.net/do/3b669cd3532e2e97f42dc388d8c29fcbb3a18fdf58bc66ec3f4b6084b7d0b570',}, ], Comments: [{ User: { nickname: 'loveheart',}, content: '우와 강아지가 귀여워요~', }, { User: { nickname: 'starlight',}, content: '얼른 사고 싶어요!', }] }], imagePaths: [], postAdded: false, } const ADD_POST = 'ADD_POST' export const addPost = { type: ADD_POST, } const dummyPost = { id: 2, content: '더미데이터입니다.', User: { id: 1, nickname: '제로초연습', }, Images: [], Comments: [], }; const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST: return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; default: return state; } }; export default reducer;영상 잘 보고 있습니다 감사합니다.
-
해결됨모든 개발자를 위한 HTTP 웹 기본 지식
http 버전 설정
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예)[질문 내용]요청 보낼 때 http 1.1 혹은 2버전으로 셋팅을 직접 하고 싶은데요 이걸 어디에서 어떻게 설정하나요?처음 요청 라인에서 설정하는 것 같은데 실제 요청 시 헤더에서 셋팅을 하는 것인가요? 검색을 하였지만 답을 찾지 못하엿습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
함수 호이스팅
Todolist 코드 작성할때 함수표현식으로 작성된 함수는 호이스팅이 되지않는다고 하셨는데,saveItemsFn같은 함수는 어떻게 정의 되기 전에 createTodo와 같은 함수에서 사용 할 수 있는건가요?
-
미해결모든 개발자를 위한 HTTP 웹 기본 지식
캐시 유효 기간 초과 전 데이터의 갱신시 동작
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용]캐시 유효 기간이 지나기 전에 데이터가 갱신될 가능성은 없나요?개인적인 생각으로는 있을거 같고, 그렇다면 비록 유효 기간이 안지났다 하더라도 캐시를 갱신해줘야 할거 같은데, 이럴 때 동작은 어떻게 될까요?본문 자료로는 캐시 만료 전에는 서버로 요청이 안가는데, 사실은 유효시간 만료 전이던 후이던 상관없이 매 요청마다 서버로도 갱신 검증 요청이 가는것일까요?
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Uncaught TypeError (uuid) 에러
이전 수업에서 ilbuni.glb를 로드했을 땐 정상적으로 작동했는데, test.glb로 바꾸니까 이런 에러가 뜨네요 ...uuid가 토큰같은 id처럼 보이는데 ,, 어떻게 해결해야 할까요? ㅜㅜ
-
미해결파이썬 동시성 프로그래밍 : 데이터 수집부터 웹 개발까지 (feat. FastAPI, async, await)
언패킹 관련 질문입니다.
안녕하세요.04-2-coroutine-fetcher.py에서 fetcher 함수에서 url을 언패킹하실 때 *를 사용하셨는데 아래 코드에서 가 어떻게 작동하는건지 알 수 있을까요?result = await asyncio.gather(*[fetcher(session, url) for url in urls])
-
미해결자바 ORM 표준 JPA 프로그래밍 - 기본편
CascadeType.ALL과 orphanRemoval=true를 함께 사용하는것에 대한 질문
안녕하세요영속성 전이와 고아객체에 대해 복습하다가 궁금증이 생겨 질문 올립니다. 영속성 전이는 부모 엔티티의 생명주기에 종속적인 자식 엔티티의 상태변화를 같이 처리해주는 것으로CascadeType.ALL 옵션은 부모 엔티티를 저장하거나 삭제, 변경 할 때, 자식 엔티티 역시 같이 저장하거나 삭제, 변경 해주는 걸로 알고 있습니다.그리고 orphanRemoval=true 고아객체는 부모 엔티티와의 관계가 끊어지면 자동으로 삭제되는 자식 엔티티를 의미한다고 하였습니다. 여기서 궁금증이 생겼습니다.CascadeType.ALL 를 설정하면 부모 엔티티가 자식 엔티티의 생명주기를 처리해주는데orphanRemoval=true 을 같이 사용해 자식 엔티티가 삭제되는 것이 중복될 텐데왜 이 두옵션을 같이 사용하는지 잘 모르겠습니다..검색을 해봐도 두 옵션을 같이 사용하는 경우에는부모 엔티티와 관계된 자식 엔티티의 생명주기를 부모 엔티티에서 한 번에 관리할 수 있다고 하는데어차피 CascadeType.ALL 옵션하나로 부모 엔티티가 자식 엔티티의 생명 주기를 관리하는데어떤 이유에서 같이 사용하는 건가요 ??
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
코드 리뷰 부탁드립니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.잘 구현한 게 맞는지 궁금합니다.function solution(day, saleArr) { let answer; let start = 0; let sum = 0; let max = Number.MIN_SAFE_INTEGER; for(let end = 0; end < day; end++) { sum += saleArr[end]; } max = sum; for(let end = 3; end < saleArr.length; end++) { sum = sum + saleArr[end] - saleArr[start++]; if(sum > max) max = sum; } answer = max; return answer; } let day = 3; let saleArr = [12, 15, 11, 20, 25, 10, 20, 19, 13, 15]; console.log(solution(day, saleArr));