[카테캠 선택 강의] 스타벅스 웹사이트 검색창 연속클릭 버그 수정

문제 상황 문제 상황은 다음과 같다. 검색 input안의 아이콘을 연속클릭하면 검색창이 왔다 갔다한다. 문제 원인 HTML, CSS, JS 의 코드는 다음과 같다. HTML search header .sub-menu .search input { ... /* transition 의 default 값은 all 이지만 아래처럼 width 속성만 지정할 경우 transition 이 width 에만 적용돱니다. */ transition: width 0.4s; } header .sub-menu .search input:focus { width: 190px; border-color: #669900; } /** * 검색창 제어 */ // 검색창 요소(.search) 찾기. const searchEl = document..

HTML 공백 처리 방법

문제 상황 다음 두개의 코드가 있었다. Content .box::before { content: "앞!"; } Content .box::before { content: "앞!"; } HTML 형식만 다른데 공백의 유무가 차이가 있었다. 왜 그런지 이유가 궁금해서 이 글을 쓰게 됐다. 문제 원인 왜 이러한 공백 차이가 나타나게 된 것일까? 그 이유는 HTML 공백 처리규칙을 적용했을 때 공백이 남게되는 유무의 차이였다. 한번 개행, 탭 , 스페이스가 처리되는 과정을 살펴보자. 궁금한 코드 왜 공백이 생기는지 궁금한 코드는 다음과 같다. Content 여기서 탭, 개행, 스페이스는 다음 특수문자로 표시한다. ⇥ 은 탭 , ◦ 은 스페이스, ⏎ 는 엔터를 의미합니다. 또한 여기에 가상요소까지 붙는다면 다음과 ..

[바킹독 강의] 플로이드 와샬

https://blog.encrypted.gg/1035 [실전 알고리즘] 0x1C강 - 플로이드 알고리즘 안녕하세요, 이번에는 플로이드 알고리즘을 다루겠습니다. 이제 최단경로 알고리즘인 플로이드, 다익스트라 알고리즘만 다루고 나면 나름 길었던 그래프 파트가 끝납니다. 목차는 눈으로 한 번 blog.encrypted.gg 위 강의자료를 보며 생각해본점들을 기록합니다. 위 코드를 자바스크립트 코드로 바꾸면 아래와 같다. const fs = require("fs"); BOJkey = false; const input = fs .readFileSync(BOJkey ? "./ehddud1006/BOJ/11404/input.txt" : "./dev/stdin") .toString() .trim() .split("\..

[카테캠 3주차] CSS 속성

개요 속성 HTML 속성 (Attributes) CSS 속성 (Properties) JS 속성 (Properties) HTML 이랑 CSS, JS의 속성 영어 용어가 다르구나~ 정도로 알아두면 좋을 듯. 구분하면 유식해 보일 수도.. 너비(width, height) width 와 height 의 기본값은 auto 이다. 직접적으로 값을 주고 싶다면 px, em, rem, vw, vh 를 사용하면 된다. 인라인 요소의 auto 값 인라인 요소의 auto 값은 width , heigth 모두 요소의 콘텐츠 크기만큼 자동으로 할당된다. 블록 요소의 auto 값 블록 요소의 auto 값은 width 의 경우 부모 요소의 크기 만큼 자동으로 늘어난다. height 같은 경우 콘텐츠의 크기 만큼 자동으로 줄어든다...

[카테캠] 카카오 테크 캠퍼스 굿즈

굿즈 수령 오오.. 수령을 학교 건물 7번 라인에서 했는데, 너~어무 멀어서 힘들었다. 그래도 굿즈 받으니 광대 승천. 상품 구성 언박싱 언박싱하려고 두고 갔는데 조카가 다 풀어놨길래 다른분이 올려주신 사진으로 대체합니다 🤣 출처: [카테캠] 백엔드 과정 1기 웰컴키트(굿즈) 리뷰 오호~ 그립톡도 있고 , 에코백도 있고, 펜도있고 노트도 있고. 근데 뱃지는 왜..? 옷에 장착하면 간지 나긴 할 것 같다. 출처: [카테캠] 백엔드 과정 1기 웰컴키트(굿즈) 리뷰 근데 스티커가 없어서 아쉬웠다.. ㅠㅠ 그래서 그립톡 분해해서 노트북에 붙혔다. ㅋㅋ 없으면 만든다는 정신 맥북 리셀할때 기스 날까봐 밑에 스티커를 깔고 분해된 그립톡을 붙혔다. 후기 웰컴키트는 해커톤에서 받은거 빼고 처음 받는데 역시 선물은 언제..

[카테캠 3주차] CSS 개요

기본 문법, 주석 선택자: CSS 를 적용할 대상 속성 : CSS의 종류 값 선언 방식 내장 방식 인라인 방식 css 적용 우선순위중 가장 높은 순위를 가지게 된다. CSS 유지보수를 하는 경우에 !important 와 더불어 문제가 될 가능성이 높기 때문에 지양하는 것이 좋다. 링크 방식 @import 방식 처음본거같은데.. 반성합니다. 자주 쓰는 방식은 아니라고한다. 직렬으로 연결하는 방식 why 직렬? main.css 가 HTML 문서에 링크되어있지 않으면 box.css 도 사용되지 않기 때문이다. CSS 선택자 기본 선택자 1. 전체 선택자 모든 요소를 선택합니다. 2.태그 선택자 3. 클래스 선택자 4. 아이디 선택자 복합 선택자 1. 일치 선택자 아래 예시에서는 태그 선택자와 클래스 선택자가 ..

나의 깃 브랜치 전략

카카오 테크 캠프의 실시간 세션에서 Git 에 대한 강의를 듣게 되었습니다. 집중력이 안좋아서 그런지 자꾸 딴생각이 들던 중, 나는 프로젝트를 진행할때 어떤 브랜치 전략을 사용하고 있었지? 타인에게 설명할 수 없다는 것을 깨달았습니다. 이러한 부족함을 안고서 나는 어떤 브랜치 전략을 사용하는지 설명할 수 있어야 겠다 라는 생각이 들어 이 글을 씁니다. 내가 생각하고 있는 전략 1. main 은 배포되는 브랜치이며, 개발은 dev 브랜치에서 이루어진다. 2. dev 브랜치를 기준으로 각자가 맡은 이슈를 feat 브랜치에서 개발한다. 3. 개발이 완료되면 feat 브랜치에서 QA 를 진행한다. 4. 안정성이 검증되면 dev 로 pull request 를 보낸다. 5. 코드 리뷰 후 dev 에 merge한다...

[바킹독 강의] 다익스트라

https://blog.encrypted.gg/1037 [실전 알고리즘] 0x1D강 - 다익스트라 알고리즘 네 반갑습니다. 이번에는 다익스트라 알고리즘을 해보겠습니다. 플로이드 알고리즘이랑 비슷하게 구현과 경로 복원 방법 모두 BOJ에 있는 문제를 가지고 직접 풀어볼거라 별도로 연습 문제 챕터 blog.encrypted.gg 위 강의자료를 공부하면서 한번 더 생각해본 점들을 기록합니다. 왜 O(VE) 일까? 강의 자료 1 ~ 13 페이지 설명을 구현한 로직은 O(VE) 를 가진다고 설명해주셨습니다. 왜 O(VE)일까를 한번 생각해봤습니다. 해당 로직에서는 다음 정점을 찾기위해서 fix 된 정점(노란색 표시된)에서 간선을 탐색하여 4번 5번 정점으로 이동할 수 있습니다. 따라서 정점의 모든 간선을 탐색하기..

CSRF (Cross-Site Request Forgery) 공격과 방어

CSRF 란? 인터넷 사용자(희생자)가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 만드는 공격입니다. 쿠키 + 세션 해커가 CSRF 공격을 시도하기 위해선 전제조건이 필요합니다. 쿠키 세션은 전제조건에 해당되므로 이 내용을 이해하면 후의 글을 이해하는데 도움이 될 것 입니다. 사용자가 특정 서버에 로그인하면 일반적으로 다음과 같은 작업들이 수행됩니다. 서버는 로그인 시 인증된 사용자의 정보를 세션(session)에 저장하고, 이를 찾을 수 있는 sessionID를 만듭니다. 서버는 전달된 세션 정보를 클라이언트(브라우저)가 사용할 수 있도록 sessionID를 Set-Cookie 헤더에 담아서 전달합니다. 클라이언트(브라우저)는 전달된 session..

DOM 기반(DOM based) XSS(Cross-Site Scripting) 공격과 방어

XSS (Cross-Site Scripting) 이란? 가장 널리 알려진 웹 보안 취약점 중 하나입니다. 악의적인 사용자가 공격하려는 사이트에 악성 스크립트를 삽입할 수 있는 보안 취약점입니다. XSS를 통해 악성 코드를 제어하는 사이트로 리다이렉트 하거나, 사용자의 쿠키를 탈취하여 세션 하이재킹 공격을 할 수 있습니다. 대표적인 공격 방식은 다음과 같습니다. Stored XSS Reflected XSS DOM Based XSS DOM based XSS DOM 기반 XSS 공격은 보안에 취약한 JavaScript 코드로 DOM 객체를 제어하는 과정에서 발생합니다. DOM based XSS 공격 시나리오 악의적인 사용자가 보안이 취약한 사이트를 발견했습니다. 보안이 취약한 웹 페이지에서 악성 스크립트가..