[posco] 정리

오리·2024년 9월 19일

포스코 프로젝트 도중 피드백받고 부가적으로 정리해야 할 내용들을 추가해보았다.

1. head 링크 순서

부트스트랩이 jquery등을 사용하기 때문에 제이쿼리가 가장 상단에 와야한다.

   <script src="./js/jquery-3.2.1.slim.min.js"></script>
	<script src="./js/bootstrap.bundle.min.js"></script>

라이브러리를 위쪽에 위치하고, 내부 공통css 등은 그 밑에 위치하게 한다. 왜냐하면 내부 css에서 라이브러리를 사용하기 때문에 라이브러리가 먼저 로드되어야 한다.

-> 부트스트랩에서 reset을 자동으로 하는데, 경로위치가 잘못되어 reset이 되지 않는 문제가 있었다. 이는 reset파일을 다시 만들기보다는, 부트스트랩이 잘 적용되었는지 보는 것이 우선이다.

2. 상대경로 사용하기

절대경로는 최상위 폴더(루트 디렉토리)부터 시작해서 해당 파일까지의 경로를 나타낸다.
상대경로는 현재 폴더에서 목표폴더까지의 경로를 나타낸다.
즉, 절대경로는 내 컴퓨터 뿐아니라 다른컴퓨터에서도 똑같은 경로로 위치해야한다. 이는 변수가 너무 많기때문에 상대경로 사용이 권장된다.
그리고 보안상의 이유로 서버에서 사용하는 절대경로는 외부에서 차단 될 가능성이 높다.
즉, 절대경로는 위치가 고정되어 있지만 상대경로는 프로젝트 내의 위치에서 이동하는 것이므로 유동적이다. 따라서 상대경로를 사용하는 것이 좋다.

3. img 대신 background-image 사용하기

구조상에서 img가 필요한 것이아니라 단순 꾸미기 용도의 icon같은 이미지라면 img태그는 사용하지 않는 것이 좋다. 로딩하는 데 길어지기 때문이다.
혹은 가상선택자인 before,after로 해도 된다.

4. 클래스명

info-wrap 이라는 형태라면 내부에 info라는 클래스가 정의되어 있는 것이 더 직관적이고 좋다.

5. px 등은 사용하지 않는 것이 좋다.

vh vw % 등으로 사용하고 px은 rem등으로 변환시키는 것이 좋다.
화면비율에 맞춰서 값이 조정되는 위 값들과는 달리 px은 화면비율에 맞춘 것이 아니므로 반응형이 아니더라도, 웬만해선 사용이 권장되지 않는다.
vscode의 확장프로그램인 px to rem 사용 시 좀 더 간편하게 사용 가능하다.

6. 🌟여러번 쓰이는 것은 컴포넌트화 시킨다.🌟

위와같이 헤더, 푸터, 모달같이 자주 쓰이는 것은 컴포넌트화 시키고 이를 복사 붙여넣기 하여 다른곳에서 쓰거나, 혹은 js로 include하는 코드 만들어 사용할 수 있다.

  $(function () {
                var includes1 = $('[data-include1="header"]');
                var includes2 = $('[data-include2="footer"]');
                jQuery.each(includes1, function () {
                    $(this).load('../component/_header.html');
                });
                jQuery.each(includes2, function () {
                    $(this).load('../component/_footer.html');
                });
            });

<div data-include1="header" id="header"></div>

잘 사용하면 엄청나게 시간이 단축된다..!

7. 전체구조는 layout(메인)페이지 초기에 만든다.

회사에서 제공한 전체 틀을 참고하여 wrap->ct->cotainer 구조를 참고하도록 한다.
헤더 푸터 둘다 wrap안에는 있되, ct 밖에 위치하도록 한다.
dd/dt ul/li 등 너무 div태그만 사용하지 않도록 주의한다.

8. 공통 css

공통 css는 common.css에 넣고 보통 글씨크기, 패딩값, 마진값, 컬러 등을 기초적으로 같이 쓰며 공통으로 자주쓰는 html을 컴포넌트에 넣어놨듯이, 공통 css들을 넣는다.
utils에는 아이콘들을 넣는다.

9. 파일구조

파일은 개별 css는 자제한다.
공통 css,js를 만들고 개인 css는 main.css에 넣어 구분할 수 있게한다.

10. onclick과 a링크 차이점

onclick은 자바스크립트로 하는 동적인 처리이다. 즉 사용자에게 인터랙티브한 경험을 제공할 수 있고, 리로딩이 되지 않는다는 장점이 있다. 하지만 seo 검색엔진에 걸리지 않는다는 단점이 있다.
a태그 링크는 반대로 seo에 유용하지만 리로딩이 되고 동적인 부분이 아쉬운 점이 있다. 페이지간 url 이동이 진짜로 되는 것이다.

11. png보단 svg

svg는 정적인 이미지 파일이 아니기때문에 filter로 색깔 바꾸거나 나중에 유동적으로 바꿀 수 있다는 엄청난 장점이 있다.
피그마에서 해당 요소 클릭 후 export->svg로 선택 가능하다.
vscode의 svg preview / image preview 확장자 다운로드하면 쉽게 svg파일 볼 수 있다.
css의 filter로 색깔 변경시킬 수 있다.

종합정리 하자면..

많이 후회했던건 컴포넌트를 따로 안만들고 초기에 그냥 썼던거. 앞으로 한다면 메인페이지 만들고 컴포넌트 빨리 만들어놓고 반복되는건 그냥 갖다 붙여썼을 것이다.
피그마 분석이 좀 걸리더라도 공통되는 버튼이나 input창, 모달창 등을 정리하는 것이 좋을듯하다.
일일히 relative해서 top으로 먹이기보다는 웬만해선 justyfied-content를 이용해서 사용하자.
대표님 말씀으로는 container를 한개만 쓰는게아니라 부분부분마다 container 사용해서 마진 left,right를 먹였으면 하나하나 하지 않아도 됐을거라 하셨다.
그래도 막막했는데 어찌저찌 하다보면 답은 나오고 하게되어있다... 일단 초기에 감도 안잡히고 막막해서 막 만들어놓는데 이게 시간잡아먹는 하마의 원인이 된다.. 좀 릴렉스하고 처음부터 잘 생각하면서 만들자