TS, JS/react

layout태그에 들어가셨다면 가장먼저 보이는 화면은 레이아웃일겁니다. 저희는 대쉬보드에 가까운형태인 4번째 레이아웃을 사용할 것입니다. 이전과 같이 밑으로 스크롤을 내리고 를 클릭하여 코드를 확인합니다. 동그라미를 해놨습니다. 4번째 레이아웃을 레이아웃부터 레이아웃까지 복사한 후 react 앱에 붙여넣습니다. import는 항상 확인해줍시다. 아래와 같은 코드를 react에 입력해주시면 됩니다. 이런화면이 뜨셨다면 완성입니다.

ant design 사이트에서 컴포넌트를 이용할 생각입니다. ant를 이용하는 이유는 제가 직접 짜지 않기 위해서니까요. 밑의 url사이트는 ant사이트에서 components를 바로 누르면 나오는 상태입니다. 버튼이 가장 먼저 등장합니다. https://ant.design/components/button/ Button - Ant Design If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into Dropdown.Button. ant.design 밑으로 스..

Ant Design 에 대해 검색하고 들어오셨다면 프론트엔드에 어느 정도 이해가 있으실 거라 생각합니다. (모르시겠다면 다음글부터 짚어가면서 설명하겠습니다!!) 간단히 설명드리자면 ant란 제품의 view를 쉽게 설계하기 위한 라이브러리를 사용하는 개념으로 bootstrap을 사용해보셨다면 유사한 사용방식입니다. 다만 앵귤러, 뷰, 리액트를 지원하는 라이브러리입니다. 사용 방법 npm install -g react-create-app 로 리액트 앱을 만드는 npm을 인스톨 하셨다면 npx create-react-app 을 명령프롬프트에서 실행해주셔야합니다. - npx npm의 차이점 npm 은 아시다시피 노드의 패키지 매니져로서 필요한 모듈의 설치를 도와줍니다. 다만 npm의 5.2버전부터는 npx라는 ..

-에러이미지 jsx 문법인 거 같은데 이런 식으로 표현하는걸 처음 봐서 글로 기록한다. 변수를 파싱한 다른 변수에 배열 값으로 넣고 문자열을 넣으면 json형태로 출력한다. nextState 그대로 setState도 가능하다. 이런 식으로 json형태로 쉽게 만들고 사용하는 경우가 꽤 보입니다. let userName="test"; let nextState={} nextState[userName] = "value"; console.log(nextState); //결과값 {test: 'value'}