1. EC2 대시보드에서 인스턴스(실행중) 클릭

2. 해당 인스턴스 클릭후 , 인스턴스 상태 에 " 인스턴스 중지 " (종료 ❌)

3. 중지후, 작업 에 이미지 및 템플릿 -> " 이미지 생성 "

4. 이름만 적용후 우측 하단 이미지 생성 클릭

5. NavBar 에 AMI 클릭

6. IMAGE 만들면서 이름 적용

IMAGE를 이용해서 인스턴스 만들기

1. 최초 중지했던 인스턴스를 다시 시작 하기

1-1. 이름 변경

2. 다른 인스턴스에서 보다 편리하게 상호접속을 위해 보안그룹에 Tag 만들기 보안 ->보안그룹 밑 url 클릭

3. 태그관리 클릭

4. 새로운 태그 추가 후 key & value 입력후 변경사항 저장

5. Tag 가 만들어짐. 이 tag를 이용해서 검색하여 보안그룹을 선택할수 있음

6. 다시 인스턴스 창으로 돌아와서 새로운 인스턴스 생성

7. 내AMI 에서 내소유 만들어둔 image 선택

8. 만들어 두었던 키페어 선택

9. 기존 보안 그룹 선택

10. 4개의 인스턴스 생성 -> 인스턴스 시작

11. 인스턴스는 총 5개 만들어진거 확인한후 , 각각 이름변경 해주기

12. SSH Client 에 각각의 인스턴스 등록- 키페어는 동일한 파일을 사용하기 때문에 따로 만들필요없이 각각 이름과 IP주소만 변경해서 등록

13. 모두 작동 잘하는지 체크

14. DOCKER 인스턴스에서 JENKINS 인스턴스에 ping test를 했지만 ping이 가지 않음

15. 아무 인스턴스 클릭후 보안 에 보안그룹 아래 url 클릭

16. 인바운드 규칙 에서 " 인바운드 규칙 편집 " 클릭

17. 규칙 추가 ➡ 유형 에 " 모든ICMP-IPv4 " (ICMP= ping test 할때 사용하는 protocal 이름) 선택 ➡ 돋보기 모양 선택후 우리가 사용할 인스턴스들이 묶인 보안 그룹 선택 (되도록 0.0.0.0은 사용하지 않는게 좋음. 이는 어디서든 접근하겠다는 의미이기 때문) ➡ 설정 저장 클릭

18. ping 작동 잘됨

도움주신분: https://junyharang.tistory.com/339

1. AWS 가입

2. 가입 후 홈에서 EC2로 들어가기

3. 인스턴스 시작 (왼쪽 메뉴에도 있고 EC2 홈에도 있음)

4. AWS Resion 에서 서울 선택 (각각의 resion끼리는 공유가 되지 않는다)

5. 이름에 EC2의 용도나 이름적기 (나중에 변경 가능)

6. 서버에 설치될 OS 선택

💡 AWS 최초 가입시 프리티어 서비스 80~90개 이용 가능. EC2는 한달 기준 750시간씩 무료로 가능- 단, EC2는 인스턴스 개 당이 아닌 만들어놓은 인스턴스 총 시간으로 적용. ex) 10개읜 인스턴스를 사용할시 각 75시간씩 이용 가능 💡

7. 인스턴스 유형 선택 - 내가 갖고자 하는 컴퓨터의 CPU,Memory 를 선택하는것

8. 키페어- 인스턴스에 접속하기 위한 암호화된 토큰 혹은 암호화된 Key-file

8-1. 키페어 새로 생성 - 키페어 생성하면 pem파일이 저장됨

📌 Mac OS 사용자들은 Putty를 사용하지 않기 때문에 .pem / Window 사용자중 Putty,Xshell을 이용할 예정이라면 .ppk를 선택

9. 스토리지, 고급세부정보 등등 자신에게 맞게 설정후,

인스턴스 시작

EC2 인스턴스 접속

1. 편리하게 인스턴스 접속하려면 SSH Client Tool 이용 - 다양한 tool이 있기때문에 자신에게 맞는것을 선택하면 됨 ( 내가 사용한 Tool )

2. 설치후, 홈화면에 Add -> New Host

3. 서버이름(=Label) 입력후 , Adress 칸에 Ec2 인스턴스 Public IP4 주소 입력 (생성된 AWS 인스턴스에서 확인 가능)

4. EC2 인스턴스는 기본적으로 ec2-user 이라는 계정이 만들어 지고 로그인 방식은 ID,PW가 아닌 KEY (EC2 키페어할때 받은 .pem파일) 로 로그인을 함

4-1. Password 옆 Keys 클릭후 등록키가 없다면 " create a new key " -> 이름 등록후 Drag & Drop 또는 import from keyfile 로 KEY-file(EC2 키페어할때 받은 .pem파일) 가져오기 -> (암호화된 파일이 열렸다면) 오른쪽 상단 save

5. 인스턴스 접속

EC2 인스턴스 JAVA 설치

1. AWS 에서 제공하는 jdk11 version 내려받기 ✏️ sudo curl -L https://corretto.aws/downloads/latest/amazon-corretto-11-x64-linux-jdk.rpm -o aws_corretto_jdk11.rpm ✏️

✏️ sudo yum localinstall aws_corretto_jdk11.rpm ✏️

✏️ java -version ✏️

내려받고, 설치 완료 ⭐️

2. 서버에 설치 되어있는 JAVA 중 원하는 JAVA를 선택할수 있는 명령어 ✏️ sudo /usr/sbin/alternatives --config java ✏️

도움주신분 : https://junyharang.tistory.com/339

1. CSS 를 적용할 파일과 같은 폴더에 파일명.module.css 파일 생성 ex) NavBar.js NavBar.module.css

2. 코드를 css에 적고

   .active {
   color: tomato;
   }
   .link {
   text-decoration: none;
   }

3. .컴포넌트 이름 {CSS 작성} 적용할 파일에

   import styles from "./NavBar.module.css"; 📍import 해주기
   
                <a
          className={`${styles.link} ${ 
            router.pathname === "/" ? styles.active : ""
          }`} 📍 백틱 사용
        >
          Home
        </a>
   
                <a
              className={[ 📍 배열 사용
            styles.link,
            router.pathname === "/about" ? styles.active : "",
          ].join(" ")} 📍 join은 배열내에 것들을 합쳐줌
        >
          About
        </a>
   

📌 백틱으로 여러개의 스타일을 주는방법과 배열로 주는 방법 2가지가 존재.

