전체 글

웹 사이트를 들어갔는데 필요한 정보를 한 번에 찾을 수 없다면 매우 불편하다.또한 화면의 구성이 이상하다면 정보를 보는데 방해가 될 수가 있다.이러한 점들을 고려해서 웹 레이아웃을 정해야 한다. 🌟  반응형 vs 적응형- 반응형화면 크기가 변경됨에 레이아웃이 달라지는 방식이다.깃허브 사이트가 반응형 사이트의 예시이다.화면의 크기가 변함에 따라 요소들의 크기가 변하다가 어느 순간이 되면 레이아웃이 변경되는걸 볼 수 있다. 장점웹/모바일 모두 동일한 사용자 경험을 제공한다.하나의 디자인에서 레이아웃만 변경하면 된다. 단점레이아웃을 세밀하게 조정해야 하기 때문에 반응형보다 까다롭다.모든 콘텐츠를 불러와서 화면 크기에 따라 자동으로 조정하기 때문에 로딩시간이 적응형에 비해 오래 걸린다. - 적응형모바일, 태블..

🌟 Border vs Outline- 공간 차지border은 공간을 차지하기 때문에 width가 200px인 요소에 5px의 border를 적용한다면 총 width는 (200 + 5 + 5) = 210px 이 된다.outline은 공간을 차지하지 않기 때문에 요소 자체의 길이에는 변화가 없다. - 주변 요소의 영향border를 적용하면 해당 요소의 크기가 변하기 때문에 레이아웃에 영향을 줄 수 있다.outline은 주변 요소를 가리거나, 주변요소에 가려질 수 있다. - 스타일링border는 border-top, border-left와 같이 한 쪽에만 border를 적용해 줄 수 있다.outline은 한 쪽에만 적용할 수 없다. - CSS Box Modelborder은 CSS Box Model에 포함되지..

내 브랜치가 오래된 브랜치란 사실과 pull을 받지 않았다는 사실을 잊은 채 merge를 시도했다.merge가 안된다는 오류가 떴고, rebase를 해야겠다고 결심했다.그래서 rebase를 했는데 계속해서 conflict가 생겼고.. conflict를 해결하다가 정신을 놓아버린 나머지 merge까지 시켰다.. 그 결과 그래프가 난리가 났고 ㅋㅋㅋㅋㅋㅋㅋ 기본 merge가 squash merge로 변경되었다.. 이래서 신입사원한테 merge 권한 안준다는 깨달음을 팀장 오빠에게 안겨주었다ㅎㅎ..- Merge 대부분 사용하는 방식으로, 커밋 이력이 모두 남는다. - Squash MergeSquash는 여러 개의 커밋을 하나로 합치는 것을 의미한다.Squash Merge를 하게 되면 이전에 했던 커밋 히스토리..

브라우저 렌더링 과정(완전 간단 설명)자세한 설명은 아래 있습니다~!https://heedonguri.tistory.com/1131. DOM 트리와 CSSOM 트리 생성2. DOM 트리와 CSSOM을 가지고 렌더 트리 생성3. 생성된 렌더트리를 이용해서 레이아웃 계산4. 계산된 값들을 기반으로 화면에 요소들을 그림 3번 과정을 다시 수행하는 것이 reflow이고 4번 과정을 다시 수행하는 것이 repaint이다.Reflow와 Repaint만약 스타일이나 DOM을 변경하는 경우에 리플로우가 발생하여 렌더트리를 재생성하고,생성된 렌더트리를 기반으로 리페인트가 발생한다. - Reflow요소의 위치나 크기를 다시 계산하는 것🤔 언제 발생하는데?DOM 요소의 기하학적 속성이 변경될 때브라우저의 크기(viewpo..

먼저 브라우저가 무엇인지부터 알고 가면 좋을 것 같다. 브라우저란?인터넷을 통해 웹 페이지를 탐색하고 사용할 수 있도록 도와주는 소프트웨어이다.HTML, CSS, JS를 이용하여 웹 페이지를 해석하고 렌더링한다. 브라우저는 위의 사진과 같이 구성되어 있다.사용자 인터페이스우리가 사용하는 브라우저의 주소 표시줄, 이전/다음 버튼 등 직접 상호작용하는 부분이다.브라우저 엔진사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.DOM 자료구조를 구현한다.렌더링 엔진HTML 및 CSS를 해석하여 화면에 출력하는 역할을 한다.통신HTTP 요청과 같은 네트워크 호출에 사용된다.자바스크립트 해석기JS는 한 줄씩 읽어가며 파싱하는 언어이기 때문에 해석기가 필요하다.자바스크립트 엔진이라고도 불린다.UI 백엔드렌더링 엔..

XSS란Cross Site Scripting으로 웹 사이트에 악성 스크립트를 주입하는 행동을 의미함클라이언트 사이드 취약점사용자 뿐만 아니라 서버도 공격 가능함CSRF와의 차이점CSRF- 특정 사이트가 사용자를 신뢰한다는 점을 공격, 악성코드가 서버에서 발생- 권한 도용이 목적 XSS- 사용자가 특정 사이트를 신뢰한다는 점을 공격, 악성코드가 클라이언트에서 발생- 쿠키, 세션 탈취, 웹사이트 변조가 목적 XSS 공격 종류- Stored XSS해커가 악성 스크립트를 DB에 저장시키고 사용자에게 악성 스크립트를 보내는 것이다.DB에 계속 저장되기 때문에 지속적으로 공격을 한다. 예를 들어, 해커는 게시글 작성을 통해 악성 스크립트를 DB에 저장시킨다.(ex 게시글 조회 시 쿠키 내놔)다른 사용자들이 해당 게..