학습내용
git 명령어
Merge conflict
서로다른 브랜치 혹은 서로 다른 사용자가,
같은 파일의 같은 코드부분을 수정하고 병합하려고 할때 발생한다.
해결방법은 충돌이 발생한 파일을 열고, git이 표시한 충돌 부분에서 어느 코드를 유지할지 결정하고 변경하면 된다.
=> 충돌난 부분을 작성한 팀원과 꼭 상의가 필요할 것 같다.
fork, clone
둘다 레포지토리 전체내용을 나의 독립적인 저장소로 가져오는 명령어이다.
차이점은,
fork는 원격에서 원격으로
clone은 원격에서 로컬로 받아온다.
fetch vs pull
git fetch 명령어는 원격저장소에 변경사항이 있는지 "확인"만 한다.
git pull은 원격저장소의 변경사항을 로컬로 받아와 merge까지 수행한다.
로고 만드는법
- 추가로 로고를 직접 a태그를 활용하여 텍스트로 만드는것도 예뻤던것같다. ⇒ 폰트변경하고, 텍스트 스타일링 하니까 로고처럼 디자인이 완성됐다!
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);CSS 포지셔닝
Flex box란?
display: flex; 처리를 하면 해당 박스안의 요소들이 정렬 및 배치된다.
flex 박스는 내부요소들을 관리하는 컨테이너 역할을 한다.
cf. 관리자도구에서 flex속성을 설정한 DOM요소에 flex버튼이 생기는데 클릭하면 점선이 생긴다!
Flex box의 장점
-
플렉스 박스에 속한 엘리먼트들의 정렬, 순서변경에 용이하다.
-
유연한 특성이 있어, flex-grow, flex-shrink, flex-basis 등의 속성을 통해 각 아이템이 차지하는 유연하게 조절할 수 있다.
=> 다양한 화면 크기(높이, 너비)에 맞게 아이템들이 조정되어 반응형 레이아웃 구현에 효과적이다! -
무엇보다 코드가 간소화된다. => 가독성 유지보수성 증대
cf. display 속성에는 무엇이 있나요??
사용법
display: flex;
flex-direction: row; /* row값(기본값)은 주축이 가로방향이 되어 가로정렬 된다. */
flex-wrap: nowrap; row-reverse 속성값을 이용하게 되면 주축의 시작점이 역전된다고 한다.
flex-direction, flex-wrap 속성을 합쳐서
flex-flow: row nowrap; 으로 사용도 가능하다.
박스 모델
border-box vs content-box
요소의 크기 계산방식을 결정하는 역할을 하며, 이들은 box sizing 속성 값으로 사용된다.
content-box
기본값인 content-box가 적용된 엘리먼트의 너비높이는 오직 콘텐츠 영역만을 포함한다.
즉, width가 100px이고 padding: 20px 이 적용되면 요소의 실제 너비는 140px이 된다.
border-box
엘리먼트의 너비 높이가 콘텐츠, 패딩, 테두리 등을 포함한다.
width: 100px 을 설정하면 패딩과 테두리를 포함한 너비가 100px이라는 얘기다.
전체 요소 크기 계산하기가 쉬우며 덕분에 레이아웃 설계에 용이하다는 장점. => 반응형 웹을 디자인하는데에 효과적!
position 속성
position: absolute; /* 가장 가까운 "위치지정" 부모 요소에 대해 상대적으로 배치 */
top: 4px;
left: 4px;=> 위치지정 요소란 position 속성값이 relative, absolute, fixed, sticky 등인것을 의미한다. (static은 아님)
position 속성의 기본값은 static이다.
=> 또한 position: absolute; 지정하는 대상이 블록요소라면 inline-block요소로 바뀐다고 한다! (실제로 header element의 크기가 변했따.)
position: relative; /* 자기 기준으로 해당 top,left 등 속성 값에 따라 배치*/
top: 4px;
left: 4px;
position: sticky; /* 가장 가까운 스크롤 되는 부모 요소와, 컨테이닝 블록을 기준으로 적용됨 */
top: 20px;cf. 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들고 싶을때, CSS 설계방법은?
=> 비율 기반의 레이아웃을 만드는 것입니다. 대표적으로 Viewport단위(vw, vh) 등을 사용하여 창의 크기에 따라 요소의 크기도 변화시킬수있습니다.
=> 또한 비디오 및 이미지 컨테이너로 활용하는 트릭중 하나인 padding-top을 사용하여 비율을 설정하는 것이 있다.
aspect-ratio: 16/9; /* 최신브라우저에서 해당 속성 사용하여 16:9 유지 가능 */
padding-top: 56.25%; /* 16:9 비율로 높이 설정 (9/16)*100% */cf. 높이를 고정값으로 설정하는게 좋지 않은 이유는?
고정된 높이보다 콘텐츠 양이 더 많을때 잘릴 수 있고, 사용자의 해상도 차이가 있을경우 적절한 UX를 제공하기가 어려움.
따라서 고정값이 아닌 min-height를 이용하여 다양한 장치에서의 화면크기에 유연하게 조절가능하도록 한다.
멘토링
Q) TDD에 대한 글을 읽었는데 효과적으로 실무에 적용하기 위해 고민하는 기업이 있는 반면, 실제로 적용하기에는 시간이나 여러가지 요인으로 제약이 있다는 의견도 있었습니다.
TDD에 대한 멘토님의 생각이 궁금하고,
혼자 사이드프로젝트로 경험을 해보고 가는 것이 현업에 도움이 될지 여쭤보고 싶습니다.
(프론트, 백 양쪽 관점 모두에서 설명해주시면 감사하겠습니다!)
=> TDD에 대해서는 우호적이지 않다고 하셨다.
이유는 개발과정 중 초기 테스트 케이스 작성을 요구하는 것은, 개발 효율이 너무나 떨어지기 때문이다.
그러나 테스트 주도개발에 대해서 비판적일 뿐이지,
개발하면서 테스트 코드 작성은 멘토님도 많이 한다고 하신다.
- 찾아보니 요구사항이 또 너무 자주 변경되는 프로젝트의 경우, 유연성을 감소시킨다고 한다. 테스트케이스를 지속적으로 바꿔야하니...
추가로 DDD에 대한 질문도 주셨는데,
DDD에 대해서는 주니어 개발자들에게 절대 권하지 않는다고 하신다.
객체지향 프로그래밍을 충분히 이해한 상태에서도 DDD는 굉장히 어려운 접근이라고 하셨다.
그것보다는 아래 책들로 공부하기를 추천하셧다.!
- 객체지향의 사실과 오해
- 오브젝트
