[TIL] Udemy 4일차 프론트엔드/백엔드 - HTML & CSS 레이아웃 및 포지셔닝 이해

강준호·2023년 12월 18일
개발부트캠프백엔드유데미유데미부트캠프유데미취업부트캠프유데미큐레이션프론트엔드

Udemy

목록 보기
5/44

CSS 속성들

text-transform

  • 텍스트 형태를 바꿔줌
text-transform: uppercase;

그라데이션 배경

background: linear-gradient(0deg,rgb(227,255,253),rgb(202,243,240));

없애주면 좋을것

list-style

ul{
    list-style: none;
}
text-decoration: none;

text-decoration

플렉스 박스

  • 크기를 알 수 없거나 동적인 경우에도 컨테이너 내에서 항목을 효율적으로 배열하기 위한 CSS 레이아웃 모드입니다.

flex-direction

  • 플렉스 항목이 플렉스 컨테이너에 행이나 열로 배치되는 방향을 결정합니다.

flex-wrap

  • 플렉스 컨테이너 내의 플렉스 항목을 한 줄로 강제할지 아니면 여러 줄로 줄바꿈할 수 있는지를 제어합니다.

flex-flow

  • flex-direction과 flex-wrap을 결합한 단축 속성으로, 컨테이너에서 플렉스 항목의 방향과 여러 줄로 줄바꿈할지 여부를 지정합니다.

justify-content

  • 컨테이너의 기본 축을 따라 플렉스 항목을 정렬하여 간격과 정렬을 제어합니다.

Flex 참고 블로그
https://studiomeal.com/archives/197

백그라운드 이미지

백그라운드 이미지 업로드

  • url("")
  background-image: url("/images/places/ocean.jpg");
  background-position: center;
  background-size: cover; /*기본적으로 덮어주는*/

포지셔닝

  • 페이지에 요소가 배치되는 방식을 제어할 수 있는 웹 디자인의 기본 개념

position 위치 지정

static

  • 기본값입니다. 요소는 일반 문서 흐름에 배치

relative

  • 요소의 일반 위치를 기준으로 위치를 지정합니다. 다른 요소들에 의해 위치가 바뀌지 않은것처럼 보이게 하지만 요소를 상하좌우로 이동 시킬 수 있다.

absolute

  • 가장 가까운 위치의 조상을 기준으로 요소를 배치합니다.

fixed

  • 브라우저 창을 기준으로 요소의 위치를 지정합니다.
  • 뷰 포트를 기준으로 하니 시야에서 절대 안사라짐

위치 기준

    position: relative;
    top: 200px;

Offsets

  • top,right,bottom,left 등
  • 다른 요소의 위치 지정에 영향을 주지 않습니다.

Stacking Context

  • 'z-index' 속성을 사용하여 요소의 스택 순서를 제어할 수 있습니다.

object- fit

  • img 또는 video 요소의 콘텐츠 크기를 컨테이너에 맞게 조정하는 방법을 지정하는 CSS 속성
  • 콘텐츠의 종횡비와 크기가 유지되거나 변경되는 방식을 제어.

fill

  • 콘텐츠가 컨테이너를 채우기 위해 늘어나서 가로 세로 비율이 왜곡될 수 있습니다.

contain

  • 요소의 콘텐츠 상자 내에 맞으면서 가로 세로 비율을 유지하도록 콘텐츠의 크기를 조정합니다.
  • 전체 개체가 표시되지만 가로 세로 비율이 일치하지 않으면 레터박스로 표시될 수 있습니다.

cover

  • 요소의 콘텐츠 상자를 채우는 동안 가로 세로 비율을 유지하도록 콘텐츠의 크기를 조정합니다.
  • 가로 세로 비율이 일치하지 않으면 콘텐츠의 일부가 잘릴 수 있습니다.

팀 스터디 내용 정리

gitFlow vs github Flow?

https://velog.io/@mpfo0106/Git-Branch-vs-Github-Branch

Redis?

https://velog.io/@mpfo0106/Redis%EB%9E%80

Batch?

https://velog.io/@mpfo0106/Batch-vs-OLTP

logger?

https://velog.io/@mpfo0106/Logger-%EB%9E%80

멘토링 QnA

Q. 현업의 실무를 경험해본적이 없어서 현업에서 커밋 컨벤션은 어떻게 사용중인지 궁금합니다. 일반적으로 사용하는 Feat, fix, docs, refactor, test 등의 컨벤션을 유지해서 사용하나요? 아니면 회사마다 주어진 제약이나 규칙이 있을까요?

  • 다양하게 사용한다. git 을 쓰는 이상은 branch 규칙이 더 중요해. 커밋은 브랜치를 사용하기 위한것. 커밋단위보다 브랜치 단위가 유의미하게 구성을 하고 있고 그것이 의미를 가진다.

  • 커밋컨벤션에서 사용하는 건 참고용. Git같이 브랜치관리가 잘되는 툴에서는 브랜치가 훨씬 중요하지, 커밋 컨벤션이 그렇게 중요하지 않다고 생각해.

  • 또 현업에서 키워드의 규칙은 보통 정돈된 환경을 좋아하는 사람이 한명이 들고온다ㅎㅎ 그거대로 정해지는 것. 이건 크게 중요하지 않아.

  • 커밋이 6개의 fix 와 두개의 docs 와 1개의 리팩터로 이루어져있구나. 이렇게 인지하기 위한 힌트로만 보면 될거같아.

