Campanula

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 > 첫번째

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

스프링 프레임워크의 역사

프레임워크: 뼈대나 근간을 이루는 코드들의 묶음

프레임워크를 이용한다는 의미: 프로그램의 기본흐름이나 구조를 정하고 모든 팀원이 이구조에 자신의 코드를 추가하는 방식으로 개발

장점: 실력이 부족한 개발자라 하더라도 반쯤 완성한 상태에서 필요한 부분을 조립하는 형태의 개발 가능

간단함, 전체 구조를 설계할 때 유용함, 다른 프레임워크들의 포용, 개발 생산성과 개발 도구의 지원

자바 기반의 프레임워크

IoC: 결합도

AOP:응집도

스프링 프레임워크

개발자들에게 컴포넌트 모델을 제공하고, 단순하면서도 일관성 있는API 집합을 제공하여 개발자들이 복잡한 응용프로그램을 설계하는 동안 복잡하고 어려운 기반 코드에 연연하지 않도록 도움을 줌.

특징
경량 컨테이너로서 자바 객체를 직접 관리, 각각의 객체 생성, 소멸과 같은 생명 주기를 관리하며 스프링으로부터 필요한 객체를 얻어올 수 있다.

의존성 주입(DI)을 통한 객체 간의 관계 구성

AOP지원

편리한 MVC구조

WAS의 종속적이지 않은 개발 환경

POJO(Plain Old Java Object: 경량의 자바 객체 또는 별도로 종속되지 않는 자바 객체를 의미) 방식의 프레임워크

일반적인 J2EE에 비하여 기존에 존재하는 라이브러리 등의 지원이 용이하고 객체가 가볍다.

스프링은 의존성 주입(Dependency Injection(DI): 객체 사이의 의존 관계가 자기자신이 아닌 외부에 의해서 설정) 지원

의존성 주입을 역제어(IoC:Inversion Of Control)

즉, 역제어의 한 형태가 의존성 주입(DI)

DI컨테이너: 어떤 클래스가 필요로하는 값이나 인스턴스를 자동으로 생성, 취득하여 연결시켜주는 역할

생명주기: init, service

스프링은 관점 지향 프로그래밍 지원(Aspect-Oriented Programming, AOP)

기능을 핵심 비지니스 로직과 공통 모듈로 구분하고 핵심 로직에 영향을 미치지 않고 사이사이에 공통 모듈을 효과적으로 잘 끼워넣도록 하는 개발 방법. 공통 모듈을 보안 인증, 로깅 같은 요소들이 해당

의존성(하나의 객체가 다른 객체 없이 제대로 된 역할을 할 수 없다는 것을 의미, 하나의 객체가 다른 객체의 상태에 따라 영향을 받는 것을 의미) 주입(외부에서 밀어 넣는 것)(DI) => 어떤 객체가 필요한 객체를 외부에서 밀어 넣는다.

스프링에서 ApplicationContext가 관리하는 객체들을 '빈'이라는 용어로 부르고 빈과빈 사이의 의존관계를 처리하는 방식으로 XML 설정,어노테이션 설정, Java 설정 방식을 이용 가능

IoC 컨테이너

서블릿 컨테이너 = 매핑 필요

서블릿 컨테이너 동작 순서

1./WEB-INF/web.xml 파일 구동

2.브라우저로부터 요청 수신

3.클래스를 찾아 객체를 생성하고 doGet() 메서드 호출

4. doGet() 메서드 실행 결과를 클라이언트 브라우저로 전송

제어의 역행: 컨테이너로 처리하는 것을 의미 소스에서 객체 생성과 의존 관계에 대한 코드가 사라져 결과적으로 낮은 결합도의 컴포넌트 제작 가능

결합도가 높으면 유지 보수가 어려움=> 결합도를 낮추기 위해서 가장 쉽게 생각할 수 있는 것이 객체 지향 프로그래밍의 핵심 개념인 다형성을 이용. 인터페이스를 추가, 모든 객체가 공통으로 가져야 할 메서드들을 추상 메서드로 선언하면 유지 보수가 용이해진다.

=>디자인 패턴 이용하기

factory 패턴(외부에서 주소값을 받아와서 반환)을 적용. 클라이언트에서 사용할 객체 생성을 캡슐화하여 느슨한 결합 상태로 만들어줌

스프링 xml 설정파일 제작

bean 엘리먼트 사용. id 생략 가능하지만 class는 생략 불가능, bean을 가지고 인스턴스 생성

init-method: servlet 컨테이너는 web.xml 파일에 등록된 servlet 클래스의 객체를 생성할 때 디폴트 생성자만 인식. 생성자로 serlvet 객체의 멤버변수를 초기화할 수 없다. 그래서 서블릿은 init() 메서드를 재정의 하여 멤버변수를 초기화

destroy-method: 객체를 삭제하기 직전에 호출될 임의의 메서드 지정 가능

scope 속성

scope의 속성값을 "singleton"으로 설정하고 클라이언트에서 세번 요청하면 한번만 나옴=> 인스턴스 한번만 생성

 "prototype"으로 설정: 해당 bean이 요청될 때마다 매번 새로운 객체를 생성하여 반환

스프링의 가장 중요한 특징: 객체의 생성과 의존 관계를 컨테이너가 자동으로 관리(IoC: 제어의 역행) = 스프링의 핵심원리

의존성 Lookup: 컨테이너가 애플리케이션 운영에 필요한 객체를 생성하고 클라이언트는 컨테이너가 생성한 객체를 검색하여 사용하는 방식

