일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- react
- @redux-toolkit
- https://dasima.xyz/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EA%B3%B1-math-pow-%EA%B3%84%EC%82%B0/
- Beesbeesbees
- variable#function
- slice/splice/split
- UI
- 자바스크립트#JS#var#let#const#undefined#null
- 자바스크립트#조건문#문자열
- for~in/for~of
- toString#String
- CSS
- UX
- removeCookie
- https://developer-talk.tistory.com/299
- dom
- children vs childrenNodes
- ㄷㅌ
- User Flow
- cmarket
- 자바스크립트#JS#slice#splice
- https://lo-victoria.com/introduction-to-redux-toolkit-for-beginners
- js
- 노드교과서
- JS#3일차달리자#초반인데#시간금방~
- https://www.daleseo.com/js-array-slice-splice/
- 내장고차함수
- 헷갈린다~
- redux상태유지
- 자바스크립트
- Today
- Total
목록Code개발일지 (93)
Daily Front_Minhhk
🥶 최적화, optimization 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정. 최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다. 컴퓨터 공학에서의 최적화 : 최소한의 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미! 최적화의 필요성 및 효과 1. 이탈률 감소 2. 전환율 증가 3. 수익 증대 4. 사용자 경험(UX) 향상 📌HTML, CSS 코드 최적화하기 1. HTML 최적화 방법 (1) DOM 트리 가볍게 만들기 (2) 인라인 스타일 사용하지 않기 2. CSS 최적화 방법 (1) 사용하지 않는 CSS 제거하기 (2) 간결한 셀렉터 사용하기 📌리소스 로딩 최적화하기 1. CSS 파일 불러오..
TDD란? TDD(Test-driven Development)는 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론입니다. 개발자 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 법입니다. 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미 TDD의 개발주기 Write Failing Test: 실패하는 테스트 코드를 먼저 작성한다. Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성한다. Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행한다. TDD를 사용하는 이유 코드를 작성하기에 앞서 테스트 코드를 먼저 작성해야 하기 때문에 시간이 오래 걸리는 것처럼 느껴지지만, 오히..
GraphQL Graph + Query Language Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻하며,API를 위한 쿼리 언어라고 할 수 있습니다. GraphQL은 트리 구조로 쿼리 결과를 받기 위해 그래프를 탐색하는 쿼리 언어라고 볼 수 있습니다. GraphQL의 특징 GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답을 받습니다. 응답을 받을 시, 데이터 결과를 JSON 형식으로 받습니다. GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있습니다. GraphQL은 GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사합니다. Gra..
🖥️ 컴퓨터 구조 입력 장치 입력장치는 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치입니다. 출력 장치 출력장치는 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치를 의미합니다. 중앙처리장치 CPU의 내부 구성은 크게 산술/논리 연산 장치(ALU)와 제어 장치, 레지스터로 구성되어 있습니다. 저장 장치 저장장치는 데이터나 프로그램을 보관하기 위한 일차 기억 장치인 주 기억 장치(Memory)와 주 기억 장치를 보조하기 위한 보조 기억 장치가 존재하고 있습니다. CPU CPU의 구조 CPU 의 내부 구성은 크게 산술/논리 연산 장치(ALU), 제어 장치와 레지스터로 구성 산술/논리 연산장치 : 가산기, 보수기, 누산기, 기억 레지스터, 데이터 레지스터 등으로 ..
React.lazy() React는 React.lazy를 통해 컴포넌트를 동적으로 import를 할 수 있기 때문에 이를 사용하면 초기 렌더링 지연시간을 어느정도 줄일 수 있게 됩니다. import Component from './Component'; /* React.lazy로 dynamic import를 감쌉니다. */ const Component = React.lazy(() => import('./Component')); 이 React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링을 해야 합니다. React.Suspense Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 path로 이동할때 컴포넌..
개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다. 이를 이용하면 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있습니다. 예시를 살펴보자!! //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffe..