모닝코딩

TailwindCss로 반응형 헤더 만들기 내 목표는 교수님 명함에TailwindCss로 반응형 헤더 만들기  내 목표는 교수님 명함에 우리 홈페이지 URL이 들어간 QR 코드를 만들어드리는 것이 목표이다.그러기 위해서는 접근성이 좋은 모바일 버전의 웹 UI가 필수이다.반응형으로 만드는것은 꼭 필요한 일이지만 동시에 매우 귀찮은 일이긴 하다.그 중에서 헤더는 반응형이라기 보다는 적응형 웹 개발에 어울리다는 말이 맞는것 같다. PC 버전에서의 헤더는 메뉴들이 일자로 나열되어 있는 경우들이 많다. 화면이 그만큼 여유롭게 크기 때문이다.하지만 모바일 버전은 대부분 햄버거 모양의 이모티콘을 사용한다. 만드는 과정을 포스팅 해보고자 한다.   React 화면 크기 감지 - resize 이벤트 resize 이벤트는..

Subcomponent mui 서브컴포넌트는 주로 mui 컴포넌트의 속성(props)으로 전달되며, 필요한 경우 커스터마이즈 하거나 조정할 수 있다. 쉽게 말해 반복되는 코드가 있을 때 짧게 줄여주는 역할을 한다. 이런 반복적인 div 태그들이 반복될 때 컴포넌트를 사용하게 되면 이렇게 사용할 수 있다. 오른쪽 코드는 Subcomponent 라는 이름을 가진 Subcomponent를 정의하고있고, 왼쪽에서 는 오른쪽에서 정의된 Subcomponent를 가져오는 역할을 한다. 이렇게 이름을 Card라고 변경하게 된다면 더욱 명시적은 코드를 작성할 수 있게 된다. div라고 적혀있으면 무슨 기능을 하는지 한눈에 보기 어렵지만, Card 라고 적어놓으면 바로 어떤 역할을 하는지 알 수 있게끔 작명할 수 있게된..

State state는 React에서 정말 많이 쓰이는 문법이다. state는 변수에 값을 할당해주고, 유동적으로 값을 변환시켜주기 때문에 코드를 동적으로 사용해야할 때 매우 유용하게 쓰인다. 이때 하나의 의문점이 들 수 있다. 왜 일반변수를 사용하지 않고 state를 쓰는걸까? 그 이유는 동적으로 사용할 수 있는지의 유무에서 온다. 일반변수는 html 코드 안에서 값을 변환할 수 없다. 하지만 state는 일반 변수와 달리 자동으로 값을 변환할 수 있다. const [textValue, setTextValue] = useState(""); state 선언은 이렇게 한다. textValue : state의 값을 가져오게 한다. setTextValue : state의 값을 바꿔주는 함수 역할을 한다. 코드..

난 이때까지 혼자 코딩을 해왔었다. 내 주전공은 신소재공학과라 내 주변에 코딩을 하는 사람이 아무도 없었다. 최선을 다했다고 말하긴 어렵지만 그래도 나름 열심히 혼자 하고있었다 평소에 프론트앤드쪽 공부를 하고있어서 요런것들을 만들어 볼 수 있었다 아버지가 자기 회사 홈페이지를 만들어달라고 하셔서 좋은 기회다 생각하고 혼자 만들어보고 있었다. 하지만 여기까지였다. 더이상의 발전이 나 혼자서 해나가기가 어려울거 같았다. 정보의 한계, 프로젝트의 부재, 커뮤니케이션의 부족 등이 있었다. 다행히 학교에 좋은 코딩 동아리가 있었다. 한 학기동안 팀원들끼리 프로젝트를 진행하고, 발표한다는 동아리 계흭이 마음에 들었다. 좋은 팀원들을 만나서 좋은 프로젝트를 함께 해보면서 협업이 이루어지는 과정, 백앤드와 프론트의 연..