리액트 공부와 함께 하는 일상/3주차6 [TIL] 3주차 - 6. husky 설치 및 셋팅 Husky husky란 소스코드를 git에 commit 하기 전에, 기존의 규칙(typescript, eslint, prettier 등)을 지켜가면서 코딩을 진행하였는지 검증해 주는 도구입니다. 커밋하기 전에 허스키로 명령어를 가로채고 규칙에 어긋나는 코드가 있다면 commit을 강제로 거절합니다. 따라서, 실무적으로 더 안정적인 협업을 할 수 있습니다. ( 쉽게 말해서 그냥 라이브러리 설치하는 것인데 커밋 하기 전에 허스키로 명령어를 가로채고 eslint가 제대로 무사한지 보고 안무사하면 커밋을 못하게 하는 방식입니다. ) Husky 설치 및 셋팅 1. husky 설치 npm에 들어가 husky를 검색해줍니다. 2022년 1월 25일 기준 가장 안정되어 있는 버전은 4이므로 버전4로 설치 받도록 하겠습.. 2022. 1. 30. [TIL] 3주차 - 5. js의 객체, 배열 복사 / 무한스크롤 1. 객체 / 배열 복사 객체 또는 배열을 복사하는 법은 두 가지입니다. 얕은 복사 (Shallow Copy) 주소값을 복사합니다. 따라서 원본 값 또는 복사된 값을 변경하면 두 값 모두 변경 됩니다. 깊은 복사 (Deep Copy) 값 자체를 복사하여 새로운 주소로 넣어줍니다. 같은 주소를 공유하지 않으므로 참조를 공유하지 않게 됩니다. 전체를 문자열로 만든 뒤, 그 문자열을 객체로 돌리는 방식입니다. 이를 위한 메서드로 자바스크립트의 JSON.stringfy()와 JSON.parse() 를 사용합니다. JSON.stringfy() stringify 메소드는 json 객체를 String 객체로 변환시켜 줍니다. JSON.parse() parse 메소드는 string 객체를 json 객체로 변환시켜줍니다.. 2022. 1. 28. [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. 이전 1 2 다음
