JavaScript (94) 썸네일형 리스트형 JSX, Props 📌 JSX Javascript + XML JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그림 객체를 변수로 빼 재사용성 가능 import React from 'react' export default function App() { const number = 1; const pTagStyle = { color: "red", } return( 안녕하세요 리액트입니다. {/* 주석을 사용하는 방법입니다. */} {/* 삼항 연산자를 사용해볼게요! */} { number > 10 ? number + '은 10보다 크다' : number + '은 10보다 작다.' } ) } 📌 Props 부모에서 자식으로 값을 내려줌(rendering) , 단방향 props는 반드시 읽기 전용으로 취급하며.. React Component React Component UI를 재사용이 가능한 개별적인 여러 조각으로 나눔 📌 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () { return hello } 📌클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 📌 JSX 자바스크립트의 확장 문법이며 XML과 비슷 📌 { } 자바스크립트 표현식을 JSX 내부에 작성하려면 {}로.. Create React App Create React App boilerplate React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법 완제품을 구매한다. 📌 CRA 프로젝트 세팅 $ ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요. $ cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다. $ yarn create react-app week-1 #프로젝트 생성! 오류 발생... $ yarn create react-app week-2 yarn create v1.22.19 [1/4] Resolving packages... warning create-react-app > tar-pack > tar@2.2.2: This version of tar is no longer supported, and will no.. React 개발 환경 세팅 React 개발 환경 세팅 📌 크롬 브라우저 https://www.google.co.kr/chrome/ Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com 📌 VScode https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Li.. React 소개 및 JavaScript 문법 React 소개 및 JavaScript 문법 📌 UI를 Building한다? Web 또는 App Application의 UI, 즉, 보여주는 부분(Front End)을 구축한다. 📌 React.js란? SPA 기반의 프론트엔드 개발 프레임워크 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법 비슷한 프레임 워크 : AngulaJS, VueJS 📌 SPA란? Single Page Application 한개의 페이지(index.html)로 이루어진 애플리케이션 컴포넌트(벽돌) 단위로 변경사항을 반영하기 때문에 깜빡임 없음 ↔ MPA(Multi Page Application) : 하나의 변경사항을 반영하기 위해 전체 페이지 re-rendering 하므로 깜빡임 현상(UX, 사용자 경험 ↓) 📌 React의 단.. html 숫자 세 자리 수 콤마(,) html 숫자 세 자리 수 콤마(,) 📌 장바구니 총 금액 세자리수 콤마 찍기 Price.toLocaleString('ko-KR') 총 금액, 총 갯수 표시 📄 front function makeBillCard(totalPrice, totalQuantity) { $("#orderCard").html(""); let tempHtml = ` 합계 금액 : ${totalPrice.toLocaleString('ko-KR')}원 상품 갯수 : ${totalQuantity}개 바로 구매하기 ` $("#orderCard").append(tempHtml); } 바로 구매하기 버튼을 누르면 구매되도록! html input checkbox checked 확인방법 html input checkbox checked 확인방법 input ckeckbox 체크 확인 $("#check-box-3").is(":checked") // boolean 📄 html input 태그에 type이 'checkbox'이면, 체크박스가 생성된다. 장바구니에 담긴 상품 가져올 때, client storage에 저장 window.localStorage.setItem('productIdList', productIdList); productIdList라는 key값을 가지는 productIdList(array) 저장! 장바구니 모든 목록 가져오기 📄 front function showProductsInCart() { $("#products-in-carts").html(""); $.ajax({ ty.. 4차 미니프로젝트, 이커머스- 원하는 상품 장바구니 수량수정 & 삭제 4차 미니프로젝트, 이커머스- 원하는 상품 장바구니 수량수정 & 삭제 장바구니 리스트 모두 가져오기 📄 back(Node.js) // 내가 가진 장바구니 목록을 전부 불러오기 router.get('/cart', async (req, res) => { // const { userId } = res.locals.user; const cart = await Cart.findAll({ // where: { // userId, // }, }); const productIds = cart.map((c) => c.productId); const productsKeyById = await Product.findAll({ where: { productId: productIds, }, }).then((products) =.. 4차 미니프로젝트, 이커머스- 원하는 상품 장바구니에 담기 4차 미니프로젝트, 이커머스- 원하는 상품 장바구니에 담기 이번에 이커머스 프로젝트에서 내가 맡은 부분은 장바구니! 일단 임의의 값을 상품으로 두고 장바구니 담기 하다보니, 어쩌다가 상품 리스트까지 만들게 되었다. ejs를 활용해보고 싶으나, 이해하기 영 싶지 않아서 그냥 내가 잘 알고 있는 ajax로 구현중~ 📄 productList front function makeProduct(image, info, name, price, productId) { let tempHtml = ` 제품명 : ${name} 설명 : ${info} ${price}원 장바구니 `; $("#products-box").append(tempHtml); } productList를 만들때 장바구니 담기 버튼에 productId를 같이.. TS 입문 주차 TS 입문 주차 2023.01.17 - [JavaScript] - 타입스크립트 기초문법1 2023.01.18 - [JavaScript] - 타입스크립트 기초문법2 2023.01.19 - [JavaScript] - TS, 내가 만든 포켓몬 크롤링 프로그램 2023.01.30 - [JavaScript] - TS, 기본적인 CRUD 입문주차때 배운 내용을 정리! 📌 git repo https://github.com/godee95/TS_prac GitHub - godee95/TS_prac: TS study TS study. Contribute to godee95/TS_prac development by creating an account on GitHub. github.com 이전 1 2 3 4 5 ··· 10 다음
