173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
인프런 아이디 : rhdxoals@gmail.com 인프런 이메일 : rhdxoals@gmail.com 깃헙 아이디 : livemehere 깃헙 Username : livemehere
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman에서 우측 상단의 no environment를 클릭해도 다른 항목이 나오지 않습니다.
해결됨
코어 자바스크립트
이전에 호이스팅을배웠을때는 선언부를 맨위로 끌어올려서 코드를 실행시키는 개념이라고 배웠거든요. 강사님이 작성하신 책과 강의의 내용으로 정리를 해보면, 자바 스크립트 엔진이 소스 코드의 environmentRecord를 수집. 코드를 실행하기전에는 해당 환경의 코드 식별자들을 전부 알고있는 상황. 이 때, 자바스크립트 엔진은 실행컨텍스트 실행 시, 모든 식별자 정보를 알기때문에, 실행하는 소스코드 상 아래에 있는 실행컨텍스트가 실행이 가능하다. 이때, 식별자 정보는 실제로 실행컨텍스트 맨위로 끌어올려지지않지만, Hoisting이 발생한다. 이렇게 이해를 해도 괜찮을까요? 처음부터 실행 컨텍스트를 잡고 호이스팅을 다시 이해하려니 두서없이 정리가 된거같은데, 한번만 봐주시면 감사하겠습니다.
미해결
따라하며 배우는 리액트 테스트 [2023.11 업데이트]
혹시나 에러가 나신다면, package.json폴더에 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"", "eject": "react-scripts eject" }, 로 변경 후 test를 종료 후 재 실행시키면 됩니다. 방법은 test에서 직접 스크립트 수정하거나 jest.config.js파일을 만들어 moduleNameMapper을 사용하시면 됩니다! 참고 https://stackoverflow.com/questions/73958968/cannot-use-import-statement-outside-a-module-with-axios https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring
미해결
인터랙티브 개발 실무 끝장내기 [역량 강화편]
현재 강의에서 사용중인 트윈맥스 CDN은 무료 버전이라고 하셨는데, 그럼 웹 에이전시 실무에서 해당 라이브러리를 라이센스 구매없이 프로젝트에 사용해도 문제없을까요? 또한 GSAP최신버전을 사용해도 저작권 문제없을까요? GSAP 라이센스 관련 문서에는 ( https://greensock.com/standard-license/ ) "고객이 사이트/제품을 만들기 위해 일회성 비용을 지불하는 경우에는 완전히 문제가 없으며 "무료" 라이선스에 따라 자격이 부여 됩니다. " 라는 문구가 있어서 문제가 없을것 같습니다만..... 오랫동안 실무에서 사용해오신 선생님의 생각을 여쭙고 싶습니다. 답변 주시면 감사하겠습니다!
미해결
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;
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가 혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요 그것도 이렇게 적용이 안 되게 보이네요... 뭐가 문제일까요? ㅜ.ㅜ
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
인프런 아이디 : jeongwon.been@gmail.com 인프런 이메일 : jeongwon.been@gmail.com 깃헙 아이디 : jeongwon.been@gmail.com 깃헙 Username : jbeen0606
미해결
MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
이거는 reple 입니다. 리플 모델입니다. 이거는 댓글 입력했을때 들어오는 값이랑 맨위에 사진17번째줄 콘솔입니다. 포스트아이디가 없습니다.. 포스트 area 에서 postInfo 를 콘솔한것이 이것 이며 여기서 props.postID 를 가져오지를 못해서.. 값이 안들어가는것 같습니다. 혹시 강의가 업데이트 되거나 제가 잘못한 부분이있을까요..? PostArea.js 에서 댓글지역으로 프롭이렇게 보냈습니다 영상과같이.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
강의내용대로 쭉 따라가면서 askcomapny경로에서 settings 폴더를생성 cd askcompany로 경로 이동후 git add .를 한뒤 git mv settings.py settings/common.py 로 파일이동 그 상태로 runserver를 해봤더니 CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False. 오류가 뜸 원래 경로에 settings.py파일을 다시 만들어 보고 runserver를 해봤더니 오류가 사라짐 옮기는 과정에서 문제가 있는건지는 모르겠네요 DEBUG = True 이고 ALLOWED_HOSTS = ['*'] 설정까지도 해봤는데 왜 저런 오류가 뜨는걸까요?
해결됨
코어 자바스크립트
데이터를 변경시에 기존 주솟값(5004)에 있는 데이터를 변경하는것이 아닌 새로운 주솟값(5005)에 변경하고자 하는 값을 별개의 문자열로 지정하는 것은 이해를 했습니다. 그 다음에 헷갈리는것이 새로운 주소값은 변수 영역에서 a 라는 식별자를 가진 주소값을 찾아서 변수영역에 지정되어있는 값을 새로 할당한 주솟값으로 변경 한다고 이해를 하면 될까요??
미해결
만들면서 배우는 리액트 : 기초
안녕하세요~ 수업 잘 듣고 있습니다. 처음 react, reactdom script 및 babel script 를 추가하고 서버를 보니 ReactDom 오류가 나네요. 추가해야 할 부분이 있을까요? Uncaught ReferenceError: ReactDom is not defined at <anonymous>:13:1 at i (babel.min.js:24:29679) at r (babel.min.js:24:30188) at o (babel.min.js:24:30596) at u (babel.min.js:24:30969) at f (babel.min.js:1:1812) at babel.min.js:1:6287
미해결
Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
인프런 아이디 : sswsjw 인프런 이메일 : sswsjw@naver.com 깃헙 아이디: s48005623@gmail.com 깃헙 Username: Seosang1
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 94강 13:55초를 보면 콘솔 창에 next-dev.js?3515:20 Invalid href passed to next/router: /u//r/ test02/043hzrH/test44 , repeated forward-slashes (//) or backslashes \ are not valid in the hre 와 같은 에러가 떠있습니다. [username].tsx에서 <Link href={`/u/${comment.post?.url}`}> 을 불러 올때 url에 '/r/test02/043hzrH/test44'가 담겨 오면서 슬래쉬(//)가 2번 입력되어 생기는 에러 같습니다. 제공된 소스코드에도 위와 같이 입력되어 있어요. 아래와 같이 '/'를 지우고 링크를 href에 넣어주면 에러가 사라지는데 이게 맞을까요? <Link href={`/u${comment.post?.url}`}>
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 백엔드 entities에서 Post, Sub, Comment는 아래와 같이 import Post from "../entities/Post" import Sub from "../entities/Sub" import Comment from "../entities/Comment" 처럼 불러올 수 있게 작성하셨는데 User만 import {User} from "../entities/User" 중괄호를 넣어서 불러와야 합니다. export default class User extends BaseEntity 가 아닌 export class User extends BaseEntity 로 작성한 이유가 있을까요?
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
안녕하세요 제로초님 document.querySelectAll(buttons)을 비주얼 스투디오 코드에 넣었을 떄, 유사 배열이 console에서 출력되지 않습니다 (제로초님)코드를 따라서 입력했는데도 불구하고 이렇게 사진처럼 나옵니다).
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 81강을 수강중입니다. src/pages/r/[slug]/[identifier]/[slug].tsx 작성중 {post.voteScore} 를 콘솔로 찍어보면 undefined가 나와서 페이지에 노출되지 않습니다. 타입을 voteScore? : number 로 한게 문제인가해서 ?를 지워보았지만, 증상은 동일했고 api를 불러오면서 voteScore는 0으로 초기화되지 않은채 받는것 같아요. 그러던 중 백엔드의 Post.ts를 살펴보았더니 get voteScore()를 get V oteScore()로 오타 아닌 오타를 가져가서 초기화 되지 않았단걸 알아내었습니다. 누군가에게 도움이 되시길 바라며
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
안녕하세요 선생님, 정말 좋은 강의 감사합니다. 선생님이 설명해주신 폰트 사이즈 줄이기 (Unicode Range) 를 테스트 해보려고 했습니다. 제가 진행한 Nextjs, React 두가지 프로젝트 환경에서 Unicode range없이 네트워크를 살펴보았는데요, 알아서 그 페이지에서 사용하는 폰트만 불러오는 것을 확인했습니다. 혹시 react 프로젝트는 Unicode-range 를 해주지도 않았는데 알아서 최적화를 해주는 것인가요...??.....
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
안녕하세요 선생님. 이번에 폰트 포멧에 대해서 공부를 해봤는데, woff2 가 인터넷 익스플로러에서 사용불가하다고 알고 있었는데 사용이 가능한가요?! https://caniuse.com/?search=woff2
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
3-3 이미지 지연 로딩을 하면서 밑에 TwoColumns의 이미지도 지연 로딩하는걸 적용했습니다. 강사님 코드와 비교하고 싶은데 어디에서 코드를 확인할 수 있나요?
