웹개발 nav 부분 어떻게 하시나요?

Question

안녕하세요.웹개발 공부하며 웹사이트 만들어보고 있습니다.현재 프론트엔드 부분을 jquery, react, vue 등의 프레임워크를 사용하지 않고, html, css, js 로 만들고 있습니다.원인.header(nav), footer 등 모든 페이지에 동일하게 들어가는 부분을 각 페이지의 html에 작성하게될 경우추후 수정이 필요할 때 각 html 파일에서 수정을 해야하는 점이 번거롭고, 실수가 있을 것 같다고 느꼈습니다.시도.그래서 header.js 파일을 만들어서 헤더를 작성한 후 페이지 랜딩될 때 innerHTML로 헤더를 보내주는 방법을 시도했습니다.(이 과정에서 클라이언트의 로그인여부에 따라 헤더에 노출되는 값이 달라져서 ('로그인' -> '000님', '회원가입' -> '로그아웃')axios를 통해 유저 정보를 확인하여 헤더에 담은 후 innerHTML 되도록 구현했습니다.)문제.그러다 보니 html 파일이 랜딩된 후 헤더영역이 랜딩되어 화면을 볼 때 헤더가 조금 뒤늦게 끼어드는 것 처럼 보여 UX 측면에서 안좋다고 느꼈습니다.질문.Q. react 등의 프레임워크 없이 html,css 으로 페이지 만드실 때 nav, footer 등 반복되는 부분 비효율적이지만 각 html에 직접 작성하시나요..? (이후 수정이 필요할 때도 직접 하나씩 다 수정하시구요..?) 아니면 따로 컴포넌트로 만들어 사용할 수 있는 방법이 있을지.. 혹은 위에 시도-문제 에 대하여 조언도 감사하겠습니다 ㅠㅠ 독학으로 공부하고 있는 중이라 개념적으로 맞지 않는 단어나 표현이 있더라도 양해부탁드리고, 지적해주시면 배움에 도움이 되겠습니다!

코린이듈리 · Accepted Answer

html의 template element를 사용해 웹컴포넌트를 작성하는 방법 리액트 등 라이브러리의 렌더링 방식을 직접 구현해 컴포넌트를 만드는 방법이 있겠습니다.전자의 방법을 택하신다면 아래의 글 1 ~ 4 까지가 도움이 될거라 생각합니다.https://ui.toast.com/posts/ko_20170901후자의 방법을 택하신다면 아래 블로그를 추천드립니다. 정말 많은 도움이 됐었습니다.https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_1-%E1%84%8F%E1%85%A5%E1%86%B7%E1%84%91%E1%85%A9%E1%84%82%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3%E1%84%8B%E1%85%AA-%E1%84%89%E1%85%A1%E1%86%BC%E1%84%90%E1%85%A2%E1%84%80%E1%85%AA%E1%86%AB%E1%84%85%E1%85%B5

MungGaeDev · Answer

시도면에서, 헤더 같은 경우 처음부터 작성(정적으로 되어 있고)을 하고 내부 메인 페이지를 매번 바꾸는게(동적으로 로딩) 일반적이라 생각합니다. nav bar가 아무리 많이 바뀌어도 메인 안쪽의 화면보다는 덜 바뀌니까요.재밌게 봤던 관련 영상 남깁니다.https://www.youtube.com/watch?v=RtvSgptpfnY&ab_channel=%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8C

웹개발 nav 부분 어떻게 하시나요?

2개의 답변

Q&A 목록