172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
메인화면으로가는 버튼을 빠르게 반복해서 누르면 로딩중만 나오길래 개발자모드에서 network를 보면 (pending)이렇게 나오면서 응답을 못하는상태인데 왜 그러는걸까요? 모든 함수에서 mysql에 연결하고 쿼리문 사용할때 async/await 사용하고있습니다. 로그인 미들웨어는 promise로 사용하고있는데 정확히 어떤점때문에 이러한 오류가 발생하는지 모르겠습니다. 저pending 오류를 어떻게해야 해결이 될까요?
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 MemberServiceIntegrationTest 에서 회원가입을 run하는 과정중에, 처음에는 NullPointerException 이 뜨다가, 코드수정만 했는데 이제는 아얘 실행조차 안되고 다음과 같이 오류가 뜹니다 __________________ 위의 오류를 해결하려고 아래와 같이 src/java/main을 소스루트로 지정했습니다 캐쉬삭제도 해보고 이것저것 해봤는데 실행조차 안됩니다 어떻게 고쳐야하나요 ... ㅠㅠ 도와주세요 ..
미해결
자바 개발자를 위한 코틀린 입문(Java to Kotlin Starter Guide)
Java 에서 Final 만 사용할 수 있는게 외부 변수가 메모리에서 해제 되었을 경우, 가비지를 참조할 수 있는 것을 방지하기 위해서로 알고 있는데 코틀린은 이게 가능한게 아예 메모리를 통째로 떠와서 그런걸까요? ㅎㅎ 강의 영상에서 포획한다 라고 표현하신게 그런 의미 같아요!
해결됨
자바 개발자를 위한 코틀린 입문(Java to Kotlin Starter Guide)
함수가 1급객체가 되어버려서 functional interface가 필요없어진 것처럼 보여요
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요 선생님 ! 강의 정말 잘 보고 있습니다 ! 다름이 아니라 현재 Node Js 교과서를 참고해서 웹 프로젝트를 진행 중입니다. AWS를 이용해 lightsail과 도메인을 구입해 실제 배포를 하려 하는데요. 큰 프로젝트가 아니라 사용자가 100~200명쯤 되는 블라인드 매칭 서비스입니다. 무료로 진행하는 프로그램이라 큰 걱정은 없지만, 실제 서버 배포를 함에 있어 15장에 나오는 서비스 운영을 위한 패키지 만으로 보안이 가능할까 걱정이 돼서 글을 작성합니다. 추가 적으로 추천하시는 패키지들이 있으시면 추천 받고 싶습니다 !
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] "package hello.hellospring.aop; import org.aspectj.lang.ProceedingJoinPoint; import org.aspectj.lang.annotation.Around; import org.aspectj.lang.annotation.Aspect; import org.springframework.stereotype.Component; @Component @Aspect public class TimeTraceAop { @Around("execution(* hello.helloSpring..*(..))") public Object execute(ProceedingJoinPoint joinPoint) throws Throwable { long start = System. currentTimeMillis (); System. out .println("START : " + joinPoint.toString()); try { return joinPoint.proceed(); } finally { long finish = System. currentTimeMillis (); long timeMs = finish - start; System. out .println("END : " + joinPoint.toString()+ " " + timeMs + "ms"); } } }" TimeTraceAop 클래스를 작성한 이후에 실행을 시켜보아도 수업처럼 START END 부분이실행되지 않습니다. 단순 스프링 실행화면만 보이는데 어디가 문제일까요?
해결됨
Slack 클론 코딩[실시간 채팅 with React]
MDN의 가이드에 따라 DragNDrop 코드를 작성하는데 파일을 가져오기 위한 코드인 event.dataTransfer.items 에서 아래와 같은 오류가 발생햇습니다. 'DataTransferItemList' 형식은 배열 형식이 아닙니다.ts(2461) MDN DataTransfer: items 속성 가이드에서는 목록을 반환하고 항목이없어도 빈목록을 반환한다고 되어있고 MDN DataTransferItemList 타입 가이드에서 객체라고 명시되어 있던데 개별항목에는 [ ]표기법으로 접근할수 있다는걸로 보아 event.dataTransfer.items의 타입은 리스트가 아닌 오브젝트에 숫자를 KEY로 값을 넣어놓은 형태인가요?? 아님 또다른 타입인건가요? 코드 function dropHandler(ev: React.DragEvent<HTMLDivElement>): void { console.log('File(s) dropped'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); if (ev.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s) [...ev.dataTransfer.items].forEach((item, i) => { // If dropped items aren't files, reject them if (item.kind === 'file') { const file = item.getAsFile(); if (file) { console.log(`… file[${i}].name = ${file.name}`); } } }); } else { // Use DataTransfer interface to access the file(s) const files = ev.dataTransfer.files; [...files].forEach((file, i) => { console.log(`… file[${i}].name = ${file.name}`); }); } } MDN DragNDrop가이드 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop MDN DataTransfer: items 속성 가이드 https://developer.mozilla.org/ko/docs/Web/API/DataTransfer/items MDN DataTransferItemList 타입 가이드 https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList
해결됨
실전! Querydsl
안녕하세요 queryDsl의 기본 문법에 대해서 듣고 있는데요. 현재 기준, fetchResults(), fetchCount() 가 deprecated 되었네요.(자바11, springboot 2.7 버전에 맞는 queryDsl) 강의 끝부분에서 말씀하신, 복잡한 페이징 & 쿼리 부분에서는 coun와 select 쿼리가 다르니까 따로 작성해서 해야된다는 말씀 것과 연관되어서 그런 것 맞을까요? 그러면 @Deprecated 된 현재는 fetchResults(), fetchCount() 는 사용을 지양하고 별개의 쿼리로 각각의 값들을 얻어 조합해서 response 해주는 것이 맞죠?
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
Promise.reject를 쓰는 경우가 아니라면 바로 반환하거나 Promise객체를 사용해서 반환하거나 똑같은 것 같은데 크게 상관없나요?
해결됨
Slack 클론 코딩[실시간 채팅 with React]
만약 Page의 단위를 5로 잡아서 최초 랜더링한 페이지가 스크롤이 되지않는다면 onScroll 이벤트가 발생하지 않으니 setSize 이벤트도 발생할수 없습니다. 이렇게 최초 데이터의 개수가 모자라서 이벤트 자체가 발생하지 않으면 별개의 이벤트로 scroll이 가능할때까지 페이지를 불러와야 하는데 좋은 방법이 잇는가요? 페이지를 5개로 잡을떄 페이지를 20개로 잡을떄 참조 코드 import ChatBox from '@components/ChatBox'; import ChatList from '@components/ChatList'; import useInput from '@hooks/useInput'; import { Header, Container } from '@pages/DirectMessage/styles'; import fetcher from '@utils/fetcher'; import makeSection from '@utils/makeSection'; import axios from 'axios'; import gravatar from 'gravatar'; import React, { FC, FormEventHandler, useCallback, useEffect, useRef, useState } from 'react'; import Scrollbars from 'react-custom-scrollbars-2'; import { useParams } from 'react-router'; import useSWR from 'swr'; import useSWRInfinite from 'swr/infinite'; const PAGE_SIZE = 5; const DirectMessage: FC = () => { const { workspace, id } = useParams(); const { data: myData } = useSWR<IUser, false>('/api/users', fetcher); const { data: userData } = useSWR<IUser, false>(`/api/workspaces/${workspace}/users/${id}`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); // const scrollbarRef = useRef(null); const { data: chatData, mutate: mutateChat, setSize, } = useSWRInfinite<IDM[]>( (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=${PAGE_SIZE}&page=${index + 1}`, fetcher, ); const isEmpty = chatData?.[0]?.length === 0; const isReachingEnd = isEmpty || (chatData && chatData[chatData.length - 1]?.length < PAGE_SIZE); const chatSection = makeSection(chatData ? [...chatData].flat().reverse() : []); const onSubmitForm = useCallback<FormEventHandler>( (event) => { event.preventDefault(); if (!chat || !chat?.trim()) { return; } axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { mutateChat(); setChat(''); }) .catch(console.error); console.log('제출'); }, [chat, id, mutateChat, setChat, workspace], ); const scrollbarRef = useRef<Scrollbars>(null); return !userData || !myData || !chatData ? null : ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname} /> <span>{userData.nickname}</span> </Header> <ChatList chatSections={chatSection} isEmpty={isEmpty} isReachingEnd={isReachingEnd} setSize={setSize} ref={scrollbarRef} /> <ChatBox onSubmitForm={onSubmitForm} chat={chat} onChangeChat={onChangeChat} placeholder={`Message ${userData.nickname}`} otherData={[userData]} /> </Container> ); }; export default DirectMessage; import Chat from '@components/Chat'; import { ChatZone, Section, StickyHeader } from '@components/ChatList/styles'; import React, { FC, MutableRefObject, forwardRef, useCallback } from 'react'; import { Scrollbars, positionValues } from 'react-custom-scrollbars-2'; interface Props { chatSections: { [key: string]: (IDM | IChat)[] }; isEmpty: boolean; isReachingEnd?: boolean; setSize: (f: (size: number) => number) => Promise<(IDM | IChat)[][] | undefined>; } const ChatList = forwardRef<Scrollbars, Props>(({ chatSections, isReachingEnd, isEmpty, setSize }, scrollRef) => { const onScroll = useCallback( (values: positionValues) => { if (values.scrollTop === 0 && !isReachingEnd) { setSize((size) => size + 1).then(() => { const current = (scrollRef as MutableRefObject<Scrollbars>)?.current; if (current) { current.scrollTop(current.getScrollHeight() - values.scrollHeight); } }); } }, [isReachingEnd, scrollRef, setSize], ); return ( <ChatZone> <Scrollbars autoHide ref={scrollRef} onScrollFrame={onScroll}> {Object.entries(chatSections).map(([dateData, chatData]) => ( <Section className={`section-${dateData}`} key={dateData}> <StickyHeader> <button>{dateData}</button> </StickyHeader> {chatData.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Section> ))} </Scrollbars> </ChatZone> ); }); export default ChatList;
해결됨
Slack 클론 코딩[실시간 채팅 with React]
원본값을 유지하기위해 concat을 사용하셧는데 지금 같은 1차원 배열일때는 문제가 없지만 2차원 배열일 경우 해당 배열이 다쪼개져서 1차원 배열이 되는걸로 알고있습니다 그래서 저는 원본을 유지할때 스프레드 문법을 사용하는데 concat이 더 좋은경우도 있나요? 두가지 방법을 다 알려주시긴 하셧는데 차이점이 잇는가 궁금합니다. 예시상황 const chatData = [[1, 2], [3, 4], [5, 6]]; [].concat(...chatData).reverse() => [6, 5, 4, 3, 2, 1] [...chatData].reverse() => [[5, 6], [3, 4], [1, 2]]
해결됨
Slack 클론 코딩[실시간 채팅 with React]
기존 윈도우 스크롤바의 경우 스크롤바가 width를 잡아먹어 의도햇던 디자인이 찌그러 지는경우가 있어서 고민이엿습니다. 이번 강의에서 알려주신 react-custom-scrollbars 의경우 width를 잡아먹지 않고 내부에 생성되는걸로 확인되는데 vw,vh를 100%로 잡은 최상위 레이아웃을 만들고 react-custom-scrollbars 를 추가한뒤 그 자식으로 기존 코드들을 옮기려 합니다. 이때 문제가 될만한 이슈 또는 더 나은 방법이 잇을까요?
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
강의에서 알려주신대로 MySQL 설치 및 정상적으로 비밀번호도 설정하였습니다. 그리고, workbench 및 콘솔로도 잘 실습하였고요. (*Table 세팅 등) 그런데, 컴퓨터를 껐다가 재부팅했더니 MySQL 로그인이 안됩니다. 패스워드도 정상적으로 다 입력하였으나, 계속 오류 메세지가 나와서 cmd에 접속해 현재 mysql이 사용중인 프로세스 id가 컴퓨터 재부팅 전에 설정되었던 pid와 다름을 확인하였고, 어쩔 수 없이 컴퓨터에 설치된 MySQL 프로그램 삭제 후 재설치하면서 임시방편으로 문제해결하긴 했습니다. 혹시 몰라서 또 다시 컴퓨터를 재부팅한 이후 MySQL pid를 보았는데, 또 바뀌어 있더라고요. 그럼.... 컴퓨터를 매번 재부팅할 때마다 MySQL 프로그램을 계속 삭제했다가 재설치를 해야하나요?ㅜ
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요 강사님, 현재 Lightsail에서 배포를 진행하며 $ sudo NODE_ENV=production PORT=80 pm2 start server.js -i 0 명령어 작성후 $ sudo pm2 monit으로 확인해 보니 아래와 같은 오류가 발생합니다. KakaoStrategy 모듈을 못찾는다는데 passport-kakao 1.0.0 버전으로 npm i를 했었습니다. 어떤게 문제인걸까요..? 로컬에서는 문제없이 잘 돌아갔습니다. package.json 입니다. { ... "dependencies": { "@aws-sdk/client-s3": "^3.377.0", "bcrypt": "^5.1.0", "connect-redis": "^4.0.4", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "cross-env": "^7.0.3", "csurf": "^1.11.0", "dotenv": "^16.3.1", "express": "^4.18.2", "express-session": "^1.17.3", "helmet": "^7.0.0", "hpp": "^0.2.3", "morgan": "^1.10.0", "multer": "^1.4.5-lts.1", "multer-s3": "^3.0.1", "mysql2": "^3.4.2", "nunjucks": "^3.2.4", "passport": "^0.6.0", "passport-kakao": "1.0.0", "passport-local": "^1.0.0", "pm2": "^5.3.0", "redis": "^3.0.2", "sanitize-html": "^2.11.0", "sequelize": "^6.32.1", "sequelize-cli": "^6.6.1", "winston": "^3.10.0" }, "devDependencies": { "nodemon": "^2.0.22" } } passport > kakaoStrategy.js 부분입니다. const passport = require('passport'); const KakaoStrategy = require('passport-kakao').Strategy; const User = require('../models/user'); module.exports = () => { passport.use(new KakaoStrategy({ clientID: process.env.KAKAO_ID, callbackURL: '/auth/kakao/callback', }, async (accessToken, refreshToken, profile, done) => { // accessToken, refreshToken은 카카오 api를 호출하는데 사용되나, 여기선 사용하지 않음 console.log('kakao profile', profile); try { const exUser = await User.findOne({ where: { snsId: profile.id, provider: 'kakao' }, }); if (exUser) { //login done(null, exUser); } else { //join const newUser = await User.create({ email: profile._json?.kakao_account?.email, // 이 구조가 자주 바뀌므로, profile을 console.log를 통해 계속 확인하자 nick: profile.displayName, snsId: profile.id, provider: 'kakao', }); done(null, newUser); } } catch (error) { console.error(error); done(error); } })); };
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
이전 강의에서 만든 서버에서 서버로 요청하는 nodecat서버를 프록시 서버라고 봐도 되나요? 브라우저에서 nodecat과 같은 도메인인 localhost:4000/myposts 요청을 보냈고 nodecat 서버가 이를 받아 nodebird서버로 localhost:8002/v1/post/my 요청을 보냈으니 이게 뭐 http-proxy-middleware같은 패키지를 써서 따로 구현해야 하는 프록시 서버랑 뭐가 다른지 모르겠습니다.
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
이전 강의에서 갑자기 axios.defaults.headers.origin을 넣은 것이 이해가 되지 않았었는데 이번 강의에서 corsWhenDomainMatches 미들웨어에 사용하기 위해 넣은 것이라 봐도 되나요? 근데 axios.defaults.headers.origin = process.env.ORIGIN; 코드를 주석처리해도 Origin 헤더는 정상적으로 찍히던데 저게 있는 것과 없는 것과 뭔 차이인가요?
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요 강사님 강사님 영상을 통해 학습하고 자그마한 프로젝트를 수행하고 있는데 서버 실행은 되지만 아래와 같은 오류가 발생합니다. app.js의 코드는 아래와 같습니다. 강의랑 ppt 교안에는 const RedisStore = require('connect-redis')(sesson); 으로 되어있으나 저같은 경우에 아래와 같은 오류가 발생해서 require('connect-redis').default;로 변경했었습니다.
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
무료강좌 중에 이런게 많아요. 다음 강의 제작때는 소리를 맞추든가 음악을 안넣든가 하는게 좋을것 같애요.
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
전체적으로 어렵고 잘 이해가 되지 않습니다.. 지금 9장 거의 끝나가는데 계속 가는게 맞을까요..? 아니면 복습을 다시 하는게 맞는건가요.. 혼자하려니 많이 어렵네요 조언 부탁드립니다.
해결됨
Slack 클론 코딩[실시간 채팅 with React]
저는 평소에 아래와 같이 ComponentPropsWithoutRef을 이용하여 children이나 스타일등을 props로 내려받아 사용하고 있엇는데 export interface Props { /** 북마크 여부 */ isBookmark: boolean; /** 클릭했을 때 호출할 함수 */ onClick: (event: React.MouseEvent<HTMLButtonElement>) => void; } export const Bookmark = (Props: Props & ComponentPropsWithoutRef<"button">) => { return ( <ButtonStyle {...Props}> <BookmarkIcon isBookmark={Props.isBookmark} /> </ButtonStyle> ); }; export default Bookmark; 강의에서는 아래와같이 FC<PropsWithChildren<Props>> 형식으로 받아 오던데 둘이 어떤 차이가 있을까요? interface Props { show: boolean; onCloseModal: () => void; style: CSSProperties; closeButton?: boolean; } const Menu: FC<PropsWithChildren<Props>> = ({ closeButton, style, show, children, onCloseModal }) => { const stopPropagation = useCallback<MouseEventHandler<HTMLDivElement>>((event) => { event.stopPropagation(); }, []); if (!show) { return null; } return ( <CreateMenu onClick={onCloseModal}> <div onClick={stopPropagation} style={style}> {closeButton && <CloseModalButton onClick={onCloseModal}>×</CloseModalButton>} {children} </div> </CreateMenu> ); };
