Enjoy Programming

간만에 html tag 를 기록한다. 기존 개발시에 게이지 바 같은 폼을 만드려면 주로 input tag를 custom 해서 쓰거나 빈태그 두개를 css만 주고 채워질 게이지의 width만 prop으로 전달해서 눈속임의 게이지 바를 만들었었다. 오늘 새로운 태그를 하나 알게 되었는데 혁명이다... https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress - HTML: Hypertext Markup Language | MDN HTML 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다. developer.mozilla.org 바로 progress tag! 작업의 완료 정도를 value로 전달하고 max치만 조절 해주면 알아서..

이번은 타입스크립트로 react 이벤트 관리에 대해 간단하게 다뤄보겠다~ 기존 코드에 input 관련 코드 작성, 두가지 랜더링할 컴포넌트를 작성해주는데 Input 과 Form이다. 두개 다 interface로 props의 type을 결정해주고 각각의 컴포넌트가 React.FunctionComponent임을 명시해준다. 그리고 작성한 interface를 전달해준다. 음 심도있게 더 공부해야겠지만 받아들이자 ㅎㅎ;; 일단 props에서 전달받은 onChange함수와 onFormSubmit함수의 타입을 void로 선언하는데 역시 event: React.~~~~ 를 작성해서 event타입도 확인해줘야 한다. 이제 부모컴포넌트로 가보면 부모컴포넌트에서 Input과 Form을 import하고 rendering해주..

아주 중요한 태그이다. 유저가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button등의 입력 양식 태그를 포함한다. 웹페이지 만들때 꼭 들어간다? 고 봐야 한다. 서버사이드와 연결한다. 페이지에 로드될 정보라던지 유저가 요청한 데이터를 서버에서 가져오고 유저가 입력한 정보를 서버로 전송도 한다. attribute 는 action 과 method가 있는데 action은 URL을 값으로 가지며 입력 데이터 (form data)가 전송될 url을 지정한다. method는 입력데이터의 전달 방식을 지정한다 GET / POST 방식이 있다. GET get 방식은 전송 url에 데이터를 query str..

이제 할일은 아래 텍스트 입력창과 키보드를 만드는 일이다~ 먼저 텍스트를 입력해서 전송할 것이기 때문에(여기서는 백단은 하지 않으므로 보이기만) reply클래스의 form태그를 생성한다 form태그 안에 plus버튼의 칼럼과 채팅창과 이모티콘 엔터를 입력할 칼럼 두개를 만들어주자 div.reply__column * 2를 만들고서 첫번째 칼럼에는 +아이콘을 배치해주고 두번째 칼럼은 텍스트를 입력할 input을 만들어준다 input아래에는 스마일 아이콘과 입력버튼을 만들고 버튼안에 다시 arrow아이콘을 넣는다. 이제 꾸미기만 하면 된다. 입력창은 하단에 고정이되어야 하기 때문에 fixed해주고 가장하단부분인 bottom 0으로 값을 준다. width가 설정이 안되어 있으니 100% 배경화면은 흰색으로 바꾸..