본문 바로가기
반응형
SMALL

개발/React11

[복습] 2.0 Introduction 1. Vanilla JS VS React JS 버튼을 클릭하면 클릭한 횟수만큼 숫자가 올라가는 코드를 작성해보자. ① Vanilla JS 1) HTML 코드 만들기 2) Javascript에서 가져오기 3) event 감지하기 4) 데이터를 업데이트 한다. 5) HTML도 같이 업데이트 해준다. Total clicks: 0 Click me ② React JS 1. React JS는 어플리케이션이 아주 interactive 하도록 만들어주는 library이다. React JS는 엔진과 같아서, interactive 한 UI를 만들 수 있게 한다. 2. React DOM은 library, 또는 package 인데, 모든 React Element 들을 HTML body에 둘 수 있도록 해준다. React DO.. 2023. 6. 4.
21.08.24 개발일지 if~else문을 사용하지 않고 style 구분 주는 방법 = key, value 값으로 구분한다. 뉴스 카드에서 tag가 들어가는 부분이 있는데, 이 tag는 갯수 제한이 없어서 백엔드에서 데이터가 들어오면 무제한으로 받아들여야 한다. -> 그럴 경우 key 값을 무제한으로 받을 수 있게 배열로 설정한다. 저번의 newsData 부분을 이렇게 수정하였다. [ { id: 1, type: "tips", date: "2021. 01. 01", topic: "은행업무Tip", title: "은행업무Tip", tags: ["일중시황", "일중시황", "일중시황",], }, { id: 2, type: "report", date: "2021. 01. 01", topic: "은행업무Tip", title: "은행업무T.. 2023. 5. 24.
21.08.23 오늘 개발 진행한 내용 1.News 페이지 Component 분리 2.각 데이터 별 CSS 구분 3.데이터 있을 때와 없을 때의 화면 다르게 보이게 구분(swap) 4.카드의 제목이 길어질 경우 아래의 태그와 CSS 겹치는 문제 해결. 1. Dummy Data를 주고, Dummy Data 배열에 값이 없을 때와 있을 때 서로 다른 화면이 보이게 구분하기. src\pages\main\news\news.js import React, {useState, useCallback} from 'react'; import Card from '../../../components/common/news/Card.js'; import ScrapCard from 'components/common/news/ScrapCard.js'; import Scr.. 2023. 5. 24.
반응형
LIST