묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
Incorrect use of <label for=FORM_ELEMENT> 오류 발생했을 때 Input에 name이 아닌 id 값을 주면 해결되는 이유가 궁금합니다!
안녕하세요! React로 NodeBird SNS 만들기섹션1 로그인 폼 만들기까지 수강한 학생입니다!사전에 next 9버전, antd 4버전을 설치하였습니다.import { Form, Input, Button } from 'antd';발생한 에러는 아래와 같습니다.콘솔에 오류가 뜨지만 화면 자체는 정상적으로 뜹니다.에러 메시지를 번역해보니 아래와 같았습니다.(오류 추정 코드이며, 버튼 코드는 아래에선 생략했습니다.)return ( <Form> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> </Form> );에러 메시지를 확인하고 문제가 LoginForm.js 파일에서 발생한 것이라 추측했고,LoginForm의 return에 있는 Input name 속성을 id로 변경하니 콘솔 오류가 사라졌습니다.왜 해결된 것인지 이유가 궁금합니다!return ( <Form> <div> <label htmlFor="user-id">아이디</label> <br /> <Input id="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input id="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> </Form> );
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
저는 피그마 들어가서 오른쪽에 code 가 없습니다.
어떻게 생성 시키는지 알 수 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
sandbox에서 .js로 새 파일 작업시 즉시 반영 안됨
sandbox에서 default 파일(.mjs) 말고 .js 파일을 새로 만들어서 console.log를 실행했는데 .mjs 처럼 즉시 실행이 안됩니다. (이떄 instant preview도 on 했습니다.)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
accessToken 저장 관련 질문
안녕하세요! accessToken 저장 관련하여 궁금한 점이 생겨 질문드립니다.로그인의 결과로 accessToken을 받아오고 이것을 보안 문제를 해결하고자 로컬/세션 스토리지가 아닌 변수(recoil state)에 저장하셨고 이를 로그인한 사람의 정보를 요청하기 위해 쿠키를 통해 headers에 연동 시키셨는데, 이러면 변수에 저장한 값을 어쨌든 headers의 쿠키에서 확인할 수 있게 되어 글로벌 변수에 저장한 의미가 없어진 것 아닐까 하는 생각이 들어서 질문드리게 되었습니다.항상 좋은 강의 감사드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
Typeorm error: Table already exist
Entity를 변경하고 나서 서버 재 시동 시 Connection Error, Table {Table_name} already exist 에러가 발생하고, Entity와 상관없이 소스를 수정해도 여전히 동일한 에러가 발생합니다. 에러를 찾아봤는데도 명확한 해답을 찾지 못해 질문 드립니다.[Nest] 1860 - 2023. 09. 14. 오후 10:13:42 ERROR [TypeOrmModule] Unable to connect to the database. Retrying (5)...QueryFailedError: Table 'tb_user_info' already exists 변경 전@Column() @Field(() => String) USR_USER_TYPE: boolean변경 후@Column() @Field(() => Boolean) USR_USER_TYPE: boolean 현재 Package는 아래와 같고요."@nestjs/typeorm": "^10.0.0", "typeorm": "^0.3.17" @Entity를 중복 선언하거나 소스가 두개이진 않습니다.(기존에도 똑같은 질문이 있어서 확인했습니다.) 다만 Table명을 다르게 하기 위해 아래처럼 했습니다.@Entity('TB_USER_INFO') @ObjectType() export class UserInfoEntity { ..... 이 에러를 찾아보니...@Entity({ name: 'TB_USER_INFO', schema: 'user_schema'}) 처럼 하라고 하는데....우선 제대로 된 해결법이 맞는지 궁금하고요.만약 맞다면 저기서 얘기하는 schema가 무엇을 말하는지 못찾았습니다.( 혹시 schema명이 database name이 아닌가 싶네요... 그렇게 했을때 별도로 다른 에러가 발생하진 않았거든요) 그리고 어떤 곳에선 synchronize를 false로 하고 직접 수정하는게 낫다는 사람들도 있더라고요. 조금 이해가 안되긴 하지만..... 해결됐습니다.=============================================================이런저런 테스트를 하다가 Stack overflow에서 어떤 사람이 @Entity작성 시 이름을 별도로 지정하지 않고 class명을 그대로 써서 해결됐다고 하길래 저도 그렇게 했더니 해결이 됐습니다. 최초 class명과 table명을 다르게 쓴 이유는 해당 entity클래스가 entity 라는걸 알아보기 쉽게 하려고 class에 entity라는 이름을 붙이고, table명에서는 entity를 쓰지 않았었습니다.지금도 그렇게 하는 것이 더 편하다 생각하는데... 우선 에러를 해결하기 위해서는 이렇게 밖에 방법이 없네요;;;;; 혹시 테이블 명을 별도로 사용하고 에러가 나게 하지 않을 방법이 있을까요?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
두번씩 실행되는 문제..
왜 두번 실행되는 건지 모르겠어요..어디가 잘못된걸까요??
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
트랜잭션 로직을 공통처리 하는 방법으로 적절할까요?
## 트랜잭션 서비스 @Injectable() export class TransactionService { constructor(private readonly dataSource: DataSource) {} async transaction(callback) { const queryRunner = this.dataSource.createQueryRunner(); await queryRunner.connect(); await queryRunner.startTransaction(); try { await callback(queryRunner); await queryRunner.commitTransaction(); return true; } catch (error) { console.error(error); await queryRunner.rollbackTransaction(); throw error; } finally { await queryRunner.release(); } } }## 트랜잭션 모듈 (글로벌) @Global() @Module({ providers: [TransactionService], exports: [TransactionService], }) export class TransactionModule {}## 사용예제 async join(email: string, nickname: string, password: string) { const user = await this.usersRepository.findOne({ where: { email } }); if (user) { throw new HttpException('이미 존재하는 사용자입니다.', 401); } const hashedPassword = await bcrypt.hash(password, 12); await this.transactionService.transaction(async (queryRunner) => { const result = await queryRunner.manager.getRepository(Users).save({ email, nickname, password: hashedPassword }); const sleact = await queryRunner.manager.getRepository(Workspaces).findOne({ where: { name: 'Sleact' } }); await queryRunner.manager.getRepository(WorkspaceMembers).save({ UserId: result.id, WorkspaceId: sleact.id }); const channel = await queryRunner.manager .getRepository(Channels) .findOne({ where: { name: '일반', WorkspaceId: sleact.id } }); await queryRunner.manager.getRepository(ChannelMembers).save({ UserId: result.id, ChannelId: channel.id }); }); } 안녕하세요 제로초님.트랜잭션 관련해서 로직 작성하다가 실행부를 제외하고는 너무 공통되는 것 같아서 방법을 고민하다가 위 소스처럼 처리하면 어떨까 싶어 작성해보았습니다.트랜잭션 서비스를 생성해서 공통이되는 트랜잭션 로직을 모아두고, 콜백함수를 받아서 처리하는 형태로 해보았는데요!일단 동작은 정상적으로 하는데, 이렇게 했을 때 발생할만한 문제가 있을지 짐작이 가지 않아서 문의 남깁니다!위와같은 로직으로 트랜잭션을 공통처리 했을 때 생길만한 사이드이펙트가 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입과제
안녕하세요. 회원가입 과제를 하려고 하는데너무 막막해서요...모양만 똑같이 만들면 되는 건가요?아니면 실제로 입력이 되는 형식대로 만들어야 하는 건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기작성이 안돼요 ㅠㅠ
어제 질문 남겼는데 답변해주신대로 해봤는데 아직도 작성완료가 안됩니다... ㅠㅠ강의 돌려보면서 틀린거 없나 살폈는데도 모르겠어요.. 콘솔에도 아무것도 안찍히구요..무슨 일일까요? ㅠㅠ샌드박스 링크 남깁니다..https://codesandbox.io/s/late-morning-d483sv?file=/src
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build 오류가 납니다.ㅠㅠㅠ
File sizes after gzip: 56.23 kB build\static\js\main.c2dd5a76.js 1.22 kB build\static\css\main.9a059f26.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment C:\Users\min seo hyun\Desktop\emotion-diary>npm install -g serve changed 89 packages in 5s 24 packages are looking for funding run npm fund for details C:\Users\min seo hyun\Desktop\emotion-diary>serve -s build 'serve'은(는) 내부 또는 외부 명령, File sizes after gzip: 56.23 kB build\static\js\main.c2dd5a76.js 1.22 kB build\static\css\main.9a059f26.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment C:\Users\min seo hyun\Desktop\emotion-diary>npm install -g serve changed 89 packages in 5s 24 packages are looking for funding run `npm fund` for details C:\Users\min seo hyun\Desktop\emotion-diary>serve -s build 'serve'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.cmd창에서 빌드 파일 생성하고 serve도install 하였습니다.그 다음 과정인 serve -s builde진행하는 과정에서 위와같은 오류가 나오는데 왜 그런지 도와주세요ㅠㅠㅠ
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
Dto 생성시 유틸리티 타입을 사용할수 있나요?
DB를 기반하여 Users엔티티를 만들었을떄 join함수에서 사용할 DTO를 만들기위해 Users를 상속받아 Pick이나 Omit을 사용하여 일부 데이터만 사용하고 싶습니다.리액트의 유틸리티 타입처럼 기본 클래스에서 일부만 상속을 받는 방법이 있을까요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
socket.io 에서 sql db 사용
1명만 존재하는 채팅방에서 나갔을때 채팅방이 화면에 렌더링 되는 오류입니다. 아래는 몽고디비를 사용했을 때 입니다.chat 네임스페이스 접속 해제를 한 후 DB 에서 채팅방을 제거했기 때문에 GET "/" 의 response 에는 기존의 채팅방이 포함되어 있지않습니다. (정상)아래는 SQL 로 전환했을 때입니다.SQL 을 사용 했을때는 GET "/" 서버 response 가 chat 네임스페이스 접속 해제보다 빠릅니다. 그러므로 아무도 남아있지않은 채팅방이 GET "/" 의 response 에 포함되어 있고 화면에 렌더링 되는 오류가 발생합니다. 또한 여러번 시도하면 스페이스의 접속과 해제순서가 바뀌어 운좋게 오류가 없을 때도 있습니다. 질문 DB 종류 의 차이가 HTTP 요청과 SOCKET 연결/해제 순서를 바꿀 수 있나요? 이를 해결하기 위한 조언을 부탁 드려요
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
몽구스 쿼리 remove 에러 문제
Room.remove 이 부분에서 계속해서 TypeError: Room.remove is not a function 발생하길래 docs를 살펴봤는데 deleteMany나 deleteOne만 있더라구요! 현재 코드를 deleteMany로 수정해서 잘 동작이 됩니다!그런데 remove가 deleteOne이나 deleteMany로 분리된것은 꽤 오래전 일이라서 docs를 봐도 왜 나는 remove가 안되는데 불과 몇개월 전에 코드에서는 remove가 잘 돌아간건지 궁금해서 질문 남깁니다!! ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
우분투 사용법
강의 듣다가 윈도우에서 우분투로 바꿨는데사용법이 익숙치 않아요터미널에서 bash 라는 창을 어떻게 켜는지도 모르고 , 단축키도 몰라요. 전체적으로 미숙해요.이런건 어디서 배워야하나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 작성이 안돼요
작성완료를 누르면 새로 추가가 되지 않습니다.뭐가 문제일까요?코드 샌드박스 주소는 여기 있습니다.https://codesandbox.io/s/late-morning-d483sv
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 36 antd icon 임포트 에러
안녕하세요.antd 임포트할때 이런 에러가 발생했는데요.이전 커뮤니티 글을 확인해서선생님이 말씀해주신 강의용 버전으로 바꾸고yarn.lock과 노드모듈즈를 다시 지운다음yarn install했는데도 아직도 저렇게 에러가 나와서요ㅠㅠ뭐가 문제일까요?yarn dev해보니 아이콘은 잘 나와요
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
OS 바꿨는데 처음부터 다시 들어야하나요?
전에 WINDOW 쓰고 있어서 오류가 많이 걸린다고 하소연 한적 있었는데 선생님이 우분투로 바꾸라고 해서 우분투 듀얼 부팅 설치했는데 지금까지 들었던 강의에서 사용되었던 우분투 명령어를 모르니 처음부터 다시 들어야하나요?...거의 다 들은 거 같은데...
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
서버를 종료하면 회원가입한 user정보가 삭제되는것이 맞나요?
서버를 종료하면 회원가입한 user정보가 삭제되는것이 맞나요?워크벤치에서도 확인해보니 회원가입 후 서버를 종료하면 데이터가 user데이터가 사라진것을 확인했습니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
인자에 객체 값을 넣는 이유
인자에 객체 값을 넣는 이유가 안전하기 때문이라고 하셨는데 정확히 어떤 부분이 안전한지 알려주실 수 있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
가상클래스 hover의 h는 묵음이 아니라서 호버로 발음하는게 나을거 같습니다.
'강력한 CSS' 의 '선택자2' 강의 에서 강사님이 .class:hover {} 설명시 hover 에서 h는 묵음이라 over라고 발음한다고 하셨는데요.hover 의 h는 묵음이 아니네요.over(오버?) 유사하게 발음하기 보단 həvər(호버/허버 등)로 유사하게 발음해야 의사소통에 헷갈림이 없을거 같습니다.별거 아닌 맞춤법, 발음 같은거를 잘못 됐다고 말하는건 아니고요, over는 개발업무나 개발 공부 등을 하면서 비교적 자주 나오는데, hover를 over로 발음시 의사소통에 혼란스러울거 같아서 노파심에 적어봤습니다.hover는 over로 발음하는 것보단, həvər(호버/허버 등)로 발음하는게 나을거 같습니다.