전체 글

이번에는 사이드 바를 제외한 layout 설정을 마무리 하겠습니다. layout 컴포넌트에 코드를 토대로 화면을 코딩합니다. 레이아웃은 헤더(상단 메뉴) , 사이더 (측면 메뉴) 컨텐츠( 중앙 내용) , 풋터 (하단에 설정할 내용) 으로 정리합니다. 씬은 처음부터 나눠놓고 시작하는 것이 효율적입니다. 스타일 설정은 사이더를 보시면 저런 식으로 색을 넣을 수 있습니다. red를 넣어줘서 구분을 줍니다. 화면을 보시면 글자가 잘 안 보이시고 크기도 작습니다. 그러니 글자 크기를 변경하러 갑니다. 타이틀을 이용할 건데 레벨이 크기를 의미합니다. 편하신 거 가져오셔서 헤더 사이에 넣을 겁니다. import는 꼭 해줍시다. (from 'antd'가 겹치면 import { Layout , Typography} fr..

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라는 ..

postgresql 아주 간단히 설명하자면 예전에 나온 RDB입니다. RDB와 nosql의 차이는 모르신다면 구글링으로 개념 잡으시는 걸 추천합니다. 개인적으로 mysql oracle 의 차이를 느끼지 못했습니다. (깊은 이해가 필요없이 그냥 db로서 사용했습니다. 전 그렇더라고요. ) db를 개인적으로 개발할 때 쓰기보단 외부 프로젝트에서 쓰지 싶네요. https://www.enterprisedb.com/downloads/postgres-postgresql-downloads PostgreSQL Database Download | EnterpriseDB PostgreSQL Database Download www.enterprisedb.com 링크입니다. 여기서 윈도우용 64비트 다운로드하시면 됩니다. s..

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

- 동기 & 비동기란 먼저 이해를 돕기 위해 아주 쉽게!! 동기와 비동기에 대해 설명드리겠습니다. 동기는 동시에 실행된다는 의미입니다. 비동기는 말 그대로 동시에 실행이 되지 않는다는 말입니다. - async & await 사용법 async는 asynchronous의 약어로 비동기란 뜻이며 await은 (~을) 기다리다 라는 뜻입니다. 먼저 비동기 처리 함수를 만들어줍니다. 아래처럼 화살표 함수, 일반 함수에 따라서 위치가 변합니다. async asyncAPI function(){ //일반 함수의 사용법 } asyncAPI = async () =>{ //화살표 함수의 사용법 } async await 도 es6이기 때문에 es6문법인 애로우 함수로 예를 들어보겠습니다. let num =1; function..

node.js의 설치가 완료되었나요? cmd 창 (명령 프롬프트)를 실행합시다. 이번에 해볼 내용은 잘 설치되었는지 혹은 내가 어떤 버전의 node.js를 다운로드하였는지 알아보는 시간입니다. -환경변수란 명령 프롬프트에서 경로에 상관없이 접근 가능한 환경의 변수를 의미합니다. 예를 들어 아래와 같은 명령어는 node.js를 설치한 파일 내에서 명령어를 입력해야 해당하는 기능을 실행합니다. 하지만 환경 변수가 설정되어있다면 node -v라는 명령어(변수)가 명령 프롬프트 어느 환경(경로)에서도 실행 가능합니다. 아래의 이미지처럼요 (명령 프롬프트 창을 실행해줄 건데 윈도 10 기준 화면 왼쪽 하단의 윈도 이미지를 누르고 cmd라고 타이핑을 하시면 바로 사용 가능합니다.) 환경변수가 설정돼있지 않을 때 n..

Node.js 란 node.js 는 웹브라우저에 종속적인 javascript를 V8엔진을 통해 실행할 수 있는 환경(런타임)을 제공해줍니다. -V8엔진 역할: javascript를 node.js가 v8엔진에게 전달해서 기계어로 번역합니다. javascript는 사람을 위한 프로그래밍 언어이며 컴퓨터는 기계어로 번역해주지 않으면 이해하지 못합니다. 설치 방법 node.js를 직접 검색해서 아래와 같은 링크를 타고 들어가면됩니다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js를 설치하면 npm도 같이 설치됩니다. npm 이란 node p..