게으른개발너D

React에서 자주 사용되는 디자인 패턴들은 상태 관리, 컴포넌트 구조, 코드 재사용성 등과 관련되어 있다.디자인 패턴들은 상황에 맞게 선택하여 사용할 수 있으며, 복잡한 애플리케이션에서는 상태 관리나 컴포넌트 구조를 명확히 하는 데 큰 도움이 된다.대표적인 몇 가지 패턴을 간단한 예시와 함께 소개하겠다.    Container-Presenter Pattern 이 패턴은 컴포넌트의 역할을 명확히 분리하기 위해 자주 사용된다. Container 컴포넌트는 상태와 비즈니스 로직을 관리를, Presenter 컴포넌트는 UI를 담당한다.// Presenter: UI를 담당const UserProfile = ({ user }) => ( {user.name} {user.email} );// Cont..

웹 개발을 하다보면 svg를 사용할 때가 많다. 리액트는 컴포넌트 단위로 개발하다보니 svg element tag를 복사해서 붙여넣기 하기엔 코드가 너무 복잡해 보인다. 이를 해결하기 위해 각각의 svg 파일을 만들어 컴포넌트로 만들어 쓰는 방법이 있다. svg 파일들은 src 폴더 안에 assets 폴더를 만들어서 그 안에 모두 넣어두었다. 컴포넌트로 만들어 사용하기 위해서 이렇게 작성하면 된다. // App.tsx import { ReactComponent as AddIcon } from './assets/add.svg'; export default App() { return ( ); } 이렇게만 사용한다면 타입스크립트에서 해당 모듈을 찾지 못하는 오류가 발생한다. typescript 컴파일러에세 변..

1. useEffect useEffect는 많은 사용성을 가지고 있다. class component를 사용할 때는 component의 생명주기에따라 prop의 변경 사항을 모두 생각하고 구현해 주어야했다. useEffect는 생명주기 메소드 중 componentDidMount, componentWillUpdate, componentWillUnmount와 비슷하다. componentWillMount: 컴포넌트가 생성된 후 DOM에 렌더링되기전 호출 componentDidMount: 첫 렌더링이 끝나고 컴포넌트의 DOM 엘리먼트가 사용가능할 시 호출 componentWillReceiveProps: props가 업데이트 될 때 호출 shouldComponentUpdate: 새로운 props를 받았을 때 호출되..

1. custom hooks Hooks는 react의 state machine에 연결하는 기본적인 방법이다. hooks들을 code sandbox에서 구현 한 후 작동하는 걸 확인하면, 내 폴더 안에 넣고 그 다음 NPM directory에 등록시킬 것이다. useTitle: react document의 title을 몇 개의 hooks와 함께 바꾸는 것 useInput: input 역할 usePageLeave: 유저가 page를 벗어나는 시점을 발견하고 함수를 실행 useClick: 누군가 element를 클릭하는 시점을 감지 useFadeIn: 어떤 element든 상관없이 애니메이션을 element 안으로 서서히 사라지게 만듦 useFullscreen: 어떤 element든 풀스크린으로 만들거나 일반..

개발을 하다가 API를 불러오는데 복잡한 로직이 필요없어 React Query를 쓰지 않고 Async/ Await를 통해 api를 불러오고 있었다. 하지만 가장 눈에 거슬리는 것은 리스트 item들을 API로 불러온 후 상세보기 화면으로 진입, 그 후에 뒤로가기를 하면 다시 API를 호출하여 loading 아이콘이 빙글빙글 돌고 있는 것이다. 날짜별로 localStorage에 저장한 후 다시 불러와 지난 날짜 data들은 삭제할까 싶다가 그냥 React Query를 사용하기로 했다. 역시 caching 기능을 무시할 수 없다.ㅠㅠ react query는 fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리이다. 즉, React 환경에서 비동기 query 과정을 도와주는 라이브러..

React는 cross-site scripting 공격을 막기 위해서 html 태그가 담겨있는 string 형태를 렌더링하면, 태그로 나오지 않고 문자열 그대로 렌더링되게 한다. {svgArr?.map((grids: any[]) => grids.map((grid, i) => { return ( {grid} ); }) )} 여기서 svgArr은 svg 태그가 담겨져 있는 2차 배열이며, 이걸 화면에 나타내면 이렇게 나온다. 하.. 괴롭다 괴로워ㅠㅠㅠ 문자열을 html 형태로 렌더링하게되면 취약하지만 대비하고 있다! 라고 생각한다면, 해결하는 방법이 있다. dangerouslySetInnerHTML {svgArr?.map((grids: any[]) => grids.map((grid, i) => { retur..

Player 기능을 개발하는 도중 Player Component 안에서 사용하는 state들이 불필요하게 반복 호출된다는 점을 알게되었다. 아래는 페이지를 새로고침했을 때의 영상이다. console log로 몇번 호출하는지 count를 새보니 3번이나 반복 호출된다. 처음에는 Player component 안에서 사용하는 useEffect때문인줄 알았다. useEffect 안에서 state값을 변경하면 컴포넌트 위에서부터 state 값을 다시 호출하기 때문이다. function CocoPlayer() { const playList = useRecoilValue(playListState); const [nowPlayingIdx, setNowPlayingIdx] = useState(savedNowPlayi..

1. gh-pages 설치 gh pages를 설치할 것이다. ​ npm i gh-pages ​ gh pages는 결과물을 github pages에 업로드 할 수 있게 해주는 패키지이다. ​ 일단 package.json 파일을 확인하자. 여기서 script를 보는데, 이 script를 실행하면 웹사이트의 production ready code를 생성하게 된다. production ready란 코드가 압축되고 모든게 최적화 된다는 의미이다. ​ npm run build ​ ​ 이렇게 하면 브라우저가 이해할 수 있는 압축된 코드들이 들어간 build폴더가 생성된다. ​ 2. 레파지토리 추가 github에 push하기 전에 깃헙에 들어가서 레파지토리를 먼저 만든 후 터미널창에 아래 코드를 입력하여 레파지토리를 ..