본문 바로가기
728x90
반응형

프로그래밍&IT

 (118)
[Javascript] 블록, 인라인, 범용 요소 / 문단 & 테이블 & form 태그 Javascript & CSS 기본 블록, 인라인, 범용 요소에 대해 구분 블록 요소 인라인 요소 범용 요소 특징 - 줄 바꿈 속성을 가지고 있다 - 기본 너비 속성이 100% - 블록 요소를 포함할 수 없지만, 예외인 요소도 존재 - 인라인 요소를 포함할 수 있다. - 줄 바꿈 속성이 없다 - 내용만큼 너비가 유지 - 너비와 높이의 속성을 사용할 수 없다 - 블록요소를 포함할 수 없으며, 인라인 요소는 포함될수 있다. - 블록 요소임에도 불구하고 모든 요소를 포함할 수 있다. 종류 , , , , , , , , , , , , , , , ,,,, ,, , , , (p 요소만 가능) 문단 태그 일부 종류 설명 종류 설명 ~ 제목 요소: 숫자가 적을 수록 큰 제목 이미지 단락 구분 링크 구분선 맵 선언 짧은 ..
Coding Apple, React 강좌 내용 정리.19 - lazy loading / React devtools, memo (재렌더링 방지) lazy loading / React devtools 1. 되도록이면 함수나 오브젝트는 별도로 선언해서 사용. 메모리문제를 어느정도 보완이 가능하다 ex) function Clicked() { ... } lazy , Suspense 이용 import {lazy, Suspense} from 'react' let Detail = lazy( ()=> { return import('./Detail.js') } ); //아니면 이렇게 쓰기도. lazy( ()=> import('./Detail.js') ) → Detail를 호출/사용할 때 import 시킨다. 대부분 Suspens라는 걸 같이 쓰는데 => React Dev Tools 크롬 확장 프로그램으로 설치가능. React 내부 구조 보기 데이터 조작 렌더링 ..
Coding Apple, React 강좌 내용 정리.18 - 3.Redux : dispatch 재확인 등 dispatch 등, 기본내용 추가 dispatch()로 수정요청할 때, 데이터를 보낼수도 있다. dispatch( {type: ~ , payload: 전송할 데이터} ) 보낸 자료는 액션 파라미터에 저장되어 있다. // dispatch 전송 : id를 전송한다 { props.dispatch( {id:p.id, type:'수량증가'} ) } }>+ // reducer 관련 function reducer(state=초기값, 액션) { if (액션.type ==='수량증가') { let copy = [...state]; copy[액션.id].quan++; return copy; } else if (액션.type === '수량감소') { let copy = [...state]; if (copy[액션.id].q..
Coding Apple, React 강좌 내용 정리.17 - 2.Redux redux관련 저번 내용 Coding Apple, React 강좌 내용 정리.17 - Redux.1 2. Redux 다시.. Redux를 쓰는 이유? 1. 복잡한 props 사용을 줄일 수 있다. 모든 컴포넌트가 직접 데이터를 쓸 수 있다. 2. 데이터 수정이 용이하다 : state 데이터 관리가능. [여러 콤포넌트에서 사용하는 데이터를 한 번에 처리/관리] reducer 1. reducer만들기 : state의 수정방법을 미리 정의한다고 이해하자. 수정된 state를 리턴하는 함수라 이해. 단 무조건 state를 리턴해야 한다. 2. store만들때, reducer를 만들어서 넣으면 된다. 3. 데이터를 수정(요청)을 할 때는 dispatch() 를 쓴다. 조그만 사이트라면 오히려 React쓰는게 안 ..
Coding Apple, React 강좌 내용 정리.17 - Redux.1 Redux 컴포넌트간에 줄줄이 엮어서 사용하는 props 대신에 redux라는걸 사용할 수 있다. 연결된 컴포넌트들이 state의 공유가 가능하다. Redux 사용하기 위한 순서 1. 설치 터미널에서 npm install redux react-redux 2 . 사용 준비 in code import {Provider} from 'react-redux' // Provider 생성 import { createStore } from 'redux' // redux 생성 필요한 부분을 감싸기 - 로 state를 공유할 대상을 ( ) 감싼다 - 공유할 state를 createStore 함수로 생성한다. let store = createStore( state를 가져오고 리턴하는 함수() ); - createStore로..
Coding Apple, React 강좌 내용 정리.16 - Tab UI , animation Tab UI (React-Bootstrap 활용) 간단한 애니메이션 (해당 tab의 content변경시 서서히 나타나게) 개요 UI상태 (여기선 tab) 를 true/false state로 저장해둠 선택한 tab에 따라 해당 content ( , ) 의 내용을 나타나게 한다. 이왕 서서히 나타나게 하는 간단한 애니메이션을 추가한다. Tab 만들기 React 부트스트랩에서 찾아 복사해서 붙여넣기로 (링크) {/* defaultActiveKey : 기본적으로 눌러진 버튼의 eventKey 부트스트랩의 mt-5 이용 */} {/* 버튼들마다 유니크한 eventKey 부여하기 */} Active Option 2 누른탭의 정보, 번호를 저장할 state 만들기 let [누른탭, 누른탭변경] = useState(0..
Coding Apple, React 강좌 내용 정리.15 - Component in Component , build 명령어 Component in Component 어쩔수없이 저번까지 진행한 소스 내용 (App.js 지금까지) import './App.css'; import React, {useState} from 'react' import 'bootstrap/dist/css/bootstrap.min.css'; import {Button, Container,Navbar, Nav, NavDropdown, Card} from 'react-bootstrap' import {Route, Link, Switch} from 'react-router-dom' import {} from 'react-bootstrap' import Data from './data.js' import Detail from './Detail'; import a..
Coding Apple, React 강좌 내용 정리.14 - Ajax in React Ajax (Asynchronous JavaScript and XML) 서버에 새로고침없이 요청을 할 수 있게 해준다 서버? 누군가 페이지 요청을 하면 페이지를 전송해주는 프로그램 요청? 여러 종류가 있으며 GET : 특정 페이지 / 자료읽기 등 범용적. 주소에 값을 붙여서 보내는 것들 POST : 주소에 값을 붙이지 않고, 암호같은 중요 정보 전달할 때 사용 GET / POST 요청 할 때마다 항상 새로 고침됨. ajax를 쓰면, 새로 고침없이 내용 수정 등이 가능하다. jQuery 설치해서, $.ajax() 사용 axios 설치해서 axios.get() 사용 일반 자바스크립트 이용해서 fetch() 사용 이 강의는 2번 axios 설치해서 사용하기로 설치 : npm install axios { axio..
Coding Apple, React 강좌 내용 정리.13 - useEffect 훅(hook) useEffect 훅 import React, {useState, useEffect } from "react" 컴포넌트가 mount, update 될때 특정코드 실행할 수 있다 useEffect(() => { console.log("11111"); }); ex) 3초뒤에 alert창을 안 보이게 하는 걸 만들고자 할 때 1. UI 보이고/안보이고하는 상태를 state로 저장 let [alert, alert변경] = useState(true); 2. 조건식으로 state가 true일때만 보여줌 { alert === true ? 재고가 얼마 남지 않았습니다. : null } 3. useEffect 내용 추가 setTimeout 함수를 이용해서, 2초뒤에 useState(false)를 실행한다. useEffe..
Coding Apple, React 강좌 내용 정리.12 - styled-components styled-components component가 많아지면 css도 관리가 어려워짐 (css in js) 동일한 이름의 class를 넣는다던지 등 먼저 설치해보기 npm install styled-components ... import styled from 'styled-components' 컴포넌트에 직접 스타일넣어서 스타일링하기 className 작명 필요없음 // css를 미리 입려놓은 컴포넌트? let 박스 = styled.div` padding : 20px; border-style: ridge; `; let 제목 = styled.h4` font-size: 25px; font-weight: 800; `; --- 상세페이지 적용 화면 호불호가 갈린다고 한다. 어차피 선택 사항이다. props 를 ..
반응형

티스토리툴바