if(Number(activeLi) < 0){ activeLi = Number(activeLi) + 260; //왼쪽에 있던 카드가 오른쪽으로 갔다면, 다시 왼쪽으로 갈 수 있도록 PREV 버튼 활성화 slidePrev.style.color = '#2f3059'; slidePrev.classList.add('slide-prev-hover'); slidePrev.addEventListener('click',transformPrev); if(Number(activeLi) === 0){ slideNext.style.color = '#cfd8dc'; slideNext.classList.remove('slide-prev-hover'); //이벤트처리. 클릭을 눌러도 더이상 동작하지 않게. slideNext.removeEventListener('click', transformPrev); } }let activeLi = classList.getAttribute('data-position');activeLi에 속성을 가져오고 if문에서 Number를 꼭 써야한다는 것이 정확하게 이해가 잘 안가요... Number()로 형변환을 하지 않으면 어떻게 되나요 ?어차피 index.html에서 data-position의 값으로 숫자를 지정한거 아닌가요? <ul class="class-list" data-position="0">쌍따옴표로 감싸면 다 문자로 인식되는건가요?강의를 띄엄띄엄봐서 ㅠㅠ 헷갈립니다...

프론트,백엔드,몽고db로 api 조회하는게 강의 듣고복습폴더에서 포트번호 똑같이 4000으로 했다가 에러나서 3000으로 바꿨더니 해결됐어요근데 어쩔땐 복습폴더에서 포트번호 4000으로 맞춰놓고 도커 접속했더니 잘만 되더라구요에러나는 기준이 궁금해요 

 그냥 서버만 관리하면 되니까 새로운 아이디어가 떠오르거나 창의성 같은 거는 필요하지 않나요?

강의자료 사이트 접속이 안되네요.

안녕하세요. 강의 잘 듣고 있습니다. scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, 부드러운 모션 효과를 위한 옵션이 있을까요?스크롤 한번 했을 때. 스르륵 멈출 수 있게요.

 안녕하세요 원두멘토님! 13챕터에서 graphql-upload 버전이슈로 버전을 낮춰 대응하셔 작동이 되게 알려주셨습니다.확인을 해보니 apollo server에서 원래 패키지에 포함시켰던 디펜젼시를 csrf문제로 포함시키지 않고 분리를 해서 버전관리가 되지 않아서 생긴 문제인것 같았습니다.제가 궁금한 점은 graphql-upload로 클라이언트에게 업로드 기능을 제공해주는 것이 아닌 다른 방법으로 grpahql에서 upload기능을 제공해 줄수있는지 궁금합니다.보안상 좋지 않고 버전관리가 되지 않는 패키지는 사용하는것이 나중을 생각했을때 더 개발난이도가 올라갈 것 같다 생각이 들었습니다.제가 생각한 방법은 multer를 사용하는 건데 그렇게 하려면 restapi로 제공을 해줘야 하는데 grpahql 과 restapi를 같이 사용해서 api를 제공해줘야하는데 이 또한 가능하거나 추천하시는지 궁금합니다. 

https://www.inflearn.com/questions/961239/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EB%A7%88%EC%B9%98%EB%A9%B0-%EB%B0%B0%ED%8F%AC-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%9E%91%EB%8F%99%EC%9D%B4-%EC%95%88%EB%90%A8"프로젝트를 마치며 배포 페이지에서 업로드 작동이 안됨"이라는 제목의 질문글의 추가 질문입니다.=====================이전 질문 내용==========================================상품 업로드에 관한 이슈과정을 다 마치고, fly.io와 vercel.com을 통하여 배포한 페이지 중에서 상품 업로드가 제대로 이뤄지지 않습니다.github 주소 :https://github.com/arominddo/Inflearn_full_stack_boot_campvercel을 통해 배포된 web 어플리케이션 url :https://grab-market-client-ashen.vercel.app/ grab_market_web > src > upload > index.js에 코드 내용이 작성되어 있습니다.  배포된 페이지의 DB 초기화 문제프로젝트를 전부 마치면서, 다시 한번 fly.io에 최신 코드로 재배포를 해보고 실험을 해보았는데도, web에서 특정 상품을 업로드하거나(오류가 나지 않았을 당시), 상품 구매하기 기능을 통하여 soldout 값을 1로 바꿔줬음에도,약 5분이 지나면 DB가 배포 됐을 당시의 내용으로 계속 초기화가 됩니다.해결 방안이 궁금합니다.ex) A라는 물건 업로드 -> 5분 지남 -> 새로고침 해보면 A라는 물건이 리스트에서 삭제ex) B라는 물건 구매 하기 버튼 클릭 -> soldout 값 1로 변경 -> 약 5분 지남 -> 다시 soldout 값 0으로 복귀===================================================================================  위와 같은 이전 질문 내용에서 1번에 해당하는 답변으로, 어떤 오류 로그가 뜨냐고 물어보셔서 여기 다시 남겨봅니다. 위 사진은 vercel을 통해 배포 된 Web에서 upload를 시도하면 나오는 오류 로그입니다. upload 시도 시에 fly.io 모니터화면에서 볼 수 있는 오류입니다.참고로, Local 환경에서 같은 코드로 npm start로 실행된 서버와 web에서는 업로드 기능이 잘 작동됩니다.  재부팅에 관련된 로그라고 생각되는 부분 캡쳐해서 보내드립니다. 이와 같은 로그가 뜨면서 배포된 서버의 내용이 배포 시점으로 돌아가는 것 같습니다.그런데 로그를 보자면 reboot라는 것이 단순히 서버를 죽였다가 다시 올리는 것으로 생각 되는데, 배포된 서버가 돌아감에 있어서 업로드 되거나 값이 변했던 내용들이 다 사라지는 것이 이해가 되지 않습니다ㅠㅠ   

 entity.ts파일에서 input으로 사용할 틀을 resolver에서 Mutation쪽 service의 매개변수로 넘겨줄려고 사용했는데Argument of type '{ inputStarbucks: InputStarbucks; }' is not assignable to parameter of type 'InputStarbucks'이러한 오류가 나서 찾아보니 해당 타입으로는 변수타입을 지정할수없어서 변경하라고했는데class틀도 문제가 없는데 왜 오류가 나는지 잘모르겠습니다.import { Args, Mutation, Query, Resolver } from '@nestjs/graphql'; import { StarbucksService } from './starbucks.service'; import { InputStarbucks } from './entities/starbucks.input'; import { Starbucks } from './entities/starbucks.entity'; @Resolver() export class StarbucksResolver { constructor( private readonly starbucksService: StarbucksService, // prettier때문에 아래로 내려쓰기가 안되니까 주석달기 ) {} @Query(() => [Starbucks], { nullable: true }) // graphql에서는 배열을 [Board]식으로 사용 아래에서는 Board[]라고 사용했는데 fetchBoards(): Starbucks[] { return this.starbucksService.findAll(); } @Mutation(() => String) creatBoard( // 한번에 사용하는 방식 @Args('inputStarbucks') inputStarbucks: InputStarbucks, // graphql에서 데이터를 입력받고 변수명과 타입을 지정 // graphql에서 writer로 입력받은값을 writer라는 변수에 받고 데이터 타입은 string으로 지정 ): string { return this.starbucksService.create({ inputStarbucks }); // return을 작성해야 사용한 api쪽 리턴이 module쪽까지 전달됨 } }import { Injectable, Scope } from '@nestjs/common'; import { Starbucks } from './entities/starbucks.entity'; import { InputStarbucks } from './entities/starbucks.input'; @Injectable({ scope: Scope.DEFAULT }) export class StarbucksService { findAll(): Starbucks[] { // entity에서 만든 Board의 배열형태를 가져와서 사용 const result = [ { number: 1, writer: '짱구', title: '제목', contents: '내용이요' }, { number: 2, writer: '짱구2', title: '제목2', contents: '내용이요2' }, { number: 3, writer: '짱구3', title: '제목3', contents: '내용이요3' }, ]; return result; } create({ inputStarbucks }: InputStarbucks): string { console.log(inputStarbucks.writer); // 데이터 타입의 클래스의 명과 동일해야한다 .writer이부분이 console.log(inputStarbucks.title); console.log(inputStarbucks.contents); return '게시물 등록 성공'; } }import { Field, InputType } from '@nestjs/graphql'; // @ObjectType() // 이렇게 작성하면 type으로 나옴 . 리턴타입이 type이었을때 // mutation의 경우에는 input으로 작성했다 @InputType() export class InputStarbucks { @Field(() => String) writer: string; @Field(() => String) title: string; @Field(() => String) contents: string; } // Graphql에서 사용하기위해서 graphql 데이터 타입지정

인프런 아이디 : siwoobaksa@naver.com인프런 이메일 : siwoobaksa@naver.com깃헙 아이디 : lswsepia@gmail.com깃헙 username : lswdev

안녕하세요! useReduce를 사용하고 최적화를 한 단계에서 onReduce() 함수가 어떻게 최적화 되는지 원리에 의문이 생겨 질문 드립니다. const [data, dispatch] = useReducer(reducer, []); //reducer 생략 case "REMOVE": return state.filter((it) => it.id !== action.targetId); 해당 코드에서 REMOVE를 실행하면 data 배열이 새로운 배열로 업데이트가 됨 -> 2. 그러면 data를 prop으로 받고 있는 DiaryList.js에서 이를 감지하고 처음부터 끝까지 DiaryItem.js를 다시 생성함. ->3. 그런데 DiaryItem은 React.memo로 prop를 비교하는데, 얕은 비교를 하기에 data에 새로 생성된 배열과는 주소가 달라 새로운 컴포넌트를 다시 생성. 이 되어야 하지 않을까요? 혹시 저의 논리에서 어디 부분이 잘못되었는지 모르겠어서 질문합니다... ㅠ

안녕하세요!강의 재밌게 잘 보고 있습니다 :Dscroll-timeline.js 파일은 어디서 가져오신 건가요?세팅부터 혼자서 해보려고 했는데scroll-timeline 저장소여기서 아무리 찾아봐도 안 보이네요..!Usage에 보면 import를 dist 폴더에서 scroll-timeline.js를 가져오는 것 같은데 dist 폴더도 안 보이고 src 폴더에 scroll-timeline-base.js도 아닌 것 같아서 질문 남깁니다..!또, scrollOffsets에 넣는 옵션들은 어떻게 확인하나요? README에는 new CSSUnitValue 이것밖에 안 보이는데 강의에서는 target, edge, threshold 속성들도 쓰셔서 어디서 확인하고 쓰시는지 너무 궁금합니다..!

react-create-app이 안돼서 vite를 사용해서 실습하고 있는데 코드를 똑같이 작성했지만 빈화면만 뜹니다. 무엇이 문제인지 모르겠어요

안녕하세요! 좋은 수업 잘 듣고 있습니다 :)props로 컴포넌트를 받는 Container 컴포넌트에 대해 질문이 있습니다!JSX 규칙 중에 모든 컴포넌트는 부모 태그를 가지고 있어야 한다고 말씀해주셨는데 아래 코드처럼 Container는 부모 태그가 없이도 잘 동작하기에 이유가 무엇인지 궁금합니다!function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <Container> <div className="App"> <Counter {...counterprops}/> </div> </Container> ); }또한 function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <div className="App"> <Container> <Counter {...counterprops}/> </Container> </div> ); }이렇게 코드를 짜면 동작하지 않더라구요! 왜 첫번째 코드는 동작하고, 두번째 코드는 동작하지 않는지 궁금합니다!감사합니다.

