174만명의 커뮤니티!! 함께 토론해봐요.
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다) - 이외의 문의등은 평생강의이므로 양해를 부탁드립니다 - 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다 - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기 7 6분 58초 여기서 화살표 아이콘이 화면에 안 나타나요. 1번 <i class="fas fa-chevron-circle-left slide-prev"></i> 2번 <i class="fas fa-circle-chevron-right slide-next"></i> 1번은 강사님 화면을 보고 그대로 친 건데 이건 화면에 나타납니다. 근데 2번은 제가 직접 fontawesome에서 찾은 아이콘의 코드를 넣은 건데 화면에 안 나타나요. fontawesome에서 html copy code snippet을 붙여 넣은 것도 화면에 안 나타나고 제가 검사창에서 직접 아이콘 부분 코드를 복붙한 것도 안 나타납니다. 업무자동화, 데이터 분석 등의 아이콘도 처음에 제가 직접 fontawesome에서 html 코드 스니펫을 복붙한 건 안 나타났는데 검사 창에서 코드를 복사하니 나타났거든요. 그게 강사님 코드랑 똑같더라고요. 근데 화살표 아이콘은 강사님이랑 똑같이 코드를 치지 않으면 화면에 나타나질 않아서 제가 아이콘을 바꾸고 싶을 땐 어떻게 적용해야 하는지 알려주세요. 지금까지 작성한 전체 코드입니다. index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>잔재미코딩</title> <meta name="description" content="잔재미코딩 온라인 강의 리스트" /> <meta name="keywords" content="Online Lecture" /> <meta name="author" content="Dave Lee" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta property="og:type" content="website" /> <meta property="og:title" content="잔재미코딩" /> <meta property="og:description" content="잔재미코딩 온라인 강의 리스트" /> <meta property="og:image" content="img/fun-coding-mark.png" /> <meta property="og:url" content="https://www.fun-coding.org" /> <meta property="og:site_name" content="잔재미코딩" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="잔재미코딩" /> <meta name="twitter:description" content="잔재미코딩 온라인 강의 리스트" /> <meta name="twitter:image" content="img/fun-coding-mark.png" /> <meta name="twitter:url" content="https://www.fun-coding.org" /> <meta name="twitter:creator" content="Dave Lee" /> <link rel="stylesheet" href="css/styles.css" /> <link rel="icon" href="img/fun-coding.ico" /> <link rel="apple-touch-icon" href="img/fun-coding.ico" /> <link rel="shortcut icon" tyle="image/x-icon" href="img/fun-coding.ico" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> <script src="https://kit.fontawesome.com/f1def33959.js" crossorigin="anonymous" ></script> <link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <header> <div class="inner"> <div class="head-container"> <div class="head-brand"> <a href="https://www.fun-coding.org">잔재미코딩</a> </div> <div class="head-blog"> <a href="https://www.fun-coding.org/daveblog.html" >잔재미코딩 블로그 모음</a > </div> </div> </div> </header> <section class="main"> <div class="main-container"> <div class="inner"> <div class="title-container"> <div class="title">광고보다 강의에 집중합니다</div> <div class="message"> 전자책보다 좋은 자료와 현업의 경험을 함께<br /> 검증된 온라인 강의를<br /> 검증된 온라인 플랫폼에서 제공합니다. </div> </div> </div> </div> </section> <section> <div class="inner"> <div class="skill-container"> <div class="skill"> <i class="fab fa-python skill-icon python-style"></i> <div class="skill-title"> <div class="skill-name">업무 자동화</div> <div class="skill-usage">크롤링/자동매매</div> </div> </div> <div class="skill"> <i class="fas fa-chart-bar skill-icon analysis-style"></i> <div class="skill-title"> <div class="skill-name">데이터 분석</div> <div class="skill-usage">데이터 분석</div> </div> </div> <div class="skill"> <i class="fab fa-app-store-ios skill-icon ai-style"></i> <div class="skill-title"> <div class="skill-name">AI</div> <div class="skill-usage">인공지능 활용</div> </div> </div> <div class="skill"> <i class="fab fa-vuejs skill-icon vue-style"></i> <div class="skill-title"> <div class="skill-name">풀스택</div> <div class="skill-usage">웹/앱 서비스</div> </div> </div> </div> </div> </section> <section> <div class="inner"> <div class="roadmap-container"> <div class="roadmap-title-container"> <div class="roadmap-title">잔재미코딩 관련 블로그 및 서적</div> <div class="arrow-container"> <i class="fas fa-chevron-circle-left slide-prev"></i> <i class="fas fa-circle-chevron-right slide-next"></i> </div> </div> <div class="class-list-container"></div> </div> </div> </section> <footer></footer> </body> </html> style.css * { box-sizing: border-box; } body { margin: 0 auto; color: #3f464d; font-family: "Spoqa Han Sans Neo", "Sans-serif"; } a { all: unset; } a:link { text-decoration: none; color: #3f464d; } a:visited { text-decoration: none; color: #3f464d; } a:active { text-decoration: none; color: #3f464d; } a:hover { text-decoration: none; color: #3f464d; } .inner { width: 100%; height: 100%; margin: 0 auto; padding: 0 2rem; } header { width: 100%; height: 60px; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 1000; } .head-container { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; } .head-container .head-brand { font-weight: bold; font-size: 1.2rem; } .head-container .head-brand a:hover { color: #2186c4; cursor: pointer; } .head-container .head-blog { font-weight: bold; font-size: 1.2rem; } .head-container .head-blog a:hover { color: #2186c4; cursor: pointer; } section { width: 100%; background-color: #fff; position: relative; } .main { height: 360px; background-image: url("https://www.fun-coding.org/assets_lms/images/photodune-4161018-group-of-students-m.jpg"); background-size: cover; background-position: center 10%; background-repeat: no-repeat; z-index: 1; } .main-container { width: 100%; height: 100%; background-color: rgb(47, 48, 89); opacity: 0.8; z-index: 2; margin-top: 60px; } .title-container { padding-top: 100px; padding-bottom: 100px; } .title { font-size: 2rem; font-weight: bold; color: #fff; margin-bottom: 0.8rem; } .message { font-size: 1.4rem; font-weight: normal; color: #fff; line-height: 2rem; } .skill-container { width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; } .skill { width: 25%; background-color: #fff; display: flex; align-items: center; border-radius: 9px; padding: 0.5rem 1rem; margin: 0.1rem; box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2); } .skill-icon { font-size: 2.5rem; margin: 0 10px; } .skilltitle { display: flex; flex-direction: column; align-content: center; } .skill-name { font-weight: bold; color: #54536f; margin-bottom: 0.2rem; } .skill-usage { font-size: 0.9rem; color: #54536f; } .python-style { color: #2186c4; } .analysis-style { color: #ff8066; } .ai-style { color: #f7df1e; } .vue-style { color: #2e7d32; } .roadmap-container { width: 100%; margin-top: 2rem; } .roadmap-title-container { width: 100%; display: flex; justify-content: space-between; align-items: center; } .roadmap-title { font-size: 1.3rem; font-weight: bold; color: #54536f; } .slide-prev { font-size: 2rem; cursor: pointer; color: rgb(47, 48, 89); } .slide-next { font-size: 2rem; cursor: pointer; color: #cfd8dc; } @media only screen and (min-width: 1200px) { .inner { max-width: 1200px; } } @media only screen and (max-width: 980px) { .skill-container { display: none; } }
이씨오
2022-10-27T11:17:41.870Z
댓글 1
좋아요 0
조회수 445
해결됨
Spring Boot JWT Tutorial
authenticationManagerBuilder.getObject(); This object has not been built at org.springframework.security .config.annotation.AbstractSecurityBuilder.getObject( AbstractSecurityBuilder.java:51 ) ~[spring-security-config-5.7.4.jar:5.7.4] 왜그러는걸까요 추가로 DaoAuthenticationProvider에서 자동으로 additionalAuthenticationChecks해줘서 String presentedPassword = authentication.getCredentials().toString(); if (!this.passwordEncoder.matches(presentedPassword, userDetails.getPassword())) { this.logger.debug("Failed to authenticate since password does not match stored value"); throw new BadCredentialsException(this.messages .getMessage("AbstractUserDetailsAuthenticationProvider.badCredentials", "Bad credentials")); } 패스워드를 체크할 수 있다는 글을 보았는데 확인해보니 deprecation이 되어있습니다. 사용하지 않는게 좋나요?
2022-10-27T11:07:38.871Z
댓글 1
좋아요 0
조회수 523
미해결
[아파치 카프카 애플리케이션 프로그래밍] 개념부터 컨슈머, 프로듀서, 커넥트, 스트림즈까지!
카프카 스트림즈에서 에러 발생 시 commit이 어떻게 진행되는지 궁금합니다 (카프카 스트림즈는 auto.commit 설정을 변경할 수 없는걸로 이해하고 있습니다 혹시 잘못 이해하고 있다면 말씀 부탁드립니다~) 에러 핸들링 클래스 리턴 타입이 각각 FAIL, CONTIUNE 일 때 FAIL이면 커밋 X, CONTINUE이면 커밋 O 맞을까요?
안티푸라민
2022-10-27T10:44:55.787Z
댓글 1
좋아요 0
조회수 426
미해결
10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
안녕하세요 큰돌님 split_debug 를 보면서 궁금한 점이 생겼는데요 while ((pos = input.find(delimiter)) != string::npos) { longlong pos = input.find(delimiter); cout << "POS : " << pos << '\n'; if (pos == string::npos)break; token = input.substr(0, pos); ret.push_back(token); input.erase(0, pos + delimiter.length()); } ret.push_back(input); return ret; while문의 조건으로 (pos = input.find(delimiter)) != string::npos 가 있는데 if(pos == string::npos) break 를 하는 이유가 궁금합니다.
유재형
2022-10-27T09:54:24.173Z
댓글 1
좋아요 0
조회수 193
해결됨
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
[질문 내용] 안녕하세요 강의를 보다가 ErrorPage객체를 참조하는 주체가 누구인 지 궁금해서 질문 올리게 되었습니다! 예외가 발생했을 때 WAS까지 넘어오면 WAS가 ErrorPage 객체를 참조해서 에러페이지에 대한 재요청을 보내는 것인가요 아니면 WAS가 DispatcherType을 Error로 해서 재요청을 보내면 프론트 컨트롤러에서 ErrorPage를 참조해서 Controller를 호출하는 건가요?
공부용
2022-10-27T09:37:21.484Z
댓글 1
좋아요 0
조회수 434
미해결
자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
미로탐색(DFS) 문제 풀이중 DFS함수내에 if(nx>=1 && nx<=7 && ny>=1 && ny<=7 && board[nx][ny]==0) 가 있는데 if(board[nx][ny]==0 && nx>=1 && nx<=7 && ny>=1 && ny<=7) 로 변경하면 범위오류가 발생합니다 앤드조건임에도 순서를 고려해야할까요..
김도엽
2022-10-27T09:33:16.677Z
댓글 1
좋아요 0
조회수 218
해결됨
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 안녕하세요. 햄버거 메뉴 만들 때 label에 position: relative label span 에 position: absolute 이렇게 포지션값을 주었는데, 사이드바 만들면서 label의 position: relative 를 absolute로 바꿔주게 되는데 그럼 label span 의 position: absolute 의 relative는 무엇이 되는 건가요?? label의 포지션을 앱솔루트로 바꿨는데도, label span에는 영향이 없는 이유가 궁금합니다 label[for=trigger] { /* border: 1px solid red; */ width: 30px; height: 20px; display: block; position: absolute; cursor: pointer; right: 10px; top: 50%; transform: translateY(-50%); transition: 0.5s; } label[for=trigger] span { position: absolute; height: 2px; background-color: #000; width: 100%; left: 0; transition: 0.3s; } /* sidebar */ .sidebar { background-color: #000; width: 300px; height: 100vh; position: fixed; right: -300px; transition: 0.5s; }
녜녜
2022-10-27T09:05:04.389Z
댓글 2
좋아요 1
조회수 368
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
https://drive.google.com/file/d/19kE1MqjQqEW--lxC_1x8EprFxsnAtWRB/view?usp=sharing 주문 목록까지는 나오는데 ORDER로 해놓고 검색을 하면 이렇게 파싱이 안됩니다. 경로도 맞는데 어디서 문제가 있는지 모르겠습니다. 거의 다왔는데 마지막에 애먹네요 ㅠㅠ
spring java spring-boot JPA 웹앱
ko
2022-10-27T09:03:01.254Z
댓글 2
좋아요 0
조회수 790
미해결
MySQL IN 절 안에 있는 순서대로 정렬하기 SELECT * FROM TABLE WHERE KEY IN (2, 1, 3) ORDER BY FIELD(KEY, 1, 2, 3) ORDER BY FIELD 이 기능이 jpa에도 있나요 ??
김준엽
2022-10-27T08:36:26.709Z
댓글 0
좋아요 0
조회수 306
미해결
[리뉴얼] React로 NodeBird SNS 만들기
infinite scroll을 하다가 게시글을 누르면 해당 게시글로 이동하고, 뒤로가기를 누르면 원래 보던 scroll 위치로 이동하도록 만들고 싶습니다. 마치 인스타그램 게시글들을 보다가 프로필을 누르면 프로필 페이지로 이동하고 뒤로가기를 누르면 원래 보던 위치로 돌아가는 것처럼 구현하고 싶습니다. 시도한 방법 scroll 위치는 localStorage를 이용해서 저장했습니다. 문제는 게시글들인데 게시물들은 아래와 같이 ssr을 이용해서 미리 불러왔습니다. export const getServerSideProps = wrapper.getServerSideProps( (store) => async ({ req, query, resolvedUrl, res }) => { // login const cookie = req.headers?.cookie; axios.defaults.headers.Cookie = ""; if (cookie) { axios.defaults.headers.Cookie = cookie; } store.dispatch({ type: CHECK_LOGIN_REQUEST, }); // board if ( store.getState().board.previousUrl === null || store.getState().board.previousUrlType !== query.type ) { store.dispatch({ type: SAVE_PREVIOUS_URL_TYPE, data: query.type, }); store.dispatch({ type: SAVED_POSTS_INITIALIZE, }); store.dispatch({ type: LOAD_BOARD_REQUEST, data: { type: resolvedUrl }, }); } store.dispatch(END); await store.sagaTask.toPromise(); } ); 게시글 페이지로 이동하면 지금까지 본 게시글들이 사라지고, 다시 돌아오면 load되면서 scrollHeight가 localStorage에 저장된 scroll 위치보다 작아지면서 이동하지 않는 현상이 발생합니다. 어떻게 하면 되는지 조언 부탁드립니다.
Next.js react express nodejs redux
바스니카
2022-10-27T08:14:52.078Z
댓글 4
좋아요 1
조회수 2794
미해결
자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
응급실 문제를 풀고 강의를 듣고 왔는데요 큐에서는 왜 get 매서드를 지원하지 않나요? FIFO에 어긋나나요? stack의 경우 vector를 확장해서 쓰기때문에 lifo에 어긋난다라는 글을 본적이 있어서 검색해보니 lifo는 삽입과 삭제의 경우에 해당하는거 같아서요 조회에는 해당하지 않는거 같은데 해당하나요? 아 물론 그냥 얘네가 그렇게 제공을 했다!! 하는거면 그런거겠지만요. 뭔가 그 개념적인? 이유가 있는지 궁금합니다 왜 궁금하냐면!! 어떻게보면 api?에서 제공하지 않는 get을 class를 만들어 편법?적으로 접근하신거같아서 입니다!! 조금 무례한 질문 죄송합니다
영환
2022-10-27T07:54:06.652Z
댓글 1
좋아요 0
조회수 448
해결됨
실전! 코틀린과 스프링 부트로 도서관리 애플리케이션 개발하기 (Java 프로젝트 리팩토링)
안녕하세요 강사님. build.gradle을 build.gradle.kts로 변경하고 QuerydslConfig 를 확인해보니 @Configuration data class QuerydslConfig( private val em: EntityManager ) { @Bean fun querydsl(): JPAQueryFactory { return JPAQueryFactory(em) } } -> em 부분에 빨간색 밑줄이 뜨고 Could not autowire. No beans of 'EntityManager' type found. 에러가 뜨더라구요. 어떤 부분을 변경해야 빨간 밑줄이 삭제될까요?
spring-boot kotlin java spring refactoring
하하하
2022-10-27T07:42:37.403Z
댓글 1
좋아요 2
조회수 664
미해결
Spring Cloud로 개발하는 마이크로서비스 애플리케이션(MSA)
익숙한 내용은 강의를 보면서 코드를 따라치기 번거로워서 그런데 강의하시는 코드를 깃허브로 제공받을 수 있을까요?
Kafka msa JPA architecture spring-cloud spring-boot
khss4008
2022-10-27T07:39:49.216Z
댓글 1
좋아요 0
조회수 608
해결됨
한 방에 끝! 빅데이터분석기사 실기 작업형
predict 와 predict_proba 차이 강의자료에 짧게 있지만 잘 이해가 안되서요 자세하게 차이를 알고 싶습니다! 그리고 다중분류일때 사용하는법도 알고 싶습니다! 다중분류일때 predict_proba 를 사용해서 값이나오면 그값이 의미하는것이 무엇인지요~
mouse
2022-10-27T07:23:25.897Z
댓글 1
좋아요 0
조회수 11559
해결됨
CS 지식의 정석 | 디자인패턴 네트워크 운영체제 데이터베이스 자료구조
안녕하세요 좋은 강의 감사합니다! 디자인 패턴은 JS로만 제공되는건가요?
심야
2022-10-27T07:05:36.335Z
댓글 1
좋아요 0
조회수 324
미해결
3명이서 하나의 계정으로 관리 및 강의결제 하려고 하는데 이용방법이 있을까요?
이준수
2022-10-27T07:05:06.190Z
댓글 0
좋아요 0
조회수 483
미해결
Slack 클론 코딩[실시간 채팅 with React]
채널생성 클릭하면 channeldata.map is not a function이라고 에러가 뜨는데 channelData뿌려지는곳에 ?옵셔널도 줬고.. 아래처럼 잘 작성한것같은데 어딜 놓쳤는지 모르겠습니다. 새로고침하면 추가된 채널명이 출력됩니다. workspace import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { FC, useCallback, useState } from 'react'; import { Navigate, useParams } from 'react-router-dom'; import useSWR from 'swr'; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceModal, WorkspaceName, Workspaces, WorkspaceWrapper, } from './styles'; import gravatar from 'gravatar'; import Menu from '@components/menu'; import { Link } from 'react-router-dom'; import { IChannel, IUser, IWorkspace } from '@typings/db'; import { Button, Input, Label } from '@pages/signup/styles'; import useInput from '@hooks/useInput'; import Modal from '@components/modal'; import { toast } from 'react-toastify'; import CreateChannelModal from '@components/createChannelModal'; const Workspace: FC = ({ children }) => { const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const { data: userData, error, mutate } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000 }); const { data: channelData } = useSWR<IChannel[]>(userData ? `/api/workspaces/${workspace}/channels` : null, fetcher); if (!userData) { return <Navigate to="/login" />; } const [showUserMenu, setShowUserMenu] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); const [showWorkspaceModal, setShowWorkspaceModal] = useState(false); const [showCreateChannelModal, setShowCreateChannelModal] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); //functions const onLogout = useCallback(() => { axios .post('/api/users/logout', null, { withCredentials: true, }) .then((res) => { mutate(res.data); }); }, []); const onClickUserProfile = useCallback(() => { setShowUserMenu(!showUserMenu); }, [showUserMenu]); const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []); const onCreateWorkspace = useCallback( (e) => { e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; //trim ->띄어쓰기 하나도 통과 돼버리는걸 막는다. axios .post( '/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ) .then((res) => { mutate(res.data); setShowCreateWorkspaceModal(false); setNewWorkspace(''), setNewUrl(''); }) .catch((err) => { console.dir(err); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); setShowCreateChannelModal(false); }, []); const toggleWorkspaceModal = useCallback(() => { setShowWorkspaceModal(!showWorkspaceModal); }, [showWorkspaceModal]); const onClickAddChannel = useCallback(() => { setShowCreateChannelModal(true); }, []); return ( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && ( <Menu style={{ right: 0, top: 38 }} onCloseModal={onClickUserProfile} show={showUserMenu}> <ProfileModal> <img src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> <div> <span id="profile-name">{userData.nickname}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu> )} </span> </RightMenu> </Header> <WorkspaceWrapper> <Workspaces> {userData.Workspaces?.map((ws: IWorkspace) => { return ( <Link key={ws.id} to={`/workspace/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName onClick={toggleWorkspaceModal}>Sleact</WorkspaceName> <MenuScroll> <Menu show={showWorkspaceModal} onCloseModal={toggleWorkspaceModal} style={{ top: 95, left: 80 }}> <WorkspaceModal> <h2>Sleact</h2> {/* <button onClick={onClickInviteWorkspace}>워크스페이스에 사용자 초대</button> */} <button onClick={onClickAddChannel}>채널 만들기</button> <button onClick={onLogout}>로그아웃</button> </WorkspaceModal> </Menu> {channelData?.map((v, idx) => ( <div key={idx}>{v.name}</div> ))} </MenuScroll> </Channels> <Chats> {children}</Chats> </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} /> </Label> <Label id="workspace-url-label"> <span>워크스페이스 url</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> <CreateChannelModal show={showCreateChannelModal} onCloseModal={onCloseModal} setShowCreateChannelModal={setShowCreateChannelModal} /> </div> ); }; export default Workspace; createChannelModal import Modal from '@components/modal'; import useInput from '@hooks/useInput'; import { Button, Input, Label } from '@pages/signup/styles'; import { IChannel, IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, VFC } from 'react'; import { useParams } from 'react-router-dom'; import { toast } from 'react-toastify'; import useSWR from 'swr'; interface Props { show: boolean; onCloseModal: () => void; setShowCreateChannelModal: (flag: boolean) => void; } const CreateChannelModal: VFC<Props> = ({ show, onCloseModal, setShowCreateChannelModal }) => { const [newChannel, onChangeNewChannel, setNewChannel] = useInput(''); const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const { data: userData } = useSWR<IUser | false>(`/api/users`, fetcher); const { data: channelData, mutate } = useSWR<IChannel[]>( userData ? `/api/workspaces/${workspace}/channels` : null, fetcher, ); const onCreateChannel = useCallback( (e) => { e.preventDefault(); axios .post( `/api/workspaces/${workspace}/channels`, { name: newChannel, }, { withCredentials: true }, ) .then((res) => { setShowCreateChannelModal(false); mutate(res.data); setNewChannel(''); }) .catch((err) => { console.dir(err); toast.error(err.response?.data, { position: 'bottom-center' }); }); }, [newChannel], ); return ( <Modal show={show} onCloseModal={onCloseModal}> <form onSubmit={onCreateChannel}> <Label id="channel-label"> <span>채널</span> <Input id="channel" value={newChannel} onChange={onChangeNewChannel} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> ); }; export default CreateChannelModal;
웹팩 typescript react Socket.io babel 클론코딩
soh308
2022-10-27T06:43:36.795Z
댓글 3
좋아요 0
조회수 630
미해결
HAL, CubeMX, TrueSTUDIO를 이용한 STM32F4 무료 강좌
안녕하세요 선생님 PWM 주기 변경을 보고 가감속 테이블을 만들어서 테스트를 진행할려고 하는데 속도가 너무 빨라서 그런지 몰라서 점점 빨라지다가 동작이 멈춰버리는데 혹시 요령이나 방법을 알 수 있을까요?
백승호
2022-10-27T06:42:31.406Z
댓글 1
좋아요 0
조회수 443
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
똑같은 css파일인데 왜 다르게 나타날까요 ㅠㅠ 위가 처음에 react없이 그냥 html로만 만든거구요 아래가 react로 만든건데 같은 index.css파일인데 왜 다르게 나타날까요 ㅠㅠ
javascript nodejs react-native 머신러닝 배워볼래요? express HTML/CSS react tensorflow
thhwang
2022-10-27T06:38:58.123Z
댓글 1
좋아요 0
조회수 362
미해결
처음 만난 리액트(React)
Line 4:8: 'App' is defined but never used no-unused-vars 이러한 내용으로 에러가 뜨고 에러 라인 옆에 // eslint-disable-next-line << 주석도 달아봤는데 해결이 안됩니다..
김우람
2022-10-27T06:29:50.737Z
댓글 4
좋아요 0
조회수 479
