[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요, 알고리즘 개선하기 강의를 들은 이후, 새로 짜여진 알고리즘의 원리(?)에 대해 공부하는 중입니다. 그런데, select 부분에 대한 이해가 어려워 질문 올려봐요 ㅠㅠ answer.addEventListener("click", function(){ //'answer' 버튼을 클릭했을 때 4 var children = document.querySelectorAll('.answerList'); for(let i = 0; i < children.length; i++){ children[i].disabled = true; // 버튼 비활성화 children[i].style.WebkitAnimation = "fadeOut 0.5s"; // 0.5초동안 main 섹션이 사라지면 children[i].style.animation = "fadeOut 0.5s" // 사용자가 어떤 한 버튼만 클릭해도, 다른 버튼들은 다 무시가 되고 모든 버튼들이 사라진다. } setTimeout(() => { var target = qnaList[qIdx].a[idx].type; // 우리가 선택한 버튼이 가지고 있는 타입이 target에 할당됨. //버튼을 클릭하는 순간에 바로 값 증가 for(let i = 0; i < target.length; i++){ select[target[i]] += 1; // 이 반복문이 돌고나면 사용자가 버튼을 클릭하였을 때, 12간지의 순서대로 해당하는 type의 값이 1씩 증가 } for(let i = 0; i < children.length; i++){ children[i].style.display = 'none'; // 버튼이 보이지 않게 } goNext(++qIdx); console.log(target); console.log(children.length); },450); //450 경과 시 }, false); 저는 이 for문 안에 들어있는 select[target[i]] += 1; 이 부분을 이해하기 위해 calResult() 부분에 console.log(select); 를 작성하였고, 임의로 선택된 모든 버튼에 대한 select 값을 받을 수 있었습니다. // console.log(select); [2, 4, 3, 4, 4, 3, 4, 4, 2, 5, 1, 6] 우선 저는 처음에 이 숫자들이 select 값이라는 것은 알고 있었으나 진짜 무엇을 의미 하는 지 알 수 없어 수기로 디버깅을 해보았습니다. 모든 버튼에 대한 type 값을 추적해가며 적어보았는데 qIdx 선택한 버튼 type 0 a [1, 2, 4, 9] 1 c [7, 4, 9, 11] 2 b [7, 9 ,11] 3 c [0, 3, 6, 5] 4 c [2, 5, 8] 5 b [0, 3, 6, 10] 6 a [1, 7, 11] 7 c [1, 7, 11] 8 b [1, 3, 6, 11] 9 a [4, 9, 11] 10 c [2, 5, 8] 11 a [3, 6, 4, 9] 선택한 버튼에 대한 type 값의 누계를 도출해보니 [2, 4, 3, 4, 4, 3, 4, 4, 2, 5, 1, 6] // select console에 제가 요청했던 select 값과 동일한 배열이 나왔습니다. 또한 0~11까지의 띠 순서 그대로 오름차순으로 배정된 것을 발견할 수 있었습니다. 제가 부족한 지식을 동원하여 생각한 바로는 type 값을 누계할 때 오름차순으로 정렬하라는 어떤 메세지가 있지 않으면 [4, 2, 3, 4, 4, 3, 1, 4, 2, 6, 4, 5] 이런식으로 순서에 상관없이 해당 값에 대한 누계만 select 에 담길 것으로 예상하였으나 오름차순으로 배열이 정리되어 정렬 원리가 궁금하였습니다. select[target[i]] += 1; 이 부분에서 자동으로 저희가 선택한 버튼들의 type 을 select 배열에 넣을 때, 각 누계 값이 0 부터 11까지의 오름차순으로 자동 정렬되나요? const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 아니면 저희가 초반에 select 에 0값으로 총 12개의 빈자릿수를 만들어 주었을 때부터 각 자리당 0부터 11까지의 인덱스 주소가 자동 배정되는 건가요? 아니면 이 배열(select)의 정렬방식에 대하여 놓친 부분이 있을까요? 도와주세요 ㅠㅠ
제이 쿼리 연결, 제일 처음 강의에서 파일을 왜 새로 만들고, 왜 첫번째 파일 이름은 3.2어쩌구고 Custom파일에 왜 쓰는건지, 연결은 아래 바디 맨 마지막에 3.어쩌고를 먼저 쓰고 그 다음에 custom 쓰라는 부분만 이해하고 인터넷 찾아보니 무슨 링크를 찾아서 넣고 뭐 방법이 여러가지인데 무슨 말인지 당췌 이해가 안갑니다… 설명이 좀 필요할 것 같아요…도와주세요
모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지만들기 11(9:37) 내용중 인터넷 익스플로러 호환성을 위해 width:240px 대신 max-width:240px를 사용하고 flex-shrink:0;을 설정하셨는데 인터넷 익스플로러가 사용되지 않는 현 시점에서 <link rel="short icon" type="image/x-icon" href="img/fun-coding.ico" /> 이와 같이 익스플로러의 호환성을 고려하는 행위가 현업에서 필요한지 궁금합니다!
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 여기에 질문 내용을 남겨주세요. 안녕하세요 영한님. 이번 강의도 잘 수강한 학생입니다. 강의 내용과 공식 문서를 참고하며 간단한 게시글 리포지토리를 만들어보고자, 아래처럼 작성했었습니다. public interface BoardRepository { Long save(final Board board); ... } @Repository @RequiredArgsConstructor public class BoardJpaRepositoryImpl implements BoardRepository { private final BoardJpaRepository boardJpaRepository; ... } public interface BoardJpaRepository extends JpaRepository<Board, Long> { } 강의 내용대로 스프링 데이터 JPA인 BoardJpaRepository에 Impl을 붙인 BoardJpaRepositoryImpl을 만들었는데, 아래와 같이 순환 참조 문제가 발생했습니다. The dependencies of some of the beans in the application context form a cycle: boardController defined in file [/Users/hyunjoonchoi/Desktop/2024/2024-mju-mentoring/build/classes/java/main/com/mju/mentoring/board/controller/BoardController.class] ↓ boardService defined in file [/Users/hyunjoonchoi/Desktop/2024/2024-mju-mentoring/build/classes/java/main/com/mju/mentoring/board/service/BoardService.class] ┌─────┐ | boardJpaRepositoryImpl defined in file [/..../build/classes/java/main/com/mju/mentoring/board/infrastructure/BoardJpaRepositoryImpl.class] └─────┘ Action: Relying upon circular references is discouraged and they are prohibited by default. Update your application to remove the dependency cycle between beans. As a last resort, it may be possible to break the cycle automatically by setting spring.main.allow-circular-references to true. 그런데 이름을 BoardRepositoryImpl, JpaBoardRepositoryImpl 등 다른 이름으로 하니까 순환 참조 문제가 해결되더라구요 이에 대해서 다른 외국 개발자 분들도 이슈로 올리고, 그것들을 찾아봤으나 메인테이너 분이 @Lazy를 사용하거나 ObjectProvider를 사용해야 한다고 말씀해주시는 것 밖에 없었습니다. 공식 문서 ( https://docs.spring.io/spring-data/jpa/docs/1.5.0.RELEASE/reference/html/repositories.html#repositories.create-instances )를 보면 스프링 데이터 JPA + Impl로 할 시 자동으로 스프링 데이터 JPA의 구현체로 인식한다고 되어 있는 것 같은데, 이런 순환 참조 이슈가 발생한 원인을 알 수 있을까요? 이를 해결해보고자 스프링 데이터 JPA 레포지토리에 직접 이슈로 남기고 ( https://github.com/spring-projects/spring-data-jpa/issues/3320 ) 답변을 받았긴 했습니다만, 여전히 다른 이야기를 하시는 것 같아 영한 님께도 문의드리고 싶습니다!
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요. 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ ex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다! 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 상품상세페이지 구현-2 마지막에 보면 css를 적용하고자, product폴더내에 Index.css를 만드는데, Index.js에 css를 import하지 않고 넘어가서 상세페이지구현-3 영상에서는 그냥 css를 적용하고 적용되는 모습이 영상에 담겨있습니다. 원래 자동으로 Import 되는게 아니라면, 이부분에 대한 추가적인 제안이 필요할거같습니다. import "./index.css";
========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 강의를 보다가 문득 궁금한 부분이 생겨서 질문 드립니다. int의 경우 오버플로우가 발생하면 Long 형으로 형 변환을 하면 된다고 하셨는데 double을 사용하다가 오버플로우가 발생한다면 어떻게 처리를 하는지 궁금해져서 질문드립니다. 혹시 double형을 사용하면서 오버플로우가 발생하는 상황 자체가 잘 못 된것일까요?
items에 div를 사용했기때문에 CSS작성시 그러한 것 때문에 이왕이면 다른 태그가 좋다고 하는 부분은 이해가 됐어요~ 혹시나 dl dt dd 태그를 이용을 안하신건 이유가 있으실까요? div를 사용해도 되고 어느것도 괜찮다고 하셨는데 dl이 있는데 이용하지 않고 span태그와 h3를 이용하신 이유가 있을 것 같아서요.
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 안녕하세요 강의에서 설명해주신 대로 따라하려고 했습니다. 단 , ddl-auto : create 대신 미리 SQL 문으로 테이블을 생성해놓고 ddl-auto: validate로 실행시 에러 가 납니다. 이는 실제로 배운 것을 사용할 수 없는 아주 치명적인 부분 이라고 생각하여 질문을 드립니다. [문제 설명] 강의에서 설명해주신대로 위와 같이 Enumerated 를 사용하여 status 를 정의 하였습니다. 말씀해주신대로 value = EnumType.STRING을 사용했습니다. UserStatus 는 당연히 enum 타입으로 했구요. @Column(name = "status", length = 32) @Enumerated(value = EnumType.STRING) private UserStatus status; 이때 status 가 있는 테이블은 아래와 같은 SQL문으로 생성하였습니다. VARCHAR(255)로 생성한 점을 자세히 봐주세요! dbms: MySQL CREATE TABLE user ( `id` BIGINT NOT NULL AUTO_INCREMENT, `status` VARCHAR(255) NOT NULL check (status in ('CREATED', 'WITHDRAW')), PRIMARY KEY (id) ); 또한 application-yml 에는 아래와 같이 ddl-auto 를 validate 로 하였습니다. jpa: hibernate: ddl-auto: validate properties: hibernate: format_sql: true show-sql: true 하지만 이를 실행하면 아래와 같은 status의 타입 오류 에러 가 나옵니다. Schema-validation: wrong column type encountered in column [status] in table [user]; found [varchar (Types#VARCHAR)], but expecting [enum ('created','withdraw') (Types#ENUM)] 이는 db의 status 의 타입이 enum 이길 기대했지만 실제로는 VARCHAR이기 때문에 에러가 발생한다는 것입니다. (ddl-auto의 validate에 의해 검증 수행) MySQL에서 타입에 enum을 적용하면 해결되지만 쓰는 것을 최대한 지양 해야 한다고 알고 있습니다. 따라서 mysql 의 status 컬럼의 타입을 enum 대신 column 타입을 varchar(255)로 두고 사용 하려고하는데 위와 같은 에러가 나서 실행이 되지 않습니다. ddl-auto : none 으로 설정하면 임시적으로 실행은 할 수 있지만 validate 로 검증을 항상 진행하려고 합니다. [질문 내용] 1. mysql의 타입을 varchar로 두고, ddl-auto: validate 를 사용하면서 에러 없이 실행할 수 있는 방법이 궁금합니다. 2. ddl-auto : create로 하게 되면 자동 생성되는 sql문에서는 status에 enum 대신 create table user ( id bigint not null, status varchar(255) check (status in ('CREATED', 'WITHDRAW')), primary key (id) ) 위처럼 varchar로 column 속성을 주면서 validate 할때만 에러가 나는것이 이상한 것 같은데 왜 그럴까요? 3. 이를 현업에서는 어떻게 해결하고 계신지 궁금합니다.
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 다른 분께서 올려주신 질문 글을 읽고 저 또한 같은 의문이 생겼지만, 그에 대한 답변이 저에게는 잘 와 닿지 않아서 제가 이해한 바를 적어봅니다. 상속 관계에 있는 객체의 메서드를 사용할 때는, 우선 메서드를 사용하는 변수의 참조값을 따라 인스턴스를 찾고, 인스턴스 내의 변수 타입과 동일한 클래스 타입부터 시작하여 메서드를 찾는다고 하셨습니다. 그리고 이렇게 메서드를 찾을 때는 자식 클래스에서 부모 클래스 방향으로 올라가는 것만 가능하고, 부모 클래스에서는 자식 클래스에 대한 정보가 없으므로 반대는 불가능하다고 말씀하셨습니다. 그런데 부모 변수가 자식 인스턴스를 참조하는 다형적 참조의 경우, 메서드를 호출하는 변수의 타입은 부모 클래스이므로 메서드를 부모 클래스에서 찾을 것이고, 부모 클래스는 자식 클래스에 대한 정보가 없는데 어떻게 자식 클래스에 해당 메서드가 오버라이딩이 되었는지 판단하는지 잘 이해가 되지 않았습니다. 제 식대로 내린 결론은 다음과 같습니다. 다형적 참조에서는 변수의 타입은 Parent지만, 이 변수가 참조하는 것은 자식 인스턴스인 Child입니다. 호출된 메서드를 찾을 때는 변수의 타입과 같은 Parent에서 탐색하는 것은 맞지만, 오버라이딩 여부는 Child 인스턴스 내에서 별개로 확인하는 것이고 Parent 인스턴스와는 무관합니다.제가 이해한 방식이 맞나요?
안녕하세요, 설명 우선 launch를 할때 port를 8080으로 설정하고 setting을 해도 fly.toml 파일과 dockkerfile에 port번호가 3000으로 자동으로 설정되는 문제가있어 해당파일의 port번호를 수동으로 8080으로 다시 설정하고 deploy완료했을 때 해당 주소로 접속시에 접속이 안되는 오류가발생합니다. 이미지 fly.toml dockkerfile https://h-market-server.fly.dev/ 접속시 오류 구글링, 다른분들의 질문을 찾아봤는데도 해결하지못해, 질문드립니다. 파일을 지우고 다시런치 후 배포 프로젝트를 다 지우고 gitclone해서 런치 후 배포 등 다른방법들을 다 진행해봐도 해결되지않아 질문남깁니다.
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 양방향 매핑을 할 때와 단방향 매핑을 할 때의 성능 차이가 있나요? 그러니까, 단방향 매핑을 한 후, 각 엔티티의 레포지토리를 통해 명시적으로 조회하는 것과, 양방향 매핑을 한 후, get을 사용하여 조회하는 상황의 성능 차이에 대해 궁금합니다. 지연로딩을 사용하는 경우, 결국 나가는 쿼리 수는 같지 않나요?
모던 웹을 위한 상세한 모던 CSS Selector 정리3[2:49]에서 셀렉터에 따른 css적용 모습을 보여주셨는데, css가 아래와 같이 작성된 상태에서 p:first-child { color: red; } p:last-child { color: blue; } p:nth-child(2) { color: green; } p:nth-last-child(2) { color: purple; } <body> <div> <p>1번</p> <p>2번</p> <p>3번</p> <p>4번</p> <p>5번</p> </div> </body> 의 결과값은 <body> <p>1번</p> <p>2번</p> <p>3번</p> <p>4번</p> <p>5번</p> </body> 의 결과값은 이렇게 나오는데, 왜 이런 차이가 발생하는 것인가요? 제 생각엔, <div>태그가 없더라도 <body>태그를 기준으로 하면 last-child가 적용되는 자식 요소의 순서는 똑같아야 할 것 같은데 그 이유가 궁금합니다
