묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onDelete관련
안녕하세요 onDelete관련 질문 드립니다. <DiaryList onDelete={onDelete} diaryList={data} />해당 부분에서 onDelete와 {onDelete} 의 역할이 다른 것인지 궁금합니다 두번째 onDelete는 앞서 작성한 함수를 전달한 것으로 이해했는데 앞에 있는 onDelete는 js의 onClick onFocus 처럼 이벤트핸들러인지 단순 설정한 props명 인 것인지 궁금합니다
-
해결됨코어 자바스크립트
호이스팅 관련 질문
안녕하세요! 정말 좋은 강의 잘 들었습니다. 실행 컨텍스트 강의에서 설명 해주신 호이스팅 관련하여 질문드립니다.environmentRecord에서 정보 수집 과정을 쉽게 이해하기 위해 만든 허구의 개념이라 설명하시면서 동시에 "현재 문맥의 식별자 수집하는데 호이스팅이라는 개념과 일치하다." 라고 설명하셨는데 제가 느끼기엔 '달걀이 먼저인지 닭이 먼저이지' 처럼 헷갈려서 질문드립니다.environmentRecord에서 정보 수집 과정을 쉽게 이해하기 위해서 hosting이라는 개념이 생긴건지 , 아니면 hosting이라는 것은 식별자 정보를 실행 컨텍스트 맨 위로 끌어올리는 개념이고 이것이 문맥의 environmentRecord에서 정보 수집하는 과정과 동일하다고 하는 것일까요..스코프체인은 외부식별자 정보를 참조하기 위해서 스코프체인이라는 개념이 생겼다라고 딱 이해가 가는데, 호이스팅은 윗 부분이 이해가 가지 않아서 질문드려요!답변 주시면 감사드립니다!
-
해결됨입문자를 위한 자바스크립트 기초 강의
고양이 api
고양이 api주소 좀 혹시 알려주실수 있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
ERROR [TypeOrmModule] Unable to connect to the database
ERROR [TypeOrmModule] Unable to connect to the database이 에러가 일어났다 안일어났다가해요. nestjs에서 typeorm으로 mysql에 table entity를 저장해주는 과정에서 db에 접속이 안되었다. 1. TypeOrmModul.forRoot안의 오타확인 -> 없었다 2. Entity에 이상이 있는지확인 -> 없었다 3. 구글링에서는 대부분이 오타문제이거나 데이터베이스를 생성해주지않았다는 문제라고했다 -> 데이터베이스도 켜져있었고 티미널이랑 dbeaver에서도 mysql과 접속이 되고있는것으로 확인 4. 컴퓨터가 버그로 안되는 걸로 예상해 잠시 종료했다가 실행 -> 역시안됐다 5. 비밀번호를 숫자로 입력해서 string이아닌 number형식으로 작성했는데 password는 string 타입만 작성가능하다고 오류가나왔다 - 문제해결 -> root 비밀번호를 string타입으로 변경하니까 오류가 해결되었다 -> 숫자로 입력하니 넘어오는 과정에서 숫자가 string형태로 변경되어 접속오류로 판명 -> 비밀번호는 문자열로.....-> 이게 전날에 연결이 안되어서 해본결과였고 오늘 했을때에는 연결이되었는데 두번째 접속을 하니까 연결이 안되서dbeaver에서랑 터미널에서 접속을 했을때는 문제가 없었습니다.왜계속해서 이런오류가 불규칙적으로 일어나는지 모르겠습니다.그리고 두번째 질문은 nestjs독스에서는 synchronize: true,이부분을 false로 권장하고있는데 그이유로는 데이터 손상?유실이 있을수있다고 써져있는데 수업중에는 true로되어야지 동기화가 된다고 하셔서 이부분도 설명 부탁드릴수있을까요마지막으로 세번째 질문으로는 dbeaver에서재연결요청을 했을때 Datasource was invalidatedLive connection count: 2/2이렇게 나오는데 이러면 mysql이 켜져있는 상태인건가요? 해당 database는 다볼수있는데 offline인데 그전에 연결이되서 볼수있는건가하는 의심이 들어서질문드렸습니다import { ApolloDriver, ApolloDriverConfig as ad } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { GraphQLModule } from '@nestjs/graphql'; import { BoardsModule } from './apis/boards/boards.module'; import { TypeOrmModule } from '@nestjs/typeorm'; import { Board } from './apis/boards/entities/board.entity'; @Module({ imports: [ BoardsModule, // ProductsModule, // UsersModule, GraphQLModule.forRoot<ad>({ // forRoot의 데이터타입지정 <> -> 제네릭 부분 driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', // 자동으로 스키마 파일을 생성 .gql로마무리 해주기 // 실행은 package.json이 있는 위치에선 // graphql은 스키마 파일이 있어야 실행이 가능하다 // 자동이든 직접 작성하든 작성해주어야한다. }), TypeOrmModule.forRoot({ type: 'mysql', host: 'localhost', // 도커할때는 네임레졸루션이 들어가야함 port: 3306, username: 'root', password: 'root', database: 'myproject', entities: [Board], // 해당하는 테이블을 작성 logging: true, // 어떻게 변형되어서 넘어가는지 디버깅 synchronize: true, // entity.ts와 db를 동기화 해주는 작업 }), ], // 합치는 부분 }) export class AppModule {}
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
프로젝트 고민 다시올립니다.
1. 전체 화면으로는 이렇게 잘 뜨는데 화면 크기를 줄였을 경우에는 이렇게 뜹니다. input 창이 왼쪽으로 이동하면서 아이디(*), 비밀번호(*)가 세로로 바뀌는데 이를 위한 해결책을 부탁드립니다.2. 이와 같이 ' alert-message'가 발생할 경우, input창이 왼쪽으로 또한 밀리면서 세로로 바뀝니다. 이에 대해 해결책을 코드를 통해 부탁드립니다.그리고 중복 확인 기능을 추가 시키려 하는데 js으로 만들 수 있나요? 만들 수 있다면 알려주시면 감사하겠습니다.<html> <head> <meta charset="UTF-8"> <title>회원가입</title> <meta name = "keyword" content = "회원가입, html"> <link rel = "stylesheet" type = "text/css" href = "style/project.css"> </head> <body> <header> <h1>회원가입</h1> <hr/> </header> <form action = "project.html" method = "POST"> <fieldset> <legend> 계정 정보 </legend> <div class = "id"> <label for = "id-account" id = "id">아이디(*)</label> <input type = "text" name = "login_id" id = "id-account" required = "required"> </div> <div class="alert-container"> <span class="alert-message" id="account-alert">TEST</span> </div> <button type = "submit" id = doublecheck-button>중복 확인 </button> <div class = "password"> <label for = "id-password">비밀번호(*)</label> <input type = "password" name = "password" id = "id-password" required = "required"> <span class = "alert-message">TEST</span> </div> <span class = "alert-message">TEST</span> <div class = "repassword"> <label for = "id-repassword">비밀번호 확인(*)</label> <input type = "password" name = "repassword" id = "id-repassword" required = "required"> <span class = "alert-message">TEST</span> </div> <div class="required-text">(*은 필수 입력 항목입니다.)</div> </fieldset> <fieldset> <legend>개인 정보</legend> <div class="form-item"> <label for = "id-name">닉네임(*)</label> <input type = "text" name = "nickname" id = "id-nickname" required = "required"> </div> <div class = form-item> <label>이메일(*)</label> <div class = email-inputs> <input class="box" name = "email" id="domain-txt" type="text"/> <span class="at-symbol">@</span> <input class="box" name = "email_select" id="domain-txt1" type="text"/> <select class="box" name = "email_select" id="domain-list"> <option value="type">직접 입력</option> <option value="yu.ac.kr">yu.ac.kr</option> <option value="naver.com">naver.com</option> <option value="gmail.com">gmail.com</option> </select> </div> </div> <div> <label>대학, 학과(*)</label> <select name = "department" id = "university" onchange = "changeDepartment()" required = "required"> <option> 대학 선택 </option> <option> 문과대학 </option> <option> 인문대학 </option> <option> 자연과학대학 </option> <option> 공과대학 </option> <option> 기계IT대학 </option> <option> 소프트웨어융합대학 </option> <option> 사회과학대학 </option> <option> 경영대학 </option> <option> 의과대학 </option> <option> 약학대학 </option> <option> 생명응용과학대학 </option> <option> 생활과학대학 </option> <option> 사범대학 </option> <option> 음악대학 </option> <option> 예술대학 </option> </select> <select name = "department_select" id = "department" required = "required"> <option> 학과 선택 </option> </select> </div> <div> <label>성별(*)</label> <input type = "radio" name = "gender" id = "id-gender-male"/ required = "required" value = "male"> <label for = "id-gender-male">남</label> <input type = "radio" name = "gender" id = "id-gender-female"/ required = "required" value = "female"> <label for = "id-gender-female">여</label> </div> <div class="required-text">(*은 필수 입력 항목입니다.)</div> </fieldset> <fieldset> <legend>선택 입력 사항</legend> <div class = "phone"> <label>휴대전화 번호</label> <select name = "memberPhone_sub"> <option> 010 </option> </select> <input type = "text" name = "memberPhone" id = "memberPhone"> </select> </div> </fieldset> <div> <input type = "checkbox" name = "agree" id = "id-agree"/ required = "required"> <label for = "id-agree"> 개인정보 수집에 동의합니다. </label> </div> <button type = "submit">가입하기 </button> </form> </body> <script type ="text/javascript" src = "scripts/project.js"></script> </html> h1 { text-align: center; font-size: 25pt; font-weight: 500; } legend { text-align: center; font-weight: 300; position: relative; } fieldset { display: flex; flex-direction: column; margin-bottom: 10px; /* 각 항목 사이의 간격 조정 */ } div{ font-weight: 300; line-height: 250%; padding: 5px; } fieldset { line-height: 500%; } .required-text{ font-size: 100%; color: #FF0000; font-weight: bold; } .phone{ justify-content: center; } fieldset { display: flex; flex-wrap: wrap; } .alert-message { color: #FF0000; font-size: 14px; font-weight: 900; } .alert-container { display: flex; flex-direction: column; } .submit-button { width: 100px; } .id, .password, .repassword { display: flex; align-items: center; margin-right: 1100px; } .id label, .password label, .repassword label { flex: 1; } .id input[type="text"], .password input[type="password"], .repassword input[type="password"] { flex: 1; } select.box { flex: 0; display: flex; align-items: center; margin-right: 800px; } .id-nickname{ margin-right: 500px; } option { font-size: 8px; } .info .box#domain-list option { font-size: 8px; background-color: #ffffff; } .at-symbol { margin: 0 5px; } .form-item label[for="id-name"] { margin-right: 5px; } .form-item { display: flex; align-items: center; margin-bottom: 10px; /* 각 항목 사이의 간격 조정 */ } .email-label { display: flex; align-items: center; } .email-inputs { display: flex; align-items: center; } /*중복확인 기능 버튼*/ button[type="submit"] { width: 100px; /* 적당한 가로 길이로 지정 */ }window.addEventListener('load', function() { clearMessages(); var formElem = document.querySelector('form'); formElem.onsubmit = submitForm; }); function clearMessages(){ var messages = document.getElementsByClassName('alert-message'); for(var i = 0; i < messages.length; i++){ messages[i].style.display = 'none'; } } function showMessage(inputElement, message){ var messageElem = inputElement.parentNode.querySelector('.alert-message'); messageElem.style.display = 'block'; messageElem.innerText = message; inputElement.focus(); } function submitForm() { //acount info var accountInput = document.querySelector('input[name="login_id"]'); var passwordInput = document.querySelector('input[name="password"]'); var passwordConfirmInput = document.querySelector('input[name="repassword"]'); var nickNameInput = document.querySelector('input[name="nickname"]'); //select, radio. checkbox var departmentInput = document.querySelector('select[name="department"]'); var departmentSelectInput = document.querySelector('select[name="department_select"]'); var telephoneInput = document.querySelector('select[name="memberPhone_sub"]'); var telephone2Input = document.querySelector('input[name="memberPhone"]'); var radioInput = document.querySelector('input[name="gender"]:checked'); var checkInput = document.querySelector('input[name="agree"]'); var emailIdInput = document.querySelector('#domain-txt'); var emailDomainInput = document.querySelector('#domain-txt1'); var emailDomainSelect = document.querySelector('#domain-list'); console.log("아이디:", accountInput.value); console.log("비밀번호:", passwordInput.value); console.log("비밀번호 확인:", passwordConfirmInput.value); console.log("닉네임:", nickNameInput.value); console.log("대학 선택:", departmentInput.value); console.log("학과 선택:", departmentSelectInput.value); console.log("휴대전화 번호 앞자리:", telephoneInput.value); console.log("휴대전화 번호:", telephone2Input.value); console.log("성별:", radioInput.value); console.log("동의여부:", checkInput.checked); var emailDomain = emailDomainSelect.value === 'type' ? emailDomainInput.value : emailDomainSelect.value; var email = emailIdInput.value + '@' + emailDomain; console.log("이메일:", email); var success = true; if (accountInput.value.length < 6) { showMessage(accountInput, '다시 설정해주세요.'); success = false; } if (passwordInput.value.length < 8) { showMessage(passwordInput, '다시 설정해주세요.'); success = false; } if (passwordConfirmInput.value !== passwordInput.value) { showMessage(passwordConfirmInput, '비밀번호를 동일하게 입력해주세요.'); success = false; } return success; } const domainInputEl = document.querySelector('#domain-txt1') const domainListEl = document.querySelector('#domain-list') // select 옵션 변경 시 domainListEl.addEventListener('change', (event) => { // option에 있는 도메인 선택 시 if(event.target.value !== "type") { // 선택한 도메인을 input에 입력하고 disabled domainInputEl.value = event.target.value domainInputEl.disabled = true } else { // 직접 입력 시 // input 내용 초기화 & 입력 가능하도록 변경 domainInputEl.value = "" domainInputEl.disabled = false } }) function changeDepartment() { // 첫 번째 select 요소의 값을 가져옵니다. var university = document.getElementById("university").value; // 두 번째 select 요소의 값을 초기화합니다. document.getElementById("department").innerHTML = ""; // 대학 소속에 따라 다른 학과 종류를 보여줍니다. if (university === "문과대학") { // 대학1의 학과 종류를 추가합니다. var option1 = document.createElement("option"); option1.text = "중국언어문화학과"; document.getElementById("department").add(option1); } else if (university === "인문대학") { // 대학2의 학과 종류를 추가합니다. var option2 = document.createElement("option"); option2.text = "국어국문학과"; document.getElementById("department").add(option2); var option3 = document.createElement("option"); option3.text = "일어일문학과"; document.getElementById("department").add(option3); var option4 = document.createElement("option"); option4.text = "영어영문학과"; document.getElementById("department").add(option4); var option5 = document.createElement("option"); option5.text = "유럽언어문화학부"; document.getElementById("department").add(option5); var option6 = document.createElement("option"); option6.text = "철학과"; document.getElementById("department").add(option6); var option7 = document.createElement("option"); option7.text = "역사학과"; document.getElementById("department").add(option7); var option8 = document.createElement("option"); option8.text = "문화인류학과"; document.getElementById("department").add(option8); } else if (university === "자연과학대학") { // 대학3의 학과 종류를 추가합니다. var option9 = document.createElement("option"); option9.text = "수학과"; document.getElementById("department").add(option9); var option10 = document.createElement("option"); option10.text = "통계학과"; document.getElementById("department").add(option10); var option11 = document.createElement("option"); option11.text = "물리학과"; document.getElementById("department").add(option11); var option12 = document.createElement("option"); option12.text = "화학과"; document.getElementById("department").add(option12); var option13 = document.createElement("option"); option13.text = "생명과학과"; document.getElementById("department").add(option13); } else if (university === "공과대학") { // 대학3의 학과 종류를 추가합니다. var option14 = document.createElement("option"); option14.text = "건설시스템공학과"; document.getElementById("department").add(option14); var option15 = document.createElement("option"); option15.text = "환경공학과"; document.getElementById("department").add(option15); var option16 = document.createElement("option"); option16.text = "도시공학과"; document.getElementById("department").add(option16); var option17 = document.createElement("option"); option17.text = "건축학과"; document.getElementById("department").add(option17); var option18 = document.createElement("option"); option18.text = "신소재공학과"; document.getElementById("department").add(option18); var option19 = document.createElement("option"); option19.text = "화학공학과"; document.getElementById("department").add(option19); var option20= document.createElement("option"); option20.text = "파이버시스템공학과"; document.getElementById("department").add(option20); } else if (university === "기계IT대학") { // 대학3의 학과 종류를 추가합니다. var option21= document.createElement("option"); option21.text = "기계공학과"; document.getElementById("department").add(option21); var option22= document.createElement("option"); option22.text = "전기공학과"; document.getElementById("department").add(option22); var option23= document.createElement("option"); option23.text = "전자공학과"; document.getElementById("department").add(option23); var option24= document.createElement("option"); option24.text = "컴퓨터공학과"; document.getElementById("department").add(option24); var option25= document.createElement("option"); option25.text = "정보통신공학과"; document.getElementById("department").add(option25); var option26= document.createElement("option"); option26.text = "미래자동차공학과"; document.getElementById("department").add(option26); var option27= document.createElement("option"); option27.text = "로봇기계공학과"; document.getElementById("department").add(option27); var option28= document.createElement("option"); option28.text = "로봇공학과"; document.getElementById("department").add(option28); var option29= document.createElement("option"); option29.text = "파이버시스템공학과"; document.getElementById("department").add(option29); } else if (university === "소프트웨어융합대학") { // 대학3의 학과 종류를 추가합니다. var option30 = document.createElement("option"); option30.text = "소프트웨어융합학부"; document.getElementById("department").add(option30); }else if (university === "사회과학대학") { // 대학3의 학과 종류를 추가합니다. var option31 = document.createElement("option"); option31.text = "정치외교학과"; document.getElementById("department").add(option31); var option32 = document.createElement("option"); option32.text = "행정학과"; document.getElementById("department").add(option32); var option33 = document.createElement("option"); option33.text = "심리학과"; document.getElementById("department").add(option33); var option34 = document.createElement("option"); option34.text = "사회학과"; document.getElementById("department").add(option34); var option35 = document.createElement("option"); option35.text = "미디어커뮤니케이션학과"; document.getElementById("department").add(option35); var option36 = document.createElement("option"); option36.text = "경찰행정학과"; document.getElementById("department").add(option36); var option37 = document.createElement("option"); option37.text = "군사학과"; document.getElementById("department").add(option37); }else if (university === "경영대학") { // 대학3의 학과 종류를 추가합니다. var option38 = document.createElement("option"); option38.text = "경제금융학부"; document.getElementById("department").add(option38); var option39 = document.createElement("option"); option39.text = "경영학과"; document.getElementById("department").add(option39); var option40 = document.createElement("option"); option40.text = "무역학과"; document.getElementById("department").add(option40); var option41 = document.createElement("option"); option41.text = "회계세무학과"; document.getElementById("department").add(option41); var option42 = document.createElement("option"); option42.text = "항공운송학과"; document.getElementById("department").add(option42); var option43 = document.createElement("option"); option43.text = "산업경영학과"; document.getElementById("department").add(option43); }else if (university === "의과대학") { // 대학3의 학과 종류를 추가합니다. var option44 = document.createElement("option"); option44.text = "의예과"; document.getElementById("department").add(option44); }else if (university === "약학대학") { // 대학3의 학과 종류를 추가합니다. var option45 = document.createElement("option"); option45.text = "약학부"; document.getElementById("department").add(option45); }else if (university === "생명응용과학대학") { // 대학3의 학과 종류를 추가합니다. var option46 = document.createElement("option"); option46.text = "식품경제외식학과"; document.getElementById("department").add(option46); var option47 = document.createElement("option"); option47.text = "원예생명과학과"; document.getElementById("department").add(option47); var option48 = document.createElement("option"); option48.text = "식품공학과"; document.getElementById("department").add(option48); var option49 = document.createElement("option"); option49.text = "생명공학과"; document.getElementById("department").add(option49); var option49 = document.createElement("option"); option49.text = "의생명공학과"; document.getElementById("department").add(option49); var option50 = document.createElement("option"); option50.text = "조경학과"; document.getElementById("department").add(option50); var option51 = document.createElement("option"); option51.text = "산림자원학과"; document.getElementById("department").add(option51); }else if (university === "생활과학대학") { // 대학3의 학과 종류를 추가합니다. var option52 = document.createElement("option"); option52.text = "가족주거학과"; document.getElementById("department").add(option52); var option53 = document.createElement("option"); option53.text = "주거환경학과"; document.getElementById("department").add(option53); var option54 = document.createElement("option"); option54.text = "식품영양학과"; document.getElementById("department").add(option54); var option55 = document.createElement("option"); option55.text = "체육학과"; document.getElementById("department").add(option55); var option56 = document.createElement("option"); option56.text = "의류패션학과"; document.getElementById("department").add(option56); var option57 = document.createElement("option"); option57.text = "휴먼서비스학과"; document.getElementById("department").add(option57); }else if (university === "사범대학") { // 대학3의 학과 종류를 추가합니다. var option58 = document.createElement("option"); option58.text = "국어교육과"; document.getElementById("department").add(option58); var option59 = document.createElement("option"); option59.text = "영어교육과"; document.getElementById("department").add(option59); var option60 = document.createElement("option"); option60.text = "한문교육과"; document.getElementById("department").add(option60); var option61 = document.createElement("option"); option61.text = "수학교육과"; document.getElementById("department").add(option61); var option62 = document.createElement("option"); option62.text = "유아교육과"; document.getElementById("department").add(option62); var option63 = document.createElement("option"); option63.text = "특수체육교육과"; document.getElementById("department").add(option63); }else if (university === "음악대학") { // 대학3의 학과 종류를 추가합니다. var option64 = document.createElement("option"); option64.text = "음악과"; document.getElementById("department").add(option64); var option65 = document.createElement("option"); option65.text = "성악과"; document.getElementById("department").add(option65); var option66 = document.createElement("option"); option66.text = "기악과"; document.getElementById("department").add(option66); }else if (university === "예술대학") { // 대학3의 학과 종류를 추가합니다. var option67 = document.createElement("option"); option67.text = "회화과"; document.getElementById("department").add(option67); var option68 = document.createElement("option"); option68.text = "트랜스아트과"; document.getElementById("department").add(option68); var option69 = document.createElement("option"); option69.text = "시각디자인학과"; document.getElementById("department").add(option69); var option70 = document.createElement("option"); option70.text = "산업디자인학과"; document.getElementById("department").add(option70); var option71 = document.createElement("option"); option71.text = "생활제품디자인학과"; document.getElementById("department").add(option71); var option72 = document.createElement("option"); option72.text = "음악학과"; document.getElementById("department").add(option72); }else{ // 대학3의 학과 종류를 추가합니다. var option73 = document.createElement("option"); option73.text = ""; document.getElementById("department").add(option73); } } 코드까지 추가합니다. 직접 실행시켜보시고 해결책알려주세요 ㅠㅠㅠ
-
미해결Vue.js 시작하기 - Age of Vue.js
Local Cracking Vue.js API 질문있어요
강사님!~vue-camp/vue/다운받을수있나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
면접볼 떄 알아햐 하는 것
CS는 기본으로 물어볼테고,node 개발자라면 node,자바스크립트 개념,뜻,장점,단점,예시 같은거 알면 되나요?
-
해결됨떠먹는 Three.js
강의 영상에서 보이는 색과 다른 색상이 나옵니다.
과일과 나무 만들기 실습 중에 있습니다. 그런데 강의에서 보이는 bodyMaterial과 THREE.DirectionalLight에 들어가는 색상 코드를 그대로 사용했는데 색이 다르게 나오는 건 왜 그런 건가요..?이전 강의들에서도 색상이 다르게 나왔었습니다.
-
미해결자바스크립트 : 기초부터 실전까지 올인원
타임즈뉴스 401에러
잘 되고 있다가 카테고리별 검색에 필요한 URL 입력 하면서부터 에러가 났어요. const getNewsByTopic = (event) => { console.log("클릭됨", event.target.textContent); let topic=event.target.textContent.toLowerCase() let url=new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&page_size=10&topic=${topic}`); console.log(url) }선생님 왜 에러가 난건가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setState관련
20분경 나온 setState관련해서 미리 코드를 짜보았었는데용 <div className="DiaryEditor"> <h2>오늘의 일기</h2> <div> <input value={state.author} onChange={(e) => { setState(e.target.value); }} /> </div> <div> <textarea value={state.content} onChange={(e) => { setState(e.target.value); }} placeholder="내용을 입력해주세요" /> </div> </div> 이렇게 짜도 정상적으로 작동이 되는데 더 깊이 들어가서 문제가 생기는 경우일까요??
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
git 수업 부분 오류 발생했습니다
git remote add origin https://github.com/JIWONKIMS/grab-market-client.git git branch -M main git push -u origin main터미널에 입력했을 때 마지막 git push -u origin main 부분을 실행하면 아래 에러가 뜹니다fatal: failed to load library 'libcurl-4.dll' 에러 해결법이 뭔가요?
-
해결됨만들면서 배우는 리액트 : 기초
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다. 상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다.상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
다음 버튼을 누르면 다음질문으로 넘어가게 만들고 싶어요.
안녕하세요.강의 잘 듣고 있습니다.다음 문제를 넘어갈때 답을 고르는게 아니라다음 버튼을 만들어서 그 버튼을 누르면 넘어가게 만들고 싶은데요. 어떻게 코드를 짜면 될지 너무 고민입니다 ㅠㅠ 혹시 알려주실 수 있나요? 간단하게 어떤 방식으로 짜면 된다라는 힌트라도 주시면 감사하겠습니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
의존성주입으로 발생하는 장점 설명 질문
발생하는 장점을 다음과 같이 설명해주셨는데요.1. new 한 번으로 모든 곳에서 재사용 가능2. 의존성 주입으로 몽땅 한꺼번에 변경 가능다음과 같은 예시를 들어주셨는데, ProductController의 constructor에서 this.cashService = new CashService()와 같은 사용을 하면 constructor에서 변경점을 가져가고 해당 클래스의 모든 함수에서는 this.cashService를 통해 사용할 수 있고요.class ProductController { cashService constructor() { this.cashService = new CashService() } }CashService 대신 CashService2로 변경하고 싶을때는 다음처럼 변경하면 2번 장점도 동일해지구요.class ProductController { cashService constructor() { //this.cashService = new CashService() this.cashService = new CashService2() } }의존성 주입을 통해 얻을 수 있는 이점은 위와 같은 재사용이나 변경에 대한 장점보다도 말 그래도 의존성을 없애는 것에 있다고 보는데요.의존성 주입을 통해 ProductController에서 구현체인 CashService에 대한 의존성을 없애고, 외부에서 CashService에 대한 의존성을 가져갈 수 있게 되니까요.CashService에 대한 코드의 변경으로 인한 ProductController의 코드 변경이 발생하지 않도록 하는 것이 의존성 주입의 핵심이라고 보는데, tight-coupling을 왜 loose-coupling으로 변경해주어야 하는지에 대한 설명은 없었던 거 같아서요. 이 부분에 대해 어떻게 생각하시는지 궁금합니다!
-
미해결처음 만난 리액트(React)
코드 에러입니다.
안녕하세요. 혹시 이 부분에서 어떤 에러가 있는지 알 수 있을까요?
-
미해결자바스크립트 : 기초부터 실전까지 올인원
to do list
선생님 수업 너무 재미있어서 열심히 듣고 있습니다.선생님 to do list를 모두 따라하고 슬라이드 메뉴도 따러서 했는데요, 질문이 있습니다.값을 입력하고 플러스 버튼을 클릭하면 All 이라는 탭에 메뉴바가 보이게 하고싶은데 어떻게 해야하는지 아무리 고민을 해봐도 답을 찾지 못해서 질문드립니다.
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
친구와의 프로젝트 고민
<html> <head> <meta charset="UTF-8"> <title>회원가입</title> <meta name = "keyword" content = "회원가입, html"> <link rel = "stylesheet" type = "text/css" href = "style/project.css"> </head> <body> <header> <h1>회원가입</h1> <hr/> </header> <form action = "project.html" method = "POST"> <fieldset> <legend> 계정 정보 </legend> <div class = "id"> <label for = "id-account" id = "id">아이디(*)</label> <input type = "text" name = "login_id" id = "id-account" required = "required"> </div> <div class="alert-container"> <span class="alert-message" id="account-alert">TEST</span> </div> <button type = "submit" id = doublecheck-button>중복 확인 </button> <div class = "password"> <label for = "id-password">비밀번호(*)</label> <input type = "password" name = "password" id = "id-password" required = "required"> <span class = "alert-message">TEST</span> </div> <span class = "alert-message">TEST</span> <div class = "repassword"> <label for = "id-repassword">비밀번호 확인(*)</label> <input type = "password" name = "repassword" id = "id-repassword" required = "required"> <span class = "alert-message">TEST</span> </div> <div class="required-text">(*은 필수 입력 항목입니다.)</div> </fieldset> <fieldset> <legend>개인 정보</legend> <div class="form-item"> <label for = "id-name">닉네임(*)</label> <input type = "text" name = "nickname" id = "id-nickname" required = "required"> </div> <div class = form-item> <label>이메일(*)</label> <div class = email-inputs> <input class="box" name = "email" id="domain-txt" type="text"/> <span class="at-symbol">@</span> <input class="box" name = "email_select" id="domain-txt1" type="text"/> <select class="box" name = "email_select" id="domain-list"> <option value="type">직접 입력</option> <option value="yu.ac.kr">yu.ac.kr</option> <option value="naver.com">naver.com</option> <option value="gmail.com">gmail.com</option> </select> </div> </div> <div> <label>대학, 학과(*)</label> <select name = "department" id = "university" onchange = "changeDepartment()" required = "required"> <option> 대학 선택 </option> <option> 문과대학 </option> <option> 인문대학 </option> <option> 자연과학대학 </option> <option> 공과대학 </option> <option> 기계IT대학 </option> <option> 소프트웨어융합대학 </option> <option> 사회과학대학 </option> <option> 경영대학 </option> <option> 의과대학 </option> <option> 약학대학 </option> <option> 생명응용과학대학 </option> <option> 생활과학대학 </option> <option> 사범대학 </option> <option> 음악대학 </option> <option> 예술대학 </option> </select> <select name = "department_select" id = "department" required = "required"> <option> 학과 선택 </option> </select> </div> <div> <label>성별(*)</label> <input type = "radio" name = "gender" id = "id-gender-male"/ required = "required" value = "male"> <label for = "id-gender-male">남</label> <input type = "radio" name = "gender" id = "id-gender-female"/ required = "required" value = "female"> <label for = "id-gender-female">여</label> </div> <div class="required-text">(*은 필수 입력 항목입니다.)</div> </fieldset> <fieldset> <legend>선택 입력 사항</legend> <div class = "phone"> <label>휴대전화 번호</label> <select name = "memberPhone_sub"> <option> 010 </option> </select> <input type = "text" name = "memberPhone" id = "memberPhone"> </select> </div> </fieldset> <div> <input type = "checkbox" name = "agree" id = "id-agree"/ required = "required"> <label for = "id-agree"> 개인정보 수집에 동의합니다. </label> </div> <button type = "submit">가입하기 </button> </form> </body> <script type ="text/javascript" src = "scripts/project.js"></script> </html> h1 { text-align: center; font-size: 25pt; font-weight: 500; } legend { text-align: center; font-weight: 300; position: relative; } fieldset { display: flex; flex-direction: column; margin-bottom: 10px; /* 각 항목 사이의 간격 조정 */ } div{ font-weight: 300; line-height: 250%; padding: 5px; } fieldset { line-height: 500%; } .required-text{ font-size: 100%; color: #FF0000; font-weight: bold; } .phone{ justify-content: center; } fieldset { display: flex; flex-wrap: wrap; } .alert-message { color: #FF0000; font-size: 14px; font-weight: 900; } .alert-container { display: flex; flex-direction: column; } .submit-button { width: 100px; } .id, .password, .repassword { display: flex; align-items: center; margin-right: 1100px; } .id label, .password label, .repassword label { flex: 1; } .id input[type="text"], .password input[type="password"], .repassword input[type="password"] { flex: 1; } select.box { flex: 0; display: flex; align-items: center; margin-right: 800px; } .id-nickname{ margin-right: 500px; } option { font-size: 8px; } .info .box#domain-list option { font-size: 8px; background-color: #ffffff; } .at-symbol { margin: 0 5px; } .form-item label[for="id-name"] { margin-right: 5px; } .form-item { display: flex; align-items: center; margin-bottom: 10px; /* 각 항목 사이의 간격 조정 */ } .email-label { display: flex; align-items: center; } .email-inputs { display: flex; align-items: center; } /*중복확인 기능 버튼*/ button[type="submit"] { width: 100px; /* 적당한 가로 길이로 지정 */ }window.addEventListener('load', function() { clearMessages(); var formElem = document.querySelector('form'); formElem.onsubmit = submitForm; }); function clearMessages(){ var messages = document.getElementsByClassName('alert-message'); for(var i = 0; i < messages.length; i++){ messages[i].style.display = 'none'; } } function showMessage(inputElement, message){ var messageElem = inputElement.parentNode.querySelector('.alert-message'); messageElem.style.display = 'block'; messageElem.innerText = message; inputElement.focus(); } function submitForm() { //acount info var accountInput = document.querySelector('input[name="login_id"]'); var passwordInput = document.querySelector('input[name="password"]'); var passwordConfirmInput = document.querySelector('input[name="repassword"]'); var nickNameInput = document.querySelector('input[name="nickname"]'); //select, radio. checkbox var departmentInput = document.querySelector('select[name="department"]'); var departmentSelectInput = document.querySelector('select[name="department_select"]'); var telephoneInput = document.querySelector('select[name="memberPhone_sub"]'); var telephone2Input = document.querySelector('input[name="memberPhone"]'); var radioInput = document.querySelector('input[name="gender"]:checked'); var checkInput = document.querySelector('input[name="agree"]'); var emailIdInput = document.querySelector('#domain-txt'); var emailDomainInput = document.querySelector('#domain-txt1'); var emailDomainSelect = document.querySelector('#domain-list'); console.log("아이디:", accountInput.value); console.log("비밀번호:", passwordInput.value); console.log("비밀번호 확인:", passwordConfirmInput.value); console.log("닉네임:", nickNameInput.value); console.log("대학 선택:", departmentInput.value); console.log("학과 선택:", departmentSelectInput.value); console.log("휴대전화 번호 앞자리:", telephoneInput.value); console.log("휴대전화 번호:", telephone2Input.value); console.log("성별:", radioInput.value); console.log("동의여부:", checkInput.checked); var emailDomain = emailDomainSelect.value === 'type' ? emailDomainInput.value : emailDomainSelect.value; var email = emailIdInput.value + '@' + emailDomain; console.log("이메일:", email); var success = true; if (accountInput.value.length < 6) { showMessage(accountInput, '다시 설정해주세요.'); success = false; } if (passwordInput.value.length < 8) { showMessage(passwordInput, '다시 설정해주세요.'); success = false; } if (passwordConfirmInput.value !== passwordInput.value) { showMessage(passwordConfirmInput, '비밀번호를 동일하게 입력해주세요.'); success = false; } return success; } const domainInputEl = document.querySelector('#domain-txt1') const domainListEl = document.querySelector('#domain-list') // select 옵션 변경 시 domainListEl.addEventListener('change', (event) => { // option에 있는 도메인 선택 시 if(event.target.value !== "type") { // 선택한 도메인을 input에 입력하고 disabled domainInputEl.value = event.target.value domainInputEl.disabled = true } else { // 직접 입력 시 // input 내용 초기화 & 입력 가능하도록 변경 domainInputEl.value = "" domainInputEl.disabled = false } }) function changeDepartment() { // 첫 번째 select 요소의 값을 가져옵니다. var university = document.getElementById("university").value; // 두 번째 select 요소의 값을 초기화합니다. document.getElementById("department").innerHTML = ""; // 대학 소속에 따라 다른 학과 종류를 보여줍니다. if (university === "문과대학") { // 대학1의 학과 종류를 추가합니다. var option1 = document.createElement("option"); option1.text = "중국언어문화학과"; document.getElementById("department").add(option1); } else if (university === "인문대학") { // 대학2의 학과 종류를 추가합니다. var option2 = document.createElement("option"); option2.text = "국어국문학과"; document.getElementById("department").add(option2); var option3 = document.createElement("option"); option3.text = "일어일문학과"; document.getElementById("department").add(option3); var option4 = document.createElement("option"); option4.text = "영어영문학과"; document.getElementById("department").add(option4); var option5 = document.createElement("option"); option5.text = "유럽언어문화학부"; document.getElementById("department").add(option5); var option6 = document.createElement("option"); option6.text = "철학과"; document.getElementById("department").add(option6); var option7 = document.createElement("option"); option7.text = "역사학과"; document.getElementById("department").add(option7); var option8 = document.createElement("option"); option8.text = "문화인류학과"; document.getElementById("department").add(option8); } else if (university === "자연과학대학") { // 대학3의 학과 종류를 추가합니다. var option9 = document.createElement("option"); option9.text = "수학과"; document.getElementById("department").add(option9); var option10 = document.createElement("option"); option10.text = "통계학과"; document.getElementById("department").add(option10); var option11 = document.createElement("option"); option11.text = "물리학과"; document.getElementById("department").add(option11); var option12 = document.createElement("option"); option12.text = "화학과"; document.getElementById("department").add(option12); var option13 = document.createElement("option"); option13.text = "생명과학과"; document.getElementById("department").add(option13); } else if (university === "공과대학") { // 대학3의 학과 종류를 추가합니다. var option14 = document.createElement("option"); option14.text = "건설시스템공학과"; document.getElementById("department").add(option14); var option15 = document.createElement("option"); option15.text = "환경공학과"; document.getElementById("department").add(option15); var option16 = document.createElement("option"); option16.text = "도시공학과"; document.getElementById("department").add(option16); var option17 = document.createElement("option"); option17.text = "건축학과"; document.getElementById("department").add(option17); var option18 = document.createElement("option"); option18.text = "신소재공학과"; document.getElementById("department").add(option18); var option19 = document.createElement("option"); option19.text = "화학공학과"; document.getElementById("department").add(option19); var option20= document.createElement("option"); option20.text = "파이버시스템공학과"; document.getElementById("department").add(option20); } else if (university === "기계IT대학") { // 대학3의 학과 종류를 추가합니다. var option21= document.createElement("option"); option21.text = "기계공학과"; document.getElementById("department").add(option21); var option22= document.createElement("option"); option22.text = "전기공학과"; document.getElementById("department").add(option22); var option23= document.createElement("option"); option23.text = "전자공학과"; document.getElementById("department").add(option23); var option24= document.createElement("option"); option24.text = "컴퓨터공학과"; document.getElementById("department").add(option24); var option25= document.createElement("option"); option25.text = "정보통신공학과"; document.getElementById("department").add(option25); var option26= document.createElement("option"); option26.text = "미래자동차공학과"; document.getElementById("department").add(option26); var option27= document.createElement("option"); option27.text = "로봇기계공학과"; document.getElementById("department").add(option27); var option28= document.createElement("option"); option28.text = "로봇공학과"; document.getElementById("department").add(option28); var option29= document.createElement("option"); option29.text = "파이버시스템공학과"; document.getElementById("department").add(option29); } else if (university === "소프트웨어융합대학") { // 대학3의 학과 종류를 추가합니다. var option30 = document.createElement("option"); option30.text = "소프트웨어융합학부"; document.getElementById("department").add(option30); }else if (university === "사회과학대학") { // 대학3의 학과 종류를 추가합니다. var option31 = document.createElement("option"); option31.text = "정치외교학과"; document.getElementById("department").add(option31); var option32 = document.createElement("option"); option32.text = "행정학과"; document.getElementById("department").add(option32); var option33 = document.createElement("option"); option33.text = "심리학과"; document.getElementById("department").add(option33); var option34 = document.createElement("option"); option34.text = "사회학과"; document.getElementById("department").add(option34); var option35 = document.createElement("option"); option35.text = "미디어커뮤니케이션학과"; document.getElementById("department").add(option35); var option36 = document.createElement("option"); option36.text = "경찰행정학과"; document.getElementById("department").add(option36); var option37 = document.createElement("option"); option37.text = "군사학과"; document.getElementById("department").add(option37); }else if (university === "경영대학") { // 대학3의 학과 종류를 추가합니다. var option38 = document.createElement("option"); option38.text = "경제금융학부"; document.getElementById("department").add(option38); var option39 = document.createElement("option"); option39.text = "경영학과"; document.getElementById("department").add(option39); var option40 = document.createElement("option"); option40.text = "무역학과"; document.getElementById("department").add(option40); var option41 = document.createElement("option"); option41.text = "회계세무학과"; document.getElementById("department").add(option41); var option42 = document.createElement("option"); option42.text = "항공운송학과"; document.getElementById("department").add(option42); var option43 = document.createElement("option"); option43.text = "산업경영학과"; document.getElementById("department").add(option43); }else if (university === "의과대학") { // 대학3의 학과 종류를 추가합니다. var option44 = document.createElement("option"); option44.text = "의예과"; document.getElementById("department").add(option44); }else if (university === "약학대학") { // 대학3의 학과 종류를 추가합니다. var option45 = document.createElement("option"); option45.text = "약학부"; document.getElementById("department").add(option45); }else if (university === "생명응용과학대학") { // 대학3의 학과 종류를 추가합니다. var option46 = document.createElement("option"); option46.text = "식품경제외식학과"; document.getElementById("department").add(option46); var option47 = document.createElement("option"); option47.text = "원예생명과학과"; document.getElementById("department").add(option47); var option48 = document.createElement("option"); option48.text = "식품공학과"; document.getElementById("department").add(option48); var option49 = document.createElement("option"); option49.text = "생명공학과"; document.getElementById("department").add(option49); var option49 = document.createElement("option"); option49.text = "의생명공학과"; document.getElementById("department").add(option49); var option50 = document.createElement("option"); option50.text = "조경학과"; document.getElementById("department").add(option50); var option51 = document.createElement("option"); option51.text = "산림자원학과"; document.getElementById("department").add(option51); }else if (university === "생활과학대학") { // 대학3의 학과 종류를 추가합니다. var option52 = document.createElement("option"); option52.text = "가족주거학과"; document.getElementById("department").add(option52); var option53 = document.createElement("option"); option53.text = "주거환경학과"; document.getElementById("department").add(option53); var option54 = document.createElement("option"); option54.text = "식품영양학과"; document.getElementById("department").add(option54); var option55 = document.createElement("option"); option55.text = "체육학과"; document.getElementById("department").add(option55); var option56 = document.createElement("option"); option56.text = "의류패션학과"; document.getElementById("department").add(option56); var option57 = document.createElement("option"); option57.text = "휴먼서비스학과"; document.getElementById("department").add(option57); }else if (university === "사범대학") { // 대학3의 학과 종류를 추가합니다. var option58 = document.createElement("option"); option58.text = "국어교육과"; document.getElementById("department").add(option58); var option59 = document.createElement("option"); option59.text = "영어교육과"; document.getElementById("department").add(option59); var option60 = document.createElement("option"); option60.text = "한문교육과"; document.getElementById("department").add(option60); var option61 = document.createElement("option"); option61.text = "수학교육과"; document.getElementById("department").add(option61); var option62 = document.createElement("option"); option62.text = "유아교육과"; document.getElementById("department").add(option62); var option63 = document.createElement("option"); option63.text = "특수체육교육과"; document.getElementById("department").add(option63); }else if (university === "음악대학") { // 대학3의 학과 종류를 추가합니다. var option64 = document.createElement("option"); option64.text = "음악과"; document.getElementById("department").add(option64); var option65 = document.createElement("option"); option65.text = "성악과"; document.getElementById("department").add(option65); var option66 = document.createElement("option"); option66.text = "기악과"; document.getElementById("department").add(option66); }else if (university === "예술대학") { // 대학3의 학과 종류를 추가합니다. var option67 = document.createElement("option"); option67.text = "회화과"; document.getElementById("department").add(option67); var option68 = document.createElement("option"); option68.text = "트랜스아트과"; document.getElementById("department").add(option68); var option69 = document.createElement("option"); option69.text = "시각디자인학과"; document.getElementById("department").add(option69); var option70 = document.createElement("option"); option70.text = "산업디자인학과"; document.getElementById("department").add(option70); var option71 = document.createElement("option"); option71.text = "생활제품디자인학과"; document.getElementById("department").add(option71); var option72 = document.createElement("option"); option72.text = "음악학과"; document.getElementById("department").add(option72); }else{ // 대학3의 학과 종류를 추가합니다. var option73 = document.createElement("option"); option73.text = ""; document.getElementById("department").add(option73); } } 제가 input창을 margin-right 1100px로 아이디, 비밀번호, 비밀번호 input 입력 창을 동일한 위치에 두었는데요. 화면을 줄이면 이 input 입력 창이 왼쪽으로 밀려서 아이디(*)와 같은 label이 세로로 바뀌는데요.. 이 해결책을 알려주셨음 좋겠어요.그리고 빨간색 alert-message가 나와도 1번과 같은 현상이 나타납니다. 이에 대한 해결책을 부탁 드립니다.그리고 중복 확인 기능을 추가 시키려 하는데 js으로 만들 수 있나요? 만들 수 있다면 알려주시면 감사하겠습니다.
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
선생님 Section4에 제목 오타난것같습니다!
Starfiled => Starfield 인 것 같습니다!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
최적화 useMemo 적용하고 나서, 삭제 를 하였을 경우 나타나는 에러입니다.
기존에 잘 동작되었던 삭제 기능이었는데 useMemo 를 적용하고 나서 삭제버튼을 누르니 삭제가 되지 않고 에러가 뜹니다. ㅠ 개발자도구에서 위 소스가 잘못되었다고 하는것같은데 어느곳을 수정해야하는지 모르겠습니다. ㅠ똑같이 친거같은데 ... 이외에도 혹시 리액트 적용해서 에러가 났을경우, 이 에러만 가지고 어느 부분을 수정해야할지 너무 막막한데, 구글링해도 답도 안나오구요 . 어떤식으로 해결해야좋은지 팁도 부탁드립니다.
