좌충우돌 개발자의 길

리액트는 라이브러리이고 앵귤러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..

window.location.href

채팅에 들어갈 말풍선을 만드는 도중 span태그를 쓰면 word-break가 작동을 안하고 div태그를 쓰면 너비를 설정해야 word-break가 작동했다. 왜 그럴까 알아본 결과! 바로 inline-block으로 설정하면 콘텐츠 너비만큼 div태그의 너비가 설정될 수 있었다! inline-block이 무슨 기능을 하는지 궁금하다면? https://ksumin-dev.tistory.com/84 [CSS] 레이아웃 1. display와 box model의 관계 display width height margin padding border block ㅇ ㅇ ㅇ ㅇ ㅇ inline X X 좌/우 ㅇ(설명) ㅇ(설명) inline-block ㅇ ㅇ ㅇ ㅇ ㅇ - inline : margin은 좌우만 되.. ksu..

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..

1. 이벤트 전파 방식 : 이벤트 버블링 자식요소에서 발생한 이벤트 객체는 부모와 그 부모를 통해 전파 (하위요소에서 상위요소로 올라감) 2. 버블링할 수 있는 이벤트와 아닌 이벤트 3. event.stopPropagation() : 이벤트 버블링 막기 이벤트 버블링을 막아야하는 경우는 드물어서 이걸 사용하는 일도 드물다 4. 이벤트 위임 - 자신에게 발생하는 일을 다른 요소에서 처리하게 만들기 => 버블링을 이용하자! currentTarget : 항상 ul을 가리킴 => 핸들러가 등록된 요소 target : 클릭된 요소를 가리킴 => 이벤트를 발생시키는 요소 이벤트 이벤트 위임x : target === currentTarget function clickHandler(event) { let target ..

1. 이벤트 핸들러 종류 이벤트 : 마우스나 키보드를 누를때 일어나는 일들, input창에 포커스가 되거나, 문서에 로드가 완료되면 이벤트 발생 핸들러 : 이벤트를 특정한 함수로 실행할 수 있는데 이것을 핸들러라고 함 클릭 클릭2 클릭3 클릭4 2. 자주 쓰는 이벤트 /*더블 클릭시 이벤트 반응*/ el.addEventListener("dbClick", sayHello); /*키보드 누를 때 이벤트 발생*/ el.addEventListener("keyup", event => { console.log(event); /*event가 콘솔창에 뜨는데 이때, 어떤 키를 눌렀는지도 확인 가능함*/ }) /* focus : input창에 포커스가 될 때 발생*/ input.addEventListener("focus..

1. CSS style 2. class 제어 className 으로 제어하기 classList 로 제어하기 (여러개 class 넣을 수 있음) .classList.add : 클래스 추가 .classList.remove : 클래스 제거 .calssKist.replayce(a,b) : a를 b로 바꿈 .classList.toggle() : 클래스가 있으면 빼고 없으면 넣는 기능 출처 : 코딩앙마