Campanula

어려웠던 부분

도형 사이를 잇는 점선 구현

input type="text"에 값을 정해놨더니 직접 수정이 안되는 것

질문할 것
1. input type text로 했는데 value값을 {number}로 넣었더니 텍스트 직접 수정 불가능
2. {number}의 값을 number에 대입하고 싶은데 안됨.
3. 수량 Maximum과 Mininum 제한하는 법

4.도형 사이를 잇는 점선 구현

Modal을 이용해 팝업창 구현하기

터미널에 입력

npm install react-modal

=>모달 라이브러리를 사용할 수 있게 되었다.

import Modal from 'react-modal';

로 import

Modal이라는 객체는 isOpen을 필수적으로 가지고 있어야한다.

isOpen값은 true/false여야한다.

https://curryyou.tistory.com/533

어려웠던 부분

도형 사이를 잇는 점선 구현

input type="text"에 값을 정해놨더니 직접 수정이 안되는 것

질문할 것
1. input type text로 했는데 value값을 {number}로 넣었더니 텍스트 직접 수정 불가능
2. {number}의 값을 number에 대입하고 싶은데 안됨.
3. 수량 Maximum과 Mininum 제한하는 법

4.도형 사이를 잇는 점선 구현

Modal을 이용해 팝업창 구현하기

터미널에 입력

npm install react-modal

=>모달 라이브러리를 사용할 수 있게 되었다.

import Modal from 'react-modal';

로 import

Modal이라는 객체는 isOpen을 필수적으로 가지고 있어야한다.

isOpen값은 true/false여야한다.

https://curryyou.tistory.com/533

input[id*="popup"]{
    display:none;
}
input[id*="popup"] + label {
    display: inline-block;
    padding: 20px;
    background-color: #00b7d4;
    color:#fff;
}
input[id*="popup"] + label + div{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    z-index: 100;
}
input[id*="popup"] + label + div > div{
    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 500px;
    height: 300px;
    background: #fff;
    z-index: 2;
}
input[id*="popup"] + label + div > div >label{
    position:absolute;
    top: 0%;
    right: 0%;
    transform: translate(40%,-40%);
    padding: 20px;
    background: #dd5347;
    border-radius: 100%;
    z-index: 1;
}
input[id*="popup"] + label + div > label{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.9);
    z-index: 1;
}

function Popup(){
    return(
        <div>
            <input type="checkbox" id="popup" />
            <label for="popup">View</label>
            <div>
                <div>
                    <label for="popup"></label>
                </div>
                <label for="popup"></label>
            </div>
        </div>
       
    )
}

export default Popup;

최종 후원 금액이 올라감.

https://unho94.tistory.com/242

https://namhandong.tistory.com/93

수량에 따라 가격 변동

https://velog.io/@frontjsw/React-001-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD%EC%8B%9C-%EC%88%AB%EC%9E%90-%EC%A6%9D%EA%B0%80

https://velog.io/@eunjin/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%88%98%EB%9F%89-%EB%8D%94%ED%95%98%EA%B8%B0-%EB%B9%BC%EA%B8%B0-%EB%B2%84%ED%8A%BC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

여러개의 버튼 중 하나만 선택

https://velog.io/@intersoom/React-%EC%97%AC%EB%9F%AC-%EA%B0%9C-%EB%B2%84%ED%8A%BC-%EC%A4%91-%ED%95%98%EB%82%98%EB%A7%8C-%ED%81%B4%EB%A6%AD%ED%95%98%EA%B2%8C-%EB%A7%8C%EB%93%A4%EA%B8%B0

가독성을 위한 리워드 선택 옆 창

사용여부를 체크해서 
delete를 사용하는 것이 아니라 검색이 안되게 
disave

포인트 만료기간select where해서 기간이 지나면 조회가 안되게

움직이는 파도

https://velog.io/@intersoom/%EC%A1%B8%EC%A0%84%EB%A1%9C%EA%B7%B8-415-React-Canvas-%EB%B0%98%EC%9D%91%ED%98%95-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-Canvas%EB%A1%9C-wave-%ED%8C%8C%EB%8F%99-%EB%A7%8C%EB%93%A4%EA%B8%B0

슬라이드

https://velog.io/@intersoom/React-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EC%87%BC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

참고: @ModelAttribute는 전달 받은 파라미터를 강제로 Model에 담아서 전달하도록 할 때 필요한 어노테이션이다.
메서드명을 맵핑과 같이 설정, reauestParam 값을 ArrayList에 담음
/*요청방법: http://localhost:8080/sample/exam02Bean?list[0].name=홍길동&list[0].age=25&list[1].name=scott
 * '[]'문자를 특수문자로 허용하지 않아 오류가 발생한다.
 * 해결방법: http://localhost:8080/sample/exam02Bean?list%5B0%5D.name=홍길동&list*/
//model을 담지 않으면 임의로 값 대입x, 아래는 model이 생략된것, sampleDTOList 이름으로 전달(클래스 이름의 소문자)

[값]

@ResponseBody: 일반적인 JSP와 같은 뷰로 전달되는 게 아니라 데이터 자체를 전달하기 위한 용도이다.

참고 : @RestController (@Controller + @ResponesBody)  //댓글

* Controller가 REST 방식을 처리하기 위한 것임을 명시.   

