inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

훈훈한 자바스크립트_eventListener를 활용한 태그 삭제

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

아래코드를 입력했는데, newLi dblclick했을때 삭제처리가 되지 않습니다. 문제가 뭘까요? const todoInput = document.querySelector("#todo-input"); const createTodo = function () { const todoList = document.querySelector("#todo-list"); //List자체를 받아오기 const newLi = document.createElement("li"); const newSpan = document.createElement("span"); /** * pseudo: (addEventListner) * 할일이 완료가 된지 안된 일인지 알 수가 없음 -> EventListner를 추가 * 버튼태그와 함께 온클릭 이벤트를 생성 */ //02-addEventListner파트: 버튼태그 추가 및 Event속성(onClick 추가) const newBtn = document.createElement("button"); newBtn.addEventListener("click", () => { //클릭을 했을 때 어떻게 할지에 대한 내용을 익명 함수로 지정 newLi.classList.toggle("complete"); //버튼을 눌렀을 때 새로운 클래스를 추가해준다 }); //02-addEventListner: 당연히 삭제도 되어야할텐데... (더블클릭 -> 삭제) newLi.addEventListener("dblclick", () => { newLi.remove(); }); newSpan.textContent = todoInput.value; newLi.append(newBtn); newLi.appendChild(newSpan); todoList.appendChild(newLi); //왜 굳이 span태그를 만들고 span 태그를 List에 추가한 건지는 알 수가 없으나.. 나중에 알려주겠지.. todoInput.value = " "; console.log(newLi); }; //여기까지만 했을때는 기능상 부족한 부분이 상당히 많음 const keyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value) { //만약 키보드값에 대해 enter값이 눌리면 -> createTodo(); } };

  • react
  • node.js
  • seo
  • graphql
  • next.js
nazombwa 댓글 1 좋아요 0 조회수 246

git hub 연결에 4시간 썼는데 안됩니다ㅜ,,

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

Github 연결하려 하는데 마지막 단계에서 오류가 자꾸 떠요ㅜㅠ 홈페이지에서 precamp 파일을 지웠다가 다시 만들어도 보고 했는데 계속 저런 알 수 없는 오류가 뜨네요,, 어떻게 다시 연결할 수 있을까요? ㅜㅅㅜ

  • react
  • node.js
  • seo
  • graphql
  • next.js
현준인뒈요 댓글 2 좋아요 0 조회수 534

css basic transfrom+transition 레퍼런스 코드 질문있어요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 쇼핑몰 레퍼런스 css 코드 104줄에 있는 .item .imgBox img는 왜 들어가있는지 알수있을까요? transition하고 아무 상관 없지 않나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
nimbus 댓글 1 좋아요 0 조회수 270

cypress 를 사용해 modal 에 접근하는 방법을 모르겠습니다

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

상품등록 페이지를 cypress 를 통해 test 해보던 도중 kakao map 을 사용해 주소입력 하는 부분에서 문제가 발생하고 있습니다. 개발자 도구를 사용해서 kakao map 의 input 의 class 확인해 해당 class name 으로 get()요청을 했지만 인식을 못하고 있습니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
kyb1208tg 댓글 1 좋아요 0 조회수 493

dbms의 기출문제를 보고싶습니다.

해결됨

윤파고의 정보처리기사 DB/프로그래밍 All-In-One

혹시 기출문제 올인원은 어디서 볼 수 있나요?

  • python
  • java
  • c
  • dbms/rdbms
  • 정보처리기사
댓글 2 좋아요 0 조회수 765

TextEncoder is not defined 에러가 발생합니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

FAIL __test__/test/index.test.ts ● Test suite failed to run ReferenceError: TextEncoder is not defined 1 | // 하드코딩된 미니 백엔드 > 2 | import { graphql } from "msw"; | ^ 다음과 같은 에러가 뜨는 이유가 뭘까요? 찾아보니 node 18을 사용하지 않아 발생하는 문제라는데 node -v 을 확인해보면 제대로 18버전을 이용하고 있습니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
kyb1208tg 댓글 2 좋아요 0 조회수 1955

연관관계 설정 시에 ID값을 알고 있다면

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 간단한 내용이지만 조금 고민이 있어서 질문드립니다. 요청을 통해서 받은 데이터를 통해서나 로직상에서 연관관계에 필요한 Entity의 id값을 알고 있는 경우 필요한 Entity를 DB에서 조회하는 과정 없이 id값만 초기화된 Entity를 생성하여 주입하는 방식이 가능한 것으로 알고 있습니다. 이 때, 그렇게 주입된 Entity는 persist된 상태가 아니라는 점인데요. ( cascade 옵션이 적용 안 되었다는 가정 ) 이런 경우에 두 가지 경우의 수를 고려하였습니다. 첫 번째는 연관관계 Entity가 연관관계 설정 외에는 사용될 일이 없는 로직의 경우이고 두 번째는 연관관계에 필요한 Entity가 이후에도 여러 로직에서 사용되는 경우입니다. 두 번째의 경우에는 사실 고민할 것 없이 ID를 이용해 Entity를 생성하는 것이 아닌 SELECT를 통해서 Entity를 조회하여 사용하는 것이 좋은 방법이고 EntityGraph를 맞추는 면에서도 당연히 해주어야 하는 것으로 사료됩니다. 하지만 첫 번째의 경우 굳이 Entity를 ID값을 통해 조회하는 과정이 필요한 지에 대한 의문입니다. 저런 단순한 로직의 경우 굳이 DB와의 정합성을 위해 조회 및 연관관계 편의메소드 등을 이용해서 EntityGraph를 맞춰줄 필요가 있나 싶었습니다. 이런 경우에서 실제 현업에서는 어떤식으로 처리하는 지 궁금합니다. 저렇게 각 상황에 따라 효율을 따져서 다르게 처리하는 지 아니면 ID를 통해 데이터를 조회하는 것은 크게 성능상 문제가 되지 않으니 불필요하더라도 로직의 통일성이나 혹시 모를 사이드 이펙트를 대비해서 조회한 뒤 연관관계 편의 메소드를 통해 EntityGraph까지 맞춰 주는 지 궁금합니다..! 저는 불필요하다고 생각하여 굳이 Entity그래프를 맞춰줄 필요가 없는 경우는 그런 과정을 생략하며 프로젝트를 하고 있었는데, 완성하고 보니 EntityGraph를 맞춰 주는 로직이 단 하나도 없는 걸 알게 되었습니다. 아무래도 복잡한 비즈니스 로직이 없어서 그럴 수도 있겠다는 생각은 들었지만 너무 심한 것 같아 제가 JPA를 제대로 쓰고 있는 게 맞나 싶어 질문드립니다..ㅠㅠ

  • java
  • jpa
공부용 댓글 1 좋아요 0 조회수 466

await에 대해 약간 헷갈리게되버렸어요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

수업에서 async await를 쓰게 되면, await 뒤쪽 함수가 실행 된 후, await를 보자마자 어? 오래걸리겟네? 하면서 스레드가 해당 async함수를 통째로 마이크로큐에 넣어버린다고 말씀하셨는데요. 만약 await뒤의 함수가 Promise를 반환하게 되면, 해당 Promise를 반환하는 함수가 먼저 큐에 쌓이고, 그 뒤에 async함수가 들어가서 pipo구조에 따라, promise가 반환된 후 async함수가 실행되면서 기다리는것처럼 보인다고 말해주셨습니다. 근데... 이 말 대로라면, await 함수 뒤에 굳이 Promise가 올 필요가 있나요? XMLHttpRequest()가 오더라도, 콜스택에서 해당요청이 실행된 후, 결과값을 가진 상태에서 마이크로큐로 들어가니까, 똑같이 await가 되는게 아닌지요? 분명 순차적으로 수업을 들으면서 다 이해햇다고 생각햇는데 갑자기 헷갈립니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
신지환 댓글 2 좋아요 0 조회수 381

로그인 페이지에 접속 하기만 해도 JSSEISONID 값을 가집니다

미해결

스프링 시큐리티

Cookie 값을 삭제 하며 여러 동작을 해보던 도중, 로그인을 하기 전부터 JSSESSIONID 값이 cookie 에 들어가 있는 것을 확인하였습니다. 처음에는 오류인가 싶어 값을 삭제하고 로그인하였더니, 로그인이 동작하지 않고 그냥 페이지가 reload 된 다음 임의의 JSSESSIONID 값을 가져왔습니다. 왜 reload 할 때마다 JSSESSIONID 값을 가져오는 걸까요? 그리고 왜 JSSESSIONID 값 없이는 로그인 동작 자체가 안 되는 걸까요?

  • java
  • spring-boot
  • spring-security
정재빈 댓글 2 좋아요 0 조회수 503

Querydsl Q클래스 생성 오류

해결됨

실전! Querydsl

plugins { id 'java' id 'org.springframework.boot' version '3.1.5' id 'io.spring.dependency-management' version '1.1.3' id "com.ewerk.gradle.plugins.querydsl" version "1.0.10" } group = 'study' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral () } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt: $ { dependencyManagement.importedProperties [ 'querydsl.version' ]} :jakarta" annotationProcessor "jakarta.annotation:jakarta.annotation-api" annotationProcessor "jakarta.persistence:jakarta.persistence-api" testImplementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' } tasks. named ( 'test' ) { useJUnitPlatform () } clean { delete file ( 'src/main/generated' ) } tasks. named ( 'bootBuildImage' ) { builder = 'paketobuildpacks/builder-jammy-base:latest' } tasks. named ( 'test' ) { useJUnitPlatform () } //querydsl 세팅 시 def querydslDir = " $buildDir /generated/querydsl" querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java. srcDir querydslDir } configurations { querydsl. extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations. querydsl } 인프런에서 질문 & 답변을 보고 gradle 설정했는데도 오류가 계속 발생됩니다. Build and run using : Gradle 로 변경하면 발생 되는 오류 입니다. 오류 : Attempt to recreate a file for type study.querydsl.entity.QHello

  • java
  • jpa
