의도 

- import 연습 및 새로고침 할때마다 버튼의 색을 바꾸게 하기 

 

구조 

 

App.jsx 


import Color from './main/color.jsx';

function App() {
  return (
    <>
      <Color />
    </>
  );
}

export default App;
default.jsx 

export function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for(let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

 

App.css

.button1 {
  color: black;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button1:hover {
  background-color: orangered;
}
color.jsx

import '../assets/css/App.css';
import { getRandomColor } from '../common/default.jsx';


export default function Color() {
  return (
    <div>
        <p>내용을 확인하셨으면 아래버튼을 눌러주세요.</p>
       <button 
            className='button1' 
            style={{ backgroundColor: getRandomColor() }}
        >
            확인
        </button>
    </div>
  );
}

'책 리뷰 > 리액트 책 실습' 카테고리의 다른 글

import 연습  (0) 2026.03.24
구조잡기  (0) 2026.03.24
리액트 설치 후 문제 발생  (0) 2026.03.23
리액트 설치  (0) 2026.03.23

- 구조상 가장 바깥에 있는 App.jsx 에선 import 하는 용도로만 쓰고 

실제 파일은 main 폴더 안에 있는 것들을 사용한다. 

 

- 각종 변수들은 coomon/default.js 에 지정하고 사용한다. 

 

App.jsx 

import Test from './main/test.jsx';
import Book from './main/book.jsx'; 

function App() {
  return (
    <>
      <Test />
      <Book />
    </>
  );
}

export default App;

 

common.jsx

/* 변수명 */
export const bookName = '좋은책'; 
export const bookPage = Math.floor(Math.random() * 10) + 1;
export const user = { 
    firstName: 'KIM',
    lastName: 'Hyejin'
  };


/* 기능 */
export function formatName(user) { 
    return user.firstName + '' + user.lastName; 
}

 

test.jsx

import { formatName } from '../common/default.jsx';
import { user } from "../common/default"

export default function Test() {
  return (
    <h1>Hello, {formatName(user)}</h1>
  );
}

 

book.jsx

import { bookName, bookPage } from "../common/default"

export default function book(props) { 
    return ( 
        <div>
            <div>{`이 책의 이름은 `+bookName+` 입니다.`}</div>
            <div>{`현재 읽고 있는 페이지는 `+bookPage+`쪽 입니다.`}</div>
        </div>
    )
}

 

'책 리뷰 > 리액트 책 실습' 카테고리의 다른 글

새로고침 할때마다 색이 바뀌는 버튼  (0) 2026.03.24
구조잡기  (0) 2026.03.24
리액트 설치 후 문제 발생  (0) 2026.03.23
리액트 설치  (0) 2026.03.23

1. src 

    ㄴ assets 

        ㄴ css 

             - 각종 css 파일들을 담아두는 용도 

         ㄴ img 

             - 이미지 파일들을 담아두는 용도 

    ㄴ common 

        - 공통으로 쓸 js 파일들 모음 

    ㄴ main 

        - 실습용 파일

     App.jsx 

        - main 내용들을 export 해서 사용 

    


'책 리뷰 > 리액트 책 실습' 카테고리의 다른 글

새로고침 할때마다 색이 바뀌는 버튼  (0) 2026.03.24
import 연습  (0) 2026.03.24
리액트 설치 후 문제 발생  (0) 2026.03.23
리액트 설치  (0) 2026.03.23
번호 문제상황
1 리액트 설치 후, npm start를 진행함 

npm start를 하려고 하였으나 next 쪽에서 이상한게 걸린 모양 

 

npm run dev로 개발서버로 열어서 해결완료 

 

 

또잉 갑자기 next 가 띄워짐. 나는 리액트를 띄우고 싶었는데, 

라고 생각해서 다시 공식문서 따라해서 설치 

 

'책 리뷰 > 리액트 책 실습' 카테고리의 다른 글

새로고침 할때마다 색이 바뀌는 버튼  (0) 2026.03.24
import 연습  (0) 2026.03.24
구조잡기  (0) 2026.03.24
리액트 설치  (0) 2026.03.23

1. node js 설치 

https://nodejs.org/ko/download

 

Node.js — Node.js® 다운로드

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

경험상 msi 로 다운받는게 편하긴함 

커멘드 연습 해볼사람이라면 커멘드로 하는 것도 추천 

 

2. -v 명령어 써서 잘 설치되었는지 확인

3. npx 설치  

 

4. react 설치 

https://ko.react.dev/learn/creating-a-react-app

 

새로운 React 앱 만들기 – React

The library for web and native user interfaces

ko.react.dev

 

'책 리뷰 > 리액트 책 실습' 카테고리의 다른 글

새로고침 할때마다 색이 바뀌는 버튼  (0) 2026.03.24
import 연습  (0) 2026.03.24
구조잡기  (0) 2026.03.24
리액트 설치 후 문제 발생  (0) 2026.03.23

1. node js 설치 

https://nodejs.org/en

 

Node.js — Run JavaScript Everywhere

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

2. 설치 후 nodejs npm 버전 확인 

node -v 

npm -v 

 

3. 이후 yarn 설치 

yarn init v 

 

4. 권한 수정 

 

5. 미리 만들어놓은 개발폴더에 nextjs 설치 

회사에서 S3로 원격으로 다중파일업로드를 시도하게 되었다. 

내부 리소스를 사용하게 되면 부하가 걸릴 것 같아 PUTTY 로 실행했다. 

 

MobaXterm 으로 처음에 실행하려고 했지만, 폴더 리스트가 잘 뜨지 않아서 putty 로 실행하게 되었다. 

간단한 파일 업로드는 MobaXterm이 더 좋은 것 같다. 

실습용 으로 추천 

 

https://mobaxterm.mobatek.net/

 

MobaXterm free Xserver and tabbed SSH client for Windows

The ultimate toolbox for remote computing - includes X server, enhanced SSH client and much more!

mobaxterm.mobatek.net

 

putty 다운로드 사이트도 덤으로 

https://www.putty.org/

 

Download PuTTY - a free SSH and telnet client for Windows

Is Bitvise affiliated with PuTTY? Bitvise is not affiliated with PuTTY. We develop our SSH Server for Windows, which is compatible with PuTTY. Many PuTTY users are therefore our users as well. From time to time, they need to find the PuTTY download link. W

www.putty.org

 

===

 

아래로는 putty 와 aws 설정이 완료되었다는 가정하에 진행한다. 

연결방법은 아래 링크를 참고 

 

https://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/putty.html

 

PuTTY를 사용하여 Windows에서 Linux 인스턴스에 연결 - Amazon Elastic Compute Cloud

프라이빗 키의 암호는 추가 보호 계층입니다. 프라이빗 키가 노출되더라도 암호 없이 사용할 수 없습니다. 암호문 사용의 단점은 인스턴스에 로그온하거나 인스턴스에 파일을 복사하기 위해 사

docs.aws.amazon.com

https://mozi.tistory.com/191

 

[AWS] EC2 인스턴스 Putty 로 접속하기

리눅스 환경이라면, ssh -i 옵션을 줘서 간단하게 접속할 수 있습니다.윈도우 환경에서는 그럴수 없으므로 Putty 를 사용하여 EC2 인스턴스에 접속합니다. 접속하는 방법을 알아보겠습니다. 접속 방

mozi.tistory.com

 

1. AWS 에 연결이 되었다면 아래 명령어를 실행한다, 

- aws s3 ls ( 대소문자는 마음대로 )  

AWS 에 있는 나의 S3 리스트를 확인하기 위해 목록부터 조회한다. 

AWS 권한 설정이 필요하단 뜻

2. S3를 PUTTY 로 접속한 것이 처음이라면 뜨는 당연한 표시이다. 

권한 설정을 해달라는 건데, 야래 내용을 입력하면 .aws 폴더에 cretentails 인가 인증관련한 파일이 생성된다. 

 

aws configure AWS Access Key ID [None] : 자신의 Accecss Key

AWS Secret Access Key [None] : 자신의 Secret Key

Default region name [None] : 자신의 region

Default output format [None] : json (text도 가능)

 

3. 그리고 다시 1번을 반복 ( aws s3 list ) 를 실행하면 리스트가 보이게 된다. 

 

4. 이후, sync 명령어로 파일 업로드 실행

실제로 사내 erp 시스템 개발중에 사용한 건데, 

보안상으로 DB관련된 내용들만 빼고 적어보려고 합니다. 

 

페이징을 2페이지(all.php/each.php) 에 해야했기 때문에 중복된 내용이 많았습니다. 

그래서 컨트롤러 -> 라이브러리 -> 컨트롤러 -> 뷰 형태로 했습니다. 

 

컨트롤러에 적게 되면 줄이 너무 길어서, 차라리 공통된 내용들은 라이브러리에 묶었습니다. 

 

컨트롤러 

public function all() {
  // $page 변수
  if(!$_GET) {
  	$getpage = '1'; // 현재 페이지 (값이 없으면)
  } else {
  	$getpage = $_GET['page']; // 주소창에 GET으로 받은게 있으면
  }

  // 배열 정리
  $type = array();

  $row = '15'; // 한 페이지에 나오게 할 갯수
  $block = '5'; // 페이지당 블록

  // 테스트 아이디 전체조회
  $total =  $this->DB이름->DB스키마('DB', 'DB', 'DB');

  // 페이징 라이브러리 호출
  $pageing = $this->paging->procee($row, $block, $getpage, $total);

  // 테스트
  $nomal = $this->DB이름->DB스키마('DB', 'DB', 'DB', $pageing['0']['pageSet'], $pageing['0']['limitIdx']);


  // 유형 확인
  $this->load->view('sidemenu');
  $this->load->view('/페이지폴더/all', ['nomal' => $nomal, 'pageing' => $pageing] );
}

 라이브러리 

<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class paging {
    function procee($row, $block, $getpage, $TotaltestId) {

  $countTestId = count($TotaltestId); // 총 갯수 확인

  if(!$_GET) {
  	$page = '1'; // 현재 페이지 (값이 없으면)
  } else {
  	$page = $getpage; // 주소창에 GET으로 받은게 있으면
  }

  $pageSet = $row; // 한 페이지에 보여지는 줄 수
  $rowBlock = $block; // 상단 보이는 페이지 갯수 (1번에 5개씩 보이게)

  $totalPage = ceil($countTestId/$pageSet); // 보일 총 페이지 (상단 표시)
  $totalBlock = ceil($totalPage/$rowBlock); // 보일 블럭 갯수
  $nowBlock = ceil($page/$rowBlock); // 현재 블럭

  $startPage = ($nowBlock*$rowBlock)-3; // 시작 페이지

  // 마지막 페이지 세기
  if($startPage<=1) {
  	$startPage = '1';
  }

  // 마지막 페이지
  $lastPage = min($totalPage,$nowBlock*$rowBlock);


  // 마지막 페이지와 총 페이지 번호가 동일 할 시
  if($totalPage<=$lastPage) {
  	$lastPage = $totalPage;
  }

  $limitIdx = ($page - 1)*$pageSet; // 처음에 시작하는 페이지 갯수

  $prevPage = $page - 1; // 이전페이지
  $nextPage = $page + 1; // 다음페이지

  $prevBlock = $rowBlock - 1; // 이전 페이지
  $nextBlock = $rowBlock + 1; // 현재 페이지

  if($nextPage>=$totalPage) {
  	$nextPage = $totalPage;
  }

  $pageing = array();

  array_push($pageing, array(
    'page' => $page,
    'startPage' => $startPage,
    'lastPage' => $lastPage,
    'nextPage' => $nextPage,
    'prevPage' => $prevPage,
    'pageSet' => $pageSet,
    'limitIdx' => $limitIdx,
    'totalPage' => $totalPage
  ));

  return $pageing;
  }
}
?>

뷰 (페이징 부분만) 

    <!--페이징 목록 나오는 부분-->
    <? if($pageing['0']['prevPage'] > 0) : ?>
        <!--페이징 목록 나오는 부분(이전 / 현재 페이지 / 다음 페이지)-->
        <a href="./페이지이름?page=<?=$pageing['0']['prevPage']?>" class="클래스이름">[이전]</a>
    <? else : ?>
        [이전]
    <? endif; ?>

    <a href="./페이지이름?page=1" class="클래스이름">1</a> ...
    <? for ($i=-2; $i<3; $i++) :
        if(!$_GET) :

        elseif ($pageing['0']['page'] + $i == $_GET['page'] || !isset($_GET)) : ?>
            <!--선택한 페이지 번호 = 현재 페이지 번호이면 글씨 초록색 및 bold 처리-->
            <a href="./all?page=<?=$pageing['0']['page'] + $i;?>" class="클래스이름"><?=$pageing['0']['page'] + $i;?></a>
        <? else : ?>
            <!--선택한 페이지 번호 != 현재 페이지 번호-->
            <? if($pageing['0']['page'] + $i <= '0' || $pageing['0']['page'] + $i > $pageing['0']['totalPage']) : ?>
            <? else : ?>
                <a  href="./all?page=<?=$pageing['0']['page'] + $i;?>" class="클래스이름"><?=$pageing['0']['page'] + $i;?></a>
            <? endif; ?>
        <? endif;
    endfor;?>
    ... <a href="./all?page=<?=$pageing['0']['totalPage']?>" class="클래스이름"><?=$pageing['0']['totalPage']?></a>

    <!--다음페이지-->
    <? if($pageing['0']['nextPage'] != $pageing['0']['page']) : ?>
        <!--페이징 목록 나오는 부분(다음페이지)-->
        <a href="./all?page=<?=$pageing['0']['nextPage']?>" class="클래스이름">[다음]</a>
    <? else : ?>
        [다음]
    <? endif; ?>

모델 

public function DB이름($dbname, $need, $order, $limit1, $limit2) {
  $this->db->select('*');
  $this->db->from($dbname); 
  $this->db->order_by($need, $order);
  $this->db->limit($limit1, $limit2);

  $query = $this->db->get()->result_array();

  return $query;
}

 

이렇게 작업해서 생겨난 것이 

 

페이징 번호, 페이징 내용까지 정리 

전 제 컴퓨터로 확인했을 때 15줄로 해야 위아래 여백이 조금 생겨서 컨트롤러에서 $row=15 로 조절했습니다. 

혹시나 더 많이 보였으면 하는 분들은 컨트롤러에서 $row = 20 이런식으로 바꾸시면 줄수가 바뀌게 됩니다. 

+ Recent posts