DevYoon

프로젝트를 진행하면서 메인페이지의 로딩이 너무 느리다는 단점을 발견했다. Next/image 태그를 사용해 이미지 최적화를 하고 있다고 생각했는데, 추가적인 작업이 필요하다고 생각했다. 따라서 다음과 같은 2가지를 처리해보았다. 1️⃣ 이미지 리사이징 - 우리 페이지에는 2개의 실사 이미지가 들어가는데, (나머지는 아이콘) 두 이미지가 유독 더 느리게 렌더링 되었다. - 사이즈를 확인해보았는데, 역시나! 각각 가로가 5000px, 3500px 이상이었다. - 사이트 환경 내에서 깨지지 않는 선 (2000~ 3000px 사이)에서 이미지 크기를 줄여주었다. 그러나 그럼에도 여전히 렌더링 속도는 내가 느끼기에 느렸다🥲 스크롤 이벤트도 걸어놓은 터라, 사이트 메인에 접속해서 스크롤을 내릴 때 이미지가 바로바로..

💾 Recoil 1️⃣ Recoil이란? React의 hooks와 어울리면서, React에 필요한 것들만 React스럽게 제작한 상태관리 라이브러리 기존의 Redux나 Mobx와 같은 상태 관리 라이브러리들은 React 라이브러리가 아님 store는 외부요인으로 취급되므로, React의 내부 스케줄러에 접근할 수 없음 동시성 모드의 등장으로 위 사실이 중요해짐 동시성 모드 ❓ 프로그램을 독립적으로 실행할 수 있는 조각으로 나누어 구조화 ➡️ 단일 스레드 사용의 한계를 깨고 애플리케이션을 보다 효율적으로 만듦 참고 🔗 https://medium.com/swlh/what-is-react-concurrent-mode-46989b5f15da 기본적인 store 구성을 위해 많은 보일러 플레이트와 장황한 코드를 ..

♾ 무한 스크롤(Infinite Scroll) 사용자가 페이지 하단에 도달했을 때 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식 👍 장점 다음 콘텐츠를 보기 위한 추가 클릭이 필요하지 않고 페이지 로드 시간이 짧음 ➡ 클릭하는 것보다 더 나은 사용자 경험을 제공 터치 스크린(모바일)일 때 더 유용하게 적용 화면이 작을 수록 스크린이 길어짐 ➡ 모바일 환경에서 콘텐츠를 보여주기 직관적이고 사용하기 쉬움 사용자 참여 및 콘텐츠 탐색이 쉬움 👎 단점 페이지 성능이 느려짐 특정 항목 검색 및 원래 위치로 되돌아오기 힘듦 스크롤 막대가 실제 데이터양을 반영하지 못함 Footer를 찾기 어려움 ✏ 참고 https://velog.io/@eunoia/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC..

🎨 Sass Syntactically Awesome Style Sheets CSS 파일로 변환되는 스타일 시트 언어 😑 CSS는... 프로젝트 규모가 커질수록 중첩된 스타일 구조와 빈번한 수정 때문에 유지보수가 어려워짐 ➡️ Sass는 변수, 중첩 규칙, Mixin, 함수 등 사용하여 CSS를 구조화하여 표현하거나 스타일 요소를 재사용할 수 있음 ❔ SCSS Sass 3.0 이상부터 사용 가능한 표기법으로, CSS 구문과 호환됨 기존 문법 .nav-list display:flex list-style:none li margin-right: 10pxSCSS 문법 .nav-list{ display:flex; list-style:none; li{ margin-right:10px; } }➡️ 블록({})과 세미콜..

Next.js로 개발하던 중 다음과 같은 오류를 만났다. document가 not defined라니...?! 너무 의아해서 검색해본 결과, Next.js를 사용하기 때문에 만난 에러였다. Next.js는 서버 측에서 렌더링 된 후 클라이언트로 전송되는 SSR 구조이므로, 클라이언트에서만 정의된 전역변수(window나 document)를 사용하려면 렌더링 후 사용해야 했다. 이 오류를 해결하기 위해서는 3가지 방법이 있다. 1️⃣ document의 type 확인하기 - 해당 오류는 서버 측에서 렌더링 될 때, document의 type이 undefined로 나오기 때문에 발생한다. - 따라서, document의 type이 undefined가 아닐 때 실행하게 한다. if(typeof document !==..

하단 메뉴바를 구현하는 과정에서 가운데 정렬이 되지 않는 문제가 발생했다. 개발자도구로 확인해보니 메뉴바가 왼쪽에 쏠려있는 것을 볼 수 있었다. position: fixed; bottom:0; left:0; right:0; left와 right를 0으로 설정해두어 해결!

mui의 BottomNavigation을 사용하는 과정에서 Link 삽입에 난항을 겪었다. 1️⃣ Link 태그로 감싸기? Next에 있는 next/link를 사용해서 Link 태그로 BottomNavigationAction을 감싸주었다. BottomNavigationAction에 설정한 label 등이 나타나지 않았다. 반대로 BottomNavigationAction으로 Link 태그를 감싸니 제대로 작동하지 않았다. 2️⃣ href 설정? 단순하게 가볼까 싶어 BottomNavigationAction에 href 설정을 줘봤으나 역시 생각한 방향대로 되지 않았다. 3️⃣ next/router 사용 참고글 : https://github.com/mui/material-ui/issues/22001 단비같은 ..

CORS SOP(Same-Origin Policy) 1️⃣ SOP란? 동일 출처 정책 특정 출처(origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 보안 방식 잠재적으로 해로울 수 있는 문서를 분리 ➡️ 공격받을 수 있는 경로 줄임 2️⃣ Origin(출처) 두 URL의 Protocol, Port, Host가 모두 같아야 동일한 출처 *️⃣ http://localhost:3000/posts/3 Scheme / Protocol Host Port Path http localhost: 3000 posts/3 CORS 1️⃣ Cross-Origin Resource Sharing 교차 출처 리소스(자원) 공유 추가 HTTP Header를 사용 ➡️ 특정 출처에서 실..

1️⃣ HOME : 영화 목록 조회 페이지 TMDB API에 popular로 요청 보내서 상위 40개의 영화를 보여준다. 🎞️ Vue LifeCycle Hook mounted를 활용해 따로 어떤 버튼을 클릭하지 않아도 요청 후 영화 목록 데이터를 가져와 화면에 보여주었다. 🎞️ API에서 받아온 데이터 안에 id값이 있길래, for문의 key로 사용했다. 2️⃣ Random : 영화 추천 페이지 과제는 랜덤으로 영화를 하나 뽑아서 보여주는 거였는데, 좀 더 실존하는 서비스 느낌을 내보고 싶어서 문구를 추가해봤다. 오늘 뭐 보지? 버튼을 클릭하면 🔽 이렇게 변한다. 뭘 봐야 할지 모르겠다면, 저희가 대신 골라드릴게요! 오늘 뭐 보지? 오늘은 {{pick.title}} 어때요? {{pick.overview}..

깔끔하고 귀여운 아이콘이 많아 가끔 썼던 Font Awesome 💫 Vue에서도 사용하고 싶은데 방법을 몰라서 한 번 찾아봤다. 1️⃣ Step 01 Font Awesome에 접속해 CDN 코드를 복사한다. https://fontawesome.com/account/cdn Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 2️⃣ Step 02 복사한 CDN을 Vue ➡️ main.js의 head 안에 넣어준다. 3️⃣ Step 03 마음에 드는 아이콘을 골라 코드를 복사한 후, 넣고 싶은 곳에 넣어주면 끝!