Jun 댓글 1 좋아요 0 조회수 3103

서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

선생님, 안녕하세요. 너무 기초적인 질문일 수 있지만, 갑자기 궁금해져서 질문드립니다. 서버사이드 렌더링의 경우, 서버에서 pre-render된 코드를 만들어서 보내주고, 클라이언트에서 hydrate를 해서 페이지를 만든다고 알고 있습니다. 클라이언트 사이드 렌더링의 경우는 html코드와 js코드를 함께 보내서, 클라이언트에서 페이지를 만들구요. 서버사이드 렌더링을 할 때, pre-render된 코드를 만드는 서버는 각 클라이언트들의 컴퓨팅 자원을 사용하는 건지(클라이언트의 컴퓨터에서 만드는 건지), 아니면 배포하는 중앙(?)서버(aws ec2 또는 이 강의에서 처럼 vercel)의 컴퓨팅 자원을 사용하는 건지(서버에서 만드는 건지) 궁금합니다. 클라이언트 측에서 다 계산을 한다고 하면, 중앙(?)서버의 부담이 적을테지만, 중앙(?)서버에서 한다고 하면, 부담이 갈 수 있을 것 같아서요. 최근 next.js 14버전이 되면서 디비와 직접 통신하는 등 기능이 많이 생겼는데, 이 통신하는 등의 역할은 client side가 아닌 server side에서만 가능하더라구요. 그래서 server side라는 게 중앙서버 하나에만 있다면, 계산이 오래걸린다거나 트래픽이 늘어나거나 한다면 다른 사용자들에게도 영향을 끼치지 않을까 궁금했습니다.(자동 확장이 되지 않을때) 또, 이런식으로 간다면 따로 백엔드 서버가 필요없게 될 수도 있겠다라고도 생각해봤는데, 어떻게 보고계시는지도 궁금합니다.

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
google_user 댓글 2 좋아요 1 조회수 1214

