묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
github 404 뜹니다~
공유해주신 리포지토리 404 뜹니다. private 인거 같네요 ^^
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
현재 강의 Express 프레임워크 사용하기 를 듣고 있는데요
이전 강의인 그랩 마켓 서버 구축하기 에서는 node_modules가 없었는데 이번 강의부터는 생성 되어있습니다.생성 과정을 건너뛰셨다면 어디서 확인할 수 있는지는 강의에 포함시켜주시는게 맞는거 같습니다.
-
미해결처음 만난 리액트(React)
props에 대해 궁금한 점이 있습니다.
우선 좋은 강의를 무료로 제공해 주신다는 점에 매우 감사드립니다 🙂다름이 아니라 props에 대해 궁금한 점이 있어서 글 남깁니다.function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }만약 위와 같이 코드를 작성했다고 하면, 이 컴포넌트를 사용할 때 아래와 같이 사용할 것으로 예상됩니다.root.render( <React.StrictMode> <SampleComponent name={'kim'} age={12} /> </React.StrictMode> );근데 만약 코드가 매우 길어지고, props로 넘겨야 하는 것들이 많아진다고 가정해 보겠습니다. 예를 들어props.nameprops.ageprops.universityprops.profilePhotoprops.gradeetc...이런 경우에는 도대체 props로 어떤 것들을 넘겨 주어야 하는지 굉장이 헷갈리는 상황이 발생할 것 같은데 이를 해결하기 위한 방법이 있을지 궁금합니다. ++ 제가 찾아본 바로는 아래와 같이 코드를 작성하면 된다고 합니다.function SampleComponent({name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> </div> ); }그런데 이 방식을 사용하게 되면 children은 어떻게 넘겨 줄 수 있는지가 궁금합니다. 그냥 아래와 같이 처리하면 되는 것일까요?function SampleComponent({children, name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> <div>{children}</div> </div> ); }또한, 이 방식이 맞는 방식이라면, 굳이 아래 코드와 같이 props를 사용하시는 이유가 무엇인지도 궁금합니다.function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
코딩환경설정 강의 중에서 질문입니다
코딩환경설정 강의에서 크롬-> ctrl+shift + I 누르면 저 화면이 나오는데 조금 다릅니다... 강의 화면이랑 똑같은 화면 모습으로 같이 수업을 참여하고 싶은데 어떻게 설명해야 되나요 ?
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
@Column update 프로퍼티
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.코드팩토리 통합 링크https://links.codefactory.aiFlutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다! -- 질문강사님은 update 프로퍼티를 false로 설정하고 patch 요청을 보내면 500 에러가 발생하였는데 저는 다시 해봐도 업데이트는 실제로 안되었지만.. 500에러는 발생이 안되네요. 설정을 잘못한것일까요?.
-
미해결처음 만난 리액트(React)
리액트 연동 오류
안녕하세요. 실습 따라하는데 리액트 연동이 안된건지 버튼이 페이지에 안뜨는데 코드를 비교해도 뭐가 문제인지 모르겠어요
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. 훅 테스트 질문이 있습니다!
예제에서 말씀해주신것처럼,result.current.setState() 를 호출해서 act() 를 통해 업데이트 된 상태를 검증하는 방법을 말씀해주셨는데요. 훅 내부 이펙트에서 상태를 업데이트하는 로직을 검증하려면 어떤 식으로 검증해야할까요? export const useDarkMode = (defaultTheme = THEME["LIGHT"]) => { const [theme, setTheme] = useState(defaultTheme); const changeTheme = (type: keyof typeof THEME) => { setTheme(THEME[type]); }; useLayoutEffect(() => { const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)"); const changeListener = ({ matches }: MediaQueryListEvent) => { setTheme(THEME[matches ? "DARK" : "LIGHT"]); }; mediaQueryList.addEventListener("change", changeListener); return () => { mediaQueryList.removeEventListener("change", changeListener); }; }, []); return { theme, changeTheme, }; }; 위 useDarkMode() 훅 내부 useLayoutEffect() 에서window.matchMedia 의 change 이벤트를 감지하면, setTheme() 하도록 설계되어 있는데요. window.matchMedia 함수의 matches 결과를 true 로 모킹하고,window.matchMedia.dispatchEvent('change') 를 일으켜 검증을 시도해보았는데요.생각처럼 검증이 되지 않는 것 같습니다.ㅠ 혹시 이렇게 검증을 시도하는 것이 맞는지. 검증하는게 맞는지. 여쭤봐도 될까요? 감사합니다.
-
미해결따라하며 배우는 자바스크립트 A-Z
Todo App(1) 스타일 파일 코드
StopWatch 자료만 있고, Todo App 자료 및 스타일 파일 코드 자료가 없는데, 혹시 어디 있을까요????
-
미해결Vue 3 시작하기
vue 개발자도구에서의 timeline
강사님꺼에선 refresh라는 로그가 보이는데 제꺼에선 안보이네요ㅠㅠ 4layers라는 검정색 동그라미 버튼 누르니까 log가 찍히는건 다른 레이어에서 확인했으나 mouse에서만 보이지 componet events에서는 나오지 않습니다ㅠㅠ 새로고침 이라고 뜨는 것 보면 잘은 나오는 것 같은데...이 부분 어떻게 해야 해당 refresh log를 볼 수 있을 지 궁금합니다! 코드는 강사님과 똑같히 했다고 생각하는데, 우선 첨부합니다!<div id = "app"> <!-- <app-contents v-on:이벤트이름 = "상위 컴포넌트의 메서드 이름"></app-contents> --> <app-contents v-on:refresh = "showAlert"></app-contents> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> var appContents={ template:` <p> <button v-on:click = "sendEvent">갱신</button> </p> `, methods:{ sendEvent(){ this.$emit('refresh'); } } } //root 컴포넌트 Vue.createApp({ methods:{ showAlert(){ alert('새로고침'); } }, components:{ //'컴포넌트 이름' : 컴포넌트 내용 'app-contents':appContents } }).mount('#app'); </script>
-
미해결처음 만난 리액트(React)
The `punycode` module is deprecated
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.주소 따라 들어가면 왜 이렇게 되는지 잘 모르겠어요... ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
이런경우 npm i nodemon -g 로 설치하는게 더 나은게 아닌가요??
제가 알기로 npm의 경우 -g 라는 글로벌 설치 기능이 존재해서현재 위치에 한정되지 않고 사용이 가능한걸로 알고 있습니다. 앞선 강의에서 빠른 속도등의 이유로 yarn을 쓴다고 하셨지만,nodemon 같이 여러 폴더에서 사용하는 경우에는 npm 글로벌 설치를 하는게, 계속 설치를하고 실행문을 설정해주고 하는 번거러움 같은 측면을 따져본다면 더 좋은 방법이지 않나 하는 생각이 듭니다. 이번 강의에서 yarn과 npm을 혼용해서 쓰지 않는게 좋다고 하셨지만, 글로벌 설치를 하는게 유리한 경우는 npm을 써서 글로벌 설치를 하는게 더 나은지, 아니면 그래도 혼용을 해서 쓰면 안되는지, 그렇다면 yarn이 글로벌 설치가 가능한 npm을 안쓰면서 쓸 장점이 속도 말고 다른게 있는지 궁금합니다.
-
미해결조코딩의 코딩 기초와 웹 풀스택 개발
livesurver가 작동이 안돼요.
안녕하세요, 강의를 보던 중 궁금한게 있어서 문의 드립니다. 라이브서버를 다운받고 'open with live surver' 를 눌렀는데 크롬에서 영상처럼 연동이 안되네요. 인터넷 찾아보면서 세팅설정도 바꿔보고 했는데도 안되네요. 뭐가 문제인지 알려주실 수 있으신가요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
빌드 파일의 일부 페이지에서 이미지 파일이 제대로 불러와지지 않습니다.
빌드 폴더가 아닌 오리지널 폴더로 npm start로 확인했을 때에는 알맞게 사진이 불러와집니다. 하지만 빌드 후에 serve 명령으로 실행했을 때에 Diary.js , Edit.js에서 사진을 제대로 불러오고 있지 않습니다. 제가 콘솔로 확인했을 때에 이미지의 상대 주소는 잘 찍히고 있는 것 같은데, 어디에서 빌드 후에 문제가 생기는 건지 잘 모르겠습니다. 깃허브 주소 남깁니다.https://github.com/yminjuu/Emotion-Diary
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
debug toolbar가 거슬리시는 분 주목
debug toolbar는 위치 설정 값은 commandCenter, docked, floating, hidden 인데요. 이 설정값의 기본 값은 floating 입니다. 이 위치 상태 기본 값을 변경하기 위해서 다양한 선택지가 있지만 기본적으로 세팅할 수 있는 방법을 알려드립니다. 프로젝트 내 .vscode/settings.json이 있으신 분{ ..., "debug.toolBarLocation": "commandCenter" }작업영역 세팅을 바꾸는 방법command+shift+p 입력 후 Preferences: Open Workspace Settings 입력Debug: Tool Bar Location 입력드롭다운 메뉴에서 원하는 위치 설정
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
코드 리팩토링 이렇게 해도 되나요??
수업 내용 코드는function checkPhone(myphone) { if (myphone.length < 10 || myphone.length > 11) { console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!"); return false; } else { return true; } } function getToken() { let result = String(Math.floor(Math.random() * 100000)).padStart(6, "0"); console.log(result); return result; } function sendTokenToSMS(myphone, result) { console.log(myphone + "번호로 인증번호" + result + "를 전송합니다."); } function createTokenOfPhone(myphone) { const isValid = checkPhone(myphone); if (isValid === false) return; const mytoken = getToken(); sendTokenToSMS(myphone, mytoken); } createTokenOfPhone("01012345678"); // 01012345678: 인자(argument) 이렇게 되어있는데createTokenOfPhone 함수에서 isValid 상수를 꼭 선언해야하나요?? function checkPhone(myphone) { if (myphone.length < 10 || myphone.length > 11) { console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!"); return true; } } function getToken() { let result = String(Math.floor(Math.random() * 100000)).padStart(6, "0"); console.log(result); return result; } function sendTokenToSMS(myphone, result) { console.log(myphone + "번호로 인증번호" + result + "를 전송합니다."); } function createTokenOfPhone(myphone) { if (checkPhone(myphone)) return; const mytoken = getToken(); sendTokenToSMS(myphone, mytoken); } createTokenOfPhone("01012345678"); // 01012345678: 인자(argument) 이렇게 checkPhone()이 문제있을 때만 true를 반환하고,checkPhone()이 true일 경우 return 처리하면 코드가 더 짧아지기는 하는데수업에서 말씀하시는 협업의 가독성을 위해서 isValid라는 상수를 선언해줘야 하는지 아니면 제가 생각한 방식으로 코드를 줄여도 괜찮은건지 궁금합니다.
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
prop이나 state 값을 검증하지 않는다는 의미가 궁금합니다!
const textField = screen.getByPlaceholderText('텍스트를 입력해 주세요.'); expect(textField).toHaveClass('my-class');이부분에서 className이란 내부 props, state 값을 검증하는 게 아닌가 싶어서 질문을 드렸습니다. 물론, className에 따라 변경되는 DOM을 파악한다는 의미로도 해석이 될 수는 있을 것 같긴 하지만 더 정확한 문맥을 알고 싶어서 질문드렸습니다..!
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
originData.id 대신 useParams로 받은 id를 사용하여 삭제하면 안되는 이유
LocalStorage 사용 강의의 16분 50초 부근 "삭제하기" 버튼 관련 질문입니다.처음에 혼자 구현을 하려고 할 때 originData.id 대신 id를 onRemove에 파라미터로 전달했을 때 작동이 안됐는데 originData.id로 해야 삭제되더라고요. 콘솔로 찍었을 때 둘 다 일기 데이터의 id로 같은 걸 가리키는 것으로 나오는데 제가 잘못 알고 있는 부분이 있을까요? 안되는 이유가 무엇인가요? const handleDelete = () => { if (window.confirm("정말 삭제하시겠습니까?")) { console.log(id); console.log(originData.id); onRemove(originData.id); navigate("/", { replace: true }); } };
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
localStorage에 지역과 날씨를 저장하는 장점이 있을까요??
앞 강의 끝날때는 지연을 줄이기 위해 로컬스토리지에 저장하는걸 알아보자 하고 끝났는데,해당강의에서는 로컬스토리지 중복체크 내용을 다루고 계셔서 로컬스토리지에 저장하는 장점에 대한 궁금증이 생깁니다.강의 내용을 보면 로컬스토리지 저장된 데이터와 관련된거 먼저 보여주고, 통신 데이터가 로컬스토리지와 다르면 다른 데이터를 로컬에 저장하면서 관련된걸 보여주는식인것 같습니다.제 생각으론 같은 지역 같은 날씨, 그리고 자주 접속하거나 새로고침을 자주 한다면 좋은 방법같은데,다른 지역 이나 다른날씨 라면 처음 데이터가 오히려 잘못된걸 보여주고 늦게 바뀌는거라 그런면에서 보면 해당 기능이 장점인지가 궁금합니다.만약 큰 장점이 아니라면 로컬에 저장하고, 그 정보를 먼저보여주고, 다르다면 로컬정보 바꾸고, 해당 정보 보여주고 하는 과정의 기능이 필요한가 의문이 듭니다.아무래도 지연을 줄이기위해 로컬스토리지를 사용한다길래 무슨 방법이 있나 싶었다가 기대했던것과 다른방향이라 의문이 생겨 질문남겨봅니다.제가 잘못 이해했거나, 놓치고 있는 다른 이유가 있다면 알려주시면 감사하겠습니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
TypeOrm 1:N을 설정하는데 before initialization 에러가 발생합니다.
안녕하세요.강의 잘 듣고 있습니다! TypeOrm으로 OneToMany relation을 추가하려고 하는데 before initialization 에러가 발생하고 있는데 해결이 안되고 있습니다ㅠ확인 부탁드려요!@Entity('new_users') export class UserModel { @PrimaryColumn() id: string; @Column() name: string; @DeleteDateColumn({ name: 'deleted_at' }) deletedAt: Date; @CreateDateColumn({ name: 'created_at' }) createdAt: Date; @UpdateDateColumn({ name: 'updated_at' }) updatedAt: Date; @OneToMany(() => UserSocialModel, (userSocial) => userSocial.user) userSocials: UserSocialModel[]; }@Entity('new_user_socials') export class UserSocialModel { @PrimaryColumn() id: string; @Index() @ManyToOne(() => UserModel, (user) => user.userSocials) user: UserModel; }
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
다른 방법으로 풀이했는데 삽입 정렬이 맞을까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. function solution(arr) { let answer = arr; for (let i = 0; i < arr.length; i++) { for (let j = 1; j < arr.length; j++) { if (arr[j - 1] > arr[j]) { [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]]; } } } return answer; } // test case console.log(solution([11, 7, 5, 6, 10, 9]));