버튼을 클릭했을 때, 특정 컴포넌트가 보이게 하기 어떤 버튼을 사용자가 클릭했을 때, 지정한 컴포넌트가 띄워지게끔 해보자. index.tsx const PageHome = () => { return ( {/* */} {/* */} ); }; export default PageHome; const StyledWrapper = styled.div` width: 100%; height: 100%; min-height: 100vh; padding-bottom: 80px; `; 위 코드에서 버튼은 HomeCategoryFilter 컴포넌트 안에 들어가있고, 그 버튼을 눌렀을 때 보여져야하는 컴포넌트는 HomeConvenienceFilter이다. 관리 되어야하는 상태를 boolean값으로 주어서 false일 때는 ..

flexbox는 행 또는 열을 기준으로 항목들을 1차원 공간에 배치하는 메소드이다. 항목들은 공간의 크기에 따라 변형된다. flexbox는 항목들을 담는 공간인 flex-container와 각 항목들을 나타내는 flex-item으로 구성된다. 각각 다른 속성을 적용시킬 수 있다. flexbox에는 중심축(main axis)과 교차축(cross axis)이 존재한다. 아이템이 정렬되는 기준이 되는 축이 중심축이고 그와 반대되는 축이 교차축이다. 예를들어 아이템이 수평으로 정렬되고 있다면 중심축은 row, 교차축은 column이 된다. container 속성 display: flex; container 역할을 할 곳에 display 속성의 값을 flex로 입력해서 flexbox를 만들어준다. flex-dir..

타입스크립트 설치하기 1. 자바스크립트 실행 환경 설치하기 browser Chrom, safari 등 브라우저는 HTML을 동적으로 만들기 위해 브라우저에서 자바스크립트를 해석하고 DOM을 제어할 수 있도록 하는 자바스크립트 런타임 환경이다. 타입스크립트를 실행시키기 위해서는 자바스크립트 실행 환경이 필요하다. node.js 브라우저에서 자바스크립트를 실행시키는데 필요한 엔진을 서버사이드에서도 사용할 수 있도록 만들어주는 서버사이드용 자바스크립트 런타임 환경이다. Chrome의 V8 Javascript Engine을 사용하여 자바스크립트를 해석한다. node.js를 이용해서 브라우저 환경까지 가지 않더라도 자바스크립트 코드를 커맨드라인, 간단한 서버 환경 등에서 실행할 수 있다. node.js 설치하기 ..

TypeScript란? 타입스크립트는 자바스크립트를 기반으로 하는 강력한 typed programming language이다. 자바스크립트에 type을 추가시킨 확장된 자바스크립트이다. 타입스크립트는 자바스크립트에 추가적인 문법을 더해 편집기와의 긴밀한 통합을 지원한다. 편집기에서 오류를 초기에 파악할 수 있다. 자바스크립트를 사용할 때와 다르게 편집기에서 다양한 오류를 초기에 알려준다. 타입스크립트 코드는 자바스크립트로 변환되며 브라우저, Node.js등 자바스크립트가 실행되는 모든 곳에서 실행된다. 타입스크립트는 자바스크립트를 이해하고 type 추론을 사용하여 추가적인 코드 없이 뛰어난 도구를 제공한다. TypeScript for the New Programmer 정적 타입 검사자 (A Static ..

Javascript로 Swiper 버전 7 사용 중 slidesPerView로 원하는 결과를 얻을 수 없을 때 해결 방법 패스트캠퍼스 한 번에 끝내는 프론트엔드 개발 초격차 패키지를 통해 스타벅스 페이지 클론코딩을 진행 중, slidePerView를 분명 5로 설정했는데도 불구하고 슬라이드가 5장을 초과해서 화면에 나타났다. ( 오렌지 색 영역에 5개 슬라이드만 나와야 함 ) 강사님의 코드와 내 코드를 아무리 비교해봐도 다른 부분이 없었고, slidesPerView not working등으로 구글링을 해도 이유를 알 수 없었다.. 그러다가 어느 눈썰미 좋으신 분께서 강사님이 사용한 코드의 Swiper 버전과 내가 사용한 Swiper 버전이 다르다는 것을 알려주셨다. 같은 강의를 듣고있는 누군가에게 도움이..