한 우물 로또왕 - UI , Component 계획, Create React App으로 개발 환경 구성하기

 

한 우물 로또왕은 2021년 개발 동아리 프로젝트로 시작 된 기획이다.

당시에는 바닐라 자바스크립트로만 프로젝트를 구현 했었는데

이번엔 리액트로 구현 해 보려고 한다.

 

자바스크립트 프로젝트에서는 로또게임 결과를 조회하기만 했었는데

이번엔 회원가입 기능, 랭킹 확인 기능을 추가하기로 했다 .

 

어느정도 앞단만 구현을 하다가 시간이 지나고 보니 이때까지 구현했던 코드들에 부족한 점이 많이 보여서

블로그 글로 정리 하면서 처음부터 다시 구현 해 볼까 한다. 

 

Pages , Components 기획

• Pages
  • Home 메인 페이지
  • Login 로그인 페이지
  • Join 회원가입 페이지
  • Rank 랭킹 확인 페이지 
• Components
  • MyHeader
  • MyButton (props - txt , onClick, blockFlag)
  • LotteryBall (props- number, color)

 

아래는 이때까지 구현 한 화면들이다. 구성은 그대로 가져가면서 세부적인걸 좀 정리하려고 한다.

Home 

 

홈 화면이다. 

요소 하나하나를 다 컴포넌트로 만드려고 했던게 문제인 것 같다 .. 다른 페이지들에서도 사용 하거나 반복적으로 사용 될 예정인Header, Button, LotteryBall 을 MyHeader, MyButton, LotteryBall 컴포넌트로 만들어주려고 한다. 

 

 

수동 추첨을 선택하면 팝업이 나타나면서 45개 숫자 중 중복없이 6개를 선택 할 수 있다. 

 

 

6개를 선택하면 완료 버튼이 활성화 된다. 

 

완료하면 내가 선택 한 숫자들이 LotteryBall 로 생성 된다. 

자동추첨하면 마찬가지로 1~45 사이의 숫자들이 자동 생성되어 LotteryBall 로 보여진다. 

 

Login

 

 

 

Join

 

Login 이랑 Join 이 비슷하게 생겨서 입력을 받는 부분도 Component로 만들어주면 좋을 것 같다. 

 

Ranking

 

랭킹은 아직 .. 그저 그래프만 나오는 중 ..

그래프 row를 선택하면 팝업이 뜨고 해당 회차에 관한 상세 정보를 나오게 해 주려고 한다. 

 

 

Create React App 사용했을 때 일어나는 일 

react 어플리케이션을 생성 할 때 babel, webpack 같은 build tools을 셋업 하는것이 필요하다.

react 의 JSX syntax는 브라우저가 이해할 수 없는 언어이기 때문이다.

 

브라우저에서 React Application 을 실행하기 위해 JSX를 브라우저가 알아들을 수 있는

Javascript로 변환하는 과정이 필요하다.

 

즉 CRA 는 싱글페이지 리액트 어플리케이션을 만드는 도구이다

 

package.json 파일에서 babel , webpack 을 볼 수 없더라도 CRA는 Babel 과 Webpack 을 사용하고 있다.

단지 그 설정이 react scripts 패키지 안에 숨겨져 있을 뿐이다. 

 

Babel 이란 ?

Babel 의 주요 목적은 브라우저가 코드를 읽을 수 있게 하는 것 이다.

크롬이나 사파리 같은 브라우저는 새로운 JS 버전을 지원하지만 JSX는 리액트에만 존재하는 특징이기 때문에 ES 버전의 특징이 아니다. 

Babel 은 모던 자바스크립트 코드를 older version 으로 바꾼다. 

 

Webpack 이란?

웹팩은 어플리케이션에 필요한 모든 것을 담은 모듈 번들러이다. 

이 라이브러리는 Babel, Jest, ESLint, 그리고 POstCSS 를 코드 위에서 실행 시킬 수 있다.

 

 

참고 :

https://www.freecodecamp.org/news/create-react-app-npm-scripts-explained/

The React Scripts Start Command – Create-React-App NPM scripts explained

 

npx create-react-app 프로젝트이름

 

하면 쉽게 리엑트 실행 환경을 만들 수 있다. 

 

npm 은 Node Package Manager 인데

npx 는 Node Package eXecute 이다. 

 

npm 은 node의 기본 패키지 메니저다.

npx는 npm 5.2.0 버전 이상을 설치했다면 같이 설치되어진다. 이건 npm package runner로 이건 노드 레지스트리에 있다면 어떤 패키지 이든지 설치 없이 실행 할 수 있게 해 준다. npx가 설치 되어있는지 아닌지는 

 

npx -v

로 확인 할 수 있다. 

 

npm install -g npx

 

npx 가 설치 되어있지 않다면 이 명령어로 설치 할 수 있다. 

 

정리 해 보면 .. 

npm 은 패키지를 install 하기 위한 도구이고

npx 는 패키지를 실행하기 위한 도구라고 할 수 있겠다. 

npx를 사용하면 npx <command> 를 호출하면 npm 레지스트리에서 해당 이름을 찾고 자동으로 설치하고 호출 한다.호출이 끝나면 패키지는 fallback 되어 사라진다고 한다. 

 

참고 https://www.geeksforgeeks.org/what-are-the-differences-between-npm-and-npx/

What are the differences between npm and npx ? - GeeksforGeeks

https://studium-anywhere.tistory.com/21

npx란 무엇일까?

 

 

10월 안에 완성하는 것을 목표로 하자!!