전체 글13 React 이론 React의 특징 : Virtual DOM Virtual DOM은 이름그대로 가상의 DOM입니다. React에서는 인터렉션이 발생하게 되면 바로 브라우저의 DOM에 접근하여 변화를 반영하는 것이 아니라 Virtual DOMDP 한번 렌더링하고, 이를 기존의 DOM과 비교를 하며 변화가 필요한 곳에만 렌더링 합니다. 쉽게 말해 바뀐 데이터로 전체 그림을 그려주고 비교한 다음, 바뀐 부분만 찾아서 바꿔주는 것입니다. 이런 작업을 통해 실제 브라우저에서 DOM의 조직을 최소화해줄 수 있습니다. DOM의 조작을 최소화하는 것은 곧 성능 문제로 직결되는 것이라 아주 중요한 이슈일 수 밖에 없는 것이죠. 《장점》 ⓐ 엄청나게 큰 생태계 ⓑ 글로벌 IT 기업을 포함한 여러기업에서 사용되는 라이브러리 └ Airbnb,.. 2021. 6. 17. flex-flow, justify-content 으로 플렉스아이템 배치하기 속성명 속성값 적용 요소 flex-flow [flex-direction] [flex-wrap] 플렉서블 박스 flex-flow 는 [flex-direction] [flex-wrap] 값 두가지를 같이 적어줍니다. 두 속성값 사이에 꼭 한칸을 띄워주셔야해요. justify-content 검정 : 여백 A, B, C : 컨텐츠 : flex-start : flex-end : center : space-between : space-around 각각의 속성값을 넣었을 때의 예시 입니다. 2021. 6. 17. Java Script 입문 Console API : 브라우저가 제공하는 함수 F12 Console Tab : Java Script 실행 Sources Tab : 디버깅할 때 console 로그가 코드확인 가능 공부하기 좋은 공식 사이트 MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org Script 연결 방법 3가지 asyn : 브라우저가 html을 보여주다가 병렬로 다운받으면서 다운이 완료되면 실행시켜줌 장점 : 다운로드 시간 절약 단점 : 다운이 되었을 때 h.. 2021. 6. 17. display: flex; 와 flex-direction, 플렉서블박스의 이해 예를 들어 이러한 html이 있다고 가정을 해봅니다. 이렇게 style을 주게되었을 때 부모인 #wrap 을 '플렉서블 박스' , 자식인 box와 box2 는 '플렉스 아이템' 이라고 부릅니다. * flex-direction 값을 주지않고 display: flex; 만 넣어주면 row가 기본값으로 들어가게 됩니다. 플렉스의 방향을 설정 ( flex-direction ) 가로 - 수평(h) - row 세로 - 수직(v) - columm * reverse : 역방향 row-reverse : 우 -> 좌 ex) 1 - 2 - 3 을 row-reverse 주게 되면 3 - 2 - 1 로 배치가 됩니다. columm-reverse : 아래 -> 위 ex) 1 3 2 2 3 을 columm-reverse 주게 되면.. 2021. 6. 16. 이전 1 2 3 4 다음
