react 5

[html&css] 폭 width, 가운데 정렬 mx-auto, 크기에 맞게 이미지 조절img-fluid

css 파일에서 width :80% 입력하면 왼쪽부터 80임. #main{ background-color: whitesmoke; width: 80%;}  bootstrap에서 margin 검색m은 margin이고 x로 left and right 조절, auto로중앙으로 -> main에 클래스 만들기맨 마지막 줄 main 옆에 class="mx-auto" 입력 bootstrap에서 image검색fluid가 붙으면 이미지를 감싸고 있는 div 태그의 크기를 따라감.container는 12등분이고, img 위에 div.col-6을 입력해서 div태그로 img 감싼다.항상 img는 6/12가 되도록 fluid 할 것임.지금까지 결과알게된 점: class 만들고 싶으면  div.이름..

Html & Css 2024.11.24

[리액트]mongo DB 연결하기 (몽고 db 연결 에러 해결 tip)

https://cloud.mongodb.com/v2#/org/6741951615d0a0648f9ed0ed/projects  Cloud: MongoDB Cloud account.mongodb.com1번)1. 클러스터 클릭2. 클러스터 이름 적기 (나는 newlifecode)3. 무료 버전으로 클릭4. username과 password를 입력한다 (newlifecode, 숫자4)5.create database user를 누른다6. choose a connection method를 누른다7. 나는 여기서 mongodb for vs code를 눌렀다8. 그리고 뜨는 링크를 복사해서 vs code에 입력해놓는다(추후에 쓸 예정)2번)- terminal에 npm install moongoose -- save를 입력..

React 2024.11.23

[리액트] NODE JS와 EXPRESS JS 다운로드 하기

1번) terminal에 node- v 입력해서 버전 뜨는지 확인-terminal에 cd documents  입력해서 '문서'파일에 들어가기- mkdir (폴더명) 입력해서 '폴더명' 폴더 만들기- cd 폴더명 입력해서 '폴더명' 폴더에 들어가기2번) npm 패키지 만들기 위해서 npm init 입력- 엔터 엔터 누르면서 넘어가고 폴더명 불러오기3번) package.json 생성되어 있음. 4번) index.js라는 파일 만들기5번) terminal에 npm install express -- save 입력해서 node js의 프레임워크인 express js 다운로드 받기- package.json에서 express 확인 가능6번) 위 과정을 하면 알아서 생기는 node_modules 마지막 단계 링크htt..

React 2024.11.23

[리액트] react 장점, 단점

리액트란 무엇인가?A javascript library for building user interfaces 라이브러리란?자주 사용되는 기능들을 정리해 모아 놓은 것사용자 인터페이스(User interface, UI)홈페이지에서 버튼, 입력창과 같은 부분이다. 버튼을 누름으로써 웹사이트에서 반응을 하고 특정 페이지를 보여주면서 사용자의 반응을 일으킴. UI 라이브러리사용자 인터페이스를 만들기 위한 기능 모음집을 뜻함. React는 대표적인 javascript의 ui라이브러리임.ex) NGULARJS(프레임워크), Vue.js(프레임워크) , React(라이브러리) 프레임워크 vs 라이브러리프로그램 흐름에 대한 제어 권한이 포인트.프레임워크는 프로그램이 흐름 제어 권한 가짐 라이브러리는 개발자가 흐름 제어 ..

React 2024.11.12