### < style jsx>< /style>
```javascript
<nav>
      <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>Home</a>
      </Link>
      <Link href="/about">
        <a className={router.pathname === "/about" ? "active" : ""}>About</a>
      </Link>
      <style jsx>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
        .active {
          color: white;
        }
      `}</style>
    </nav>

• 사용할 컴포넌트 안에서 style jsx를 열어주고 css를 적기만하면 끝난다. → import 하지 않아도되는 장점과 클래스네임을 일일히 기억할 필요가 없는 장점이 있음.

• module.css와 마찬가지로 다른 컴포넌트에서 같은 이름을 사용해도 겹치지 않는다. → 무작위로 추가적인 클래스네임이 생성되기때문 → 변수이름짓는데 자유로워지며 충돌을 피할 수 있는 장점이있다.

Globals Style 와 Custom App

• NextJS에서 globalsStyle을 적용하려면 appComponent를 custom해줘야 한다.

⭐️ _app.js 파일을 수정하면 서버를 재시작 해야함 ⭐️

기본적으로 숨어져있는 app을 수정하려면

1. pages에 _app.js를 만들어야한다.

2. _app.js에서 App component를 생성하고, Component와 pageProps를 parameter로 받은 후 불러와준다.

   export default function App({ Component, pageProps }) {
   return (
    <>
      <Component {...pageProps} />
    </>
   );
   }

3. 그후 styles폴더안의 globals.css 를 불러온다. (module이 아닌 css는 커스텀app에서만 불러올 수 있음)

   import "../styles/globals.css"; 📌
   export default function App({ Component, pageProps }) {
   return (
    <>
      <Component {...pageProps} />
    </>
   );
   }

4. 여러 페이지에 공통으로 사용되는 navBar나 footer를 임포트해준다.

   import NavBar from "../components/NavBar";
   import "../styles/globals.css";
   export default function App({ Component, pageProps }) {
   return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
   );
   }

5. style jsx global 을 통해 추가로 글로벌스타일을 주거나, globals.css를 수정하여 글로벌 스타일을 줄 수 있다.

   import NavBar from "../components/NavBar";
   import "../styles/globals.css";
   export default function App({ Component, pageProps }) {
   return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <style jsx global>
        {`
          * {
            font-size: 18px;
          }
        `}
      </style>
    </>
   );
   }

소프트웨어가 다른 소프트웨어로 부터 지정된 형식으로 요청, 명령을 받을수 있는 수단 하지만 네트워크상에서만 있는건 아니다.

🎣 REST API :

프론트엔드 웹에서 서버에 데이터를 요청하거나 (배달앱에서 서버에 주문을 넣거나 등) 이런 서비스들에서 사용되는 것이 REST 란 형식의 API 이다.

1. 각 요청이 어떤 동작이나 정보를 위한것인지를 그 요청의 모습 자체로 추론이 가능하다. - 레스트풀하게 만든 API는 요청을 보내는 주소만으로도 대략 이게 뭘 하는 요청인지 파악이 가능하다.
2. 서버에 REST API로 요청을 보낼때는 HTTP라는 규약에 따라 신호를 전송한다.

🎣 REST API 에서 주로 사용하는 메소드 :

• GET : 데이터를 Read, 조회
• POST : Create, 새로운 정보 추가
• DELETE : Delete, 정보 삭제
• PUT : Update, 정보를 통째로 변경할때
• PATCH : Update, 정보를 일부만 변경할때

✏️ POST, PUT, PATCH 에는 BODY 가 있어 GET, DELETE 보다 많이, 비교적 안전하게 감춰서 정보를 보낼수 있음

메소드들의 기능이 특정 용도에 제한되어 있지는 않지만 (ex. POST 하나로도 CRUD가 가능함) 누구든 각 요청의 의도를 쉽게 파악할수 있도록 RESTful하게 API를 만들기 위해서는 목적에 따라 구분해서 사용해야 함.

⭐️ REST API 설계 ⭐️

📌 URL에서는 동사(verb)를 사용하지 않는다.

터미널 에서 새로운터미널

npm install -g json server

설치 후 ,

json-server --watch ./경로📍 --port 30xx

✏️ Dependency ( 의존성 ): 서비스의 기술 스택이 업그레이드 되거나 확장으로 인해 아키텍쳐 구조를 바꿀 상황은 항상 온다. 무엇인가 바뀔때마다 각각의 기술스택의 라이브러리 호환성과 의존성 문제를 체크해주어야 하는데 도커는 각 기술스택들을 분리된 컨테이너에 고립시키고 얽혀있는 호환성과 의존성 문제를 분리 시켜준다.

🔸 node.js 의 경우 우리의 소스파일만 서버에 배포하는것으로는 어플리케이션을 구동하는데 문제가 있을수 있다. 이런 외부 라이브러리를 사용하면 여러 dependencies 와 환경 설정, 환경 변수 등 모든것들을 설정해줘야 하는데, 모든것을 설치,설정하는것은 번거롭고 오류도 많이 생길수 있음. docker 컨테이너를 사용하면 런타임 환경에 필요한 모든것들을 어떤 pc에서도 언제든지 사용할수 있다.

컨테이너만들기

1. Docker File 만들기 - 컨테이너를 어떻게 만들어야하는 설명서같은 것
2. Image 만들기 - 어플리케이션을 실행하는데 필요한 모든 세팅들이 포함되어 있는것 (변경 불가함)
3. Container - image(class)를 이용해서 어플리케이션 구동하게 함

: 여러 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 훨씬 더 간단하게 만드는 JavaScript 라이브러리

Using jQuery with a CDN :

  <script
      src="https://code.jquery.com/jquery-3.6.1.js"
      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
      crossorigin="anonymous"
    ></script>

AJAX ( Asynchronous JavaScript and XML )

: 서버와 통신하기 위해 XML Http Request 객체를 사용하는 것을 말한다.

• JSON
• XML
• HTML
• 일반 텍스트 형식

등을 포함한 다양한 포맷을 주고 받을 수 있다. AJAX는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이며, AJAX의 강력한 특징은 웹 페이지 전체를 리프레쉬 하지 않고도 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.

AJAX 의 주요 두가지 특징

• 페이지 새로고침 없이 서버에 요청
• 서버로부터 데이터를 받고 작업을 수행

<script>
      $.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });
    </script>

✏️

• method : 전송방식
• url : 주소
• data: 보낼 데이터 Object 형식
• .done() : 전송 완료 후 실행되는 함수

