Cod-ing (11) 썸네일형 리스트형 [React] 리엑트를 설치하는 방법 지난번 블로깅 내용에선 리엑트를 간단하게 방식으로 가져올 수 있다는 것을 알았다. 지난번 블로깅 내용 확인하기 이번엔 터미널에서 명령어를 사용해 설치하는 방법을 알아보자! 1. 설치 전 사전준비 리엑트를 설치하기전 Node.js를 먼저 설치해야한다. Node 홈페이지에 접속하면 메인화면에 두가지 다운로드 버튼이 뜬다. LTS : Long Term Support의 약자로 장기지원되는 버전 현재버전 : 가장 최신버전으로 언제든지 기능이 생기고 사라질 수 있다. 약간 카카오톡 실험실 같은 느낌..? (개발 중 기능이 사라지면 소스코드를 재수정해야하는 일이 생길 수 있음😥 ) 안정성이 높은 LTS를 설치하는게 좋다! Node.js 설치하러가기 설치가 완료되었다면 터미널에 node -v를 입력하여 설치되어있는 n.. [React] React를 공부해보자 리엑트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. react는 인터렉티브웹을 위한 최적의 도구 html을 작성 후 이벤트를 등록하는것이 아니라 script 내부에서 html을 생성 후 ReactDOM에 삽입하는 형태로 이루어진다 React를 간단하게 사용할 수 있는 방법은 두개의 URL을 import 시킨 후 스크립트를 작성하는 것이다. //React 기능 //ReactDOM 이걸 보면서 jQuery가 생각이 났다. jQuery는 JavaScript의 여러 메소드들을 간단하게 사용할 수 있게 해주는 라이브러리라면 React는 여러번 사용되는 html 코드를 매번 작성할 필요가 없게 해주는 코드 캡슐화가 주 기능인 것일까? html을 여러번 반복해서 작성하지 않아도 된다니.. 생.. [JavaScript] data- 속성을 이용한 그래프 바 만들기 250점 만점에 내 점수가 120점이라면 그래프에는 어떻게 표시해야할까? - 각 그래프 바 마다 해당하는 점수를 data-num 속성에 저장. 진단결과 총점: 250점 평균: 100점 내 점수: 120점 //base .width100{ width: 100%; } .width90{ width: 90% } .space_between{ display: flex; justify-content: space-between; align-items: center; } //그래프 스타일 .progress_wrap { display: flex; justify-content: space-between; align-items: center; } .progress_bar_wrap { height: 20px; border: 1p.. 이전 1 2 다음
