묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[실시간 채팅 with React]
코드에 대한 질문이 잇습니다.
강의를 전부 진행한지 시간이 좀 된 상태에서 프로젝트 리팩토링중 이해가 안되는 부분이 있어 질문드립니다.아래 의문점에 대해 확인과 의견을 부탁드립니다.작성된 코드는 제로초님의 front / nest-typeorm 에서 가져온 코드입니다. 의문점 : 채팅 데이터 전송에 웹소켓이 역할을 하지 않는것 같다. 그렇게 생각한 근거 : 1-1 : useSocket을 이용해서 소켓에 연결하는데 ws-${workspace} 의 message에 onMessage 함수를 연결하고 있다const Channel = () => { const [socket] = useSocket(workspace); useEffect(() => { socket?.on('message', onMessage); return () => { socket?.off('message', onMessage); }; }, [socket, onMessage]); }const useSocket = (workspace?: string): [Socket | undefined, () => void] => { const disconnect = useCallback(() => { if (workspace && sockets[workspace]) { console.log('소켓 연결 끊음'); sockets[workspace].disconnect(); delete sockets[workspace]; } }, [workspace]); if (!workspace) { return [undefined, disconnect]; } if (!sockets[workspace]) { sockets[workspace] = io(`${backUrl}/ws-${workspace}`, { transports: ['websocket'], }); console.info('create socket', workspace, sockets[workspace]); sockets[workspace].on('connect_error', (err) => { console.error(err); console.log(`connect_error due to ${err.message}`); }); } return [sockets[workspace], disconnect]; };1-2 : 백엔드에서 채팅을 수신받는 createWorkspaceChannelChats는 ws-${url}-${chatWithUser.ChannelId} 의 message에 받아온 채팅을 보내고 있다. async createWorkspaceChannelChats( url: string, name: string, content: string, myId: number, ) { const channel = await this.channelsRepository .createQueryBuilder('channel') .innerJoin('channel.Workspace', 'workspace', 'workspace.url = :url', { url, }) .where('channel.name = :name', { name }) .getOne(); const chats = new ChannelChats(); chats.content = content; chats.UserId = myId; chats.ChannelId = channel.id; const savedChat = await this.channelChatsRepository.save(chats); const chatWithUser = await this.channelChatsRepository.findOne({ where: { id: savedChat.id }, relations: ['User', 'Channel'], }); this.eventsGateway.server // .of(`/ws-${url}`) .to(`/ws-${url}-${chatWithUser.ChannelId}`) .emit('message', chatWithUser); } 2 : 네트워크 탭의 웹소켓 메시지에 채팅내역 수신내역이 남지 않는다이미지가 보일지는 모르겟지만 빨간 박스가 새로 전송한 채팅이고 정상적으로 수신받으면 네트워크 탭에 messag에 내역이 남아야 하는걸로 알고 있는데 남지 않는걸로 확인됩니다. 3 : 웹페이지에서 포커스를 유지한 상태로 모바일에서 입력시 채팅이 전송되지 않음 왜 채팅이 정상적으로 전송된거 처럼 보일까 생각해보니 swr이 브라우저를 포커스 아웃후 재 포커스하면 채팅데이터를 다시 가져오는걸로 추측하여 웹페이지 포커스 유지중 모바일로 테스트해보니 채팅이 전송되지 않습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 관련 질문 - 오늘 본 상품
안녕하세요. 포트폴리오 작성 중 여러 방법을 시도해 보다 도저히 해결방법을 잘 모르겠어서 질문드립니다.구현하고 싶은 것 : 오늘 본 상품 목록을 다른 페이지에서 구현 하는 것이 아닌 여러 페이지의 본문 영역 옆에 상시 뜨도록 설계 하는 것, recoil을 이용하지 않고 localStorage 를 이용하여 구현하는 것 입니다. 아래 사진은 현재 진행 과정 입니다.아래는 현재 코드입니다sidebar.tsx import { useEffect, useState } from "react"; import * as S from "./sidebar.style"; import type { IUseditem } from "../../../../commons/types/generated/types"; import { LikeFilled } from "@ant-design/icons"; import { getPrice } from "../../../../commons/libraries/price"; export default function SideBar(): JSX.Element { const [items, setItems] = useState<IUseditem[]>([]); useEffect(() => { const storedItems = localStorage.getItem("todaylist"); if (!storedItems) return; setItems(JSON.parse(storedItems)); }, []); return ( <S.SideBarWrapper> <S.SideBarTitle>오늘 본 상품</S.SideBarTitle> {items .filter((el) => el) .map((el) => ( <S.SideBarContents key={el._id}> <S.SideBarP> <LikeFilled style={{ color: "#ffd903" }} /> {el.pickedCount} </S.SideBarP> {el.images && ( <S.SidaBarImg src={`https://storage.googleapis.com/${el.images[0]}`} /> )} <S.SidebarDetail> <S.SideBarName>{el.name}</S.SideBarName> <S.SideBarRemarks>{el.remarks}</S.SideBarRemarks> <S.SideBarPrice>{getPrice(el.price)}</S.SideBarPrice> </S.SidebarDetail> </S.SideBarContents> ))} </S.SideBarWrapper> ); } 문제점useEffect 부분에서 storedItems 가 업데이트 될 때마다, 리렌더링을 해주고 싶어, 종속성 배열에 items state를 넣으니 ⚠ Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.관련 오류가 뜹니다. 여러 방법을 시도해도 옳은 방법을 잘 모르겠어서 질문 남깁니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
게시판만들다가 질문드립니다
import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import MainPage from "./pages/MainPage"; import Board from "./pages/Board"; import { useEffect } from "react"; function App() { useEffect(() => console.log("app is loading"), []); return ( <BrowserRouter> <Routes> <Route path="/" element={<MainPage />}></Route> <Route path="/board/:bbsId" element={<Board />}></Route> <Route path="/board/:bbsId/new" element={<Board />}></Route> </Routes> </BrowserRouter> ); } export default App; import React, { useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; // useParams를 import import BoardList from "../pagesComponent/BoardList"; import BoardEdit from "../pagesComponent/BoardEdit"; import BoardView from "../pagesComponent/BoardView"; import Layout from "../layout/Layout"; import axios from "axios"; export const BbsSettingContext = React.createContext(); const Board = () => { const { bbsId } = useParams(); // const [currentUrl, setCurrentUrl] = useState(null); const [boardSettData, setBoardSettingData] = useState(null); useEffect(() => { let mode = window.location.pathname.split("/")[3] == null ? "list" : window.location.pathname.split("/")[3]; console.log(`mode::::::::::::::${mode}`); setCurrentUrl(mode); axios .get("http://localhost:8080/board/" + bbsId) .then((response) => { const boardSettData = response.data.bbsEntity; console.log(boardSettData); setBoardSettingData(boardSettData); }) .catch((error) => console.log(error)); }, [currentUrl]); return ( <BbsSettingContext.Provider value={boardSettData}> {currentUrl == "list" ? ( <Layout> <BoardList /> </Layout> ) : currentUrl == "new" ? ( <Layout> <BoardEdit /> </Layout> ) : currentUrl == "edit" ? ( <Layout> <BoardEdit /> </Layout> ) : currentUrl == "view" ? ( <Layout> <BoardView /> </Layout> ) : ( <BoardList /> )} </BbsSettingContext.Provider> ); }; export default Board; import React from "react"; import { useContext, useHistory } from "react"; import { BbsSettingContext } from "../pages/Board"; import PageNationPage from "./PageNationPage"; import { useNavigate } from "react-router-dom"; const BoardList = () => { const boardSetData = useContext(BbsSettingContext); console.log(boardSetData); const Navigate = useNavigate(); const handleBoardEdit = () => { // 원하는 동작을 수행할 코드를 여기에 추가 console.log("쓰기로 이동"); Navigate("/board/1/new"); }; return ( <div className="BoardList"> <table className="bbsTable"> <colgroup> <col style={{ width: "10%" }} /> <col style={{ width: "40%" }} /> <col style={{ width: "10%" }} /> <col style={{ width: "20%" }} /> <col style={{ width: "10%" }} /> </colgroup> <thead> <tr> <th scope="col">번호</th> <th scope="col">제목</th> <th scope="col">작성자</th> <th scope="col">등록일</th> <th scope="col"> 조회</th> </tr> </thead> </table> <PageNationPage /> <button onClick={handleBoardEdit}>쓰기</button> </div> ); }; export default BoardList; import React from "react"; import { useState, useEffect, useContext } from "react"; import { BbsSettingContext } from "../pages/Board"; const BoardEdit = () => { const boardSetData = useContext(BbsSettingContext); console.log(boardSetData); return <div>BoardEdit</div>; }; export default BoardEdit; 안녕하세요 다름이 아니라 일기장 보고 게시판을 응용해서 만들던 도중에 안되는게 있어서 질문드립니다.http://localhost:3000/board/1이 리스트로 나오는데요 ...거기서 쓰기를 누르면 http://localhost:3000/board/1/new으로 위에 url은 바뀌는데밑에 ui는 전혀 바뀌질 않습니다 .그리고 Board.js에 useEffect쪽에 콘솔로 찍어봐도 들어오지가 않는데 이유를 좀 알수있을까요 ????? 근데 쓰기 버튼말고 그냥 직접 url을 입력하고 enter를 입력하면 이동합니다 .
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 설치파트에서 에러가 납니다.
타입스크립트 설치하고 yarn dev 한 이후, yarn add --dev @types/react @types/node 을 통해추가 설치 ? 를 진행하려고 보니 강사님은 아무 에러 없이 잘 진행 되는 반면에 저는 이러한 에러가 뜹니다... ㅠ
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
faker 사용 후 postData.split is not a function 에러 질문
이전에는 잘 되었는데 faker로 더미데이터 사용 후에 다음과 같은 에러가 뜹니다!faker 버전 이슈를 보고 삭제 후 npm i -D faker@5 로 재설치했는데 오류가 해결되지 않았습니다ㅠ console.log 찍어본 postData의 타입이랑 에러메시지 입니다!4. WrappedApp created new store with withRedux(NodeBird) { initialState: undefined, initialStateFromGSPorGSSR: undefined }type : stringtype : functionTypeError: postData.split is not a functionat PostCardContent (C:\Users\pc\react-nodebird\prepare\front\.next\server\pages\index.js:1131:13)at processChild (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)at resolve (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)at ReactDOMServerRenderer.render (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)at ReactDOMServerRenderer.read (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)at renderToString (C:\Users\pc\react-nodebird\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)at Object.renderPage (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851)at Document.getInitialProps (C:\Users\pc\react-nodebird\prepare\front\.next\server\pages\_document.js:264:19)at loadGetInitialProps (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101)at renderToHTML (C:\Users\pc\react-nodebird\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142) PostCardContent.js 코드 중 의심스러운 부분입니다const PostCardContent = ({ postData }) => ( <div> {postData.split(/(#[^\s#]+)/g).map((v, i) => { if (v.match(/(#[^\s#]+)/)) { return <Link href={`/hashtag/${v.slice(1)}`} key={i}><a>{v}</a></Link>; } return v; })} </div> ); PostCardContent.propTypes = { postData: PropTypes.string.isRequired, };
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
Data Fetching 관련 질문 있습니다~
안녕하세요 조은님! 완강 후에 Data Fetching 관련해서 질문 드릴게 있어서 왔습니다.Q. Next 12에서는 정적인 페이지와 주기적으로 데이터 값이 바뀌어야 할 때 (SSG, SSR) 등 상황에 맞게 Data Fetching을 사용하고 있었는데 Next 13에서는 Server component 만으로 SSG와 SSR을 대체가 가능한걸까요? Q. 강의에서 데이터를 가져올 때 fetch를 사용하셨었는데 Server component에서는 fetch 말고 axios를 사용해도 상관없는지 궁금합니다.Q. 저는 아래와 같이 axios를 사용해서 Time 데이터를 가져왔는데 캐시 비우기 버튼을 누르지도 않았는데 새로고침 할 때 마다 초가 계속 바뀌더라구요(disabled cache 체크 안했습니다!) 그래서 fetch로 바꾸어서 해봤더니 강의에서 나온 것 처럼 잘 동작하고 있었습니다. 혹시 어떤 차이가 있는건지 궁금합니다.import customAxios from "./customAxios"; import { METHOD } from "@/type/common"; export const getTime = async (timeZone: string) => { const data = await customAxios( METHOD.GET, `https://timeapi.io/api/Time/current/zone?timeZone=${timeZone}`, { next: { tags: ["time"] } } ); return data; };
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
.indexOf 메소드 사용 질문
안녕하세요, indexOf 메소드를 사용하다가 -1 값이 변환되었습니다. 파이썬에서는 인덱스가 -1이라면 맨마지막에 있는 인덱스 순서를 의미하는데 자바스크립트는 의미가 다른가요?자바스크립트에서 가지는 '-1'의 의미가 궁금합니다. 코드를 보시면 제가 indexOf 메소드 값 안에 오타를 넣었습니다.오류가 날 줄 알았는데 오타의 인덱스 값이 -1이 반환되어서 -1 값이 나온 이유에 대해 설명 부탁드립니다. 감사합니다. 수업 잘 듣고 있습니다. :)
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
node.js 로그인 기능을 async로 변경했는데 json 출력값이 이상해요
안녕하세요.따라하며 배우는 노드, 리액트 시리즈 12강을 듣고 async를 이용하여 로그인 코드를 다음과 같이 변경 했습니다.app.post('/login', async (req, res) => { User.findOne({email:req.body.email}).then((user)=>{ if(!user){ return res.json({ loginSuccess:false, message:"제공된 이메일에 해당하는 유저가 없습니다." }) } user.comparePassword(req.body.password, (err, isMatch)=>{ if(err) return res.status(400).send(err); if(!isMatch) return res.json({ loginSuccess:false, message:"비밀번호가 틀렸습니다."}) user.generateToken((err, user) => { if(err) return res.status(400).send(err); res.cookie("x_auth", user.token) .status(200) .json({loginSuccess:true, userId : user._id }); }) }) }) }) 문제 없이 잘 실행이 되는 것 같은데 (분기점에 따라서 message는 제대로 출력됩니다.)다만 generateToken후에 json에서 설정한 loginSuccess, userId 만 보이는게 아니고 이렇게 user 정보가 다 나옵니다. loginSuccess은 출력이 안되고요.이유가 찾을 수 없어 여기에 질문드립니다ㅠ
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
related_name 오류
안녕하세요 강사님,, 또 오류가 나서 질문 드립니다 ㅜㅜclass User(AbstractUser): class GenderChoices(models.TextChoices): MALE = "M", "남성" #전자는 DB에 저장되는 값, 후자는 실제 보여지는 값 FEMALE = "F", "여성" follower_set = models.ManyToManyField( "self", blank=True, symmetrical=False, related_name="following_set", ) following_set = models.ManyToManyField( "self", blank=True, symmetrical=False, related_name="follower_set", )이렇게 단방향으로 맞춰주었는데,저장을 하면 django.core.management.base.SystemCheckError: SystemCheckError: System check identified some issues: ERRORS: accounts.User.follower_set: (fields.E302) Reverse accessor for 'accounts.User.follower_set' clashes with field name 'accounts.User.following_set'. HINT: Rename field 'accounts.User.following_set', or add/change a related_name argument to the definition for field 'accounts.User.follower_set'. accounts.User.follower_set: (fields.E303) Reverse query name for 'accounts.User.follower_set' clashes with field name 'accounts.User.following_set'. HINT: Rename field 'accounts.User.following_set', or add/change a related_name argument to the definition for field 'accounts.User.follower_set'. accounts.User.following_set: (fields.E302) Reverse accessor for 'accounts.User.following_set' clashes with field name 'accounts.User.follower_set'. HINT: Rename field 'accounts.User.follower_set', or add/change a related_name argument to the definition for field 'accounts.User.following_set'. accounts.User.following_set: (fields.E303) Reverse query name for 'accounts.User.following_set' clashes with field name 'accounts.User.follower_set'. HINT: Rename field 'accounts.User.follower_set', or add/change a related_name argument to the definition for field 'accounts.User.following_set'.계속 이렇게 오류가 뜹니다 ㅜㅜ 왜이럴까요..허허 ㅜㅜ
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
re_path 오류
안녕하세요 강사님,accounts/urls.py 에서 re_path 부분에서 계속 오류가 나는데 왜 이런건지 모르겠어서 질문 드립니다 ㅜㅜurlpatterns = [ path('login/', views.login, name='login'), path('logout/', views.logout, name='logout'), path('password_change/', views.password_change, name='password_change'), path('signup/', views.signup, name='signup'), path('edit/', views.profile_edit, name='profile_edit') re_path(r'^(?P<username>[\w.@+-]+)/follow/$', views.user_follow, name='user_follow'), re_path(r'^(?P<username>[\w.@+-]+)/unfollow/$', views.user_unfollow, name='user_unfollow'), ]@login_required def user_follow(request, username): follow_user = get_object_or_404(User, username=username, is_active=True) # request_user => follow_user 을 팔로우 하려고 합니다. request.user.following_set.add(follow_user) # followr_user 팔로워 목록에 request_user 추가해줍니다. follow_user.follower_set.add(request.user) messages.success(request, f"{follow_user}님을 팔로우했습니다.") redirect_url = request.META.get("HTTP_REFERER", "root") return redirect(redirect_url) @login_required def user_unfollow(request, username): unfollow_user = get_object_or_404(User, username=username, is_active=True) # request_user => follow_user 을 언팔로우 하려고 합니다. request.user.following_set.remove(unfollow_user) # followr_user 팔로워 목록에 request_user 추가해줍니다. unfollow_user.follower_set.remove(request.user) messages.success(request, f"{unfollow_user}님을 팔로우 취소했습니다.") redirect_url = request.META.get("HTTP_REFERER", "root") return redirect(redirect_url) File "C:\Inflearn\blog\accounts\urls.py", line 11 re_path(r'^(?P<username>[\w.@+-]+)/follow/$', views.user_follow, name='user_follow'), ^SyntaxError: invalid syntax 자꾸 위와같은 오류가 뜨는데 왜 이런걸까요?ㅜ
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
re_path url
안녕하세요 강사님, re_path 를 이용하는 url 정의에서요,follow 관련 url은 왜 account/urls.py 에서 정의하고유저페이지 관련 re_path url 은 instagram/urls.py 에서 정의하셨는데요,둘다 account나 instagram 중 하나의 url 패턴에 정의하면 안되는 걸까요?
-
해결됨React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
const handleEnter 문에 궁금한게 있습니다.
setUserInput("")을 하면 userInput 값이 ""로 바뀌고그다움 num 선언문에 ""의 숫자변환값이 들어가는게 아닌가 궁금합니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
MentionsTextarea 와 autoSize 사이 버그가 하나 있습니다.
MentionsTextarea 에 ctrl+c ctrl+v 를 이용하여 값을 입력시 사이즈는 조절되나 글자 줄 수가 잘려서 보이는 버그가 있습니다.MentionsTextarea 을 사용시 실제보이는 textarea와 보이지 않는 span 영역이 생성되는데 이 중 autosize에 span ref만 넘어가서 span영역만 커지고 textarea의 영역은 유지되서 생기는 버그로 보입니다.이후 글자를 제거 하거나 추가로 입력시 정상적으로 보이게 됩니다.
-
미해결[React 2부] 고급 주제와 훅
Library 각은 성격을 가진 module을 import할 때 질문
import * as MyRouter from "./lib/MyRouter"잘 몰라서 그러는데 위와 같이 Library 성격을 가진 module을 import할 때 default object 없이 위와 같이 import하는 convention이 있을까요? 아니면 그외 장점이 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
next export 질문있습니다
next 14 버전부터 next export 가 없어지고 next.config.js 파일에서 output: "export" 로 대체되었다는데 이대로 진행해도 문제 없을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
퀴즈5 비밀번호 유효성 검증
비밀번호와 비밀번호 확인이 서로 일치하는지 검증하는 코드를 어떻게 짜야할 지 모르겠어요.. 현재 코드로 하면 에러가 납니다..! 봐주시면 감사하겠습니다ㅠㅠ 해당코드 //문제부분!!!!!!!!!!!!!!!!!!!!********* 으로 해놓았습니다!! import { useState } from 'react'; export default function signUpPage() { //이메일, 비밀번호 담기 const [ email, setEmail ] = useState(""); const [ password, setPassWord ] = useState(""); const [ Repassword, setRePassWord ] = useState(""); //이메일 에러 const [ emailError, setEmailError ] = useState(""); //비밀번호 에러 const [ passWordError, setPassWordError ] = useState(""); //비밀번호확인 에러 const [ RepassWordError, setRePassWordError ] = useState(""); //이메일 const onChangeEmail = (event) =>{ //이벤트 핸들러 console.log(event); console.log(event.target); //작동된 태그 console.log(event.target.value); //작동된 태그에 입력된 값 //변경된 이메일 값을 넣음 setEmail(event.target.value); if(event.target.value !== ''){ //내용 입력시 에러 없애주는거 setEmailError(""); } } const onChangePassWord = (event) => { setPassWord(event.target.value); if(event.target.value !== ''){ setPassWordError(""); } } //문제부분!!!!!!!!!!!!!!!!!!!!********* const onChangeRePassWord = (event) => { // const currentPassWord = event.target.value; // setRePassWord(currentPassWord); // if(password === currentPassWord){ // setRePassWordError(""); // } setRePassWord(event.target.value); if((password === Repassword()) || (event.target.value !== '')){ setRePassWordError(""); } } //등록하기 버튼 에러검증 const onClickSign = () => { //이메일 @ 검증 //includes("") 해당 문자가 있냐 없냐 if(email.includes("@") === false) { setEmailError("이메일이 올바르지 않습니다. @ 형태로 입력해주세요!") } if(!password){ setPassWordError("비밀번호를 입력해주세요") } //문제부분!!!!!!!!!!!!!!!!!!!!********* if((password !== Repassword) || (!Repassword)){ setRePassWordError("비밀번호를 확인해주세요") } //회원가입 완료 if(email && password === Repassword) { alert("회원가입이 완료되었습니다") } } return( <> 이메일: <input type="text" onChange={onChangeEmail} /> <div>{emailError}</div> 비밀번호 :<input type="text" onChange={onChangePassWord} /> <div>{passWordError}</div> 비밀번호확인 :<input type="text" onChange={onChangeRePassWord} /> <div>{RepassWordError}</div> <button id="submit" onClick={onClickSign}>회원가입</button> </> ) }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
jest 오류 'Assertion' 형식에 'toBe' 속성이 없습니다.
'Assertion' 형식에 'toBe' 속성이 없습니다. 이 오류가 jest관련 toBe, toEqual, toBeInTheDocument등에 다 뜹니다
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
No post matches the given query
강사님 안녕하세요, 오류가 발생해서 질문 드립니다 ㅜㅜhttp://127.0.0.1:8000/post/1/로 접속을 하면계속 이와 같은 오류가 뜹니다 ㅠㅠ이렇게 분명 포스트가 db 에 저장되어있는데 말이죠 .. ㅠㅠ이전에 작성했었다가 사용자를 다시 지우면서 같이 삭제된 포스팅이 있는데 그것 때문에 pk 값이 꼬인 것은 아니겠죠? urlpatterns = [ path('post/new/', views.post_new, name='post_new'), path('post/<int:pk>/', views.post_detail, name='post_detail') ](제 앱 이름은 myblog 로 해두었습니다)from django.contrib import messages from django.contrib.auth.decorators import login_required from django.shortcuts import get_object_or_404, redirect, render from .forms import PostForm from .models import Post # Create your views here. @login_required def post_new(request): if request.method == 'POST': form = PostForm(request.POST, request.FILES) if form.is_valid(): post = form.save(commit=False) post.author = request.user post.save() # 이걸 나중에 하면 안되나? post.tag_set.add(*post.extract_tag_list()) messages.success(request, "포스팅을 등록했습니다.") return redirect("/") # TODO : get_absolute_url 활용 else: form = PostForm() return render(request, "myblog/post_form.html", { "form": form, }) def post_detail(request, pk): post = get_object_or_404(Post, pk=pk) return render(request, "myblog/post_detail.html", { "post" : post, }) views.pyimport re from django.conf import settings from django.db import models from django.urls import reverse # Create your models here. class Post(models.Model): author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE) photo = models.ImageField(upload_to="myblog/post/%Y/%m/%d") caption = models.CharField(max_length=1000) tag_set = models.ManyToManyField('Tag', blank=True) location = models.CharField(max_length=100) def __str__(self): return self.caption def extract_tag_list(self): tag_name_list = re.findall(r"#([a-zA-Z\dㄱ-힣]+)", self.caption) tag_list = [] for tag_name in tag_name_list: tag, _ = Tag.objects.get_or_create(name=tag_name) tag_list.append(tag) return tag_list def get_absolute_url(self): return reverse("myblog:post_detail", args=[self.pk]) class Tag(models.Model): name = models.CharField(max_length=50, unique=True) def __str__(self): return self.namemodels.py이상한 부분은 없는 것 같습니다만 왜 이러는지 모르겠네요..ㅠㅠ그런데 또 쌩뚱맞은 http://127.0.0.1:8000/post/5/ url 을 입력하면 아래와 같이 다른 오류가 뜹니다.. 감사합니다 ! ㅠㅠ
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
sendgrid 메일 발송이 안됩니다 ㅠㅠ
7개월 전에 이 기능을 구현을 했고, python shell 로 메일보내서 1 확인 후 메일 확인, 실제로 회원가입 후 메일 발송되는 것까지 확인을 했습니다.sendgrid 회원가입은 구글 계정으로, sender 계정 이메일은 naver 이메일로 하였었구요. send_grid_api_key 값은 잘 지정해주었습니다 ㅜㅜ 아직도 python shell 에서 메일을 보내보면 1이 잘 뜨는데 메일이 발송되지 않습니다.. 스팸메일함 전체메일함 다 확인했는데도 안되네요 ㅜㅜㅜㅜ혹시 몰라서 sender authentication 부분 첨부합니다 ㅜㅜclass User(AbstractUser): class GenderChoices(models.TextChoices): MALE = "M", "남성" #전자는 DB에 저장되는 값, 후자는 실제 보여지는 값 FEMALE = "F", "여성" sns_url = models.URLField(blank=True) bio = models.TextField(blank=True) phone_number = models.CharField(max_length=13, blank=True, validators=[RegexValidator(r"^010-?[1-9]\d{3}-?{4}$")]) gender = models.CharField(max_length=1, blank=True, choices=GenderChoices.choices) avatar = models.ImageField(blank=True, upload_to="accounts/avatar/ $Y/%m/%d") def send_welcome_email(self): subject = render_to_string("accounts/welcome_email_subject.txt", { "user": self, }) content = render_to_string("accounts/welcome_email_content.txt", { "user": self, }) sender_email = settings.WELCOME_EMAIL_SENDER send_mail(subject, content, sender_email, [self.email], fail_silently=False) # SEND GRID 설정 SENDGRID_API_KEY = os.environ.get("SENDGRID_API_KEY") EMAIL_HOST = 'smtp.sendgrid.net' EMAIL_HOST_USER = 'apikey' EMAIL_HOST_PASSWORD = SENDGRID_API_KEY EMAIL_PORT = 587 EMAIL_USE_TLS = True WELCOME_EMAIL_SENDER = "신상정보라가렸습니다!!@naver.com"각각 models.py 와 common.py 입니다 ㅜㅜ
-
미해결[React 2부] 고급 주제와 훅
[3.3장 부수효과 훅] 훅을 만드는 과정 중 드는 궁금증
리액트 훅들을 직접 구현하는 과정을 보고 있습니다. 크게 다른 부분들은 어려움은 없는데 사소한 궁금증이 있습니다. MyReact 컴포넌트 내부에 훅을 구현할 때 arrow function이 아닌 function ... () { ... } 표현으로 함수를 구현하는 특별한 이유가 있을까요?