프론트엔드3 최적화 작업(삽질) (1/2) 일단 나는 프론트엔드 성능 최적화가이드라는 책을 먼저 읽고 해당 작업을 시작했다.(필요할 때마다 반복해서 읽을 것이다)14일 동안 고민한 거 같은데 당장 성능지표는 이렇다.왼쪽이 개발환경,오른쪽이 배포환경이다. 나름 나쁘지 않은 점수라고 생각하지만 나는 끝까지 올려보고 싶어 Perfomence에 대해 2주동안 고민 했다.문제는 LCP였다.**LCP (Largest Contentful Paint)**는 화면에서 가장 큰 콘텐츠가 렌더링되는 시점을 측정하는 지표로, 2.5초 이하가 "좋음" 기준이다. 개발 환경에서는 LCP가 더 낮게 측정되었다.(코드 압축,Tree-shaking,브라우저 캐싱 등이 이유다.) 이미지가 너무 크다. 이미지가 너무 커서 화면에 그리는데 느리다는 문제다.이것을 해결 해보기 위해.. 2025. 1. 13. TodoList(Node.js) 나는 노드가 어렵다. 서버가 어려운 걸지도 모르겠다.원래라면 SQL,Node.js, React를 써서 프로젝트를 해야하는데내가 너무 얕봤다.SQLD,학은제를 하면서 하기엔 당장은 저 플젝 완성을 못할 거 같는 생각에투두리스트 먼저 해보기로 했다.(11.07부턴 코드잇 가서 배운다..!)일단 모습은 이렇고 진짜 별 거 없다. 단순 CRUD가 끝이다.입력 시 input을 초기화 하는 것과 같은 기능은 안넣었다. 파일구조는 이렇게 되어있다.server..js는 서버코드 , todo.html은 웹에 표기, 함수는 todo.js에 넣어놨다.express,cors를 사용하였는데 각각 이런 놈들이다. express - 서버 구성을 좀 더 쉽게 해주는 프레임워크cors -서버에 허용할 도메인을 지정해줘서 보안이랑 .. 2024. 11. 2. map 타입 오류(방어 코드로 해결) 굉장히 유용하게 쓰고 있는 게 있다. map을 돌리다 보면,이게 Array가 아니라 다른 내용물이 들어있을 수도 있기 때문에,map을 그냥 돌리면 오류가 뜰 수 있다. function NewPost({ club, setClub }) { // const currentClub = club.sort((a, b) => b.id - a.id); return ( {Array.isArray(club) && club.slice(0, 6).map((clubName, index) => ( Props를 내려받을 때 , club이 어떤 내용물인지 타입지정을 안해줬기 때문에 이렇게 사용했다. {Array.isArray(club) &&안에 돌릴 내용물 } .. 2024. 6. 15. 이전 1 다음
