본문 바로가기

Frontend43

[JS] 화살표 함수를 사용하는 이유 보시기 전에 요약하자면 화살표 함수는 선언시의 this를 상위 scope의 this를 갖는데 그냥 함수는 어디서 호출하냐에 따라 this가 변하기 때문에 화살표 함수를 사용하는 것이 좋다 라는 것 입니다. 개인 노션에 정리한 내용입니다. https://sanghoon98.notion.site/d626f610c25247be839aa082b413a19f 화살표 함수 사용 이유 내가 내린 결론 sanghoon98.notion.site 2022. 8. 16.
[Front] Virtual DOM 실제 DOM을 추상화한 가상의 객체를 메모리에 만들어 놓고 DOM과 비교하며 일치시키는 과정으로 실제 DOM과 동기화하는 프로그래밍 개념 DOM과 유사한 역할을 하고 변경 사항을 DOM에 직접 수정하는 것이 아니라 Virtual DOM을 생성, 수정하고 Virtual DOM을 사용해 DOM을 수정하게 한다. 특징 render함수가 return하는 것은 새로운 Virtual DOM을 만들기 위한 재료이다. DOM트리를 복제한 JS 객체이다. class, style 같은 속성은 있지만 DOM api는 없다. 그렇기에 가볍다 DOM 조작시에 비용이 많이드는 것은 렌더링을 하는 것이다. 하지만 Virtual DOM은 렌더링을 하지않고 메모리 상에서만 트리를 변경하는 것이기 때문에 효율적이다. 기존의 DOM 조작.. 2022. 7. 29.
리팩터링 총정리 리팩터링 2판을 읽으며 정리한 내용입니다 https://sanghoon98.notion.site/f2711e464d3846d5bf30ee794556c9cf 리팩터링 총정리 냄새 나면 당장 갈아라 -켄트 벡 할머니의 육아 법칙- sanghoon98.notion.site 2022. 7. 17.
[JS] 얕은 복사 & 깊은 복사 자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시 값 Number String Boolean Null Undefined 원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다 const a = 1; let b = a; b = 2 console.log(a); //1 console.log(b); //2 참조 값 Object Symbol 배열 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다. const a = {number: 1}; let b = a; b.number = 2 console.log(a); // {number: 2} console.log(b); // {number: 2} 이러한 .. 2022. 6. 25.
웹 표준에 관하여 웹 표준 (Web Standards) 웹에서 표준적으로 사용되는 기술이나 규칙 standard(표준)보다는 권고안(recomendation)에 가깝다. HTML, CSS, JavaScript에 대한 규정을 담고 있다. 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다. 웹 접근성, 웹 호환성, 웹 사용성은 모두 웹 표준을 지키기 위해 생긴 개념들이다. 웹 표준을 따를 때 장점 다양한 브라우저나 새로운 기기에서도 올바르게 표시된다. 접근성 향상 검색 엔진 최적화(SEO) meta 요소를 이용한 정확한 문서 정보의 제공과 적절한 제목(heading)의 사용, 의미에 맞는 마크업은 검색 시 결과에 영향을 미치는 중요한 정보이다. 쉬.. 2022. 6. 24.
XSS, CSRF XSS (Cross-Site Scritping) 줄이면 CSS인데 Cascading Style Sheet와 혼동이 올 수 있어서 XSS라고 부르는 것이다. 웹 페이지에 악의적인 스크립트를 삽입해 방문자들의 정보를 탈취한다. 의도치 않은 비정상적인 기능 수행을 유발한다. 쿠키나 세션, 토큰을 탈취한다. 공격 대상 스크립트 언어 ex) javascript 취약한 코드 보안 방법 입력할 때와 출력할 때, 모두 필터링하고, 클라이언트에도 막을 수 있을만한 수단을 구성해놓는 것이 좋다 HTML 태그의 사용을 제한하거나 스크립트에 삽입되지 않도록 & 등의 문자를 다른 문자로 치환함으로써 방지한다. CSRF (Cross-site request forgery) 사이트 간 요청 위조 공격자가 사용자에게 특정 행동.. 2022. 6. 23.