24년 3월 7일 시점 해결하지 못한 고민 3개😢
까먹지 않게 어떤게 고민이고 어떤 시도를 해봤고 어떤 방법으로 시도를 해볼 건지 적어 놓자…!
content
Edge Case: Nested and Mixed Lists
[공지사항] Nested and mixed lists are an interesting beast. It’s a corner case to make sure that
Tag
- RSC 6
- RCC 5
- css 3
- Hydration 3
- Collaboration 3
- Tailwindcss 3
- React 3
- SSR 2
- CSR 2
- SlackAPI 2
- ESlint 2
- TanStackQeury 2
- Prefetching 2
- TS 2
- content 1
- edge case 1
- lists 1
- markup 1
- This 1
- Scss 1
- hooks 1
- Callback 1
- Promise 1
- Async/Await 1
- Generator 1
- App route 1
- Atomic Design 1
- storybook 1
- Recoil 1
- ptimization 1
- Cache 1
- Image 1
- Font 1
- Sharp 1
- State 1
- IME 1
- Design Pattern 1
- 함수형프로그래밍 1
- Prettier 1
- Husky 1
- Github 1
- Darkmode 1
- OpenAPI Generator 1
- React Design Pattern 1
- Container-Presenter 1
- Compound-Component 1
- Render-Props 1
- Suspense 1
- StreamingHTML 1
- SelectiveHydration 1
- Dehydrate 1
- PWA 1
- FireBase 1
- TanStackQuery 1
- Typescript 1
- PDF 1
- Next 1
- esBuild 1
- react 1
- CleanCode 1
- Test 1
- i18next 1
- githubAction 1
- google-spreadsheet 1
- monorepo 1
- i18 1
- aws 1
- docker 1
- RN 1
- Electron 1
RSC
‘Next App router에서 RSC와 RCC가 어떤 방식으로 렌더링 되는거지?’ 를 알기 위해 RSC란 무엇인가?
React Server Component(RSC)란 무엇인가?
PWA + FCM으로 web push notification 구현하기1
어디서 FireBase를 초기화 할것인가?
TQ hydration prefetching을 선언적으로 사용할 수는 없나?? - 미해결..😢
TQ hydration prefetching을 선언적으로 사용할 수는 없나??
SSR 쓰잖아? 그럼 데이터도 SSR 해야지 (prefetching, hydration, dehydrate)
App router에서 TQ로 Prefetching하기
Next.js v13의 RSC 와 RCC비교
어케했누??
RCC
‘Next App router에서 RSC와 RCC가 어떤 방식으로 렌더링 되는거지?’ 를 알기 위해 RSC란 무엇인가?
React Server Component(RSC)란 무엇인가?
PWA + FCM으로 web push notification 구현하기1
어디서 FireBase를 초기화 할것인가?
TQ hydration prefetching을 선언적으로 사용할 수는 없나?? - 미해결..😢
TQ hydration prefetching을 선언적으로 사용할 수는 없나??
SSR 쓰잖아? 그럼 데이터도 SSR 해야지 (prefetching, hydration, dehydrate)
App router에서 TQ로 Prefetching하기
Next.js v13의 RSC 와 RCC비교
어케했누??
css
TextArea내에서 줄바꿈 처리가 안돼!(white-space)
\n이 들어가지는데 content를 띄울 때는 줄바꿈이 적용이 안된다!
Fixed 부모 값에 따라 변경하기! ⭐️
부모 값을 받아오기 위해 useParentWidth 를 만들어서 사용해봤음
Edge Case: Nested and Mixed Lists
[공지사항] Nested and mixed lists are an interesting beast. It’s a corner case to make sure that
Hydration
TQ hydration prefetching을 선언적으로 사용할 수는 없나?? - 미해결..😢
TQ hydration prefetching을 선언적으로 사용할 수는 없나??
SSR 쓰잖아? 그럼 데이터도 SSR 해야지 (prefetching, hydration, dehydrate)
App router에서 TQ로 Prefetching하기
SSR 과 CSR 차이 요약 (+hydration)
SSR VS CSR
Collaboration
귀찮은건 딱-질색1(Issue, PR 템플릿으로 자동화하기!)
자동화자동화자동화자동화
순수악이 되지말자2!(husky로 pre-commit, commit-msg setting)
협업에서의 순수악을 피하는 방법
순수악이 되지말자!(eslint + prettier setting)
순수악이 되지말자!
Tailwindcss
귀찮은건 딱-질색4(스크롤 가려줘 custom plugin!)
스크롤 기능은 필요한데 스크롤바는 보기싫어
귀찮은건 딱-질색3(디자인은 px로 개발은 rem으로)
디자인은 px인데 우리는 rem을 쓰고싶어
귀찮은건 딱-질색2(다크모드 변경 자동화)
다크모드도 일일이 dark 넣기 귀찮아
React
React 웹사이트 보안
25.02.03 [모던 리액트 Deep Dive] 14장 - 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈
React v17, 18의 변경사항
12.03 [모던 리액트 Deep Dive] 10장 - 리액트 17과 18의 변경 사항 살펴보기
React 상태관리
24/09/30 - 이든/React Deep Dive 5,6장
SSR
‘Next App router에서 RSC와 RCC가 어떤 방식으로 렌더링 되는거지?’ 를 알기 위해 RSC란 무엇인가?
React Server Component(RSC)란 무엇인가?
SSR 과 CSR 차이 요약 (+hydration)
SSR VS CSR
CSR
‘Next App router에서 RSC와 RCC가 어떤 방식으로 렌더링 되는거지?’ 를 알기 위해 RSC란 무엇인가?
React Server Component(RSC)란 무엇인가?
SSR 과 CSR 차이 요약 (+hydration)
SSR VS CSR
SlackAPI
vercel 배포에서 마주친 CORS 에러… ⭐️⭐️⭐️
이슈가 끝이 없다…
슬랙봇으로 메시지 보내기!!! ⭐️⭐️⭐️
처음에는 슬랙의 bots를 이용해서 하려고했지만
ESlint
순수악이 되지말자2!(husky로 pre-commit, commit-msg setting)
협업에서의 순수악을 피하는 방법
순수악이 되지말자!(eslint + prettier setting)
순수악이 되지말자!
TanStackQeury
TQ hydration prefetching을 선언적으로 사용할 수는 없나?? - 미해결..😢
TQ hydration prefetching을 선언적으로 사용할 수는 없나??
SSR 쓰잖아? 그럼 데이터도 SSR 해야지 (prefetching, hydration, dehydrate)
App router에서 TQ로 Prefetching하기
Prefetching
TQ hydration prefetching을 선언적으로 사용할 수는 없나?? - 미해결..😢
TQ hydration prefetching을 선언적으로 사용할 수는 없나??
SSR 쓰잖아? 그럼 데이터도 SSR 해야지 (prefetching, hydration, dehydrate)
App router에서 TQ로 Prefetching하기
TS
React 상태관리
24/09/30 - 이든/React Deep Dive 5,6장
FE test + TS 정리
24/08/12 - 이든/ FE test + TS
edge case
Edge Case: Nested and Mixed Lists
[공지사항] Nested and mixed lists are an interesting beast. It’s a corner case to make sure that
lists
Edge Case: Nested and Mixed Lists
[공지사항] Nested and mixed lists are an interesting beast. It’s a corner case to make sure that
markup
Edge Case: Nested and Mixed Lists
[공지사항] Nested and mixed lists are an interesting beast. It’s a corner case to make sure that
This
이게(this)뭐야?!
데브코스에서 발표를 하게되었다..!
Scss
수많은 SCSS의 기능들
수많은 SCSS의 기능들
hooks
Custom Hooks는 언제 어떻게 만들어야 할까?
커스텀 훅 특징
Callback
맨 위로 이동 ↑Promise
맨 위로 이동 ↑Async/Await
맨 위로 이동 ↑Generator
맨 위로 이동 ↑App route
Next.js v13의 RSC 와 RCC비교
어케했누??
Atomic Design
디렉토리는 어떻게 짤까? (아토믹 디자인 패턴)
다시쓰는 아토믹 디자인 패턴
storybook
당근의 디자인 시스템 어케했지?!(+ storybook)
아토믹 디자인 패턴에 관심을 갖던 중 아토믹 디자인 패턴을 십분 잘 활용하기 위해서는 디자인 시스템이 선행되어야 된다는 생각을 하게되었다.
Recoil
Recoil은 왜 써야 할까?
Q. Recoil은 왜 만들어졌을까?
ptimization
Next에서 image, font 최적화 어케했누??
💡 아래 내용은 1인 2역 자문자답으로 작성하였습니다.
Cache
Next에서 image, font 최적화 어케했누??
💡 아래 내용은 1인 2역 자문자답으로 작성하였습니다.
Image
Next에서 image, font 최적화 어케했누??
💡 아래 내용은 1인 2역 자문자답으로 작성하였습니다.
Font
Next에서 image, font 최적화 어케했누??
💡 아래 내용은 1인 2역 자문자답으로 작성하였습니다.
State
React스럽게 state 관리하기
React스럽게 state 관리하기
IME
input에 한국어 입력 시 두 번 눌리는 에러 ⭐️⭐️
멘션 input에 이름을 입력 후
Design Pattern
모든 걸 해주는 EditorTextArea 컴포넌트를 만들고 싶었어.. ⭐️⭐️⭐️⭐️
현재 EditorTextArea 컴포넌트는 크게 3가지 역할을 한다.
함수형프로그래밍
나는 왜 함수형 프로그래밍이 궁금할까?
나는 왜 함수형 프로그래밍이 궁금할까?
Prettier
순수악이 되지말자!(eslint + prettier setting)
순수악이 되지말자!
Husky
순수악이 되지말자2!(husky로 pre-commit, commit-msg setting)
협업에서의 순수악을 피하는 방법
Github
귀찮은건 딱-질색1(Issue, PR 템플릿으로 자동화하기!)
자동화자동화자동화자동화
Darkmode
귀찮은건 딱-질색2(다크모드 변경 자동화)
다크모드도 일일이 dark 넣기 귀찮아
OpenAPI Generator
BE와 FE의 API 동기화!(OpenAPI Generator) → 적용 안하기로..😥
OpenAPI Generator
React Design Pattern
리액트 디자인 패턴을 이용한 재사용성, 유지보수 향상!
EditorTextArea 씹뜯맛즐
Container-Presenter
리액트 디자인 패턴을 이용한 재사용성, 유지보수 향상!
EditorTextArea 씹뜯맛즐
Compound-Component
리액트 디자인 패턴을 이용한 재사용성, 유지보수 향상!
EditorTextArea 씹뜯맛즐
Render-Props
리액트 디자인 패턴을 이용한 재사용성, 유지보수 향상!
EditorTextArea 씹뜯맛즐
Suspense
Next app router에서 loading을 처리 하는 방식! (이라고 쓰고 Suspense라고 읽는다.)
Next에서 loading에 해당하는 UI 구성방법
StreamingHTML
Next app router에서 loading을 처리 하는 방식! (이라고 쓰고 Suspense라고 읽는다.)
Next에서 loading에 해당하는 UI 구성방법
SelectiveHydration
Next app router에서 loading을 처리 하는 방식! (이라고 쓰고 Suspense라고 읽는다.)
Next에서 loading에 해당하는 UI 구성방법
Dehydrate
SSR 쓰잖아? 그럼 데이터도 SSR 해야지 (prefetching, hydration, dehydrate)
App router에서 TQ로 Prefetching하기
PWA
PWA + FCM으로 web push notification 구현하기1
어디서 FireBase를 초기화 할것인가?
FireBase
PWA + FCM으로 web push notification 구현하기1
어디서 FireBase를 초기화 할것인가?
TanStackQuery
24년 3월 7일 시점 해결하지 못한 고민 3개😢
까먹지 않게 어떤게 고민이고 어떤 시도를 해봤고 어떤 방법으로 시도를 해볼 건지 적어 놓자…!
Typescript
24년 3월 7일 시점 해결하지 못한 고민 3개😢
까먹지 않게 어떤게 고민이고 어떤 시도를 해봤고 어떤 방법으로 시도를 해볼 건지 적어 놓자…!
PDF…삽질의 기록…
05/20 발표 - 이든/삽질의 기록…
Next
PDF…삽질의 기록…
05/20 발표 - 이든/삽질의 기록…
esBuild
KHCDS 성공 기원 1일차
24/06/17 - 이든/ KHCDS 성공 기원 1일차
react
KHCDS 성공 기원 1일차
24/07/15 - 이든/ 켄트 벡의 tidy first? + 리액트 컴파일러 이해하기
CleanCode
KHCDS 성공 기원 1일차
24/07/15 - 이든/ 켄트 벡의 tidy first? + 리액트 컴파일러 이해하기
Test
FE test + TS 정리
24/08/12 - 이든/ FE test + TS
i18next
우리가 다국어 처리가 있었어..?(번역 자동화)
우리가 다국어 처리가 있었어..?(번역 자동화)
githubAction
우리가 다국어 처리가 있었어..?(번역 자동화)
우리가 다국어 처리가 있었어..?(번역 자동화)
google-spreadsheet
우리가 다국어 처리가 있었어..?(번역 자동화)
우리가 다국어 처리가 있었어..?(번역 자동화)
monorepo
블로그 이전하기로 결정!!
요즘 회사에서 필요한 개발공부 외에 하고싶은 것들이 생겼음
i18
블로그 이전하기로 결정!!
요즘 회사에서 필요한 개발공부 외에 하고싶은 것들이 생겼음
aws
블로그 이전하기로 결정!!
요즘 회사에서 필요한 개발공부 외에 하고싶은 것들이 생겼음
docker
블로그 이전하기로 결정!!
요즘 회사에서 필요한 개발공부 외에 하고싶은 것들이 생겼음
RN
블로그 이전하기로 결정!!
요즘 회사에서 필요한 개발공부 외에 하고싶은 것들이 생겼음
Electron
블로그 이전하기로 결정!!
요즘 회사에서 필요한 개발공부 외에 하고싶은 것들이 생겼음