TIL53 108. Virtual DOM, 가상 돔 이란? TIL 23.01.06 DOM(Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것 DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. Web Document에 있는 각 UI요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다. 문제점 DOM은 새로운 요청이나 변경사항이 있을 때마다 매번 리렌더링을 한다. 매번 새롭게 구성하기 때문에, 렌더할 양이 많으면 속도가 느려지는 문제점이 있다. 이 문제점을 해결하기 위해서 가상돔(Virtual DOM)이 나왔다. Virtual DO.. 2023. 1. 6. 107. HTTP, HTTPS 이해 TIL 23.01.04 HTTP HTTP(Hyper Text Transfer Protocol) - Hyper Text를 전송하기 위해 만든 프로토콜 - HTTP는 클라이언트(브라우저) ↔ 서버 사이의 요청/응답 프로토콜이다. - 웹상에서 통신할 때 사용 HTTP 약점 1. 암호화하지 않은 통신이기 때문에 도청가능 2. 통신 상대를 확인하지 않기 때문에 위장가능 3. 완전성을 증명할 수 없기 때문에 변조 가능 - Client와 Server가 보낸 정보를 중간에서 바꿀 위험이 있음 HTTPS HTTPS는 SSL(Secure Socket Layer)을 이용한 HTTP 통신 방식 (HTTPS: HTTPover Secure Socket Layer) HTTP에 SSL의 껍질을 씌운 것 - HTTPS는 HTTP와 별개인 새로운 프로토콜이 .. 2023. 1. 5. 106. React 공부 트러블슈팅 TIL 23.01.03 오류 해결 Uncaught TypeError: this.setstate is not a function 리액트로 todolist 만들던 중 버튼 만드는 함수에서 아래와 같은 오류가 발생했다. Uncaught TypeError: this.setstate is not a function 오류가 발생한 코드는 아래와 같다. handleIncrement = () => { this.setstate({ count: this.state.count + 1}); } 구글링을 검색도 해봤는데 코드는 이상이 없었다. 문제 되는 부분은 카멜표기법을 사용하지 않은 것이다. 리액트를 배우면서 알게 된 것은 리액트에선 카멜표기법을 사용한다는 것이다. 내가 익숙하지 않아서 setState라고 적어야 할 것을 setstate라고 적어.. 2023. 1. 4. 105. 반응형 미디어쿼리 TIL 23.01.02 반응형 미디어쿼리 미디어 쿼리 - width, height, color .. 속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위를 조절 - 컨텐츠를 별도로 변경하지 않아도 웹 페이지 접속하고 있는 기기에 알맞은 형태로 스타일을 조절 사용방법 @media 매체유형 and (표현식) { css 스타일 코드 ... } 매체 유형: all : 모든 매체유형 screen : 컴퓨터나 태블릿, 스마트폰... speech : 스크린 리더 print : 프린터 기기 최종프로젝트에서 미디어쿼리를 사용해서 반응형을 구현했었다. 그 당시에는 배우지 않아서 아래 코드처럼 구현했었다. @media (min-width: 760px) { .root { width: 500px; height: 88vh; margin-bot.. 2023. 1. 2. 104. TIL 2022.12.30 TIL 📌 오늘 한 일 이력서 작성 오늘은 캠프수료하고 다음날이다. 평소 같았으면 9시에 일어났겠지만 오늘은 늦잠 자고 빈둥거리다가 2시부터 이력서를 작성했다. 게더에 사람들이 있을까 하고 들가 봤는데 꽤 많은 사람들이 있었다. 다들 이력서 작성하는 거 같기도... 이력서를 작성하기전에 캠프에서 제공해준 이력서 가이드라인, 우수 이력서, 이력서 템플릿등 제공해준 자료를 토대로 일단 작성을 했다. 이력서를 잘 작성했는지는 모르겠다. 오늘은 한 50% 정도 작성을 했다. 작성하면서 지금까지 했던 프로젝트를 다시 한번 보면서 내가 어떻건 담당했고 내가 어떤 코드를 작성했는지 다시 한번 보게 되었다. 보면서 이 코드는 왜 이렇게 작성했는지도 생각해 볼 수 있는 기회였다. 난 모든 프로젝트에서 웹사이트 템플릿을 .. 2022. 12. 30. 이전 1 ··· 4 5 6 7 다음 728x90
