오식랜드

router 란?주소에 따른 컴포넌트 렌더링을 관리하기 위한 라이브러리이다. 쉽게 말하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라 할 수 있다.셋팅보통은 ‘react-router-dom’을 사용하는 듯 한데, 지금 내 프로젝트는 vite + react라서 vite의 라우터 플러그인인 ‘ vite-plugin-next-react-router’를 사용하고자 한다공식 문서 : https://www.npmjs.com/package/vite-plugin-next-react-router설치npm install vite-plugin-next-react-router 설정 :  vite.config.ts처음에는 reactRouterPlugin() 하나로 끝내고 싶었지만 에러가 발생해서..

Component란?컴포넌트란, 재사용이 가능한 각각의 독립된 모듈이다. (재사용 가능한 UI 조각) 예를 들면 모든 페이지에 중복되는 상단 메뉴나 푸터, 동일한 디자인의 입력칸이나 버튼 등이 있다.하나의 컴포넌트를 만들어놓으면 같은 코드를 중복해서 여러번 작성할 필요가 없다. 또한 동일한 컴포넌트를 사용하여 일관적인 UI를 제공할 수 있다.동일한 컴포넌트를 어떻게 활용하느냐? props 값을 이용해 제어하면 된다 ~ 만들어보기구조1. 선언 : 화살표 함수를 변수 혹은 상수에 담아 선언한다.const ComponentName = () => {}; 2. 반환 : return값 안에 마크업을 작성한다. 이때 최상단은 태그 하나로 감싸져야한다.// 옳은 예const ComponentName = () => { ..

props란?props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 말한다.이 데이터는 자식 컴포넌트에서 변경할 수 없다. (읽기 전용)state란?컴포넌트 내부에서 관리되는 데이터로, 변경이 가능하다 사용법JSParent.js 부모 → 자식 : props 전달import Child from './Child'; const Parent = () => { return ; };Child.js 자식 : 전달받은 props 사용함수형 컴포넌트const MyComponent = (props) => { return {props.message};};구조 분해 할당const MyComponent = ({ message }) => { return {message};};기본값 설정하기const MyCompone..

지원하는 템플릿vanillavuereactpreactlitsvelte프로젝트 생성# npmnpm create vite@latest# yarnyarn create vite명령어 입력 후엔 프로젝트의 이름과 사용할 템플릿, js or ts 등을 선택할 수 있다.빌드cd 프로젝트 명npm installnpm run dev

Vite프랑스어로 “빠르다”라는 뜻의 단어 veet로 읽는다Vite를 사용하는 이유이름처럼 빌드와 서버 구동이 빠르다. 기존의 webpack, rollup 등의 빌드 도구는 javascript로 만들어져있고, 번들러 기반으로 되어있어 서비스가 커지면 커질수록 소스 코드 갱신 시간이 선형적으로 증가하게 된다. 일부 번들러는 메모리에서 작업을 수행하여 갱신이 필요한 파일만 새롭게 번들링 하도록 했지만, 결국 처음에는 “모든 파일”에 대한 번들링이 필요했다.vite가 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 사용한다. 빌드 시 번들러가 아닌 ESM을 이용하여 어떤 모듈이 수정되면 vite는 그 수정된 모듈과 관련된 부분만 교체한다. 따라서 서비스가 아무리 커져도 소스 코드 갱신 시간에..

1. html을 담은 retun 안에는 하나의 태그로 묶여야 한다. return( ~~~ ) 보통 태그를 감쌀 땐 div를 쓴다. 그런데 두개를 나란히 두고 싶다면? 하나의 의미 없는 div안에 두개를 넣으면 되는데, 의미 없는 div 대신 빈 태그로 감쌀 수 있다. return( ) 2. 컴포넌트를 생성하는 문법 function Modal(){ return( 제목 날짜 상세내용 ) } 기본적으로 알고있는 함수 문법이다. 그런데 이 방법 말고, 변수를 선언하고 그 안에 화살표함수를 담아 사용하기도 가능하다 const Modal = () => { return( 제목 날짜 상세내용 ) } const로 선언한 이유는 코드 작성 중에 Modal = 123 등으로 재선언을 하면 에러 메세지를 출력해준다. 그러면 ..