React에서 Form은 대부분의 경우 폼을 구현할 때엔 제어컴포넌트를 사용하는 것이 좋습니다. 제어컴포넌트의 구현은 일반적으로 useState 비제어컴포넌트의 구현은 일반적으로 useRef를 통하여 이루어지곤 합니다. 하지만 중요한 점은 프로퍼티와 실제 구현일 것입니다. 타입스크립트를 이용하여 form / input / select 요소들을 타이핑하는 방법을 보겠습니다. onChange 이벤트를 타이핑하려면 e:React.ChangeEvent 리액트에서 제공하는 ChangeEvent를 이용합니다. 제네릭으로 HTMLInputElement를 전달합니다. 만약 셀렉트박스를 이용하는 경우 이렇게 유니온을 이용해 타이핑할 수 있습니다. e:React.ChangeEvent Input 대부분 이벤트가 발생했을때에..
😎대충 다했다. 어떻게 동작할지에 관해 묻는 문제들이 잔뜩 있는데 가독성이... 심히 안좋다. 대체로 잘 알고 있는 개념들이라 쉽게 풀 수는 있는데 잘 사용할 일이 없던 rest 부분에서 좀 많이 막혔던 것 같다. 😎rest 파라미터는... function foo(...rest) { console.log(Array.isArray(rest)); // true console.log(rest); // [ 1, 2, 3, 4, 5 ] } foo(1, 2, 3, 4, 5); 매개변수에 쓰는 스프레드 연산자 같은 느낌인데... 모던 자바스크립트 웹을 참고해보면 Rest 파라미터(Rest Parameter, 나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ... 을 붙여서 정의한 매개변수를 의미한다. Rest 파라..
😎시작하기전에 여담 오늘은 하루 종일 코플릿 문제를 푸는 시간이었읍니다. 전체적으로 쉽게 풀 수 있는 문제들로 구성되어 있어서 풀고나서 페어분과 다양한 자료구조,알고리즘에 대해 이야기 하는 시간을 가졌는데 잘 알고 있는 자료구조는 알기 쉽게 설명해줄 수 있지만 내가 잘 모르는 부분에 대해 이야기할 때는 설명이 장황해지고 나도 내가 뭔 소릴 하는건지 잘 모르겠는 상태에 놓임 그리고 말을 너무 많이 하다보니까 점점 목소리가 맛이 가기 시작함 아니 교수님들은 도대체 어떻게 하루 종일을 떠드는거죠? 반나절만 떠들어도 목이 못버티는데요..? 😎 에라토스테네스의 체 https://school.programmers.co.kr/learn/courses/30/lessons/12921 프로그래머스 코드 중심의 개발자 채용..
😎단축평가.. 정확히 뭐였지 true || anything // true false || anything // anything true && anything // anything false && anything // false 어제 페어분께 단축 평가에 대해 설명을 했는데 말을 하면 할 수록 뭔가.. 뭔가였다. 대충 내 인식으로는 ||연산자는 좌항이 false일때 우항 반환 &&연산자는 좌항이 true일때 우항 반환 평가는 좌항 -> 우항 순으로 진행한다. 정도였는데 뭔가..뭔가 동작이 내 생각이랑 달랐다. ||연산자는 너무 익숙하게 사용하지만 &&연산자는 잘 사용하지 않아서그런지 뇌절이 와버림 그냥 외우는게 나을듯 ㄹㅇㅋㅋ 😎 자바스크립트의 배열은 사실 배열이 아니다. 이미 딥다이브에서 본 내용이지만..
😎주말동안 뭐함 아이폰 배터리 교체를 위해 서비스센터에 들렀다... 왔습니다. 사실 오늘도 교체 맡겨놓은 거 수령하러 가야함 배터리 교체 하는 사람이 많아서 당일 수령이 거의 안되나 보더라구요 😎자바스크립트 2주차가 되면서 공식적으로 자바스크립트를 배우게 되었읍니다. 오늘 분량은 코드기초, 타입 , 변수네요 대체로 알고 있는 내용이긴 하지만 자바스크립트 엔진에 대한 설명이 있어서 그동안 미루어왔던 v8 엔진에 대해서 좀 더 찾아봤습니다. 그러던 중 이해하기 쉽게 잘 정리해주신 블로그를 찾아서 그 블로그를 천천히 읽어봤어요 https://evan-moon.github.io/2019/06/28/v8-analysis/ 아주 유익하니 읽어보시길 추천드립니다 v8엔진에 대한 정리는 나중에 찾아보기 쉽게 따로 포스..
😎계산기를 만들자 컨셉은 블루아카이브의 몰?루로 해봤어요 원래는 평범하게 윈도우 계산기를 카피해보려고 했는데 잘만드는 사람이 너무 많아서 그냥 킹받는 걸 컨셉으로 숫자패드를 헷갈리는 연산으로 대체해봤습니다. 1,2,3,4,5,6,7,8,9,0 모두 잘 들어가있습니다. 아로나는 몰?루니까 계산기를 쓰시는 분들이 직접 계산하셔서 버튼을 찾으셔야합니다. 😎Animate.css 애니메이션 효과를 주면 재밌을 것 같아서 혹시 그런 라이브러리가 없을까 하고 찾아보다가 발견한 라이브러리입니다. 사용법이 아주 간단해서 마음에 드는데 https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library ..
😎 너무 졸리다. 이런 규칙적인 생활.. 너무 오랜만이다. 낮엔 졸려서 커피 없이는 견딜 수가 없다. 벌써 목요일인게 확실히 시간이 빠르긴한듯 밤 9시면 꾸벅꾸벅 졸려서 자는 생활을 반복하고 있다. 😎flex를 좀 더 잘 알아봐야겠다. flex,grid는 크게 부모요소에 적용해야할 것과 자식요소에 적용해야할 것으로 나뉩니다. 부모요소에 적용시킬 것 flex 부모요소 display : flex 부모요소의 display를 flex로 적용시킨다. flex-direction 부모요소 row column reverse row reverse column flex의 방향을 결정함 flex-wrap 부모요소 nowrap(기본값) wrap wrap-reverse nowrap이면 줄바꿈을 하지 않음 wrap이면 자식요소들..
일찍 자고 일찍 일어나는 생활습관을 가지니 어제 하다만 계산기 만들기를 마저 해보려구요 가 아니라 어제 얼추 만들었음 https://codepen.io/adckqaty-the-bold/pen/vYzYywm vYzYywm ... codepen.io 코드펜에서 실행해볼 수 있습니다. 😎 얼마나 구현했는지 1. 입력창을 비워주는 clear 버튼 구현 2. 최근 입력한 것을 지워주는 백스페이스 버튼 구현 3. 여러자릿수의 사칙연산 구현 4. 실시간으로 입력한 값들을 볼 수 있도록 구현 5. = 버튼 구현 😎 이벤트 버블링 네가 뭔데.. 이벤트 버블링이란 이벤트가 아래에서 위로 전파되는 것을 의미합니다. 사실상 이것덕분에 멘탈 터질뻔함 대략 이문제로 40분 정도 고민한 것 같다. 문제 상황은 이랬음 부모요소의 이..
