all is well!!

react에서 쓰던 img 태그를 버릇처럼 넣었더니 노란줄이 쳐지면서 이런 경고문이 나왔다. 태그를 쓰면 LCP(페이지의 메인 콘텐츠가 로드되었을 가능성이 있을 때 페이지 로드 타임라인에 해당 시점을 표시하므로 사용자가 감지하는 로드 속도를 측정할 수 있는 중요한 사용자 중심 메트릭)가 느려지고 대역폭이 높아질 수 있어서 next.js에서 이미지 최적화를 활용하려면 next/image 에서 태그를 사용하라는 내용이었다. ? - html의 를 기반으로 성능을 최적화시킨 next의 built-in 컴포넌트 태그 장점 1. improved performance : modern image formats을 사용해 항상 올바른 크기의 이미지 제공 2. Viswual Stability : 누적 레이아웃 이동 방지 3..

👀 1차 전체적인 목표 🟣 Main 카드 - 작성 날짜(4일전 ,6일 전…), 댓글 수, 카드 호버시 애니메이션 🟣 detail 좋아요 작성자 모든 포스트 목록 보기 댓글쓰기 🟣 write 작성글 실시간 미리보기 뒤로가기 임시저장 기능 Input 저장 기능 ⚽️ Daily Goal 1. degail page header 작업 2. defail page router 3. detail page velog 확인 후 url 생각해보기 4. detail figma로 component 짜보기

👀 구조 분해 할당 - 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 * 배열 구조 분해 - 기본 할당 var foo = ["one", "two", "three"]; var [red, yellow, green] = foo; console.log(red); // "one" console.log(yellow); // "two" console.log(green); // "three" * 객체 구조 분해 - 기본 할당 var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true * 새로운 변수 이름으로 할당 : (key쪽에 기존 변수 이름 : value쪽에 원하는..

👀 1차 전체적인 목표 🟣 Main 카드 - 작성 날짜(4일전 ,6일 전…), 댓글 수, 카드 호버시 애니메이션 🟣 detail 좋아요 작성자 모든 포스트 목록 보기 댓글쓰기 🟣 write 작성글 실시간 미리보기 뒤로가기 임시저장 기능 Input 저장 기능 ⚽️ Daily Goal 1. 이번 card hover css 이슈적어서 pr 올리기 2. 카드 이미지 데이터타입 알아와서 any를 교체 3. Card.tsx에서 타입설정 - 1단계 item이라는 props any를 타입설정 교체하기 - 2단계 dummydata.tsx에서 타입을 정의한것과 동일하니 import해서 타입을 정해보기 (힌트:export defalut를 다른곳으로 바꿔야한다.) 4. redux setting, 파일생성, 코드작성 5. re..

👀 1차 전체적인 목표 🟣 Main 카드 - 작성 날짜(4일전 ,6일 전…), 댓글 수, 카드 호버시 애니메이션 🟣 detail 좋아요 작성자 모든 포스트 목록 보기 댓글쓰기 🟣 write 작성글 실시간 미리보기 뒤로가기 임시저장 기능 Input 저장 기능 ⚽️ Daily Goal 1. 이슈 내용 디테일 수정 2. Svg 만드는 이슈 만들고 작업하기 => 아이콘같은 백터형식이 아닌 jpg이미지들은 img로 들어가야됨. 3. 지금 한것에 대한 이슈 만들고 pr까지 하기 4. card hover시 나타나는 애니메이션 작업