🔸 .append() HTML 요소를 추가하는 jQuery 함수 🔸 어떤 API는 보안상 Access-Control-Allow-Origin 오류가 날 수 있음 -> Front-End용 서버(Node.js 등)를 만들어 해결 가능

https://www.lainyzine.com/ko/article/how-to-install-homebrew-for-m1-apple-silicon/#iterm2-terminal-앱이-애플-실리콘-아키텍처로-실행중인지-확인

• 설치시 오류 https://worldseawater.tistory.com/87

는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제) 를 묶어서 일컫는 말이다. 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용된다.

CI / CD

CI 는 개발자를 위한 자동화 프로세스인  지속적인 통합 ( Continuous Integration ) 을 의미하고,

CD 는 지속적인 배포 ( Continuous Deployment ) or 지속적인 제공 ( Continuous Delivery ) 를 의미한다.

✏️ 어플리케이션 개발 단계 부터 배포 때 까지 모든 단계들을 자동화를 통해서 사용자에게 배포 할수있도록 만드는것 ✏️

• 지속적인 통합 이란 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드/ 테스트 되어 공유 Repository에 (ex. git,github) 통합하는것을 의미

  🔸 다수의 개발자가 한 팀으로 작업할 경우, 공유 리포지토리에 많은 commit들이 쌓이게 되는데 그때마다 충돌 할수 있는 코드들을 자동화된 빌드&테스트로 방지할수 있다.

• 배포 단계에서 “수동적”으로 배포하는것이 지속적인 제공 ( Continuous Delivery ) 이고 “자동화” 로 배포하는것이 지속적인 배포 ( Continuous Deployment ) 이다.

사용 툴: 젠킨스, 빌드카이트 등

• https://app.diagrams.net/
• https://go.gliffy.com/go/html5/launch

📌 플로우차트 란?

프로세스를 수행하기 위해 필요한 일련의 단계와 결정을 시각적으로 표현한 자료이다. 각각의 단계는 다이어그램 도형 안에 표현이 되며 진행 순서는 화살표를 이용하여 표현한다. 이러한 플로우차트는 복잡한 프로세스를 명확하고 이해하기 쉬운 다이어그램으로 문서화하기 위해 사용된다.

📌 플로우차트 기호

https://www.smartdraw.com/flowchart/flowchart-symbols.htm

📌 플로우차트 작성법

1. 일관된 디자인 요소를 사용한다

• 플로우차트의 다이어그램 모양, 선, 텍스트를 일관성 있게 작성하면 산만함을 제거할 수 있다. 색상을 이용하여 프로세스 단계를 더욱 명확하게 표현하는 것도 좋은 방법이다.

2. 모든 프로세스를 한 페이지에 보관하자

• 순서도를 단일 페이지에 넣도록 하고 텍스트를 읽을 수 있는지 확인하는 것이 좋다. 다이어그램이 너무 커져서 페이지에 맞지 않는다면 여러 차트로 나누어 하이퍼 링크로 연결하도록 한다.

3. 왼쪽에서 오른쪽으로의 데이터 흐름을 유지하자

• 정보를 더 쉽게 읽고 이해할 수 있도록 왼쪽에서 오른쪽으로 플로우차트를 구성하는 것이 좋다.

4. 전통적인 마름모 의사결정 기호 대신 분할 경로를 사용하자

• 기존의 마름모꼴의 결정 기호는 위 규칙(왼쪽에서 오른쪽으로)을 위반하게 되므로 플로우차트를 읽기 어렵게 만든다.

5. 리턴라인은 아래 쪽에 배치하도록 하자

• 페이지 상단에서 아래로 이동하며 텍스트를 읽기 때문에 리턴 라인은 아래쪽에 위치하는 것이 좋다. 두 개의 리턴 라인이 필요한 경우 겹치지 않도록 유의한다.

출처: https://gongbu-ing.tistory.com/92

npm create-next-app .  / npm create-next-app —typescript .

✏️

 * name can no longer contain capital letters 

라는 에러가 뜨면 폴더명에 " 대문자 " 가 있어서 뜨는것. " 소문자 "로 변경.

NextJS 와 React

react = library , CSR(client-side-rendering) Nextjs = framework , SSR(server-side-rendering) ✏️ CSR : 클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식 SSR : 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식 ✏️

• React에서는 Router,render 등 환경적인 것들을 직접 코드 작성해서 실행시켜줘야 한다면, NextJS는 규칙에 맞춰 코드만 잘 작성하면 자동으로 코드를 불러옴
• React 처럼 자유로운 수정은 불가함
• 유저에게 보여주고 싶은것이 있으면 pages 폴더내에 파일 시작은

  📌 export default function 으로 한다.

• React는 오류페이지 (404 등)을 작성해야하지만 NextJS는 default 페이지가 존재함 - 수정 가능
• NextJS에서 npm run start 는 개발 환경을 실행 하는것이 아니라 " 실 서버 "를 실행하는것이다. 왜냐하면 NextJS는 서버까지 내장되어 있는 all-in-one 이기 때문이다.
• API를 구현해서 React와 결합하면 간단하게 서버기능과 프론트엔드 기능을 사용할수있는 어플리케이션을 구축할수 있다.

장점

• 앱에 있는 페이지들이 미리 렌더링 됨 - 정적으로 생성 React는 유저가 보는 모든 UI를 만들어야 한다. 브라우저가 js를 가져와서 그 js가 모든 UI를 만든다. html은 비어있는 < div > 하나뿐이다. (느린 연결에서 큰 단점이 생김- 빈 화면만 보인다 등 ) NextJs의 소스코드는 초기상태로(HTML) pre-rendering을 함 ( 느린연결에서도 HTML은 볼수있다. - API를 제외한 다른것들은 볼수있음)
  그후에 React.js가 클라이언트로 전송되었을때 react app이 실행 된다. React.js를 프론트엔드 안에서 실행하는 것을 hydration 이라 부른다.

• NextJS는 ReactJS를 백엔드에서 동작시켜서 이 페이지를 미리 만드는데(ssr) 이게 component를 미리 렌더를하고, 렌더링이끝나면 HTML이 되고, 그 HTML을 소스코드에 넣어준다. 그럼 유저는 로딩이 되지않았을때 미리 HTML을 볼수 있다. 그래서 SEO에 좋은것. (로딩이 되기전에 소스코드가 이미 있기 때문에) ✏️ 검색엔진최적화 (Search Engine Optimization) : 검색을 하면 검색엔진은 인덱싱해둔 수많은 웹 페이지 중 가장 적합한 순서대로 결과를 노출하는데 그중 자신의 웹 페이지가 더 많이 노출되도록 최적화된 컨텐츠를 만드는 것

