웹 애플리케이션에서 다크 모드와 라이트 모드를 지원하는 것은 현대 사용자 경험(UX)의 필수 요소입니다. 하지만 테마 전환 시 FOUC(Flash of Unstyled Content)라고 불리는 깜빡임이 발생하면 사용자가 불편함을 느낄 수 있습니다. 이를 해결하기 위해

이미지 최적화 - LCPhttps://velog.io/@jay_chae/LCP-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94vhsxm chlwjrghk - FCPhttps://velog.io/@ja

“가장 우선해야 하는 것은 사용자의 과업의 완성을 위해 적정한 정보를 생산하고 전달하는 일이고, 오직 우리가 집중해야 할 문제는 정보를 어떻게 디자인해서 사용자와 진정한 의미의 대화를 할지이다.”: 이력서 보는 사람의 과업what you say 그다음 how you s

“UX 디자인은 사용자가 제품을 구입하기 전부터 구입해서 사용하고 폐기하는 전 과정을 포함하기 때문에 전 회사 차원에서 협력해야 달성할 수 있는 목표다”: 사용하기 전 후 과정 다 고려해야 함. 이력서 열기 전, 후 과정을 고려 → 이력서 보기 직전 화면에 메시지를 넣

“어떤 문제가 있었나요”splitView 내용만 바뀌는 데 splitView 컨테이너까지 리렌더링 된다.“문제 원인이 무엇인가요”splitView 컨테이너 열고 닫는 로직과 내용 바꾸는 로직이 같은 컴포넌트에 있다. 그래서 내용이 바뀔 때 컨테이너 까지 리렝더링“해결책

“어떤 문제가 있었나요”LCP 점수 나쁨“문제 원인이 무엇인가요”이미지가 늦게 뜬다“해결책”next Image에 priorty 속성 true 적용“왜 이런 해결책 사용했나요”priorty 적용하면 이미지를 preload 한다.공식 문서priority가 true로 설정되

“어떤 문제가 있었나요”폰트를 다운로드 하는 데 오래 걸렸다.“문제 원인이 무엇인가요”CDN으로 받아오는 데 시간이 오래 걸린다.“해결책”폰트를 다운로드하고 next/font를 사용한다. “왜 이런 해결책 사용했나요”셀프 호스팅 + next font다른 곳에 요청을 해

“어떤 문제가 있었나요”버튼을 누르면 누른 버튼 색이 바뀐다.그런데 버튼 하나를 누르면 색이 변하지 않는 모든 버튼이 리렌더링 된다.“문제 원인이 무엇인가요”버튼 컴포넌트가 전역 상태를 가지고 있기 때문에 렌더링 변화가 없어도 전역상태가 바뀌면 리렌더링이 된다.“해결책

지역 상태를 컴포넌트 간에 공유하려면 prop drilling과 리렌더링 문제가 생긴다.context:하위 트리마다 특정 값을 공유해야 할 때 사용한다.subscribe: 트리 외부에 store를 두고 그 값을 특정 컴포넌트가 가져다가 쓰는 모델지역 상태(useStat

next js로 프로젝트 할 경우middleWare 활용법로그인 안 했으면 접근 못하는 페이지의 경우 미들웨어 쓰면 좋다예를 들면 마이페이지는 로그인 하지 않으면 로그인 페이지로 리다이렉트 시켜주어야 한다.브라우저에서 리다이렉트 할 경우브라우저 -> 마이 페이지요청

결론: 복잡해지기 전에 미리 미리 디버깅 툴을 활용해서 개발하자profiler를 통해 불필용한 렌더링 줄이자 회색 좋아요, 노란색 싫어요부모 렌더링 되면 자식 다 렌더링 되니까, state는 최소 컴포넌트로 쪼개자.

전역 상태에서 필요한 값만 select해서 가져오면 렌더링을 최적화 할 수 있다.예를 들어 전역 상태가 객체 {a:1,b:2}라고 해보자.이때 컴포넌트A가 a만을 사용하고, 컴포넌트B는 b만 사용한다.만일 이 때 B가 b의 값을 바꾸었을 때, 컴포넌트 A는 리렌더링이

여러 컴포넌트에서 접근 가능해야 한다.상태를 바꾸면 이 상태를 가지고 있는 모든 컴포넌트에서 리렌더링이 일어나야 한다.상태가 객체인 경우, 예를 들어 {a:1,b:2} 경우 a만을 사용하는 컴포넌트는 b가 변경 되었을 때 렌더링이 일어나서는 안 된다.전역 상태 stor

결론: 쿠키를 다루고 싶은 경우, 프런트 서버에서 돌아가는 코드는 "next/headers"의 cookies 메소드를 사용하면 된다. 그러나 서버 컴포넌트에서 set cookies는 해줄 수는 없다. 클라이언트에서도 "next/headers"의 cookies 메소드를

프런트 개발 들어가기 전에!카카오 소셜 로그인 4단계로 가기 전에 알아야 할 기초 지식들인증인증은 "너는 누구냐?"를 묻는 단계ex) 카카오가 아는 놈인지 모르는 놈인지 확인ex) 로그인인가인가는 “너 어디까지 할 수 있어?” 묻는 단계권한을 확인하는 단계토큰토큰은 일

결론: SSR 시 서버 렌더링(트리) 된 것과 클라이언트에서 렌더링(트리) 된 것이 다르면 안 된다.(hydration 오류)이유: paint 과정이 두 번 발생해서 좋지 않다.설명:ReactDom.hydrate서버에서 받은 html을 받는다. -> 화면에 보여준다.

결론: SPA와 SSR 둘 다 알아야 함이유: SPA와 SSR 의 장단점을 섞어서 개발해야 하기 때문적용: 최초 진입은 SSR로 하고 그 이후는 내려 받은 자바스크립트로 SPA처럼 작동하게 한다.spa: 최초 접근할 때 브라우저가 필요한 자바스크입트를 모두 받는다. 이

우주윗미 프로젝트 리팩토링 했어요.상황1: 화면 크기가 모바일인지 아닌지에 따라서 조건부 렌더링이 필요.상황2: 화면 크기를 검사하는 useIsMobile 훅을 만듬.상황3: 조건부 렌더링이 필요한 컴포넌트가 여러 곳에 있다.상황4: 여러 곳에서 useIsMobile

핵심: 미디어 쿼리 조건이 현재 환경과 일치하는지 확인하는 메서드.실천: matchMedia()를 통해 미디어 쿼리를 감지하고, 화면 크기나 디스플레이 조건이 변경될 때마다 해당 이벤트를 처리하고자 할 때 사용vschange는 미디어 쿼리 조건이 변하는 순간에 반응.r

상황: husky 폴더가 .git 폴더보다 하위에 있는 폴더 구조.문제: husky와 git 파일은 동일 선상에 없으면 돌아가지 않는다.해결: package.json에 script 추가, husky 파일에 코드 추가문제 상황프로젝트 폴더 구조는 위와 같다.backend