구글 콘솔로그 오류창이 계속 떠요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

구글 웹에서 콘솔창을 켜면 계속 이 오류 화면이 뜨는데, 처음에는 무시하고 진행했는데 몇 달간 계속 뜨고 타이머 실습할 때 조금 끊기는 것 같기도 해요ㅜㅠ GPT에 물어보니까 권한이 적절치 않다고 하는데 어떻게 해결할 수 있는 건가요??ㅜㅜ

  • react
  • node.js
  • seo
  • graphql
  • next.js
현준인뒈요 댓글 2 좋아요 0 조회수 381

강의보고 토이프로젝트로 재고감소 낙관적락 기법 적용 질문

미해결

재고시스템으로 알아보는 동시성이슈 해결방법

안녕하세요 강사님 강의를 보고 토이 프로젝트에서 주문 시 재고 감소 및 메뉴 주문량 증가 로직에서 낙관적락 기법을 적용해 보았는데요, 강의에서 해주신 내용 그대로 파사드 패턴 까지 적용을 해보면서 시도했는데 무한 루프가 돌았습니다. hikariCP pool을 40으로 설정해주니 그제서야 해결이 되었는데요, 강의에선 네임드락에서 커넥션풀을 지정해주었는데요 저는 낙관적락인데도 해당 설정을 해서 해결된 이유가 있을까요? @Service @RequiredArgsConstructor public class OrderService { @Transactional public Order orderWithOptimisticLock(Long memberId, LocalDateTime now) { Cart cart = cartRepository.findByMember(memberId); List<CartItem> cartItems = cart.getCartItems(); cartItems.stream() .map(CartItem::getMenu) .forEach(menu -> { decreaseStockWithOptimisticLock(menu.getId(), 1); increaseMenuOrderCountWithOptimisticLock(menu.getId(), 1); }); Money money = calculator.calculateMenus(cart.getMember(), cart.convertToMenus()); Order order = Order.createOrder(cart, money, now); return orderRepository.save(order); } public void decreaseStockWithOptimisticLock(Long menuId, int quantity) { Menu menu = menuRepository.findByIdForOptimisticLock(menuId); menu.decrease(quantity); } public void increaseMenuOrderCountWithOptimisticLock(Long menuId, int quantity) { Menu menu = menuRepository.findByIdForOptimisticLock(menuId); menu.increaseOrderCount(quantity); } } ``` @Component @RequiredArgsConstructor public class OptimisticLockStockFacade { private final OrderService orderService; public Order order(Long memberId, LocalDateTime localDateTime) throws InterruptedException { while (true) { try { return orderService.orderWithOptimisticLock(memberId, localDateTime); } catch (Exception e) { Thread.sleep(50); } } } } ``` public interface JpaMenuRepository extends JpaRepository<Menu, Long> { @NotNull @Lock(LockModeType.OPTIMISTIC) @Query("select m from Menu m where m.id = :id") Optional<Menu> findByIdForOptimisticLock(@NotNull @Param("id") Long id); }

  • java
  • spring
  • 동시성