RULES

⭐️ ( page 폴더내에 파일명이 url이 됨 (소문자로 작성) / 파일내에 component 이름은 중요하지 않음!) ⭐️

• 함수형 컴포넌트에서 jsx 를 리턴하는 default export 함수는 함수선언문으로 정의한다.(= export default function ) 그 외 함수들은 화살표 함수를 사용한다.
• nextjs에서는 anchor태그( < a > )를 사용하지않는다. → React의 Link와 같음.(새로고침방지) → next/link의 Link href를 사용 → clinet side rendering이 가능하지만 className, style 등을 넣어줄때는 < Link >< /Link> 안에 a태그에서 해줘야한다.

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Login, Main, Signup } from './Components/Pages'

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/login" element={<Login />} />.
        <Route path="/signup" element={<Signup />} />.
      </Routes>
    </BrowserRouter>
  )
}

export default Router

🎣 2. index.js

export { default as Login } from './Login'
export { default as Main } from './Main'
export { default as Signup } from './Signup'

🎣 2-1. App.js 에 Router ➡ import

import Router from './Router'

function App() {
  return <Router />
}

export default App

🎣 3. Login.jsx 생성

import styled from 'styled-components'
import { Link } from 'react-router-dom'
import {
  PageWrapper,
  Main,
  Box,
  Logo,
  BtnSubmit,
  Form,
  InputText,
  SignupWrapper,
  CustomLink,
} from '../atoms/login'
import { FaFacebook } from 'react-icons/fa'

const Login = () => {
  return (
    <PageWrapper>
      <Main>
        <Box>
          <Logo src="https://cdn.apple-economy.com/news/photo/201612/30523_15394_5059.png" />
          <Form>
            <InputText placeholder="전화번호, 사용자 이름 또는 이메일" />
            <InputText placeholder="비밀번호" type="password" />
            <BtnSubmit>로그인</BtnSubmit>
          </Form>
          <FBLogin>
            <FaFacebook></FaFacebook>Facebook으로 로그인
          </FBLogin>
          <ForgotPassword>비밀번호를 잊으셨나요?</ForgotPassword>
        </Box>
        <Box>
          <SignupWrapper>
            계정이 없으신가요? <CustomLink to="/Signup">가입하기</CustomLink>
          </SignupWrapper>
        </Box>
      </Main>
    </PageWrapper>
  )
}

const FBLogin = styled.div`
  color: #385185;
  font-weight: bold;
  font-size: 14px;
  margin-top: 30px;
`
const ForgotPassword = styled.div`
  font-size: 12px;
  margin-top: 20px;
`
export default Login

🎣 4. Signup.jsx 생성

import styled from 'styled-components'
import { Link } from 'react-router-dom'
import {
  PageWrapper,
  Main,
  Box,
  Logo,
  BtnSubmit,
  Form,
  InputText,
  SignupWrapper,
  CustomLink,
} from '../atoms/login'
import { FaFacebook } from 'react-icons/fa'

const Signup = () => {
  return (
    <PageWrapper>
      <Main>
        <Box>
          <Logo src="https://cdn.apple-economy.com/news/photo/201612/30523_15394_5059.png" />
          <Welcom>친구들의 사진과 동영상을 보려면 가입하세요.</Welcom>
          <BtnSubmit>
            <FaFacebook></FaFacebook>Facebook으로 로그인
          </BtnSubmit>
          <Form>
            <InputText placeholder="성명" />
            <InputText placeholder="사용자 이름" />
            <InputText placeholder="비밀번호" type="password" />
            <BtnSubmit>가입</BtnSubmit>
          </Form>
        </Box>
        <Box>
          <SignupWrapper>
            계정이 있으신가요? <CustomLink to="/Login">로그인</CustomLink>
          </SignupWrapper>
        </Box>
      </Main>
    </PageWrapper>
  )
}

const Welcom = styled.div`
  display: flex;
  flex-direction: column;
`

export default Signup

🎣 5. atoms 폴더 생성 후 Login.js 생성

import styled from 'styled-components'
import { Link } from 'react-router-dom'

export const PageWrapper = styled.div`
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
`
export const Main = styled.div`
  width: 350px;
`
export const Box = styled.div`
  background: #fff;
  border: 1px solid #dbdbdb;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 10px;
`
export const Logo = styled.img`
  width: 230px;
`
export const Form = styled.form`
  display: flex;
  flex-direction: column;
  padding: 0 40px;
  margin-top: 24px;
`
export const InputText = styled.input`
  height: 36px;
  background: #fafafa;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  padding-left: 8px;
  & + & {
    margin-top: 6px;
  }
`
export const BtnSubmit = styled.button`
  background: #0095f6;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 9px;
  font-weight: bold;
  margin: 8px 0;
`
export const SignupWrapper = styled.div`
  padding: 15px 0;
  font-size: 14px;
`
export const CustomLink = styled(Link)`
  text-decoration: none;
  font-weight: bold;
  color: #0095f6;
`

📌 Login.jsx 와 Signup.jsx 에서 중복되는 styled-components들을 하나로 묶은후 각 각 import 해주기

import {
  PageWrapper,
  Main,
  Box,
  Logo,
  BtnSubmit,
  Form,
  InputText,
  SignupWrapper,
  CustomLink,
} from '../atoms/login'

🎣 Pagination.jsx 생성

import styled from 'styled-components'

const Pagination = ({ nowPage, total, onPageChange }) => {
  const lastPage = Math.ceil(total / 10)
  const startPage = Math.ceil(nowPage / 10) * 10 - 9
  const endPage = startPage + 9 > lastPage ? lastPage : startPage + 9

  const pageList = []
  for (let i = startPage; i <= endPage; i++) {
    pageList.push(i)
  }
  return (
    <List>
      {nowPage > 1 && (
        <Page onClick={() => onPageChange(nowPage - 1)}>{'<'}</Page>
      )}
      {pageList.map((page) => (
        <Page
          isActive={page === nowPage}
          key={page}
          onClick={() => onPageChange(page)}
        >
          {page}
        </Page>
      ))}
      {nowPage < lastPage && (
        <Page onClick={() => onPageChange(nowPage + 1)}>{'>'}</Page>
      )}
    </List>
  )
}

