# share-blog

11개의 포스트

[giruboy]script 선언 위치에 따른 브라우저 실행 속도 개선

이전에 포스트에서 언급하였듯이, 프로젝트 중 코드블럭에 highlighting 기능을 넣기 위해 highlight.js 라이브러리의 cdn을 이용하였는데 script의 선언 위치에 따라 브라우저의 실행속도에 영향을 미친다는 것을 알게되었다. 1. 브라우저의 동작 방식 먼저 브라우저 동작방식에 대해 알아야하는데 간단하게 서술하면 다음과 같다. HTML을 읽기 시작함 HTML 파싱(파싱,parsing: 컴퓨터가 읽을 수 있는 코드로 바꾸는 작업) DOM 트리 생성 Render 트리 생성 브라우저(display)에 표시 위의 과정 중 HTML을 읽어내려가는 과정에서 script요소를 만나면 파싱을 중단하고 javascript 파일을 로드, javascript 코드를 파싱 후에 다시 HTML 파싱이 계속된다. javascript는 싱글스레드로 동작하는데, 한가지 일을 하고 있을때 모든 작업이 block 된다는 뜻이다. 결론적으로 script의 위치

2022년 10월 11일
·
0개의 댓글
·

[giruboy]개발자 도구 network 탭 정리

프로젝트 중 코드블럭에 highlighting 기능을 넣기 위해 highlight.js 라이브러리의 cdn을 이용하였는데 script의 선언 위치에 따라 브라우저의 실행속도에 영향을 미친다는 것을 알게되었다. 이에 대해 먼저 공부하기 전에 네트워크의 속도, 응답을 판단하는데 도움을 줌과 동시에 서버와 데이터를 주고 받을 때 디버깅을 할 수 있도록 도와주는 도구인 network탭에 대해서 먼저 알아보았다. 간단하게 network 탭에서도 실행 속도를 쉽고 빠르게 판단하는데 도움을 주는 요인들은 다음과 같았다. > Waterfall Waterfall은 request가 언제,얼마만큼의 시간이 소요되며 도달하는지에 대한 정보를 나타낸다. Waterfall 클릭 시 '총 소요시간', 'content가 다운로드 되는데 걸린 시간', 'request를 보내는데 걸리는 시간' 등 더 디테일한 사항을 볼 수 있다. > Network 탭 최하단의 DOMContentLoaded Wat

2022년 10월 11일
·
0개의 댓글
·

[giruboy]github 협업 중 conflict 없는 PR을 위한 문제해결

Git을 이용한 협업 workflow에는 여러가지 방법이 있는데, 현재 우리가 사용하고 있는 방법은 Feature Branch Workflow 이다. Feature Branch Workflow의 핵심은 기능별 브랜치를 만들어 작업하는 것이다. master브랜치는 항상 버그 프리 상태로 유지하며, 병합시 권한을 가진 사용자가 풀 리퀘스트를 적용할 수 있다. 현재 우리의 원격 저장소의 branch는 다음과 같다, ops-main : 서버 Release를 위해 사용되는 브랜치(=master 브랜치) dev-main : 개발용 브랜치 기타 branch (특정기능개발용, 버그 수정용, 문서수정용, etc.) 내 이름의 branch : 아직 Github와 개발에 미숙하여 이를 위한 연습용 branch 따라서 최종 개발을 위해 기타 branch -> dev-main로 먼저 PR(Pull Request) 후 문제가 없는 버그 프리 상태가 되면 다시 dev

2022년 10월 7일
·
0개의 댓글
·

[giruboy][Question]Django에서 javascript 불러오기

이전 회의 때 공유했던 기능 구현을 위해서는 javascript를 이용하여 해당 기능을 구현 할 수 있는데 연동에 이슈가 있어 질문드립니다. 제가 기존에 알고 있는 부분과 html에 javascript를 연결하는 방법 해당 사이트를 참조하였을 때 제 판단으로는 base.html 파일의 ` 태그 안 하단의 코드가 연동을 담당한다고 생각하여 scripts.js` 파일을 수정해보았는데 아무런 동작을 하지 않습니다. 제가 추가했던 코드는 직관적인 판단을 위하여 아래와 같은 코드를 사용하였습니다.

2022년 10월 6일
·
0개의 댓글
·
post-thumbnail

[giruboy]highlight.js를 통한 코드 하이라이팅 기능 추가

개요 블로그 포스트 내용 중 코드박스에 해당 하는 부분이 하이라이팅이 되지 않아 해당 기능을 구현하고자 한다. highlight.js highlight.js는 스크립트 파일 하나와 CSS 파일 하나로, 코드를 코드 에디터처럼 정돈해주는 라이브러리이다. 언어 지원 현재 197개의 언어를 지원하고 있다.(22.10.01기준) 단, CDN 이용 시 22개의 언어만 사용 가능 한 것으로 알고 있다. 지금 개발 중인 블로그에서는 기본적인 주 언어만 필요하다 판단되어 간편하게 CDN을 이용하였고 필요 시 다운로드를 받아 확장 예정이다. 스타일 지정 언어의 종류에 이어 248가지의 스타일 지정도 가능하다. 이를 이용해 코드블럭의 background 색상이나 codehighlight 색상도 기호에 맞게 변경 가능하다. 다른 스타일 지정 방법은 밑에서 설명하겠다. <br

2022년 10월 1일
·
0개의 댓글
·
post-thumbnail