import { ApolloDriver, ApolloDriverAsyncConfig as ad } from '@nestjs/apollo'; import { Module } from '@nestjs/common'; import { GraphQLModule } from '@nestjs/graphql'; import { AppController } from './app.controller'; import { AppService } from './app.service'; @Module({ imports: [ GraphQLModule.forRoot<ad>({ // forRoot의 데이터타입지정 <> -> 제네릭 부분 driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), ], controllers: [AppController], providers: [AppService], }) export class AppModule {} import { Field, Int, ObjectType } from '@nestjs/graphql'; @ObjectType() // graphql에서 type을 의미함 예)type Board export class Board { @Field(() => Int) // Int를 import를 해서 사용해야한다 number: number; // ;을 기준으로 구분함 @Field(() => String) // graphql을 위한 용도 writer: string; @Field(() => String) title: string; @Field(() => String) contents: string; } 단순히 graphql shema를 자동생성 해주는 거만 테스트할려고했는데 경로를 잡아주니 에러가나와서 true도 해보고 playground : true도 추가해보고했는데 계속 해서 오류가 나고 계속해서 오류는 type이 존재하지않는다고해서 이유를 모르겠습니다 Argument of type '{ driver: typeof ApolloDriver; autoSchemaFile: string; }' is not assignable to parameter of type 'ApolloDriverAsyncConfig'.Object literal may only specify known properties, and 'autoSchemaFile' does not exist in type 'GqlModuleAsyncOptions<ApolloDriverConfig, GqlOptionsFactory<ApolloDriverConfig>>'.ts(2345)

if(nx>=0 && nx<n && ny>=0 && ny<n && arr[nx][ny]>=arr[i][j]) 여기서 nx >= 0, ny >= 0은 이해가 되는데, nx < n 과 ny<n 은 왜 해야하는지 잘 모르겠습니다. 예전에 한참 알고리즘 공부할때는 이해가 됐었는데,, 오랜만에 하니까 이해가 안되네요...  

해당 강의에서 product service의 create 함수를 아래와 같이 코딩하는 것을 가르쳐주셨는데요.아래 코드에서const tags = [...prevTags, ...newTags.indentifiers];부분에서 prevTags에도 .identifiers가 붙어야 될 것같다는 생각을 했습니다.prevTags는 this.productsTagsRepository.find 함수를 통해서 찾아오는데, 이는 where 조건문에 의해 name이 tagNames인 것을 찾아내어 productTags의 프로퍼티인 id와 name을 둘다 return 하지 않나요?이전 조회API를 만드는 강의에서도 find 함수를 통해 id만 가져오는 것이 아닌 다른 칼럼들도 모두 가져왔었습니다.그런데 prevTags 뒤에 .indentifiers를 붙이니 에러가 뜨더라구요...분명 조회API 강의에서는 find를 통해 모든 칼럼을 다 가져왔던것 같은데, 왜 이번에는 똑같은 find 함수를 통해 id만 리턴이 되는 건가요?  async create({ createProductInput }: IProductServiceCreate): Promise<Product> { const { productSalesLocation, productCategory, productTags, ...product } = createProductInput; const result = await this.productsSalesLocationService.create({ productSalesLocation }); const tagNames = productTags.map((el) => el.replace('#', '')); const prevTags = await this.productsTagsRepository.find({ where: { name: In(tagNames) }, }); const temp = []; tagNames.forEach((el) => { const isExist = prevTags.find((prevEl) => el === prevEl.name); if (!isExist) temp.push({ name: el }); }); const newTags = await this.productsTagsRepository.insert(temp); const tags = [...prevTags, ...newTags.identifiers]; const result2 = this.productsRepository.save({ ...product, productSalesLocation: result, productCategory: productCategory, productTags: tags, }); return result2; }

안녕하세요. 리액트 연동하기 강의에서 MyButton.js 의 적용이 안 되어 페이지에 버튼이 나타나지 않습니다. 다른 분들 질문도 보고 @17에서 @17.0.0 으로도 해보고 버전의 문제인가 싶어 18.2.0 으로도 해 봤는데 안 되네요... 어떤 점이 문제인지 알려주시면 감사하겠습니다!

<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>@media screen and (max-width: 600px) { .id { flex-direction: row; align-items: flex-start; } #id-account { margin-top: 10px; } } 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; position: relative; } .alert-container { position: absolute; top: -20px; margin-right: 100px; } .submit-button { width: 100px; } .id, .password, .repassword { align-items: center; display: flex; 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); } } /*중복 기능 생성*/ const checkDuplicate = () => { const input = document.getElementById('id-account'); const value = input.value; // 중복 확인 여부 체크 로직 if (value === '중복') { document.getElementById('account-alert').innerHTML = '중복된 아이디입니다.'; } else { document.getElementById('account-alert').innerHTML = ''; } } document.getElementById('id-account').addEventListener('keyup', checkDuplicate);하라는 대로 했는데도 바뀌는 게 없어서 다시 올립니다!!제가 첫 번째 질문으로 아이디(*)의 위치가 label이 화면을 줄여도 그대로이면 좋겠다고 했으나 화면을 줄이면 글씨가 세로로 바뀌진 않아도 세로로 정렬이 됩니다. 그렇다고 가로로 정렬이 되게 바꾸어도 다시 화면을 줄여도 세로로 글씨가 바뀝니다. alert-message가 나왔을 경우 label과 그 input창의 위치가 바뀝니다. 여전히 그대로라서 해결책을 주셨으면 합니다.이 마지막 사진이 1,2번 기능을 넣더라도 그대로 유지되며 오른쪽에 글씨가 들어가더라도 화면의 크기를 줄이더라도 이 형태가 그대로 유지되었으면 합니다.

안녕하세요. 강의를 계속 듣다가 App.js가 자꾸 두번 실행되어 index.js를 제외한 모든 코드를 강사님의 sandbox 코드를 복붙하였는데 계속 코드가 두번 실행이 되었습니다.그리하여 이렇게 dataId가 20부터 실행되는 문제가 발생하였는데요, 그래서 index.js를 강사님 버전(React 17)로 바꾸었더니 이 문제가 해결되었습니다. React18버전으로 하면 이런 문제가 발생하는 이유가 무엇인가요?? 다음은 저의 index.js 코드입니다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; const rootNode = document.getElementById("root"); ReactDOM.createRoot(rootNode).render( <React.StrictMode> <App /> </React.StrictMode> ); reportWebVitals();

 안녕하세요!강의 잘 듣고 있는 학생입니다. 1:1관계등록 강의에서는 product sales location 관계를 등록할 때는 따로 sale location에 대한 모듈 파일과 리졸버 파일은 만들지 않고 서비스 파일만 만들어서 관계를 등록하였는데,1:다 관계등록 강의에서는 product category에 대한 모듈파일과 리졸버 파일까지 만들어 관계등록을 하는 것으로 가르쳐주셨습니다.코드 구성은 크게 다르지 않은 것 같은데, 카테고리 관계등록 강의에서는 일대다 관계이기 때문에 리졸버와 모듈파일까지 만들어서 관계등록을 하는 것인가요? 그렇다면 이유를 좀 알 수 있을까요..?코드 구성은 비슷하고, 차이라고 할 것은 1대1이냐 1대다이냐 밖에 없는 것 같은데 이렇게 모듈파일을 만들어주고 안만들어주고의 차이가 발생하는 이유가 이해가 안가서요 ㅠ