의존성 Injection: 객체 사이의 의존관계를 스프링 설정 파일에 등록된 정보를 바탕으로 컨테이너가 자동으로 처리

※스프링 오류: 인스턴스를 생성하지 않아서 나는 오류가 많음.

외장 스피커를 사용할려면 필드 생성을 해줘야 한다.

의존관계 변경

인터페이스 추가

<bean id="1" class="com.spring.polymorphism.1" />

1인터페이스 객체로 이동

설정 파일

Setter 인젝션을 사용하려면 <property> 엘리먼트를 사용해야하며 name 속성값이 호출하고자하는 메소드 이름

Setter 메서드 이름 : name 속성값

setSpeaker(): name="speaker"

setAddressList(): name="addressList"

setBoardDAO(): name="boardDAO"

어노테이션 기반 설정

컴포넌트 스캔 설정

: <bean> 등록하지 않고 자동으로 생성하려면 <context:component-scan />이라는 엘리먼트를 정의

이 설정을 추가하면 스프링 컨테이너는 클래스 패스에 있는 클래스들을 스캔하여 @Component가 설정된 클래스들을 자동으로 객체 생성 bean 설정파일 줄 필요없이 사용할 클래스 위에다 Annotation을 붙여준다.

@Autowired

생성자나 메서드, 멤버변수 위에 모두 사용가능

대부분 필드 위에 선언하여 사용. 해당 변수 타입을 체크, 그 타입의 객체가 메모리에 존재하는지를 확인한 후 그 객체를 필드에 주입. 주로 변수 위에 설정하여 해당 타입의 객체를 찾아서 자동으로 할당

@Autowired

private Speaker speaker;

@Qualifier: 특정 객체의 이름을 이용하여 의존성 주입할 때 사용. 의존성 주입 대상이 되는 객체가 두 개 이상일 때 발생. 객체의 이름이나 아이디 지정가능

추가 어노테이션

@Component를 상속 어떤 클래스가 어떤 역할을 수행하는지 파악하기 위해

control단 annotation

기본 핸들러 @Controller와 @RequestMapping 어노테이션스프링 웹 MVC의 주요 구성 요소

컨트롤러: 사용자 요청을 해석하고 모델과 뷰를 반환하는 기능을 가진 메서드들로 구성. 

@Controller로 컨트롤러임을 선언하고 @RequestMapping으로 요청 url 패턴을 지정

컨트롤러 기본 형식

@Controller

public class 컨트롤러명{

  @RequestMapping("요청url패턴")

   public 반환타입 메서드명(Model 파라메타명...){

             비즈니스 로직;

       return "뷰명";

   }

}

@RequestMapping: URL을 컨트롤러의 메서드와 매핑할 때 사용하는 스프링 프레임워크의 어노테이션이다.

클라이언트의 요청URL 패턴이나 HTTP요청 메서드에 대해서 컨트롤러의 클래스나 메서드에 선언

속성

path(혹은 value): 요청된 URL에 따라 매핑

method: GET,POST, PUT,DELETE 같은 HTTP Request method에 따라 매핑을 결정

headers: 특정 헤더의 값에 따라 매핑

produces: 서버에 응답 헤더 타입과 문자셋 설정. produces = "text/html; charset=utf-8"

ModelAndView: 컨트롤러가 디스패처  서블릿에 반환해야 하는 뷰와 모델 정보를 모두 포함하고 있는 객체를 반환

const[state(값을 담을 변수), setState(변수값을 바꿔주는 함수)] = useState(초기값);

test1파일

movies: 값을 담을 변수

setMovies: 변수값을 바꿔주는 함수

: 초기값 배열

const{name, nickname}=state;은

const name = state.name;

const nickname= state.nickname이랑 같음

object에 있는 값을 바로 변수 할당

state안에 이미 name이랑 nickname이라는 변수가 있어서 변수선언

state를 console.log(state)해보면 {name:"홍길동",nickname:"홍아무개"}로 출력

객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.

name이 key값

스프레드 연산자(...): 기존 배열 객체의 값을 그대로 복사해와서 사용할 수 있는 연산자

const subject1=["국어", "영어", "수학"]

const subject2=["사회","과학"]

const subject=[...subject1, ...subject2]

console.log(subject)

["국어", "영어", "수학","사회","과학"]

some() 메서드는 배열한의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트

배열 변경X

값이 배열 내 존재하는지 확인

const fruits = ["apple", "banana", "mango", "guava"];

function checkAvailability(arr, val) {
  return arr.some((arrVal) => val === arrVal);
}

checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // true

https://developer.mozilla.org/ko/

장점

1. 보기 쉽고 익숙하다.

2. 더욱 높은 활용도

컴포넌트

프로젝트 생성

npm init react-app book-react

라우팅: 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로, '경로를 지정하는 과정' 의미, 페이지 라우팅은 요청에 따라 적절한 페이지를 반환하는 일련의 과정

리액트 라우터 설치(프로젝트 설정 후0

npm i react-router-dom

실행 방법

npm start

프로젝트에 라우터 적용하기

리액트 라우터가 제공하는 BrowserRouter컴포넌트로 App을 감싼다.

book-react1

경로 설정, route, link to

이벤트를 사용할 때 주의 사항

이벤트 이름은 카멜 표기법으로 작성

이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달

DOM요소에만 이벤트를 설정

keycode===13은 엔터