[giruboy][Question] Dynamic page titles in Django

요청하신대로 오버라이딩을 통한 hmtl title 지정을 하는 중에 추가적인 기능 구현을 하고 싶어 공부하던 중 해결이 되지 않아 현재의 문제점을 공유드립니다. 일단 그 전에 html title이란 웹브라우저에서 탭에 나타나는 타이틀 텍스트를 말합니다. 제가 원하는 기능은 저희의 blog에서 게시물을 클릭 시 해당 게시물의 제목에 맞게 html title을 변경 하고자 합니다. 조금 더 이해를 돕고자 velog를 예시로 아래에 사진 첨부합니다. > 기본 저의 velog html title입니다. > 제 게시물 중 '[giruboy]target="_blank" 로 알아보는 tabnabbing' 이란 제목의 게시물을 들어갔을 때 html title입니다. ![](https://velog.velcdn.co

2022년 9월 30일
·
0개의 댓글
·

[giruboy]target="_blank" 로 알아보는 tabnabbing

브라우저에서 링크를 클릭 시 현재 탭에서 새로운 페이지로 전환 되는 것이 아닌 새로운 창을 열어 사용자의 불편함을 덜어 줄 수있는 target="_blank"는 굉장히 간편하고 쉬운 기능이다. 하지만 이는 약간의 주의 해야 할점이 있는데 tabnabbing 피싱 공격에 노출 될 수 있다는 점이다. MDN에서도 target을 사용할 때, rel="noreferrer noopener"를 추가해 window.opener API의 악의적인 공격을 방지하라고 권고하는 내용을 찾아볼 수 있다. Tabnabbing 이란? target="_blank"에 의해 열린 새 페이지에서 window.opener.location을 변경하여, 기존 페이지를 피싱 페이지로 변경해 사용자 정보를 탈취하는 것이다. 이러한 피싱이 가능한 이유는 기본적으로 새 탭을 열면 현재 탭을 열었던 탭의 참조를 반환하기 때문인데, 이 참조를 없애는 방법이 바로 rel="noreferrer noopener"

2022년 9월 30일
·
0개의 댓글
·
post-thumbnail

[giruboy] bootstrap 템플릿 커스터마이징

현재 프로젝트의 테마는 startbootstrap에서의 포트폴리오 테마를 이용중인데 Footer의 내용과 구성을 커스터마이징 할 필요가 있어 bootstrap의 class들을 이용하여 아래와 같이 코드를 수정하였다. +)혹시 모를 보안을 위해 웹페이지에 들어가는 text들은 * 처리 하였다. 참고로 기반이 되었던 bootstrap은 링크와 같다. 이와 같이 bootstrap의 class들을 이용하면 테마를 사용자에 맞게 쉽게 수정할

2022년 9월 28일
·
0개의 댓글
·

[giruboy] FE 향후 계획안

저희 프로젝트 FE 파트 향후 변경 계획 안입니다. 최종적으로는 블로그 테마 자체를 velog와 비슷한 형식으로 변경 예정이나 이는 프로젝트 진행 속도를 보고 유동적으로 판단하겠습니다! 추가적으로 변경 원하시는 부분 있으면 댓글 남겨주세요. 홈 화면 이미지 변경 왼쪽 상단 'SHARE BLOG' 클릭 시 홈화면으로 이동 기능 POST LIST 게시물 배치(갯수) 변경 페이지 이동 시 url 변경 copyright 기능 구현 +) 이번주(~9/25) 까지 구현 예정 홈화면은 Vue.js를 통한 infinite scroll 기능 구현 네비게이션은 좌측 상단으로 이동 +) 9/29 추가 내용 요청에 따라 웹클라이언트에 추가 해야 할 기능입니다. 오버라이딩을 통한 title 상속 지정 highlight.js를 이용한 각 언어별 하이라이트 기능 추

2022년 9월 22일
·
0개의 댓글
·

[giruboy] blog server run error

master branch의 최신 커밋을 원격 저장소에서 pull 하였고 blog 서버를 실행하고자 하니 >ModuleNotFoundError: No module named 'app.settings' 라는 오류가 뜹니다. 제가 코드를 수정한 부분은 없고 똑같이 venv activate 후 runserver 시에 다음과 같이 뜹니다. 이에 대해서 여쭈어보고자 합니다!

2022년 9월 19일
·
0개의 댓글
·

[giruboy][Git] "LF will be replaced by CRLF the next time Git touches it"

git bash로 파일 add 과정 중 다음과 같은 에러가 발생하였다. >왜 발생할까? mac 또는 linux를 쓰는 개발자와 windows를 쓰는 개발자가 Git을 협업할 때 발생하는 Whitespace 에러다. windows에서는 Carriage Return(CR,\r)과 Line Feed(LF,\n)를 개행문자로 사용해 즉 CRLF로 이루어졌고, linux와 mac에서는 Line Feed만 사용해 LF로만 이루어져있기 때문인데 어느 한 쪽을 선택할지 Git에게 혼란이 온 것이다. 이는 core.autocrlf 기능을 이용하여 해결이 가능하다. git autocrlf 설정 먼저 Git에서 core.autocrlf는 파일을 git object에 체크인할 때 개행문자를 처리하는 옵션인데, 이를 이용해 설정이 가능하다. windows 사용자의 경우 이러한 변환이 항상 실행되도록 다음과 같은 명령어를 입력한다.

2022년 9월 15일
·
0개의 댓글
·