어쨌든 해내는 코딩 일기

https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com 부트 스트랩 사용 이유: 모바일, pc 모두 적용되는 반응형 웹사이트 제작 위해 1)read the docs 클릭2)css 부분을 긁어서 head에 넣어주기이런식으로 이미 짜여진 코드를 자유자재로 이용할 수 있어서 시간을 아낄 수 있음! 3) button을 입력한 다음 ..

최종본   https://twelvelovetype.netlify.app/ 십이간지 연애유형십이간지로 알아보는 연애유형twelvelovetype.netlify.app소스 모음https://github.com/nani6765/MyMBTI GitHub - nani6765/MyMBTIContribute to nani6765/MyMBTI development by creating an account on GitHub.github.com 필요한 method 및 함수 (HTML, CSS, JavaScript)페이지 레이아웃; 한 페이지 코드에 main, qna, result 다 들어가있어야 함.

vs code에서 html 여는 방법1) extension에 가서 open in browser을 install 한다2).html 파일을 오른쪽 버튼으로 누르고 open in default browser을 클릭한다. (alt+b)  vs code에서 html  기본 세팅, 자동완성 하는 방법! + enter 또는 html:5 입력  section id 쉽게 입력하는 방법  section#이름   - section#main -section#qna-section#result 입력한 결과

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를 입력..

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

-JSX 정의자바스크립트 문법 확장한 것javascript+ xml/ html -JSX 코드const element = hello, world!;대입연산자(=)는 오른쪽에 있는 변수를 왼쪽에 대입. 왼쪽코드는 javascript 코드, 오른쪽 코드는 html 코드 - React.createElement 함수: JSX코드를 JavaScript 코드로 변환함.- jsx는 html의 ,을 사용하고 있음. -createElement의 파라미터 -type(유형)-[props](속성)-[...childerem](엘리먼트가 포함하고 있는 자식 엘리먼트)  즉, react에서 jsx를 쓰는 것이 필수는 아님! createElement함수를 사용하면 되기 때문임.하지만 jsx 사용하면 코드 간결+ 생산성,가독성 높아짐...

- 기존 웹사이트에 react 적용link는 html과 외부 리소스 링크를 연결해주는 역할 -ex. css나 웹브라우저의 아이콘 같은 것을 불러옴.href는 경로 css 오류 해결방법html과 css 파일은 동일한 디렉터리(같은 폴더) 안에 있어야 함! react 사용. dom container! virtual dom과 빠른 렌더링이 장점인 리액트.id="root"는 버츄얼 돔의 시작점자바스크립트 두 번 불러오기. mybutton 이라는 react component 만들어야함마지막 두 줄의 코드는 리액트 돔에 랜덤함수를 사용해서 리액트 컴포넌트를 돔컨테이너 안에 랜더링 하는 코드필요한 이유: 스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도 컴포넌트가 화면에 보이지 않기 때문-> 직접 누르면 state..

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

HTML: Hyper text markup language -markup: 문서나 데이터를 처리하기 위해 문서에 추가되는 정보-즉, 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어-Tag(태그): 구조형성, 태그는 열었으면 꼭 닫아줘야 함.  ex) , or 은 열고 닫는 것 한 번1)head tag :제목 같은 속성이 들어감. ex) title2)body tag: 실제로 웹사이트에서 보이는 콘텐츠가 들어감.SPA: Single page application-하나의 페이지로 웹사이트 표현 ( content 부분을 react로 구현 ) CSS: cascading style sheets-웹사이트의 색상, 글꼴 등 디자인 입히기 JavaScript(ECMAScript,ES6기준으로 설명)- 사용자 입력..