3월 6일
tanstack query의 상태, 정아현
[FE테크톡] TenStack Query (tistory.com)
[FE테크톡] TenStack Query
TanStack Query makes fetching, caching, synchronizing and updating server state. new QueryClient로 인스턴스를 생성하고 QueryClientProvider를 통해 전역에서 생성한 QueryClient에 접근 가능하도록 만든다. QueryClient 내에는 Que
a-honey.tistory.com
좋은 상태 관리란 무엇인가, 한우준
좋은 프로젝트 구조, 서건혁
PWA 개요, 송민석
3월 13일
npm, yarn, pnpm의 차이, 정아현
프론트엔드 성능 최적화, 한우준
타입스크립트의 any, unknown, 서건혁
타입스크립트의 any, unknown (velog.io)
타입스크립트의 any, unknown
시바 아무도 any를 막을 수 없으셈 ㅋㅋ
velog.io
Vite, 송민석
4월 3일 => FE닌자단 명칭 변경, 수정 합류
개발자도구의 성능탭, 정아현
https://a-honey.tistory.com/42
[FE닌자] 크롬 개발자 도구 - Performance
web-vitals 라이브러리와 구글 라이트하우스로 지표를 통해서 웹 성능을 측정할 수 있다고 하지만, 애초에 성능을 어떻게 따져야하는지도 알지 못하는 상태에서 지표를 알아보려니까 와닿지가 않
a-honey.tistory.com
쿠키로 XSS와 CSRF에서 살아남기, 서건혁
https://infrequent-weight-aa2.notion.site/XSS-CSRF-7a515d9c459c415d864072dd3cc71518?pvs=4
쿠키로 XSS와 CSRF에서 살아남기 | Notion
보안 허접의 끝판왕 쿠키로 보안 공격에 어느정도 대처해보려 노력한 고찰.
infrequent-weight-aa2.notion.site
HTML5 Canvas, 송민석
https://www.notion.so/HTML5-Canvas-4eb14736e9314ccebc8f7717af215dec?pvs=4
HTML5 Canvas | Notion
HTML5 Canvas
half-playground-acb.notion.site
Interaction to Next Paint 최적화, 곽수정
https://velog.io/@kwaksj329/INP
[Web Vitals] Interaction to Next Paint (INP) 최적화
INP와 친해지는 시간
velog.io
컴포넌트 분리와 Headless, 한우준
https://beautiful-diploma-aa8.notion.site/4-2-d0f07c15f6bd47dd92bbf30ce058c246?pvs=4
4/2 | Notion
컴포넌트 분리의 기준?
beautiful-diploma-aa8.notion.site
4월 9일
마이크로 프론트엔드, 한우준
https://beautiful-diploma-aa8.notion.site/4-9-9585d27240e940dabfc6cbba864e13eb?pvs=4
4/9 | Notion
MSA란?
beautiful-diploma-aa8.notion.site
useEffect를 사용해야 하는가 말아야 하는가, 서건혁
https://infrequent-weight-aa2.notion.site/useEffect-VS-f9703b8ef2574294ae083bb555a5ec41?pvs=4
useEffect. 써야 한다 VS 쓰면 안된다. | Notion
개요
infrequent-weight-aa2.notion.site
폰트 최적화, 정아현
https://a-honey.tistory.com/43
[이모티어리] 폰트 최적화
가끔씩 폰트가 뒤늦게 적용되는 적이 꽤나 많았는데, 다른거 먼저 하느라 내 인터넷이 느린거라고 못본척하면서 지나갔다. 그러면서 맨날 신경쓰였는데 리팩토링하다보니 이유가 궁금해져서
a-honey.tistory.com
계층적 부분 상태 관리, 송민석
https://www.notion.so/8b0962751c164ae4885dad27c1aa1b07?pvs=4
계층적 전역 상태 관리 | Notion
계층적 전역 상태 관리
half-playground-acb.notion.site
Next.js에서 View Transitions API 적용해보기, 곽수정
https://velog.io/@kwaksj329/View-Transitions-API
Next.js에서 View Transitions API 적용해보기
왜 이제서야 나온거니~!~!~!
velog.io
5월 8일
Micro Frontend 2 - Module Federation, 한우준
https://beautiful-diploma-aa8.notion.site/5-8-b13acd522cf54ed5a3c10ebe0dd96203?pvs=4
5/8 | Notion
Module Federation
beautiful-diploma-aa8.notion.site
Event Loop와 requestAnimationFrame, 곽수정
https://velog.io/@kwaksj329/JS-Microtask-Queue-rAF
[JS] Microtask Queue..? rAF..? 🤔
먼저 rAF에 대해 알아보기 전에 Event Loop, Task Queue, Micro Task Queue 에 대해 알아보자. 🪡 자바스크립트는 싱글 스레드 기반 & 비동기로 동작? 자바스크립트는 싱글 스레드! 자바스크립트는 싱글 스레
velog.io
컴파운드 컴포넌트 패턴, 정아현
https://a-honey.tistory.com/46
https://a-honey.tistory.com/47
[이약저약] 컴파운드 컴포넌트 패턴으로 모달 만들기
컴파운드 컴포넌트 패턴으로 컴포넌트를 만들면서, 가장 큰 강점인 확장성과 재사용성을 가져가기 위해서 여러 케이스를 인지한 상태에서 컴포넌트를 구성해야한다는 점을 이해했다. 사실 이
a-honey.tistory.com
[이약저약] 컴파운드 컴포넌트 패턴 알아보기
아토믹 패턴으로 프로젝트 구조를 설정했을 때, atom과 mocule에서 가져오면서 계속해서 이 organism이나 template이 굳이 src/components 아래에서 관리해야하는지에 대해 끊임없는 의문이 들었다. 막상 페
a-honey.tistory.com
Infinite Scrolling, 송민석
https://half-playground-acb.notion.site/Infinite-Scrolling-979ae7c031f84290a0fc3079b0fa44c8?pvs=4
Infinite Scrolling | Notion
주제 선정 이유
half-playground-acb.notion.site
5월 22일
Promise, 한우준
https://beautiful-diploma-aa8.notion.site/5-22-3da490c12c4443d7b69a02bb1e2936f2?pvs=4
5/22 | Notion
Promise
beautiful-diploma-aa8.notion.site
리액트 훅 시스템의 동작 과정과 useRef, 정아현
https://a-honey.tistory.com/55
[FE닌자] useRef에서 renderWithHooks까지
react-hook-form을 사용해보면서 ref, forwardRef를 계속해서 만나다보니, useRef가 어떤 역할을 하게 되는건지 궁금했다. 그런데 생각보다 Hook의 전체적인 관점에서 이해해야 했다. 사실 그냥 즉흥적으로
a-honey.tistory.com
useFunnel 커스텀 훅, 곽수정
https://velog.io/@kwaksj329/Toss-Slash-useFunnel-%EB%9C%AF%EC%96%B4%EB%B3%B4%EA%B8%B0-1
https://velog.io/@kwaksj329/Toss-Slash-useFunnel-%EB%9C%AF%EC%96%B4%EB%B3%B4%EA%B8%B0-2
https://velog.io/@kwaksj329/useSteps
REINPUT에서 useFunnel 적용하기
아직 수정 중인 게시물 입니다..⚙️
velog.io
6월 5일
web push notification, 한우준
Web push notification | Notion
React Native를 다룰 줄 몰라 사용하게 된 PWA.
beautiful-diploma-aa8.notion.site
클로저와 불변성으로 리액트 상태관리 이해하기, 정아현
https://a-honey.tistory.com/64
리액트는 클로저와 불변성으로 상태관리한다
마지막날에 자바스크립트의 타입으로 시작해서 상태관리 임시 로직으로 끝나는 강의안을 PDF로 주시고 떠나신 코치님..광주 내려가는 길에 버스에서 간단하게 정리하려고 했는데, 생각보다 클
a-honey.tistory.com
배우고 싶지 않았던 Next.js - 1, 서건혁
배우고 싶지 않았던 Next.JS-1 | Notion
나는 리액트 바라기였다.
infrequent-weight-aa2.notion.site