Q. 개발자는 MAC을 잘 사용해야 된다는 인식이 있습니다. 실무에서 MAC을 사용해야 되는 경우가 많은가요?

  • Mac 은 리눅스는 아니야. 유닉스 변종이지. 리눅스 개발을 잘하기 위해서 맥을 쓴다는 사람들은 공감하기 어렵다.리눅스를 잘 쓰기 위한 측면이면 윈도우가 더 좋을 수도 있어. 윈도우는 wsl 키면 우분투같은 느낌이야. 좀더 맥보다 완성도 높거든

다만 애플실리콘으로 오면서 가성비가 너무 좋아졌어. OS가 무언가 오류가 적다. 등등.

  • 하지만 개발적으로 봤을때 성장에 목이마른 개발자면 리눅스를 쓰는게 낫지 그게 아니면 윈도우나 맥이나 비슷비슷한거같아.

Q. 리눅스를 사용하면 얻는 이점은 무엇인가요?

  • OS 이해도를 높이는데 이해가된다.

  • 도커를 사용했다는 이력서가 있으면 리눅스의 이해도가 맞물리는 질문을 하게됨. Ex)도커와 vm 은 무슨 차이인지? 도커에서 겪는 문제들을 해결할때 리눅스 이해도가 필요해. 여기서 질문 대답 못하면 docker, 쿠버네티스에 대해 이해하지 못한다고 생각.

  • 리눅스를 잘 만지면 컴퓨터를 이해하기 쉬워. 서버의 95%가 리눅스 위에서 돌아가고 있으니..근데 사람들은 OS 이해도와 매칭시키면서 쓰는 경우가 별로 없어.

  • 리눅스는 오류가 생기는 버전이 매우 많아서 CLI 로 구글링해서 이슈를 찾는데, 이를 해소하는 과정에서 혼자 공부하게돼.

Q. LXC는 OS 레벨 컨테이너 가상화 기술, Docker는 애플리케이션 레벨 컨테이너 가상화 기술로 알고 있습니다.LXC와 Docker 사용이 유리한 상황에 대해서 설명해 주실 수 있나요??! Docker만 사용해보고 LXC를 사용해보지 않은 상황에서 LXC에 대한 개념이 잘 잡히지 않네요 ㅠㅠ

  • 자신의 어플리케이션이 어떻게 구성되었나에 따라서 달라.

  • 현대의 개발은 바퀴를 재활용하는게 아니다 보니까

  • LXC, 도커가 항상 옳지는 않아. 가상화 이슈는 버전차이별, 성능차이 등 안정성 이슈가 생겨.

Q. TDD에 대한 글을 읽었는데, 효과적으로 실무에 적용하기 위해 고민하는 기업이 있는 반면 실제로 적용하기에는 시간이나 여러가지 요인으로 제약이 있다는 의견도 있었습니다 .TDD에 대한 멘토님의 생각이 궁금하고,혼자 사이드프로젝트로 경험을 하는 것이 도움이 될지 여쭤보고 싶습니다. (프론트, 백 양쪽 관점 모두에서 설명해주시면 감사하겠습니다!)

  • https://dhh.dk/2014/tdd-is-dead-long-live-testing.html 를 보면 루비 개발자도 TDD에 반대하는 걸 볼 수 있어.

  • 테스트 드라이브는 할 수 없다고 개인적으로 생각해. TDD 에 대해 그렇게 좋게 생각하지 않아. 테스트 환경을 아주 잘 구성한 개발자도 TDD 는 안해.

  • 테스트를 먼저하고 코드를 작성하는게 생각보다 이상해. 제 경험 상으로 TDD는 고통을 주는 경우가 더 많고 효과를 많이 보지 못했다.

  • 또 프론트엔드는 화면단위로 나오는데 TDD 가 가능한가가 의문. 백엔드 관점에서만 얘기한것이야.

