TIL, 07.07

모달, 버튼을 포함한 웹페이지 연습하기

여러가지 버튼, 인풋, 모달, 설렉트를 구현해보았다 이번에 중요하게 생각한것은 스타일 컴포넌트를 이용한 재활용, 폴더구조 그리고 이름(변수명, 함수명 등)이다 저번에 코드리뷰때 이름에 대한 조언을 받아서 이름을 짤때 함수에 쓰임새에 맡게 그리고 이 변수가 어디에 쓰이는지에 맞추어 쓸려고 노력했다 폴더구조도 컨테이너와 컴포넌트로 나눠 관리하고 스타일 컴포넌트도 색깔과 크기로 종류를 나누어서 재사용하게 만들었다 

이번에 여러가지 메세지 박스도 써보았는데 나는 alert만 알고 있었지만 이번에 만들면서 메세지 박스가 여러종류가 있다는 것을 알게되었다 사용자가 확인 버튼을 누를때까지 메세지를 보여주는 alert, 사용자에게 메세지를 보여주고 [확인/취소] 둘중 하나를 선택하도록 하는 confirm 확인을 하면 true를 리턴하고 취소를 선택하면 false를 리턴한다 사용자에게 무언가를 입력하라는 메세지를 전달하고 입력을 받을 수 있는 prompt!! 함수에 전달되는 첫번째 파라미터는 사용자에게 보여줄 메세지고 두번째 파라미터는 입력필드에 보여질 초기값이다

 

후기

스타일 컴포넌트를 이용하여 여러가지 버튼 스타일을 나눠놓고 재활용해서 사용하니 확실히 편했다 앞으로 프로젝트를 하게되면 기본적으로 자주 사용하는 컴포넌트들(버튼, 모달, 인풋 등)을 미리 만들어서 공통컴포넌트로 빼서 사용해야겠다