6.0.0 이상 버전에서 react-router-dom 사용시 nested routes 작성법에 대해 정리하려 합니다. 그 전에 먼저 React Router에 대한 몇가지 내용을 작성하겠습니다. React Router - Route React Router의 Route 컴포넌트는 사용자가 접속한 url을 분석하여 어느 컴포넌트를 보여줄지 정의할 수 있도록 합니다. 예를 들어 "https:// ... /papers"를 보여준다고 하면 위와 같은 식으로 라우팅을 할 수 있습니다. Route는 한가지 경로에 대해 정의할 수 있습니다. 따라서 여러 경로에 대해 정의하려면 여러개의 Route가 필요합니다. 따라서 이를 묶어주는 역할을 하는 컴포넌트가 Routes입니다. React Router - Routes 따라서..

interface(이하 인터페이스)는 자바에서 사용하는 것과 같이 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 합니다. 자바스크립트는 타입 체크를 하지 않기 때문에 일관된 구조를 만들기 까다롭지만 타입 스크립트의 인터페이스를 사용함으로써 일관된 구조를 구현할 수 있다는 것이 장점입니다. 이번 글에서는 React를 활용하여 어떻게 인터페이스를 사용할 수 있는지를 보여드릴 예정입니다. 원을 만들어주는 컴포넌트 제작하기 반지름이 50px이고 인자로 1. 배경 색과 2. 테두리 색을 받아 원을 그리는 컴포넌트를 만들어보겠습니다. styled-components를 통해 간단한 css를 작성해보겠습니다. const Container = styled.div` width: 100px; he..

위 에러는 html에 타입 스크립트 파일(.ts)을 바로 지정해줘서 나타나는 에러입니다. 따라서 타입 스크립트 파일을 tsc를 통해 컴파일한 자바 스크립트 파일을 연결해주어야 오류가 나지 않습니다. tsc 커멘드는 타입 스크립트를 global로 설치해야 사용 가능합니다. npm install -g typescript 이후 tsc App.ts와 같이 html에 연결할 타입 스크립트 파일을 tsc 명령어를 통해 컴파일 한후 위와 같이 연결해주면 오류가 더이상 나지 않습니다. 참고한 글 https://stackoverflow.com/questions/45341090/refused-to-execute-script-from-ts-because-its-mime-type-video-vnd-dlna-mpe Refuse..

맨 처음 원했던 스타일은 다음과 같았다. top top top right right right main html은 위와같이 짰다. 가장 먼저 생각한 난관은 grid_left_section 클래스 안에있는 글자를 돌리는 부분이었다. 하지만 transform을 활용하면 가볍게 구현할 수 있을 것 같아 별로 크게 신경쓰지 않았다. 분명 span이 찌그러질 것 같아서 span의 width는 max-content를 줬다. 근데... grid_left_section 안에있는 span을 rotateZ로 돌려도.. width가 전혀 줄어들지 않았다... 혹시나 하는 마음에 grid_right 컨테이너의 너비를 더 줘도 요지부동이었다. 너무 화가난 나머지 개발자 도구를 키고 알아보기로 했다. 수상한 점을 눈치채셨나요? ..

이게 뭔말이지? absolute로 가운데에 놓는다니.. 위와 같이 flex container에서 가운데에 놓는건 누워서 침 삼키기보다 쉽다. 애초에 이걸 말하는거면 position: absolute라고 시작하지도 않았다. 작성자가 원하는 건 다음과 같은 모습이다. 위와같은 디자인을 구현하려면, 회색테두리 container의 position을 absolute로 만들어야한다. 검정테두리 container의 사이즈가 변할 때마다 회색테두리 container의 위치를 바꿔줄건가? 그건 요즘같은 반응형 웹시대에 맞지 않는 대응이다. 따라서 '%'를 써서 회색테두리 container를 가운데에 놓아보자. 그럼 top, left속성을 써서 위치를 조절해야하는데, 문제가 생긴다. position: absolute는 위..

https://canalstreet.market/ About | Canal Street Market Canal Street Market is a curated retail market, food hall & community space open year-round, located in downtown New York between Soho and Chinatown. canalstreet.market 위 사이트를 클론하던 중 재미있는 디자인들을 보았다. 1. 점선으로 된 위 아래 테두리가 있다. 2. 점선으로 된 테두리가 상하좌우 있다. 3. 비스듬하게 선이 그어져있는 테두리가 위 아래로 있다. 위 3개의 디자인을 이해하기 위해서는 다음 6개의 css를 알아야한다. 1. background-image 2...