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자리에 어떤 요소가 와야하는지 예측할 수 없어서 사용하는 쪽의 코드를 봐야만하..
2년전 우테캠의 누군가가 기록한 로이드의 명언을 이해하는 포스팅 https://hyeooona825.tistory.com/84?category=790626 1. 동기를 부여하면 반복하여 습관으로 만들어라. 주니어는 아직 습관이 없는 개발자이다. 따라서 앞으로 입사할 회사, 그리고 만나는 사수에 따라서 좋은 습관을 가질 수도 있고, 나쁜 습관으로 길들어진 개발자가 될 수도 있다. 앞으로 배워야할 개발지식은 무궁무진하고 배웠던 것도 계속 변화하고 발전한다. 그래서 어떤 기술적인 부분에 대해 공부하기로 했으면, 말뿐인 다짐이 아니라, 그것을 진짜로 내 것으로 만드는 것이 중요하다. 여기서 중요한것은 동기를 부여한 반복이 중요하다. 그냥 지루한 공부라고 생각하지말고 그것을 해야하는 동기를 만들어서 반복할 수 있..
정의 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인 파일을 일컫는다.. 일반적으로 웹상에서 찾아볼 수 있는 거의 모든 이미지 파일은 비트맵 방식으로 저장이 된다고 생각하면 된다. 이런 확장자의 이미지를 확대해보면, 한 픽셀 당 한 개의 색상만 저장된것을 알 수 있다. 보통 포토샵을 이용해서 만들어지고, 격자무늬로 이루어져있다. 이런 이유때문에, 비트맵 이미지는 메모리 용량을 많이 잡아먹는다. 벡터 벡터는 점과 선으로 이루어져있고..
원래 자바스크립트는 html 파일 상에서 호출되면, 호출된 모든 자바스크립트들이 1개의 파일로 통합되었다. 그로 인해서 변수명이 같은경우 등의 사이드 이펙트가 필연적으로 발생할 수 밖에 없었다. 또한 필요한 로직들을 언제든지 사용하기 위해서 일단 어딘가에 선언을 해놓아야 했고, 웹이 복잡해지고 규모가 커짐에 따라서 다양한 불편한점들이 생기게 되었다. 아마 그래서 나온것이 CJS, AMD, UMD, ESM과 같은 모듈 시스템일 것이다. 이러한 모듈은 각각의 자바스크립트의 스코프를 겹치지 않게 해주고, 원하는 코드에서 import해와서 사용할 수 있도록 도와준다. 근데 이 모듈 시스템의 종류가 여러개다. 제목처럼 4개나 있다. 왜 이렇게 4개나 존재해서 우리들에게 혼란을 주는 것일까? 한번 살펴보자 CJS ..
