지난 이야기… 💤

---

**항해 9기 2주차의 마무리인 알고리즘 테스트를 마치고 주특기 주차에 들어서게 되었다. 
본격적으로 react를 배우게 되어 솔직히 말해, 많이 들떠있는 상태이다. 
흥미가 마구마구 샘솟는 김에 늦게나마, TIL를 써보려고 한다~**

1. React 시작하기

---

React 실행 필요 요건 및 순서

1. Node.js 설치 & yarn 설치

   처음에 Node 공식 홈페이지에서 Node.js를 버젼을 설치한다. 이전에 자바스크립트 코드를 Node 플랫폼에서 사용했기에 아마 설치가 되어있을 것이다.

   • 만약 Node가 깔린지 아닌지 궁금하다면? terminal 혹은 powershell 에서 node -v 를 쳐본다. node -v 로 node 버전을 확인한다.
     

   이로 인해 NPM (Node Package Manager)가 사용이 가능해진다. 이 npm 을 통하여 여러 패키지를 다운받아 활용할 수 있다. 그런데 이 npm 말고 다른 package manager 도 설치를 해야한다. 그것은 바로 yarn!

   설치 방법은 npm install -g yarn

   • 만약 Yarn이 깔린지 아닌지 궁금하다면? terminal 혹은 powershell 에서 yarn -v 를 쳐본다. yarn -v 로 yarn 버전을 확인한다.
     

   이 yarn 을 통해 npm 으로 설치가 힘든 패키지들을 더 수월하게 이용할 수 있다.

   yarn add [패키지 이름] 으로 설치할 수 있다.

2. CRA (Create React-App)

React 프로젝트를 만드려면, 프로젝당

프로젝트 생성이 완료되었다고 하면, cd [프로젝트 명] 으로 해당 프로젝트에 들어가게 되면 dev server 및 build 가 가능해진다.

npm start 로 배포 전의 개발 서버로 프로젝트를 미리 보는게 가능해진다.

---

2. Vite

vite란?

react에 대해 사전조사를 하던 가운데 ‘vite’ 라는 프론트엔드 툴을 알게 되었다.
Vue 창시자인 에반 유가 만들었으며, Vue, React, Svelte의 빌드 도구 역할을 하고 있다고 한다.

vite는 자바스크립트 네이티브 모듈을 기반으로 한 데브 서버로 webpack을 대체하여 번들링 시스템을 구축할 수 있다.

Bundling (번들링)

requir.js 와 같은 모듈 로더를 사용하지 않으면 모듈화가 불가능했던 ESM 시절 이전.. 그러나 ESM 부터 자바스크립트 언어에 모듈화 문법 (import, export)이 들어오게 된다.
위의 문법을 이요하여 여러 개의 파일을 하나로 합쳐주거나 의미 있는 단위로 묶어주는 행위가 가능하게 되었는데 그것을 번들링이라고 한다

그래서 webpack,rollup, parcel 등과 같은 모듈 번듈러는 위 같은 번들링 작업을 도와주는 툴인데 대부분 webpack이 그 생태계를 차지하고 있다.

vite 특징

• webpack dev server 대비 20~30 배 빠르기의 실행 시간을 가지고 있다.
  webpack 서버는 처음 local 서버를 킬 때, 관련 모듈들을 번들링하여 메모리에 적재하는 시간이 다소 필요하다. => vite는 번들링하지 않고 바로 서버를 실행하기에 명령어를 실행함과 동시에 서버가 바로 구동

• build를 위한 제공 build 옵션들이 많다.
  vite build production은 기본적으로 번들링 하지 않고 로컬 개발 서버의 ESM방식을 사용하고 있다. => 서비스 규모가 너무 커지면 번들링 하는 것이 더 이득일 수도 있다 => Rollup 사용

아래는 번들링을 함께 사용할 수 있도록 설정하는 코드 부분이다.

// vite.config.js
module.exports = defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    }
  }
})
 

---

3. Learn from 항해 99 S.A 과제

처음으로 만들어보는 React 프로젝트…✨다

주특기 주차 시작하자마자 하루안에 LoginForm 을 만들라는 과제를 받게 되었다. 
그런데 그 과정안에 React 를 설치하라는 말이 있어, ‘Ar.. 리액트 배우지도 않았는데, 
이걸로 만들어야되는구나 오늘 안에…!’ 라고 생각해서, 구글링 끝에 어찌저찌 만들긴 했는데, 
~~알고보니 알고리즘 하느라 html 까먹었을까봐 html 로 하라는 거였다..😂~~

흠흠.. 일단 서두는 이렇고, 다른 인원들에 비해 뻘짓을 했긴했지만, 나름대로 얻은 점이 많아서 좋다.

HTML5의 숨겨진 태그 요소 - 폼 검증

숨겨진..이라고 하는 것 보단 사실 내가 공부를 덜 한 것이었다.

submit 에서 input 태그가 하나라도 안되어 있으면 알림 표시

submit 에서 input 태그가 하나라도 안되어 있으면 알림 표시를 하는 것이 목적이라 처음엔 function을 생성하여 dom을 이용해 value 값이 “ “ 일때, 에러를 출력하려고 했다.

그런데 답은 가까운 곳에 있었다. 바로 required

const App = () => {
  return (
    <form
      action="https://ko.reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute"
      className="submitform">
      <p>First Name :</p>
      <input
        type="text"
        name="First Name"
        className="input bg-white input-bordered input-accent w-full max-w-xs"
        required
      />

위는 코드의 일부이다. <input type="submit"> 은 form 태그 내에서 받은 값을 넘겨주는 역할을 하는데 이때, html5에서 지원하는 input 태그 내의 required라는 속성을 이용하면 검증이 가능해진다.

원래 대부분의 Browser는 입력받은 값을 확인 가능하게 개발자들이 사용할 수 있는 API를 제공한다고 한다.

html5의 경우 반드시 입력해야되는 입력요소에 required 속성을 부여해 검증 로직을 실행 가능케 한다. 그리고 입력받지 않은 input 값이 나오게 되면 submit이 실패하게 되는 구조를 보여준다.

이러한 required 처럼 html5의 입력 요소는 총 7가지의 검증 속성 (validation attributes)을 제공한다.

• required : 필수
• minlength / maxlength : 최소 / 최대 길이
• type : 타입 (ex. email)
• min / max : 최소 / 최대 정수
• pattern : 패턴(RegExp)

더 세밀한 내용은 추후에 기회가 되면 더 정리하도록 하겠지만, 아마 프레임워크, 라이브러리 등을 많이 이용을 할 예정이라 위의 기능들을 쓸 상황이 많지 않을 것 같다.

그래도 원리를 알아두면 뭐든 좋으니 숙지하려고 서술했다.

reference
HTML5 폼 검증에 대해 정리해 보자
https://joshua1988.github.io/vue-camp/vite/intro.html#%E1%84%87%E1%85%A5%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%BC