Just Make IT

리액트를 이용해서 장고의 템플릿을 대체하기이번 포스팅에서 다룰 것은 리액트와 장고를 연결하는 것입니다. 장고의 템플릿 부분을 리액트로 대체하는 것이죠. 보통 이럴 경우 리액트 프로젝트를 eject 해서 바벨의 설정을 건드리지만 이 포스팅에서는 eject를 하지 않고 둘을 연결 시킨다음에 Oneline이라는 앱을 만들어 보려고 합니다. 우선 eject를 하지 않는 이유는 리액트의 경우 이제 eject를 하지 않아도 sass를 적용시킬 수가 있습니다.(파일의 이름을 App.module.scss와 같은 형태로 바꿔주면 css 모듈과 sass가 둘다 적용됩니다.) 그래서 더더욱 꼭 eject를 할 필요가 있나 싶은 마음에 이번 포스팅을 준비했습니다. 우리가 만들 Oneline이라는 앱은 간단하게 쓴 글을 나타내..

리액트(부트)스트랩의 가장 큰 특징은 "모바일 우선" 이라는 것입니다.공식 홈페이지에 레이아웃에 보면 큰 설명은 안 되어있지만 대략 레이아웃을 잡는데 Container, Row, Col 컴포넌트를 이용하면 된다고 나와있습니다. 레이아웃 문서 확인하기 Container 컴포넌트를 쓴다면 전체를 감싸는데 사용할 것이고, 중요한 것은 Row와 Col 컴포넌트 입니다. Row는 줄을 나누는 것이고, Col이 그 안에서 공간을 나눕니다. 위와 같은 코드가 있다면 아래와 같이 나타납니다. 정확히 3등분으로 나눠지게 됩니다. 즉 다른 코드를 추가하지 않는다면 Row 컴포넌트 안에 Col 컴포넌트의 개수만큼 나눠진다는 것이죠. 너비가 달라져도 똑같은 크기를 가지게 됩니다.크기 다르게 주기리액트스트랩과 부트스트랩은 주어..

가장 유명한 프론트엔드 웹 프레임워크인 부트스트랩을 아시나요?트위터 부트스트랩은 가장 유명한 프론트엔드 웹 프레임워크입니다. 아주 깔끔하면서 트위터에서 사용할 만한 디자인으로 쉽게 웹 페이지를 꾸밀 수 있게 해줍니다. 리액트스트랩은 부트스트랩의 리액트 버전입니다. 튜토리얼을 통해서 간단하게 리액트스트랩(과 부트스트랩)을 다루는 방법을 배워보도록 하겠습니다. 다운로드 하기우선은 create-react-app으로 리액트 환경을 만들어보도록 하겠습니다. npx create-react-app 프로젝트명 해당 명령어로 프로젝트를 만들어주세요. 이제 생성한 프로젝트로 가서 리액트스트랩과 부트스트랩을 다운로드 받아주시면 됩니다. yarn add bootstrap reactstrap 부트스트랩까지 다운로드 받는 이유는..

메타 태그란?html은 두 부분으로 구성되어 있습니다. 바로 head 태그와 body 태그입니다. body 태그에는 실제로 사용자에게 보여주는 컨텐츠들이 들어가게 됩니다. head 태그에는 "메타 태그" 및 미리 다운로드 해야할 "링크(태그)"들이 들어갑니다. 보통 메타 태그들을 간과하기 쉬운데, (저를 포함해서) 앞으로 잊지말고 잘 작성하자는 의미로 포스팅을 쓰게 되었습니다. 쉽게 설명하자면 메타 태그는 사이트에 대한 정보들이 들어간다고 생각하시면 됩니다. 이러한 정보들은 사실 우리가 읽는 것은 아닙니다. 바로 구글과 네이버에서 사이트를 수집하는 크롤러와 같은 기계들이 읽는 것이죠. 검색 엔진에 상위권으로 노출된다는 것은 아주 좋다고 할 수 있습니다. 메타 태그들을 잘 작성하면 크롤러들이 우리가 만든 ..