Q. 개발자로 일을 하면서 ‘협업’ 능력이 중요하다고 생각합니다. 협업 능력에는 커뮤니케이션 스킬이 필수적이라고 생각하는데, 멘토님께서 경험하셨던 커뮤니케이션을 잘 했던 개발자분이나, 본인만의 커뮤니케이션 스킬이 있으시다면 알려주시면 감사하겠습니다.

  • 커뮤니케이션 능력이 중요하다하지만, 두개가 비슷하다면 개발능력이 좋은사람을 뽑는 추세야.

  • 개인의 커뮤니케이션 능력보다는 팀 전체의 공유문화와 전체의 커뮤니케이션을 높이는게 훨 중요하다고 생각해.

  • 주니어 개발자를 채용하고 키우다보면 보통 질문을 잘 못해. 질문하는 법을 배운적이 없기 때문에 질문의 가이드를 주면서 팀 커뮤니케이션 능력을 향상시켜주는 편.

  • 문서, 기록으로 소통한다면 생각이 정리되고 이걸 공유하고 리뷰하면서 계속 생각하게돼.

  • 코딩은 액션이기때문에 의식의 흐름이 되기 쉽고, 한발짝 떨어져서 문서화로 정제된 흐름이 필요해. 문서화를 잘 했으면 좋겠다!

Q. 생성형 AI 의 발달로 인해서 향후 몇년 안에 코더들은 사라지고, 나아가 프론트엔드, 백엔드 개발자도 대체될 가능성이 많다고 들었습니다. 이러한 상황에서 멘토님이 생각하시기에 좀 더 대체가능하지 않는(롱런) 할 수 있는 직군이 있는지 궁금합니다.

  • 슬프지만 수는 확실히 줄어들것. 단순작업을 하는 개발자는 줄어드는건 확정이야. 다른 직업은 더할것이고.

  • GPT 만이 아니더라도 AI 를 사용하다보면 디테일이 떨어져. 디테일이 필요한 작업인가 단순작업인가를 고민해본다면, 어느정도 사이즈가 나와.

  • 예를들면, 엔티티를 정의하고 이 엔티티에 대한 CRUD 를 만드려고 하면 ORM 모델, 사용할 DB, DTO 까지 정의하면 그거에 맞는 코드 틀을 깔끔하게 작성해줘. 근데 이건 내가 작성하지 않아도 되는 툴을 작성해주는 정도야. 이건 생성형 AI 이전부터 이미 많이 있었어.

  • GPT 는 직관적인건 잘하는데 디테일은 아직 처리를 못해. 즉, 요구사항이 복잡한 스크래핑, 어려운 문제, 장애 등을 해결하지 못해. 앞으로도 그럴것같고. 개발자로서 살아남으려면 문제해결능력을 길러야해.

  • 외주라는건 어떨때는 합리적이야. 과거에 RDB 만 쓸때는 데이터베이스가 외주, 프리랜서로 맡겼어. 근데 하지만, 지금은 문제를 푸는 카프카 하둡, 엘라스틱 서치 등등 너무 복잡해졌지.

  • 그러다보면 문제 상황과 그에 대한 해결방안이 다양해져야해. 문제를 푸는 액션이 얼마나 합리적인가가 중점이지.

  • 앞으로는 '요청주는 일을 해준다' 라는 관점 보다는 제품에 좀 더 관심을 갖고 문제해결을 하는 포지션이 회사가 지향하기도 하고, 롱런 할 수 있을거야.

  • 그렇게 바라보고 여러가지를 하다보면 엔지니어가 반 개발자, 반 '프로덕트 오너' 같은 포지션이 되는데, 이처럼 주도적으로 명령을 내리는 것같은 포지션이 훨씬 오래갈 수 있어. 제품에 대한 이해도로 합리적인 판단을 하는 포지션은 많은 회사가 찾고 있기도 하고. 지금부터 노력한다면 충분히 대체가능하지 않을거야.

Q. 아까 TDD 관련 내용이 나와서, DDD에 대해서 질문드리고자 합니다! 말로는 익히 들었는데 정확한 개념은 알지 못해서, DDD(Domain의 D)란 무엇인지! 에 대해서 질문드립니다ㅎㅎ

  • DDD 는 어플리케이션 내부 코드 방법론 중에 하나야. 어떠한 레이어를 두어서 의도를 나타내는 아키텍쳐 중 하나지.

  • 이건 무조건 공부 '안'하는걸 추천해. DDD 뿐만아니라 헥사곤 아키텍쳐도 하지 않아야해. 시간만 매우 날릴 수 있어.위험해.

  • 이는 객체지향하는거 보다 매우매우 어렵기 때문이야. 아직 정립도 되지 않았고.

  • 그렇기 때문에, 학습도 어렵고 정립도 잘안되서 오히려 잘못이해하고 혼동하기 쉬운 접근이야. 객체지향에 대한 매우 깊은 이해도 필요하고.

  • DDD를 공부할바에는 차라리 아래 두 책을 훨씬 추천해.
    https://product.kyobobook.co.kr/detail/S000001628109
    https://product.kyobobook.co.kr/detail/S000001766367

profile
강준호
이전 포스트

유데미 취업부트캠프 - 프론트엔드&백엔드 1주차 학습 일지

다음 포스트

[TIL] Udemy 5일차 프론트엔드/백엔드 - HTML & CSS 레이아웃 및 포지셔닝 이해

1개의 댓글

comment-user-thumbnail
박상하
2023년 12월 20일

잘생겼는데 정리도 잘하시네요!!!!!!

답글 달기