퍼블리싱 리뷰 문서화

1. 주석 필요

다른 개발자 뿐만 아니라 내가 작성한 코드일지라도 좋은 주석이 나의 생산성을 크게 높여줄 것 같다.

• 정보를 제공하는 주석
• 의도를 설명하는 주석
• 의미를 명료하게 밝히는 주석
• 결과를 경고하는 주석
• TODO 주석
• 중요성을 강조하는 주석
• 공개 API에서 문서화

2. < a href="#" >

a href ="#" 는 의미가 없다. 링크 경로를 설정해주기전에 임시 방편으로 #을 사용.
그래서 #으로 설정 된 링크를 아무리 클릭해도 아무일도 발생하지 않는다. 그냥 경로 설정 전 링크의 형태를 유지시켜주기 위함이다.
href="#"과 같이 id가 특정되지 않아서 상응하는 위치가 없다면, 그 페이지의 top(스크롤 위치 상 위)에 해당된다.

href="#"인 a 태그를 클릭한다면, 스크롤 위치상 위로 이동한다.
그래서 이동될 링크가 없다면 a태그 사용시에 href="#"는 사용하지 말자.

3. 태그 title 지양

보이스오버로 확인해보자! 실제로 a 태그에 title을 적어서 보이스오버로 확인해본 결과 두번 읽히는 것이 확인됐다.

예) 채용정보 -> 채용정보, 채용정보
두번 읽히니 불필요하다 -> 과한 접근성은 지양한다.

4. 속성이 기본값인 경우는 생략하자

퍼블리싱을 하다보면 일단 화면에 보이기 위해 position, display를 쓰고 구현을 시작하는 일이 많은데, 각각의 태그에는 각자의 기본 속성이 있다. 이 점을 무시하고 한번 더 작성을 했을 때, 불필요한 css코드가 추가가 되니 한번 더 생각하고 기본 값인 경우는 생략하자!

5. flex none? 언제 어떻게 쓰일까?

Flexbox 레이아웃은 요소의 유연한 크기 조정을 가능하게 하는 기술이다. Flexbox는 요소들을 가로 또는 세로 방향으로 배치하고, 공간을 효율적으로 분배하는 데 사용된다. 각 아이템은 필요한 만큼의 공간을 차지하고 남은 공간은 아이템들 사이에서 분배되는데, 이러한 방식으로 Flexbox는 유연한 레이아웃을 구현할 수 있다.

Flexbox는 컨테이너와 그 안에 있는 요소들을 정렬하고 공간 배분을 관리하는 기술이다. Flex 컨테이너 내의 요소들은 기본적으로 유연하게 크기를 조정하여 공간을 채우려고 시도하지만 때로는 요소를 고정된 크기로 유지하고 싶을 수 있다. 이때 flex: none; 속성을 사용하여 해당 요소의 크기를 고정시킬 수 있다.

flex: none;은 Flexbox 레이아웃에서 사용되는 CSS 속성이다. 이 속성은 요소를 유연한 크기 조정 대신에 고정된 크기로 설정하고 싶을 때 사용된다.

6. 고정값으로 넓이/ 높이를 주는건 지양하다.

소개페이지 퍼블리싱과 제품 퍼블리싱의 차이점으로 가장 크게 느낀 부분이다.
소개페이지는 보통 휘발성 페이지여서 텍스트, div 등 각각의 크기가 일정해야 반응형이나 결과물이 깔끔하게 나오고 인터랙션에 방해가 되지 않았다.
반면, 제품 퍼블리싱은 앞으로 기획이 변경될 부분을 고려하고, 텍스트가 길어지고 짧아지고, 리스트의 영역이 추가되고 안 추가 되고를 미리 고려해야하는 필요성을 느꼈다.
그래서 고정값으로 높이/넓이를 주는건 쉽게 가는 방법이다 -> 유지보수에는 어렵다.
어렵게 가자! 더 응용성이 높고 유지보수에도 쉽도록.

7. 태그를 css로 가져오지말자

컴포넌트 단위로 퍼블리싱을 하다보니 css가 꼬이는 일도 줄었다.
그래서 .mainInner > span { color: red; } 이렇게 태그로 css를 줬는데, 유지보수 측면으로 className을 줘야하는 걸 깨달았다. 또 다른 span이 추가 될 수 있기 때문에 태그가 아닌 className으로 스타일을 주자.

