✅ 실무에서는 거의 퍼블리싱 된 페이지를 받아 개발을 진행하는데, 최근 사이드프로젝트를 진행하면서 Styled Component를 통해 직접 CSS를 꾸며보고 있습니다. 공부한 내용을 정리하고자 글을 작성합니다. 📌 Styled-Compoenets ? Styled-Components 는 JS의 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 라이브러리입니다. * React 컴포넌트 스타일링 방법 1. 외부 CSS 파일에서 작성한 코드를 className 속성으로 전달 - 규모카 커질수록 css 부피가 커지는 단점이 있습니다. (SASS를 적용하여도 부피가 큼) 2. inline CSS를 React 컴포넌트에 삽입 - 인라인 스타일은 미디어 ..
✅ 이전 포스팅에서 Redux의 기초에 대해서 알아봤었습니다. 이번 포스팅 글에서는 Redux의 미들웨어로 많이 사용되는 Redux-Saga에 대해서 알아보겠습니다. Redux에 잘 모르는 상태에서 처음으로 이 글을 접하셨다면 아래 포스팅 글을 먼저 읽고 오시는 것을 추천드리겠습니다! + 부가적으로 generator함수와 yield에 관해서도 읽는 것을 추천드립니다! React - 상태관리 Redux 기초 ✅ 사내에서 redux로 상태 관리를 하여 개발한 메뉴가 있는데, 당시 개발 기간이 짧아 정확하게 이해하지 못하고 구현하느라 개념잡기가 어려웠습니다. 따라서 이번 포스팅으로 공부해보고자 글 ji-musclecode.tistory.com JS - generator 함수와 yield 회사에서 redux-s..
✅ 사내에서 redux로 상태 관리를 하여 개발한 메뉴가 있는데, 당시 개발 기간이 짧아 정확하게 이해하지 못하고 구현하느라 개념잡기가 어려웠습니다. 따라서 이번 포스팅으로 공부해보고자 글을 작성합니다. ( 글을 읽기 전 redux 기본 용어에 대해 읽어보시면 이해하는데 도움이 될 것 같아서 더보기란에 짧게 정리하였습니다. ) 더보기 액션(Action) : 상태에 변화가 필요하다면 액션을 일으켜야 합니다. 액션은 store에 있는 state를 변경하기 위해 보내는 신호로, 객체로 표현되고, type 필드는 반드시 가지고 있어야 합니다. 이를 바탕으로 리듀서에 작동하게 하는 것이 가능합니다. 액션 객체를 만들어주는 함수를 액션 생성 함수(Action Creator)라고 합니다. function addTod..
✅ 이전 포스팅에서 초기 렌더링 속도를 개선하고자 했을 때 import 방식을 바꾼 적이 있습니다. default export, named export의 사용 차이점에 대해서는 알고 있었지만 정확한 개념과 특징에 대해 알기 위해서 공부하고 포스팅을 합니다. 📌 Default Export /* export : MyFunc.js */ const MyFunc = () => {} export default MyFunc; // ok export default const MyFunc = () => {} // error /* import */ import MyFunc from "./MyFunc"; // ok import newFunc from "./MyFunc"; // ok [ export ] Default로 선언된..
✅ 현 회사에서 제가 처음 개발부터 유지보수 및 개정사항을 작업을 한 메뉴가 있습니다. 메뉴 초기 개발만해도 2달 정도가 걸린..😓 가장 애착을 가지고 있는 메뉴인데, 현 회사 특성상 매년마다 계산식이나 UI가 바뀜에 따라 점점 크기 자체가 커지고 있었습니다. (현재 4개년의 개정을 함에 따라 크기가 엄청 커졌습니다.) 그래서 운영버전 초기 렌더링이 오래 걸리는 현상이 생겼고 이를 방치하면 년도가 지날수록 더욱 느려질것이 분명하기에 개선해보고자 공부하고 글을 작성합니다. 🧐 문제 파악 문제 파악 전 알아야 개념 번들 (Bundle) : 묶는다라는 뜻 번들링 (Bundling) : 기능별로 모듈화한 js 파일들을 묶어주는 것, 서로 연관(의존성)있는 js 파일들을 하나의 번들 파일로 묶어주는 것 번들러 (..
- Total
- Today
- Yesterday
- 함수형 컴포넌트
- 시맨틱 웹
- 호이스팅
- React로 쓰로틀링 디바운싱 구현
- 1급 함수
- next.js에 .gitignore가 적용되지 않을 때
- 1급 시민
- react
- debouncing
- rewrites
- 타입스크립트
- programmers
- 매겨변수와 인자
- 자바스크립트 비동기 동작원리
- 1급 객체
- typescript
- Virtual Scroll
- redux
- 렌더링 속도 개선
- 목표 일기
- useRef
- array
- vue
- zustand
- 자바스크립트 동작원리
- javascript
- next.js 환경변수
- redirects
- 가상스크롤
- Next.js
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |