초보 개발자의 성장 일기

여성, 남성 체크박스 중 하나만 선택돼야 하는 난관에 부딪혔다. 둘중에 하나만 선택이 되도록 하려면 어떻게 구현을 해야할까? const [ganderCheckValue, setGenderCheckValue] = useState(''); 우선 useState로 변수를 선언해준다. genderCheck(e)} /> 남성 genderCheck(e)} /> 여성 그리고 각각 input과 label로 구현을 해준다. 여기서 type, id, name, value, onChange를 적어주어야 하며 onChange에는 클릭할 때 서로 하나만 체크될 젠더 체크 함수가 들어갈 것이다. function GendercheckOne(id) { let checkBox = document.getElementsByName('ch..

CSS Module class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없다. 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다. 스타일링 직접 하나하나 해야 한다. UI framework (ex. Ant Design, Material UI) 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋다. 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다. 해당 framework의 디자인철학을 벗어나기 쉽지 않다. 컴포넌트들을 커스터마이징 하기 어렵다. import "antd/dist/antd.css"; import { Button } from "antd"; export default function App() { r..