본문 바로가기

Programing/React72

001. [코딩애플] [part1] React란? React란?Single Page Application을 만들기에 유리한 라이브러리이다.SPA는 인스타그램과 같이 페이지가 전환되었음에도 새로고침이 되지 않고 부드럽게 모바일 앱과 같은 사용성을 보이는 웹 페이지를 말함.물론 바닐라 JS로도 가능하지만 코드가 길어지기 때문에 이를 도와주는 라이브러리가 많이 생겼고, 그 중에서 가장 인기가 많은 것이 react임.특징대규모 웹 애플리케이션에서도 빠르다.동적인 애플리케이션을 더 쉽게 만들 수 있다.재사용 가능한 컴포넌트를 사용하여 뷰를 구성하기 때문에 복잡한 UI를 쉽게 구성할 수 있다.JSX(일명 작스)를 사용한다. HTML과 유사한 구문을 코드에 직접 포함시킬 수 있다.React Native 사용하면 iOS와 안드로이드 모바일 모두 통하는 애플리케이션을 .. Programing/React 2024. 5. 14.
React-Create-App 환경과 Vite 환경에서 각각 실행하는 법 React는 웹 브라우저에서 실행시키기 위해서는 터미널을 이용해야 한다.Create-React-App 환경Create-React-App을 이용한 경우, 터미널에 npm start를 작성 후 엔터.Vite 환경Vite를 이용한 경우, npm install 이후 npm run dev를 작성 후 엔터.터미널에 로컬호스트 아이피가 뜨면 그것을 ctrl + 클릭하면 웹 브라우저에서 열림.만약 vite의 경우, 여기까지 했는 데도 실행이 안 되면 package.json 파일 확인.// 아래와 같이 작성이 잘 되어 있는지 확인하고 안 되어 있다면 수정해주고 다시 하면 됨."scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview"} Programing/React 2024. 5. 13.
[내배캠] 004. [JS] 객체와 배열 - 템플릿 리터럴, 구조 분해 할당 ES6 업데이트 이후 제공된 핵심 기능 세 가지에 대해 학습한다.Template LiteralsDestructuringSpread Operators템플릿 리터럴 (Template Literals)개념변수와 표현식을 문자열 안에 삽입할 수 있게 해주는 문법.사용법`` 백틱을 이용한다.const customer = { name: '장원영',};const item = { name: '커피', price: 4000,};console.log( '감사합니다. ' + customer.name + '님!' + item.name + ' 을(를) ' + itme.price + '원에 구매하셨습니다.');// '감사합니다. 장원영님! 커피을(를) 4000원에 구매하셨습니다.'위와 같이 출력할 수도 있겠지만 .. Programing/React 2024. 5. 10.
[내배캠] 003. [JS] 객체와 배열 - 수정중 Programing/React 2024. 5. 10.
[내배캠] 002. [JS] 객체와 배열 - 값 접근하기, 수정하기, 삭제하기 객체란?개념key : value로 이루어진 데이터의 집합.리액트에서는 JSON 형태로 데이터를 불러오는 작업을 많이 한다. (JSON, JavaScript Object Notation)특징key: value 쌍을 이룬다 / value에는 모든 자료형이 올 수 있다const user = { name: '장원영', // string type age: 21, // number type group: 'ive', isBeauty: true, // boolean type printHello: () => console.log('hello') // function}접근 방법점 표기법console.log(user.name); // '장원영'console.log(user.age); // 21us.. Programing/React 2024. 5. 10.

티스토리툴바