#012-015. 3주차 소감 "어.. 어어 과제에 떠내려간다...."

😎 오늘의 잘한점

액션

요즘 2:00 - 7:30 에 취침 시간을 가지고 있음에도 책상 앞에 계속해서 앉아 있는 것!

칭찬

물론 늦게 자는 것이 좋은 습관이 아니라는 걸 알고는 있지만.. 바쁜 와중에 목표했던 계획을 실천하고자 늦게 자게 되었다.

그럼에도 최대한 책상에 앉아 있으려고 했고, 쉬어도 책상 앞에서 쉬니까 금방 공부로 돌아올 수 있어서 좋았다.

침대에 눕고 싶은 마음은 굴뚝 같지만,, 잘 참아냈음에 칭찬해!

---

✔️ 오늘의 개선점

문제

여전히 우선 순위를 세우고, 실천하는데에 우왕좌왕 하는 것 같다.

원인

내가 현재 어떤것이 부족한지 인지하지 못하고 있는 것이 아닐까 싶다.

부족한 점을 알아야 우선적으로 필요한 것이 무엇인지 알 수 있을텐데 .. 아무래도 제대로 된 시각화가 필요할 것 같다.

액션 플랜

이 문제에 대해서 회고조 분들과 나눠봐도 좋을 것 같다!

요즘처럼 과제가 많고 복습 내용이 많아지면 모두가 비슷한 고민을 하고 있지 않을까...ㅎㅎ

---

💡 오늘의 배운점

배움

[ DAY 12 ]

• Embeded Content
  • srcset: 두 가지 이상의 이미지를 한 이미지 태그(<img>)에서 사용할 때 브라우저에 이미지 선택권을 위임할 수 있는 속성이다.
  • <picture>: 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소이다.
    • srcset은 같은 이미지들 중 적절한 하나를 브라우저가 선택했다면, picture는 다른 종류의 이미지 중 하나를 선택할 때 사용한다.
  • srcset와 sizes 속성을 같이 사용하면 뷰포트 조건에 따라 원하는 이미지 사이즈를 변경할 수 있다. 이때, 렌더링 하고 있는 이미지 자체는 브라우저가 선택한 이미지를 보여주고 있기 때문에 다운로드 받아오는 이미지는 하나이다.
  • picture를 사용하면 지정한 조건에 따라서 해당 이미지가 바뀌게 되므로 조건에 따라 로드 되는 이미지가 달라진다.
• perspective
• 미디어 쿼리 실습
  • width height 값을 고정하게 되면 미디어 쿼리로 계속 값을 변경해야하기 때문에 aspect-ratio 속성을 사용하여 비율을 유지하면서 크기를 변경하는 방법을 생각하기
  • flex로만 구현하는 것이 아닌 grid로 구현하면 어떨까 고민하며 더 쉽고 빠른 방법을 채용하기

[ DAY 13 ]

오전 특강 - 네이버 프론트엔드 책임 리더 우상훈님

• FE 개발자는 사용자가 서비스를 사용하는 UI를 단순히 구현하는 것이 아니라 개발,디자인, 마케팅 등 다양한 동료와 함께 사용자가 공기처럼 사용하는 제품을 만들어야 한다.
• 현재 사용자들이 겪고 있는 문제가 어떤 것인지 파악하고 개발을 통해 진정한 해결을 할 수 있어야 한다.
  프로젝트 완성에서 그치는 것이 아닌 문제가 정말로 해결되었는지 점검할 필요가 있다.

특강의 내용을 통해 앞으로 개발자에 대한 마인드, 접근 방식을 배울 수 있었다. 취업도 단순히 '나 뽑아주세요!!'가 아니라 그럴만한 근거가 있어야 하고 나를 스스로 증명해내야 한다.

또한 나의 한계를 인정하는 모습이 필요하다. 앞으로 많은 에러와 벽에 부딪혀 넘지 못한다고 생각할 때가 종종 있을 것이다.

그럴 때마다 왜 나는 벽을 넘지 못할까 좌절하지 말고, 상훈님이 얘기해주셨던 것처럼 넘을 수 없는 벽을 꼭 넘으려 하지 말고 옆으로 돌아가자!

오후 특강 - 유튜버 빔캠프 이종찬님

• negative-margin / position / flex
• 많은 내용이 다뤄져서 따로 글로 정리해볼 것!

[ DAY 14 ]

• 검색엔진 최적화 (SEO, Search Engine Optimization)
  • 검색엔진에 우리의 사이트가 얼마나 빠르게, 얼마나 상위에 노출되는가를 중점으로 고안된 방법들을 웹 사이트에 적용하는 것
  • URL, <title>, 메타 태그, 시멘틱 마크업, robot.txt / sitemap.xml 파일 작성 등의 방법이 있다.
• 마크업 실습
  
  • Card UI에서 아래 이미지와 같은 UI를 만들 때 카드에 overflow: hidden으로 처리하여 버튼의 넘치는 부분을 숨기처리 하면서 둥근 모서리 부분을 살릴 수도 있지만 각 버튼에 border-radius를 주면 focus 시에 외곽선의 모양이 유지된다.