const List = styled.div`
  display: flex;
  justify-content: center;
`
const Page = styled.button`
  background: ${({ isActive }) => isActive && '#000'};
  color: ${({ isActive }) => isActive && '#fff'};
`

export default Pagination

🎣 Movie.jsx

import { useEffect, useState } from 'react'
import styled from 'styled-components'
import { getMovieList } from '../../apis'
import MovieList from '../organisms/MovieList'
import { countryList, genreList } from '../../datas'
import Pagination from '../organisms/Pagination'

const Movie = () => {
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [text, setText] = useState('')
  const [country, setCountry] = useState('ALL')
  const [genre, setGenre] = useState('ALL')
  const [movieList, setMovieList] = useState([])

  useEffect(() => {
    searchMovieList()
  }, [country, genre, page])

  const handleSubmit = async (e) => {
    e.preventDefault()
    setPage(1)

    searchMovieList()
  }
  const searchMovieList = async () => {
    if (text === '') return
    // const params = { query: text, country }
    // if(country === "ALL") delete params.country;

    const start = page * 10 - 9

    const params = { query: text, start }
    if (country !== 'ALL') params.country = country
    if (genre !== 'ALL') params.genre = genre
    const { items, total } = await getMovieList(params)
    setMovieList(items)
    setTotal(total)
  }

  return (
    <Wrapper>
      <PageTitle>🎬 MOVIE 🎬</PageTitle>
      <Form onSubmit={handleSubmit}>
        <select onChange={(e) => setCountry(e.target.value)} value={country}>
          <option value="ALL">전체</option>
          {countryList.map(({ code, name }) => (
            <option value={code} key={code}>
              {name}
            </option>
          ))}
        </select>
        <select onChange={(e) => setGenre(e.target.value)} value={genre}>
          <option value="ALL">전체</option>
          {genreList.map(({ code, name }) => (
            <option value={code} key={code}>
              {name}
            </option>
          ))}
        </select>
        <InputText
          placeholder="search"
          onChange={(e) => setText(e.target.value)}
        />
        <BtnSubmit>검색</BtnSubmit>
      </Form>
      <MovieList data={movieList} />
      <Pagination
        nowPage={page}
        total={total}
        onPageChange={(page) => setPage(page)}
      />
    </Wrapper>
  )
}

const Wrapper = styled.div``
const PageTitle = styled.h2``
const Form = styled.form`
  display: flex;
  padding: 15px;
`
const InputText = styled.input`
  flex: 1;
  margin-right: 15px;
`
const BtnSubmit = styled.button``

export default Movie

🎣 Book.jsx

import { useEffect, useState } from 'react'
import styled from 'styled-components'
import { getBookList } from '../../apis'
import BookList from '../organisms/BookList'
import Pagination from '../organisms/Pagination'
import { useLocation, useNavigate } from 'react-router-dom'
import qs from 'qs'

const Book = () => {
  const navigate = useNavigate()
  const { search } = useLocation()

  const [text, setText] = useState('')
  const [query, setQuery] = useState('')
  const [bookList, setBookList] = useState([])
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)

  useEffect(() => {
    const reset = () => {
      setText('')
      setQuery('')
      setPage(1)
      setTotal(0)
      setBookList([])
    }
    const { query, page } = qs.parse(search.slice(1))
    if (query) {
      setQuery(query)
      setText(query)
      if (page) setPage(+page)
    } else {
      reset()
    }
  }, [search])

  useEffect(() => {
    searchList()
  }, [page, query])
  const handleSubmit = (e) => {
    e.preventDefault()
    setPage(1)
    setQuery(text)
  }
  const searchList = async () => {
    if (query === '') return
    const start = page * 10 - 9
    const { items, total } = await getBookList({ query, start })
    setBookList(items)
    setTotal(total)

    const search = qs.stringify({ query, page })
    navigate({ search })
  }

  return (
    <Wrapper>
      <PageTitle>📚 BOOK 📚</PageTitle>
      <Form onSubmit={handleSubmit}>
        <InputText
          placeholder="search"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <BtnSubmit>검색</BtnSubmit>
      </Form>
      <BookList data={bookList} />
      <Pagination
        nowPage={page}
        total={total}
        onPageChange={(page) => setPage(page)}
      />
    </Wrapper>
  )
}

const Wrapper = styled.div``
const PageTitle = styled.h2``
const Form = styled.form`
  display: flex;
  padding: 15px;
`
const InputText = styled.input`
  flex: 1;
  margin-right: 15px;
`
const BtnSubmit = styled.button``

export default Book

import { Link, useLocation } from 'react-router-dom'
import styled from 'styled-components'

const linkList = [
  {
    link: '/',
    name: 'Main',
  },
  {
    link: '/movie',
    name: 'Movie',
  },
  {
    link: '/book',
    name: 'Book',
  },
]

const TopNav = () => {
  const { pathname } = useLocation()

  if (pathname === '/') return <></>

  return (
    <Container>
      <Nav>
        {linkList.map(({ link, name }) => (
          <Link to={link} key={link}>
            <Button isActive={pathname === link}>{name}</Button>
          </Link>
        ))}
      </Nav>
    </Container>
  )
}

const Container = styled.header`
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
`
const Nav = styled.nav``
const Button = styled.button`
  padding: 10px 15px;
  background: ${({ isActive }) => (isActive ? '#000' : '#fff')};
  color: ${({ isActive }) => isActive && '#fff'};
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0 5px;
`

export default TopNav

🎣 2. Router.js 에 추가

const Router = () => {
  return (
    <BrowserRouter>
      <TopNav /> 📌
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/movie" element={<Movie />} />
        <Route path="/book" element={<Book />} />
        <Route path="/book/:isbn" element={<BookDetail />} />
      </Routes>
    </BrowserRouter>
  )
}

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Main from './components/pages/Main'
import Movie from './components/pages/Movie'
import Book from './components/pages/Book'

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/movie" element={<Movie />} />
        <Route path="/book" element={<Book />} />
      </Routes>
    </BrowserRouter>
  )
}

export default Router

🎣 2. Main.jsx

import { Link } from 'react-router-dom'
import styled from 'styled-components'

const Main = () => {
  return (
    <Wrapper>
      <PageTitle>영화 🎬 & 책 📚 검색</PageTitle>
      <Link to="/Movie">
        <Button>영화 🎬</Button>
      </Link>
      <Link to="/Book">
        <Button>책 📚</Button>
      </Link>
    </Wrapper>
  )
}

