본문 바로가기

전체 글82

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다. 더보기 바인딩이란 식별자와 값을 연결하는 과정을 의미합니다. 예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것입니다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것입니다. // 객체 리터럴 const myname = { name: 'iltae', getFullName() { return 'kim' + this.na.. 2023. 5. 29.
Mixins Sass Mixins는 스타일 시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능입니다. @mixin(선언하기)과 @include(포함하기) 두 가지만 기억하면 됩니다. @mixin 위와 같이 @mixin 지시어를 사용해 선언할 수 있습니다. 이는 선택자 포함이 가능하고 & 키워드로 참조도 가능합니다. Sass에서는 @mixin 대신 =를 사용합니다. @include 다음과 같이 @include를 통해 스타일을 입힐 수 있습니다. Sass에서는 +를 사용합니다. Arguments 다음과 같이 인수도 설정해 다양한 결과를 낼 수 있으며 기본값을 설정해 따로 인수를 전달하지 않을 경우 적용할 수 있습니다. Variable Arguments 매개변수 뒤에 ...을 붙여 가변 인수를 받을 수 있습니다. 이.. 2023. 5. 26.
CSRF & XSS CSRF(Cross Site Request Forgery) 웹 애플리케이션 취약점 중 하나로, 인터넷 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정한 웹사이트에 request 하도록 만드는 공격을 말합니다. 주로 해커들이 많이 이용하는 것으로, 유저의 권한을 도용해 중요한 기능을 실행하도록 합니다. 우리가 실생활에서 CSRF 공격을 볼 수 있는 건, 해커가 사용자의 이메일 계정으로 광고성 글을 보내는 것입니다. 정확히 말하면, CSRF는 해커가 사용자 컴퓨터를 감염시키거나 서버를 해킹해서 공격하는 것이 아닙니다. CSRF 공격은 아래와 같은 조건이 만족할 때 실행됩니다. 사용자가 해커가 만든 피싱 사이트에 접속한 경우 위조 요청을 전송하는 서비스에 사용자가 로그인을 한 경우 보통 자동 로.. 2023. 5. 25.
async/defer 자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 근본적으로 해결하기 위해 HTML5부터 script 태그에 async와 defer 속성이 추가되었습니다. async와 defer 속성은 src 속성을 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용할 수 있으며 scr 속성이 없는 인라인 자바스크립트에는 사용할 수 없습니다. async와 defer 속성을 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됩니다. 하지만 자바스크립트의 실행 시점에는 차이가 있습니다. async 속성 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됩니다. 단, 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행되며 , 이때 HTML 파싱이.. 2023. 5. 19.
개인 프로젝트 1 설치 및 설정 깃헙 레포에 새 레포를 만들고 클론을 떠서 그 폴더 안에 리액트-타입스크립트 프로젝트를 생성합니다. npx create-react-app . -template typescript tsconfig.json 설치를 하고 기초 설정을 합니다. tsc --init https://typescript-kr.github.io/pages/compiler-options.html TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 감시 모드로 설정합니다. tsc -w 블리자드 API https://develop.battle.net/ 블리자드 API를 이용하기 위해선 일단 계정과 인증기 등록이 완료되어야 합니다. 완료되었으면 사이트에 들어가 API.. 2023. 5. 18.
SCSS(Sass) 선택자(Selector)를 만들 때 매 번 불필요한 선택자를 적어야 하고 동적인 기능이 적어 자동화하기 어렵고 모든 것을 수동으로 변경해야 하고 결국 중복되는 코드가 많아 유지보수에 좋지 않은 기존 CSS의 단점을 극복하기 위해 등장했습니다. Sass(SCSS)는 CSS의 단점을 보완하고 효율을 올리기 위한 CSS 전처리기 언어입니다. 전처리기 언어 문법으로 작성하고 CSS로 컴파일해서 웹으로 동작시키는 자바스크립트와 타입스크립트의 관계와 비슷합니다. vs CSS 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 사용을 줄일 수 있습니다. 변수(Variable)를 사용해 CSS 속성과 값의 일원화한 관리가 가능해집니다. 조건문, 반복문을 사용해서 동적인 CSS 관리가 가능합니다. SCSS vs Sa.. 2023. 5. 16.
디바운스와 스로틀 scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생합니다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있습니다. 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법입니다. 디바운스 디바운스(debounce)는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 합니다. 즉, 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 합니다. debounce 함수가 반환한 함수는 debounce에 두.. 2023. 5. 15.
css 상대 단위 vw, vh 각자 Viewport width, Viewport Height의 약자이며 브라우저 화면의 크기의 비율을 의미합니다. 높이와 너비 각자 꽉 차는 화면의 크기는 100을 의미합니다. % 상위 엘리멘트에 대한 퍼센트를 나타내는 단위입니다. 높이는 최상단에서 기준이 없이 퍼센트로만 나타낼 시 적용이 안 돼 기준을 잡고 시작해야 합니다. em, rem em은 현재 엘리멘트의 폰트 사이즈를 결정하는 단위이며 그 기준이 상위 엘리먼트가 기준이 됩니다. 이 의미는 상위 엘리멘트의 폰트 사이즈가 현재 엘리멘트의 1em이 되는 것입니다. rem은 이 기준이 최상단(root)이 되는 단위입니다. 16px 16px(1em) => 32px(2em) 32px(1em) => 64px(2em) 16px 16px(1em).. 2023. 5. 11.
Ajax Ajax(Asynchronous Javascript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. Ajax는 브라우저에서 제공하는 Web API인 XMLHTTPRequest 객체를 기반으로 동작합니다. XMLHTTPRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공합니다. 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작합니다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 합니다. 기존의.. 2023. 5. 9.

티스토리툴바