본문 바로가기

분류 전체보기66

[TIL] 3주차 - 4. Pagination / Lifiting-State-Up 1. Pagination : 다른 페이지를 보여줘! 페이지 처리를 하는 방법은 크게 두가지가 있습니다. 무한 스크롤방식 무한 스크롤 방식은 모바일에 적합합니다. 모바일 환경에서 콘텐츠를 보여주기에 가장 직관적이고 사용하기 쉬운 형식입니다. 사용자들이 직접 끊임없이 생성하는 콘텐츠가 많은 인스타그램, 유튜브 같은 소셜미디어가 이에 해당합니다. 사이트와 앱에 적합합니다. 일반적인 방식 일반적인 방식의 페이지 처리는 페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법입니다. 사용자가 가야 할 방향이 뚜렷한, 목표지향적인 사이트와 앱에 적합합니다. 이번시간에는 일반적인 방식에 대해 알아보겠습니다. // startPage 는 항상 1 , 11 , 21 , 31 .. 식으로 // 1에서 10 씩 커지고 10 .. 2022. 1. 27.
[TIL] 3주차 - 3. Layout / Global-Style / Font 1. Layout 구조잡기 : UI의 전체적인 구조 Layout 이란? 프로젝트 전체의 UI 배치를 말합니다. 고정할 틀을 만들어 놓고 그안에 알맹이를 집어 넣는 것인데 여기서 고정할 틀은 Header, Navigation, Menu, Footer 등이고 알맹이는 Main 에 해당합니다. 배너 같이 모든 페이지에서 공통되게 사용되는 부분이 있다면 레이아웃을 통하여 모든 페이지에서 새로 만들 필요도 import할 필요도 없어서 굉장히 효율적이게 됩니다. 즉, 알맹이에 해당하는 Main만 바뀌면 됩니다. Layout을 잘 잡으면 프로젝트 전체의 유지보수가 쉬워진답니다. _app.tsx _app.tsx는 모든 페이지를 실행하기 전에 먼저 실행되는 설정 파일입니다. 이 파일이 실행될때 들어오는 컴포넌트는 에 들.. 2022. 1. 26.
[TIL] 3주차 - 2. 모달/주소 검색/state & prev 1. 경고창 모달로 변경하기 alert()를 대신 Modal을 이용해서 더 다양한 기능과 디자인으로 경고창을 만들 수 있습니다. 직접 구현할 수도 있고, ant-Design을 이용할 수도 있습니다. https://ant.design/components/modal/ ant-Desing Modal 링크 https://mui.com/components/modal/#modal material-UI Modal 링크 물론 prompt 사용할 수도 있긴 합니다. Window.prompt() : String prompt([String message], [String defaultValue]) Window.prompt()는 사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메시지를 갖고 있는 대화 상자입니다. 대화 상.. 2022. 1. 26.
[TIL] 3주차 - 1. UI 프레임워크 - (feat. 별점 / Youtube API) UI 프레임 워크 UI 디자인과 UX를 일관되게 유지 및 효율적 제작을 할 수 있게 해주는 도구들이 모인 것을 말합니다. 컴포넌트 되어 있어서 import 해서 사용하면 됩니다. "바퀴를 재발명하지 마라" 있는걸 굳이 다시 만들 필요는 없습니다. 프레임워크를 사용하는 이유는 시간 절약과 버그 최소화 때문입니다 프레임워크와 라이브러리를 선택할 때는 다운로드 수가 높은 많은 사람들에게 검증된 것에 한해서 import해서 사용하는 것이 좋습니다. 그 라이브러리가 업데이트가 안될 수도 있고 잘 실행 되는 건지 최근에 업데이트 된 것인지 오래 전이라도 다운로드 수가 매우 많아서 검증됐고 안정화 된것인지 보고 사용하는 것이 좋습니다. 이런 라이브러리 리스트를 알고 있는 것도 실력입니다. 라이브러리가 정 없다면 그 .. 2022. 1. 24.

티스토리툴바