본문 바로가기
반응형

전체 글144

자료구조와 알고리즘이란? 공식을 증명하면서 깊이 생각하면서 하면 굳이 외우지 않아도 증명하면서 다른문제에 대해서 스스로 사고하는 능력이 생긴다. 자료구조와 알고리즘도 마찬가지다. 자료구조와 알고리즘의 특징만 외우는 것이 아닌, 연결리스트를 완벽히 이해하고 있으면 머릿속으로 한번 그려보면 특징을 혼자 찾을 수 있다.  각각의 잘구조와 알고리즘의 특성을 머리로 그려가며 이해하는것이 필요함.구현을 하게되면 머리로 이해하는 것보다 더 많은 생각을 하게 된다. 직접 그림을 그려가며 상황을 만들고 천천히 이해하기에 기억에 더 오래 남는다.  다시 머릿속으로 그 과정을 떠올리면 특징을 금방 찾을 수 있다. 자료구조와 알고리즘은 일반적인 비즈니스로직보다 난이도가 높다.  어려워도 포기 하지 말자!! 프로그램은 자료구조와 알고리즘으로 이루어진다.. 2024. 12. 29.
웹 컴포넌트 API를 사용할 때 style 적용 방법 웹 컴포넌트 API를 사용하여 inline 스타일을 사용하지 않고 태그 내에서 CSS를 적용하려면, Shadow DOM을 사용하여 스타일을 컴포넌트 내부에 캡슐화할 수 있습니다. 이렇게 하면 class나 id 값 없이도 스타일을 적용할 수 있습니다.class MyElement extends HTMLElement { constructor() { super(); // Shadow DOM을 생성 const shadow = this.attachShadow({ mode: 'open' }); // 태그와 내용을 생성하여 Shadow DOM에 추가 const style = document.createElement('style'); style.textContent = ` .. 2024. 12. 6.
마우스 커서 css로 변경시 Base64를 사용하기 자바스크립트로 특정 위치에서 오른쪽 마우스가 눌렸을 때 마우스 모양을 변경을 하는 기능이 추가되었다. 클래스를 추가했고, 기능은 제대로 동작이 되는데 마우스 모양이 계속 변경이 되지 않는 이슈가 있었다. 경로도 분명 잘 되었고 개발자도구에서도 이미지는 보이는데 왜 커서가 변경되지않았다.찾아보니 브라우저가 읽어올때 캐싱이나 로드 실패의 경우도 있을거라는 추측이다.  방법은 base64 형식으로 이미지를 변경해서 즉시 변경 할 수 있게 하는 방법이다.  .custom-cursor { cursor: url('https://example.com/cursor.png'), auto; }해당 방법으론 변경이 되지 않았고 .custom-cursor { cursor: url('data:image/png;ba.. 2024. 12. 6.
배열연습 const files = [ { name: 'file1.jpg', id: null }, { name: 'file2.jpg', id: 123 }, { name: 'file1.jpg', id: 456 }, { name: 'file3.jpg', id: null }, { name: 'file2.jpg', id: 789 },];여기서 name이 같은 파일들끼리 묶여 있으며, id 값이 있는 항목이 있습니다. 사용자가 id 값이 없는 요소(예: file1.jpg의 첫 번째 항목)를 클릭했을 때, 같은 파일 이름을 가진 항목 중에서 id 값을 출력하도록 해보기 첫번 째 방법아이디 값이 없는 요소 클릭 시, 해당 요소의 name을 기준으로 같은 파일을 찾음.해당 파일들 중 id 값을 갖고 .. 2024. 11. 22.
728x90
반응형

티스토리툴바