173만명의 커뮤니티!! 함께 토론해봐요.
미해결
실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발
강의를 새로 들을때마다 lite-server가 구동되지 않는데, 제가 git을 잘못 다루고 있는거 같습니다... 강의 열릴때 visual스튜디오 코드 연다음에 git bash에다가 git checkout -f 1-vanilla/scafolding cd 1-vanilla lite-server 을 했거든요....! 어떻게 해야 이전 강의와 연결되서 lite-server구동할수 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
windows에서 vscode에서 typescript를 사용하시다 보면 아래와 같이 delete 'cr'이라고 계속 빨간 글씨가 떠서 눈에 거슬리는 경우가 있습니다. 해결책 : eslintrc.js파일에 가셔서 아래와 같이 rules에 추가한 후 저장해 주시면 됩니다. 긁어서 eslintrc.js파일의 하단의 rules에 추가해 주세요 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ],
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
경로 설정은 잘 된거같은데 not found가 나오네요 ㅠ nginx restart도 해봤습니다. 문제가 뭘까요? https://github.com/memilmooki/FoodMap
해결됨
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 질문 있습니다. 강의에서는 SWR을 쓰시는데 공부할때는 react-query를 쓰려고 합니다. 이유는 생태계가 더 큰 라이브러리를 사용할 목적이었는데 알려주신 npm trends에 검색해보니 둘 다 비슷비슷하더라고요. SWR도 아직 많이 쓰이는 추세인가요??? 궁금한 이유는 react-query 외에도 추가로 하나의 라이브러리를 동시에 더 써볼 생각이라 추천해주시면 감사합니다. 추가로 수업 외 질문으로 유틸리티 라이브러리?를 하나 써보려고 합니다. 기존에는 fxjs를 사용 중이었습니다. npm trends를 보니 가장 많이 사용하는 라이브러리는 lodash, rxjs인 것 같고 lamda도 많이 쓰는거 같고 타입스크립트로 된 fp-ts도 있는거 같은데 fp-ts를 제외한 것들 중 추천해주시는게 있을까요? 감사합니다!!
미해결
타입스크립트 입문 - 기초부터 실전까지
위처럼 저는 age가 같이 뜨는데... 뭔가 잘못한걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
여러 방면으로 시도 중인데, error_code : "NOT_READY" error_msg : "등록된 사용자가 아니거나, 아임포트 관리자 페이지에 설정된 PG정보가 없습니다." 해당 에러가 뜨면서 계속 실패하네요;; 혹시 하신 분들은 어떻게 성공하셨는지 궁금합니다. 일단 제가 예상한 것으로는 강의 화면이랑 제 구 관리자콘솔의 시스템 관리 탭이 다른 점에 눈이 가는데, 이걸 어떻게 처리해야되는지 어디를 찾아봐도 안나오네요... 강의에서는 여러 탭이 있는데 저는 두 개의 탭 밖에 보이지 않습니다. 해결 방법을 찾고 싶어도 어디서 찾아야 되는 지 감이 안잡히네요
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
제로초님, 코드를 따라친 후에 로그아웃을 하고 다시 로그인 하면 이런 에러메세지가 뜹니다. 그런데 네트워크 탭을 보면 로그인이 정상적으로 된거 같아서 새로고침을 하면 에러 메세지가 사라지고 슬랙에서 로그인된 화면이 제대로 뜹니다. 근데 또 여기서 워크스페이스를 생성하려고 하면 콘솔에 axioserror메세지가 떠서 어떻게 해야될지 모르겠습니다.. Workspace/index.tsx import axios from "axios"; import React, { FC, useCallback, useState } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate, Routes, Route } from "react-router-dom"; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceName, Workspaces, WorkspaceWrapper } from "@layouts/Workspace/style"; import gravatar from 'gravatar'; import loadable from '@loadable/component'; import Menu from "../../components/Menu"; import Modal from "../../components/Modal"; import { Link } from "react-router-dom"; import { IUser } from "@typings/db"; import { Button, Input, Label } from "@pages/SignUp/styles"; import useInput from "@hooks/useInput"; import {toast} from 'react-toastify'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data: userData, error, mutate} = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); const onLogout = useCallback(() => { axios.post('/api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); const onClickUserProfile = useCallback((e: any) => { e.stopPropagation(); setShowUserMenu((prev) => !prev); }, []) const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []) const onCreateWorkspace = useCallback((e: any) => { e.preventDefault(); // 띄어쓰기도 검사해줘야됨 if(!newWorkspace || !newWorkspace.trim()) return; if(!newUrl || !newUrl.trim()) return; axios.post('http://localhost:3095/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }) .then(() => { mutate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); // 에러가 나면 사용자가 인지하게 해줌 toast.error(error.response?.data, { position: 'bottom-center' }) }) }, [newWorkspace, newUrl]) const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); }, []) if(!userData) { return <Navigate to="/login" /> } if(!userData) return null; 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 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <ProfileModal> <img src={gravatar.url(userData.nickname, { s: '36px', 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) => { 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>Sleact</WorkspaceName> <MenuScroll>menu scroll</MenuScroll> </Channels> <Chats> <Routes> <Route path="/channel" element={<Channel />} /> <Route path="/dm" element={<DirectMessage />} /> </Routes> </Chats> {/* Input이 들어있으면 별도의 컴포넌트로 빼는 것을 추천(input에 글자를 입력할 때마다 여기 있는 함수들이 다 리렌더링 되기 때문에 비효율적) */} </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>워크스페이스 이름</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> </div> ) } export default Workspace; Modal/index.tsx import React, { useCallback, FC } from "react"; import { CloseModalButton, CreateModal } from "./style"; interface Props { show: boolean; onCloseModal: () => void; children: React.ReactNode; } const Modal: FC<Props> = ({show, children, onCloseModal}) => { const stopPropagation = useCallback((e: any) => { e.stopPropagation() }, []); if(!show){ return null; } return( <CreateModal onClick={onCloseModal}> <div onClick={stopPropagation}> <CloseModalButton onClick={onCloseModal}>×</CloseModalButton> {children} </div> </CreateModal> ); }; export default Modal; swr2.0 버전, react v18, typescript v18 swr을 최신버전 사용해서 revalidate대신 mutate를 사용했는데 제가 잘못 사용한건지 모르겠습니다.
미해결
Node.Js 활용하기
"mysql -u root -p"해서 mysql을 들어가고, 다음과 같은 명령어를 실행해봅니다. ALTER USER 'root'@' localhost ' IDENTIFIED WITH mysql_native_password BY '0000' 그리고 app_session_mysql.js를 다시 실행하면 session table이 만들어진 것을 확인할 수 있습니다. "왜 최신 mysql에서 저렇게 해야 sessions table이 자동으로 만들어 지는가?"는 인터넷에 찾아보면 나와있습니다!
미해결
처음 배우는 리액트 네이티브
스타일드 컴포넌트를 설치했는데 이렇게 에러가 뜨는데 어떤 에러일까요? 깃 주소 : https://github.com/jjunseokk/react-native
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요. 제가 찾고 기다리던 내용의 강의라 매우 만족하며 수강하고 있는 수강생입니다! ㅎ products.service.ts 파일에서 create와 update 메서드 작성할 때 typescript 에러에 대해 질문드립니다. products.service.ts 파일 create 메서드에서 productTags를 등록하는 과정에 const result2 = [] 부분을 const result2: string[]로 작성하면 await productRepository.save (...) 에서 No overload matches this call이 뜨고 update 메서드에서 updateProductInput에 UpdateProductInput로 타입을 지정하면 위와 마찬가지로 await productRepository.save (newProduct)에서 No overload matches this call이 뜹니다. 두 경우 모두 Type 'string' is not assignable to type 'ProductTag' 문제로 product.entity.ts에서는 productTag를 아래와 같이 등록하고 @Field(() => [ProductTag]) @JoinTable() @ManyToMany(() => ProductTag, (productTags) => productTags.products) productTags: ProductTag[]; createProduct.input.ts에서는 CreateProductInput에서 productTag를 아래와 같이 등록해서 발생하는 문제라고 추측했습니다. @Field(() => [String]) productTags: string[]; 두 경우 모두 타입을 지정하지 않고 any로 두면 문제는 사라지긴 합니다. any로 두고 사용할 수밖에 없는 것인지 아니면 타입 지정을 해서 사용하는 방법이 있는지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
yarn start:dev 실행 하고 나면 아래와 같이 나오면서 에러가 뜨고 있어요 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)... 아래 코드도 정상적으로 기입 했는데, 계속 접속 오류로 연결이 되지가 않습니다. import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo' import { Module } from '@nestjs/common' import { GraphQLModule } from '@nestjs/graphql' import { TypeOrmModule } from '@nestjs/typeorm' import { BoardsModule } from './apis/boards/boards.module' import { Board } from './apis/boards/entities/board.entity' @Module({ imports: [ BoardsModule, GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', port: 3306, username: 'root', password: 'test1234', database: 'myproject03', entities: [Board], synchronize: true, logging: true, }), ], // controllers: [AppController], // providers: [AppService], }) export class AppModule {} 현재 brew 확인시 Mysql 서버도 정상적으로 켜져 있는것을 확인 할 수 있어요 디비버에서도myproject03 이라고 정확하게 만들었습니다. 선생님의 강의하고 다른부분을 못 찾았는데, 데이터 베이스가 연결이 안될 때는 어느부분을 더 점검 해 봐야 할지요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
콘솔 결과와 error가 같이 출력됩니다!
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
안녕하세요. 2강 진행 중 상품목록 조회시 msw Response 결과에 대한 body 값이 ReadableStream 으로 넘어옵니다. 이 경우 body 의 data를 확인할 방법이 있을까요? 답변 부탁드립니다. 감사합니다.
해결됨
10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
안녕하세요 강의 잘 듣고 있습니다. C++ 강의에서 js 질문을 드려도 될지 싶은데 일단 적어 보겠습니다. (프론트엔드 경력 코테 준비중이라 js 를 고집하고 있는중입니다.) 3-K (백준 3197 - 백조의 호수)를 js 로 포팅 했는데 시간 초과가 발생하네요. 강사님 코드 로직을 그대로 적용 했다고 생각하는데 혹시 제코드에 빠트린게 있을지 궁금합니다. (제 눈에는 안보이네요 ㅠ) 로직이 똑같은거라면 어느부분을 개선 해야될지 조언 좀 부탁드립니다. http://boj.kr/a9a2b9684a774eb3ad7e2efb5baf57d8
해결됨
코어 자바스크립트
강의에서 설명해 주신 객체(인스턴스) 와, 그것의 생성자 함수, 그리고 객체의 프로토타입 이 3가지의 구조에 대해서는 이해했습니다. 그렇게 되면, 어떤 객체를 프로토타입 체인을 타고 올라가도 결국 Object.prototype 에 도달하게 되는 것이고, Object.prototype 또한 constructor 를 가지고 있을 것입니다. 그렇다면 그 constructor는 함수 이므로, Function.prototype 을 상속 받을 것이고, Fuction.prototype의 constructor 는 역시 함수이므로 Function.prototype을 상속 받게 됩니다. 크롬 개발자 도구에서 객체를 선언하고 console.dir로 타고타고 올라가면 결국 저 Object.prototype.constructor 가 나오는 시점부터 무한하게 트리를 타고 올라가게 되는데 [[prototype]] > constructor > [[prototype]] > constructor > [[prototype]] .... 제가 보기엔 재귀참조형태 같아보이는데 이것이 맞는지 궁금하여 질문 드립니다. 그렇게 되면 Function.prototype.constuctor === Function() Function().[[prototype]] === Function.prototype Function.prototype.[[prototype]] === Object.prototype Object.prototype.constructor === Object() Object().[[prototype]] === Function.prototype 형태가 되어버리는데 이게 맞는 지 궁금합니다.. 무언갈 놓치고 있는 것인지? 아니면 최상위 Object 객체에선 다르게 동작하는 규칙이 있는 것인지 궁금합니다.
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
강사님 안녕하세요 좋은강의 잘 수강중인 학생입니다. 강의중에는 클라이언트에 저장된 확장자 2개의 이미지를 사용해서 분기처리를 하셨는데요, 서버에서 받아오는 이미지파일을 분기처리 할려면(webp를 지원하지않는 브라우저를 위해) webp파일 이미지와 jpg(또는 png) 파일 이미지 총 2개 파일 이미지를 보내줘야 분기처리가 가능한가요? 아니면 서버에서 1개의 확장자 이미지를 보내주면 jpg -> webp 또는 webp->jpg로 바꾸어서 분기처리 하는방법은 없을까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 강사님 해당 상품을 클릭했을때 url은 바뀌지만 상품상세페이지로 화면은 바뀌지 않는 오류가 발생했습니다(새로고침하면 화면이 바뀌긴 합니다) 다른 수강생들의 비슷한 질문답변을 참고하여 <React.StrictMode>를 지워도보고 react-router-dom 버전도 5.2.0이고 Route path도 "/products/:id"라고 적었는데 여전히 오류가 해결되지 않습니다 https://github.com/kanghanju/grab-market-client/commit/01c0657f4f64398b47493c1b2c3b44836bf1a785# 여기는 Link태그 해당 수업코드 파일입니다!
해결됨
코어 자바스크립트
자바스크립트에서 함수는 표현식으로 변수에 할당할 수 있어서 값으로 평가 될 수 있다고 알고 있습니다. 강의에서 배열이나 객체에 대한 예시를 설명해 주셔서 이해를 했는데, 문득 함수의 경우는 어떻게 이루어지는지 궁금해 졌습니다. const outerFunc = function (){ let b = 1; let c = 2; const innerFunc = function(){ console.log("inner function") } } 예를들어 위와같이 있다고 할 때, 초기화 단계에서 outerFunc 변수가 생성되고 undefined로 초기화 된 후에, 리터럴로 선언된 함수가 그 자체로 들어있다가, 함수 호출 시에 (실행시에) 컨텍스트를 생성하며 함수 내부에 선언한 변수들이 생성, 주소 할당 등의 과정이 이루어지는지, 아니면 변수나 객체가 생성되는 것과 마찬가지로 내부에 있는 b, c 변수들이 메모리에 할당되고 주소값을 참조하는 과정까지 이루어 진 후, outerFunc 변수에 함수객체의 주소를 가리키도록 생성되는지 위 두가지 중 어떻게 동작하는지가 혼동됩니다..
미해결
프로젝트로 배우는 React.js
72번째 강의 초반부 편집오류 있습니다.
