일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 딥러닝
- 혼공챌린지
- axios
- 백준
- 혼자공부하는머신러닝
- 리액트
- 유니티 #게임개발
- 에러해결방안
- 알고리즘
- 혼공단
- useEffect
- reactmemo
- styledcomonents
- typeScript
- 혼자공부하는머신러닝딥러닝
- 머신러닝
- TS
- CSS
- clipboardapi
- 혼공머신
- error맛집
- 백준 #코딩테스트 #코테 #알고리즘
- 구조분해할당
- Redux
- REACT
- 타입스크립트
- 코딩테스트
- js
- 초기값 설정하기
- 백준 #코딩테스트
- Today
- Total
목록STUDYING/React (18)
좌충우돌 개발자의 길
class에선 this를 이용해 데이터를 교환한다 this.props.setData("data from child")}> send data to parent - 참고 자료 https://any-ting.tistory.com/8 [React Class] Component Props와 State 사용방법(데이터 전달) - 지난 시간 지난 시간에 React라는 기술에 대해서 간단하게 설명을 하고, 프로젝트 component를 활용하는 시간을 갖었습니다. 혹시 Component에 대한 개념에 익숙하지 않으시면 제가 올린 글을 한번 읽 any-ting.tistory.com
리액트는 라이브러리이고 앵귤러js, vue.js는 프레임워크이다 무슨 차이점일까? => 프로그램 흐름에 대한 제어 권한 - 프레임워크 : 프레임워크가 제어 권한 가짐 - 라이브러리 : 개발자가 제어 권한 가짐 => 흐름에 대한 제어 안하고 개발자가 필요한 부분만 필요할 때 사용
1. 로딩 - 데이터가 아직 렌더링 안되었을 때 loading 뜨게 하기 import { Link } from "react-router-dom"; import useFetch from "../hooks/useFetch"; export default function DayList() { const days = useFetch("http://localhost:3001/days"); if (days.length === 0) { return Loading...; } ... } 2. 통신 중에 버튼 클릭시 반응없게 하기 const [isLoading, setIsLoading] = useState(false); function onSubmit(e) { e.preventDefault(); if (!isLoading)..
1. PUT(수정) - content-type : 보내는 resource의 타입을 의미 (html, text, json... 여러가지가 있음) - body : 데이터 보낼 때 포함될 정보들 입력 - ...word : 기존 데이터를 의미 isdone을 !isdone으로 바꿔줌 - json.stringfy : json 형태로 바꿔서 보냄 - then : 응답을 받아서 응답이 ok이면 state를 바꿔줌 2. DELETE(삭제) export default function Word({ word: w }) { //word: w 는 새로운 변수명으로 할당 가능해짐 const [word, setWord] = useState(w); const [isShow, setIsShow] = useState(false); con..
Clipboard API - 이 api는 텍스트를 copy할 수 있는 기능 - 예전에는 doucment.exeCommand()를 사용했지만 Deprecated가 되어 사용이 불가능함 - Clipboard API MDN https://developer.mozilla.org/ko/docs/Web/API/Clipboard_API Clipboard API - Web API | MDN Clipboard API는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공합니다. developer.mozilla.org - 참고 블로그 https://junjangsee.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B..
1. package.json만 있다면 node_module 지워도 npm install하면 다시 복구 가능 2. npm build : 배포 시 사용 3. npm start : 개발 모드 프로그램 사용시 4. npm eject : 내부 설정 파일 꺼낼 때 사용, 웹페이지나 가변 설정을 변경하고 싶을 때 사용 5. JSX : html 내부에 js를 작성할 때 쓰는 언어 6. JSX는 하나의 태그만 만들 수 있어 return 안에 로 감싸야함 7. 이벤트 처리 방법 2가지 8. useState - 동일한 컴포넌트라도 state는 각각 관리됨 9. Json server - 빠르고 쉽게 http REST api를 구축해줌 (작은 프로젝트할 때 사용하면 좋음) //설치 npm install -g json-serve..
css-module을 사용할 때 styles name을 하나 적용 ... styles name을 여러 개 적용 ... *주의!! : `${styles.description}, ${styles.yellow} => 이렇게 콤마 붙이면 절대 절대 안됀다
https://velog.io/@donee/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90-font-awesome-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%82%AC%EC%9A%A9 리액트에 font-awesome 아이콘 사용 fontawesome무료버전만 설치했다.RegularSolidLightDuotoneBrand원하는 아이콘을 font awesome에서 찾아 클릭한다.작업하는 jsx에 다음과 같이 추가해준다. velog.io 리액트에 font-awesome 아이콘 사용 fontawesome무료버전만 설치했다.RegularSolidLightDuotoneBrand원하는 아이콘을 font awesome에서 찾아 클릭한다.작업하는 jsx에 다음과 같이 추가해준다. velo..