172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
게임처럼 공부하는 git 던전
강의에서 브랜치를 생성하자마자 그 브랜치에 대한 로컬 저장소가 따로 만들어지는 건지?그게 아니라면 로컬 저장소에서 저장하자마자 다른 브랜치로 작업한 내용이 전부 기존에로컬 저장소로 저장된 master랑 같아지는 상태가 아닌지?? 궁금합니다!!!!
해결됨
게임처럼 공부하는 git 던전
브랜치를 만들었는데, 강의에서 stash할때 hotfix 브랜치 생성할때 hotfix브랜치에 대한 local 저장소가 따로 만들어 지는걸까요? 하나의 로컬저장소에서 수정하는 것처럼 느껴져서 따라하다가 뭔가 이전 상태가 아닌것 같아서요 ㅠㅠ 다른 gui를 사용해서 그런지 헷깔려서 질문드립니다!
해결됨
쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS
안녕하세요 우선 끝까지 강의 잘들었습니다!!! docker 부분이 아직 익숙하지 않아 질문드립니다 docker를 따라 설치하니 저장소 같은 곳에 이미지가 저장되는 것을 확인하였습니다. 해당 이미지를 aws 인스턴스에서 받아서 바로 사용할 순 없는건가요? -> 굳이 git clone으로 프로젝트를 받아와야 하는지 궁금합니다 / docker 저장소에 이미지를 올리고 바로 받아서 실행하면 되는게 아닌가 싶어서 질문드립니다... 2.가 만약 틀린거라면 build/libs에 있는 파일이 직접적으로 실행을 시키면서 애플리케이션이 실행되는 것 같은데 이 이미지를 굳이 docker 저장소에 올리는 이유가 궁금합니다.
해결됨
쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS
질문이 너무 짧아서 죄송하지만... 제목 그대로 3가지 쓰임의 차이점을 알고 싶습니다. 언제 어떤것을 사용해야 하는지 잘모르겠네요...
해결됨
쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS
where( QTestEntity.testEntity.name .eq(name)과 같이 조건을 넣어줘야되지 않나요..?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 데이터 추가 기능 구현 중 오류가 생겼는데, 여러번 들어봐도 어디서 놓쳤는지 알수 없어서 문의드립니다. 저장 성공 얼럿이 뜬 후 diaryList.map is not a function 오류가 발생하는데 이유가 뭘까요ㅠㅠ? 올려주신 코드와 비교해봐도 잘못 작성된 부분을 찾지 못해서.. 확인 부탁드립니다! https://codesandbox.io/p/sandbox/dawn-silence-dtzj4w?file=%2Fsrc%2FApp.js%3A5%2C1 감사합니다.
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
지금은 마커만 눌르면 해당 정보만 보이는데, 마커를 눌렀을때 html안에 해당 음식점의 상세 페이지 정보를 만들어보려고 하는데.. 너무 막막해서요.. 이럴때는 어찌해야 할지 조금 말씀 부탁드려도 될까요?
해결됨
팀 개발을 위한 Git, GitHub 입문
안녕하세요! 깃 협업 역량을 향상시키고 싶어서 강의를 듣고 있는데, 고양이와 문어가 너무 귀여워요!!ㅋㅋㅋ "글로발" 발음도 빵 터졌어요. 수업 자료 부탁 드립니다! 정말 큰 도움이 될 것 같아요. 감사합니다~ joshuajkim413@gmail.com
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
const {studentName} = req.query; const {studentIdx} = req.params; 여기서 req.query와 req.params의 차이가뭔가요?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
들어가서 찾아보고 싶은게 있는데 새소식에 없어져서요..
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
라우터 돔 사이트에서 베이직이 안보이는데 어떤걸 복사하면되는건가요?
해결됨
코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)
lovejd0815@gmail.com 입니다. 좋은 강의 감사드립니다!
해결됨
팀 개발을 위한 Git, GitHub 입문
저도 강의 자료 부탁드립니다. ㅎㅎ angels6312@naver.com
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
SSR 방식에 서버 컴포넌트와 클라이언트 컴포넌트를 둘 다 적절히 사용하는 것인가요?? 서버 컴포넌트는 데이터 페칭, 보안, 캐싱, JS 번들크기 감소와 같은 장점이 있고 event와 hook을 사용하지 못한다는 특징도 이야기해주셨는데, 그렇다면 데이터를 받아서(페칭해서) 클라이언트 컴포넌트에 데이터를 뿌려주는 느낌으로 조합해서 사용하는 건가요?? 서버컴포넌트는 event를 사용하지 않으므로, TTI를 개선하기 위해 나온 개념은 아닌거죠???
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
nodemon : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\~~~~~\AppData\Roaming\npm\nodemon.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies( https://go.microsoft.com/fwlink/?LinkID=135170 ) 를 참조하십시오. 위치 줄:1 문자:1 + nodemon + ~~~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 이런거 뜨면 https://velog.io/@kimy/VS-CODE-supervisor-nodemon-%EC%98%A4%EB%A5%98-ps1-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%A1%9C%EB%93%9C%ED%95%A0-%EC%88%98-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4 이 방법대로 참조하세요 혹시 안되시는분들
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
저 강의에서는 vpm init 등등을 활용해 노드js 기타등등을 생성하셨는데 이번강의에선 깃허브에서 다운을 통해 선생님께서 이미 준비하신 node.js파일들을 제공받았는데.. 만약 제가 스스로 혼자서 셋팅하고 만들어보고 싶은 경우에는 어찌해야 할까요...? 아니면 그냥 선생님이 만들어주신 저 다운패키지들을 활용해도 별 문제 없을까요...?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
module.exports = { jwtsecret : "jwt_secret_key_9312", host : "3.38.61.157", user : "root", port : "3306", password : "~~~", detabase : "enrolment", }; 이렇게 하고 index.js를 해줬는데 선생님처럼 aws아이피는 안 뜨고 그냥 PS C:\Users\YOONJUNHO\Documents\Test\Node-Template-For-Food-Map-main> node index.js 2023-11-15 02:38:07 info: undefined - API Server Start At Port 3000 이것만 뜨는데 이것도 연결된건가요?
해결됨
코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)
rladpgns5427@gmail.com 초대부탁드립니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
import Chat from '@components/Chat'; import { ChatZone, Section, StickyHeader } from '@components/ChatList/style'; import { IChat, IDM } from '@typings/db'; import React, { FC, RefObject, VFC, forwardRef, useCallback, useRef } from 'react'; import { Scrollbars } from 'react-custom-scrollbars'; interface Props { scrollRef: RefObject<Scrollbars>; chatSections: { [key: string]: IDM[] }; setSize: (f: (index: number) => number) => Promise<IDM[][] | undefined>; isEmpty: boolean; isReachingEnd: boolean; } const ChatList: VFC<Props> = (({ chatSections, setSize, isEmpty, scrollRef, isReachingEnd}) => { const onScroll = useCallback((values) => { // 끝에 도달하면 불러오지 않기 if(values.scrollTop === 0 && !isReachingEnd){ console.log('가장 위'); setSize((prevSize) => prevSize + 1).then(()=>{ // 스크롤 위치 유지 if(scrollRef?.current){ scrollRef.current?.scrollTop(scrollRef.current?.getScrollHeight() - values.scrollHeight); } }); } }, []); return ( <ChatZone> <Scrollbars autoHide ref={scrollRef} onScrollFrame={onScroll}> {Object.entries(chatSections).map(([date, chats]) => { return ( <Section className={`section-${date}`} key={date}> <StickyHeader> <button>{date}</button> </StickyHeader> {chats.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Section> ); })} </Scrollbars> </ChatZone> ); }); export default ChatList; 이쪽 코드는 문제가 없는것같은데 희한하게 위치가 유지가 되지않고 원래처럼 쭉 올라가버립니다.. ref쪽이 문제인가요..? 혹시몰라 DirectMessage 컴포넌트도 아래에 첨부하겠습니다. import React, { useCallback, useEffect, useRef } from 'react'; import gravator from 'gravatar'; import useSWR, { mutate } from 'swr'; // swr 인피니티스크롤링 전용 메서드 import useSWRInfinite from 'swr/infinite'; import { IDM, IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import { useParams } from 'react-router'; import ChatBox from '@components/ChatBox'; import { Container, Header } from '@pages/DirectMessage/style'; import ChatList from '@components/ChatList'; import useInput from '@hooks/useInput'; import axios from 'axios'; import makeSection from '@utils/makeSection'; import Scrollbars from 'react-custom-scrollbars'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`http://localhost:3095/api/workspaces/${workspace}/users/${id}`, fetcher); // 내정보 const { data: myData } = useSWR(`http://localhost:3095/api/users`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); // 과거 채팅리스트에서 채팅을 치면 최신목록으로 바로 스크롤을 내려줄려면 ref를 // 이 컴포넌트에서 props로 내려줘야하기 때문에 forwardRef를 사용해서 props로 넘겨준다 // 💡 HTML 엘리먼트가 아닌 React 컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef()라는 함수를 사용해야 합니다 const scrollbarRef = useRef<Scrollbars>(null); // 채팅 받아오는곳 (setSize : 페이지수를 바꿔줌) // useSWRInfinite를 쓰면 [{id:1},{id:2},{id:3},{id:4}] 1차원배열이 [[{id:1},{id:2}],[{id:3},{id:4}]] 2차원배열이 된다. const { data: chatData, mutate: mutateChat, setSize, } = useSWRInfinite<IDM[]>( (index) => `http://localhost:3095/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, ); // 데이터 40 개중에 20개씩 사져오면 첫번째페이지부터 20 + 20 + 0 세번째 페이지 0 이되면 isEmpty, isReachingEnd는 true가 됨 // 반대의 상황에서 데이터가 45개면 20 + 20 + 5 isEmpty는 0이 아니라서 false isReachingEnd는 여전히 데이터 가져옴 const isEmpty = chatData?.[0]?.length === 0; const isReachingEnd = isEmpty || (chatData && chatData[chatData.length - 1]?.length < 20) || false; const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim() && chatData) { const savedChat = chat; // 💡 옵티미스틱 UI // 서버쪽에 다녀오지 않아도 성공해서 데이터가 있는거처럼 보이게 미리 만듦 mutateChat((prevChatData) => { // infinite 스크롤링은 2차원 배열이다. prevChatData?.[0].unshift({ // unshift : 앞쪽에 추가 id: (chatData[0][0]?.id || 0) + 1, content: savedChat, SenderId: myData.id, Sender: myData, ReceiverId: userData.id, Receiver: userData, createdAt : new Date(), }); return prevChatData; },false) // 옵티미스틱 UI 할땐 이부분이 항상 false .then(()=>{ setChat(''); // 버튼클릭 시 기존 채팅지우기 scrollbarRef.current?.scrollToBottom(); // 채팅 첬을때 맨 아래로 }) axios .post( `http://localhost:3095/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }, { withCredentials: true, }, ) .then(() => { mutateChat(); // SWR에서 데이터를 다시 불러와서 캐시를 갱신하는 역할을 합니다. }) .catch(() => { console.error; }); } }, [chat, chatData, myData, userData, workspace, id], ); // (채팅이 최신것을 아래에 두기 위함) = 기존것 데이터를두고 새 데이터를 뒤집어서 출력 / flat() 배열을 1차원 배열로 만들어줌 const chatSections = makeSection(chatData ? [...chatData].flat().reverse() : []); // 로딩 시 스크롤바 제일 아래로 useEffect(()=>{ if(chatData?.length === 1){ // 채팅 데이터가 있어서 불러온 경우 scrollbarRef.current?.scrollToBottom(); // 가장 아래쪽으로 내려줌 } },[chatData]) // 로딩 if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravator.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname}></img> <span>{userData.nickname}</span> </Header> {/* 컴포넌트 위치를 미리 지정해도 좋다. */} {/* 전역 상태관리 라이브러리를 사용해도 컴포넌트상황에따라 props 로 넘겨줌*/} <ChatList scrollRef={scrollbarRef} chatSections={chatSections} setSize={setSize} isEmpty={isEmpty} isReachingEnd={isReachingEnd} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage;
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
강의와 다르게 도메인을 가면 저는 위 화면이 나옵니다. learn react 라는 화면이 안뜨고 이런 화면이 뜨는 이유는 뭘까요..
