본문 바로가기

분류 전체보기339

2차원 배열 누적 합 1. 내 생각이 막혔던 부분 첫번째 - arr [ i ] [ j ] (1) 첫번째 행을 누적해서 더한다.(이 부분은 일단 맞음) (2) 두번째 행은.. arr [ 0 ][ j ]를 arr[ 1 ][ j ] ?에? 더하는 건데.. 바로 결괏값이 나올수가 있나? => 이 부분에서 막혔다. 열을 어떻게 하지? 일단 틀린건, arr[0][j]가 아니다. sum_list[ 0 ][ j ] 이다. sum_list[ 0 ][ j ] = sum(arr[ 0 ][ : j ]) 이렇게도 가능 sum_list[ 0 ][ j + 1 ] += arr[ 0 ][ j ] 그런데, sum_list[ 0 ][ j ]를 하게 되면, 한 칸 한 칸이, sum_list의 값이 된다. 잊어버리지 않게 표시하자면, sum_list의 1행은 다.. 2023. 3. 7.
Regex 헷갈리는 부분들 정리 특히나 헷갈린 점. 대괄호, 중괄호, 소괄호의 의미. 백슬래시를 왜 쓴걸까? 이메일의 경우 @또는 .이 들어가는데, 이것은 어떻게 표현하지? 딱 그 문자만 들어가는 경우? 종료할때는? 1. 괄호: [], () 그리고 {} (1) 대괄호: 그중에 하나만. [a-z]: a부터 z까지의 알파벳중 하나. [abc] 는 [a-c]와 같다. (내가 착각한 것: 하나가 아니라 다중 가능이라고 생각함) (2) 소괄호: 그룹 (3) 중괄호: 반복 횟수. 예: a{2}: a가 2번 반복 (내가 착각한 것: ab{2} ab 두자리로 끝난다고 생각함) 2. 특수문자 ^, *, +, ?, $, . (1) ^: 2가지 경우가 있음. 대괄호를 같이 쓰면 의미가 달라짐 첫번째: ^a : a로 시작됨. ^[a-z.. 2023. 3. 6.
컴포넌트 리렌더링 방지하기! React.memo 벨로퍼트와 함께하는 모던 리액트: React.memo 컴포넌트의 리랜더링을 방지! export default할 때 React.memo()로 컴포넌트를 감싸주면 된다. 하지만 최적화의 경우 개선이 되는 경우에만 사용해야지 그렇지 않으면 불필요한 props 비교를 하게 된다고 한다. import React from 'react'; const CreateUser = () => { return ( ... ); }; export default React.memo(CreateUser); 함수형 업데이트? setState( user+1 ) 를 setState(user=>user+1)로 작성하는 것. 이렇게 하면 set 함수에서 최신의 user를반영하게 된다고 한다. 그래서 deps (예: useCallback( ().. 2023. 3. 6.
useCallback, useMemo 활용해보기 책으로 읽었을때는 useEffect와 비슷하다는 것만 기억에 남았다. 왜 사용할까? 랜더링 관련해서 함수가 언제나 재생성 되기 때문인데, 부모 컴포넌트가 재랜더링 된다면 자식 컴포넌트에서도 재랜더링이 일어나기 때문에 자원이 낭비된다. 그렇지만 useCallback/useMemo를 사용하면 랜더링될 때 같은 함수를 cache에서 불러온다. useCallback의 경우 함수를 캐싱하고 useMemo의 경우 값을 캐싱한다. 이해했으니, 써야 하는데, 익숙하지 않기 때문에 처음부터 생각하는게 어렵다면, 코드를 짠 다음, 해당 익명 함수에 useMemo/useCallback( 함수 , [] )을 씌워주는 것으로 적용해보면 될 것 같다. 벨로퍼트와 함께하는 모던 리액트: useMemo 벨로퍼트와 함께하는 모던 리액.. 2023. 3. 6.
커스텀 Hooks 벨로퍼트와 함께하는 모던 리액트: 커스텀 Hooks 만들기 커스텀 Hooks에 관한 "첫인상" (1) 여러가지 Hooks들을 합친 함수로 모듈화가 가능(한 것 같다) (2) 자주 사용되는 로직을 모듈화 가능(예: input 관련된 state) (*궁금한 점*) 어떻게 쓰이는걸까.. onChange나 다른 함수가.. 어떻게 값을 반영하는걸까.. 1. src 폴더에 hooks 디렉터리 만들기 2. use[함수명].js (예: useInputs.js) 3. useState, useEffect, useReducer, useCallback등 Hooks를 활용하여 기능을 구현. 4. *컴포넌트에서 사용하고 싶은 값들을 반환* => 여기서는 initialForm으로 초기화를 했는데, 객체, 단일변수 모두 가능한 것 .. 2023. 3. 6.
reflow, repaint (랜더 트리, reflow, reflow를 줄이는 예) 브라우저의 이해 #1 Reflow, Repaint에 대하여 알아봅니다. 폴시랩 자바스트립트, PHP, 워드프레스, HTML, CSS, 팁, 가이드, 일상이야기. falsy.me [브라우저의 랜더링 과정을 이해하고 reflow와 repaint를 줄여서 성능을 높이자. 불필요한 성능 저하를 줄이자] 1. 브라우저의 랜더링 과정 DOM 트리와 스타일 규칙을 합쳐서 랜더 트리를 생성. reflow: 배치. 레이아웃을 위치시킴 랜더 트리: display none의 경우 DOM에는 존재하지만, 시각적으로는 존재하지 않기 때문에 랜더 트리에 할당되진 않는다. position이 absolute,fixed 의 경우 DOM 트리와 다른 위치의 랜더 트리에 할당 랜더트리가 탐색되고 paint 메서드가 호출되어 UI 기반의 .. 2023. 3. 5.
useReducer를 사용하는 이유 그리고 initialState가 객체일 때 사용하는 방법에 대한 생각 정리 useState가 있기 대문에 useReducer를 사용하는 이유를 몰랐다. useState로 관리를 하면 된다고 생각했기 때문에, 늘어나는 useState를 보면서 "이게 맞나?" 하는 의문이 들때도. 그런데, 팀원분들과 코드리뷰를 하면서 useReducer를 모듈화 하신 분이 계셔서 관심을 갖고 사용해보려고 했다. 내가 생각하는 useReducer를 사용하는 이유 useState가 많아지는 상황이라면 사용을 고려할 수 있다. 모듈화를 통해 코드를 분리하여 재사용이 가능하다. useReducer에서 reducer를 모듈화 하기 위한 방법을 이전부터 고민하긴 했다. 검색했을 때 보통의 예시는 increase와 decrease에 대한 정석 코드. 처음에는 코드를 기억했다. 1. 구조는 useState와 똑.. 2023. 3. 3.
리액트 프로젝트 진행시 고민하는 부분 0. eslint, prettier, husky 1. 폴더 - component - pages - router 2. 컴포넌트 - Input - button - 기본 컴포넌트 - 중복 컴포넌트 3. App, index, router . . . 4. useState가 많아지는 경우. - useReducer 5. 최적화 - useReducer - useMemo - useCallback 6. axios 사용 7. 전역 데이터 관리 - Reducer / contextAPI / Recoil... => . . . 언제. . . 8. css module - import styles from '[파일명].module.css' 9. 배포방법 - AWS - vercel 10. github Actions CI/CD 2023. 3. 3.
css module 컴포넌트에 props로 css module 변수를 전달하는 경우, styles.className 이 아니라, styles[className] 을 사용하면 된다. //Button.tsx 버튼 2023. 3. 2.

티스토리툴바