172만명의 커뮤니티!! 함께 토론해봐요.
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
본 강좌 <모던 HTML/CSS로 상용화도 가능한 반응형 모던 웹페이지 만들기5> 강의 7:35 분쯤에서 background-position 값을 center 10% > center 50% 로 바꿨을 때 y축 값이 커졌으므로 그림이 아래로 내려가는게 맞다고 생각하는데 왜 그림이 위로 올라가는 건가요 ?
미해결
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
선생님 강의 자세하게 설명해주셔서 너무 잘 듣고있습니다. Sass 환경설정 후 선생님처럼 동일한 코드를 붙여넣으면 "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats":[ // This is Default. { "format": "expanded", "extensionName": ".css", "savePath": "/css" } ], "liveSassCompile.settings.autoprefix": [], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**", ], "liveSassCompile.settings.includeItems": [ ], } 저는 이런 에러가 떠요. 아무리 구글링을 해도 다들 셋팅 방법만 나와있고 이런 설명이 없어서요..샘 답변 부탁드립니다.
미해결
실전! 코틀린과 스프링 부트로 도서관리 애플리케이션 개발하기 (Java 프로젝트 리팩토링)
강사 님께서는 객체를 인스턴스화 하실 때, 생성자를 사용하거나, 정적 팩토리 메서드를 사용하는 방식 2가지를 이용하셨는데 혹시 코틀린에서 builder 패턴을 사용하는건 어떻게 생각하시나요?? defalut 파라미터를 이용하고 naming을 통해 builder패턴 처럼 사용할 수 는 있겠지만 java에서 builder패턴을 통해 객체를 만들었던 것에 비하면 불편하다는 생각이듭니다. 조언 해주시면 감사하겠습니다.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
css peaker 기능 중 해당 태그에서 alt + F11 누르면 해당 css가 아래에 뜨는 게 안되네요ㅠㅠ ctrl 누르고 클릭하면 해당 css파일에 해당 태그 스타일로 넘어가는건 정상 작동합니다. ■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
미해결
재고시스템으로 알아보는 동시성이슈 해결방법
안녕하세요, 강의를 보고 공부를하다 궁금한 점이 생겨 질문드립니다. 제가 예측한 강의 내용으로는, "경쟁 상태 예시(재고 수량)에 대하여 레디스 를 활용한다." 라고 예측 했습니다. 이에 대하여, "레디스는 싱글 스레드 기반이니깐, 락킹 없이 해당 작업이 가능할 것" 이라고 추측하였는데요, 그러나 제가 생각지 못한 레디스 lock 과 관련된 내용을 접하게 되어 신기하면서도 또 궁금한 부분이 생겨 질문드립니다. 레디스 락 전략이 사용되는 이유와 예시를 조금더 들어볼 수 있을까요? 혹은 이와 관련하여 추가적으로 공부해볼 수 있는 자료를추천해주시면 감사하겠습니다.
미해결
<M.B.I.T> 테스트 페이지 만들기! with Django
makemygrations을 실행 시키려니까 이런 오류가 발생합니다. 번역시켜보니까 'main_developer와 main_Question에 대해 지연 참조로 선언되었지만 앱 'main'이 제공하지 않습니다.' 라고 하는데 어떻게 해야 하나요?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
안녕하세요. 강의를 모두 수강하고 웹사이트를 배포한 상태입니다. 지도에 마커도 잘 찍히고 인포윈도우 정보도 잘 뜨고 있는 상태입니다. 원래 강의에서는 인포윈도우에 유튜브 섬네일과 영상 링크가 올라가도록 코드를 짜주셨는데 혹시 저 섬네일과 주소를 네이버 지도 상에 있는 주소와 섬네일로 고칠 수 있는지 궁금해서 질문을 남깁니다. 제가 다니고 있는 학교 주변의 식당 정보들이 마커에 찍히고 그 마커를 찍었을 때 네이버 지도에 나와있는 섬네일과 주소 링크를 달고 싶습니다. 위 코드는 선생님께서 최종 배포하신 코드 자료에 올려주신 코드중에 인포윈도우 창에 올라가는 정보들을 설정하는 부분입니다(map.js 파일) 이 부분을 어떻게 잘 수정하면 될 거 같은데 어떻게 하면 좋을까요? 네이버 지도에서 제 학교 주변의 중국집을 검색해서 식당중 하나를 클릭하면 https://map.naver.com/p/search/%ED%95%9C%EA%B2%BD%EB%8C%80%20%EC%A4%91%EA%B5%AD%EC%A7%91/place/37921639?c=15.00,0,0,0,dh&placePath=%3Fentry%253Dbmp 이러한 웹주소가 뜨고 그 식당옆에 있는 섬네일을 클릭하면 https://map.naver.com/p/search/%ED%95%9C%EA%B2%BD%EB%8C%80%20%EC%A4%91%EA%B5%AD%EC%A7%91/place/37921639?c=15.00,0,0,0,dh&placePath=%2Fphoto%3Fentry%253Dbmp 이런식의 주소가 주소창에 표시가 됩니다. 이 주소 형식을 어떻게 잘 이용해서 위에 올린 인포윈도우 코드에 적용을 하면 강의 자료처럼 유튜브의 섬네일과 주소가 아닌 네이버 지도의 섬네일과 주소를 불러올 수 있을거 같은데 코드를 어떤식으로 수정해야 할지 조언을 얻을 수 있을까요?
해결됨
실전! Querydsl
갱신된 강의자료에도 나와 있듯이, fetchResult, fetchCount 등의 메소드는 deprecated 예정입니다. 또한 해당 메소드는 Page 타입을 반환하기 때문에 Page 타입을 직접적으로 조작해야 한다는 제약이 있습니다. 이걸 잘 쓰면 되는데, Page 의 시작번호 등 제약도 있어서 저는 회사에서 Page 를 따로 만들어서 사용하거든요. 그래서 search 메소드와 count 메소드는 항상 분리하고 있습니다. 2. 그런 점에서 count 만 최적화하는 로직만 베껴서 만든 최적화 메소드입니다. 실제로 count 구문을 실행하기 위한 메소드입니다. 필요에 따라서 public 으로 만들어도 될 것 같네요. // count 실행 메소드 private Long countByCond(MemberSearchCond cond) { return query .select(member.countDistinct()) .from(member) .where( usernameEq(cond.getUsername()), teamNameEq(cond.getTeamName()), ageGoe(cond.getAgeGoe()), ageLoe(cond.getAgeLoe()) ) .fetchOne(); } 최적화 로직을 베낀 메소드입니다. 스프링 데이터 JPA 는 아래 코드와 같이 page, size 값이 null 이 아니고, 적절한 범위에 있는지를 판단하여 isPaged 라는 분기를 만듭니다. 참고로 코드를 분석하면서 내린 뇌피셜이니 혹시 틀리다면 말씀해주세요. page 가 0 이 아니라 1 부터 시작하는 건 제 취향입니다. 회사에서 그렇게 쓰고 있거든요. 필요에 따라 0 부터 시작하도록 바꾸는 건 어렵지 않을 것 같습니다. public Long countByCondOptimization(List<?> content, MemberSearchCond cond, Long page, Long size) { boolean isPaged = page != null && size != null && page > 0 && size > 0; long offset = isPaged ? (page - 1) * size : 0L; long contentSize = content.size(); if (!isPaged || offset == 0) { if (!isPaged || size > contentSize) { return contentSize; } return this.countByCond(cond); } if (contentSize != 0 && size > contentSize) { return offset + contentSize; } return this.countByCond(cond); } 이렇게 하여 count 쿼리를 리스트 조회 쿼리와 분리하여 재사용성을 높이면서, 성능도 최적화할 수 있습니다. 감사합니다.
해결됨
실전! Querydsl
강의에서는 Query DSL 4.x 버전이어서 제네릭 없는 예제 코드인 것 같은데, 제가 올리는 버전은 5.0 버전이어서 차이가 있음을 감안해주세요. 정렬 조건을 하나만 추가하는 코드입니다. 정렬 조건을 여러 개 추가하려면 반복문을 돌면서 JPAQuery 를 동적으로 확장해나가면 됩니다. // 페이징하는 메소드에서 사용 private Expression<? extends Comparable<?>> specifyMemberProperty(String prop) { prop = prop == null ? "" : prop.toLowerCase(); if (prop.equals("username")) { return member.username; } if (prop.equals("age")) { return member.age; } return member.id; } // 페이징하는 메소드 // ... .orderBy(new OrderSpecifier<>("desc".equalsIgnoreCase(dir) ? Order.DESC : Order.ASC, specifyMemberProperty(prop))) .fetch(); -- 저는 일단 이렇게 만들어봤는데, 다른 분께서 더 나은 코드, 더 빠른 코드가 있다면 저한테도 알려주세요. 감사합니다.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
@ManyToOne @JoinColumn(name = "parent_id") private Category parent; @OneToMany(mappedBy = "parent") private List<Category> child = new ArrayList<>(); 안녕하세요. 위 코드에서 부모 쪽에 다대일 매핑 한 이유를 알고 싶습니다. 아니면 DB 테이블 안에서 부모 셀프 외래 키를 만들어서 조회할 때 이 외래 키를 참조하여 자식 카테고리들까지 같이 조회하게 만들었기 때문에 테이블에서 다는 parent_id니까 jpa에도 parent에 다를 준 건 가 싶기도 해서요 필드 명에 부모 자식이 있어서 부모는 하나고 자식은 여러 개인데 부모 쪽에 다로 돼있어서 헷갈리네요..
미해결
<M.B.I.T> 테스트 페이지 만들기! with Django
위에 보시는 것과 같이 실행시키니까 facebookShare.addEventListner는 함수가 아니라고 오류가 발생하는데 분명 강의 내용과 똑같이 쳤는데도 불구하고 이런 오류가 발생했습니다. 혹시 이것만 오류가 있나해서 다른것도 확인해 보니까 밑에 kakaoshare나 copyBtn에서도 같은 오류가 발생하였습니다. 어떻게 해야하나요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
저도 강의 따라가다가 세로로 갑자기 변환되어서 답변 내용대로 해봤지만 고쳐지지를 않아서 질의 드립니다 아래 코드는 html코드입니다 <html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> <body> <div id="header"> <div id="header-area"> <img src="images/images/icons/logo.png"/> </div> </div> <div id="body"> <div id="banner"> <img src="images/images/banners/banner1.png"/> </div> <h1>판매되는 상품들</h1> <div id="product-list"> <div class="product-card"> <img class="product-img" src="images/images/products/basketball1.jpeg"/> <div class="product-contents"> <span class="product-name">농구공 1호</span> <span class="product-price">50000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> </div> <div class="product-card"> <img class="product-img" src="images/images/products/keyboard1.jpg"/> <div class="product-contents"> <span class="product-name">키보드 1호</span> <span class="product-price">30000원</span> <div class="product-seller"> <img class="product-avatar" src="images/images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> <div class="product-card"></div> <div class="product-card"></div> </div> <div id="footer"></div> </body> </head> </html> 아래는 css코드입니다 * { margin: 0; padding: 0; } #header{ height: 64px; display: flex; justify-content: center; border-bottom: 1px solid gray; } #body{ min-height: 100%; width: 1024px; margin: 0 auto; padding-bottom: 24px; } #footer{ height: 200px; background-color: red; } #banner{ height: 300px; background-color: yellow; } #header-area{ width: 1024px; height: 100%; display: flex; align-items: center; } #header-area > img{ width: 128px; height: 36px; } #body > h1{ margin-top: 16px; } #banner > img{ width: 100%; height: 300px; } #product-list{ display: flex; flex-wrap: wrap; margin-top: 12px; flex-direction: row; } .product-card{ width: 180px; height: 300px; margin-right: 12px; margin-bottom:12px; border: 1px solid rgb(230, 230, 230); border-radius: 12px; } .product-img{ width: 100%; height: 210px; } .product-contents{ display: flex; flex-direction: column; padding: 8px; } .product-name{ font-size: 14px; } .product-price{ font-size: 16px; font-weight: 200px; margin-top: 4px; } .product-seller{ display: flex; align-items: center; margin-top: 12px; } .product-avatar{ width: 24px; } 바쁘시겠지만 답변 해주시면 감사하겠습니다! +해당 코드 진행 후 개발자 도구 이용해서 보면 flex에 의해 정해지지않은 보라색 칸이 있는데 해당 칸 처리가 힘들어 추가 질문 올립니다!
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
섹션10 스크롤에 반응하는 이미지와 텍스트 애니메이션 제작에 자료파일이 안보여요.
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요! 제가 파이널 과제를 진행하다가 인증번호 전송부터 인증 완료 단계의 자바스크립트 코드를 작성하면서 어려움을 겪고 있어서 문의드립니다. 해당 코드를 적용하여 html 파일을 실행시킨 결과 인증완료 버튼을 눌러도 인증번호만 초기화가 되고 타이머는 그대로 1초씩 감소하는 상태가 유지되었습니다. clearInterval(timer)를 하면 반복함수가 멈춰 document.getElementById("timer").innerText = "3:00";의 결과로 3:00이 되는 것으로 생각했는데 왜 초기화가 되지 않는지 도통 모르겠습니다. <div class="certification"> <div id="certificationNumber">000000</div> <button id="sendButton" disabled = "true" onclick="submit()">인증번호 전송</button> </div> <div class="certification"> <div id="timer">3:00</div> <button id="completeButton" disabled = "true" onclick="completeMessage()">인증 확인</button> let timer let isStarted = false const submit = () => { const token = String(Math.floor( Math.random() * 1000000)).padStart(6, "0"); document.getElementById("certificationNumber").innerText = token; document.getElementById("sendButton").setAttribute("disabled", "true") document.getElementById("completeButton").removeAttribute("disabled") if(isStarted === false) { // 타이머가 작동중이 아닐때 isStarted = true let time = 180 timer = setInterval(function(){ if(time >=0) { let min = Math.floor(time/60) let sec = String(time%60).padStart(2, "0") document.getElementById("timer").innerText = min + ":" + sec; time = time -1 } else { document.getElementById('completeButton').disabled = true; isStarted = false document.getElementById("certificationNumber").innerText = "000000"; document.getElementById("timer").innerText = "3:00"; clearInterval(timer) } },1000) } else { } } const completeMessage = (timer) => { clearInterval(timer) alert("인증이 완료되었습니다.") document.getElementById('completeButton').disabled = true; isStarted = false document.getElementById("completeButton").innerText = "인증 완료" document.getElementById("signup").disabled = false; }
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
Club GreenSock을 제외하면 상업적으로 무료로 사용가능한건가요?
미해결
실습으로 배우는 선착순 이벤트 시스템
강의 잘 듣고 있습니다. 질문사항이 두개 있습니다. 1. 4강의 [문제점] 영상에서 쿠폰생성 10000개 요청으로 인해 mysql이 1분에 100개의 insert가 가능하다고 가정할 시 '주문생성/회원가입요청이 타임아웃 또는 10분뒤에 실행' 된다고 하셨는데요. 예제로 사용하신 Kafka 사용 예제에서는 Consumer 프로젝트도 어차피 API프로젝트와 같은 DB 를 바라보고 있으므로, 어차피 Kafka를 사용하여도 '주문생성/회원가입요청이 타임아웃 또는 10분뒤에 실행'되지 않나요? 왜 여쭤보냐면, 강의 내에서 Kafka 미사용시 주문생성/회원가입요청의 타임아웃 및 10분뒤 실행에 대한 해결책을 Kafka로 사용하셔서 문의드립니다. 2. 5강의 [Consumer 사용하기] 영상을 보면 API 프로젝트 Consumer 프로젝트가 별개로 존재합니다. 그러므로 API프로젝트의 테스트 케이스가 종료되어도 Consumer 프로젝트는 이미 Kafka로 100개의 데이터가 스트림으로 들어오는 상태이므로, 테스트케이스가 종료 되어도(즉, API프로젝트가 종료되어도) Cunsumer 프로젝트는 종료가 되지 않은 상태 이므로 100개의 쿠폰이 DB에 생성 이 되어야 하는게 아닌지요? 왜 여쭤보냐면, 강의 내에서는 API프로젝트가 종료되면 Consumer 프로젝트도 작업이 멈추는 현상이 있어서 문의드립니다.
미해결
CSS 기본부터 활용까지
실습 해보는데 css 중앙 정렬이 안되더라구요 그래서 뭔가 하고 봤더니 doctype부분에서만 차이가 있는데 오히려 doctype을 선언하지 않으니까 중앙 정렬이 돼요. 이게 왜 이럴까요?
해결됨
인터페이스는 일단 객체를 못만든다고 알고 있어요 근데 익명이너클래스를 이용해서 만드는 방법이 있던데 interface A{ abstract void abc(); } 이거를 A a = new A(){ public void abc(){.....} }; 이렇게 할 수 있던데 익명이너클래스에 인터페이스를 상속해서 abstract메서드를 오버라이딩 했기때문에 가능하다는 건 알겠는데 그러면 객체는 익명이너클래스의 객체 아닌가요...? 익명객체가 인터페이스A를 상속받았기때문에 다형적인 표현으로 A a 이렇게 표현이 가능한건가요? 저런 표현이 가능한가요? 참조변수 a는 인터페이스A 타입인 객체를 가리킨다는 뜻 아닌가요..? 근데 인터페이스는 객체를 못만든다고 배웠는데.. ㅠㅠㅠ 정말 이 부분이 이해가 안 갑니다 ㅠㅠㅠ 왜 객체를 인터페이스 타입으로 지칭하는지 ㅠㅠ
미해결
스프링 시큐리티
안녕하세요 강의 잘 듣고 있습니다! SecurityConfig에서 커스텀 필터 등록 시 @Bean 형식으로 필터객체를 생성하여 등록하면 ApplicationFilterChain에 등록되는게 맞는걸까요? Bean 만 선언한다면 ApplicationFilterChain 에 등록되고 addFilter(customFilter) 를 추가해주면 ApplicationFilterChain 리스트에도 등록되고 SecurityFilterChain 에도 등록이 됩니다. 문제는 제가 만든 커스텀 필터는, 특정 URL 에서는 동작 안하게끔 구현하고 싶은데 @Bean으로 등록했기 때문에 ApplicationFilterChain에 등록되어 어떤 요청이 들어오든 동작하는 게 문제입니다. @Bean 방식이 아닌 addFilter(New CustomFilter()) 로 하면 SecurityFilterChain에만 등록되긴 하는데 CustomFilter 는 스프링 컨테이너에 등록이 안되기 때문에 다른 Resource 객체들을 주입받지 못하는 상황입니다. 결론은 ApplicationFilterChain에는 추가 안하고 SecurityFilterChain에만 커스텀 필터를 추가하고 싶은데 New 방식 말고는 없는 것인지가 궁금합니다!
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="layout.css" /> </head> <body> <nav> <div class="inner"> <div class="nav-container"> <hi class="nav-title">맛집지도</hi> <button class="nav-contact">contact</button> </div> </div> </nav> <main> <section id="category"> <div class="inner"> <div class="category-container"> <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2> <div class="category-list"> <button class="category-item">한식</button> <button class="category-item">중식</button> <button class="category-item">일식</button> <button class="category-item">양식</button> <button class="category-item">분식</button> <button class="category-item">구이</button> <button class="category-item">회/초밥</button> <button class="category-item">기타</button> </div> </div> </div> </section> <!-- 카테고리 --> <div id="map" class="inner"></div> <!-- 카카오지도 --> </main> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=b156fcbd2ea3a6340f64c07f5eaef559" ></script> <script src="layout.js"></script> </body> </html> @font-face { font-family: "KyoboHandwriting2020A"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff") format("woff"); font-weight: normal; font-style: normal; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: "KyoboHandwriting2020A"; font-size: 10px; } nav { /* background-color: orange; */ } .nav-container { padding: 1rem 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .nav-title { font-size: 3rem; } .nav-contact { font-size: 2.5rem; justify-content: right; border: none; background: none; cursor: pointer; font-family: inherit; } .category-title { font-size: 3.5rem; } .category-item { width: 25%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: orange; cursor: pointer; } .inner { padding: 0 1.5rem; } @media all and (min-width: 1024px) { .inner { max-width: 1024px; margin: 0 auto; } } /* 카카오맵 css */ body { height: 100vh; } nav { height: 59px; } main { padding-top: 1.5rem; height: calc(100%-59px); display: flex; flex-direction: column; } #map { flex-grow: 1; width: 100%; height: 100%; } var container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3, //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 이렇게 했는데 지도가 안 나와요ㅠㅠ 어디가 틀린 걸까요