8. tsx, 마크업 단계에서 background를 사용하면 background 관련 css를 꼭 추가하자.

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

9. 말줄임표 max-width 없이 쓰기

일반적으로 text-overflow: ellipsis;는 요소에 고정된 너비를 지정해야만 작동한다. 그러나 너비를 지정하지 않고도 text-overflow: ellipsis;를 사용하는 몇 가지 방법이 있다.

1. 부모 요소에 display: flex;를 적용: 부모 요소를 Flex 컨테이너로 설정하고, 내부 요소에 flex-grow: 1;을 적용하여 요소가 가능한 최대 너비를 차지하도록 할 수 있다. 이렇게 하면 내부 요소가 부모 요소의 크기에 맞춰져 text-overflow: ellipsis;가 작동할 수 있다.

   .parent {
     display: flex;
   }
   
   .child {
     flex-grow: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   

2. display: inline-block; 사용: 요소에 display: inline-block; 속성을 적용하여 요소가 텍스트의 내용에 맞게 줄어들도록 할 수 있다. 이렇게 하면 요소의 크기가 텍스트의 내용에 따라 동적으로 조정되고, text-overflow: ellipsis;가 작동할 수 있다.

   .element {
     display: inline-block;
     max-width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

3. display: table; 사용: 요소에 display: table; 속성을 적용하여 텍스트의 내용에 맞게 동적으로 크기를 조정하도록 할 수 있다. 마찬가지로, text-overflow: ellipsis;를 사용하여 생략 부호를 표시할 수 있다.

   .element {
     display: table;
     width: 100%;
     table-layout: fixed;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

이러한 방법을 사용하여 너비를 지정하지 않고도 text-overflow: ellipsis;를 사용할 수 있다. 텍스트가 요소의 크기를 초과하는 경우에 생략 부호를 표시하여 내용을 축약하고 싶을 때 유용하다.

10. white-space

CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정한다.
break-spaces는 생소해서 비교하며 차이점을 정리해봤다.

normal

연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.

nowrap

연속 공백을 하나로 합침. 줄 바꿈은 [<br>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/br) 요소에서만 일어납니다.

pre

연속 공백 유지. 줄 바꿈은 개행 문자와 [<br>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/br) 요소에서만 일어납니다.

pre-wrap

연속 공백 유지. 줄 바꿈은 개행 문자와 [<br>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/br) 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.

pre-line

연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 [<br>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/br) 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.

break-spaces

다음 차이점을 제외하면 pre-wrap과 동일합니다.
• 연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.
• 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.
• 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(min-content, max-content)에 영향을 줍니다.

11. calc 사용은 지양 ?

calc() 함수는 CSS에서 수학적인 계산을 수행하기 위해 사용되는 함수입니다. 이 함수를 사용하여 값을 동적으로 계산하거나 단위 간의 연산을 수행할 수 있습니다. calc() 함수 자체는 성능에 큰 영향을 미치지 않습니다.

calc() 함수는 런타임에 계산이 이루어지기 때문에 초기 렌더링 성능에는 영향을 미치지 않습니다. 그러나 calc() 함수를 지속적으로 사용하면 계산이 많이 필요한 스타일 속성의 값이 변경될 때 성능 저하의 가능성이 있습니다. 예를 들어, 많은 요소에 대해 calc() 함수를 사용하여 너비나 높이를 계산하는 경우, 레이아웃 계산이 매번 발생하고 성능 저하의 원인이 될 수 있습니다.

또한, calc() 함수를 사용하여 미디어 쿼리 또는 애니메이션 등에서 사용할 때에도 성능 이슈가 발생할 수 있습니다. 브라우저는 calc() 함수의 계산 결과를 갱신하기 위해 추가적인 작업을 수행해야 하기 때문입니다.

따라서, calc() 함수를 적절하게 사용하는 것이 중요합니다. 필요한 경우에만 사용하고, 계산이 자주 발생하는 요소에는 최대한 사용을 제한하는 것이 좋습니다. 또한, calc() 함수 대신 고정된 값을 사용할 수 있는 경우에는 그 방법을 선호하는 것이 성능 향상에 도움이 됩니다.