const Wrapper = styled.div`
  padding: 15px;
`
const PageTitle = styled.h2`
  text-align: center;
`
const Button = styled.button`
  width: 100%;
  margin: 10px 0;
  height: 100px;
  font-size: 24px;
  border: none;
  border-radius: 4px;
`

export default Main

🎣 3. Book.jsx

import { useState } from 'react'
import styled from 'styled-components'
import { getBookList } from '../../apis'
import BookList from '../organisms/BookList'

const Book = () => {
  const [text, setText] = useState('')
  const [bookList, setBookList] = useState([])

  const handleSubmit = async (e) => {
    e.preventDefault()

    const { items } = await getBookList({ query: text })
    setBookList(items)
  }

  return (
    <Wrapper>
      <PageTitle>📚 BOOK 📚</PageTitle>
      <Form onSubmit={handleSubmit}>
        <InputText
          placeholder="search"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <BtnSubmit>검색</BtnSubmit>
      </Form>
      <BookList data={bookList} />
    </Wrapper>
  )
}

const Wrapper = styled.div``
const PageTitle = styled.h2``
const Form = styled.form`
  display: flex;
  padding: 15px;
`
const InputText = styled.input`
  flex: 1;
  margin-right: 15px;
`
const BtnSubmit = styled.button``

export default Book

🎣 3-1. BookList.jsx

import styled from 'styled-components'

const BookList = ({ data }) => {
  return (
    <List>
      {data.map(({ image, title }) => (
        <Item key={image}>
          <Thumbnail src={image} />
          <Title dangerouslySetInnerHTML={{ __html: title }} />
        </Item>
      ))}
    </List>
  )
}

const List = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 15px;
`
const Item = styled.div``
const Thumbnail = styled.img`
  width: 100%;
`
const Title = styled.span``

export default BookList

🎣 3-2. src>apis>index.js 파일생성

import axios from 'axios'

export const getBookList = async (params) => {
  const { data } = await axios.get('/v1/search/book.json', {
    headers: {
      'X-Naver-Client-Id': 'ID',
      'X-Naver-Client-Secret': 'PW',
    },
    params,
  })

  return data
}

📌 서버를 만들수 없으니 package.json 에서 "proxy": "https://openapi.naver.com" 추가해주기

• proxy 는 개발과정에서만 사용가능. 배포 할때는 서버 필요함. (즉, 연습때만 사용할수 있음) 📌

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Main from './components/pages/Main'
import Movie from './components/pages/Movie'
import Book from './components/pages/Book'

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/movie" element={<Movie />} />
        <Route path="/book" element={<Book />} />
      </Routes>
    </BrowserRouter>
  )
}

export default Router

🎣 2. Main.jsx

import { Link } from 'react-router-dom'
import styled from 'styled-components'

const Main = () => {
  return (
    <Wrapper>
      <PageTitle>영화 🎬 & 책 📚 검색</PageTitle>
      <Link to="/Movie">
        <Button>영화 🎬</Button>
      </Link>
      <Link to="/Book">
        <Button>책 📚</Button>
      </Link>
    </Wrapper>
  )
}

const Wrapper = styled.div`
  padding: 15px;
`
const PageTitle = styled.h2`
  text-align: center;
`
const Button = styled.button`
  width: 100%;
  margin: 10px 0;
  height: 100px;
  font-size: 24px;
  border: none;
  border-radius: 4px;
`

export default Main

🎣 3. Movie.jsx

import { useState } from 'react'
import styled from 'styled-components'
import { getMovieList } from '../../apis'
import MovieList from '../organisms/MovieList'

const Movie = () => {
  const [text, setText] = useState('')
  const [movieList, setMovieList] = useState([])

 const handleSubmit = async (e) => {
    e.preventDefault()

    const { items } = await getMovieList({ query: text })
    setMovieList(items)
  }

  return (
    <Wrapper>
      <PageTitle>🎬 Movie 🎬</PageTitle>
      <Form onSubmit={handleSubmit}>
        <InputText
          placeholder="search"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <BtnSubmit>검색</BtnSubmit>
      </Form>
      <MovieList data={movieList} />
    </Wrapper>
  )
}

const Wrapper = styled.div``
const PageTitle = styled.h2``
const Form = styled.form`
  display: flex;
  padding: 15px;
`
const InputText = styled.input`
  flex: 1;
  margin-right: 15px;
`
const BtnSubmit = styled.button``

export default Movie

🎣 3-1. MovieList.jsx

import styled from 'styled-components'

const MovieList = ({ data }) => {
  return (
    <List>
      {data.map(({ image, title }) => (
        <Item key={image}>
          <Thumbnail src={image} />
          <Title dangerouslySetInnerHTML={{ __html: title }} />
        </Item>
      ))}
    </List>
  )
}

const List = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 15px;
`
const Item = styled.div``
const Thumbnail = styled.img`
  width: 100%;
`
const Title = styled.span``

export default MovieList

🎣 3-2. src>apis>index.js 파일생성

import axios from 'axios'

export const getMovieList = async (params) => {
  const { data } = await axios.get('/v1/search/movie.json', {
    headers: {
      'X-Naver-Client-Id': 'ID',
      'X-Naver-Client-Secret': 'PW',
    },
    params,
  })

  return data
}

📌 서버를 만들수 없으니 package.json 에서 "proxy": "https://openapi.naver.com" 추가해주기

• proxy 는 개발과정에서만 사용가능. 배포 할때는 서버 필요함. (즉, 연습때만 사용할수 있음) 📌

🔫 검색에 국가,장르 넣기 🔫

1. src>datas>index.js 파일 생성

export const countryList = [
  {
    code: 'KR',
    name: '한국',
  },
  {
    code: 'JP',
    name: '일본',
  },
  {
    code: 'US',
    name: '미국',
  },
  {
    code: 'HK',
    name: '홍콩',
  },
  {
    code: 'GB',
    name: '영국',
  },
  {
    code: 'FR',
    name: '프랑스',
  },
  {
    code: 'ETC',
    name: '기타',
  },
]

export const genreList = [
  {
    code: '1',
    name: '드라마',
  },
  {
    code: '2',
    name: '판타지',
  },
  {
    code: '3',
    name: '공포',
  },
  {
    code: '4',
    name: '로맨스',
  },
  {
    code: '5',
    name: '미스터리',
  },
  {
    code: '6',
    name: '느와르',
  },
  {
    code: '7',
    name: '애니메이션',
  },
]

2. Movie.jsx

import { useEffect, useState } from 'react'
import styled from 'styled-components'
import { getMovieList } from '../../apis'
import MovieList from '../organisms/MovieList'
📍import { countryList, genreList } from '../../datas'

