[준일팀] 8주차 멘토링

HTML/CSS 클론코딩 연습할 때 팁 (이제와서?)

• 문구 추출

• 리소스 추출

• 이미 HTML은 완성되어있다는 것.

• 이미 리소스는 다 존재한다는 것.

• 에디터를 최대한 활용해볼 수 있지 않을까?

QnA도 해줘야

<과제에 대해서 궁금했던 점. 힘들었던 점.>

• 내 로컬에서 이미지를 관리하는 것 → loader → 어디에서 이미지를 가져와서 어떤식으로 변환할 것인가

• 예시) 아이콘, 로고 (로컬)

1. 일단 scss 함수를 만들어서 사용할 수 있고,

2. 스프라이트 이미지를 크게 만들어서 관리하고 ( 보통 4배수 )
• 사이트 내에서 100*100 정도의 사이즈로 사용한다고 치면
• 스프라이트에서는 로고 사이즈가 400*400 이 있고, 이걸 줄여서 사용한다.
• 레티나 디스플레이를 고려해서 미리 이미지 크기를 크게크게 관리하는 경우들이 있음 →
레티나 디스플레이까지 고려하는 이미지 설정 방법
예전에는 디스플레이의 물리적 픽셀과 논리적 픽셀이 동일했지만 레티나 디스플레이가 생기고 나서는 물리적 픽셀이 더 미세하게 나뉘어지고 2 ~ 3개의 물리적 픽셀이 하나의 논리적 픽셀을 나타내기까지 하게 됐다. 그리하여 사용자에게 픽셀이 눈에 보이지 않을 정도로 선명한 화면을 보여준다. CSS의 픽셀은 논리적 픽셀을 나타낸다. 그림 파일을 100px 크기로 보여준다고 할 때 DPR(물리적 픽셀과 논리적 픽셀의 비율)이 2인 레티나 디스플레이에서는 물리적인 200px을 이용해서 논리적인 100px을 나타내게 된다. 때문에 원본 이미지의 크기가 100px이라면 논리적 100px을 나타내기 위해 물리적 200px을 채우면서 뿌옇게 보인다. 200px은 돼야 모든 물리적 픽셀에 다른 색상이 들어가 깔끔해진다. 이런..

https://thinkforthink.tistory.com/303

• typescript를 왜 쓸까? 어떤 장점이 있을까?
• typescript는 런타임 이전에 타입을 검사한다
• 어차피 js로 검사를 하지 않아도 ts로 어느 정도 검증이 되기 때문에 불필요한 코드 생성을 막을 수 있다 → 실제 속도가 어느정도 (굉장히 미세하지만) 빨라질 수 있다 → 그렇다고해서 완전히 안전한 코드는 아닐 것이다.
• validation은 런타임 시점에 타입을 검사한다 → 최소한의 런타임에서의 검증은 필요하다.
• “코드 정적 분석”

• 안전하게 사용하려면 양쪽 모두 해야한다.