본문 바로가기
반응형

전체 글202

리액트 조건문 나는 기본적으로 2개를 사용하고 있다. 1.삼항연산자 { 특정state ===true ? 참이면 보여질곳 : 거짓이면 보여질곳 } 2.&&연산자 const [arr,setArr] = usesate([]) const handleArray = ()=>{ setArray([1,2,3,4,5])} ........ { arr&&참이면 실행 } // 그리고 응용해 map도사용가능 { arr&& array.map(function(a,index){ return {a} } map사용관련해서 원래 삼항연산자만 사용했는데 생각해보니 &&도 잘되는걸 오늘 알게되었다. 알고는 있었지만 삼항연산자만 주구장창 썼는데, 필요하면 && 쓰는게 축약하기도 아주 좋아보인다. 팀원들이랑 같이 하면 이런게 좋은거같다! - 참고한링크 http.. 2022. 4. 27.
웹스토리지, 쿠키에 대해서 웹스토리지 & 쿠키 1.쿠키 브라우저에 저장되는 작은 크기의 문자열( 최대 4KB ) 주로 서버에서 사용한다. http요청시 Headers에 전송한다. 만료 기간 지정이 가능하다 영구 쿠키(만료기간지정, 기간지나면 삭제) VS 세션 쿠키(만료기간 지정X, 브라우저 종료시 삭제) https://naver.com 이라고 칠 때 퍼스트파티 쿠키 - 같은도메인, 혹은 서브도메인 ex) naver.com(같은도메인), m.naver.com(서브도메인) 서드파티 쿠키 - kakao.com 다른 도메인 (주로 광고 목적으로 활용, 사용자의 방문 사이트 파악) 쿠키의 문제점 CSRF - 사용자의 권한을 이용한 공격 (비밀번호 변경, 결제 요청등) XSS - 사용자의 민감한 정보 탈취(토큰) 부족한 저장 용량 - 4kb.. 2022. 4. 20.
Virtual DOM(가상돔) Virtual DOM 1.브라우저의동작 DOM tree 생성 : 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리생성 render tree생성 : css파일과 inline 스타일을 파싱 DOM + CCSOM 렌더 트리를생성 Layout(reflow) : 각 노드들의 스크린 에서의 좌표에 따라 위치결정 Paint (repaint) : 실제 화면에 그리기 문제는, 변화가 발생하면 렌더트리가 재 생성 된다는것 2.Virtual DOM의 등장 SPA를 사용하면서 즉각적으로 DOM tree를 변경할 일이 많이 생김, 그래서 최적화가 필요해져서 등장하게 된것이 버츄얼 돔이다. DOM 의 사본, 복사본이라고 할 수 있다. 진짜 DOM과같은 속성들 class등을 가지고 있지만 실제 DOM이 가지고 있는 ap.. 2022. 4. 7.
브라우저 렌더링 원리 브라우저 렌더링 브라우저의 동작 원리 HTML 마크업을 처리하고 DOM 트리를 빌드한다. 무엇" 그릴지 결정한다 CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. 어떻게그릴지 결정한다. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. 화면에 그려질 것만결정 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. Box-Model을 생성한다. 개별 노드를 화면에 페인트한다.(or 래스터화) 위는 요약적인 설명이고 좀더 구체적으로 보자면 웹 브라우저의 구조 이와같이 브라우저가 구성된다. User INterface는 주소 표시줄, 이전/다음/새로고침 버튼등이있고 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스를 말한다. Rendering Engine HTML과 CS.. 2022. 4. 7.
화살표 함수(arrow function) 함수 선언문 : 어디서든 호출가능 자바스크립트 내부 알고리즘, 실행전 초기화 단계에서 호이스팅으로 올라가진다. 함수 위치가 올라가는게 아님! 여튼 쓸 수 있다. sayHello() function sayHello(){ console.log('hello') } 함수 표현식:코드에 도달하면 생성 그 위치 이후에만 사용가능 let sayHello = function(){ console.log('hello') } sayHello() 뭐가 더 좋고 나쁨은 없다. 하지만 신경쓰고 싶지 않으면 함수 선언문을 사용하면 더 자유롭고 편하게 코딩이 가능 화살표 함수 (arrow function) - 보다 간결하게 작성한다 let add = function(num1,num2){ return num1 + num2 } let .. 2022. 4. 6.
이벤트루프(event loop) 자바스크립트는 싱글 스레드 언어이다. 그래서 다른 언어들처럼 무조건 순차적으로 코드가 실행되지않는다. 위그림의 메모리힙에는 함수나, 선언한 변수가 들어간다. 콜스택은 실제로 실행하는 코드를 실행하는 공간이다. 1.console.log('첫번쨰실행') 2.setTimeout(() => {console.log("두 번째 메시지")}, 5000); 3.console.log('세번째실행') 이런식으로 실행하게되면 1 -> 5초뒤2번, ->3 순으로 실행되는게아니라 1 -> 3 -> 5초뒤2번 이렇게 실행되게 된다. 즉 먼저 실행이 완료된 순으로 실행되는것이 자바스크립트의 특성이다. 요약하면 코드의 실행순서만 볼때, 먼저 실행되는순서로 실행이 된다. 다만 위 그림에서도 알 수있듯이 비동기적인 코드들은 전부 콜백큐.. 2022. 4. 6.
반응형

티스토리툴바