codinghatso

https://kciter.so/posts/principles-of-debugging/ 디버깅 원칙디버깅, 개발자라면 누구라도 한 번쯤 겪었고 앞으로도 꾸준히 겪어야 할 피할 수 없는 숙명이다. 우리는 간단한 논리적 실수부터, 도저히 원인을 알 수 없어 며칠 동안 머리를 싸매는 버그를 해kciter.sokciter님의 포스팅을 보면서 이해한 내용을 나만의 방식으로 정리한 리뷰글입니다. 디버깅을 할 때 한 부분에 집착하는 사고방식을 모든 것을 의심하는 사고방식으로 바꾸는 것을 권하고 있다.나 또한 프로젝트를 하면서 디버깅을 할 때 꼬리에 꼬리를 무는 형식의 문제해결 방식으로 힘들게 학습을 했던 개발자였다. 해당 포스팅을 읽고 공감하는 부분이 많았기 때문에 집착하는 사고방식을 개선하려고 한다. 직관과 탐정이..

끝말잇기 웹 게임을 만들면서 사고력 기르는 훈련을 하고자 합니다.순서도 설계를 통해 절차를 정리한다면 좋은 결과를 얻을 수 있다.내부함수[prompt : 입력값 받기alert : 공지하기confirm : 의사를 물어볼 때 ] 입력태그는 value로 값을 가져오며, 이외 태그들은 textContent로 값을 가져오고 설정한다.순서도의 의사결정 부분에서 OR 또는 AND인지에 따라 최적화가 가능하다.최적화는 진리표를 사용하면 더 정확하게 구분할 수 있다. 예) OR 진리표첫 번째 조건두 번째 조건최종 결과truetruetruetruefalsetruefalsetruetruefalsefalsefalse내용 정리순서도 그리기대화 상자 띄우기태그 선택하기태그에 이벤트 달기순서도 최적화하기 1번째 참가자..

rAF는 자바스크립트가 프레임 시작 시 실행되도록 보장해 주어 밀림 현상을 방지한다.페이지가 비활성화되면 작업이 중지됨으로 CPU 리소스나 배터리 수명을 낭비하지 않게 된다.디스플레이의 주사율에 따라 최적화되는 특징이 있다. 60hz에서는 1초에 60번 144hz에서는 1초에 144번 호출되는 것이다.rAF는 스크롤 이벤트 최적화 기법으로 사용된다. rAF는 setTimeout 처럼 콜백 함수 내부에서 재귀 호출 하는 식으로 구성하면 된다.차이점은 setTimeout은 타이머를 지정해주어야 하지만, rAF는 프레임 단위로 동작하기 때문에 별도의 반복 플래그가 필요 없다는 점이다.const performAnimation = () => { /* 스타일 조정 스크립트 */ requestAnimation..

DOMContentLoaded와 window.onload는 모두 웹 페이지 로딩 과정에서 발생하는 이벤트입니다만, 각각의 이벤트가 발생하는 시점과 그 의미에는 중요한 차이점이 있습니다. DOMContentLoadedHTML문서가 완전히 로드되고 파싱 되었을 때 발생합니다.DOM 트리가 완성되었으며, 스크립트 실행을 위한 준비가 완료된 상태입니다.외부 리소스(이미지, 스타일시트, 프레임 등)의 로딩을 기다리지 않습니다.주요 포인트실행 시점 : 이 이벤트는 HTML 문서가 완전히 파싱되고, DOM 트리가 완성되었을 때 발생합니다. 하지만 이미지, 스타일시트, 프레임 등 외부 리소스의 로드는 기다리지 않습니다.사용 이유 :  이 이벤트 리스너는 문서가 완전히 로드되었을 때 JavaScript 코드가 실행될 준..

1. 정보설계 - 페이지를 다이어 그램 형식으로 만들어 보는 단계 2. 로우파이 스케치 - 손으로 간단히 그려보는 와이어 프레임 3. 와이어프레임 만들기 아이콘 명확한 의미 전달 방법 1. 사용자 테스트 2. 업계에서 활용되는 디자인 참고하기 (google icons) 많은 사용자들이 해당 회사의 디자인에 많이 노출되어있기 때문에 참고하여 디자인한다면 효과적이다. 디자인 시스템 일관된 사용자 경험 제공 빠르고 효율적인 디자인 (디자이너 관점) 빠르고 효율적인 개발 (개발자 관점) - 일관성을 지키며 작업을 한다면 불필요한 작업이 줄어든다. 일관된 스타일 두께 색상 크기 등 일관된 스타일의 아이콘을 사용해야 함 스타일을 컴포넌트화 해서 적용시켜야 한다. 폰트, 색상, 효과, 레이아웃 등 Text, Colo..

시작하기 앞서 객체지향 프로그래밍과 함수형 프로그래밍의 차이점을 간단하게 정리하려고 합니다. 함수가 일급이냐 vs 객체가 일급이냐 * 일급 : 값으로 다룰 수 있으며, 변수에 담을 수 있다. 함수에 인자로 사용될 수 있으며, 결과로도 사용될 수 있다. 객체지향 프로그래밍 일급 객체를 사용을 지향하는 프로그래밍을 객체지향 프로그래밍이라고 합니다. 객체가 처리 요청을 받으면, 객체 내부에서 데이터 처리 후 반환하는 방식입니다. 객체지향의 큰 특징은 캡추다정상 으로 외웠던 그 단어들이 잘 보여줍니다. 캡슐화 추상화 다형성 정보은닉 상속성 여기서는 각 특징에 대한 자세한 글은 작성하지 않을 것입니다. 추가적으로 최근에는 캡추상다 연(관성) 정으로 외우시는 분들도 있는 것 같습니다. 개인적으로 객체지향은 캡슐화와..

JS로 재사용가능한 태그 만들어 사용하기 let 변수이름 = document.createElement("태그이름"); - 변수에 원하는 태그를 생성하여 담아놓는 패턴. let 텍스트변수 = document.createTextNode("문자열 또는 HTML Symbols"); - 변수에 문자열이나 특수문자를 담아놓고 사용하는 패턴. https://www.htmlsymbols.xyz/unicode/U+00D7 HTML Symbols ... www.htmlsymbols.xyz 담아놓은 '태그변수'에 Class를 부여하고 태그의 자식인자로 '텍스트변수'를 할당한다. 이렇게 활용 가능한 태그가 완성된다. 접근자 이해하기 선택된 태그의 위치를 파악하고, 선택된 태그를 기준으로 상대적인 경로로 접근합니다. 예) no..

의미론적 div 태그를 복습하기 용이하게 정리해 보았습니다. 매번 구글링 해서 하나하나 찾고 복습하는게 매우 효율적이지 못하다고 생각해서 작성한 포스트입니다. 강조할 문자열