웹팩은 오픈소스 자바스크립트 모듈 번들러이다. 모듈 번들러라고 함은, 웹 어플리케이션을 구성하는 자원 모두를 각각의 모듈로 보고, 그것을 조합해서 하나의 결과물을 만드는 것이다. 모듈은 일반적으로 관련된 데이터와 함수들을 묶어 파일 단위로 나누는 것을 뜻한다. 자바스크립트 초창기에는 html의 코드의 script 태그에 자바스크립트를 선언하여, 선언하는 외부 자바스크립트들의 변수명과 함수명이 재정의 되기도 하고, 순서에 다라 로직이 달라지고, 1개의 script 파일에서 에러가 나면, 어플리케이션이 멈춰버리는 현상이 있었다. 이런 모듈 시스템이 도입됨으로써 기능 별로 파일을 나눌 수 있게 되고, 서로의 스코프를 침범하지 않게 되어 위 문제들을 해결 할 수 있었다. 웹팩도 그렇다. 웹팩도 모든 자원을 모듈..

css에서 자식간의 관계에 대한 스타일을 부여할 경우 nth-child vs nth-of-type first-child vs first-of-type last-child vs last-of-type 에 대해서 고민하게 된다. 차이점은 ## nth-child(n) 이런 ~-child 류의 문법은 **부모 엘리먼트의 [모든] 자식 엘리먼트 중 n번째를 뜻한다.** ## nth-of-type(n) 이런 ~-of-type 류의 문법은 **부모 엘리먼트의 [특정] 자식 엘리먼트 중 n번째를 뜻한다.** 즉, span:nth-child(2)를 하면 모든 자식에서의 2번째 자식이다. 태그가 아무 상관이 없는 것이다. 하지만 span:nth-of-type(2)를 하면 자식들 중에 span인 녀석들 중 2번째이다. 특정..

JSX.Element ReactChild ReactChildren ReactNode ReactElement 이것들은 타입스크립트에서 리액트 컴포넌트의 타입을 정해주는 것들이다. 관계는 다음과 같다. ReactNode ReactNode는 만능이다. 코드는 아래와 같다. type ReactNode = | ReactChild | ReactFragment | ReactPortal | boolean | null | undefined; string도 되고, 포탈도 되고, 프래그먼트도 되고, 여러 컴포넌트도된다. ReactChild 코드는 아래와 같다. type ReactChild = ReactElement | ReactText; 리액트 컴포넌트 + 숫자 + 문자열을 뜻한다. ReactElement 코드는 아래와 같..

React의 함수형 컴포넌트를 사용할때 다음과 같이 children을 사용하여 props를 받을 수 있다. 타입은 일반적으로 ReactChild 또는 ReactNode이다. 그리고 위 코드처럼 string이 들어갈 수 있는 props임에도 불구하고 children으로 받고 있다. 텍스트 굳이 이렇게 쓰기위해서이다. 이렇게 사용했을때의 좋은점은 children 자리에 원하는 구조의 JSX를 넣을 수 있다는 것이다. 저 부분의 UI를 사용하는 단으로 책임을 돌린것이다. 하지만 이러한 방식의 단점도 있다. 장점이기도 하지만, 어떤 UI가 들어올지 예상할 수 없다는 것이다. 또한, 구조가 복잡해질수록, 저 코드만 봤을떄 children자리에 어떤 요소가 와야하는지 예측할 수 없어서 사용하는 쪽의 코드를 봐야만하..

정의 CSRF는 Cross Site Request Forgery의 약자이다. 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하게 하는 공격을 뜻한다. 이는 쿠키를 사용하면 보안에 강하다라는 주장을 무색하게 할 정도로 쿠키를 이용해서 쉽게 취약점 공격이 가능하다. 원래는 XSS 공격이 사용자가 특정 웹사이트를 신용하는 점을 노린것이라면, 사이트간 요청 위조는 특정 웹사이트가 사용자의 웹 브라우저를 신용하는 상태를 노린것이다. 일단 사용자가 웹 사이트에 로그인한 상태에서 사이트간 요청 위조 공격 코드가 삽입된 페이지를 열면, 공격 대상이 되는 웹사이트는 위조된 공격 명령이 믿을 수 있는 사용자로부터 발송된 것으로 판단하게 되어서 공격에 노출된다. 방법 공격 방법은 다음과 같다...

https://velog.io/@dbstjrwnekd/callbackfunction 콜백 함수 매개변수를 통해 다른 함수의 내부로 전달되는 함수. 고차 함수 매개변수를 통해 콜백함수를 전달받는 함수.

https://ibocon.tistory.com/269 vs code에서 디버깅을 하려고 break point를 잡으면, 번들되어있는 파일때문에 번들파일 기준으로 에러 위치가 잡히기 때문에, 개발하는 입장에서 상당히 귀찮음이 아닐 수 없다. 그래서 console.log 주도 개발이 이루어지기도 한다 ㅎ 여기서 사용하는 것이 소스맵인데, 개발하는 코드와 번들링된 코드 사이의 관계를 표현하는 데이터를 뜻한다. javascript를 번들하는 것 뿐만 아니라, typescript를 javascript로 컴파일할 때에도 디버깅을 위한 소스맵이 필요하다. 일단 webpack을 통해서 번들링된 bundle.js의 파일 끝에 보면 다음과 같은 주석이 포함된 것을 알 수 있다. //# sourceMappingURL=ma..

https://www.nemolab.co.kr/108/?q=YToyOntzOjEyOiJrZXl3b3JkX3R5cGUiO3M6MzoiYWxsIjtzOjQ6InBhZ2UiO2k6MTt9&bmode=view&idx=5095098&t=board&category=F0i877F7x2 비트맵 비트맵이란 주요 확장자가 jpg, png, bmp인 파일을 일컫는다.. 일반적으로 웹상에서 찾아볼 수 있는 거의 모든 이미지 파일은 비트맵 방식으로 저장이 된다고 생각하면 된다. 이런 확장자의 이미지를 확대해보면, 한 픽셀 당 한 개의 색상만 저장된것을 알 수 있다. 보통 포토샵을 이용해서 만들어지고, 격자무늬로 이루어져있다. 이런 이유때문에, 비트맵 이미지는 메모리 용량을 많이 잡아먹는다. 벡터 벡터는 점과 선으로 이루어져있고..