본문 바로가기

전체 글376

[JS] function 쓰지말자. this를 안 쓴다면... 아래 Youtube 영상의 내용을 거의 그대로 가져온 페이지입니다.문제가 될 경우 삭제하겠습니다.TLTRfunction 대신 arrow function 을 사용하자this를 사용하지 않는다면 더 가볍기 때문이다. 함수 작성시: arrow functioninstance 생성시 (생성자 함수를 사용하고 싶을 때): classgenerator 사용하려 할 때: function function는 생성자 함수를 만들기위해 존재하는 prototype prop이 존재하는데, this를 사용하지 않으면 불필요함. 대부분 함수 만들때 this를 사용하지 않는데 prototype prop이 존재하는 function을 사용할 이유는 없음. arrow function을 사용하면 prototype prop이 존재하지 않음으로 .. 2024. 4. 29.
[http] gzip 테스트 웹 성능에 필수 요소인 gzip 압축에 대해 알아보자압축 시 손실이 없고 웹서버에서 압축하고 브라우저에서 푼다. 네트워크 비용을 최소화 하기 위한 노력이다. Request Header에 Accept-Encoding: gzip으로 설정하면 클라이언트가 gzip으로 압축된 컨텐츠를 내려줘도 이해할 수 있다라는 뜻이고, 이걸 받은 서버는 content neogitiation을 통해 제안받은 인코딩 타입 중 하나를 선택해서 Content-Encoding: gzip 으로 내려준다. gzip으로 요청했을 때와 plain text로 요청했을 때 응답을 비교해보자 평문 요청curl -H "Accept-Encoding: identity" https://map.yahoo.co.jp/v2/place/vwRR.. 2024. 4. 24.
[clean code] 놓치기 쉬운 것들 Use explanatory variables // bad const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; saveCityZipCode( address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2] ); // good const address = "One Infinite Loop, Cupertino 95014"; const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/; const [_, city, zipCode] = address.. 2024. 4. 22.
[css] Block Formatting Context (BFC) 웹 페이지의 시각적 CSS 렌더링의 일부를 형성하는 구역으로, 블록 박스의 레이아웃이 발생하는 범위를 정의합니다. BFC는 그 안의 블록 레벨 요소들이 어떻게 배치되며, 그 요소들 간의 관계와 상호작용을 어떻게 처리할지 결정합니다. BFC 생성 조건 BFC는 다음과 같은 조건 중 하나 이상이 충족될 때 생성됩니다: - `float` 속성이 `none`이 아닌 요소 - `position` 속성이 `absolute` 또는 `fixed`인 요소 - `display` 속성이 `inline-block`, `table-cell`, `table-caption`, `flex`, `grid` 등인 요소 - `overflow` 속성이 `visible`이 아닌 블록 박스 - `contain` 속성이 `layout`, `co.. 2024. 4. 22.
[css] :nth-child :nth-child 해당 가상 클래스를 선언한 부모의 기준으로 자식을 선별하기에 형제간에 어떠한 요소가 추가되면 망한다. 국가 리스트에서 짝수 번째 있는 나라에만 배경색을 추가하려 했지만, div요소가 상위체 추가되면서 의도와 다르게 코딩 되었다. :nth-of-type 그래서 다안으로 :nth-of-type이다.이건 요소 tag 기준에 따라 설정되지만 여전히 헛점은 있다 of 이 문법을 사용하면 더 복잡한 코딩을 할 수 있다. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child :nth-child() - CSS: Cascading Style Sheets | MDN The :nth-child() CSS pseudo-class matches eleme.. 2024. 4. 22.
[css] body에 배경을 변경했을 때 html, body 요소에 배경색을 추가했다. 예상대로 동작한다. html은 root element이므로 뷰포트 전체에 적용하고 body는 자식 요소의 컨텐트 크기에 따른다. html 스타일을 지웠다. body의 배경이 뷰포트 전체에 적용되었다. 이상하지 않은가? 기본값은 height: auto이기에 자식 요소의 컨텐트 크기에 따라 변경되어야 하는데? 배경색 대신 이미지를 추가할 때도 마찬가지다. 결론 css 만드는 개발자 입장에서 고려해본다면 이렇게 예외를 추가할 수 밖에 없는 상황이 있지 않았나 싶다. body에서도 뷰포트에 적용하지 않으면 html까지 올라가야하는데 그렇게 까지 해야하나 싶다. 대부분 html 요소에 스타일을 추가하진 않는다. body도 잘 안건드는 판에.. 이미지를 뷰포트 중심으로.. 2024. 4. 22.

티스토리툴바