코멘토 실무PT 후기 챌린지_리액트 강의 2주차 후기

✔️ 1주차 과제 refactoring

요구사항이 한 페이지로 구성된 애플리케이션이지만 혹시 모를 페이지 확장성을 염두하였고, components 폴더에 한번에 파일을 추가하는 것보다 자주 쓰이는 컴포넌트를 common 폴더에 넣고, 그 외 추가될 페이지마다 폴더를 생성해서 컴포넌트를 정리하면 더 깔끔한 폴더구조를 가질 수 있다고 생각해서 수정하였습니다.

 

폴더 구조 수정 전 & 후

---

✔️ 2주차 실무 PT 주제

React 스타일링 방법과 반응형 웹 적용

 

✔️ 이번 주 수업을 통해서 배운 점

✦ 요구사항 정의서

 

요구사항 정의서를 작성할 때는 데이터를 주고 받는 부분을 자세하게 적어주어야한다. 

1. 클라이언트 단에서 어떤 버튼을 누르면 데이터를 받아올건지 추가해주기

2. 어떤 데이터가 어디에 쓰이는지 적어주기

 

✦ CSS

 

모든 HTML 요소는 Box 형태의 영역을 가지고 있다. 

CSS box model은 총 4가지 요소(margin, border, padding, content)로 구성된다.

content는 HTML 태그 사이에 담기는 내용을 표현. 

padding은 content와 border 사이의 공간을 의미.

border는 Box의 경계를 표시.

margin은 다른 박스와의 간격을 의미.

 

Q : width가 100px인 div가 있습니다. border를 2px을 줬을 때 영역의 크기는 어떻게 될까요?

A: border가 영역의 크기에 영향을 줘서 영역의 크기는 102px가 됩니다.

 

 

 

Q : border가 영역의 크기에 영향을 주셨다고 했는데, width가 100px로 유지하고 싶다면 어떻게 구현해야 하나요?

A: box-sizing속성을 border-box으로 설정합니다. 

(box-sizing속성의 디폴트는 content-box임)

참고로 자식 태그에는 상속되지 않고, 초기 세팅에 많이 쓴다. 

 

 

 

---

후기를 쓰면 환급도 해줍니다! 😀

 

https://bit.ly/3D9XCOz

성과를 만드는 현직자의 실무 노하우 ㅣ 코멘토