프로젝트 썸네일형 리스트형 NEXT.js Lighthouse 점수 높이기와 Sharp Lighthouse 란? 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 자동화 도구이다! 어떤 웹 페이지든 (그것이 공개되었든, 인증이 필요하든) 사용할 수 있다고 한다. 왜 Lighthouse를 썼나 배포에 Vercel을 사용한 나는 Vercel 에서 재공하는 Speed Insights 가 있지만 Lighthouse를 썼는데 그 이유는 Vercel은 RUM(Real User Monitoring) 방식이기 때문이다. 이 방식은 서비스가 제공되는 중 실제 유저의 활동기록을 기반으로 성능 측정해서 사용자 환경에 따라 점수가 달라 질 수 있다. 그래서 난 Lighthouse 를 사용했다. Lighthouse 검사 프로젝트를 배포 후 크롬에서 Lighthouse를 해보니 아래와 같은 점수가 나왔다. 여기.. 더보기 솔로 프로젝트 회고! NEXT.js를 이용한 프로젝트가 5일전에 끝이났다. 프론트는 React 와 비슷해 편했고 HTML,CSS를 한 시간은 8시간이 넘지 않았다. 공부한 것을 활용하는 재미가 있었다. 조금 더 규모가 큰 프로젝트를 하고 기능이 많은 프로젝트를 새로 하고싶지만 우선은 취업부터! 배포는 Vercel 을 이용했다. 아쉬웠던 점 1. 시간이 없다고 생각해 작은 프로젝트를 진행한것. 마음이 바빠 규모가 작은 프로젝트를 진행했다. 기본적인 CURD와 서버기능만 넣었더니 섭섭한 느낌이다. 빨리 취업해 몰입하는 삶을 살고싶다! API 연결해서 날씨라도 넣을까.. 2. 디자인 패턴에 대해 깊게 생각하지 않고 개발을 시작했던 것 팩토리 메소드 페턴에 공부하고 먼저 계획을 세워 개발을 시작했다면 더 완성도 있었을것 같다. 3... 더보기 Next.js 에서 Redux 쓰기,, 호기롭게 시작한지 얼마 지나지 않아 난 큰 벽을 만났다. next.js는 최근 13 버전을 출시하며 App directory 을 사용하게 되었다는 것이었다! 이게 왜 벽이었냐! 거의 모든 블로그나 유튜브 강의 등 은 13버전을 사용하지 않아 모두 App directory쓰지 않았다는 것 때문이다. 이전 React에서 redux를 사용할때와는 다른 환경인 것이다! 그래서 버전을 낮출까 생각도 했지만 지금 상황에서 쓰는법을 알고 싶었다. 그리고 난 할 수 있을거란 근거없는 자신감이 차있었기 때문에 먼 길을 떠나게 되었다. (진짜 짱 멀었다) 어떻게 하는거죠,,? 열심히 검색을 해봐도 App directory 를 쓰는 자료는 찾기 어려웠고 공식문서에도 자세히 나오지 않았다. (내가 못찾은 것일지도,,) 그래서.. 더보기 Next.js 에서는 Redux Wrapper를 사용해야 합니다. HTML, CSS 가 끝나고 신나게 Mongodb 세팅을 마치고 POST와 GET 등 메서드를 실험해 보고 있었는데 나는 드릴링을 좋아하지 않기에 아 맞다 Redux! 라는 생각이 들었다. 기존에 사용하던 Redux-toolkit을 사용하려 했지만 React와는 달리 Next는 SSR이니 그냥 Redux-toolkit을 사용하면 안 될 것 같다는 생각이 들었고 검색을 해봤다. Redux Wrapper Redux-wrapper은 Next 개발환경에서 쓰면 좋다고 했다. 그 이유는 next-redux-wrapper 깃헙 페이지에 있는데 여기를 살펴보면 Next.js 정적 사이트 생성기 또는 서버 측 렌더링이 관련된 경우 Redux 연결 구성 요소를 렌더링 하기 위해 서버에 다른 저장소 인스턴스가 필요하므로 .. 더보기 HTML과 CSS 완 드디어 다 만들었다! 최근 1주일동안 개인적으로 일어난 일들이 많아서 예상보다 3일이나 늦어졌다! (빨리 취업하고 싶은 이유중 하나) 하지만 앞으로가 중요하니 열심히 임하자! 작업 방식은 전과 같이 구조를 먼저 짜고 css를 입혔다. 하다보니 아래 이미지의 사이드바를 컴포넌트로 빼지 않았어서 구조를 바꿨어야 했는데 확실히 수월했다! (역시 사람은 배워야해,,) 앞으로 기능 넣을것이 너무 기대된다! 히히 더보기 HTML로 구조를 만들고 CSS로 옷을 입히자! HTML로 먼저 구조를 짜고 CSS로 옷을 입혔다! 처음에는 디자인을 보면서 구조를 짰다. 그 후 className과 id를 넣고 display 나 flex-direction 속성을 넣으며 디자인에 맞는 위치에 글이나 박스를 배치했고 배경색과 폰트사이즈, 마진 값을 줬다! 이런식으로 하니 나중에 css를 수정할때 속성이 꼬이지 않아 수월했고 무엇보다 더 재밌었다. 그 후 완성됐다! 이 페이지의 소요시간은 약 1시간 30분? 정도나 걸렸다! (화장실 가는 시간 빼면 더 줄지도,,) 저기 은행 마크 아래 최고연 이라는 글씨나 상세한 CSS 조정에 시간이 소요됐다. 더보기 프로젝트 디자인을 HTML과 CSS로 이틀간 하루에 3페이지씩 만들었다. 이제 4~5 페이지만 만들면 HTML은 끝이다! 처음 홈 화면 만들때보다 나중 갈수록 속도가 더 빨라지는게 느껴져 기분이 좋다. 더보기 Figma로 디자인 하기! 화면 디자인을 Figma를 활용해서 만들었다! 피그마 구경 주소 https://www.figma.com/file/OlOR8cfXc8RhmB9sfbaDPr/%EC%A0%81%EA%B8%88%EC%A0%80%EA%B8%88?type=design&node-id=0%3A1&t=mXCOCiT2oDW6wCDg-1 페이지 이동을 구현했고 여러기능들을 넣고 뽐내고 싶었지만 화면 구성상 넣지 못한것이 아쉽다. 디자인 설명을하자면 3가지 색으로 최대한 심플하게 풀었다! 이런식으로 디자인했다! 더보기 이전 1 2 3 다음