야간 CSS 특강 과제를 진행하면서

flex 속성을 적용했을 때 flex-item이 유동적으로 크기 조절이 안된다면 체크해볼 것

• 부모 요소 중 width 값이 고정으로 들어간 것은 없는지 확인한다.
• width: 100%를 지정하고, max-width로 레이아웃의 크기를 조절해야 유연한 레이아웃을 가질 수 있다.

 

flex를 준 요소들 중 br 태그나 display: block 속성을 주어도 원치않는 줄바꿈이 생길 때

• 기본적으로 flex-item 들은 flex-shrink: 1이라는 값을 가지고 있기 때문에 요소의 너비 값이 줄어 텍스트에서 줄바꿈이 발생할 수 있다.
• 이 때는 flex-shrink: 0 을 적용하자!

[ DAY 15 ]

밴딩머신 풀이

• 놓쳤던 부분
  • 숫자만 입력받을 때는 input type="number"를 사용하자
• button은 inline-block 요소 이므로 block 요소인 <p>나 <div>가 들어가게 되면 마크업 오류가 발생한다.
  따라서 button 안에서는 span 태그를 사용하여 표현한다.

appearance

• 운영 체제를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 데 사용된다.
• appearance: none : <select>나 <input>에 표시되는 화살표, 체크박스 등의 모양을 숨길 수 있다.

appearance - CSS: Cascading Style Sheets | MDN

게시판 만들기

논리적 마크업 순서에 따라 게시판의 더보기 버튼의 경우 게시판 목록보다 아래에 위치하는 것이 좋다.

만약 더보기 버튼이 게시판 타이틀 옆에 존재한다고 해서 상단에 마크업이 들어가게 되면, 컨텐츠로 넘어가기도 전에 스크린 리더에 더보기 버튼이 읽히게 된다.

TAB 버튼을 사용하는 스크린 리더 사용자에게 제시된 컨텐츠를 모두 보여주고, 더 볼 것인지 선택지를 주기 위해서는 하단에 마크업을 진행한 뒤, position과 같은 속성으로 위치를 선정해주자!

---

🙋‍♀️ 오늘의 질문

picture를 사용하면 지정된 조건에 따라 환경이 변경될 때마다 이미지를 다운로드 받아오는데 미디어 쿼리를 사용해서 이미지 크기를 조절하는 것보다 picture를 사용하는 것이 성능에 더 좋은걸까요?

👉 브라우저 작동 방식을 알면 쉽게 유추해볼 수 있습니다.
브라우저는 렌더링을 할 때 html 파싱 후 css 파싱을 진행합니다. 따라서 picture 요소를 통해서 이미지를 렌더링 하는 것이 더 먼저 진행되고, 미디어 쿼리가 작성된 css 파일은 나중에 렌더링이 되기 때문에 picture가 성능상 더 좋다고 할 수 있습니다.

하지만 브라우저에서는 css도 빠르게 로드되기 때문에 크게 체감되지는 않습니다.

 

html에 인라인으로 <style> 태그 안에 스타일을 지정하는 경우

👉 css 다운로드를 실패했을 경우를 대비한 비교적 고전적인 방식!

 

perspective를 적용한 이미지를 회전시키면 뒷 모습은 어떻게 나오는지 궁금합니다!

👉 물체의 앞, 뒷면이 있다는 것은 두께가 있다는 의미입니다.

우리가 가지고 있는 요소들은 두께가 없기 때문에 만약 앞, 뒷면을 표현하려면 요소 두 개를 합쳐서 표현하는 방법을 사용합니다.

 

🤔 이번주를 마무리하며

3주차 때는 야간 특강, 3번의 외부 스터디 회의, 과제 등으로 저녁 시간을 제대로 활용하지 못했다.

여러 마리의 토끼를 잡고 싶은데 시간은 제한적이기 때문에 마음처럼 잘 되지 않는 것 같다.

이럴 때일수록 현재 나의 위치와 상태를 파악하는 시간을 갖는 것이 좋다고 생각한다.

바로 메타인지가 중요한 타이밍! 메타인지란 '자신의 인지 과정에 대한 인지 능력'으로 내가 무엇을 알고 무엇을 모르는지 아는 것이다.

아래의 글을 읽으면서 나라는 사람에 대해서 왜 알아야 하고, 왜 메타인지 능력이 중요한지 알 수 있었다.

메타인지 능력과 오해

나에 대해 파악하고 이해하는 것은 지금까지 그래오지 않았던 나에게는 조금 힘든 과정일 수 있겠지만

멋사라는 교육 과정에 빠져들고 도전한만큼 이 정도의 도전은 해볼 수 있지 않을까 싶다!

교육 과정의 1/4을 달려오고 있지만 아직까지도 해당 문제를 해결하기란 어려운 것 같다.

이제 곧 4주차도 마무리 되는 시점에 메타인지를 위한 고민들을 통해 그동안 얼마나 성장했을지 알아보고 싶다😀