Coding Note

리액트는 빌드 - 배포 과정 진행됨! Router 5 버전보다 6 버전 사용 -> 호환성, 용량이 적어 비용이 더 적게 든다. 라우터는 데이터 패킷을 전송하는 네트워크 장치로 SPA 기능 실행함. SPA(Single Page Application) - 하나의 페이지에서 일정 부분을 렌더링, 페이지 변화 없이 내부 동작 진행 명령어 > 1. create-react-app router -- 라우터 생성 2. npm i react-router -- native와 앱을 합쳐서 사용하는 명령어 3. npm i react-router-dom -- 웹 전용 6 버전 변경사항 > 1. Router -> BrowerRouter - BrowerRouter : 웹 브라우저에서 React Router를 실행하는데 권장되는 인..

React란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 서버는 node.js jsx 문법 사용한다. - 보간법 사용 - 백틱 사용 ` ` npm 간단한 명령어 정리 npm install -g create-react-app : react 프로젝트 생성 create-react-app(리액트 앱 환경) template : 리액트 폴더에 이동 후 템플릿 설치 npm i : 노드 모듈 생성 (node_modules) npm start : 서버 시작 ctlr + c : 서버 종료 npm run build : 빌드 실행, 배포 직전에 하는 게 좋음! npm install -g server : 빌드한 거로 서버 실행할 거니? 서버 실행 server -s build : build를 루트로 서버 실행 빌드 ..

게시물 CRUD 구현하기! 상태 선언 1. 선언 타입이 원시 타입(실제 데이터 값을 저장하는 타입)인 경우 원시 타입) String, Number, bigint, boolean, undefined, symbol, null const[value, setValue] = useState(PRIMITYPE); 2. 참조 타입인 경우 참조 타입) Object, Array 참조 타입인 경우 객체를 복제하여 복제한 객체에 변경된 값을 저장한다. const[value, setValue] = useState(Object); newValue={...value} 복제본 newValue 변경 setValue(newValue) 변경된 값을 set에 넣는다! 1. Create - Create Component function C..

리액트는 사용자 정의 태그를 만드는 기술이다! components - 여러 개의 프로그램 함수들을 모아 하나의 특정 기능을 수행할 수 있도록 구성한 작은 기능적 단위 props - 속성을 나타내는 데이터 - 컴포넌트를 사용하는 외부자를 위한 데이터, 읽기 전용 State - 컴포넌트를 만드는 내부자를 위한 데이터 컴포넌트를 정의하는 간단한 방법은 JavaScript 함수를 작성한다. 컴포넌트를 사용하여 코드를 간략화할 수 있다. 또한 내가 만든 컴포넌트를 다른 사람에게 공유할 수 있으며 다른 사람의 컴포넌트를 활용할 수 있다! 태그를 for문을 사용하여 코드를 간략하게 수정했다. key는 id(고유의 값) Header component function Header(props) { return {props..

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org React는 자바스크립트 라이브러리 중 하나로 사용자 정의 태그를 만드는 웹 프레임 워크 리액트 세팅 위해 VsCode, NodeJS 설치 필수! Node JS, Express JS 설치하기 아래 인프런 강의를 참고하여 Node JS 스터디를 시작하게 되었다. 처음 배우는 Node JS 잘해보자!! [무료] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 - 인프런 | 강의 이 강의를 통해서 리액트 coding-day.tistory.com NodeJS 설치를 완료하였으며 세팅해보자! 리액트 세팅 1. 노드 설치..