묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
오류
강의대로 했는데 왜 오류가 나죠??
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
git 주소
안녕하세요 소스 올려진 git링크 알 수 있을까요?
-
미해결[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
splash screen 화면이 안띄워져요.
안드로이드로 실행하고 있고 앱 아이콘까지 성공하였습니다. 그런데 app. tsx에function Section({children, title}: SectionProps): React.JSX.Element { useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 1000); }); const isDarkMode = useColorScheme() === 'dark';이 코드를 올리면 Cannot read property 'hide' of null 이라고 뜹니다. 그래서 시도해본 방법은-metro 서버 연겨리도 다시해보고-js hide 호출위치를 app()쪽에도 해보고-mainActivity 코드에 SplashScreen.show(this);코드가 잘 있는지 확인도 하고-gradle.properties에 android.enableJetifier=true추가해보고-androidmanifest의 activity에 android:theme="@style/SplashTheme"이 부분도 추가해보고-styles.xml에resource부분에 <!-- ① 스플래시 화면용 테마 --> <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- launch_screen.xml(layout) 을 배경으로 사용 --> <item name="android:windowBackground">@layout/launch_screen</item> </style> <!-- ② 앱 전체용 기본 테마 --> <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> <!-- 여기에 앱 전체 스타일 아이템들을 넣으세요 --> <!-- 예: 상태바 색상, 기본 버튼 스타일 등 --> </style>이렇게도 넣어보아도 앱이 켜지려다가 바로 꺼져버립니다. 로그도 따로 안남고.. 혹시 이 부분에서 왜 이렇게 되고 해결방안이 있을까요??
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
localhost:3000
localhost:3000 하는데 Home Page 가 안뜨고 Hello world 가 뜨는 이유가 뭔가요 ? 코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결React 비기너: 튼튼한 기본 만들기
React 비기너: 튼튼한 기본 만들기 / 섹션 23. React Event / 2. 이벤트 핸들러 작성
버튼 컴포넌트 onClick={handleClick()} jsx 에서 위처럼 적으면 자바스크립트에서 엔진에서 즉시실행함수로 인식하는것 처럼 인식을 해서 렌더링이 되기도전에 함수를 먼저 실행해버리는 현상이 생기는 이유가 맞을까요? 결국 핸들러 함수의 기능도 하지못하고1회용으로 즉시실행되고 소멸해버리는 함수가 되어버리는 것 같아보이는데 이에 대한 정확한 설명이 있을까요? 제가 생각한 이 부분에 보충적으로 필요한 설명을 혹시 해주실 수 있으실까요?
-
해결됨비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
스택, 큐 연결리스트로 구현 과제 완료입니다!
Stack// 숙제: Stack을 LinkedList로 구현하기(단, 시간복잡도는 O(1)) class Stack { tail = null; length = 0; // 가장 마지막에 노드 추가 push(value) { // 새로운 tail이 될 node 생성 const node = new Node(value); // 바꿔치기를 위해 현재 tail은 curr 변수에 저장 const curr = this.tail; // 새로운 tail을 추가하기 this.tail = node; this.tail.prev = curr; // stack의 길이 추가 this.length++; // 길이 리턴 return this.length; } // 가장 마지막 노드 제거 pop() { if (!this.tail) { // tail이 없는 경우 pop할 값이 없기 때문에 아무 동작도 하지 않음 } else { // pop될 node의 value를 변수에 저장 > 리턴 예정 const value = this.tail?.value; // 현 tail의 prev 값을 변수에 할당 > 새 tail이 될 예정 const prev = this.tail.prev; // 바꿔치기 this.tail = prev; // stack의 길이 줄이기 this.length--; // pop된 기존 tail의 value 리턴 return value; } } // Stack의 가장 마지막 원소 조회 top() { return this.tail?.value; } } class Node { prev = null; constructor(value) { this.value = value; } } const stack = new Stack(); console.log(stack); console.log(stack.push(3)); // 1 console.log(stack.push(1)); // 2 console.log(stack.push(5)); // 3 console.log(stack.push(2)); //4 console.log(stack.push(4)); //5 console.log(stack.pop()); // 4 > pop된 가장 마지막 값 리턴 console.log(stack.top()); // 2 console.log(stack.pop()); // 2 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // 5 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // 1 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // 3 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // undefined console.log(stack.top()); // undefined console.log("stack"); Queue// 숙제: Queue를 LinkedList로 구현하기(단, 시간복잡도는 O(1)) class Queue { head = null; tail = null; length = 0; // 가장 마지막에 노드 추가 enqueue(value) { const node = new Node(value); if (!this.head) { this.head = node; } else { let currHead = this.head; while (currHead.next) { currHead = currHead.next; } currHead.next = node; } const currTail = this.tail; this.tail = node; this.tail.prev = currTail; this.length++; return this.length; } // 가장 맨 앞 노드 제거 dequeue() { // head는 다음 값으로 변경 const value = this.head.value; this.head = this.head.next; // tail에 연결된 가장 맨 앞 값 삭제 => 가장 맨 앞에서 두번째의 prev를 null로 만든다 let currTail = this.tail; let prevTail; while (currTail?.prev) { prevTail = currTail; currTail = currTail.prev; } if (prevTail?.prev) { prevTail.prev = null; } else { this.tail = null; } this.length--; return value; } // Queue에서 가장 앞 쪽에 있는 값 조회 peek() { return this.head.value; } } class Node { prev = null; next = null; constructor(value) { this.value = value; } } const queue = new Queue(); console.log(queue.enqueue(1)); // 1 console.log(queue.enqueue(3)); // 2 console.log(queue.enqueue(5)); // 3 console.log(queue.enqueue(2)); // 4 console.log(queue.enqueue(4)); // 5 console.log(queue.peek()); // 1 console.log("dequeue"); console.log(queue.dequeue()); // 1 console.log(queue.dequeue()); // 3 console.log(queue.dequeue()); // 5 console.log(queue.dequeue()); // 2 console.log(queue.dequeue()); // 4 console.log("queue");
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
{}안에 들어가는 값으로 숫자, 문자열, 배열의 값 뿐만 아니라 태그도 쓸 수 있는 건가요?
10:04에서의 문법을 보면 div안에 {}가 들어간 것이 아니라 {}안에 div태그를 넣는데 제대로 동작하는 것을 보면 그렇다고 생각합니다.
-
미해결React 비기너: 튼튼한 기본 만들기
React 비기너: 튼튼한 기본 만들기 / 섹션22. 이벤트 핸들러 강의 / Content Attribute와 IDL Attribute 사용 방식에 대한 질문드립니다
안녕하세요.항상 좋은 인사이트와 경험을 공유해주셔서 감사드립니다.최근 프론트엔드 개발을 공부하면서 "Content Attribute"와 "IDL Attribute"의 사용 방식에 대해 고민하게 되었습니다. 이를 정리해보면서 나름대로 다음과 같은 결론에 이르렀습니다.Content Attribute는 변하지 않는 어트리뷰트 값이나 리소스를 표현할 때 사용하고,그 외, 동적으로 핸들링이 필요한 경우에는 IDL Attribute를 사용하는 것이 맞다고 이해하고 있습니다.이러한 개념을 공부하면서, 현업에서 다양한 코드들을 보게 되었는데요, 특히 주니어 개발자분들이 작성한 코드에서는 Content Attribute를 많이 사용하는 반면, 시니어 개발자나 CTO급 분들의 코드에서는 Content Attribute 사용이 상대적으로 적고, 대부분 IDL Attribute를 적극적으로 사용하는 모습을 많이 볼 수 있었습니다.이런 현상을 보며 자연스럽게 궁금증이 생겼습니다.왜 경험 많은 개발자일수록 Content Attribute 사용이 줄어드는 걸까?Content Attribute 방식과 IDL Attribute 방식에 대해 어떻게 생각하시고, 어떤 기준으로 선택하시는지 궁금합니다.혹시 이 부분에 대해 간단히 의견을 들려주실 수 있다면 큰 도움이 될 것 같습니다.(물론 바쁘시다면 답변 주시지 않아도 괜찮습니다! 이렇게 질문을 정리하는 과정만으로도 많은 공부가 되고 있습니다.)읽어주셔서 감사합니다.좋은 하루 되세요.
-
미해결[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
sunriseData 코드
2분 22초에서 return 문 앞에 const sunriseData = weatherData ? new Date(weatherData.sys.sunrise);이렇게 코드를 적었는데 이후의 코드에서는 갑자기 보이지 않아 이 코드는 어디가고이후의 return 앞에는 이 코드가 오게 되었는지 궁금합니다.const formatTime = timestamp => { const date = new Date((timestamp - 9 * 3600) * 1000); // UTC timestamp에 9시간 추가 return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}); // 로컬 시간으로 포맷 }; 제가 이해할 때는 sunriseData가 wetherData의 unixtime을 현재 우리가 보는 시간으로 바꾸어 저장하는 것인데...아래의 formatTime은 sunriseData를 대체한 코드인가요?(시차도 적용한?)
-
미해결React 비기너: 튼튼한 기본 만들기
React 비기너: 튼튼한 기본 만들기 / 섹션22. 이벤트 핸들러 / 3. 이벤트 핸들러: 콘텐트 속성 7:00
p id =one onclick=show() 1. five 오브젝트를 클릭할때 one onclick 이벤트삭제2. five 오브젝트를 클릭할때 one onclick null 로 재할당2번을 쓰게 되는 경우가 어떤경우가 일까요?1번방법이 일반적으로 쓰게될 것 같다는 생각이 듭니다
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
react 에서 css불러오기 오류
import "./Main.css";나import "../Main.css"; 둘다 해봤는데css를 컴포넌트로 불러오기 오류떠요 ㅠㅠ
-
해결됨이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발
./forest.png 파일은 어디서 다운 받을 수 있을까요?
./forest.png 파일은 어디서 다운 받을 수 있을까요? 보이지 않는 것 같습니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Context 분리하기 중에서 memoizedDispatch에 useMemo를 사용하는 이유가 궁금합니다.
안녕하세요. 리액트 초보입니다. 이해하기 쉽게 설명해주셔서 감사합니다. 11.3) Context 분리하기 강의 약 7분 쯤에서 궁금한 부분이 있어서 질문 남깁니다. <TodoDispatchContext.Provider> 를 통해 context를 전달할 때, 함수를 캐싱하기 위해 강의에서는 아래와 같이 useMemo를 사용해주셨는데요! const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); 우선 최적화하고자 한 이유는 아래와 같다고 이해했습니다. onCreate, onUpdate, onDelete 모두 한 번 생성한 후에 바뀌지 않는 함수로, TodoDispatchContext를 참조하는 자식 컴포넌트들의 리렌더링 방지 그리고 useMemo를 사용하신 부분에서는 마운트 후 onCreate, onUpdate, onDelete는 변하지 않는 함수 이므로 "값을 캐싱한다"는 의미에서 useMemo를 사용해주셨다고 이해했습니다. 다만 useCallback도 mount 후 deps 변경 전에는 함수의 중복 생성을 방지한다는 점에서는 useCallback을 사용해도 좋을 것 같단 생각이 들었는데요, 결론적으로 제가 궁금한 부분은 아래와 같습니다. useMemo 대신 useCallback을 사용해서도 동일하게 최적화 할 수 있다고 이해했는데, 제가 이해한 게 맞을까요? 1번이 맞다면 강의에서 useMemo를 사용해주신 이유는 캐싱하기 위함(의도)을 표현하기 위함이라고 이해하면 될지도 궁금합니다! 실무에서는 useMemo와 useCallback을 모두 사용할 수 있는 경우 어떤 훅을 선택하시는지, 강의에서 useMemo를 통해 캐싱하신 이유가 궁금했습니다 ! 블로그를 찾아봐도 잘 이해가 되지 않아서 질문으로 남깁니다! 답변 주시면 감사하겠습니다!
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
4:45 부터 무한로딩되어 재생이 안됩니다ㅠ
안녕하세요!7.스코프 편 강의를 듣고 있는데 4:45부터 재생이 끊깁니다. 이전 강의(정확히 어느 편이었는진 기억이 안남) 에서도 동일한 현상이 있었는데 다행히 영상이 거의 끝날 쯔음이라 신경 쓰지 않았는데 지금은 아예 중간부터 끊겨서 강의에 지장이 생기네요ㅠㅠ 단순히 제 PC의 문제로 봐야할까요..? ㅠ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
VS코드에러
VS코드에서 에러는 뜨는데 실행은 됩니다.강의VS코드에서는 에러 안뜨던데 왜 제꺼에서만 에러가 뜰까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
<> </> 의미
여기서 에러떠서리턴문 안에<> </> 추가했더니 해결됬어요<> </> 의미가 뭐죠?
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
vitest 설치했는데
이렇게 발견된 테스트가 없다면서 8:39 화면처럼 테스트확장에 리스트가 출력되지않습니다.. 브랜치받고 npm ci 까지 한 상태입니다.커서 ide 참고로 0.2.42 버전 없어서 제일낮은 0.3 버전사용해도 못찾습니다 .. Vitest v0.33.0 is not supported. Vitest v1.4.0 or newer is required. 이렇게 출려되는데 버전을 올릴까요 ?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
create_chat에서 빈 객체 보낼 때 ValidationPipe 예외 안 던지는 현상이 있습니다.
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 강의 중 WebSocket에서 create_chat 이벤트에 빈 객체 {}를 보냈을 때, ValidationPipe가 예외를 잘 던져서 클라이언트(Postman)에서 exception 이벤트가 잘 발생하는 걸 확인했습니다.그런데 제가 강의 코드와 동일하게 다음과 같이 작성했는데요그런데 제가 Postman에서 {}만 보냈을 때는 ValidationPipe가 예외를 던지지 않고,exception 이벤트도 발생하지 않아서 디버깅에 꽤 시간이 걸렸습니다.CreateChatDto에 @IsDefined()를 추가하니까 그제서야 예외가 발생해서 Postman에서 exception이 감지됐습니다. 왜 강의에선 @IsDefined() 없이도 {}만 보내면 예외가 잘 발생하던데, 현재는 왜 @IsDefined()를 추가해야만 예외가 던져지는 걸까요?
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
로그인 에러발생만하면 네트워크 커넥션 에러 발생 해결
계속 에러만 발생하면 아에 서버가 꺼지더라구요 if (!user) { res.status(401).send('Authentication failed. User not found.'); } 위에 해당코드에 return 해주니 되더라구요 이미 401에러인데 리턴 끝내지않아서 아래도 실행이 되는게 문제였습니다. if (!user) { return res.status(401).send('Authentication failed. User not found.'); }
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
Node 설치했는데 NPM 버전 확인 안될때
PS C:\Users\devee> node -vv22.15.0PS C:\Users\devee> npm -vnpm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1+ npm -v+ ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 라는 오류를 발견했을 때, PS C:\Users\devee> Get-ExecutionPolicyRestrictedPS C:\Users\devee> Set-ExecutionPolicy RemoteSignedPS C:\Users\devee> Get-ExecutionPolicyRemoteSignedPS C:\Users\devee> npm -v10.9.2 실행 정책 변경하자