묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
useState의 set 함수에 대해서 질문이 있습니다.
useState의 set 함수가 비동기로 실행된다고 이해하고 있는데setLoading(true); setAuthUser({ uid: authState.uid, email: authState.email, photoURL: authState.photoURL, displayName: authState.displayName, }); setLoading(false);이 부분의 코드가 어떻게 순서대로 실행이 되는건가요? set 함수끼리는 순서가 지켜지나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
VsCode : Import하지 않은 컴포넌트 경고표시X(설정?)
현재 버전 정보들입니다 "next": "^11.1.4", "prop-types": "^15.8.1", "eslint": "^8.33.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0"TypeScript와 React를 사용해서 프로젝트 했을 때는 VsCode에서(웹스톰만의 기능은 아니라고 생각합니다.) import하지 않은 컴포넌트에 대한 경고문이 나와서, 맥북 기준 커맨드+.을 하면 Code Action으로 import을 시켜줄 수 있었습니다.그런데강의를 진행하면서 컴포넌트를 import하지 않은 상황인데도 불구하고, 따로 경고문이 나타나지 않는데, 이게 어떤 설정을 해야하는건지 잘 모르겠습니다.<Menu /> , <Col /> , <UserProfile /> 같은 컴포넌트들입니다.(코드는 이 정도만 첨부하겠습니다.)import PropTypes from "prop-types"; import Link from "next/link"; import { Menu, Input, Row, Col } from "antd"; ... <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <UserProfile /> : <LoginForm />} </Col> <Col xs={24} md={12}> {children} </Col> <Col xs={24} md={6}> <a href="https://velog.io/" target="_blank" rel="noreferrer noopener">Velog</a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;Import되지 않은 컴포넌트인 <UserProfile />, <LoginForm /> 경고문이 뜨지 않는 사진도 첨부했습니다.
-
미해결스프링 시큐리티
spriing boot 3 .acccess() 질문입니다.
spring boot 3 로 진행시 .access() 강의하신것처럼 값이 들어가지지않는데 어떻게 넣어야하나요?
-
미해결스프링 핵심 원리 - 기본편
(수정) CoreApplication을 실행 후,테스트 코드까지 같이 실행되어 문제가 발생했습니다.
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용]어제 작성한 질문 답변을 반영하여 다시 작성했습니다. (수정) CoreApplication을 실행하면 테스트 코드 속 내용까지 실행되는 것 같습니다. 1. BeanDefinitionOverrideException 오류 CoreApplication 실행 후 (Run Java / Debug Java 둘 다 안 됐습니다.) 다음과 같은 오류가 떴습니다. (전에는 제가 추려서 간략한 버전으로 올렸지만, 콘솔창 전체를 보여주시라고 하셔서 지저분하지만 사진 올려봅니다.)제가 로그를 본 후 해당 ApplicationContextExtendsFindTest 테스트 파일 속 TestConfig의 @Configuration을 제거하자 실행은 됐습니다.2. 1번 문제 해결 후 로그 보니 BeanLifeCycleTest 관련 로그가 뜹니다.TestConfig의 @Configuration을 제거그 후 다시 실행한 후 콘솔창 전체 사진위의 두 번째 사진에서 아래와 같이 테스트 코드 관련 출력이 보입니다. "생성자 호출, url = nullconnect: http://hello-spring.devcall: http://hello-spring.dev message = 초기화 연결 메시지"3. 결론왜 이런지 이유가 궁금합니다. 단순히 inteliJ와 vsCode 실행환경 차이인지, 아니면 그 외에 다른 이유가 있는지 궁금합니다.
-
해결됨나도코딩의 자바 기본편 - 풀코스 (20시간)
Switch case 관련 질문
안녕하세요.switch case(후반전) 강의 3분 30초 부분에서 궁금한 점이 생겨 질문을 남깁니다. 제가 알기로는 switch case를 사용할 때, 그 case에 해당하는 경우에만 수행 동작을 실행하는 걸로 알고 있습니다. 이 영상에서도 마찬가지로 grade를 1이라고 가정할 때, case 1은 조건을 만족하므로 price에 1000을 더해주었습니다. 하지만 그 이후 case 2를 만족하지 않음에도 불구하고 1000을 더해주고, case 3도 만족하지 않지만 1000을 더한 결과 값이 출력 되었습니다.즉, break를 넣으면 switch문을 빠져나갈 수 있다는 것은 알고 있으나, 왜 break가 없어졌다는 이유로 다음 case의 수행 동작이 실행되는지 잘 모르겠습니다. 이와 관련하여 매커니즘을 조금 더 자세히 설명해주시면 감사할 것 같습니다..!
-
미해결실전! Querydsl
Querydsl과 JPQL의 성능차이가 존재하나요?
영한님 안녕하세요!Querydsl 관련해서 몇가지 질문이 있습니다.같이 공부하고 있는 스터디원 분들께서 Querydsl을 사용하면 JPQL에 비해 성능이 좋아진다고 설명해주셨습니다.저는 강의를 듣고 Querydsl을 사용하면 JPQL로 변환되어 쿼리가 나간다고 이해하고 있었습니다. "Querydsl은 결국 JPQL로 변환되어서 DB에 쿼리가 나간다" 가 맞는지 질문드리고 싶습니다.또한 Querydsl의 가장 큰 장점은 컴파일 시점에 에러를 잡을 수 있다는 것이라고 알고 있는데, 성능적인 부분에서의 장점도 있는지 여쭤보고 싶습니다. 감사합니다!!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
React-router-dom 흰 화면 오류
React-router-dom 5.2.0 으로 다운그레이드 하였으나,흰 화면으로 나타납니다. 에러가 있는 것 같아요...!커뮤니티를 보고 혼자 해결해 보려고 하였으나... 커뮤니티에 있는 방법들로 해결이 안되어서 여쭤봅니다.도와주세요..! ㅠㅠ
-
미해결업무가 100배 빨라지는 엑셀 데이터 활용과 분석 노하우
Vlookup 사용
선생님 안녕하세요. 강의에서 말씀하신 것처럼이름 관리자 기능을 통해서 매입처 입급계좌번호를 저장하고 vlookup을 사용하면 과세사업자 데이터를 가져오는데 전혀 문제 없습니다. 그런데이름 관리자 기능을 사용하지 않고vlookup 함수를 사용할 때매입처 시트에서 해당 정보를 직접 드래그를 통해 가져오는 경우 아래와 같이 오류가 납니다. 이름 관리자를 사용하지 않고 다른 시트에서 데이터를 가져와서 Vlookup을 사용하는 방법이 있을까요? 감사합니다.
-
미해결업무가 100배 빨라지는 엑셀 데이터 활용과 분석 노하우
균등분할
선생님 안녕하세요.이전에 학습한 균등 분할 관련 문의드립니다. 위와 같이 상호명을 균등분할 해보았습니다.그런데 한글은 괜찮은데, 영어로 적힌 데이터는 균등하게 분할되지 않습니다. 이런 경우에는 어떻게 처리하면 좋을까요? 감사드립니다.
-
미해결자바 ORM 표준 JPA 프로그래밍 - 기본편
임베디드 타입에서 어떻게 Entity를 쓰는 건가요?
Person 클래스입니다.package hellojpa; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.Id; @Entity public class Person { @Id @GeneratedValue @Column(name = "person_id") private Long id; private String name; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } }Address 클래스입니다.package hellojpa; import javax.persistence.*; @Embeddable public class Address { private String city; private String street; private String zipcode; @OneToOne @JoinColumn(name = "person_id") private Person person; public Address() { } public Address(String city, String street, String zipcode) { this.city = city; this.street = street; this.zipcode = zipcode; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } public String getStreet() { return street; } public void setStreet(String street) { this.street = street; } public String getZipcode() { return zipcode; } public void setZipcode(String zipcode) { this.zipcode = zipcode; } }제가 연관관계 매핑에 대해서 이해를 못하고 있는 건가요? person을 1:1 매핑을했다고 생각했습니다.
-
미해결스프링 DB 1편 - 데이터 접근 핵심 원리
@Autowired로 필드 주입을 하는 이유
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예)[질문 내용]AOP 관련 질문은 아니지만 생성자 주입이 아닌 필드주입을 해주는 이유를 정확히 알 수 있을까요? 실제로 생성자 주입으로 해봤을 때 datasource bean을 못찾는거 같더라구요. 혹시 이유를 알 수 있을까요?(제 예상엔 생성자 주입은 생성자 호출시 빈을 생성하고 필드주입은 빈을 미리 만들어놓고 찾는 방식의 차이 때문인 것 같은데 그럼 datasource도 bean으로 등록되어있는데 왜 못찾는건지 이해가 잘 되지 않아서요..)
-
미해결웹 게임을 만들며 배우는 React에 TypeScript 적용하기
undefined 처리
강의에서 computerChoice의 리턴타입에 undefined가 추가되어있는 문제 해결하실때 if() throw new Error(); 사용해서 처리하거나 느낌표(!) 사용하신다했는데 if() throw new Error();로 어떻게 처리하신다는건지 알 수 있을까요? 어떻게 해봐도 해결이 안되네요. ㅠㅠ const rspCoords = { 바위: '0', 가위: '-142px', 보: '-284px', } as const; const scores = { 가위: 1, 바위: 0, 보: -1, } as const; type imgCoords = typeof rspCoords[keyof typeof rspCoords]; const computerChoice = (imgCoords: imgCoords) => { return (Object.keys(rspCoords) as ['바위', '가위', '보']).find(function (v) { return rspCoords[v] === imgCoords; }); };
-
해결됨넓고 얕게 외워서 컴공 전공자 되기
페이징 기법에 대해 질문드립니다
가상메모리 소개 강의를 보고 추가로 제공해주신 페이징 기법의 구현 영상도 보았는데요, 몇 가지 궁금증이 생겨서 질문드립니다.page fault를 제가 잘 이해한건지 모르겠는데요, 매칭되는 프레임이 존재하지 않는다는 말은 페이지가 막 할당되어 아직 프레임이 할당되지 않은 상태를 말하는 건가요? 아니면 페이지 아웃이 발생해서 프레임이 존재하지 않는 상태인가요?작업관리자에 표시되는 페이징 풀은 커널 레벨에서 사용한다고 하던데, 중요한 시스템 프로세스들을 위해 예약된 용량이라고 보면 되나요?32비트 프로세스가 4GB의 가상메모리를 모두 사용한다고 치면, 페이지 크기가 4KB이므로 페이지 테이블이 가지는 엔트리의 개수는 1M정도 될듯한데요, 경우에 따라서는 낭비가 될 수도 있을 듯한데 이러한 부분이 문제되지는 않는지 궁금합니다.2월의 첫날이네요~ 이번 달도 잘 부탁드리고, 신규 강의와 준비중이신 강의 모두 좋은 성과 있으시길 바랍니다^^
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
수업의 내용은 아니지만 궁금해서 여쭤봅니다.
저는 이런식으로 계속해서 뜨는데 이것만 끄는 방법이 있을까요?필요한 정보만 보고 싶은데 textfield의 깜빡깜빡하는 부분까지도 다 뜨는 것 같아서요. ㅠㅠ 수업내용은 선생님께서 잘 알려주셔서 너무 좋아요!! 그리고 현재 안드로이드로 배우고 있는데, 선생님처럼 Appbar의 title이 이처럼 다음 페이지로 이동시 살짝 오른쪽으로 가는데 어떻게 설정하면 될까요??
-
해결됨토비의 스프링 부트 - 이해와 원리
토비님이 생각하시는 단위 테스트, 통합 테스트의 범위를 알려주실 수 있으신가요?
강의에서 말씀하신대로, 단위테스트 혹은 통합테스트와 같은 용어들이 단어가 느슨하게 정의되어 있어 블로그, 책, 강의마다 설명들이 다 달라서 면접 같은 곳에서 질문을 받으면 매우 곤란한데요. 단위 테스트, 통합 테스트 범위? 정의? 같은 것에 대한 토비님의 개인적인 의견 혹은 기준이 궁금합니다.
-
해결됨토비의 스프링 부트 - 이해와 원리
복잡한 decorator 예제
안녕하세요 토비님! 강의를 듣는 중에, 여러개의 데코레이터를 우선순위를 정하는 방법 말고 원하는 상황에 맞게 주입이 되도록 처리하는 방식에 대해 말씀해주셨는데, 해당 방법에 대해 좀더 자세하게 알고 싶어져서 사용하는 예제 코드를 구글링 해보았지만 못찾겠어서 질문 올립니다.
-
미해결Vue.js + TypeScript 완벽 가이드
프로젝트 권한 요청 드립니다.
첫번째 두번째 프로젝트 권한 요청 드립니다. 인프런 계정 : parkjungwoo2000깃허브 계정 : myjungwu 감사합니다.
-
미해결실전! Querydsl
SpringBoot 3.0.2 버전 QueryDSL 설정문제
[질문 내용]안녕하세요. 수강생 김땡땡이라고 합니다.추가로 작성해주신 Spring 3.0 버전 설정을 적용해서 build.gradle을 작성했는데 아래와 같은 에러가 발생하면서 테스트 에러가 발생합니다. 먼저 강의내용과 수업자료를 통해서 Springboot 3.0 이상 버전에서 설정해야되는 부분들을 추가했습니다. javax관련 오류는 뜨지 않습니다. 하지만 다른 문제가 생겼는데요.. gradle >other >compileQuerydsl 을 실행하면, 문제점이 있습니다. compileQuerydsl을 통해서 생성되는 Q Class는 build 경로에만 생기고 src/main에는 생성이 되지 않는다.<build 경로 아래에는 성공적으로 Qclass 가 생성되었습니다.>하지만 src/main아래에는 생성되지 않았네요.. 그래도 build 경로아래에 QClass가 생성되어있으니 간단한 Test는 될 것 같아서 수업 내용을 따라서 작성하고 실행해봤는데. 위와 같은 에러가 발생했습니다. Qclass를 찾지못해 발생하는 오류같은데.. 왜 이런 현상이 생기는지 모르겠습니다. 강사님과 똑같이 작성했는데.. 단순 버전 문제일까요? 이런경우엔 gradle 버전도 상관이 있는건가요? 현재 사용하는 gradle 버전은 확인해보니 7.6입니다. 검색을 많이 해봐도 해결방안이 나오질 않습니다. 도움 부탁드립니다. =======================저의 build.gradle 설정========================plugins { id 'java' id 'org.springframework.boot' version '3.0.2' id 'io.spring.dependency-management' version '1.1.0' id "com.ewerk.gradle.plugins.querydsl" version "1.0.10" } group = 'study' version = '0.0.1-SNAPSHOT' sourceCompatibility = '17' configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' // Querydsl 추가 implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt:${dependencyManagement.importedProperties['querydsl.version']}:jakarta" annotationProcessor "jakarta.annotation:jakarta.annotation-api" annotationProcessor "jakarta.persistence:jakarta.persistence-api" } tasks.named('test') { useJUnitPlatform() } //querydsl 추가 시작 def querydslDir = "$buildDir/generated/querydsl" querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java.srcDir querydslDir } configurations { querydsl.extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations.querydsl } //querydsl 추가 끝 ======================= Hello Entity =============================package study.querydsl.entity; import jakarta.persistence.Entity; import jakarta.persistence.GeneratedValue; import jakarta.persistence.Id; import lombok.Getter; import lombok.Setter; @Entity @Getter @Setter public class Hello { @Id @GeneratedValue private Long id; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수정 페이지 마운트 직후, 온체인지 핸들러가 인풋 값을 ""으로 인식하여, 인풋 값를 지웠을 경우, 온체인지 핸들러가 값의 변동을 인식하지 못하는 문제가 있습니다.
안녕하세요 강의 잘 보고있습니다.수정 페이지 마운트 직후, 온체인지 핸들러가 인풋 값을 ""으로 인식하고, 인풋 값를 지웠을 경우, 온체인지 핸들러가 값의 변동을 인식하지 못하는 문제가 있습니다.즉, 수정 페이지의 각 인풋 디폴트 값들에 데이터가 불러와진 후, 값을 입력하는 것이 아니라 삭제할 경우에 값의 변동을 온체인지 핸들러가 인식하지 못하여 발생합니다.따라서, 인풋의 온체인지 핸들러를 통해 인풋 값들이 비어있는지 확인하는 유효성 검사에 작은 오류가 있습니다. 수정페이지 마운트 직후 데이터를 불러온 뒤, 값이 인풋에 입력된 후, 온체인지핸들러가 변동을 인식하게 할 수 있을까요? 혹시 비슷한 인풋 값들을 객체에 묶어 저장하는 방식을 지양해야 할까요? import { type ChangeEvent, useState, useRef, useEffect } from 'react'; import { useRouter } from 'next/router'; import BoardWrite_presenter from './BoardWrite_presenter'; import { CREATE_BOARD, UPDATE_BOARD, UPLOAD_FILE } from './BoardWrite_queries'; import { useMutation, useQuery } from '@apollo/client'; import { type IBoardWrite_container_Props, type IUpdatedVariables, } from './BoardWrite_types'; import { type Address } from 'react-daum-postcode/lib/loadPostcode'; import { checkFileValidation } from '../../commons/checkFileValidation'; import { Modal, Spin } from 'antd'; import type { RcFile } from 'antd/es/upload'; import type { UploadFile } from 'antd/es/upload/interface'; import { getBase64 } from '@/src/commons/utils/utils'; import { FETCH_BOARD } from '../detail/BoardDetail_queries'; import { type IQuery } from '@/src/commons/types/generated/types'; import { Loading3QuartersOutlined } from '@ant-design/icons'; export default function BoardWrite_container( props: IBoardWrite_container_Props ) { const router = useRouter(); const boardId = router.query.boardId; if (props.isEditing && !boardId) { return ( <Spin indicator={<Loading3QuartersOutlined spin />} /> ) } const { data } = useQuery<Pick<IQuery, 'fetchBoard'>>(FETCH_BOARD, { variables: { boardId, }, }); const fetchBoard = data?.fetchBoard; if (props.isEditing && !boardId && !fetchBoard) { return ( <Spin indicator={<Loading3QuartersOutlined spin />} /> ) } const [createBoard] = useMutation(CREATE_BOARD); const [updateBoard] = useMutation(UPDATE_BOARD); const [images, setImages] = useState('youtube'); const [isOpen, setIsOpen] = useState(false); const [writerError, setWriterError] = useState(false); const [passwordError, setPasswordError] = useState(false); const [titleError, setTitleError] = useState(false); const [contentsError, setContentsError] = useState(false); const [valid, setValid] = useState(false); interface ICoreInput { [key: string]: string writer: string password: string title: string contents: string } const [coreInput, setCoreInput] = useState<ICoreInput>({ writer: fetchBoard?.writer ?? '', password: '', title: fetchBoard?.title ?? '', contents: fetchBoard?.contents ?? '' }) const [coreInputErorr, setCoreInputErorr] = useState({ writer: false, password: false, title: false, contents: false }) useEffect(() => { if (fetchBoard) { setCoreInput({ ...coreInput, writer: String(fetchBoard.writer), title: String(fetchBoard.title), contents: String(fetchBoard.contents), }) } }, [data]) const onChangeCoreInput = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { setCoreInput({ ...coreInput, [e.currentTarget.id]: e.currentTarget.value }); setCoreInputErorr({ ...coreInputErorr, [e.currentTarget.id]: false }); const AllInputs: string[] = []; for (const prop in coreInput) { if (prop !== e.currentTarget.id) { AllInputs.push(coreInput[prop]) } else { AllInputs.push(e.currentTarget.value) } } console.log("AllInputs : " + AllInputs) if (!AllInputs.includes('' && "undefined")) { setValid(true); } else setValid(false); }; const onChangeImages = (e: ChangeEvent<HTMLInputElement>) => { setImages(e.target.value); }; const [input, setInput] = useState({ zipcode: "", address: "", addressDetail: "", youtubeUrl: "" }) const onChangeInput = (e: ChangeEvent<HTMLInputElement>) => { setInput({ ...input, [e.target.id]: e.target.value }); }; const onSubmit = async (e: { preventDefault: () => void }) => { e.preventDefault(); if (coreInput.writer === '') { setWriterError(true); } if (coreInput.password === '') { setPasswordError(true); } if (coreInput.title === '') { setTitleError(true); } if (coreInput.contents === '') { setContentsError(true); } if (coreInput.writer && coreInput.password && coreInput.title && coreInput.contents) { try { const result = await createBoard({ variables: { createBoardInput: { writer: coreInput.writer, contents: coreInput.contents, password: coreInput.password, title: coreInput.title, youtubeUrl: input.youtubeUrl, images, boardAddress: { zipcode: input.zipcode, address: input.address, addressDetail: input.addressDetail, }, }, }, }); void router.push(`/boards/${result.data.createBoard._id}`); } catch (error) { if (error instanceof Error) alert(error.message); } } }; const onUpdate = async (e: { preventDefault: () => void }) => { e.preventDefault(); const updatedVariables: IUpdatedVariables = { boardId, password: coreInput.password, updateBoardInput: { contents: coreInput.contents, title: coreInput.title, youtubeUrl: input.youtubeUrl, images, boardAddress: { zipcode: input.zipcode, address: input.address, addressDetail: input.addressDetail, }, }, }; if (!coreInput.password) { setPasswordError(true); } if (!coreInput.title) { setTitleError(true); } if (!coreInput.contents) { setContentsError(true); } if (!coreInput.password && !coreInput.title && !coreInput.contents) { try { const result = await updateBoard({ variables: updatedVariables, }); void router.push(`/boards/${result.data.updateBoard._id}`); } catch (error) { if (error instanceof Error) alert(error.message); } } }; const onToggleModal = () => { setIsOpen((prev) => !prev); }; const handleComplete = (data: Address) => { let fullAddress = data.address; let extraAddress = ''; if (data.addressType === 'R') { if (data.bname !== '') { extraAddress += data.bname; } if (data.buildingName !== '') { extraAddress += extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName; } fullAddress += extraAddress !== '' ? ` (${extraAddress})` : ''; } setInput({ ...input, address: fullAddress, zipcode: data.zonecode }); onToggleModal(); }; const [uploadFile] = useMutation(UPLOAD_FILE); const [imgUrl, setImgUrl] = useState("") const fileRef = useRef<HTMLInputElement>(null) const onClickFile = () => { fileRef.current?.click() } const onChangeFile = async (e: ChangeEvent<HTMLInputElement>) => { const file = e.target.files?.[0]; const isValid = checkFileValidation(file); if (!isValid) { return } if (isValid) { try { const result = await uploadFile({ variables: { file } }) setImgUrl(result.data?.uploadFile.url) } catch (error) { if (error instanceof Error) { Modal.error({ content: error.message }) } } } } const [previewOpen, setPreviewOpen] = useState(false); const [previewImage, setPreviewImage] = useState(''); const [previewTitle, setPreviewTitle] = useState(''); const [fileList, setFileList] = useState<UploadFile[]>([]); const handleCancel = () => { setPreviewOpen(false); }; const handlePreview = async (file: UploadFile) => { if (!file.url && !file.preview) { file.preview = await getBase64(file.originFileObj as RcFile); } setPreviewImage(file.url ?? (file.preview as string)); setPreviewOpen(true); setPreviewTitle(file.url ? (file.name || file.url.substring(file.url.lastIndexOf('/') + 1)) : ""); }; return ( <BoardWrite_presenter onChangeInput={onChangeInput} onChangeCoreInput={onChangeCoreInput} onChangeImages={onChangeImages} writerError={writerError} passwordError={passwordError} titleError={titleError} contentsError={contentsError} zipcode={input.zipcode} address={input.address} onSubmit={onSubmit} onUpdate={onUpdate} valid={valid} isEditing={props.isEditing} data={data} isOpen={isOpen} handleComplete={handleComplete} onToggleModal={onToggleModal} imgUrl={imgUrl} onClickFile={onClickFile} onChangeFile={onChangeFile} fileRef={fileRef} fileList={fileList} handlePreview={handlePreview} setFileList={setFileList} previewOpen={previewOpen} previewTitle={previewTitle} handleCancel={handleCancel} previewImage={previewImage} /> ); } import { Button, Image, Modal, Upload } from 'antd'; import DaumPostcodeEmbed from 'react-daum-postcode'; import { Main, Title } from '../../../commons/styles/emotion'; import * as S from './BoardWrite_styles'; import { type IBoardWrite_presenter_Props } from './BoardWrite_types'; import type { UploadProps } from 'antd/es/upload'; import { PlusOutlined } from '@ant-design/icons'; export default function BoardWrite_presenter( props: IBoardWrite_presenter_Props ) { const valid = props.valid; const isEditing = props.isEditing; const data = props.data?.fetchBoard; const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => { props.setFileList(newFileList); }; const uploadButton = ( <div> <PlusOutlined /> <div style={{ marginTop: 8 }}>Upload</div> </div> ); return ( <Main> <S.Form> <Title>게시물 {isEditing ? '수정' : '등록'}</Title> <div className="writer"> <S.InputWrapper> <label>작성자</label> <input id="writer" onChange={props.onChangeCoreInput} type="text" placeholder="이름을 입력해주세요." defaultValue={props.data?.fetchBoard.writer ?? ""} readOnly={!!props.data?.fetchBoard.writer} /> {props.writerError && ( <p className="alert">이름을 입력해주세요.</p> )} </S.InputWrapper> <S.InputWrapper> <label>비밀번호</label> <input id="password" onChange={props.onChangeCoreInput} autoComplete="off" type="password" placeholder="비밀번호를 입력해주세요." defaultValue={``} /> {props.passwordError && ( <p className="alert">비밀번호를 입력해주세요.</p> )} </S.InputWrapper> </div> <S.InputWrapper> <label>제목</label> <input id='title' onChange={props.onChangeCoreInput} type="text" placeholder="제목을 작성해주세요." defaultValue={data?.title} /> {props.titleError && ( <p className="alert">제목을 작성해주세요.</p> )} </S.InputWrapper> <S.InputWrapper> <label>내용</label> <textarea id='contents' onChange={props.onChangeCoreInput} placeholder="내용을 작성해주세요." defaultValue={props.data?.fetchBoard.contents} /> {props.contentsError && ( <p className="alert">내용을 작성해주세요.</p> )} </S.InputWrapper> <S.InputWrapper> <label>주소</label> <div className="zipcode"> <input id="zipcode" onChange={props.onChangeInput} type="text" // placeholder="00000" readOnly value={ props.address || (props.data?.fetchBoard.boardAddress?.address ?? "") } /> <button onClick={(e) => { e.preventDefault(); props.onToggleModal(); }} > 우편번호 검색 </button> {props.isOpen && ( <Modal title={'우편번호 검색'} open={props.isOpen} onOk={props.onToggleModal} onCancel={props.onToggleModal} > <DaumPostcodeEmbed onComplete={props.handleComplete} ></DaumPostcodeEmbed> </Modal> )} </div> <input id='address' onChange={props.onChangeInput} className="address" type="text" readOnly value={props.address !== "undefined" ? props.address : ""} /> <input id='addressDetail' onChange={props.onChangeInput} type="text" defaultValue={ data?.boardAddress?.addressDetail ? data?.boardAddress?.addressDetail : '' } /> </S.InputWrapper> <S.InputWrapper> <label>유튜브</label> <input id='youtubeUrl' onChange={props.onChangeInput} type="text" placeholder="링크를 복사해주세요." defaultValue={ data?.youtubeUrl ? data?.youtubeUrl : '' } /> </S.InputWrapper> <S.InputWrapper> <label>사진업로드</label> <Button onClick={props.onClickFile}>사진 업로드</Button> <input style={{ display: "none" }} ref={props.fileRef} onChange={props.onChangeFile} type="file" /> </S.InputWrapper> {props.imgUrl && <Image src={`https://storage.googleapis.com/${props.imgUrl}`}></Image>} <S.InputWrapper> <label>사진 첨부</label> <Upload // action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={props.fileList} onPreview={props.handlePreview} onChange={handleChange} > {props.fileList.length >= 8 ? null : uploadButton} </Upload> <Modal open={props.previewOpen} title={props.previewTitle} footer={null} onCancel={props.handleCancel}> <img alt={props.previewTitle} style={{ width: '100%' }} src={props.previewImage} /> </Modal> </S.InputWrapper> <S.InputWrapper> <div className="radios"> <span> <input type="radio" id="youtube" name="radios" value="youtube" defaultChecked onChange={props.onChangeImages} /> <label htmlFor="youtube">유튜브</label> </span> <span> <input type="radio" id="image" name="radios" value="image" onChange={props.onChangeImages} /> <label htmlFor="image">사진</label> </span> </div> </S.InputWrapper> <S.SubmitButton onClick={isEditing ? props.onUpdate : props.onSubmit} valid={valid} disabled={!valid} > {isEditing ? '수정하기' : '등록하기'} </S.SubmitButton> </S.Form> </Main> ); }
-
미해결[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
Error: Not found: 'dart:ffi' 에러
안녕하세요 에러문제로 골머리를 앓다가 질문합니다색상정보 DB에 넣기를 따라하면서 db를 만들고 색상 쿼리를 넣고 문제없이 따라 코딩했지만 처음보는 에러를 보고 혼자 해볼려고 노력했지만 안되네요 ㅠㅠimport 'dart:ffi' 여기에서 Error: Not found: 'dart:ffi' 이 종류의 에러가 나와서 크롬으로 앱이 실행이 안되네요 ㅠㅠ어떤 문제일까요? 사진첨부합니다