전체 글(9)
-
React Pattern - 제어 컴포넌트 패턴(Controlled Props Pattern)
Controlled Props Pattern 리액트에서 컴포넌트를 작성할 때 useState만을 사용하여 상태관리를 하게 되면 컴포넌트 외부에서는 상태에 전혀 관여할 수 없기 때문에 비제어(Uncontrolled) 컴포넌트라고 부릅니다. 그리고 반대로 props를 통해 상태값과 상태값을 다루는 콜백함수들을 전달받아 컴포넌트 외부에서 상태를 제어할 수 있도록 하는 것을 Controlled Props Pattern이라고 하며 이런 컴포넌트를 제어(Controlled) 컴포넌트라고 부릅니다. 비제어 컴포넌트는 오직 사전에 정의된 대로만 동작하고 외부 사용자가 임의로 상태를 제어할 수 없습니다. 반면 제어 컴포넌트는 외부에 컴포넌트 제어권을 넘겨주는 게 가능하므로(IOC, Inversion Of Control)..
2023.11.26 -
React event의 여러가지 target
React나 html코드를 작성하다보면 사용자 인터랙션을 처리하기 위해 여러가지 event들을 핸들링하고 관련된 요소들을 참조해야하는 경우가 많이 있습니다. 이 때 event 오브젝트에는 target, currentTarget, relatedTarget 변수를 통해서 관련 요소들의 레퍼런스들을 전달해주는데요, 이 각각의 레퍼런스 변수들은 어떤 차이가 있을까요? target 또는 currentTarget target과 currentTarget은 이벤트가 발생한 지점의 요소들을 가리킵니다. event가 발생한 지점에서 중첩구조(nested)로 되어있는 html요소들중 가장 안쪽에 있는 요소가 target이 되며, currentTarget은 event handler가 등록되어있는 요소를 나타냅니다. 중첩구조란..
2023.11.19 -
box-shadow로 inline border 만들기
요소의 크기 웹 프론트 개발을 하다보면 각 요소들이 고정 크기를 가져서 width나 height를 지정핼줄때도 있지만, 간변적인 크기의 성질을 가져서 width와 height를 지정하지 않을때도 있습니다. 그런 경우 요소들은 box-model에 의해서 컨텐츠의 크기, padding, margin등에 의해서 크기와 영역이 결정됩니다. 마찬가지로 border의 크기도 box-model 영역 계산에 포함이 되기때문에, border가 있고 없느냐에 따라 요소의 크기가 달라지게 되고 이로인해 예상치못한 디자인 사이드 이펙트가 발생할 수 있습니다. 이런 사이드 이펙트를 방지하기 위해서 요소에게 항상 동일한 border-width를 가지도록 할수 있지만, 그렇게되면 매번 디자인 작업을 할때마다 border를 신경써야..
2023.11.13 -
CSS BoxShadow 제대로 알기
box-shadow 값 요소들 box-shadow는 2개~4개의 length값과 옵션으로 color값과 inset값으로 구성됩니다. 각 값들의 순서는 아무렇게 입력해도 상관없지만 length값들은 꼭 연속해서 입력되야하며 2개이상의 값이 필요합니다. // 올바른 입력 box-shadow: red inset 3px 3px 1em .2em; box-shadow: red 3px 3px 1em .2em; box-shadow: red 3px 3px 1em .2em inset; box-shadow: 3px 3px 1em red; // 틀린 입력 box-shadow: 3px 3px red 1em; box-shadow: 3px red; color는 그림자 색상, inset은 그림자 반전 여부 그리고, length값들은..
2023.11.06 -
html input 유효성(validity) 검사
React에서 폼(Form)화면 작성시 로그인 화면에서 아이디 또는 비밀번호는 필수로 입력하게하거나, 회원가입 화면에서 비밀번호 입력시 특수문자나 소문자, 대문자 또는 숫자 등을 섞어서 입력하도록 유효성 검사를 진행할때가 있습니다. React를 사용한다면 상태(state)를 통해서도 충분히 입력값의 유효성검사를 진행할 수 있지만, HTML의 에서도 유효성 검사와 관련하여 다양한 기능을 제공하고 있으니 한번 살펴보도록 하겠습니다. 현재 유효성 검사 상태를 나타내는 ValidityState 요소는 현재 유효성 상태를 나타내는 validity(ValidityState)값을 가지고 있으며, 요소의 여러가지 attribute 설정과 입력값에 의해 validity의 상태가 결정됩니다. // App.tsx impor..
2023.10.14 -
input요소 checkValidity와 reportValidity
HTML에서 요소는 required나 pattern, minLength, maxLength와 같은 속성들을 통하여 현재 입력된 값에대한 유효성 검사를 할수 있습니다. 일반적으로는 해당 요소가 포함된 form에서 submit요청이 발생하면 먼저 포함된 입력 요소들의 유효성 검사를 진행하고, 유효성 검사를 통과하지 못하면 submit을 더이상 진행하지 않고 onInvalid를 호출하게됩니다. 또한 checkValidity나 reportValidity 함수를 호출하여 즉시 유효성 검사를 진행할수도 있습니다. export default function App() { const [_invalid, _setInvalid] = useState(false); function _onBlur(event: FocusEven..
2023.10.13 -
CSS Box model
Width를 100%로 했는데 왜 자꾸 100%가 넘어가지? margin적용이 왜 안되는 거야... CSS 기본 박스 모델 입문 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 developer.mozilla.org css로 html 요소들을 배치할 때, 가끔 원하는 대로 height/width나 padding, margin 등이 설정되지 않는 경우가 있습니다. 이는 대부분 box model 개념 때문인 경우가 많습니다. 브라우저에서 각 태그들을 렌더링하고 배치할 때, CSS Box Model을 기준으로 레이아웃을 계산합니다. 이 Box Model은 co..
2020.11.15 -
Javascript - module
CommonJS & AMD(Asynchronous Module Definition) 옛날 html에서 주로 보조적인 용도로 많이 사용했었던 javascript는 module에 대한 개념이 크게 활성화되지 않았었습니다. html에서 다른 사람이 작성하거나 분리되어 작성된 모듈을 사용하려면, script상단에서 사용할 모듈을 불러오고 window 프로퍼티로 저장된 모듈을 내 스크립트에서 사용해야 했습니다. 하지만 문제는 모든 모듈이 window 객체에 전역으로 등록되다 보니 변수명이 같으면 충돌이 일어나서 일일이 다 체크해야 했습니다. 그래서 이러한 문제들을 해결하기 위해서 다양한 모듈 라이브러리들이 만들어졌고 대표적으로 CommonJS와 AMD가 있습니다. 현재 Node에서는 CommonJS와 ES6 mo..
2020.10.28 -
Javascript - Iterator pattern
Iterator pattern은 배열과 같은 순차적인 데이터를 순회하기 위한 방법으로, javascript ES6(ECMA2015) 버전부터 Symbol과 함께 추가된 개념입니다. ES6전에는 여러 가지 컬렉션 관련 라이브러리들이 각자의 방법으로 순회 방법들을 제공했었지만, ES6에서는 공식적으로 Iterator/Iterable Protocol을 적용하여 순차적인 데이터의 순회 방식을 통일시켰습니다. Iterator pattern을 이용함으로써 기본적으로 순차적인 데이터 처리에서부터 지연 평가나 ES6에서 제공하는 for...of나 spread 및 rest 기능들을 사용할 수 있습니다. # Iterator&Iterable Protocol Iterator&Iterable Protocol은 아래와 같이 몇가..
2020.10.28