const Movie = () => {
  const [text, setText] = useState('')
  📍const [country, setCountry] = useState('ALL')
  📍const [genre, setGenre] = useState('ALL')
  const [movieList, setMovieList] = useState([])

  📍useEffect(() => {
    searchMovieList()
  }, [country, genre])

  const handleSubmit = async (e) => {
    e.preventDefault()

    searchMovieList()
  }
  📍const searchMovieList = async () => {
    if (text === '') return
    // const params = { query: text, country }
    // if(country === "ALL") delete params.country;
    const params = { query: text }
    if (country !== 'ALL') params.country = country
    if (genre !== 'ALL') params.genre = genre
    const { items } = await getMovieList(params)
    setMovieList(items)
  }

  return (
    <Wrapper>
      <PageTitle>🎬 Movie 🎬</PageTitle>
      <Form onSubmit={handleSubmit}>
       📍 <select onChange={(e) => setCountry(e.target.value)} value={country}>
          <option value="ALL">전체</option>
          {countryList.map(({ code, name }) => (
            <option value={code} key={code}>
              {name}
            </option>
          ))}
        </select>
       📍 <select onChange={(e) => setGenre(e.target.value)} value={genre}>
          <option value="ALL">전체</option>
          {genreList.map(({ code, name }) => (
            <option value={code} key={code}>
              {name}
            </option>
          ))}
        </select>
        <InputText
          placeholder="search"
          onChange={(e) => setText(e.target.value)}
        />
        <BtnSubmit>검색</BtnSubmit>
      </Form>
      <MovieList data={movieList} />
    </Wrapper>
  )
}

export default Movie

⛳️ React Bootstrap - component

• Accoordion
• Dropdowns
• Carousel
• Modal

Modal 🔫

🎣 1. Modal Background CSS (기본적인)

import styled from 'styled-components'

const Modal = () => {
  return (
    <>
      <Backdrop />
      <Container>Modal</Container>
    </>
  )
}

const Backdrop = styled.div`
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
`
const Container = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  min-width: 300px;
  border-radius: 4px;
`

export default Modal

🎣 2. Bootstrap 컴포넌트 생성

import { useState } from 'react'
import Modal from './Modal'

const Bootstrap = () => {
  const [showModal, setShowModal] = useState(false)
  const onClose = () => {
    setShowModal(false)
  }
  return (
    <div>
      <button onClick={() => setShowModal(true)}>모달</button>
      {showModal && <Modal onClose={onClose} />}
    </div>
  )
}
export default Bootstrap

🎣 3. Modal 컴포넌트 생성

import styled from 'styled-components'

const Modal = ({ onClose }) => {
  return (
    <>
      <Backdrop onClick={onClose} />
      <Container>
        <Header>Modal heading</Header>
        <Body>Woohoo, you're reading this text in a modal!</Body>
        <Footer>
          <BtnClose onClick={onClose}>Close</BtnClose>
          <BtnSave>Save Changes</BtnSave>
        </Footer>
      </Container>
    </>
  )
}

const Backdrop = styled.div`
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
`
const Container = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  min-width: 300px;
  border-radius: 4px;
`

const Header = styled.div`
  font-size: 24px;
  padding: 15px;
  border-bottom: 1px solid #ddd;
`
const Body = styled.div`
  padding: 15px;
`
const Footer = styled.div`
  padding: 5px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: flex-end;
`
const Btn = styled.button`
  padding: 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  color: #fff;
  margin: 5px;
  font-size: 16px;
`

const BtnClose = styled(Btn)`
  background: gray;
`
const BtnSave = styled(Btn)`
  background: blue;
`
export default Modal

⛳️ React Bootstrap - component

• Accoordion
• Dropdowns
• Carousel
• Modal

Carousel 🔫

🎣 1. Crossfade

import { useState } from 'react'
import styled from 'styled-components'

const Carousel = ({ data }) => {
  const [activeIndex, setActiveIndex] = useState(0)
  const handleChange = (i) => {
    if (i === -1 && activeIndex === 0) {
      setActiveIndex(data.length - 1)
    } else if (i === 1 && activeIndex === data.length - 1) {
      setActiveIndex(0)
    } else {
      setActiveIndex((prev) => prev + i)
    }
  }

  return (
    <Wrapper>
      <List>
        {data.map((image, index) => (
          <Item src={image} active={activeIndex === index} key={index} />
        ))}
      </List>
      <BtnPrev onClick={() => handleChange(-1)}>이전</BtnPrev>
      <BtnNext onClick={() => handleChange(1)}>다음</BtnNext>
    </Wrapper>
  )
}

const Wrapper = styled.div`
  position: relative;
  width: 800px;
  height: 600px;
`
const List = styled.div``
const Item = styled.img`
📌  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 600px;
  opacity: ${({ active }) => !active && '0'};
  transition: opacity 1s; 📌
`
const Btn = styled.button`
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
`
const BtnPrev = styled(Btn)`
  left: 50px;
`
const BtnNext = styled(Btn)`
  right: 50px;
`

export default Carousel

🎣 1-1. Data 컴포넌트

export const CarouselData = [
  'https://i.pinimg.com/564x/55/52/27/555227cd235ab58f4c14b0743f6423c5.jpg',
  'https://i.pinimg.com/564x/ac/97/26/ac9726f62afd84ab6e319685bc103f07.jpg',
  'https://i.pinimg.com/564x/57/e0/30/57e030b4ceb9355554fa42e679c1555b.jpg',
  'https://i.pinimg.com/564x/78/84/74/788474bacd29ab0da76ac26969760b84.jpg',
]

🎣 2. Controlled

import { useState } from 'react'
import styled from 'styled-components'

const Carousel = ({ data }) => {
  const [activeIndex, setActiveIndex] = useState(0)
  const handleChange = (i) => {
    if (i === -1 && activeIndex === 0) {
      setActiveIndex(data.length - 1)
    } else if (i === 1 && activeIndex === data.length - 1) {
      setActiveIndex(0)
    } else {
      setActiveIndex((prev) => prev + i)
    }
  }

  return (
    <Wrapper>
      <List activeIndex={activeIndex}>
        {data.map((image, index) => (
          <Item src={image} active={activeIndex === index} key={index} />
        ))}
      </List>
      <BtnPrev onClick={() => handleChange(-1)}>이전</BtnPrev>
      <BtnNext onClick={() => handleChange(1)}>다음</BtnNext>

      <ButtonList>
        {data.map((image, index) => (
          <BtnIndex
            onClick={() => setActiveIndex(index)}
            active={activeIndex === index}
            key={index}
          >
            {index + 1}
          </BtnIndex>
        ))}
      </ButtonList>
    </Wrapper>
  )
}

