본문 바로가기

전체 글301

[CSS-in-JS] styled-components CSS-in-JS의 장점: 1. CSS의 컴포넌트화로 스타일시트의 파일을 유지보수할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. (모듈성) 2. JavaScript 환경을 최대한 활용 할 수 있다. 3. JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유할 수 있다. (props를 활용한 조건부 스타일링) 4. CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다. CSS-in-JS의 단점: 1. 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다. 2. 인터랙티브한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능으 보여줄 수 있다. (아직 경험해보지 못함) 3. FOUC(Flash of Unst.. 2022. 8. 6.
[클론코딩] business-card 작업 완료 후 오류 사항 1. 깃허브에 배포시 react-router 버전 충돌로 인해 BrowserRouter 안에 Route eleme={ 컴포넌트 } 가 그려지지 못하는 상황 이유1: 깃허브로 배포시 메인 도메인 주소는 "https://github.com/blackstarzck/business-card" 인데, "business-card" 리포지토리명이 뒤에 붙으면서 Route path="/" 와 매칭되지 못했기 때문이다.즉, Route의 path "/"는 메인 도메인 "https://github.com/blackstarzck"을 바라보고 있었기 때문이다. 해결: BrowserRouter의 속성으로 basename={ process.env.PUBLIC_URL } 넣는다. 2. 착각한 부분: 일반적인.. 2022. 8. 5.
외부에서 컴포넌트 생성 (컴포넌트의 확장성, 재활용성) 부모3 (props A 전달) ↓↓ 부모2 (props A 전달) ↓↓ 부모1 (props A 전달) ↓↓ 자식 ImageFileInput (props A를 수신 → 작동) ** 자식은 어떠한 기능을 작동시키기 위해 부모로 부터 필요한 props를 받아야한다. 위와 같이 props를 전달 전달하게 될 경우 만약 부모 또는 자식 컴포넌트가 props A 뿐만 아니라 B, C, D 등 n개를 가지고 있을 경우 가독성이 좋지 않다. 부모3 (확장성이 높고 재활용 가능한 컴포넌트를 만든다 ImageFileInput ) - 기능 수행을 담당할 자식 컴포넌트를 부모3 컴포넌트 안에서 생성한다. // #1 const Fileinput = 설명: 위와 같이 컴포넌트를 만들 수 있으나 ImageFileInput 컴포넌트.. 2022. 8. 3.
[성능 개선] 배열 보다는 객체를 활용 // #1 const [ cards, setCards ] = useState([ { id: 1, name: "chanki1", age: 21 }, { id: 2, name: "chanki2", age: 22 }, { id: 3, name: "chanki3", age: 23 } ]); const 업데이트 = (card) => { cards.map( item => { if(card.id === item.id){ setCards(); } }); } 위와 같이 map이라는 배열 메서드를 사용하게 되면 배열 안에 있는 모든 원소를 돌고 조건을 대조하여 조건이 참일때 state값을 업데이트해주는데, 문제는 만약 배열의 길이가 길면 길수록 성능저하가 발생할 여지가 있다. // #2 const [ cards, setC.. 2022. 8. 3.
[성능 개선] useState, SetStateAction: prev state에 대한 고찰 useState는 비동기이다. 그렇기 때문에 동기적으로 처리해야할 상황이 온다. const Maker = () => { const [ cards, setCards ] = useState(); // #1 const createOrUpdateCard = () => { const updated = { ...cards }; updated[ card.id ] = card; setCards(updated); } // 위 처럼 state의 이전값을 ...cards에 복사하여 변수로 선언한다. 그리고 해당 변수를 setCard 함수의 인자에 넣어 state값을 업데이트 하는데... 업데이트 하는 시점에 state값이 변경되었을 수도 있다. 이미 기존 state값을 변수에 선언하였기 때문에 이 state값은 OLD한 상.. 2022. 8. 3.
콘솔로그, console.log 색상 넣기 console.log("%c문자", "color: red; background: white") 2022. 8. 3.