25G.story

styled component : 서브 파트 라이브러리 (외부 라이브러리) react에서 주는 게 아니라 외부에서 가져오는 라이브러리이다 https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers..

위와 삭제 버튼을 눌렀을 때 알고리즘은 3번을 삭제할 때 밑에 있는 4번을 3번 자리로 이동시켜주는 것이다. 이렇게 하면 자료가 10000개가 있다고 가정하면 99997개의 자료를 다시 한 칸씩 당겨야 한다. 이건 별로 좋은 알고리즘이 아니다. 컴퓨터에서 io다음으로 지연을 시키는 요소가 렌더링이다. 위 알고리즘처럼 하면 그림을 이동시켜야하는데 이게 렌더링 작업 중에 하나다. 그래서 리 엑트에서는 삭제할 때는 각 엘레맨트에 데이터를 이동시킨다. 위 경고창이 나온 이유도 item마다 key가 있어야 효율적으로 엘레멘트를 찾아서 작업을 해줄 수 있기 때문에 ket값을 넣어주라는 말이다. 삭제 버튼 구현 삭제버튼을 눌렀을 때 상태 변경을 하려면 PostItem에서 상태를 들고 있어야 하는데 App에서 들고 있..

자세한 설명은 저번 react포스팅을 참고할 것. 위 콘솔을 보면 데이터는 잘 바뀌지만 그림은 바뀌지 않는 것을 확인할 수 있다. 그럼 어디를 수정하면 그림도 같이 바뀔까? 바로 return이 다시 제 시작돼야 한다. 그러려면 결국 App이 다시 실행돼야 한다 하지만 app이 제 실행되면 num값이 초기화되기 때문에 그림은 초기 상태와 그대로가 된다. 그럼 결국 세 가지 조건이 생긴다. 1. 데이터를 변경해야 한다. 2. 앱(return)이 제 실행되야한다 3.num은 내부에서 지역변수로 관리하면 답이 안 나온다. 실행시키면 즉각적으로 바로 그림과 바뀐 데이터를 일치시켜준다. 주석이 핵심 내용이다

규칙 대문자로 시작하는 js파일은 디자인을 가진 컴포넌트 파일이라는 의미다. 지금 당장에 쓰지 않는 파일들을 삭제한다 임포트 문도 삭제해준다 파스칼 표기법 자바에서 클래스 만들 때 사용하는 표기법 저번에 다운받은 snipets 플러그인이 제공해주는 기능 https://medium.com/ Medium – Where good ideas find you. Medium is an open platform where readers find dynamic thinking, and where expert and undiscovered voices can share their writing on any topic. medium.com 위와 같은 플러그인이나 유용한 라이브러리를 위 커뮤니티를 잘 찾아보면 현시점의 최신..

자바스크립트를 브라우저 없이 실행하기 위해서 필요한 자바스크립트 런타임 환경 제공 프로그램인 node.js를 다운로드한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org IDE는 vscode를 사용합니다. 다운로드하여주세요 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud ..

@Transient db에 컬럼이 만들어지지 않게 하고 싶을 때 사용하는 어노테이션입니다. 뷰에 렌더링할때 칼럼에 필요 없거나 추가하면 문제가 생기는 데이터지만 값을 뷰로 들고 가야 하는 경우가 있다. 이럴 때 javax.persistece가 들고 있는 Transient어노테이션을 사용하면 DB에 컬럼을 만들지 않고도 변수를 담아서 데이터를 뷰로 들고 갈 수 있습니다.

지금 현재 하고 있는 프로젝트에서 페이징 처리를 해 보려고 합니다. 위 어노테이션을 사용해서 spring에서 페이징처리를 할 수 있습니다. 다음과 같이 페이징 할 설정들을 어노테이션에 달아주고 해당 객체를 Service를 하는 곳으로 던져 준다. 이때 List가 아닌 Page타입으로! Service단에서 받아주고 repository를 사용해서 호출하는 메서드도 위 상황과 코드에 맞게 수정해 준다. 이렇게만 설정해 주면 내부적으로 Spring이 알아서 페이징 처리를 해 주는데 postman으로 테스트를 해보면 다음과 같은 데이터가 넘어온다. data내부에 content안에 있다. (데이터를 뿌려줄때 이 구조로 돼 있지 않으면 데이터가 view에서 보일 수 없다.) 그리고 데이터를 보다 보면 pageable..

QLRM라이브러리 사용해서 DTO를 매핑해 보겠습니다. QLRM라이브러리 의존성 org.qlrm qlrm 2.1.1 QLRM라이브러리란?? qlrm은 DB에서 Result 된 결과를 자바 클래스에 메핑 해주는 라이브러리. QLRM를 사용하는 이유 다음과같은 쿼리는 모델의 형태로 리턴 받을 수 없고 DTO로 받아내야 하는 쿼리다. 이처럼 DTO로 받아 내야 하는 쿼리라면 JPARepository를 상속받은 인터페이스로 native쿼리를 짜서 날릴 수 없다. 왜냐하면 상속받은 클래스 타입의 모델만 리턴을 해주기 때문. 그렇기 때문에 DTO로 DB에서 결과를 받아야하면 JPARepository를 사용할 수 없다. 기능예시 그래서 @Service단에서 직접 쿼리를 짜서 던져야한다. 주석이 중요한 내용이고 코드는..

현재 이지업에 강의를 보면서 진행하는 프로젝트에서 사용자의 구동 적보를 관리하는 기능이 있다. 이기능은 까다로워서 프로그램을 설계해서 짜게되면 프로그램도 지저분해지고 엄청 복잡해 진다. 그래서 이런 복잡한 기능은 쿼리를 잘 짠다면 엄청깔끔하게 프로그램을 작성할 수 있게된다. 쿼리를 짜는 실력이 늘기위해선 해당 포스팅에서 보여주는것과 같이 생각을하면서 점차점차 목표하는 쿼리를 만들기위해서 생각하고 연습하고 노력해야한다. 다음과 같은데 위 기능이 구현하기 까다로운 이유는 user정보도 있고 구독여부 정보와 사용자와 중복 여부까지 체크를 해야 한다. 이렇게 하기 위해서 쿼리를 짜야한다. 조인을 해야하는데 조인은 다음과 같이 데이터를 검색해 준다. 2번이 구독하고 있는 user들을 검색하는 쿼리를 짜고 이제 구..

일의 최소 단위를 트렌젝션이라고 한다. Service를 하는 파일에서 DB에 변형을 주는 행위를 만들 때 @Transactional가 있으면 어떤 일이 일어날까? 트렌잭션을 수행하던도중에 오류가 나면 해당 트렌젝션 자체를 롤백을 해주기 때문에 DB의 무결성에 큰 문제가 생길 일을 막아 줄 수 있다. 그럼 select할때도 @Transactional을 걸어줘야 하는 이유가 뭘까? 영속성 컨텍스트는 sevice가 끝나는 시점에 변경된 오브젝트를 감지를 한다.(감지된다면 db에 자동 flush(더티 체킹)) @Transactional(readOnly =true)를 걸게되면 더티체킹을 하지 않고 읽기 전용 트렌젝션이 된다.