173만명의 커뮤니티!! 함께 토론해봐요.
미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
import {path } from "path"; export const module = { mode : " development " , entry : { main : " ./src/app.js " , // 번들 시작점. }, output : { filename : " [name].js " , // name자리에 위의 main이 들어온다. path : path . resolve ( " ./dist " ) , }, }; 왜 config파일을 설정할떄는 위처럼 import,export 문법을 사용할 수 없는건가요..?
미해결
Slack 클론 코딩[실시간 채팅 with React]
채팅방에서 새로운 데이터를 입력한 후, 스크롤을 위로 올려 다음 페이지를 로드하면 다음 페이지 값의 일부가 사라져서 출력되는 것 같습니다. 사진에서 5를 새로 입력했습니다. 그리고 나서 위에 닿을 때까지 천천히 스크롤하여 새로운 페이지를 불러오면 8 다음에 있어야 할 9를 불러오지 못했습니다. 테스트는 강좌 깃헙의 front 폴더와 back 폴더에 있는 코드로 진행 했습니다. 버그인 것인지, 페이지를 불러오는 과정에서 문제가 생긴건지 궁금합니다ㅠㅠ..
해결됨
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 현재 "DM채팅하기" 강의를 진행하기 전에도 시크릿모드로 두개를 띄워서 해보면 지금도 채팅 통신이 가능한데 이상태에선 계속 서버로 보냈다가 다시 가져오고 그런 상태이기 때문에 소켓통신으로 바꾸려고 socket.on 을 추가하는 것인가요? 그러니까 useEffect(()=>socket?.on('dm', onMessage) 이부분을 하는 이유가 http프로토콜을 소켓 프로토콜로 바꾸는 개념인가요? 동작 방식이 좀 헷갈리네요.. 제가 이해한 부분이 맞을까요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
App 파트에서 workspace다음 와일드카드/* 를 표시해주셔야 합니다 workspace 안에서는 path에 /workspace/:workspace를 쓰면 App에서 workspace/:workspace/* 가 있어서 두개가 중복되기때문에 바로 /channel/: channel 로 path를 작성하시면 됩니다.
미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack 5 부터는 url-loader가 아닌 asset/inline을 사용한다는데 asset/inline에서 로더를 실행할 파일 크기 제한을 어떻게 하나요? url-loader에서 limit 옵션을 asset/inline에서는 어떻게 주는지 궁금하네요!
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요! 지금까지는 문제 없이 잘 진행하고 있었으나 계속 찾아보고, alecture 폴더 내에 있는 소스코드와 비교를 해보아도 어떤 코드가 문제인지 모르겠어서 질문 글을 남기게 되었습니다. 해당 섹션 마지막에서 액시오스 코드를 작성하고 백엔드에 워크 스페이스를 생성하도록 요청하는 부분이 있는데요, const onCreateWorkspace = useCallback((e) => { console.log('ok'); e.preventDefault(); console.log(newWorkspace); if (!newWorkspace || !newWorkspace.trim()) return; console.log('b'); if (!newUrl || !newUrl.trim()) return; console.log('c'); axios.post('/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ).then((response) => { revalidate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }).catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, []); 워크스페이스 이름과, 워크스페이스 url 을 넣고 생성하기 버튼을 누르면 반응이 없어서 위 코드처럼 console.log 를 찍어서 확인해보니 newWorkspace 에 아무런 값이 담기지가 않고 있습니다. 해당 소스코드 및 라인 : https://github.com/Kuass/sleact/blob/master/setting/ts/layouts/Workspace/index.tsx#L32 입니다. onCreateWorkspace = useCallback 에 event 객체도 콘솔에 찍어서 보았으나 값은 정상적으로 있는데.. 왜 이럴까요 강사님 ㅠㅠ..
미해결
프론트엔드 개발자를 위한 웹팩
HtmlWebpackPlugin이 css파일과 js파일에 대해서 link태그와 script태그 부분을 자동화한다는 점은 이해했습니다. 그렇다면 배포하고 싶은 html파일이 5개가 있을 때 이 5개의 html파일들을 각각 new HtmlWebpackPlugin의 객체로 설정해야 css파일 및 js파일들에 대해서 자동으로 설정해주나요? 좋은강의 감사합니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님! 그라바타 적용하다가 data.email 이 새로고침 시에 오류가 나서 질문 드립니다.!!! 먼저, 오류나 경고 메시지들 보고 라우터 문제인가 싶어서 (라우터 v6 사용 중입니다. ) 라우터 관련해서만 구글링 하다가, data.email가 아닌 data만 사용하면 새로고침 시에도 문제 없다는 걸 알았는데요.. data를 콘솔로 찍어보니 두번 출력이 되면서, 첫번째는 undefined로 나오고 두번째는 정상으로 나오는데data가 undefinde일 때 랜더링이 되서 그런 건가?? 하는 생각이 들긴했는데 이게 왜 저렇게 되는 건지 navigate로 페이지 이동되면서 저렇게 되는 건지 data가 언디파인드 인데도 login으로 페이지도 안넘어가는 상황입니다 에러 원인에 대한 판단이 잘 안서서 해결을 못하고 있습니다ㅠㅠ 혹시 해결 방향을 잡아주실 수 있을까요??? < 컴포넌트에서 data.email이 사용될 때 새로고침 > < data만 사용할 때 새로고침 > 제 코드 입니다! import axios from "axios" ; import React , { FC , useCallback , useEffect } from "react" ; import { useNavigate } from "react-router" ; import useSWR from "swr" ; import fetcher from "@src/utils/fetcher" ; import { Channels , Chats , Header , MenuScroll , ProfileImg , RightMenu , WorkspaceName , Workspaces , WorkspaceWrapper , } from "./style" ; import gravatar from "gravatar" ; const Workspace : FC = ({ children }) => { const { data , error , mutate } = useSWR ( "http://localhost:3095/api/users" , fetcher , { dedupingInterval : 100000 , loadingTimeout : 900000 , } ); const onLogout = useCallback (() => { axios . post ( "http://localhost:3095/api/users/logout" , null , { withCredentials : true , }) . then (() => mutate ( false , false )); }, []); const navigate = useNavigate (); if ( ! data || data === undefined ) { navigate ( "/login" ); } console . log ( "@@@data" , data ); return ( <> < Header > < RightMenu > < span > { /* <ProfileImg src={gravatar.url(data, { s: "28px", d: "retro" })} alt={data} ></ProfileImg> */ } </ span > </ RightMenu > </ Header > < button onClick ={ onLogout } > 로그아웃 </ button > < WorkspaceWrapper > < Workspaces > test </ Workspaces > < Channels > < WorkspaceName > Clone </ WorkspaceName > < MenuScroll > MenuScroll </ MenuScroll > </ Channels > < Chats > Chats </ Chats > </ WorkspaceWrapper > { children } </> ); }; export default Workspace ;
미해결
Slack 클론 코딩[실시간 채팅 with React]
자꾸 이와 같은 에러 가뜹니다. react-router-dom에 Switch와 Redirect을 export없다고 합니다....
미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
영상에서 개발모드와 프로덕션 모드를 각각 빌드하면 모드별로 파일이 다르게 빌드되는데 개발모드에서 아래 두개를 사용한다 하셨고 namedChunksPlugin, namedModulePlugin 프로덕션모드에서 FlagDependecyPlugin, FlagIncludedChunkPlugin.... 등등을 사용한다고 했는데 제가 직접 설치하고 설정한것이 아닌데도 자동으로 설정이 되어있는건가요?
미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
before함수 에러 나시는분들 업그레이드 되면서 onBeforeSetupMiddleware로 변경되었습니다. 참고하세요
미해결
Slack 클론 코딩[실시간 채팅 with React]
이것저것 다 시도해보아도 계속 이 에러가 납니다.. 노드 버전의 문제일까요? 현재 12.20 버전쓰고있습니다 ㅠㅠ
미해결
Slack 클론 코딩[실시간 채팅 with React]
헉 제로초님 저는 서버 강의는 안듣고 클라이언트만 듣고 배포하고 싶거든요 포폴로 사용하려고요 클라이언트만 따로 배포 할 방법은 없을까요?...
해결됨
Slack 클론 코딩[실시간 채팅 with React]
깃에서 클론받아서 강의를 진행하고 있는데 front 뿐만 아니라 sleact 폴더에도 전부 만들어져 있는데 어떤식으로 진행해야하나요 초반 셋팅 부분 빼고는 다 삭제 후 만들면 되겟죠..?
미해결
Slack 클론 코딩[실시간 채팅 with React]
swr 최신버전에서 revalidate가 삭제 된 것 같아서 질문드립니다! 제로초님의 강의를 듣고, 제가 이해한 것은, 기본 swr설정으로 사용을 하면, 지속적으로 데이터를 요청하게 되는데, swr에서 revalidate를 설정해주고, onSubmit의 post의 then에 reavalidate함수를 넣어주면, 그 함수가 실행 되었을 때부터 swr이 작동한다고 이해했는데 그게 맞을지 여쭤보고 싶습니다. swr 공식문서를 읽어보긴 했는데 확실히 이해가 되지 않아서요.. 조건부로 실행시키기 위해서, useSWR()에서 조건을 주어, 조건에 따라 false일 때 url의 위치에 null 안에 조건을 넣어주는 방식으로 공식 문서에 적혀있는데, 이렇게 되면 useState로 조건을 하나 만들어주어야 할까요? 해당 방법이 맞는지와 올바른 코드 예시가 있다면 알려주시면 감사하겠습니다!! ㅠ
미해결
Slack 클론 코딩[실시간 채팅 with React]
강의에서, setShowCreateChannelModal props의 타입을 (flag:boolean)=>void;라고 지정하셨는데, setState의 경우 기본적으로는 Dispatch<setStateAction<S>> 이런식이었던 것 같은데 이렇게 안쓰고 그냥 저렇게 쓸 수 있는 건가요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
이전에 비슷한 문제를 겪은 글이 있었는데 해결되지 않아서 글을 작성하게 되었습니다. InviteChannelModal 컴포넌트에서 보내는 GET 요청 const { revalidate : revalidateMembers } = useSWR ( userData ? `/api/workspaces/ ${ workspace } /channels/ ${ channel } /members` : null , fetcher , ); 위 코드의 실행되는 결과로 다음과 같은 에러가 발생합니다. const { workspace , channel } = useParams (); InviteChannelModal 컴포넌트에서 콘솔에 workspace와 channel을 찍어보니 channel이 undefined 값으로 나오는데 useParams를 사용하면 현재 URL에서 라우터에서 지정한 콜론 뒤의 키에 해당하는 값을 반환하는 것으로 알고 있습니다. 로그인 후 "http://localhost:3090/workspace/sleact/channel/일반" 주소로 이동하기에 channel 값이 일반으로 출력되기를 예상합니다만.. Workspace layouts 에서 라우터 설정을 했음에도 매칭되는 channel 값을 받아오지 못하기에 원인을 알 수 없어 여쭤봅니다. < Switch > < Route path = "/workspace/:workspace/channel/:channel" component = { Channel } /> < Route path = "/workspace/:workspace/dm/:id" component = { DirectMessage } /> </ Switch >
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요! 저는 이번 강의를 완강한 취준생입니다! 다름이 아니라 이번 강의를 수강하고 커리큘럼에 따라 다음 강의(웹팩)를 진행하려고하는데 그런데 캡틴판교님께서 새로운 커리큘럼(Vue + TypeScript)를 만드신거 보고 고민이 되어 질문드립니다! 1. 웹팩하고 타입스크립트의 차이 또는 관계가 무엇인가요?? 2. 실무에서는 웹팩과 타입스크립트 어느것이 더 많이 쓰이거나 중요할까요? 3. 돈과 시간이 허용되는 범위에서 웹팩, 타입스크립트 강의 모두 수강하게 된다면 어떻게 수강하는 게 나을까요?
해결됨
웹 게임을 만들며 배우는 Vue
강좌 코드랑 똑같고, 버전도 webpack4, vue2.6, compiler도 2.6 등등 다 맞춰줬는데도 화면엔 아무것도 그려주지 않아서 당황스럽네요. visual studio code 쓰고 있고, live server (port 5500) 사용한게 문제가 된걸려나요??
해결됨
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 저는 웹팩 소스는 복붙하고 패키지를 직접 하나씩 설치해보았는데 빌드나 실행시 에러가 나서 webpack-dev-server 가 4.0.0 인걸 지우고 @ 3.11.2로 다시설치하니까 되더라고요. 원래 이렇게 버전하나때문에 에러가 잘 발생하나요? 그리고 setting/ts 그대로 빌드해보면 저는 이건 에러는 아니고 경고지만 이런 세가지 경고 들이 뜨는데 원래 이런건가요?? 상관없는건가요?
