Jaybon 의 지식창고

blog.naver.com/getinthere/222025997436

index.css

flex-direction 기본은 row

basic.css

index.css

  justify-content: 정렬 방향대로 

  align-items: 정렬의 수직방향대로 세팅

부모의 높이만큼 다 차지하는 것을 스트레치 라고한다

아래가 디폴트

반응

래핑을 걸면 자기 크기에 따라서 반응한다

 flex: 0 1 auto;

0자리는 그로우 (비율정하기 + 늘어날때 비율) 0이면 자동으로 안늘어남

1자리는 쉬링크 (비율정하기 + 줄어들때 비율) 0이면 자동으로 안줄어듬

auto는 기본크기

위 빨간 박스의 div 안에 화면이 들어간다

리턴 담당이 App이고 index.html의 id가 root인 태그 안에 넣는다

JSX 문법

자바스크립트로 그림을 그리기 위한 것

지금까지 기본 사용법.

css를 사용할 수 있는 프레임 워크를 설치 하면됨

https://heropy.blog/2017/11/25/yarn/

yarn 설치법

저장할 시 자동 정렬

설정 - prettier

홑따옴표

yarn 라이브러리를 찾는 곳

npm 라이브러리를 찾는 곳

익스텐션에서 설치

자동완성

리액트에서는 css를 따로 쓰지 말고 컴포넌트 안에 만들어 두면 편하다

디자인과 html을 같이 세팅

HTTP : 요청이 오면 서버에서 모든 데이터를 가져와서 뿌려줌 (request)

AJAX : 화면의 데이터나 모양 일부만 통신하여  변경하여 뿌려줌 

REACT : 데이터가 변경되면 REACT가 알아서 변경하여 뿌려줌 (request 없이)

https://ko.reactjs.org/

node.js - 웹브라우저가 아닌 곳에서도 자바스크립트로 앱을 만들 수 있도록 한다

node는 v8 engine 특징
1. 싱글 스레드
2. Non-block-io  - walker에게 io를 맡긴다 (io가 일어날 때 멈추지 않는다)
3. 

https://nodejs.org/ko/

vs code 를 이용하자

깃 배시로 셸을 선택한다 (리눅스 셸로 입력하기위함)

app파일의 리턴만 수정하고 저장하면 html이 바뀐다

https://sir.kr/qa/150616

ajax

get방식으로 보낼 때
1. 주소에 값 넣어서 보내기(getParameter)
2. data에자바스크립트객체를 담아서 보내기(getParameter)
3. data에 "key=value&key=value"로 보내기(getParameter) 
4. 자바스크립트객체를 시리얼라이즈해서 보내기(getParameter)

post방식으로 보낼 때
1. 주소에 값 넣어서 보내기(getParameter)
2. data에 자바스크립트객체를 담아서 보내기(getParameter)
3. data에 JSON.stringify(자바스크립트객체)를 보내기(버퍼)
4. data에 문자열 보내기(버퍼)

https://nowonbun.tistory.com/285

	<div class="container-fluid">        
	  <h3>기존 데이터 미리보기</h3>
	  <table class="table table-bordered">
	    <thead>
	      <tr>
	        <th>과정명</th>
	        <th>일자</th>
	        <th>요일</th>
	        <th>교시</th>
	        <th>수업시작</th>
	        <th>수업종료</th>
	        <th>과목</th>
	        <th>부과목</th>
	        <th>교사</th>
	        <th>호실</th>
	      </tr>
	    </thead>
	    <tbody>
		  <c:forEach var="pt" items="${pts }">
			  <tr>
		        <td>${pt.className }</td>
		        <td>${pt.classDate }</td>
		        <td>${pt.dayWeek }</td>
		        <td>${pt.classTime }</td>
		        <td>${pt.startTime }</td>
		        <td>${pt.endTime }</td>
		        <td>${pt.subject1 }</td>
		        <td>${pt.subject2 }</td>
		        <td>${pt.prof }</td>
		        <td>${pt.room }</td>
		      </tr>
		  </c:forEach>
	    </tbody>
	  </table>
	</div>

dom의 모든 마진과 보더를 없앤 뒤 각 태그를 커스텀한다