묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[실시간 채팅 with React]
Request failed with status code 404
제로초님, layouts폴더에 App.tsx에서import React from "react"; import loadable from '@loadable/component'; import { Routes, Route, Navigate } from "react-router-dom"; const LogIn = loadable(() => import("@pages/Login")); const SignUp = loadable(() => import('@pages/SignUp')); const Channel = loadable(() => import('@pages/Channel')); const App = () => { return ( <Routes> <Route path="/" element={<Navigate replace to="/login" />} /> <Route path="/login" element={<LogIn />} /> <Route path="/signup" element={<SignUp />} /> <Route path="/workspace/channel" element={<Channel />} /> </Routes> ) } export default App;Route의 4번째줄 path에 /workspace로 하면 로그아웃 할 때 제대로 작동하는데 저렇게 workspace/channel로 코드를 작성하면 로그아웃 할 때, 아래처럼 뜹니다/를 하나만 붙여야 되는건가요?나머지 코드들은 변경하지 않았습니다.Login 폴더 index.tsximport useInput from "@hooks/useInput"; import axios from "axios"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error} from './styles'; import {Link, Navigate} from 'react-router-dom'; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; const LogIn = () => { const {data, error, mutate} = useSWR('/api/users', fetcher); const [logInError, setLogInError] = useState(false); const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); const onSubmit = useCallback((e: any) => { e.preventDefault(); setLogInError(false); axios .post( '/api/users/login', {email, password}, {withCredentials: true}, ) .then((response) => { mutate(response.data, false); }) .catch((error) => { setLogInError(error.response?.data?.statusCode === 401); }) }, [email, password, mutate]); if(data === undefined) { return <div>로딩중...</div> } if(data) { return <Navigate to="/workspace/channel" /> } return ( <div id="container"> <Header>Sleact</Header> <Form onSubmit={onSubmit}> <Label id="email-label"> <span>이메일 주소</span> <div> <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} /> </div> </Label> <Label id="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} /> </div> {logInError && <Error>이메일과 비밀번호 조합이 일치하지 않습니다.</Error>} </Label> <Button type="submit">로그인</Button> </Form> <LinkContainer> 아직 회원이 아니신가요? <Link to="/signup">회원가입 하러가기</Link> </LinkContainer> </div> ); }; export default LogIn; workspace.tsximport axios from "axios"; import React, { FC, useCallback } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate } from "react-router-dom"; const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data, error, mutate} = useSWR('/api/users', fetcher); const onLogout = useCallback(() => { axios.post('api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); if(data === false) { return <Navigate to="/login" /> } return( <div> <button onClick={onLogout}>로그아웃</button> {children} </div> ) } export default Workspace;swr은 2버전입니다.
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
main/resources에서 basic 폴더 찾는 법 관련 질문
BasicItemController.java의 items()에서 return "basic/item";을 수행합니다.그리고 resources 폴더 하위는 다음과 같이 구성되어 있습니다.static > css폴더, html폴더templates > basic폴더return "basic/item"; 했을 때, basic폴더가 static이 아닌 templates폴더 하위에 있다는 것을 어떻게 아나요?static폴더에 있는지, templates폴더에 있는지 다 조회를 해보고 아는 것인가요?
-
해결됨그림으로 쉽게 배우는 자료구조와 알고리즘 (기본편)
deque.addLast
addLst에서 구현할 때 insertAt으로 구현하셨는데 연결리스트에 구현한 insertLast로 구현하는게 더 직관적인거같은데 insertAt으로 한이유가 있을까요?
-
해결됨스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
직접 스프링 빈 등록하기 관련 질문
자바 코드로 직접 스프링 빈 등록하기에서 SpringConfig 파일에 코드를 작성하시는 부분을 보다가 궁금한게 생겨서 질문합니다.스프링 컨테이너에 빈을 등록한다는 것은 등록하고자하는 클래스의 실제 객체, 즉 인스턴스를 하나 생성하여 관리한다는 것으로 이해했는데요. 그럼 @Bean annotation을 붙이는 것은 빈으로 등록하겠다는 것을 명시하는 것을 나타내는 것 같은데, 꼭 메서드 형식으로 작성을 해야하는 것인가요? 예를 들어, 강의에 적혀있던 메서드 대신@Bean public MemberService memberService = new MemberService();위와 같이 변수 형태로 선언하면 안되는 것인가요?
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
Promise.all에 대한 질문
선생님 안녕하세요.이번 강의에서 사용된 Promise.all이 뭔지 몰라서찾아보니 async-await를 사용하면 비동기 동작의 상태가 완료될 때까지 기다린 후 다음 코드를 순차적으로 읽어나가다보니 이렇게 기다리는 시간을 개선하기 위해 Promise들을 병렬로 처리해 주는 것으로 확인됩니다.근데 이번 강의에서 Promise.all을 빼고 이미지를 업로드해보면 아래의 사진처럼 네트워크의 preview에서 아무 값도 담기지 않게 됩니다.Promise.all이 처리속도를 개선해 주기 위한 기능이라면 Promise.all을 사용하지 않아도 우선 값은 담겨야 하는게 아닐까 하는 생각이 드는데 왜 값이 담기지 않게 되는지 궁금합니다.
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
th:text에 의해 대체되는 부분 관련 질문
items.html의 일부 코드입니다. <td><a th:text="${item.id}">회원id</a></td> <td><a th:text="${item.itemName}">상품명</a></td> <td th:text="${item.price}">10000</td> <td th:text="${item.quantity}">10</td>선생님께서는 th:text에 의해 대체될 부분에 '회원id', '상품명', '10000', '10'을 작성하셨습니다.사실 저는 어차피 대체될 부분이니까 비워둬야 겠다고 생각을 했었는데, (th:text에 대체되더라도) 무엇이 들어가는지를 작성해두는 것이 좋은가요?그렇다면 혹시 서버에서 렌더링되지 않고 브라우저로 바로 봤을 때 무엇이 들어가는지 알기 위함인 것인가요?서버를 거치지 않고 브라우저로 바로 봤을 때의 상황까지 고려해주는 것이 좋은가요??
-
해결됨그림으로 쉽게 배우는 자료구조와 알고리즘 (기본편)
스택과 큐의 필요성
스택은 FIFO 큐는 LIFO 구조인데 이 두개를 합친게 덱같네요. 이렇게되면 스택과 큐의 자료구조의 필요성이 잘 느껴지지 않습니다. 덱이 성능이 나쁘게 아니고 연결리스트 덕분에 삽입 제거가 O(1)의 성능이 나오는데 이렇게되면 굳이 스택과 큐를 써야하나싶은데 스택, 큐, 덱이 성능상의 차이점이 있을까요?
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
타임리프에서 URL 표현하는 법
items.html의 일부 코드입니다. <link th:href="@{/css/bootstrap.min.css}"> <button th:onclick="|location.href='@{/basic/items/add}'|"></button>MVC2 강의의 타임리프 편을 듣고 왔는데요,쿼리 파라미터, 경로변수 없는 단순한 URL(ex. @{/hello} -> /hello)인 경우, @{} 없이 그냥 문자열로 다루면 안 되는 것인가요?타임리프에서 th:href로 경로를 작성할 때는 단순 경로일지라도 @{}로 경로를 작성하는 것이 원칙인가요?
-
미해결프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
챕터2) identity 관련 질문입니다.
선생님 안녕하세요. 강의 잘 듣고 있습니다. 아톰이 서비스가 종료된 것 같아서, 강의를 들을 때는 vscode에 코딩을 따라하면서 수업 듣고 있는데요. 강의를 듣지 않고 복습을 해봐야 될 것 같아서 주피터노트북에 복습을 하던 중에 이상한 점을 발견했습니다. 챕터2-2 수강도중 ID 확인 부분에서 vscode에서는 동일 값에 대한 id가 True로 표현되는데, 주피터노트북에서는 이상하게 False로 표현이 돼서요... 혹시 제 코드가 잘 못 된걸까요, 아니면 주피터노트북의 문제인걸까요...? 자꾸 시덥잖은 걸로 질문드려서 죄송합니다ㅜㅜㅜㅠㅠㅠ
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
SMTPServerDisconnected at /accounts/signup/
선생님회원가입 환영 이메일 보내기 마지막 쯔음 파트에 관하여 질문 드리고자 합니다.우선 세팅을 마치고터미널로 시도할때는 메세지 1이 뜨면서메일이 전송된 것을 확인했습니다. 이후로 터미널에서 시도했던 것을 accounts/models.py등으로 이전하고 시도하고나니 에러가 발생했는데요.이게 에러 메세지 이구요.에러메세지에 표시된 구간을 따라가보았는데# views.py from django.conf import settings # from ..askcompany.settings import common from django.contrib.auth.models import AbstractUser from django.core.mail import send_mail from django.db import models from django.template.loader import render_to_string # Create your models here. class User(AbstractUser): website_url = models.URLField(blank = True) bio = models.TextField(blank = True) 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 }) # 여기서 settings는 django.conf라는 곳에서 임포트 해오는 것이고 # 기초 settings.py의 이름이 변하더라도 거기서 가져오는 것 같다. # 문제 생길 시, 추측이 아닐 수 있으니 settings를 common으로 변경해주자. sender_email = settings.WELCOME_EMAIL_SENDER # 여기서 self.email의 의미는 User마다 email로 가입이 될텐데, 그 주소가 수신주소가 되는것이다. send_mail(subject, content, sender_email, [self.email], fail_silently=False) # save할때마다 호출 -> which mean is User가 생성될때마다 # 이런식의 로직 구현이 가능하다. def save(self, *args, **kwargs): is_created = (self.pk == None) super().save(*args, **kwargs) if is_created: pass이렇게 있구요. 여기서 에러를 만드는 것으로 의심되는 요소는 sender_email이였습니다. 그도 그럴것이 common.py에는 WELCOME_EMAIL_SENDER를 정의해주었지만 그것이 from django.conf import settings의 것을 오버라이딩 하는 것에 대해서는 확신이 들지 않아서요.# common.py WELCOME_EMAIL_SENDER = 'daniell8282@naver.com'이렇게 설정해 주었구요.echo $SENDGRID_API_KEY도 딱히 {키값}으로 노출되는게 아니라 키값으로 잘 확인 됩니다.무엇이 문제여서 이게 에러가 계속 나는 걸까요? 추가사항으로는저와 동일한 문제로 8시간동안 풀려고 시도했던 분이 계셨더라구요.그분하고 저와 같은케이스 같은데요.저두 맥이고 zsh를 쓰고 있습니다.혹시몰라서 bash로 전환해서 export로 키값 재설정해주고echo로 확인해주고 회원가입해보니깐회원가입이 되긴 하는데메일이 발송이 안되구요zsh한정이긴 하지만 키값을 처음에 export로 잡아주고 echo로 확인할때는 {}이렇게 딕셔너리로 감싸지는 것 없이 키값이 노출이 되는데, SMTP error? 이거 발생후에 echo로 확인해보면 {}이렇게 딕셔너리 처리 됩니다; 이건 왜그런걸까요?
-
해결됨[코드캠프] 강력한 CSS
가상요소 선택자 after 기본 dislplay 값
강의 중에선 after의 display 기본 값이 block이기 때문에명시할 필요는 없지만 flex-direction 처럼 명시해주는 것이 좋다고 말씀해주셨습니다.근데, 개발자도구를 통해서 기본값을 확인해보니 display를 명시해주지 않으면 inline으로 지정되어 있는데 최근에 바뀐걸까요?
-
미해결지금 당장 NodeJS 백엔드 개발 [사주 만세력]
Error response from daemon: Ports are not available
PS B:\SSYW\saju-backend-nodejs-master> docker-compose up -d[+] Running 12/12[+] Running 1/2 - Network saju-backend-nodejs-master_default Created 9.3s - Container saju_nodejs_mysql Starting 42.3sError response from daemon: Ports are not available: exposing port TCP 0.0.0.0:3309 -> 0.0.0.0:0: listen tcp 0.0.0.0:3309: bind: An attempt was made to access a socket in a way forbidden by its access permissions.PS B:\SSYW\saju-backend-nodejs-master> 죄송한데요. 포트를 사용할 수가 없습니다. 해결 방법좀 가르쳐 주세요. ~~
-
해결됨[코드캠프] 훈훈한 Javascript
window객체 대신 document객체를 사용해도 되나요?
섹션 6. 키보드 event 체크에서 질문이 있습니다.DOM은 브라우저가 HTML 문서를 파싱하는 과정에서 생겨나는 객체라고 배웠고,window는 가장 높은 최상위 공간에 존재하고 있는 전역객체라고 배웠습니다.그런데, event속성을 사용할 때, 꼭 굳이 window를 사용해야 하는지 여쭤봅니다.어떻게보면 event속성도 크게보면 HTML 문서 내 한 요소이자 영역인 것 같아서요. 혹시 window 객체에서 사용가능한 속성과 document 객체에서 사용가능한 속성이따로 분리되어 각자 사용하기로 약속한게 있는건가요? 이점이 궁금합니다.감사합니다.
-
미해결스프링 배치
Fetch와 Cursor의 순서?
[DB - Cursor & Paging 이해] 강의에서 보여주신 장표를 보면 cursot가 먼저 움직이고 fetch를 통해 application으로 매핑된 데이터(객체)를 넘겨주는 것처럼 표현되어있는데요.fetch size에 의해서 DB --> 메모리로 데이터가 적재된 후, 그 결과집합을 순차적으로 cursor를 통해 접근하는걸로 알고있습니다.즉, fetch size는 DB에서 메모리로 데이터를 적재할 크기이고 그 데이터 셋을 처음부터 cursor를 통해 접근하는게 맞지않나 싶어서 질문드립니다. 제가 반대로 알고 있을 수 있지만...
-
미해결최신 딥러닝 기술 Vision Transformer 개념부터 Pytorch 구현까지
'어텐션 기법 - 키, 쿼리, 밸류는 무엇인가?' 강의에서 (QK^T)
안녕하세요!'어텐션 기법 - 키, 쿼리, 밸류는 무엇인가?' 강의에서 (QK^T)쿼리와 키 transpose한 것이 어떻게 쿼리와 키의 유사도를 나타내는지 잘 이해가 가지 않습니다.
-
해결됨처음하는 딥러닝과 파이토치(Pytorch) 부트캠프 (쉽게! 기본부터 챗GPT 핵심 트랜스포머까지) [데이터분석/과학 Part3]
10_ADVANCE_EXAMPLE-에서 MNIST 함수 작성할 때 index_error가 나타납니다 ㅠㅠ
항상 강의들으면서, 따라치면서, 여러번 반복해서 익히려고 하고 있습니다. 지금까지 별 문제 없이 쏙쏙 이해가 잘 가서, 지금까지 질문을 드리지 않았는데요.. 함수를 작성하는 부분에서 자꾸 인덱스 에러가 나타나서, 제가 어느 부분을 잘못 쓴 건지 모르겠습니다. 선생님께서 작성하신 코드를 그대로 복사해서 넣었는데도 index error가 호출되어서 왜 그런지 모르겠습니다...
-
해결됨그림으로 쉽게 배우는 자료구조와 알고리즘 (기본편)
강의 내용 포스팅
안녕하세요 자료구조 및 알고리즘 강의 잘 듣고 있습니다.다름이 아니라 제가 개인 블로그에 상업적인 목적 없이공부한 흔적을 남길려는 용도로 해당 강의 내용을 정리하려고 하는데혹시 강의 중간 중간에 나오는 그림이 필요할 경우 출처를 남긴 후사용해도 가능한지 여쭤보고 싶습니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
length 오류
콘솔 결과와 error가 같이 출력됩니다!
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
body : ReadableStream 관련 문의드립니다.
안녕하세요. 2강 진행 중 상품목록 조회시 msw Response 결과에 대한 body 값이 ReadableStream 으로 넘어옵니다.이 경우 body 의 data를 확인할 방법이 있을까요?답변 부탁드립니다.감사합니다.
-
미해결10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
2-R 1068 질문 드립니다.(링크 수정하여 다시 올립니다)
선생님 죄송합니다. 링크 수정하여 다시 질문 드립니다.저는 Input 값을 받을 때, 부모 자식에 대한 꼬리표를 같이 매겨서 부모 = 1 / 자식 = 2 / 루트 = -1 이런 식으로 풀었는데요. 75 % 쯤에서 Fail이 뜨네요 ㅠㅠ어떤 문제가 있는 걸까요? 코드는 아래 링크에 있습니다http://boj.kr/457d11f9ac914b61b98f62c5f2a89554감사합니다