* (기존의 특정한 JSP와 같은 뷰를 만들어 내는 것이 목적이 아닌 REST 방식의 데이터 처리를 위해서 사용하는(데이터 자체를 반환) 어노테이션이다.  

* @ResponesBody: 일반적인 JSP와 같은 뷰로 전달되는 게 아니라 데이터 자체를 전달하기 위한 용도이다. 

* @PathVariable: URL 경로에 있는 값을 파라미터로 추출하려고 할 때 사용한다.  

* @RequestBody: JSON 데이터를 원하는 타입으로 바인딩 처리한다. 

https://help.tumblbug.com/hc/ko/articles/900006673363--%ED%9B%84%EC%9B%90-%ED%9B%84%EC%9B%90%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%98%EB%82%98%EC%9A%94-

https://cocoder16.tistory.com/37

화면에 고정되는 메인메뉴 만들기 - 리액트, 자바스크립트

https://www.walterz.net/2023/03/22/sticky-menu-react-javascript/

[React/Typescript] 반응형 네비게이션 만들기 (Navigation with CSS media queries)

https://jeewonscript.tistory.com/6

개발 🐾/ReactJS

React 스크롤시 Fix 하기 (Window scroll)

https://wazacs.tistory.com/28

Group: 프로젝트를 만들고 관리할 단체나 회사 정보(도메인 이름)

Package: 프로젝트 생성 시 기본적으로 생성할 패키지 경로 지정(com밑에 바로 불가능/com.boot 상위 불가능)

그룹과 패키지

코드를 수정하면 자동으로 재시작하게 하기위해 Spring Boot DevTools(의존성 관리를 하기 위해)

static: 이미지, css,.. 정적인 파일

templates: springBoot에서 권장하는 파일

application.properties에서 오른쪽 클릭 properties Other:UTF-8

pom.xml에서 의존성 관리

스프링의 핵심 가치: 개발자가 비즈니스 로직 구현에만 집중할 수 있게 하는 것

제어의 역전(IoC)

객체를 생성하고 사용하는 일련의 작업을 개발자가 직접 제어하는 구조

하지만 제어의 역전을 특징으로 하는 스프링은 사용할 객체를 직접 생성하지 않고 객체의 생명주기 관리를 외부에 위임

객체의 관리를 컨테이너에 맡겨 제어권이 넘어간 것을 제어의 역전(개발자가 하지 않는다.)

제어의 역전을 통해 의존성 주입, 관점 지향 프로그래밍 등이 가능해 짐

의존성 주입DI: 제어의 역전의 방법 중 하나, 사용할 객체를 개발자가 직접 생성하지 않고 외부 컨테이너가 생성한 객체를 주입 받아 사용하는 형식

생성자를 통한 의존성 주입

필드 객체 선언을 통한 의존성 주입

SETTER 메서드를 통한 의존성 주입

 @Autowired라는 어노테이션을 통해 의존성을 주입. 생성자를 통해 의존성을 주입할 때는 @Authowired 어노테이션을 생략할 수 있다. 하지만 가독성을 위해 어노테이션을 명시하기를 권자한다.

생성자를 통한 의존성 주입

@Authowired

puglic DIController(MyService myService){

this.myService = myService;

}

필드 객체 선언을 통한 의존성 주입

@Authowired

private MyService myService;

setter메서드

MyService myService;

@Authowired

public void setMyServiece(MyService myService){

this.myService = myService;

}

공식 문서에서 권장하는 의존성 주입 방법을 생성자를 통해 의존성을 주입 받는 방식

다른 방식과는 다르게 생성자를 통해 의존성을 주입 받는 방식은 레퍼런스 객체 없이는 객체를 초기화할 수 없게 설계할 수 있기 때문이다.

관점지향 프로그래밍(AOP): 객체 지향 프로그램을 더욱 잘 사용하도록 돕는 개념

관점: 어떤 기능을 구현할 때 그 기능을 핵심 기능과 부가 기능으로 구분해 각각을 하나의 관점으로 보는 것을 의미

AOP관점에서는 부가 기능은 핵심 기능이 어떤 기능인지에 무관하게 로직이 수행되기 전 또는 후에 수행하면 된다.

AOP: 비즈니스 로직에서 반복되는 부가 기능을 하나의 공통 로직으로 처리하도록 모듈화해 삽입하는 방식

1.의존성 관리: spring-boot-starter라는 의존성 제공, 각 라이브러리 기능과 관련해서 자주 사용되고 서로 호환되는 버전의 모듈 조합을 제공

2. 자동설정

스프링 프레임워크의 기능을 사용하기 위한 자동 설정을 지원, 애플리케이션에 추가된 라이브러리를 실행하는 데 필요한 환경 설정을 자동으로 찾아준다. => 애플리케이션을 개발하는 데 필요한 의존성을 추가하면 프레임워크가 이를 자동으로 관리해준다.

@SpringBootApplication어노테이션은 세 개의 어노테이션을 합쳐 놓은 구성

@SpringBootConfiguration

@EnableAutoConfiguration

@ComponentScan

@Component 시리즈

@Controller, RestController,Service, Repository, Configuration

내장 WAS: 톰캣이 내장되어 있다.

 들여쓰기 템플릿 수정 필요

실행 방법: Boot Dashboard > local > 첫번째

이미 구동되고 있는데 다시하면 오류남