꾸준히 밀도있게 꾸준히 밀도있게

이 글은 이런 내용을 다루고 있어요. 1. 전역 상태관리 라이브러리 3가지 패턴(아키텍처) : Flux, Atomic, Proxy 2-1. 6가지 상태관리 라이브러리 훑어보고 (feat. 공식문서 읽는 법) 2-2. 테마 변경 예제로 실습하기 (feat. context는 상태관리 라이브러리가 아님!) # 전역 상태관리 라이브러리 3가지 아키텍처 Flux Architecture - 탑다운 - redux, zustand Atomic Architecture - 바텀업 - recoil, jotai Proxy Architecture - 중개자 - mobx, valtio # 6가지 상태관리 라이브러리 - (1)공식문서 읽기 라이브러리에 대해 알아보고 실습하기 전에, 새로운 기술을 공부할 때 꼭 알아 봐야하는 것들은..

이 글은 이런 이야기를 담고 있어요. 1. react Hooks 중 useReducer를 정복하는 과정 (feat. 실습) 2. useReducer를 이해하니 예전에 이해하지 못했던 redux를 이해하게 된 이야기 (feat. flux 아키텍처) # useReducer : useState와 비슷하지만, 복잡한 상태를 관리하는데 사용하거나 이전 상태에 의존하는 상태를 관리하는데 사용 `... ' 복잡한 상태 관리?? 이전 상태에 의존하는 상태?? 그게 뭔데 .... ' 라는 생각부터 들었다. 그리고 이전에 redux를 공부하다 만난 적 있는 dispatch, reducer라는 단어를 보자 너무 어렵게 느껴졌다.` useState에 대해서는 잘 알고 있는 내용이므로 useState와 비슷하다는 말에서 힌트를..

49일차_23.05.15 Mon 원범님 react router / hooks (useEffect, useRef, useMemo) [-] 50일차_23.05.16 Tue 범재님 git [-] 51일차_23.05.17 Wed 재현님 react hooks (useMemo, useContext) [-] useMemo()의 memoization / onClick -> onSubmit 차이 / json-server / [실습] api 연결 및 url 바꾸기(쿼리 날리기) / createContext()의 Provide와 Consumer / useContext() 52일차_23.05.18 Thr 재현님 react life cycle / custom hook [-] 클래스형 컴포넌트의 생명주기 / 함수형 업데이트 / ..

36일차_230424 Mon 최적화(2) / AJAX [-] 반응시간 > createDocumentFragment를 이용해 frag객체 만들어서 한 번에 업데이트하기, 노드.cloneNode(frag) // 메모리 > 참조카운팅, 클로저 // 좋은습관 > 불변객체처럼 다루기(새로운 배열로 만들어서 사용), strict mode 사용, 일치 연산자 (===) [-] XMLHttpRequest [+] 책집필 자료조사 회의 37일차_230425 Tue AJAX, Promise, fetch API, asyncAwait / 워니님 이력서 특강(1차 피드백) [-] promise ( resolve -> then, reject -> catch ), 1. pending (보류중인) 2. fulfilled (완수) 3...

6개월 전, ,, , 공모전에 나가기위해 맨땅에 헤딩하듯 리액트를 배우고 배운걸 써먹어 보겠다고 만들었던 todo list가 있습니다. 오늘 강의에서 DOM을 제어하는 방법에 대해 배웠기 때문에 지금까지 배운 CSS, HTML과 버무려 Vanila JavaScript로 다시 구현해보고자 해요 일단 6개월 전 결과물을 보여드리면 ... 6개월 전 리액트로 구현한 todo list 기능 - 목록 추가 - 목록 전체 개수 보여주기 - 목록 전체 지우기 - 완료한 목록 체크 - 목록 삭제 지금보니 ... - 세로로 정렬되도록 해야겠다 - 패딩과 마진 좀 ... - 버튼 디자인도 ... 이번에 만든 결과물도 먼저 보여드리면요 ! 이제부터 만든 과정 보여드릴게요 따라오시죠 1. 레포 생성 및 파일 깨알 CLI 적응..

28일차_23.04.10 Mon 스프린트 회고3 / 재현님의 DOM(1) [-] '사용자'가 있는 작고 유용한 프로그램 / 소프트웨어의 본질은 문제 해결 / 코테 공부 노하우(1. 회색지대 정복하기 2. 같은 문제 다른 방식으로 풀어보기) / 훌륭한 개발자의 역량이란 / 일단 동작하는 쓰레기 코드 만들고 이후에 리팩토링 [-] 요소 접근: document.getElementById(), document.getElementsByTagName(); document.getElementsByClassName(); / document.querySelector("selector"); document.querySelectorAll("selector"); // HTMLCollection vs. NodeList // 이..

24일차_23.04.03 Mon Number 타입 / 할당연산, 단항연산, 증감연산 / 단락회로평가 / 삼항연산자 / 드모르간법칙 / nullish연산자 / NaN / Boolean 타입 / Undefined 타입 / null 타입 [-] ... [+] 멋사동료분의 벤딩머신 자스 특강, 딥다이브 8-9장, 블로그정리, 복습 (... todo로 변질해가는 중ㅋ) 25일차_23.04.04 Tue 템플릿리터럴 / 배열 / 객체 / 함수 / sort [-] 사전식 정렬 + 브라우저별 sort 알고리즘, 같은 숫자가 존재할 때 문제, 오름차순 정렬 nums.sort((a, b) => a - b) , 실무사용코드( 에러가 나지 않는 코드 ) // [-] 배열은 mutable 문자열은 immutable(인덱스로 값을..

19일차_23.03.27 Mon (메이커준님) 스프린트 회고2 / (호준님) Sass [-] 회고조 돌아보기, 소프트 스킬, 좋은 이력서의 특징 [-] Node sass vs. Rails sass (vscode) / 메인으로 컴파일될 scss 파일 하나, 여기에 다른 언더바 scss 파일들 임포트 → stye.scss / _variables.scss , _mixin.scss , _header.scss , _main.scss , _body.scss … / extend(사용하지말자) vs. mixin / 네이스팅 = 중첩 → 최단 3단계까지만 사용 / list : 1부터 시작, 음수 가능, nth(변수명, 인덱스) / map : 키와 밸류, map-get(변수명, 키) / 산술연산자 나누기 괄호, 단위 / ..