173만명의 커뮤니티!! 함께 토론해봐요.
미해결
소스코드에서 _buildmanifest.js에 들어가보면 모든 경로가 표시되던데 이러면 관리자 페이지의 모든 경로도 볼 수 있어서 어느정도 앱 규모(?)를 알 수 있다는 건데 이거 보안적으로 괜찮은걸까요? 관리자 페이지는 따로 만들어야 하는 건지 아니면 slug 경로를 이용해서 안 보이게 해야하는 건지 갑자기 머리가 복잡해지네요😂 다른 분들은 어떻게 하시는지 궁금합니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 우분투 서버에서 npm run build를 하는데 처음에는 ModuleNotFoundError: Module not found: Error: Can't resolve 'immer' in '/home/ubuntu/react-nodebird/front/util' > Build error occurred Error: > Build failed because of webpack errors at build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918) at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:95:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the nodebird@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 이 오류가 떠서 다시 immer 설치 후에 git commit, git push, 우분투 서버에서 git pull을 하였습니다. 그 다음에는 굵게 표시한 에러로 바뀌었는데 ./util/produce.js Attempted import error: 'enableES5' is not exported from 'immer'. > Build error occurred Error: > Build failed because of webpack errors at build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918) at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:95:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the nodebird@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. util/produce 파일은 강의에 나온 파일과 똑같습니다! 오류가 왜 나는지 어떻게 해결해야 할지 모르겠어서 질문 남깁니다.. 감사합니다! immer 버전은 "immer": "^9.0.21", 입니다!!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요? 프로그램 설치 관련 질의 드린 gunaadatcom입니다. 권장하신 대로 ver2 강의에서 요구하는 대로 next.js에서 node.js 다시 다운받고 아래와 같이 다운로드를 진행하였으나 계속 애로가 나서 질의 한번 더 드립니다... npx create-next-app를 통해 폴더를 만들려고 하였으나 진행이 되질 않습니다. 확인 부탁 드립니다~~ ㅠ.ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
제가 듣는 수업이 ver1 인지 ver2 인지 어떻게 확인할까요 ?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 몇 가지 질문 드리고자합니다. 로그아웃 후 client.clearStore() 통해서 로그인 정보를 지워주는 것으로 알고 있는데 accessToken이 지워지는건가요? 로그아웃 후 새로고침을 하면 위와 같은 코드가 동작하여 refreshToken이 남아 있어서 토큰을 재발급 받고 있습니다. 로그아웃을 할 때 refreshToken도 삭제할 수 있나요?
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
안녕하세요 api 인증키를 발급받기 위해 sendgrid를 가입하려고 하는데 가입이 되지 않아서 질문남깁니다!!
미해결
[리뉴얼] React로 NodeBird SNS 만들기
import { useState, useRef, useEffect } from 'react'; function VideoPlayer({ src, isPlaying }) { const ref = useRef(null); useEffect(() => { if (isPlaying) { ref.current.play(); } else { ref.current.pause(); } }); return <video ref={ref} src={src} loop playsInline />; } export default function App() { const [isPlaying, setIsPlaying] = useState(false); return ( <> <button onClick={() => setIsPlaying(!isPlaying)}> {isPlaying ? 'Pause' : 'Play'} </button> <VideoPlayer isPlaying={isPlaying} src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" /> </> ); } 위의 코드는 링크에 있는 리액트 공식 문서에 있는 코드입니다 https://react.dev/learn/synchronizing-with-effects useEffect에서 배열을 생략하면 맨처음에 실행되고 그이후는 리랜더링 될때마다 실행된다는데 이번 강좌에서 리액트는 변경하는 props와 state만 리랜더링한다고 하셨습니다 그럼 useEffect를 배열없이 사용하면 연결된 모든 자식 혹은 부모 컴포넌트에서 리랜더링되는 props와 state가 발견이 되면 useEffect가 작동되는 건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요? 열심히 수강 중인 직장인입니다. 섹션4 react 기초 1강에서 설명하시는 대로, node.js, npm, yarn까지는 설치가 완료되었습니다만, 그 후 notion이라는 곳에 접속하여 다른 사항들을 설치하고자 하였으나, notion 접속 방법을 모르겠습니다. 영상을 보고 강사님이 접속하신 곳 주소를 그대로 입력하여 접속 및 회원가입을 하였으나, 강사님이 영상에서 보시는 곳과는 사뭇 다른 곳이라 접속 방법 등을 문의코자 글 남깁니다. 빠른 답변 부탁 드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 2 - 강력한 CSS의 "grid 속성" 강의에서 15분 30초쯤에 보이는 grid 레이아웃이 그림 예시와 적용된 속성값이 다른 것 같습니다. grid-item에게 grid-column: 1 / 3; grid-row: 2 / 3; 속성을 주고 실행했을 경우 아래의 레이아웃으로 나눠지고 ex) HTML <div class="container"> <div class="item item1">box</div> <div class="item">box</div> // ... </div> CSS .container { box-sizing: border-box; border: 2px solid pink; display: grid; grid-template-columns: 200px repeat(3, 1fr); grid-template-rows: 1fr 2fr; } .item { font-size: 1.3em; font-weight: 500; border: 2px solid powderblue; } .item1 { grid-column: 1 / 3; grid-row: 2 / 3; } result) ㅁ ㅁ ㅁ ㅁ [ㅁ ㅁ]ㅁ ㅁ 강의에서 보여지는 레이아웃처럼 만드려면 grid-column: 1 / 4; grid-row: 2 / 3; 처럼 입력해 주어야 아래처럼 적용이 되었습니다. ex) CSS /* ... */ .item1 { grid-column: 1 / 4; /* 3 -> 4 */ grid-row: 2 / 3; } result) ㅁ ㅁ ㅁ ㅁ [ㅁ ㅁ ㅁ]ㅁ 제가 잘못 입력된 부분이 있는지 혹은 강의 내용의 값이 오타였던 건지 알고싶습니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
1. mysql 1 : 다 관계인 모델이 2개일때 1 인쪽이 Post 인 모델과 다 인쪽이 Image 인 모델 둘이 묶여 있을때 post.addImages 라는 형식으로 Image가 자동으로 복수형으로 생성되는 걸로 알고있었습니다. 당연히 그런줄알고 (이때 모델명은 그냥 단순예시입니다.) Image가 아니라 Gas 라고 가정할때 post.addGass로 생성되나요? 제가 지금 하고 있는 프로젝트에서 post.addGass 로 사용할시에 post.addGass is not a function 에러가나 혹시나.. Gas의 복수형이 Gass가 아니기 때문에 post.addGas로 넣었더니 돼버렸습니다 그게아니라 그냥 add.Gass가 맞는다면 제가 코드를 다시 봐야할꺼같습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); // error State const [emailError, setEmailError] = useState(''); //on 으로 시작하는 함수는 행동을 취할 때 마다 event 가 들어온다. => 이벤트핸들러함수 function onChangeEmail(event) { console.log(event); //행위 console.log(event.target); //행위 대상 console.log(event.target.value); //그래서 입력한 값이 뭔지 setEmail(event.target.value); } function onChangePassword(event) { setPassword(event.target.value); } //마지막 포장한 거 보내주기 function onClickSignup() { //진짜 포장이 잘 됐는지 확인해보기 console.log(email); console.log(password); //검증하기 //@ 가 들어가 있지 않다면 if (email.includes('@') === false) { // alert('이메일이 올바르지 않습니다!! @ 가 없음 !!'); // document.getElementById('error').innerText = '이메일이 올바르지 않습니다!! @ 가 없음 !!'; setEmailError('이메일이 올바르지 않습니다!! @ 가 없음 !!'); } else { // 메시지 알림 이전, Backend 컴퓨터에 있는 API(함수) 요청하기 alert('회원가입을 축하합니다!!'); } } onClicksignup 매개 변수로 event 를 써주지 않는 것은 이 함수는 입력값을 보내주지 않아서 그런걸까요 ? on 이 붙은 함수가 모두 event 를 사용할 수 있다는 것으로 이해하면 될까요 ?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 제가 개발하다 궁금한 사항이 생겼는데 예시를 하나들면 프론트 프로세스가 있고 백엔드 프로세스가 있을때 외부에서 접속가능하게 포트가 열려있는 것은 프론트만 되어있으면 되잖아요. 관련해서 백엔드는 CORS 설정 및 차단 이전에 네트워크설정단에서 아예 포트가 외부에서 접속이 아예 안되면 되고 그렇다면 ex) axios.defaults.baseURL = ' https://localhost:백엔드포트 '; //backend URL 즉 URL conntion을 잡을때 열려있는 ip,port가 아닌 localhost로 커넥션을 잡으면 문제가 있을까요? 서비스 서버 기준으로 전제조건 : 해당 프로세스들이 로컬환경에서 돌아갈경우
미해결
[리뉴얼] React로 NodeBird SNS 만들기
오늘 강의를 들어보니까 react는 자동으로 바뀐 props만 랜더링을 한다고 하셨는데 그럼 memo는 부모 노드가 바뀌었을 때 자식 컴포넌트가 랜더링 되는 것을 방지하기위해 자식 컴포넌트에만 적용한다고 생각하면 될까요? 그렇다면 memo는 자식컴포넌트가 없을 때는 memo를 사용할 일이 아예 없는 것이 맞나요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
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> ), 맨위의 코드가 전체 코드이고 제가 궁금한 부분이 있는 코드는 아래에 있습니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다른 것들은 다 작동이 되는데 수정하기 페이지에서 버튼을 눌러도 동작이 안됩니다 ㅜㅜ 콘솔에도 오류가 안 나오고 강의를 3번 처음부터 다시 봐도 뭐 때문에 동작을 안 하는지 모르겠습니다 ㅜㅜ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Todolist 코드 작성할때 함수표현식으로 작성된 함수는 호이스팅이 되지않는다고 하셨는데, saveItemsFn같은 함수는 어떻게 정의 되기 전에 createTodo와 같은 함수에서 사용 할 수 있는건가요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
1. 처음 해당 페이지로 이동시 back에있는 데이터만 정상적으로 불러와집니다. 2. 두번쨰 사진과 세번쨰 사진은 다른페이지로 이동했다가 다시 해당페이지로 돌아올때 useEffect 가 정상적으로 실행, map 함수를 통해 새로운 배열을 만들시에 전에있던 배열데이터가 남아있어 동일한 데이터가 계속 쌓이는 상황입니다. 새로고침시에는 다시 정상적으로 한번만 불러와진 데이터만 보인느데 다른 페이지를 다녀와도 map 함수가 실행될때 전에 있던 데이터는 빈배열로 다시 세팅하고 map 함수가 실행되는 방법이 무엇인지 아무리 찾아봐도 해결이 안되네요.. ㅠㅜ 구원의 손길 부탁드립니다 import React, { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { Col, Row } from 'antd' import SystemLayout from '../../components/System/SystemLayout'; import SystemCard from '../../components/System/SystemCard'; import { LOAD_SYSTEMS_REQUEST } from '../../reducers/system-post'; const Test = () => { const dispatch = useDispatch(); const { mainSystems } = useSelector((state) => state.systempost); useEffect(() => { dispatch({ type: LOAD_SYSTEMS_REQUEST, }); }, []); return ( <SystemLayout> <Row justify="space-evenly"> {mainSystems.map((systempost) => ( <Col xs={6}> <SystemCard key={systempost.id} systempost={systempost} /> </Col> ))} </Row> </SystemLayout> ); }; export default Test;
해결됨
실전 프로젝트로 배우는 데이터 앱 만들기 with Python & Streamlit
안녕하세요 강의자료에는 requirements.txt가 안보이는 것 같은데 혹시 어디서 다운받을 수 있을까요? 버전 충돌이 발생해서요ㅠ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님. post, put, delete 할때 백엔드에서 response에 data를 담아 돌려보내는 보내는 이유가 궁금합니다. 프론트에서 post, put, delete 요청을 보내면, 백엔드에서는 db에 업데이트만 하고, 아무것도 안 돌려주고 나서, 프론트에서는 response 200 온거 확인한 후에, 프론트 안에서 data를 변경해도 되지 않나요?? 새로고침 할때는 mounted 할때 일괄적으로 list 보내면 되지 않나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
해당 강의의 http://example.codebootcamp.co.kr/api-docs/ http://example.codebootcamp.co.kr/graphql 사이트에 연결할 수 없다고 나옵니다 ㅠ