하윤 댓글 2 좋아요 0 조회수 647

Array.sort 사용 구분

미해결

자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비

앞 문제에서 Collection.sort를 쓰면 문제에서 효율적이지 못하다는 댓글을 봐서 처음부터 Array.sort를 해서 정렬하는 방법을 생각을 못했는데 어떤 문제에선 사용하고 사용하지말고 구분이잘 안되는데 이럴땐 어떻게 하나요...

  • java
  • 코딩-테스트
이주용 댓글 1 좋아요 0 조회수 386

섹션 13에 타입스크립트 실행관련

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

타입스크립트 본수업은 문제없이 진행했는데 freeboard 부분을 진행하다가 api 관련 타입스크립트 설치 과정을 하는데 에러가 보입니다.. 이부분 혹시 뭐때문에 발생하는건지 확인 해주실 수 있으실까요ㅠㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
서나현 댓글 3 좋아요 0 조회수 451

카카오맵 이 출력이 안되요

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

window.kakao에 underfined로 나와요...

  • react
  • node.js
  • seo
  • graphql
  • next.js
esm211 댓글 2 좋아요 0 조회수 698

flush() 와 clear()

해결됨

실전! 스프링 데이터 JPA

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 1. 스프링 데이터 JPA 가 지원하는 save를 호출하면 flush()가 나가는건가요 아니면 save를 하고 bulkAgePlus()를 호출하면서 bulkAgePlus() 에 있는 JQPL이 실행되서 flush() 가 나가는건가요 ? bulkAgePlus()를 실행하면 JPQL 실행이되고, JPQL 이 실행이 되면 flush() 가 호출이 되는데 이때 SQL쿼리문이 DB에 전송이대서 DB에는 업데이트가 되어있지만 영속성 컨텍스트는 업데이트가 안되기 때문에 clear()를 해주는게 맞는건가요 ?

  • java
  • spring
  • spring-boot
  • jpa
최재영 댓글 1 좋아요 0 조회수 483

이벤트 위임 관련 질문드려요!

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 이벤트 위임이란 이벤트 버블링을 이용하여 상위 태그에 이벤트 핸들러를 할당하여 하위 태그에서 중복되는 이벤트들을 없앨 수 있다. 이 과정에서 원치 않은 이벤트 버블링를 막기 위해서는 event.stopPropagation() 함수를 사용해야 한다. 라고 이해했습니다. 이벤트 위임 관련해서 구글링 해보니, 구현 방식에 있어서 자바스크립트와 리액트에서 차이가 있다고 보았는데 자료들이 부정확하고 이해하기 어려워서 질문드립니다. 리액트와 자바스크립트에서 이벤트 버블링 구현시 어떤 차이가 있으며 그 이유와 원리에 대해 설명 부탁드립니다..! 항상 좋은 강의 감사드립니다 이벤트 위임 관련 아래 링크 첨부합니다. https://github.com/facebook/react/issues/13635 https://github.com/facebook/react/issues/13625

  • react
  • node.js
  • seo
  • graphql
  • next.js
asdqqq 댓글 1 좋아요 0 조회수 234

이벤트 핸들러 관련 질문드려요!

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요! 이벤트처리 함수 관련해서 질문드립니다. 현재는 event를 넘겨서 처리하고 있다보니 currentTaget이니 target이니 신경 쓸 것이 많은데, <div onClick(() => onClickAlert(el.writer)} > 이렇게 바로 id의 값을 바인딩시켜줘도 되지 않나요? 혹시 수업에서와 같이 <div id={el.writer} onClick={onClickAlert}> id 속성을 부여하고 이를 onClickAlert에서 event를 받아서 처리해야만 하는 상황이나 위와 같이 했을 때의 이점이 있는지 궁금합니다! 항상 좋은 강의 감사드려요!

  • react
  • node.js
  • seo
  • graphql
  • next.js
asdqqq 댓글 1 좋아요 0 조회수 256

인기 태그

인프런 TOP Writers

주간 인기글