const Wrapper = styled.div`
  position: relative;
  width: 800px;
  height: 600px;
 📌 overflow: hidden;
`
const List = styled.div`
  display: flex;
  transform: ${({ activeIndex }) => `translateX(${-800 * activeIndex}px)`};
  transition: transform 1s;
  width: 100%; 📌
`
const Item = styled.img`
  min-width: 800px;
  height: 600px;
`
const Btn = styled.button`
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
`
const BtnPrev = styled(Btn)`
  left: 50px;
`
const BtnNext = styled(Btn)`
  right: 50px;
`
const ButtonList = styled.div`
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
`
const BtnIndex = styled.button`
  background: ${({ active }) => active && 'pink'};
`

export default Carousel

⛳️ React Bootstrap - component

• Accoordion
• Dropdowns
• Carousel
• Modal

Dropdown 🔫

🎣 1. Bootstrap.jsx 컴포넌트 생성

import Dropdown from './Dropdown'

const Bootstrap = () => {
  return (
    <div>
      <Dropdown />
    </div>
  )
}
export default Bootstrap

🎣 2.Dropdown.jsx 컴포넌트 생성

import { useEffect, useState, useRef } from 'react'
import styled from 'styled-components'

const Dropdown = () => {
  const [showList, setShowList] = useState(false)
  const btnEl = useRef(null)

  useEffect(() => {
    const onClick = (e) => {
      if (btnEl.current !== e.target) setShowList(false)
    }
    document.body.addEventListener('click', onClick)
    return () => {
      document.body.removeEventListener('click', onClick)
    }
  }, [])

  return (
    <Wrapper>
      <Button ref={btnEl} onClick={() => setShowList(!showList)}>
        Dropdown
      </Button>
      {showList && (
        <List>
          <Item>Item #1</Item>
          <Item>Item #2</Item>
          <Item>Item #3</Item>
          <Item>Item #4</Item>
        </List>
      )}
    </Wrapper>
  )
}

const Wrapper = styled.div`
  position: relative;
`
const Button = styled.button``
const List = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px;
  position: absolute;
`
const Item = styled.li`
  padding: 5px 15px;
  & + & {
    border-top: 1px solid #ddd;
  }
  :hover {
    background: #efefef;
  }
`

export default Dropdown

⭐️ Drop down 을 열고 drop down 을 제외한 부분을 클릭했을때 (body라던가..) drop down이 닫히고,

닫힌다는 것은 drop down 내에 show List가 false가 되는것이고,

false가 되려면 전체 body에 Event Listener을 붙여서 body가 클릭될때마다 false를 만드는것.

하지만 Btn도 body라서 절대 true가 될수없다. 그래서 btn과 클릭한 target을 비교해서 btn을 누른상황이면 show List를 false로 만들지 않는것.

body에 remove Event Listener를 붙이지 않으면 console.log가 여러번 찍히게 되니 remove를 붙이는게 좋다. ⭐️

useEffect 2번째 인자에 빈 배열을 넣어주게 되면 컴포넌트가 처음 렌더링 될때만 실행된다.

하지만 !!!

📌 useEffect 오류로 2번 실행 될때 📌

src/index.js에서 <React.StrictMode> 태그로 이 감싸져있으면 개발모드에서 두 번씩 렌더링된다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'
import './index.css'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode> ⬅ 지우기
    <App />
  </React.StrictMode>, ⬅ 지우기
)

참고: https://velog.io/@hyes-y-tag/React-useEffect%EA%B0%80-%EB%91%90%EB%B2%88-%EC%8B%A4%ED%96%89%EB%90%9C%EB%8B%A4%EA%B3%A0

⛳️ React Bootstrap - component

• Accoordion
• Dropdowns
• Carousel
• Modal

✏️ Flex

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다.

“컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다.

const Container = styled.div`
  display: flex;
`

: https://studiomeal.com/archives/197

Accordion 🔫

🎣 1. Bootstrap.jsx 컴포넌트 생성

import Accordion from './Accordion'
import { accordionData } from '../../datas/bootstrap'

const Bootstrap = () => {
  return (
    <div>
      <Accordion data={accordionData} />
    </div>
  )
}
// 아코디언컴포넌트를 데이터만 갈아끼우면 안에 내용을 교체하면서 재활용가능
export default Bootstrap

🎣 2.Accordion.jsx 컴포넌트 생성

import { useState } from 'react'
import styled from 'styled-components'
import { ReactComponent as Arrow } from './arrow.svg'

const Accordion = ({ data }) => {
  const [activeIndex, setActiveIndex] = useState(0)
  const handleClick = (index) => {
    /* if (index === activeIndex) {
      setActiveIndex(-1)
    } else {
      setActiveIndex(index)
    } */
    const nextIndex = index === activeIndex ? -1 : index
    setActiveIndex(nextIndex)
  }
  return (
    <List>
      {data.map(({ title, content }, index) => (
        <Item active={activeIndex === index} key={index}>
          <Header onClick={() => handleClick(index)}>
            {title}
            <BtnArrow>
              <Arrow />
            </BtnArrow>
          </Header>
          <Body>{content}</Body>
        </Item>
      ))}
    </List>
  )
}

const List = styled.ul`
  list-style: none;
  padding: 0;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
`
const Body = styled.div`
  padding: 15px;
  border-top: 1px solid #ddd;
  display: none;
`
const BtnArrow = styled.button`
  transition: transform 0.5s;
  cursor: pointer;
  background-color: transparent;
  width: 20px;
  height: 20px;
  border: none;
  margin-left: 10px;
  svg {
    transform: rotate(90deg);
  }
`
const Item = styled.li`
  & + & {
    border-top: 1px solid #ddd;
  }

  ${Body} {
    display: ${({ active }) => active && 'block'};
  }
  ${BtnArrow} {
    transform: ${({ active }) => active && 'rotate(-180deg)'};
  }
`
const Header = styled.div`
  padding: 10px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
`

export default Accordion

🎣 3.Data.jsx 컴포넌트 생성

export const accordionData = [
  {
    title: 'Accordion Item #1',
    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad`,
  },
  {
    title: 'Accordion Item #2',
    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad`,
  },
  {
    title: 'Accordion Item #3',
    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad`,
  },
]